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

• 簡(jiǎn)化排版結(jié)構(gòu)
• 去除視覺(jué)修飾
• 聚焦（突出重點(diǎn)）
• 增大字間距、行高度
• 只使用一種字體

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

大量留白。

讓重要內(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)

聚焦用戶關(guān)心的主要內(nèi)容

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

模態(tài)視圖

• 承載連貫操作
• 不脫離主任務(wù)
• 臨時(shí)阻止其他部分的操作
• 非線性
• 引起關(guān)注
• 簡(jiǎn)短
• 高度聚焦

更大的熱區(qū)

Path的個(gè)人背景圖

單擊任意一處彈出

再單擊彈窗外任意一處退出

內(nèi)容區(qū)域用有邊界按鈕區(qū)分內(nèi)容

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ì)）

Path的下拉刷新和小時(shí)鐘

• 流動(dòng)感
• 彈性

quora的搜索

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

4.面積小，時(shí)間長(zhǎng)

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

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

chrome

Safari

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

當(dāng)前物體后移（變暗淡透明），新物體出現(xiàn)

YouTube

Path個(gè)人頁(yè)的滾動(dòng)漸隱

最后標(biāo)題出現(xiàn)，背景照片貼著狀態(tài)欄…

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)返回，她又回雪山去了

Path的彈入彈出

彈入進(jìn)入

彈出退出

動(dòng)效控件

案例：posegram

氣泡似的搜索過(guò)濾項(xiàng)

Path的分享給特別好友

Path的收藏

flickr的收藏

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

path的加載指示器

（簡(jiǎn)直唯美啊，而且每次都不同）


閑魚(yú)的加載

京東app的刷新

來(lái)往的下拉

閑魚(yú)的下拉

loading設(shè)計(jì) _加載界面_loading圖片素材欣賞_UI/UX圖片大全

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

轉(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í)的存在(@﹏@)~ ）

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à)：底層、信息層、唱片封面層 用不同的軌跡

慢入慢出（慣性）如：

• 車的啟動(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)潮流。

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ī)范

• 沒(méi)有用戶學(xué)習(xí)成本，且用戶可使用自定義；
• 統(tǒng)一跨平臺(tái)的視覺(jué)交互體驗(yàn)；
• 降低設(shè)計(jì)開(kāi)發(fā)成本，會(huì)自動(dòng)更新；

(胡癡兒按：一個(gè)產(chǎn)品，要和iOS交配產(chǎn)生一個(gè)個(gè)體，具有iOS交互屬性的后代，又要和Android交配，攜帶Android交互基因的后代，也就是說(shuō)這個(gè)產(chǎn)品的視覺(jué)上要像他父親（公司產(chǎn)品線），界面和交互上要像她母親（iOS.Android），還要和她母親的孩子們?cè)谝苿?dòng)端和諧相處{>~<})

（沉浸式體驗(yàn)的除外）

案例：豆瓣使用了iOS的系統(tǒng)主題UIkit

• 用半透明底板：關(guān)聯(lián)使用場(chǎng)景、區(qū)分內(nèi)容；
• 無(wú)邊框按鈕（被激活時(shí)高亮）

用戶自定義字體大小

使用系統(tǒng)字體：確保易讀性、可調(diào)節(jié)性；

豆瓣閱讀

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í)間，更快找到自己所需的功能，功能更專精。

案例：豆瓣小組

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

視差滾動(dòng)

胡癡兒按：我想到了坐火車時(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)速度?。?br />
一些新的交互探索

用陀螺儀的重力感應(yīng)看全景圖！

paper

red dot

人與攝像頭交互

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

https://flutterapp.com/

FLUTTER

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

格靈深瞳

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)了）

補(bǔ)充：

個(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的Key color

Android

Color – Style

icon的幾層境界：

• 適合不同背景
• 簡(jiǎn)潔有力（在小尺寸時(shí)清晰突出）
• 高辨識(shí)度，吸引眼球
• 塑造品牌
• 隱喻（設(shè)計(jì)背后的故事）
• 情感連接

品牌

用主題色標(biāo)明可交互性的控件

same的藍(lán)色

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

day one翻到底部時(shí)

Path翻到底部時(shí)

二級(jí)頁(yè)面的返回和logo品牌巧妙地融合

quora

path

在當(dāng)前頁(yè)面提供設(shè)置選項(xiàng)

設(shè)置選項(xiàng)更淺更扁平

bilibili的彈幕設(shè)置

斗魚(yú)Tv的彈幕設(shè)置

網(wǎng)易云閱讀

UI上顯示弱反饋

• 當(dāng)前在做什么
• 接下來(lái)要做什么
• 易信的設(shè)置頭像

本文由人人都是產(chǎn)品經(jīng)理@魚(yú)精整理自@知乎問(wèn)答，轉(zhuǎn)載請(qǐng)注明作者@胡癡兒，并保留原文鏈接。