來(lái)源：湯先森

知乎上有同學(xué)提問(wèn)：2015年移動(dòng)設(shè)備界面設(shè)計(jì)有哪些趨勢(shì)？。其中@胡癡兒 同學(xué)給出了有圖有真相的專(zhuān)業(yè)回答，不過(guò)行文太長(zhǎng)，為了便于直觀全貌，我用思維導(dǎo)圖整理之，方便大家和自己，感謝@胡癡兒專(zhuān)業(yè)貢獻(xiàn)！

(點(diǎn)擊放大)

前提：2014年，Google推出影響全球設(shè)計(jì)趨勢(shì)的materialDesign，接著蘋(píng)果推出ios8和兩臺(tái)影響ios屏幕適配的大屏手機(jī)

1.大屏手機(jī)的普及化

首先讓我們看一眼友盟的數(shù)據(jù)

Android

ios

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

51%的用戶適應(yīng)雙手操作

盲區(qū)（深色區(qū)域）更多響應(yīng)時(shí)間

為什么我們需要大屏手機(jī)？——展現(xiàn)、承載更多的內(nèi)容：游戲、閱讀、播放視頻…

1. 不用放大就可以看到主體圖像，直接瀏覽內(nèi)容

2. 無(wú)需水平滾動(dòng)就能看到更多文本

面對(duì)大屏手機(jī)，蘋(píng)果做了什么？
——輕觸兩次home鍵……

搜狗做了什么？
——單手鍵盤(pán)

google做了什么？
——在紛亂的智能設(shè)備和雜亂的屏幕種類(lèi)中，發(fā)布Material Design，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)

我們?cè)撛趺醋觯?/strong>
充分利用全屏構(gòu)造更大的展示空間，創(chuàng)建沉浸式體驗(yàn)：

以內(nèi)容為核心，用UI支撐內(nèi)容。

1. 簡(jiǎn)化排版結(jié)構(gòu)

2. 去除視覺(jué)修飾

3. 聚焦（突出重點(diǎn)）

4. 增大字間距、行高度

（我感覺(jué)是借鑒了印刷上的一些規(guī)范準(zhǔn)則和版式設(shè)計(jì)）

完美的下劃線

1. 哪些文字可點(diǎn)擊？

2. 不需投入太多注意力

3. 距離文字恰當(dāng)

4. 當(dāng)有下行字母占位時(shí)，下劃線要緊貼其后

5. 清除字母下伸部分

大量留白。

讓重要內(nèi)容、功能醒目聚焦。

可用性問(wèn)題：

1. 縱向單手操作機(jī)身

2. 邊角、頂部、左右側(cè)邊難以觸達(dá)

3. 放置在以上盲區(qū)的點(diǎn)擊入口，將導(dǎo)致體驗(yàn)路徑中斷

屏幕上半部分放置主要內(nèi)容，從左屏幕到右屏幕依次排列，設(shè)計(jì)安全區(qū)域，避開(kāi)操作盲區(qū)，比如在左上角操作盲區(qū)展示logo。

使用場(chǎng)景路徑觸發(fā)的連貫性，操作區(qū)域集中在安全區(qū)域。

materialDesign的懸浮按鈕（貼近手指）
——全局切換（左右滑動(dòng)在頁(yè)面可控區(qū)域進(jìn)行頁(yè)面間轉(zhuǎn)換）

miniplayer左右滑動(dòng)切歌(更輕更扁平)

更多手勢(shì)（以手勢(shì)驅(qū)動(dòng)界面）

listen的啟動(dòng)頁(yè)介紹的手勢(shì)

時(shí)效性產(chǎn)品的下拉刷新（獲取最新信息，新內(nèi)容上浮，舊內(nèi)容下沉）

滑動(dòng)代替了點(diǎn)擊（屏幕太他媽大了，我一個(gè)彈鋼琴的都點(diǎn)不到盲區(qū)有木有！?。?/p>

語(yǔ)音代替鍵盤(pán)輸入

內(nèi)容跟隨設(shè)備（屏幕）旋轉(zhuǎn)

橫屏Pad化的操作設(shè)計(jì)，以及更多的內(nèi)容展現(xiàn)，如同網(wǎng)頁(yè)的Responsive Layout概念。

2.動(dòng)效的廣泛應(yīng)用（app的肢體語(yǔ)言）

Authentic motion
Easing Functions Cheat Sheet
Animated Checkboxes and Radio Buttons with SVG

用動(dòng)效表現(xiàn)四維時(shí)空——展示Z軸空間、時(shí)間變化

