2015 年移動設備界面設計有哪些趨勢？

12-08

希望這個能成為年度問題~
相關問題：
2014 年移動設備界面設計有哪些趨勢？ - 移動互聯網
2013 年，有哪些界面設計風格趨勢？ - 用戶界面設計
----
本問題已收錄到知乎圓桌－ 2015 年度盤點，歡迎關注圓桌參與更多討論。

看完 @胡痴兒的回答，很專業，有圖有真相，行文太長，為了便於直觀全貌，思維導圖整理之，方便大家和自己，感謝 @胡痴兒專業貢獻！

PS：單擊圖片可以放大查看。
另，直接提供xmind源文件下載：http://vdisk.weibo.com/s/mxHYYKoN6xw ；轉載請標明出處，謝謝!

謝邀~

1、屏幕更大（就像iphone的廣告里說的「豈止於大」）
在過去的一年，不只是三星的屏幕已經大到趕上ipad了，蘋果公司也沒落後啊，越來越大的屏幕雖然在發布會前後會被大家一頓罵，但是用戶用著還是很開心的，其他品牌的移動設備也真的越來越大。

所以屏幕的增大絕對是15年移動設備最主要的趨勢。
根據Adobe的數據顯示，和去年相比，屏幕小於4英寸的移動設備下降了11%。
2、深度和重量

過去幾年裡，平面設計和極簡主義風格成為主流。結合擬物化，雖然在設計中依然延續扁平化的設計風格，但是可以用透明和布局的形式讓界面設計看起來還是很有層次。
3、隱藏菜單

隱藏菜單將更加配適越來越大的屏幕，當你需要的時候點開彈出隱藏菜單的指示標誌，具體的操作便會出現，這樣也會保持界面的簡潔，增強每一項的邏輯性。
4、個性和趣味性

大家有沒有發現，自己手機上最新版本的app或者是剛剛上線的產品，就算不是遊戲也越來越有趣。鮮艷的顏色，趣味性十足的扁平化圖標設計，使用戶在操作的過程中能有很棒的用戶體驗。
5、增強銜接性

隨著可穿戴設備的流行和完善，設備與設備之間連接的完善性成為很重要的一點。

大屏幕交互
手勢交互
多任務多app之間的協同運作，跳轉，連結
多種輸入設備之間的場景切換：鍵鼠，手勢感測器，觸摸屏，攝像頭，語音，感測器信息等等

（超高能多圖預警）（轉載請註明「來自胡痴兒」）
前提：2014年，Google推出影響全球設計趨勢的materialDesign，接著蘋果推出ios8和兩台影響ios屏幕適配的大屏手機
1.大屏手機的普及化
首先讓我們看一眼友盟的數據
Android

ios

友盟每天推送的郵件

3.5英寸~4英寸——平衡單手操作的合理尺寸範圍。

51%的用戶適應雙手操作

盲區（深色區域）更多響應時間

為什麼我們需要大屏手機？

展現、承載更多的內容：遊戲、閱讀、播放視頻…

（以上，參考大屏手機時代，如何重塑界面交互）

不用放大就可以看到主體圖像，直接瀏覽內容

無需水平滾動就能看到更多文本

面對大屏手機，蘋果做了什麼？

輕觸兩次home鍵……

搜狗做了什麼？

單手鍵盤

google做了什麼？
在紛亂的智能設備和雜亂的屏幕種類中，
發布Material Design，構建跨平台和超越設備尺寸的統一體驗

我們該怎麼做？

充分利用全屏構造更大的展示空間，創建沉浸式體驗：

以內容為核心，用UI支撐內容。

簡化排版結構
去除視覺修飾
聚焦（突出重點）
增大字間距、行高度
只使用一種字體

（我感覺是借鑒了印刷上的一些規範準則和版式設計）

完美的下劃線

哪些文字可點擊？
不需投入太多注意力
距離文字恰當
當有下行字母佔位時，下劃線要緊貼其後
清除字母下伸部分

大量留白。

讓重要內容、功能醒目聚焦。

可用性問題：

縱向單手操作機身
邊角、頂部、左右側邊難以觸達
放置在以上盲區的點擊入口，將導致體驗路徑中斷

屏幕上半部分放置主要內容，從左屏幕到右屏幕依次排列

設計安全區域，避開操作盲區，比如在左上角操作盲區展示logo

使用場景路徑觸發的連貫性，操作區域集中在安全區域

更多手勢（以手勢驅動界面）；

語音代替鍵盤輸入

paper的聊天頭像

滑動到「X」處刪除

任意位置的頭像點擊後彈出對話框

第一次下拉顯示「刪除」按鈕
第二次刪除刪除草稿

內容跟隨設備（屏幕）旋轉
聚焦用戶關心的主要內容

橫屏Pad化的操作設計，以及更多的內容展現，如同網頁的Responsive Layout概念。

模態視圖

承載連貫操作
不脫離主任務
臨時阻止其他部分的操作
非線性
引起關注
簡短
高度聚焦

paper的展示搜索結果
淡出+延遲

內容區域用有邊界按鈕區分內容

