移動(dòng)端界面設(shè)計(jì)趨勢(shì)研究

劉寒韻

摘要：現(xiàn)在，移動(dòng)端無疑已經(jīng)是真正意義上的“第一屏”，人們每天都花一定時(shí)間在那些手機(jī)應(yīng)用上。那么，某些應(yīng)用在功能99%都相同的情況下，如何獲得用戶的青睞呢？這便關(guān)乎更高層次的追求一一設(shè)計(jì)。文章結(jié)合藝術(shù)設(shè)計(jì)理論和認(rèn)知心理學(xué)，從移動(dòng)端應(yīng)用界面設(shè)計(jì)的各個(gè)角度，結(jié)合最新案例分析當(dāng)今設(shè)計(jì)趨勢(shì)，發(fā)現(xiàn)規(guī)律并對(duì)未來界面設(shè)計(jì)進(jìn)行展望。

關(guān)鍵詞：界面設(shè)計(jì) APP 設(shè)計(jì)趨勢(shì)

引言

界面設(shè)計(jì)的演變正在進(jìn)行，目前，一種新的潮流，不同于扁平化設(shè)計(jì)，也不同于極簡(jiǎn)設(shè)計(jì)，進(jìn)化成新的移動(dòng)端設(shè)計(jì)趨勢(shì)。在上一流行階段中，界面設(shè)計(jì)對(duì)效果、寫實(shí)化徹底舍棄，形成了多彩的色塊劃分和極致的扁平化，而如今效果又被悄無聲息地重新使用起來。

幾大知名軟件的新版本中，前沿的設(shè)計(jì)師們似乎開始推動(dòng)新的浪潮，將界面設(shè)計(jì)的趨勢(shì)推向了一個(gè)新的方向，一些創(chuàng)新之處就在它們的移動(dòng)端產(chǎn)品中可以窺見—二。

隨著iPhone7一起發(fā)布的iOS 10正式版的人機(jī)界面設(shè)計(jì)指南，出現(xiàn)了這樣的改變：最重要的設(shè)計(jì)原則的部分，仍然是從前的黃金三法則一一清晰、順從、深度。但是其中有了一個(gè)非常細(xì)微的變化，就是從前一直位于第二原則的清晰，這次變?yōu)榈谝晃?。這樣的改變，也許是為了加大提升用戶體驗(yàn)的力度，清晰原則應(yīng)該會(huì)發(fā)展為今后界面設(shè)計(jì)之重點(diǎn)。

一、移動(dòng)端界面設(shè)計(jì)趨勢(shì)分析

（一）加大加粗的標(biāo)題

使用較大而且顯眼的字體可吸引用戶的注意力和視線，使得用戶在手機(jī)應(yīng)用上花費(fèi)的時(shí)間更長(zhǎng)，爭(zhēng)取到了時(shí)間，那么爭(zhēng)取用戶就成功了一半。用戶會(huì)因?yàn)榱己玫脑O(shè)計(jì)層次而產(chǎn)生舒適感，因此應(yīng)當(dāng)增大重要元素的比重，使用大字體顯示。另外，合適的大字體會(huì)使界面更加有氣質(zhì)、有特色，使用戶受到優(yōu)雅獨(dú)特的頁(yè)面的吸引，這就是留住用戶的手段之一。有時(shí)，一個(gè)功能并不出色的APP，會(huì)因?yàn)槌錾脑O(shè)計(jì)而吸引大量追隨者。

如果標(biāo)題和正文字體都更大，兩者之間大小差距也更大，整體頁(yè)面的信息密度就會(huì)降低，對(duì)比更明顯，同時(shí)字體變大閱讀效率也會(huì)有所提高。

（二）輕微質(zhì)感

如同時(shí)尚界的復(fù)古與輪回，界面設(shè)計(jì)的潮流也正在回溯并加以新時(shí)代的新元素。之前，寫實(shí)化的質(zhì)感元素被設(shè)計(jì)師徹底拋棄，扁平化開始風(fēng)靡?，F(xiàn)在，輕微質(zhì)感中的投影和漸變又逐漸興起，在扁平設(shè)計(jì)的基礎(chǔ)上，視覺上給人帶來一種不同的新鮮感，可以發(fā)現(xiàn)，國(guó)內(nèi)火爆的APP如淘寶、美顏相機(jī)、新浪微博等都在icon中加入了輕微的漸變。

1.投影

一種新的投影方式叫作彩色投影，投影的顏色會(huì)隨著整體背景的色系而改變，這樣的好處是可以把投影融進(jìn)整體的畫面中，同時(shí)也可以讓界面更突出和飽滿。不僅使得界面更加生動(dòng)與豐富，而且投影與背景前景相容，增強(qiáng)了界面的整體性、一致性。