隨著顯卡的提升，像素的增多，我們不禁要問(wèn)，為什么像素少得可憐的時(shí)候我們要擬物化GUI，而像素多得嚇人的時(shí)候我們反而極簡(jiǎn)而扁平呢？ios7發(fā)布引發(fā)了全民扁平化，而動(dòng)效為設(shè)計(jì)帶來(lái)更多的可能和驚喜。設(shè)計(jì)師們又多了一片可發(fā)揮的領(lǐng)域。

僅用在希望吸引用戶注意的部分

展示面積相同時(shí)，用戶注意力會(huì)按這個(gè)順序依次被吸引

相對(duì)面積和時(shí)長(zhǎng)劃分為四種動(dòng)效

1.面積大、時(shí)間長(zhǎng)
產(chǎn)品介紹


2.面積大、時(shí)間短
難看清

用于頁(yè)面切換，展現(xiàn)界面之間的空間關(guān)系
見(jiàn)“轉(zhuǎn)場(chǎng)動(dòng)畫(huà)”

3.面積小、時(shí)間短
輕引導(dǎo)、輕反饋、輕提示→不打斷用戶流程，卻輕輕吸引注意力（情感化設(shè)計(jì)）

quora的搜索

從橫屏切換會(huì)的google被弄歪了=_=

4.面積小，時(shí)間長(zhǎng)
一直持續(xù)輕微吸引用戶，不干擾其他功能和信息

滑動(dòng)指向性動(dòng)效（理清物體排列狀況）
chrome

Safari

對(duì)象切換-指向性動(dòng)效
當(dāng)前物體后移（變暗淡透明），新物體出現(xiàn)

YouTube

flickr

添加-指向性動(dòng)效
新物體滑入，擠出舊物體

any do

clear

固定標(biāo)簽
頭部標(biāo)簽始終固定在頂部直到被頂走

p1

下滑消失，上滑出現(xiàn)（增大可讀區(qū)域）
storehouse

點(diǎn)擊-提示性動(dòng)效


滑動(dòng)-提示性動(dòng)效

切換對(duì)象-指向性動(dòng)效
storehouse

分合-指向性動(dòng)效

any do 的任務(wù)的詳細(xì)信息的修改（上層和下層合在一起）
胡癡兒按：幾乎所有動(dòng)效的進(jìn)場(chǎng)和出場(chǎng)都是正方向和反方向的關(guān)系，也就是假如錄成一段動(dòng)畫(huà)就是可循環(huán)重復(fù)的。
分合就像約會(huì)。當(dāng)你點(diǎn)擊，一個(gè)妹子從雪山上來(lái)，當(dāng)你點(diǎn)返回，她又回雪山去了。

動(dòng)效控件
案例：posegram

flickr的收藏

加載動(dòng)畫(huà):

京東app的刷新

展開(kāi)-空間擴(kuò)展動(dòng)效
案例：if

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)（用產(chǎn)品連續(xù)性表達(dá)了設(shè)計(jì)的前后關(guān)系）
（堅(jiān)硬的，剛性強(qiáng)，卻不靈活）
案例：Flipboard

相似案例：deal in

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

相似案例：play books
play books for ios

play books for Android

paper的卡片式翻頁(yè)（這種神級(jí)的存在(@﹏@)~ ）
輕微的彈動(dòng)
卡片上動(dòng)態(tài)的光澤

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

暗示運(yùn)動(dòng)軌跡、動(dòng)態(tài)焦點(diǎn)移動(dòng)

胡癡兒按：
物體運(yùn)動(dòng)受推力、風(fēng)阻、重力影響
物體按軌跡運(yùn)動(dòng)卻不可見(jiàn)，除了黑夜里的火花、雪地里的足跡
ios的運(yùn)動(dòng)軌跡非常自然，它是有一定弧度的，像魚(yú)兒水里游，像少女的乳頭一浪接一浪
Android5.0之前的運(yùn)動(dòng)軌跡就是直線的、剛性的，機(jī)械得像個(gè)跳機(jī)械舞的

ios應(yīng)用啟動(dòng)

案例：QQ音樂(lè)的MiniPlayer切換至播放頁(yè)
分成動(dòng)畫(huà)：底層、信息層、唱片封面層 用不同的軌跡

慢入慢出（慣性）如：

車(chē)的啟動(dòng)
壓縮的彈簧展開(kāi)
坐下&站起
球落地不斷彈起
動(dòng)畫(huà)：在運(yùn)動(dòng)開(kāi)始和結(jié)束時(shí)更多的幀，而過(guò)程中用較少的幀
開(kāi)始時(shí)慢慢加速，停止時(shí)慢慢減速，如圖：