2.動效的廣泛應用（app的肢體語言）
Authentic motion
Easing Functions Cheat Sheet
Animated Checkboxes and Radio Buttons with SVG

用動效表現四維時空——展示Z軸空間、時間變化
隨著顯卡的提升，像素的增多，我們不禁要問，為什麼像素少得可憐的時候我們要擬物化GUI，而像素多得嚇人的時候我們反而極簡而扁平呢？
ios7發布引發了全民扁平化，而動效為設計帶來更多的可能和驚喜。設計師們又多了一片可發揮的領域。

僅用在希望吸引用戶注意的部分
展示面積相同時，用戶注意力會按這個順序依次被吸引

相對面積和時長劃分為四種動效

1.面積大、時間長
產品介紹

2.面積大、時間短

難看清

用於頁面切換，展現界面之間的空間關係

見「轉場動畫」

3.面積小、時間短

輕引導、輕反饋、輕提示→不打斷用戶流程，卻輕輕吸引注意力（情感化設計）

Path的下拉刷新和小時鐘

流動感
彈性

quora的搜索

從橫屏切換會的google被弄歪了=_=

4.面積小，時間長

一直持續輕微吸引用戶，不干擾其他功能和信息

滑動指向性動效（理清物體排列狀況）
chrome

對象切換-指向性動效(重點：這是平滑動畫的關鍵)
當前物體後移（變暗淡透明），新物體出現
YouTube

Path個人頁的滾動漸隱
最後標題出現，背景照片貼著狀態欄…

paper
標題的淡入淡出

圖片和主題右移，退出視線
右上角的白色標題經過三個icon時逐漸變暗直至消失
逃出三個icon的範圍，白色標題又陡然呈現

添加-指向性動效
新物體滑入，擠出舊物體

any do

clear

下滑消失，上滑出現（增大可讀區域）
storehouse

點擊-提示性動效

滑動-提示性動效

分合-指向性動效
any do 的任務的詳細信息的修改（上層和下層合在一起）
胡痴兒按：幾乎所有動效的進場和出場都是正方向和反方向的關係，也就是假如錄成一段動畫就是可循環重複的
分合就像約會。當你點擊，一個妹子從雪山上來，當你點返回，她又回雪山去了

動效控制項
案例：posegram

Path的分享給特別好友

Path的收藏

flickr的收藏

paper的like
焰火綻放

載入動畫:

path的載入指示器
（簡直唯美啊，而且每次都不同）

閑魚的載入

京東app的刷新

來往的下拉

閑魚的下拉

paper左右時間軸
按歷史順序排列

loading設計 _載入界面_loading圖片素材欣賞_UI/UX圖片大全

展開-空間擴展動效
if

轉場動畫（用產品連續性表達了設計的前後關係）
（堅硬的，剛性強，卻不靈活）
案例：Flipboard

相似案例：deal in

對比案例：ibook（柔軟的曲面，剛性差，但靈活）

相似案例：play books
play books for Ios

play books for Android

paper的卡片式翻頁（這種神級的存在(@﹏@)~ ）

輕微的彈動
卡片上動態的光澤

Steller的翻圖（每張圖都美到心醉）

storehouse
上翻或下翻時返回上級頁面
（胡痴兒按：暗示性很強）

拋擲操作打開關閉

paper

flickr

層次和暗示
paper的層次

暗示運動軌跡、動態焦點移動
胡痴兒按：

物體運動受推力、風阻、重力影響
物體按軌跡運動卻不可見，除了黑夜裡的火花、雪地里的足跡
ios的運動軌跡非常自然，它是有一定弧度的，像魚兒水裡游，像少女的乳頭一浪接一浪
Android5.0之前的運動軌跡就是直線的、剛性的，機械得像個跳機械舞的

ios應用啟動

案例：QQ音樂的MiniPlayer切換至播放頁

分成動畫：底層、信息層、唱片封面層用不同的軌跡

慢入慢出（慣性）如：

車的啟動
壓縮的彈簧展開
坐下站起
球落地不斷彈起
動畫：在運動開始和結束時更多的幀，而過程中用較少的幀

開始時慢慢加速，停止時慢慢減速，如圖：

apple的messages

翻動app們

案例：same的尖叫博物館（你給我滾看看→ →）

按次序進出並延遲滑動的icon
易信的朋友圈

paper的贊列表

paper的"hamburger"圖標翻轉成"X"

案例：pages

paper的分類管理

點擊長按大圖出現「自定義視圖」
左右晃動的卡片

胡痴兒按：等待被添加或刪除時，他們嚇得發抖或高興得顫抖

ibook

ios的日曆

預期動效（預感即將發生）
IOS6

capture
1.在運動發生前的準備階段

2.運動過程本身

3.運動產生的結果

sunnycomb

百度魔拍

nice

招牌動效（加深用戶印象的差異化展現）

path的「+」
堆疊物體被展開

facebook 推出的paper關閉消息的拉伸曲線動畫。

背景被拖拽
消息氣泡箭頭被拉伸
最後縮回原處

這種動效設計是有具前瞻性的嘗試和探索，像path的那個展開的「+」引發了跟風潮流。

