劉寒韻

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

關鍵詞：界面設計 APP 設計趨勢

引言

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

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

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

一、移動端界面設計趨勢分析

（一）加大加粗的標題

使用較大而且顯眼的字體可吸引用戶的注意力和視線，使得用戶在手機應用上花費的時間更長，爭取到了時間，那么爭取用戶就成功了一半。用戶會因為良好的設計層次而產(chǎn)生舒適感，因此應當增大重要元素的比重，使用大字體顯示。另外，合適的大字體會使界面更加有氣質、有特色，使用戶受到優(yōu)雅獨特的頁面的吸引，這就是留住用戶的手段之一。有時，一個功能并不出色的APP，會因為出色的設計而吸引大量追隨者。

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

（二）輕微質感

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

1.投影

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

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

2.雙色調漸變

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

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

（三）減少彩色的使用

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

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

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

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

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

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

在著名的圖片社區(qū)Pinterest新版設計中，卡片的背景徹底消失，這種十分勇敢的嘗試效果非常明顯，界面中的圖片內容更加清晰明了。通過留白來劃分區(qū)域，界面元素不僅沒有因為缺少卡片和背景的對比而變得混亂，一致性竟然變得更強了。

（五）更醒目的控件

用更加醒目的控件來提高用戶對可操作內容的認知度和辨識度，從而降低點擊操作的難度，降低誤觸率，使界面與用戶的交互變得更友好。

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

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

二、歸納總結與展望

（一）歸納總結

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

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

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

因此，目前的主流趨勢可以說就是醒目吸睛、簡潔精確、內容為王。在這種設計潮流的推動下，今后界面設計將以提高用戶體驗為準則，減少一切對操作干擾的元素的使用。

（二）展望

1.手動輸入將變成對話

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

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

2.虛擬現(xiàn)實

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

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

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

結語

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