apple的messages

翻動(dòng)app們

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

案例：知乎Android客戶端的“三”和“←”之間的切換（完美地參考Gmail，很好地遵循了materialDesign）

以操作焦點(diǎn)為中心的空間擴(kuò)展（翻動(dòng)、放大，拓展空間內(nèi)容，簡(jiǎn)化引導(dǎo)流程）
集合視圖轉(zhuǎn)換
UI Collection View Transition Layout
運(yùn)動(dòng)路徑以用戶操作焦點(diǎn)為中心或軸的運(yùn)動(dòng)，以銜接界面切換中的過(guò)渡動(dòng)態(tài)，引導(dǎo)視覺(jué)焦點(diǎn)

案例：Google
以觸摸點(diǎn)為中心延展

告訴用戶他在哪，從哪里來(lái)到哪里去
從縮略圖到全屏，同時(shí)中心點(diǎn)轉(zhuǎn)移

案例：pages

空間速率Parallax
界面視差空間結(jié)構(gòu)（越靠近屏幕邊緣啟動(dòng)速度越快、越靠近屏幕中心啟動(dòng)速度越慢）

胡癡兒按：我記得我學(xué)畫(huà)畫(huà)時(shí)總聽(tīng)老師說(shuō)怎么拉空間，蘋(píng)果用動(dòng)態(tài)拉空間真是吊爆了，讓我感覺(jué)中心點(diǎn)離我更近，屏幕邊緣離我更遠(yuǎn){>~<}

ibook

ios的日歷

預(yù)期動(dòng)效（預(yù)感即將發(fā)生）
iOS6

capture

1.在運(yùn)動(dòng)發(fā)生前的準(zhǔn)備階段

2.運(yùn)動(dòng)過(guò)程本身

3.運(yùn)動(dòng)產(chǎn)生的結(jié)果

sunnycomb

百度魔拍

nice

招牌動(dòng)效（加深用戶印象的差異化展現(xiàn)）

path的“+”
堆疊物體被展開(kāi)


facebook 推出的paper關(guān)閉消息的拉伸曲線動(dòng)畫(huà)。

這種動(dòng)效設(shè)計(jì)是有具前瞻性的嘗試和探索，像path的那個(gè)展開(kāi)的“+”引發(fā)了跟風(fēng)潮流。

強(qiáng)奸處女座的拉動(dòng)
Google+的下拉刷新（像素越拉越細(xì)→ w→）

掐死same

拆散一對(duì)same（我當(dāng)時(shí)看到這倆分離再相聚的時(shí)候心都醉了）

flickr的下拉刷新

3.更生動(dòng)的情感化設(shè)計(jì)

404頁(yè)面設(shè)計(jì) _404 not found_404出錯(cuò)頁(yè)面_404錯(cuò)誤頁(yè)面圖片素材欣賞

4.遵循iOS和Android的各個(gè)平臺(tái)規(guī)范。

使用iOS的系統(tǒng)主題讓其成為應(yīng)用的UI
降低用戶學(xué)習(xí)成本；
統(tǒng)一跨平臺(tái)的視覺(jué)交互體驗(yàn)；
降低設(shè)計(jì)開(kāi)發(fā)成本
(一個(gè)產(chǎn)品，要和iOS交配產(chǎn)生一個(gè)個(gè)體，具有iOS交互屬性的后代，又要和Android交配，攜帶Android交互基因的后代，也就是說(shuō)這個(gè)產(chǎn)品的視覺(jué)上要像他父親（公司產(chǎn)品線），界面和交互上要像她母親（iOS或Android），還要和她母親的孩子們?cè)谝苿?dòng)端和諧相處{>~<})

案例：豆瓣

用半透明底板：關(guān)聯(lián)使用場(chǎng)景、區(qū)分內(nèi)容；
使用系統(tǒng)字體：確保易讀性、可調(diào)節(jié)性；
無(wú)邊框按鈕（被激活時(shí)高亮）

5.hamburger導(dǎo)航變tab導(dǎo)航（當(dāng)時(shí)我設(shè)計(jì)戀愛(ài)筆記時(shí)參考的豆瓣小組，后來(lái)豆瓣小組改為底部導(dǎo)航，我們也改了）
扁平結(jié)構(gòu)層級(jí)，從深到廣，從多到簡(jiǎn)。減少入口和用戶思考時(shí)間，更快找到自己所需的功能，功能更專(zhuān)精。