強姦處女座的拉動
Google+的下拉刷新（像素越拉越細→ w→）

掐死same

拆散一對same（我當時看到這倆分離再相聚的時候心都醉了）

flickr的下拉刷新

3.更生動的情感化設計
404頁面設計 _404 not found_404出錯頁面_404錯誤頁面圖片素材欣賞

4.遵循iOS和Android的各個平台規範

沒有用戶學習成本，且用戶可使用自定義；
統一跨平台的視覺交互體驗；
降低設計開發成本，會自動更新；

(胡痴兒按：一個產品，要和iOS交配產生一個個體，具有iOS交互屬性的後代，又要和Android交配，攜帶Android交互基因的後代，也就是說這個產品的視覺上要像他父親（公司產品線），界面和交互上要像她母親（iOS或Android），還要和她母親的孩子們在移動端和諧相處{&>~&<})
（沉浸式體驗的除外）

案例：豆瓣使用了iOS的系統主題UIkit

用半透明底板：關聯使用場景、區分內容；
無邊框按鈕（被激活時高亮）

用戶自定義字體大小
使用系統字體：確保易讀性、可調節性；

豆瓣閱讀

5.hamburger導航變tab導航（當時我設計戀愛筆記時參考的豆瓣小組，後來豆瓣小組改為底部導航，我們也改了）
扁平結構層級，隨意切換。從深到廣，從多到簡。減少入口和用戶思考時間，更快找到自己所需的功能，功能更專精。
案例：豆瓣小組

6.數據可視化（數據表現越來越豐富，如餅狀、柱狀、曲線、圖案）

視差滾動
胡痴兒按：我想到了坐火車時看窗外，物體分了很多層，遠處的山緩慢而悠閑，近處的電線杆飛竄著，拍出來的照：近處產生了運動模糊，遠處清晰，由近向遠越來越清晰。。太美了{&>~&<} 從一定距離的兩點，觀察同一目標的方向差異。

黃油相機的歡迎頁
（注意每個元素的運動速度！）

一些新的交互探索

用陀螺儀的重力感應看全景圖！
paper

red dot

給用戶一點小驚喜（我當時一不小心屏幕橫過來就被感動了）

補充：

個性的字體
隨著各移動系統的設計規範逐漸統一和技術的愈發成熟，移動應用將會有更美觀的字體。

Roboto，安卓標準字體

Roboto Noto fonts
2014年Adobe與Google宣布推出思源黑體（更適合在移動設備及高解析度屏幕上呈現）

顏色

Ios的Key color

Android

Color - Style

icon的幾層境界：

適合不同背景
簡潔有力（在小尺寸時清晰突出）
高辨識度，吸引眼球
塑造品牌
隱喻（設計背後的故事）
情感連接

品牌
用主題色標明可交互性的控制項

same的藍色

自然地融入品牌
巧妙地訂製淡淡的水印

day one翻到底部時

Path翻到底部時

二級頁面的返回和logo品牌巧妙地融合
quora

path

在當前頁面提供設置選項
設置選項更淺更扁平

bilibili的彈幕設置

鬥魚Tv的彈幕設置

網易雲閱讀

UI上顯示弱反饋

當前在做什麼
接下來要做什麼

易信的設置頭像

上面回答的什麼鬼東西。。那個胡赤兒就是個騙贊的。

今年七月份一篇來自medium的文章詳述了2015UI/UX趨勢，看到之後花了很多時間翻譯和整理了下面的思維導圖。沒過多久，這篇文章在國內火了起來。建議查看原文，作者講解的趨勢下每一條都有動態圖，英文閱讀更能加深理解。

原文地址：Mobile:2015
36氪版本：http://36kr.com/p/5036168.html

想要思維導圖的私信我。

其實所有的設計需要是數據驅動的，一行代碼是否工作可以通過自動化的測試工具來完成，一中新的設計嘗試是否有效，是否讓用戶體驗更愉悅也是需要數據來驅動和分析的。不管是之前的瀑布流，還是扁平化，metro風格等，都是需要不斷創新，然後驗證的。目前為止不管是fb，twt，甚至pinterest，和airbnb都沒有到達到這種可以通過一種新的界面設計來成就一個產品的。所以新的設計趨勢來自於研究用戶的行為數據，分析中間的邏輯，從而找到創新點，用新方式解決老問題。

簡而言之，下拉刷新是刷新指示器於下拉手勢想結合的產物，同時藉助下拉動效完善整個交互。
下拉刷新本質上是一種特定的手動刷新交互，和其他的同類操作不同的地方在於它採用了更加直覺的下拉操作。它的交互足夠清晰明顯，不過有的時候設計師依然會使用刷新指示器來顯示自動更新的內容。不過，由於自動刷新的機制不需要用戶進行任何操作，是因此自動刷新最好還是不要使用刷新指示器了。
http://sina.lt/eRYD

2015年主要還是簡潔扁平為主

技術白痴！個人主觀感受！
2015年手機由安卓走向了iOS，截面設計感覺蘋果清爽但不實用，比如開蜂窩數據非要打開設置(╯°□°）╯︵ ┻━┻！安卓是實用但過於凌亂！