起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識2015 年移動設備界面設計趨勢
小編推薦：最近坐地鐵看見有人看知乎的時候在看這篇回答，圖片很吸引人，所以今早到了公司就趕緊整理給大家，不可錯過哦~
@胡癡兒的回答：
前提：2014年，Google推出影響全球設計趨勢的materialDesign，接著蘋果推出ios8和兩臺影響ios屏幕適配的大屏手機
1.大屏手機的普及化
首先讓我們看一眼友盟的數據
Android
ios
3.5英寸~4英寸——平衡單手操作的合理尺寸范圍。
51%的用戶適應雙手操作
盲區（深色區域）更多響應時間
為什么我們需要大屏手機？
展現、承載更多的內容：游戲、閱讀、播放視頻…
（以上，參考 大屏手機時代，如何重塑界面交互）
不用放大就可以看到主體圖像，直接瀏覽內容
無需水平滾動就能看到更多文本
面對大屏手機，蘋果做了什么？
輕觸兩次home鍵……
搜狗做了什么？
單手鍵盤
google做了什么？
在紛亂的智能設備和雜亂的屏幕種類中，
發布Material Design，構建跨平臺和超越設備尺寸的統一體驗
我們該怎么做？
充分利用全屏構造更大的展示空間，創建沉浸式體驗：
以內容為核心，用UI支撐內容。
- 簡化排版結構
- 去除視覺修飾
- 聚焦（突出重點）
- 增大字間距、行高度
- 只使用一種字體
（我感覺是借鑒了印刷上的一些規范準則和版式設計）
大量留白。
讓重要內容、功能醒目聚焦。
可用性問題：
- 縱向單手操作機身
- 邊角、頂部、左右側邊難以觸達
- 放置在以上盲區的點擊入口，將導致體驗路徑中斷
屏幕上半部分放置主要內容，從左屏幕到右屏幕依次排列
設計安全區域，避開操作盲區，比如在左上角操作盲區展示logo
使用場景路徑觸發的連貫性，操作區域集中在安全區域
materialDesign的懸浮按鈕（貼近手指）；
全局切換（左右滑動在頁面可控區域進行頁面間轉換）
miniplayer左右滑動切歌(更輕更扁平)
- 更多手勢（以手勢驅動界面）；
listen的啟動頁介紹的手勢
時效性產品的下拉刷新（獲取最新信息，新內容上浮，舊內容下沉）
滑動代替了點擊（屏幕太他媽大了，我一個彈鋼琴的都點不到盲區有木有?。。?/p>
語音代替鍵盤輸入
內容跟隨設備（屏幕）旋轉
聚焦用戶關心的主要內容
橫屏Pad化的操作設計，以及更多的內容展現，如同網頁的Responsive Layout概念。
模態視圖
- 承載連貫操作
- 不脫離主任務
- 臨時阻止其他部分的操作
- 非線性
- 引起關注
- 簡短
- 高度聚焦
更大的熱區
Path的個人背景圖
單擊任意一處彈出
再單擊彈窗外任意一處退出
內容區域用有邊界按鈕區分內容
2.動效的廣泛應用（app的肢體語言）
Authentic motion
Animated Checkboxes and Radio Buttons with SVG
用動效表現四維時空——展示Z軸空間、時間變化
隨著顯卡的提升，像素的增多，我們不禁要問，為什么像素少得可憐的時候我們要擬物化GUI，而像素多得嚇人的時候我們反而極簡而扁平呢？
ios7發布引發了全民扁平化，而動效為設計帶來更多的可能和驚喜。設計師們又多了一片可發揮的領域。
僅用在希望吸引用戶注意的部分
展示面積相同時，用戶注意力會按這個順序依次被吸引
相對面積和時長劃分為四種動效
1.面積大、時間長
產品介紹
2.面積大、時間短
難看清
用于頁面切換，展現界面之間的空間關系
見“轉場動畫”
3.面積小、時間短
輕引導、輕反饋、輕提示→不打斷用戶流程，卻輕輕吸引注意力（情感化設計）
Path的下拉刷新和小時鐘
- 流動感
- 彈性
quora的搜索
從橫屏切換會的google被弄歪了=_=
4.面積小，時間長
一直持續輕微吸引用戶，不干擾其他功能和信息
滑動指向性動效（理清物體排列狀況）
chrome
Safari
對象切換-指向性動效
當前物體后移（變暗淡透明），新物體出現
YouTube
Path個人頁的滾動漸隱
最后標題出現，背景照片貼著狀態欄…
flickr
添加-指向性動效
新物體滑入，擠出舊物體
any do
clear
固定標簽
頭部標簽始終固定在頂部直到被頂走
p1
下滑消失，上滑出現（增大可讀區域）
storehouse
點擊-提示性動效
滑動-提示性動效
切換對象-指向性動效
storehouse
分合-指向性動效
any do 的任務的詳細信息的修改（上層和下層合在一起）
胡癡兒按：幾乎所有動效的進場和出場都是正方向和反方向的關系，也就是假如錄成一段動畫就是可循環重復的
分合就像約會。當你點擊，一個妹子從雪山上來，當你點返回，她又回雪山去了
Path的彈入彈出
彈入進入
彈出退出
動效控件
案例：posegram
氣泡似的搜索過濾項
Path的分享給特別好友
Path的收藏
flickr的收藏
加載動畫:
path的加載指示器
（簡直唯美啊，而且每次都不同）
閑魚的加載
京東app的刷新
來往的下拉
閑魚的下拉
loading設計 _加載界面_loading圖片素材欣賞_UI/UX圖片大全
展開-空間擴展動效
轉場動畫（用產品連續性表達了設計的前后關系）
（堅硬的，剛性強，卻不靈活）
案例：Flipboard
相似案例：deal in
對比案例：ibook（柔軟的曲面，剛性差，但靈活
相似案例：play books
play books for Ios
play books for Android
paper的卡片式翻頁（這種神級的存在(@﹏@)~ ）
Steller的翻圖（每張圖都美到心醉）
暗示運動軌跡、動態焦點移動
胡癡兒按：
- 物體運動受推力、風阻、重力影響
- 物體按軌跡運動卻不可見，除了黑夜里的火花、雪地里的足跡
- ios的運動軌跡非常自然，它是有一定弧度的，像魚兒水里游，像少女的乳頭一浪接一浪
- Android5.0之前的運動軌跡就是直線的、剛性的，機械得像個跳機械舞的
- ios應用啟動
案例：QQ音樂的MiniPlayer切換至播放頁
分成動畫：底層、信息層、唱片封面層 用不同的軌跡
慢入慢出（慣性）如：
- 車的啟動
- 壓縮的彈簧展開
- 坐下&站起
- 球落地不斷彈起
- 動畫：在運動開始和結束時更多的幀，而過程中用較少的幀
開始時慢慢加速，停止時慢慢減速，如圖：
apple的messages
翻動app們
案例：same的尖叫博物館（你給我滾看看→ →）
案例：知乎Android客戶端的“三”和“←”之間的切換（完美地參考Gmail，很好地遵循了materialDesign）
以操作焦點為中心的空間擴展（翻動、放大，拓展空間內容，簡化引導流程）
集合視圖轉換
UI Collection View Transition Layout
運動路徑以用戶操作焦點為中心或軸的運動，以銜接界面切換中的過渡動態，引導視覺焦點
案例：Google
以觸摸點為中心延展
告訴用戶他在哪，從哪里來到哪里去
從縮略圖到全屏，同時中心點轉移
案例：pages
空間速率Parallax
界面視差空間結構（越靠近屏幕邊緣啟動速度越快、越靠近屏幕中心啟動速度越慢）
胡癡兒按：我記得我學畫畫時總聽老師說怎么拉空間，蘋果用動態拉空間真是吊爆了，讓我感覺中心點離我更近，屏幕邊緣離我更遠{>~<}
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.數據可視化（數據表現越來越豐富，如餅狀、柱狀、曲線、圖案）
視差滾動
胡癡兒按：我想到了坐火車時看窗外，物體分了很多層，遠處的山緩慢而悠閑，近處的電線桿飛竄著，拍出來的照：近處產生了運動模糊，遠處清晰，由近向遠越來越清晰。。太美了{>~<}
從一定距離的兩點，觀察同一目標的方向差異。
黃油相機的歡迎頁（注意每個元素的運動速度?。?br />
一些新的交互探索
用陀螺儀的重力感應看全景圖！
paper
red dot
人與攝像頭交互
（捕捉用戶運動軌跡）
FLUTTER
將手掌往攝像頭一按，音樂停止，再按繼續播放
格靈深瞳
camme
通過前置攝像頭捕捉手掌動作或眨眼實現快門
Goccia
扣在手機的前置攝像頭上，獲取光信號，發出攜帶數據的彩光，向手機傳輸數據。
由手機攝像頭捕捉后轉化為電信號數據儲存到手機或者云端
旋轉交互
Nest
轉動調整、按下確定
招手取消報警
后臺自動完成的交互
追蹤睡眠和呼吸等信息
Owlet
采集嬰兒信息
FitBark
采集寵物信息
Google glass的敲擊發送
Voice in：發出指令
google glass的“Ok glass”
Voice out：反饋延伸
moov
運動設備
siri給出語音反饋
nike+的Fuelband
硬件更便攜延展至app上
模塊化處理
為解決用戶對不同功能產品的選擇困惑
分離部件（相同接口、不同功能），封裝在不同模塊中（芯片、電池、馬達、各種傳感器…），廠商和用戶可根據需求自由組合，如
- 電池續航模塊
- 記錄卡路里消耗的模塊
- 監測心率模塊
Google積木手機
中控中界面
tesla中控
智能外設
解決了屏幕軟件上的操控缺陷，強化擴展功能
- 錢包
- 游戲機
- 診療設備
- 耳機孔外設
- 與手機攝像頭交互的外設
- 與屏幕交互的智能筆
Square
移動支付設備
oppo的O-Click的遙控拍照
關懷設計
Smart PJ’s
代替自己給孩子講故事
Sensefloor
摔倒報120
huggies tweetpee
尿不濕更換通知器
當尿不濕的承載量已經達到極限時會通過tweet通知家長換尿不濕
Quick Trainer
當人體需要尿尿時發出警報
Nex Band
最多5個模塊組合，追蹤解析數據
智能家居公司belkin
給用戶一點小驚喜（我當時一不小心屏幕橫過來就被感動了）
補充：
個性的字體
隨著各移動系統的設計規范逐漸統一和技術的愈發成熟，移動應用將會有更美觀的字體。
Roboto，安卓標準字體
Roboto & Noto fonts
2014年Adobe與Google宣布推出思源黑體（更適合在移動設備及高分辨率屏幕上呈現）
顏色
Ios的Key color
Android
Color – Style
icon的幾層境界：
- 適合不同背景
- 簡潔有力（在小尺寸時清晰突出）
- 高辨識度，吸引眼球
- 塑造品牌
- 隱喻（設計背后的故事）
- 情感連接
品牌
用主題色標明可交互性的控件
same的藍色
- 自然地融入品牌
- 巧妙地訂制淡淡的水印
day one翻到底部時
Path翻到底部時
二級頁面的返回和logo品牌巧妙地融合
quora
path
在當前頁面提供設置選項
設置選項更淺更扁平
bilibili的彈幕設置
斗魚Tv的彈幕設置
網易云閱讀
UI上顯示弱反饋
- 當前在做什么
- 接下來要做什么
- 易信的設置頭像
本文由人人都是產品經理@魚精整理自@知乎問答，轉載請注明作者@胡癡兒，并保留原文鏈接。
說得好好，滿滿的干貨，深深感動了一把~~~
不錯，謝謝！