案例：豆瓣小組

6.數(shù)據(jù)可視化（數(shù)據(jù)表現(xiàn)越來(lái)越豐富，如餅狀、柱狀、曲線、圖案）

視差滾動(dòng)
胡癡兒按：我想到了坐火車(chē)時(shí)看窗外，物體分了很多層，遠(yuǎn)處的山緩慢而悠閑，近處的電線桿飛竄著，拍出來(lái)的照：近處產(chǎn)生了運(yùn)動(dòng)模糊，遠(yuǎn)處清晰，由近向遠(yuǎn)越來(lái)越清晰。。太美了{(lán)>~<} 從一定距離的兩點(diǎn)，觀察同一目標(biāo)的方向差異。

黃油相機(jī)的歡迎頁(yè)（注意每個(gè)元素的運(yùn)動(dòng)速度?。?/p>

一些新的交互探索
用陀螺儀的重力感應(yīng)看全景圖！

paper

red dot

人與攝像頭交互

（捕捉用戶運(yùn)動(dòng)軌跡）

FLUTTER

將手掌往攝像頭一按，音樂(lè)停止，再按繼續(xù)播放

（下載URL：https://flutterapp.com/）

格靈深瞳

camme
通過(guò)前置攝像頭捕捉手掌動(dòng)作或眨眼實(shí)現(xiàn)快門(mén)

Goccia
扣在手機(jī)的前置攝像頭上，獲取光信號(hào)，發(fā)出攜帶數(shù)據(jù)的彩光，向手機(jī)傳輸數(shù)據(jù)。由手機(jī)攝像頭捕捉后轉(zhuǎn)化為電信號(hào)數(shù)據(jù)儲(chǔ)存到手機(jī)或者云端。

旋轉(zhuǎn)交互

Nest
轉(zhuǎn)動(dòng)調(diào)整、按下確定

招手取消報(bào)警

后臺(tái)自動(dòng)完成的交互——追蹤睡眠和呼吸等信息

Owlet
采集嬰兒信息

FitBark
采集寵物信息

Google glass的敲擊發(fā)送

Voice in：發(fā)出指令
google glass的“Ok glass”

Voice out：反饋延伸

moov
運(yùn)動(dòng)設(shè)備
siri給出語(yǔ)音反饋

nike+的Fuelband
硬件更便攜延展至app上

模塊化處理，為解決用戶對(duì)不同功能產(chǎn)品的選擇困惑。分離部件（相同接口、不同功能），封裝在不同模塊中（芯片、電池、馬達(dá)、各種傳感器…），廠商和用戶可根據(jù)需求自由組合，如：

• 電池續(xù)航模塊

• 記錄卡路里消耗的模塊

• 監(jiān)測(cè)心率模塊

Google積木手機(jī)

中控中界面

tesla中控

智能外設(shè)

解決了屏幕軟件上的操控缺陷，強(qiáng)化擴(kuò)展功能

• 錢(qián)包

• 游戲機(jī)

• 診療設(shè)備

• 耳機(jī)孔外設(shè)

• 與手機(jī)攝像頭交互的外設(shè)

• 與屏幕交互的智能筆

• Square

• 移動(dòng)支付設(shè)備

oppo的O-Click的遙控拍照

關(guān)懷設(shè)計(jì)

Smart PJ’s
代替自己給孩子講故事

Sensefloor
摔倒報(bào)120

huggies tweetpee
尿不濕更換通知器

當(dāng)尿不濕的承載量已經(jīng)達(dá)到極限時(shí)會(huì)通過(guò)tweet通知家長(zhǎng)換尿不濕

Quick Trainer
當(dāng)人體需要尿尿時(shí)發(fā)出警報(bào)

Nex Band

最多5個(gè)模塊組合，追蹤解析數(shù)據(jù)

智能家居公司belkin

給用戶一點(diǎn)小驚喜（我當(dāng)時(shí)一不小心屏幕橫過(guò)來(lái)就被感動(dòng)了）

個(gè)性的字體

隨著各移動(dòng)系統(tǒng)的設(shè)計(jì)規(guī)范逐漸統(tǒng)一和技術(shù)的愈發(fā)成熟，移動(dòng)應(yīng)用將會(huì)有更美觀的字體。

Roboto，安卓標(biāo)準(zhǔn)字體

Roboto & Noto fonts

2014年Adobe與Google宣布推出思源黑體（更適合在移動(dòng)設(shè)備及高分辨率屏幕上呈現(xiàn)）

顏色

iOS

Android