2018，新一年到來，即將迎來新的挑戰(zhàn)和新的視野，我們想回顧一下，回顧這即將結(jié)束的一年是怎樣的。在這里，我們收集了在2017年Web端和移動(dòng)端界面贏得大獎(jiǎng)的趨勢(shì)的集合，其中案例大部分為Tubik團(tuán)隊(duì)的設(shè)計(jì)。
功能極簡(jiǎn)主義
相當(dāng)多的移動(dòng)應(yīng)用程序和網(wǎng)站基于極簡(jiǎn)主義的原則不斷發(fā)展和設(shè)計(jì)解決方案。極簡(jiǎn)主義界面的特點(diǎn)是對(duì)視覺元素的全面關(guān)注，不多，但總是傳遞一個(gè)特定的信息。
在極簡(jiǎn)主義方面經(jīng)常提到的主要特征包括：
·簡(jiǎn)單
·清晰
·富有表現(xiàn)力的視覺層次
·高度重視比例和構(gòu)圖
·每個(gè)元素的功能
·大量的空余空間
·對(duì)核心細(xì)節(jié)的高度關(guān)注
·字體設(shè)計(jì)是一個(gè)重要的設(shè)計(jì)元素
·消除非功能性裝飾元素
當(dāng)然，這些原則可以繼續(xù)沿用，但即使是給定了風(fēng)格，界面的簡(jiǎn)約相對(duì)而言是一個(gè)用戶友好體驗(yàn)的趨勢(shì)。好的應(yīng)用，它會(huì)幫助用戶看到界面的核心元素，使用戶使用起來直觀而有目的。此外，極簡(jiǎn)主義的界面通常外觀精巧整潔，帶來的美感也成為理想的用戶體驗(yàn)的因素之一。
粗獷
排版設(shè)計(jì)中的粗獷的趨勢(shì)去年開始飆升，2017年的表現(xiàn)更加明顯。它通常被描述為旨在打破標(biāo)準(zhǔn)和可預(yù)見的設(shè)計(jì)技巧的風(fēng)格。以這種方式創(chuàng)建的網(wǎng)站，是對(duì)精致設(shè)計(jì)的反叛，它具有深思熟慮的對(duì)稱性和和諧性，集成的布局和審美視覺表現(xiàn)力。相比之下，粗獷主義是基于簡(jiǎn)單和原始的外觀，在大多數(shù)情況下不加載許多視覺細(xì)節(jié)，有時(shí)甚至接近一個(gè)純HTML頁(yè)面。它被用于特定的目標(biāo)和受眾，具有高水平的獨(dú)創(chuàng)性，并賦予數(shù)字產(chǎn)品獨(dú)特的外觀。它可能被喜歡或不喜歡，但它從來沒有被忽視。
字體集成到圖像中
大膽和吸引人的排版也高度存在于Web和移動(dòng)布局中。今年，通過將標(biāo)題關(guān)鍵字或標(biāo)題融入在頁(yè)面上的視覺元素中，增強(qiáng)了布局元素的和諧與完整性，使排版與界面中的所有內(nèi)容緊密結(jié)合。
首焦Banner動(dòng)畫
在網(wǎng)頁(yè)設(shè)計(jì)中，首焦Banner是在與網(wǎng)站互動(dòng)的第一時(shí)間吸引用戶注意力的大圖。它們通常主題明確，突出關(guān)鍵內(nèi)容并有效抓住用戶眼球。首焦Banner證明它們?cè)谠O(shè)定情緒或傳遞信息方面非常有效。而且，除了網(wǎng)頁(yè)上的任何其他醒目的圖形外，它是一種內(nèi)容豐富而又情感化的內(nèi)容。突出的首焦Banner可以達(dá)到多個(gè)目的，例如：
·吸引用戶的注意
·直觀地傳遞消息
·支持一般的文體表達(dá)
·設(shè)定需要的主題、情緒或氛圍
·有效展示核心收益或項(xiàng)目
2017年，他們通常用原創(chuàng)動(dòng)畫形象強(qiáng)化，讓設(shè)計(jì)更生動(dòng)，使他們更具吸引力。
定制主題插圖
不同的風(fēng)格和復(fù)雜程度的定制插圖，正積極地覆蓋越來越多的Web和移動(dòng)用戶界面，增加了對(duì)信息的快速感知，為創(chuàng)意打下堅(jiān)實(shí)的基礎(chǔ)。Web和移動(dòng)界面應(yīng)用通過定制的吉祥物、圖標(biāo)和插圖來增強(qiáng)頁(yè)面或屏幕的外觀，并提高可用性和直觀的導(dǎo)航。此外，圖像改善了用戶體驗(yàn)設(shè)計(jì)的可訪問性，推動(dòng)了對(duì)具有文本識(shí)別自然問題的用戶的感知極限，例如閱讀困難或未閱讀的學(xué)齡前兒童。
這里最豐富的，可能是支持網(wǎng)站和應(yīng)用程序的主題插圖。他們似乎進(jìn)入了一個(gè)新的層次，變得更加精致、更復(fù)雜、更時(shí)尚、更具隱喻性。
無邊框布局
在今年的網(wǎng)頁(yè)界面中，經(jīng)常觀察到?jīng)]有任何框架的大背景圖片或圖案。它讓用戶感覺到布局更加通透寬敞，而背景圖像嵌入其中，又不會(huì)打破界限的感覺。
豐富的界面動(dòng)畫
和2016一樣，2017年在界面動(dòng)畫方面繼續(xù)深入。它不僅增加了交互過程中的趣味和手勢(shì)，而且大大提高了可用性。用戶體驗(yàn)變得更加豐富和引人入勝，而交互元素的操作變得更加清晰，并以可理解的方式回應(yīng)用戶。所以，今年設(shè)計(jì)師在各種按鈕，標(biāo)簽，圖表，預(yù)加載器和滾動(dòng)動(dòng)畫上運(yùn)行良好。
UI-friendly branding
2017年可以說是品牌重塑的一年，大量的全球和本土公司、產(chǎn)品和品牌都將Logo的形式和細(xì)節(jié)進(jìn)行簡(jiǎn)化。隨著越來越多的企業(yè)爭(zhēng)奪更高的在線業(yè)務(wù)，這一趨勢(shì)的原因之一是爭(zhēng)取更好的可用性和品牌元素的導(dǎo)向力。所以，為創(chuàng)建更友好的用戶界面（UI-friendly）而設(shè)計(jì)新的Logo或?qū)σ延蠰ogo的再設(shè)計(jì)，并使a其在各種數(shù)碼設(shè)備和布局上有效地感知互動(dòng)。此外，動(dòng)態(tài)Logo成為一個(gè)趨勢(shì)，使品牌符號(hào)更具交互性，并強(qiáng)化品牌意識(shí)。
單色的用戶界面
為了獲得最大的功能，對(duì)簡(jiǎn)約設(shè)計(jì)的興趣日益濃厚，導(dǎo)致了大量單色UI解決方案的出現(xiàn)。這些布局通常外觀時(shí)尚、和諧、使注意力集中。然而，設(shè)計(jì)師們必須投入大量的時(shí)間和精力，使之不枯燥，讓交互的核心元素則瞬間可見。
深色背景
使用深色背景的移動(dòng)和Web界面不僅承載該有的信息，并且還突顯了它們的存在。特別是，它們通常應(yīng)用于基于視覺效果而不是復(fù)制的數(shù)碼產(chǎn)品中。深色背景通常伴隨著沉穩(wěn)和安全感，它們加深了對(duì)圖像的感知，并且可以使界面在不同環(huán)境下的對(duì)比度更為明顯，更自然。此外，現(xiàn)在相當(dāng)廣泛的目標(biāo)受眾喜歡這種風(fēng)格。
復(fù)制留白
另一個(gè)趨勢(shì)在基于深色背景方案的界面上特別流行，它還提供了一個(gè)適當(dāng)?shù)目勺x性的方法，設(shè)計(jì)師為突顯核心數(shù)據(jù)塊采用淺色背景的區(qū)域或空間，使其在屏幕或頁(yè)面上形成對(duì)比。
字體的選擇和對(duì)比
隨著眾多新字體的出現(xiàn)，用戶界面設(shè)計(jì)師有了一個(gè)創(chuàng)造性實(shí)驗(yàn)的廣闊領(lǐng)域。今天，文字不僅被視為溝通的手段和向用戶傳達(dá)信息，而且是所有設(shè)計(jì)理念的組成部分。因此，專業(yè)人士非常重視字體的選擇和組合。今年，我們采用了襯線和無襯線字體設(shè)置對(duì)比的新方法，使其具有強(qiáng)大的視覺層次和界面吸引力。
網(wǎng)格實(shí)驗(yàn)
隨著超十億網(wǎng)站發(fā)揮作用，設(shè)計(jì)師們必須越來越努力，使它們既有吸引力又有創(chuàng)意。因此，網(wǎng)格也在今年的總體設(shè)計(jì)趨勢(shì)列表中占據(jù)了一席之地。自定義網(wǎng)格是一種以保存自適應(yīng)布局并以更高層次的靈活性和獨(dú)創(chuàng)性放置元素的方式。然而，這種創(chuàng)造力需要更透徹的研究，而有效的結(jié)果往往是通過多次迭代測(cè)試和對(duì)可用性和視覺感知的分析。
登陸頁(yè)面
毫無疑問，今年的登陸頁(yè)面見證了新的發(fā)展和多樣性。企業(yè)和社會(huì)項(xiàng)目往往會(huì)定期使用這些服務(wù)來有效地提供定制服務(wù)、銷售、報(bào)價(jià)或吸引用戶注意力的問題。登陸頁(yè)也被證明是本地移動(dòng)應(yīng)用推廣的有效方法。基于用戶和市場(chǎng)調(diào)查以及測(cè)試，可以將其定義為用戶友好的趨勢(shì)之一，以清晰易用的方式提供必要的信息和交互，從而節(jié)省用戶的時(shí)間和精力。從業(yè)務(wù)的角度來看，他們也很好的配合靈活的工具進(jìn)行有效的溝通。
創(chuàng)造性的視差
隨著更多的可移動(dòng)和運(yùn)動(dòng)工具的設(shè)計(jì)，滾動(dòng)動(dòng)畫保存了它在Web和移動(dòng)領(lǐng)域中廣泛應(yīng)用的技術(shù)的位置，創(chuàng)造性和原始視差增強(qiáng)了滾動(dòng)體驗(yàn)，使人眼更加自然，并為這樣的基本操作增添了優(yōu)雅。
網(wǎng)絡(luò)營(yíng)銷視頻
更多不同類型的營(yíng)銷視頻出現(xiàn)在屏幕和頁(yè)面上。他們有效地為市場(chǎng)目標(biāo)服務(wù)，提高品牌知名度。一個(gè)富有創(chuàng)意和吸引人的視頻是吸引客戶注意力的一種好方法，也是快速而直接地告知顧客的有效方法。一個(gè)視頻可以激活多個(gè)感知通道——聽力、視覺，并通過講故事的力量來強(qiáng)化它們。所有這些因素都傾向于通過視頻進(jìn)行呈現(xiàn)，特別是基于高質(zhì)量的圖形設(shè)計(jì)和動(dòng)畫。人們每天都會(huì)被各種各樣的信息所淹沒，所以大多數(shù)人沒有很多時(shí)間去學(xué)習(xí)產(chǎn)品或服務(wù)，尤其是新產(chǎn)品或服務(wù)。在這種情況下，視頻成為了一種動(dòng)態(tài)的、信息性的、吸引人的交流方式。
游戲化機(jī)制的交互
近年，人們對(duì)各種界面的游戲化趨勢(shì)越來越感興趣，不僅僅是娛樂，還有公用事業(yè)和商業(yè)產(chǎn)品。在科技世界里，“游戲化”這個(gè)詞代表了將游戲機(jī)制運(yùn)用到非游戲環(huán)境中，如網(wǎng)站和移動(dòng)應(yīng)用程序。挑戰(zhàn)、獎(jiǎng)勵(lì)、積分、徽章、排行榜和其他這類的東西，幫助設(shè)計(jì)師思考有效的用戶激勵(lì)和留住用戶的方式。
作為布局元素的框和卡片
2017年UX設(shè)計(jì)的另一個(gè)趨勢(shì)是移動(dòng)網(wǎng)絡(luò)和移動(dòng)設(shè)備中卡片和盒子的多樣性。他們?cè)谠O(shè)定視覺層次和快速掃描信息方面發(fā)揮了重要作用。此外，他們成功地為頁(yè)面或屏幕的整體諧調(diào)性起到了作用。
幾何元素作為風(fēng)格的一部分
沿續(xù)以前的趨勢(shì)，今年在幾個(gè)界面上幾何的共鳴。各種簡(jiǎn)單而復(fù)雜的形狀、圖案、線條和曲線，在傳統(tǒng)和創(chuàng)新組合的眾多設(shè)計(jì)解決方案中經(jīng)常看到。
實(shí)驗(yàn)性調(diào)色板組合
色彩探索的趨勢(shì)并未消失，帶出了新的原始組合。畢竟，顏色是將快速感知的信息和情緒添加到界面以及使其外觀具有獨(dú)特性和吸引力的最有效方式之一。無論如何，有效的色彩嘗試不僅僅是純粹的創(chuàng)造力：即使是最有創(chuàng)造力和令人驚訝的組合，也是基于色彩理論知識(shí)、色彩心理學(xué)、用戶界面設(shè)計(jì)技巧。
沒有Lorem Ipsum
今年對(duì)內(nèi)容質(zhì)量和性能的關(guān)注度不斷提高。在用戶界面中，內(nèi)容和設(shè)計(jì)相互關(guān)聯(lián)：創(chuàng)作者必須使他們成功地互相支持，而不是爭(zhēng)奪用戶的注意力。這就是為什么現(xiàn)在越來越多的設(shè)計(jì)師更喜歡真正的內(nèi)容，而不是眾所周知的Lorem Ipsum，在設(shè)計(jì)概念初始構(gòu)思的情況下，它讓設(shè)計(jì)師，客戶和內(nèi)容制作者更接近真實(shí)的體驗(yàn)和自然的互動(dòng)感受。
毫無疑問，2017年是界面設(shè)計(jì)多元化的一年 ， 也是最受用戶歡迎的趨勢(shì)之一。每天有數(shù)以百萬計(jì)的用戶，使用或簡(jiǎn)單或復(fù)雜的應(yīng)用程序和網(wǎng)站作為日常的一部分，他們有著不同的口味和喜好，喜歡各種不同的風(fēng)格和特點(diǎn)。未來將會(huì)設(shè)計(jì)更多不同的外觀和功能，這些更廣泛的多樣化選擇將使無窮無盡的全球技術(shù)用戶群體能夠找到適合他們特定需求和愿望。無論如何，我們很快就會(huì)看到下一年將會(huì)發(fā)生什么，以及為計(jì)師們帶來新的創(chuàng)造性挑戰(zhàn)。
原文：Tubik ? ? ? ? ? 翻譯：TaaCoo糖炒