（如圖1）右邊是蘑菇街改版后首頁(yè)，與左邊的舊版相比，新版的輪播banner增加了彩色投影的樣式，因?yàn)楸尘笆褂昧怂{(lán)綠色，bannet的投影也使用了相同的色系，與背景的顏色相互映襯。這種陰影效果幾乎不會(huì)被人一眼就察覺出來，設(shè)計(jì)方式十分微妙，但這一點(diǎn)點(diǎn)精巧的變化卻使得界面更加精細(xì)，提升了界面的層次感，bannet似乎微微從屏幕中跳出，并且保證了低調(diào)、柔和，沒有增加任何違和感。如此一來，用戶的視線就會(huì)被banner吸引，達(dá)到了良好的推廣效果。投影和背景色相融，更好地凸顯了重點(diǎn)元素——廣告內(nèi)容。

2.雙色調(diào)漸變

極端扁平主義逐漸過時(shí)，新的扁平化增加了漸變的元素，因此似乎已經(jīng)退出歷史舞臺(tái)的漸變?cè)O(shè)計(jì)被重新拾起，形成了一種更加隱蔽的精致的漸變?cè)O(shè)計(jì)。它要求只用于背景色或氛圍色，不與重要內(nèi)容互搶眼球，只能使用兩種顏色進(jìn)行過渡。

漸變色中，最為流行的應(yīng)屬雙色漸變了，越來愈多的新鮮產(chǎn)品開始使用。（如圖2）完美使用了各種雙色漸變，在扁平化與卡片設(shè)計(jì)的基礎(chǔ)上，用漸變色來調(diào)節(jié)過度使用的圖像和元素，畫面添加趣味性，并完善視覺表現(xiàn)以吸引更多的用戶。另外，豐富的高飽和度顏色讓界面更加鮮艷多姿，并且添加了適度的質(zhì)感，讓界面層次感更豐富的同時(shí)，突出頁(yè)面更加重要、關(guān)鍵的元素。

（三）減少彩色的使用

少即是多（英文：Less is more）這個(gè)概念，已經(jīng)獨(dú)占鰲頭。作為設(shè)計(jì)師，要謹(jǐn)記簡(jiǎn)潔為上的設(shè)計(jì)原則，一定要時(shí)刻保持這一點(diǎn)，特別是想要使用色彩的時(shí)候，時(shí)尚高雅的APP設(shè)計(jì)在界面中一定會(huì)采用極簡(jiǎn)的方式來搭配顏色。

2016年5，lnstagram發(fā)布了新的UI設(shè)計(jì)，（如圖3）右邊新的版本中去除了左邊舊版中大量使用的藍(lán)色和深灰色，不僅加粗了標(biāo)題，底部導(dǎo)航欄和圖標(biāo)也被簡(jiǎn)化，這也印證了上文中提到的其他原則。為了突出內(nèi)容，只有黑白界面和醒目的標(biāo)題被留下，功能更加清晰。頂部導(dǎo)航和底部導(dǎo)航的顏色都不見了，另外，為了區(qū)分內(nèi)容區(qū)塊，使用了加粗文字的方法，以前給文字添加顏色的方式不再使用，如用戶昵稱、獲贊數(shù)目等。整體界面去除了不必要的圖形和色彩，增強(qiáng)它們通用性和易辨性。然后簡(jiǎn)化色彩，變成黑白界面，內(nèi)容更突出，功能性更強(qiáng)。

（四）加大留白區(qū)域

還有一種方法可以使重要的內(nèi)容和功能顯得更加引人注目，那就是恰當(dāng)?shù)牧舭?。而且，留白能夠帶給人一種清新、寧?kù)o的視覺感受，設(shè)計(jì)內(nèi)容變得更加有目的性、有效率。

以前設(shè)計(jì)師喜歡用線條來劃分區(qū)塊，可是這種方法很容易使得界面元素變得擁擠不堪?，F(xiàn)在，利用留白來組建更加美觀、干凈的界面，無疑是更好的設(shè)計(jì)方式。

此外，移除分割線和分隔符還有一點(diǎn)好處，就是可以達(dá)到更加現(xiàn)代化的效果，使整個(gè)設(shè)計(jì)聚焦產(chǎn)品功能，具體方法例如使用更大的圖片和字體，來提高層級(jí)劃分的清晰度，增強(qiáng)易用性。所以利用留白進(jìn)行區(qū)域劃分不僅不是干擾性的設(shè)計(jì)，而且很好地順應(yīng)了現(xiàn)今設(shè)計(jì)風(fēng)格的潮流和產(chǎn)品的需求。

在著名的圖片社區(qū)Pinterest新版設(shè)計(jì)中，卡片的背景徹底消失，這種十分勇敢的嘗試效果非常明顯，界面中的圖片內(nèi)容更加清晰明了。通過留白來劃分區(qū)域，界面元素不僅沒有因?yàn)槿鄙倏ㄆ捅尘暗膶?duì)比而變得混亂，一致性竟然變得更強(qiáng)了。

