2014 年移動設備界面設計有哪些趨勢？
參見《elya：2014讓人印象深刻的7種Mobile UI設計語言》
如果你是一個APP狂熱分子，你會花大量的時間在各種APP的嘗鮮中，你會明顯感受到一些APP在採用著某種風格鮮明的設計語言，來標榜自己的獨特之處，行成自己的設計風格，甚至引領設計風向。去年我們關注到隨著Metro設計風格的影響和iOS7的發布，APP明顯都開始嘗試扁平化的設計語言了，除此之外，還有哪些顯性化的設計語言嶄露頭角呢？
在這篇文章里，我想分享一些日益顯性的設計語言，讓人一眼就記住它的風格，有一些已經隨著優秀設計師的摸索，融入到國內移動產品設計里了，而有一些，確實是剛剛在萌芽階段，需要更進一步的摸索和嘗試。
一、唯一主色調 | Simple color schemes
為什麼我們要定義一個界面多種顏色？僅僅用一個主色調，是不是就能夠很好的表達界面層次、重要信息，並且能展現良好的視覺效果？事實上也正是如此，隨著iOS7的發布，我們看到越來越多唯一主色調風格的設計，會採用簡單的色階，配套灰階來展現信息層次，但是絕不採用更多的顏色。
卡達航空公司
卡達公司航空就是這樣的設計案例，整個界面採用粉色的主色調，從標題欄到標籤頁，從操作按鈕到提示信息，除了黑白灰之外，全部採用粉色設計，這種簡介的的配色風格，反倒起到了很好的信息傳達效果，也具有良好的視覺表現力，設計師在內容排版上的技巧實在是加分。
Readability採用紅色主色調設計，連提示信息背景色、線性按鈕和圖標都採用紅色主色調，界面和LOGO也完全是一個色系的。而Vivino採用藍色主色調設計，信息用深藍、淺藍加以區隔。Eidetic採用橙色主色調設計，其中的關鍵操作按鈕甚至整個用橙色提亮，信息圖標也用深橙色、淺橙色來表達程度。
可以說唯一主色調設計手法，是真的做到了移動端APP的最小化（Minimal）設計，減少冗餘信息的干擾，使用戶專註於主要信息的獲取。
二、多彩色 | Hypercolour
而與唯一主色調形成對照關係的，就是Metro引領的多彩色風格，為什麼我一定要給我自己的產品定義一種主色調，多彩色就不能是主色調嗎？於是出現了不同頁面、不同信息組塊採用撞色多彩色的方式來設計的風格，甚至同一個界面的局部都可以採用多彩撞色，也產生了不少優秀的設計。
優衣庫出品的RECIPE，是一個讓人眼前一亮的設計案例，多彩色的設計風格融入到整個APP中，不論是切換標籤頁，還是在內容組塊中滾動，都會變更不同的主題色。色彩切換的時候，還會有淡入淡出的效果，讓切換變得自然而然，完全不生硬。RECIPE的番茄鍾計時器模塊，會一邊計時一邊播放優美的美食背景音樂，同時切換不同的主體顏色，隨著主體顏色的變更，所有的前景文案、圖片也會變更為該色系，加上清晰度極高的美食圖片，真的是視覺+聽覺的雙重享受。RECIPE真的是2013年難得一見的優秀設計。
而Peek Calendar、EveryWeather和Harmony這三個APP，是列表多彩色的設計案例，這種列表多彩色，不知道是不是從Clear開始再度流行起立的，用鮮亮的多彩色來區分信息，確實能起到突出的效果，視覺上極其醒目。
可是對於一些內容型的APP，也許並不適用，比如GoogleKeep的多彩卡片，確實是在內容閱讀上會起到反效果。百度雲記事本第一版設計也是多彩色的，但是後來考慮到文字記事比較多，為提供良好的文字閱讀體驗，還是把多彩色改成灰白色微質感的設計。
三、數據可視化 | Data Visualization
至於對信息的呈現，越來越多的APP開始嘗試數據可視化、信息圖表化，讓界面上不僅僅是列表，還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達方式。表面上看起來也不是很難的事情，但是若真想實現，背後的複雜程度也不容小窺。
Nice Weather用曲線圖來表達溫度的變化，Jawbone UP用柱狀圖來表達每天的完成情況，PICOOC用折線圖來表達每天體重、體脂的變化。移動APP利用數據可視化，可以在更小的屏幕空間內，更立體化的展示內容。
四、卡片化 | Cards
卡片也是一種採用較多的設計語言形式，無法考究這種卡片的設計，是從Metro的tiles流行起來的，還是從Pinterest的瀑布流流行起來的。總之我們可以發現，Google的移動端產品設計已經全面卡片化了，甚至Web端也沿用了這種統一的設計語言，據說是Google搜索的體驗負責人引領的設計語言統一升級。
luvocracy的卡片流突出信息本身，用大圖和標題文字吸引用戶，強化了無盡瀏覽的體驗，吸引用戶一直滾動下去。Google Now的卡片則更加的定製化、個性化。有的卡片是用來做用戶教育的，有的卡片是用來告知天氣的，有的卡片是呈現聯繫人列表的，有點卡片是顯示待辦事項的。不同的卡片都遵循在一個統一寬度和樣式的卡片內，進行發揮和設計。既保證了卡片和卡片之間的獨立性，又保證了服務和服務的統一化設計。Shazam則用一種趣味的卡片樣式，呈現專輯和歌曲。
五、內容為王 | Content First
APP產品的發展，最終的路徑勢必會跟web產品一樣，突出內容，內容為王，當繁華褪盡，纖塵不染，再重新去看APP存在的意義，不外乎是給用戶提供更好的服務。與內容相比，所有的設計和包裝，都不外乎是一種表現手法，而真正具有價值的APP，一定是內容取勝的。Facebook用190億美金收購了Whatsapp，這個全是用統控制項搭建的APP，並不是因為他的設計多出眾，而是因為他的服務足夠有價值。
Artsy的圖片瀑布流，完全沒有用到線和面來區分信息組塊，而就是用內容本身做排版，用戶可以更加集中注意力於圖片內容上。Prismatic利用字體排版，儘可能的內容前置，弱化圖標和操作，讓用戶更集中注意力於內容閱讀上。而MR Porter則利用商品圖片、名稱和價格直接做設計，讓用戶聚焦於商品本身。
六、圓形的運用 | Circle Design
原形是最容易讓人覺得舒服的形狀，尤其是在充滿各種方框的手機屏幕內，增加一些圓潤的形狀點綴，立刻就會增加活潑的氣息，徒增好感。一個有意思的現象是，iPhone的撥號數字鍵盤，一開始都是矩形設計，迭代到iOS7，均變成了圓形，可以說是對傳統電話的致敬，也可以說是增強了界面的柔和感。當然相應的，也要處理圓形的實際點觸區域，不要因為設計成圓形點擊區域也變小了，導致點擊準確率下降了，美觀度提升易用性受到了影響。
Beats Music把選擇喜歡的標籤設計成了圓形，這就比普通的列表、矩形tag的感覺要好很多，更加趣味更具探索性。Movse每天走的步數、消耗的卡路里均用圓形承載，是數據可視化、關鍵信息顯性化的最好案例。Tumblr則把要創建的內容的類型選擇，用蒙層+圓形選項按鈕來設計，讓選擇變得專註而明確，又不那麼死板。
七、大視野背景圖 | Bigger Vision image background
用通欄的圖片作為背景，也成為今年的一個流行趨勢，或者是作為整個APP的背景，或者是作為內容區塊的背景，既提升了視覺表現力度，又豐富了APP情感化元素。一些信息或操作，浮動在圖片上。這種設計方法，對字體和排版設計要求更高，難度也更多，但極容易渲染出氛圍。
大視野背景圖風格也分為兩種，一種像Secret、The Whole Pantry這樣的，內容區塊中採用大視野背景圖，好處是可以利用圖片做區塊分割，難度是圖片拼接後的效果不一定好看，所以可能還需要配合描邊、留白等設計手段優化拼接。另外一種就是想Vsco、Flink、Mindie、Soundwave這樣的，全屏背景圖甚至打通狀態欄，前景做內容排版、導航、操作。好處是設計非常具有生命了，所有有朋友把這種風格也叫有計劃設計，說的就是回歸大自然的設計手法。但風險也是很明顯的，就是前景的信息排布設計其實是有很大挑戰的，必經花花綠綠的背景太過於干擾注意力，導致前景的文字內容可讀性會變弱。所以需要把重要操作用明確的按鈕區隔出來，閱讀型文字跟背景圖要用明顯的反色，還是不行的話就把文字浮在半透明蒙層上，解決可讀性問題。
最後總結來說，2014年讓我覺得印象深刻的7種設計語言，唯一主色調、多彩色、數據可視化、卡片化、內容為王、圓形的運用和大視野背景圖。其實設計風格很難有全新的，也是不斷輪迴的過程，為凸現內容APP都在往輕薄化方向設計，不過保不準哪天，又顛覆回最開始的重質感擬物話設計呢。
參見《elya：2014讓人印象深刻的7種Mobile UI設計語言》
圖很大，手機的知友們慎入：）
我覺得今年的移動應用界面風格大概可以總結以下這些特色吧
0、整體風格偏硬，擬物化紋理將被弱化
1、背景多數會採用虛化處理，界面層次感增加
2、界面圖標採用簡潔的圖案，甚至是只有描邊的圖案
3、字體變細，分割線減少，間距增大，空間感增加
4、進度條細化處理
5、區域採用直角矩形劃分，即使採用圓角，也是用半徑較小的圓角矩形
6、整個界面色調偏淡（就是感覺都調了一些白色進去一樣），然後高亮的圖片採用飽和度較高或則反差較大的色調
7、展示圖片的區域一定足夠大，大，大，然後展示圖片時，圖片會有一種遊動溶解的效果（具體效果參見Flava的側邊欄）
8、在用戶操作時，控制項的物理效果會增多吧（iOS 7引入UIKit Dynamics，並且官方鼓勵使用）
9、手勢交互增多
10、國內環境，領導依然會讓Android版本的APP參考iOS的UI設計準則來開發或者移植，呵呵呵
上圖吧，Behance社區基本都是這個調調，Dribbble上的也差不多
Dayboard - Social Platform on Behance
Blog on Behance
Quality Voice
-----------------------------------輪到Android版本的分割線---------------------------------
經知友提醒，之前發的配圖只有iOS版的，不夠全面，下面補張Android版本的作品吧（家裡網速太慢了，就不上傳那麼多啦，感興趣可以上Bahance和Dribbble看看），同樣也是來自Behance設計師的作品
Android 5.0 UI Design Concept on Behance
更少的邊框，更多的層次
更少的擬物，更多的交互
更少的紋理，更多的顏色
更少的漸變，更多的透明
更大的字型大小，更細的字體
正好最近在Designcaffeine上看到一篇主題比較接近的文章，裡面關於2014移動設備界面設計趨勢的預測概述起來大概有這麼幾點：
1.更開放和獨立於設備的安卓系統潮流，Android 4.x的影響力進一步擴大
平板的持握操作與手機的普通右手持握相比區別很大，拇指熱區處於靠近屏幕頂部的邊緣，但不越過中間，而現在蘋果和谷歌採用的設備頂部和底部Tab操作起來是比較困難的。
在iOS7中，iPad標籤欄放在屏幕底部，結果是很難看到甚至難以達到。而Android的操作方案最適合的是中型（7英寸）設備，而非9-10寸。
側欄導航在平板應用中將被更多地用到。
3.扁平界面下的手勢操作認知性優化
扁平化設計被主流移動操作系統完全接受，一切都可以變成屏幕上可觸摸的目標，但部分手勢操作變得隱蔽和缺乏預示性，造成更多的認知摩擦。手勢操作等需要針對用戶更好地優化，滿足期望和提升整體體驗。
NFC技術，圖像掃描識別，語音識別，面部識別，配合拇指掃描等
5.可以觸摸得更多
複雜手勢和多點觸控應用框架在平板電腦上大規模出現，未來2-3年可以看到如二指/三指觸摸，複雜揮動，與虛擬現實疊加的平移縮放手勢等。
一切都會圍繞著扁平化來進行，這裡包含兩種層面上的扁平化。
視覺上的扁平化
- 去擬物化的材質、高光、紋理等元素
- 簡單優雅的字體
- 簡單鮮明的配色
- 抽象的、更具信息量的圖標
- 流暢簡潔的過場動畫
- 等
內容信息的扁平化
- 沉浸式體驗
- 更少的操作、邏輯層級
- 直觀合理的排版
- 減少冗餘信息、去掉多餘元素
- 等
我說扁平化的話肯定有人要來罵我了LOL
我認為大趨勢是信息整合呈現
根據 elya的回答整理了個思維導圖。
附上2015移動設計趨勢，原文地址：
1.扁平化
2.更少按鈕，更多手勢
3.促進理解的輔助動畫
4.更大字體
5.更大搜索框
6.更多動態素材
7.更艷顏色
我覺得減少信息層級才是王道。某些APP，我想要知道裡面的信息，完全不應該打開APP(當然這對加了廣告的APP是致命傷),比如天氣預報～～。這些APP完全可以把用戶想要的信息直接顯示在APP的圖標上，從這點來看，WP做的不錯！
國外網站的總結，13年總結的大部分都得到了驗證。
---題外話：無論總結的多好，保持獨立思考很重要。
新的一年有很多事情值得我們去期待。去年，科技網站thenextweb預測了2013年的10個網站設計趨勢，很多預測都得到見證。隨著新年的到來，他們又提出2014年10個網站設計趨勢。
1.拋棄枯燥的排版
設計師越來越熱衷於體驗不同的風格，而2014年一個重要的風格轉變就是個性化字體的運用。個性化的字體好像一種自我代言。設計師藉助不同的字體為設計添加一點個性和獨特性。
2.扁平化設計
去年，我們就表示蘋果很可能拋棄擬物化設計。隨著iOS7的發布，「扁平化」設計美學誕生。蘋果一直都是設計風格的引領者，所以跟風者肯定很多。iOS7上線已經有一段時間了，並且海量般的網站都在採用「扁平」設計。我們認為這種趨勢不會在2014年終結。
3.大張圖片取代滑動條
如果你想知道2014年首屈一指的網站設計趨勢。那就是在網站的首頁放一張大圖片，並配以少量的文字。無論是背景中一張模糊的圖片還是精心製作的版本，它們正快速佔領窗口滾動條曾經佔據的位置，成為抓取讀者注意力的新秀。
4.更加註重移動
網站將更加深挖移動業務。設計師們要確保他們的網站能夠在移動設備上流暢顯示。如何讓自己的移動網站更吸引人？與社交融合、要求郵件訂閱、提高下載速度都是不錯的辦法。
5.視頻取代文本
能看的時候為什麼要讀？視頻的製作與分享越來越容易。雖然有人認為視頻數據量過大不適合放在網站首頁，但當解釋技術問題或語言難以描述清楚的新問題時，視頻的效率更高。此外，很多視頻服務，如Youtube讓你追蹤視頻點擊量及受歡迎程度，這樣方便你更好地規劃內容。
6.超長網頁
我們習慣於滑滾動網頁獲取信息。由於現在網站採用更多的設計技術，如增多的空白空間以及快速響應技術，所以超長的網頁又開始出現。以前，長網頁會擠滿內容，現在雖然網頁也很長，但內容組織更加有序，格式也更便於閱讀。用戶一點也不會覺得長。
7.更簡單的顏色主題
2014年，更多的網站會採用簡單的色彩主題，可能只是一種或兩種顏色。當前上線的一些網站都採用極少的色彩，甚至放棄所有的顏色。黑、白以及介於兩者間的顏色都是很受歡迎的主題。
8.簡化的內容
如果說2013年是「內容為王」，那麼2014年簡化的內容將主宰網站設計。簡化的內容意味著信息以Twitter風格的短內容呈現。經過這麼多年的演變，用戶的注意力集中時間越來越短，所以設計師應該壓縮內容，避免長篇大論。
9.放棄工具欄
這點更適合博客或者雜誌風格的網站，放棄工具欄可讓網站內容更具視覺衝擊力。想像一下，當讀者閱讀網站文章時，沒有那麼多閃閃發光的東西奪走他的注意力該有多好。設計師當前正撇棄這些分神的東西，不管是否有效，總算一個比較好的趨勢。
10.處理過的圖片
雖然在網站上放圖片很容易，但將圖片改得特別一點絕非易事。2014年，我們會看到更多使用色彩重疊、模糊處理技術的圖片。這樣的修改是為了更加契合整個網站的主題。
小清新 與 文藝風格 勢不可擋
越簡單，越扁平，用戶體驗越好吧
設計師更多的是用腦用邏輯做設計……而不是用感覺……這肯定是最大的趨勢，對於設計工作的重新思考，更關注用戶體驗，而不是照搬需求
圓形按鈕得到重視以及廣泛應用。
參見了上述很多答案，其實今年流行的風格不會太突兀或新奇，他們所描述的，大部分都跟iOS7的style是吻合的，今年流行扁平沒商量！
其實話又說回來，移動操作界面的UI設計，從07年第一代iPhone發布至今，除了WindowsPhone，有什麼其它創新或變化么？變化最大的我甚至都覺得是來自於iOS7的自我革命！
微軟的扁平在信息展示和顏色搭配上做得很好，不過在「信息展示」上我個人覺得做得還不夠充足，比如「電話」「簡訊」等應用上的單色塊加簡單圖標顯得會過於單調，不是簡約，絕對是單調！但WP總歸是有不錯的未來的，至少在UI設計上，它是極其成功的！也很期待微軟的後續動作以及時間和用戶的積累所帶來的應用商店的改觀！
手勢操作，現在用慣了已經回不去要用手指精確點屏幕上某一個按鈕的時代了，嚴重鄙視那些還不用手勢操作的app
扁平化
手勢操作
字變少圖變多變大
還有現在的UI設計無論移動設備還是PC上面越來越多往扁平化方面設計
還是要多從用戶體驗上多去思考，更多的還是基礎性的工作。風格都是隨著理念走的，一個好的設計工作者應該去走出很有不同見解的路。趨勢只是參考不是權威。類似於偏平化什麼的，都是沒用的。
我覺得說什麼都是聊聊，你們能猜中明天股市是漲是跌，但是有機會蒙中，因為不是漲就是跌，跟你們大多數人一樣，跟大多數股民一樣，都認為 嗯 自己是專家 蒙中幾回而已。
推薦閱讀：