UI 設(shè)計(jì)越來(lái)越重要，它在直觀塑造企業(yè)形象的同時(shí)，也成為留住用戶(hù)的關(guān)鍵。與此同時(shí)，UI 的設(shè)計(jì)風(fēng)格每一年都在發(fā)生變化。就像是扁平化、手勢(shì)、微交互、卡片式成為過(guò)去兩年中的關(guān)鍵詞一樣。總有一些好的設(shè)計(jì)總是想方設(shè)法吸引你，它們大批涌現(xiàn)，形成某種趨勢(shì)。
在這些趨勢(shì)里面，有的會(huì)持續(xù)性地流行好幾年，也有一些，會(huì)被淘汰。幾乎每年年底，都會(huì)有一些網(wǎng)站，根據(jù)過(guò)去一年中 UI 設(shè)計(jì)風(fēng)格的更迭，來(lái)預(yù)測(cè)下一年的趨勢(shì)。
一、有沉浸感的全屏式設(shè)計(jì)
Immersive 沉浸感，說(shuō)的是一種讓你猶如身臨其境的模擬真實(shí)的效果。就像最初的美術(shù)來(lái)自于對(duì)現(xiàn)實(shí)的模擬一樣，這種擬真的設(shè)計(jì)，至今仍然受用。
因而我們能看到像這樣的網(wǎng)頁(yè)設(shè)計(jì)，它以全屏式的大幅圖像和視頻為主，以一種簡(jiǎn)單卻有效的方式，迅速把你帶入它所設(shè)定的情境之中。
這是一個(gè)不錯(cuò)的網(wǎng)頁(yè)設(shè)計(jì)的例子，來(lái)自 Campos Coffee，動(dòng)態(tài)的全屏設(shè)計(jì)簡(jiǎn)單卻蘊(yùn)含豐富的信息。
Dutch airline KLM\’s magazine iFly50
技術(shù)的發(fā)展給這種擬真化的表達(dá)提供了更多的選擇。與靜態(tài)的圖像不同，視頻有著更為強(qiáng)烈的“敘事性”。盡管圖像在長(zhǎng)久以來(lái)始終占據(jù) UI 和網(wǎng)頁(yè)設(shè)計(jì)的主流，不過(guò)，在 2017 年，也許全屏式的互動(dòng)視頻設(shè)計(jì)會(huì)更吸引你的眼球。
二、長(zhǎng)滾動(dòng)式設(shè)計(jì)
“滾動(dòng)”，并不算是一個(gè)新的設(shè)計(jì)趨勢(shì)。
在過(guò)去的幾年內(nèi)，滾動(dòng)式的閱讀體驗(yàn)在小屏幕設(shè)備上的發(fā)展尤為突出。想想你手機(jī)上的 app，一定有很多采取的是這種滾動(dòng)式設(shè)計(jì)。
National Geographic
正如你所看到的這個(gè)國(guó)家地理的官方網(wǎng)站一樣，這種滾動(dòng)設(shè)計(jì)的好處非常直白：它提供給用戶(hù)一個(gè)更為流暢的瀏覽體驗(yàn)，以一個(gè)線性的方式，引導(dǎo)用戶(hù)在短時(shí)間內(nèi)不受打擾地閱讀到更多的內(nèi)容。
Riding the new silk road by New York Times
現(xiàn)在，“滾動(dòng)”從小屏幕越來(lái)越多地轉(zhuǎn)向大屏幕設(shè)計(jì)。也有很多的設(shè)計(jì)師在研究大屏幕上的“滾動(dòng)”機(jī)制如何處理，才能帶來(lái)更為卓越的使用感受。
在 2017 年，這種長(zhǎng)條狀的滾動(dòng)式網(wǎng)頁(yè)設(shè)計(jì)也許將成為主流。
三、漸變色的運(yùn)用
2013 年開(kāi)始盛行的扁平化設(shè)計(jì)中，強(qiáng)調(diào)簡(jiǎn)潔的功能界面區(qū)分，拋棄多余的元素。至今，這種設(shè)計(jì)風(fēng)格依然有著借鑒的價(jià)值。
不過(guò)，隨著扁平化的流行，它的弊端也開(kāi)始顯現(xiàn)出來(lái)：一時(shí)之間幾乎是所有的平面設(shè)計(jì)都在強(qiáng)調(diào)扁平化，這使得它們趨于雷同，看上去毫無(wú)個(gè)性。
想要在扁平化設(shè)計(jì)中，加點(diǎn)不一樣的元素讓它更為生動(dòng)，漸變色不失為一個(gè)好的選擇。
Spotify 的網(wǎng)站，就是一個(gè)極好的例子。它的主頁(yè)面把 2016 年最流行的粉色和藍(lán)色糅合，產(chǎn)生了雙色漸變，看起來(lái)十分絢麗。
再往下拉，就變成了橙色的漸變色，顯得十分有夏天的感覺(jué)。
雖然此前設(shè)計(jì)界對(duì)于 Instagram 的扁平化漸變色 logo 的設(shè)計(jì)褒貶不一，不過(guò)，它也意味著一種設(shè)計(jì)的趨勢(shì)：漸變色能讓設(shè)計(jì)看起來(lái)更活潑有趣，毫無(wú)疑問(wèn)，它是 2017 年的十大設(shè)計(jì)趨勢(shì)之一。
四、插畫(huà)的運(yùn)用
插畫(huà)可以讓設(shè)計(jì)具有“性格”，比起傳統(tǒng)的攝影，它是一種直觀的與用戶(hù)進(jìn)行情感交流的視覺(jué)語(yǔ)言。
對(duì)于品牌來(lái)說(shuō)，沒(méi)有什么能比用插畫(huà)來(lái)塑造品牌形象、傳遞品牌性格還要簡(jiǎn)單有效的方式了。作為一種有趣的情感表達(dá)，插畫(huà)可以是量身定制的，因而它能幫助獲得用戶(hù)的信任，讓人感覺(jué)更為親切。
Dropbox 和 payplan 都是不錯(cuò)的例子，它們的首頁(yè)以簡(jiǎn)筆畫(huà)的形式很直觀地表達(dá)了產(chǎn)品的幾大功能，能夠幫助用戶(hù)快速理解。
此外，插畫(huà)的實(shí)現(xiàn)途徑并不唯一。它提供多種創(chuàng)意方向的選擇，不同的插畫(huà)也可以傳遞不同的情緒。比如簡(jiǎn)筆風(fēng)的手繪看上去單純可愛(ài)，精細(xì)繁復(fù)的筆觸可以產(chǎn)生一種“高級(jí)”質(zhì)感，當(dāng)插畫(huà)與攝影結(jié)合，則給人一種虛實(shí)難辨的奇幻感。
五、打破網(wǎng)格設(shè)計(jì)
對(duì)于大多數(shù)設(shè)計(jì)師而言，網(wǎng)格一直以來(lái)都是設(shè)計(jì)的基礎(chǔ)，它能夠保證一致性、平衡性和某種節(jié)奏。
此外，一個(gè)用戶(hù)很熟悉的網(wǎng)格，也代表著一個(gè)不會(huì)出錯(cuò)的選擇，起碼用戶(hù)在看到這個(gè)設(shè)計(jì)的時(shí)候，可以不用指導(dǎo)地、下意識(shí)地去使用網(wǎng)站或者應(yīng)用程序。
然而，網(wǎng)格也意味著限制。在一個(gè)有限的網(wǎng)格內(nèi)，富有才華的設(shè)計(jì)師，很難去完整地表現(xiàn)他的天馬行空。于是，有些設(shè)計(jì)師正在嘗試突破傳統(tǒng)的數(shù)字體驗(yàn)，打破網(wǎng)格。
Red Collar Digital 的頁(yè)面以云為背景，前景是滾動(dòng)式的圖文內(nèi)容，沒(méi)有網(wǎng)格的限制，顯得清新且自由。
無(wú)疑，這種無(wú)網(wǎng)格的創(chuàng)造性設(shè)計(jì)可以充分發(fā)揮設(shè)計(jì)師的奇思妙想，讓網(wǎng)頁(yè)看起來(lái)更加靈活自由。不過(guò)，這種設(shè)計(jì)搞不好也會(huì)導(dǎo)致一種缺乏秩序的混亂感。值得注意的是，無(wú)論是怎樣顛覆性的無(wú)網(wǎng)格設(shè)計(jì)，用戶(hù)的體驗(yàn)永遠(yuǎn)是第一位的，它的所有接口，都應(yīng)該是用戶(hù)友好型的。
六、視差效果
Parallax 視差，說(shuō)它是長(zhǎng)滾動(dòng)設(shè)計(jì)和打破網(wǎng)格的結(jié)合也許更為貼切。
概括說(shuō)來(lái)，視差指的是頁(yè)面的背景，以一個(gè)比前景慢的速度移動(dòng)，從而產(chǎn)生一種視覺(jué)上的縱深感。它不是一個(gè)新的設(shè)計(jì)概念，只不過(guò)，現(xiàn)在有越來(lái)越多的品牌在使用這種設(shè)計(jì)理念。
Bang&Olufsen
視差可以結(jié)合圖片、文本，以一個(gè)不太嚴(yán)格的頁(yè)面布局，帶來(lái)一種流暢直觀的瀏覽體驗(yàn)。視差效果的好處顯而易見(jiàn)，它提供了一個(gè)充滿(mǎn)活力的界面，并且讓用戶(hù)印象深刻。
七、卡片式設(shè)計(jì)更加流行
一直以來(lái)，這種卡片式設(shè)計(jì)都在移動(dòng)用戶(hù)界面設(shè)計(jì)中占有重要的位置。
卡片式設(shè)計(jì)是一個(gè)通用的用戶(hù)界面模式，小到移動(dòng)端的信息瀏覽，大到重要的會(huì)議演講。它最大的好處大概就是，能在同一個(gè)時(shí)間內(nèi)，盡可能地、分門(mén)別類(lèi)地展示大量的信息。它能夠讓用戶(hù)進(jìn)行更為快速的瀏覽并做出選擇。
以卡片為單位，可以形成一套完整的解決方案，處理文本、圖像、視頻之間的關(guān)系。此外，卡片本身也擁有很強(qiáng)的靈活性。想要給這些普通的卡片設(shè)計(jì)多點(diǎn)花樣的話(huà)，設(shè)計(jì)師還可以通過(guò)翻轉(zhuǎn)、旋轉(zhuǎn)、疊加和過(guò)濾等方式，來(lái)讓它們發(fā)生變化。
八、微交互設(shè)計(jì)
微交互，指的是小屏幕上的動(dòng)畫(huà)形式。
從用戶(hù)體驗(yàn)的角度來(lái)看，這種微交互通過(guò)屏幕上的動(dòng)畫(huà)轉(zhuǎn)化，以一種更為明確的視覺(jué)反饋，告訴他們，讓他們知道他們的點(diǎn)擊行為引起了什么，以及下一步會(huì)發(fā)生什么。
一個(gè)最簡(jiǎn)單的例子是很多網(wǎng)站或者 App 在打開(kāi)欄目時(shí)會(huì)應(yīng)用的設(shè)計(jì)
聰明的設(shè)計(jì)師能夠把微交互設(shè)計(jì)的娛樂(lè)性放大，讓用戶(hù)獲得更多的樂(lè)趣。從好玩的加載動(dòng)畫(huà)，到流暢的圖標(biāo)轉(zhuǎn)換，一個(gè)好的微交互設(shè)計(jì)，可以同時(shí)擔(dān)負(fù)娛樂(lè)和通知這兩種功能。
九、字體設(shè)計(jì)
字體設(shè)計(jì)被視作是平面設(shè)計(jì)中最基本的單元，它傳遞文本信息，功能非?；A(chǔ)。不過(guò)，想讓一個(gè)平淡無(wú)奇的設(shè)計(jì)出彩的話(huà)，為它設(shè)計(jì)一組創(chuàng)造性的字體，不失為一種簡(jiǎn)單明了的方式。
MailChimp Holiday Tips
字體設(shè)計(jì)的重要性毋庸置疑，你可以看到很多的品牌都在嘗試用更大的、更粗的，以及有著時(shí)髦襯線的字體來(lái)吸引用戶(hù)。
Citroen 的這個(gè)頁(yè)面設(shè)計(jì)還蠻有趣的，點(diǎn)開(kāi)就是一個(gè) 1919 Citroen 的大 logo，然后會(huì)接著出現(xiàn)各個(gè)年份的不同車(chē)型的 Citroen，來(lái)強(qiáng)調(diào)品牌的歷史。
UI 設(shè)計(jì)也開(kāi)始從傳統(tǒng)的圖形編輯、文字排版中尋找靈感的時(shí)候，隨之出現(xiàn)越來(lái)越多提供網(wǎng)絡(luò)字體服務(wù)的公司開(kāi)始出現(xiàn)，比如谷歌字體和 Typekit，它們提供免費(fèi)的，或者有成本的字體系統(tǒng)。
十、實(shí)驗(yàn)性的導(dǎo)航設(shè)計(jì)
頁(yè)面導(dǎo)航和菜單的設(shè)計(jì)一直是一個(gè)頗有爭(zhēng)議的話(huà)題。
當(dāng)移動(dòng)端和網(wǎng)頁(yè)的設(shè)計(jì)界限越來(lái)越模糊的時(shí)候，漢堡包菜單 Left Nav Flyouts，即側(cè)邊欄菜單。最初它作為谷歌設(shè)計(jì)的一個(gè)重要元素，后來(lái)被紛紛效仿而成為導(dǎo)航設(shè)計(jì)的主流。
漢堡包菜單最明顯的一個(gè)優(yōu)勢(shì)就是節(jié)省了屏幕空間，讓導(dǎo)航“藏”在側(cè)滑抽屜里，釋放了更多的空間給主要內(nèi)容。
不過(guò)，并非是所有的設(shè)計(jì)師都贊同這種漢堡包菜單的形式，它本身也面臨著被設(shè)計(jì)人員濫用、低效等質(zhì)疑。
美國(guó)深夜檔動(dòng)畫(huà)頻道 Adult Swim 的網(wǎng)頁(yè)導(dǎo)航就做得不錯(cuò)。它用了一種好玩的動(dòng)態(tài)形式來(lái)進(jìn)行用戶(hù)引導(dǎo)，還挺有意思的，也符合 Adult Swim 本身作為動(dòng)畫(huà)頻道的屬性。
導(dǎo)航設(shè)計(jì)本來(lái)就該有多種形式，是時(shí)候出現(xiàn)更多有趣好玩的導(dǎo)航設(shè)計(jì)，來(lái)拋棄掉漢堡包菜單了。在 2017 年，也許會(huì)出現(xiàn)更多創(chuàng)造性的導(dǎo)航設(shè)計(jì)方案，幫助用戶(hù)快速、輕松地找到他們需要的內(nèi)容。