（五）更醒目的控件

用更加醒目的控件來提高用戶對(duì)可操作內(nèi)容的認(rèn)知度和辨識(shí)度，從而降低點(diǎn)擊操作的難度，降低誤觸率，使界面與用戶的交互變得更友好。

（如圖4）新版iphone的地圖，首先，他們改變了控件的位置，以前在底部的開始按鈕改成了規(guī)劃路線右邊的位置，這樣更加醒目，與路線規(guī)劃的親密性更強(qiáng)，兩者看起來更像是一組。然后把上端的各種操作轉(zhuǎn)移到底部，用戶體驗(yàn)更加方便，不用移動(dòng)手指就能在底部使用一切想要的功能。

其次，控件形式也發(fā)生了變化，以前開始按鈕是使用文字，現(xiàn)在添加了綠色背景的按鈕，增強(qiáng)對(duì)比性，更加醒目地吸引用戶視線，功能和內(nèi)容變得明顯。另外，“開始”也變成了“出發(fā)”，目的地和花費(fèi)時(shí)間的字體變得更粗更大。

二、歸納總結(jié)與展望

（一）歸納總結(jié)

替換了從前利用線條等平面元素劃分界面結(jié)構(gòu)的方法，增加字體的大小與粗細(xì)程度，留下更多空白空間，使用戶能夠更好地領(lǐng)會(huì)界面的層級(jí)結(jié)構(gòu)，既能夠使界面扁平化設(shè)計(jì)更加直觀，也極好地突出了重點(diǎn)內(nèi)容。并且一些具有色盲或色弱和老年人用戶也不再受到顏色和小字體的困擾。

按鈕變大、位置也做了相應(yīng)改變（結(jié)構(gòu)更明顯），減小誤觸的概率，用戶體驗(yàn)更加優(yōu)秀。

減少彩色。當(dāng)然，也可以保留一種顏色，或者使用和諧的雙色漸變。剩下的所有最都好是黑白的，從而用信息內(nèi)容替代顏色，體現(xiàn)內(nèi)容至上的原則。

因此，目前的主流趨勢(shì)可以說就是醒目吸睛、簡(jiǎn)潔精確、內(nèi)容為王。在這種設(shè)計(jì)潮流的推動(dòng)下，今后界面設(shè)計(jì)將以提高用戶體驗(yàn)為準(zhǔn)則，減少一切對(duì)操作干擾的元素的使用。

（二）展望

1.手動(dòng)輸入將變成對(duì)話

根本上說，對(duì)話式的界面就是要模擬現(xiàn)實(shí)世界中人與人的交流?，F(xiàn)在的界面其實(shí)已經(jīng)與對(duì)話十分接近了，只是呈現(xiàn)為按鈕、菜單和輸入欄等其他人機(jī)交互方式。

目前很多公司都熱衷于研究對(duì)話機(jī)器人，這無疑是下一場(chǎng)設(shè)計(jì)潮流的前奏。語(yǔ)音識(shí)別將提升產(chǎn)品的延展性、創(chuàng)新性，人機(jī)之間的會(huì)話交流更加體現(xiàn)了用戶體驗(yàn)為中心的服務(wù)。

2.虛擬現(xiàn)實(shí)

設(shè)計(jì)適應(yīng)虛擬現(xiàn)實(shí)的界面是我們必將面臨的新挑戰(zhàn)。將現(xiàn)實(shí)世界中具有類似意義的自然手勢(shì)運(yùn)動(dòng)作為虛擬世界中的操作，這是Google、Facebook和其他玩家已經(jīng)為虛擬空間定義的交互準(zhǔn)則。對(duì)話式界面也在這里發(fā)揮著相當(dāng)大的功能，畢竟人與人交流的方式是對(duì)話而不是屏幕。

3.數(shù)據(jù)可視化

很多APP開始試著使用數(shù)據(jù)可視化、信息圖表化來表現(xiàn)數(shù)據(jù)信息。界面中除了列表的表現(xiàn)手法，還多了許多生動(dòng)的扇形圖、折線型、柱狀圖等，這使得信息的呈現(xiàn)方式更加豐富，并且有助于用戶快速獲取和理解內(nèi)容。

結(jié)語(yǔ)

從上面分析與總結(jié)中，可以看出，APP的設(shè)計(jì)越來越以人為中心，為用戶服務(wù)，并不斷朝著人性化的方向發(fā)展，更加重視用戶體驗(yàn)。隨著手機(jī)功能越來越豐富，優(yōu)秀的APP不僅要功能強(qiáng)大，而且視覺上應(yīng)當(dāng)讓人眼前一亮，并在交互中帶給用戶無盡的便利與舒適感。