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

模態(tài)視圖

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

更大的熱區(qū)

Path的個人背景圖

單擊任意一處彈出

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

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

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

Easing Functions Cheat Sheet

Animated Checkboxes and Radio Buttons with SVG

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

隨著顯卡的提升，像素的增多，我們不禁要問，為什么像素少得可憐的時(shí)候我們要擬物化GUI，而像素多得嚇人的時(shí)候我們反而極簡而扁平呢？

ios7發(fā)布引發(fā)了全民扁平化，而動效為設(shè)計(jì)帶來更多的可能和驚喜。設(shè)計(jì)師們又多了一片可發(fā)揮的領(lǐng)域。

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

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

相對面積和時(shí)長劃分為四種動效

1.面積大、時(shí)間長

產(chǎn)品介紹

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

難看清

用于頁面切換，展現(xiàn)界面之間的空間關(guān)系

見“轉(zhuǎn)場動畫”

3.面積小、時(shí)間短

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

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

• 流動感
• 彈性

quora的搜索

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

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

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

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

chrome

Safari

對象切換-指向性動效

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

YouTube

Path個人頁的滾動漸隱

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

flickr

添加-指向性動效

新物體滑入，擠出舊物體

any do

clear

固定標(biāo)簽

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

p1

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

storehouse

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

滑動-提示性動效

切換對象-指向性動效

storehouse

分合-指向性動效

any do 的任務(wù)的詳細(xì)信息的修改（上層和下層合在一起）

胡癡兒按：幾乎所有動效的進(jìn)場和出場都是正方向和反方向的關(guān)系，也就是假如錄成一段動畫就是可循環(huán)重復(fù)的

分合就像約會。當(dāng)你點(diǎn)擊，一個妹子從雪山上來，當(dāng)你點(diǎn)返回，她又回雪山去了

Path的彈入彈出

彈入進(jìn)入

彈出退出

動效控件

案例：posegram

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

Path的分享給特別好友

Path的收藏

flickr的收藏

加載動畫:

path的加載指示器

（簡直唯美啊，而且每次都不同）


閑魚的加載

京東app的刷新

來往的下拉

閑魚的下拉

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

展開-空間擴(kuò)展動效

轉(zhuǎn)場動畫（用產(chǎn)品連續(xù)性表達(dá)了設(shè)計(jì)的前后關(guān)系）

（堅(jiān)硬的，剛性強(qiáng)，卻不靈活）

案例：Flipboard
相似案例：deal in

對比案例：ibook（柔軟的曲面，剛性差，但靈活
相似案例：play books

play books for Ios
play books for Android

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

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

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

胡癡兒按：

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

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

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

慢入慢出（慣性）如：

• 車的啟動
• 壓縮的彈簧展開
• 坐下&站起
• 球落地不斷彈起
• 動畫：在運(yùn)動開始和結(jié)束時(shí)更多的幀，而過程中用較少的幀

開始時(shí)慢慢加速，停止時(shí)慢慢減速，如圖：

apple的messages

翻動app們

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

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

以操作焦點(diǎn)為中心的空間擴(kuò)展（翻動、放大，拓展空間內(nèi)容，簡化引導(dǎo)流程）

集合視圖轉(zhuǎn)換

UI Collection View Transition Layout

運(yùn)動路徑以用戶操作焦點(diǎn)為中心或軸的運(yùn)動，以銜接界面切換中的過渡動態(tài)，引導(dǎo)視覺焦點(diǎn)

案例：Google

以觸摸點(diǎn)為中心延展

告訴用戶他在哪，從哪里來到哪里去

從縮略圖到全屏，同時(shí)中心點(diǎn)轉(zhuǎn)移

案例：pages

空間速率Parallax

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

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

ibook

ios的日歷

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

IOS6

capture

1.在運(yùn)動發(fā)生前的準(zhǔn)備階段
2.運(yùn)動過程本身

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

sunnycomb

百度魔拍

nice

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

path的“+”

堆疊物體被展開

facebook 推出的paper關(guān)閉消息的拉伸曲線動畫。
這種動效設(shè)計(jì)是有具前瞻性的嘗試和探索，像path的那個展開的“+”引發(fā)了跟風(fēng)潮流。

強(qiáng)奸處女座的拉動

Google+的下拉刷新（像素越拉越細(xì)→ w→）

掐死same

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

flickr的下拉刷新

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

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

4.遵循iOS和Android的各個平臺規(guī)范

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

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

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

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

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

用戶自定義字體大小

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

豆瓣閱讀

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

案例：豆瓣小組

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

視差滾動

胡癡兒按：我想到了坐火車時(shí)看窗外，物體分了很多層，遠(yuǎn)處的山緩慢而悠閑，近處的電線桿飛竄著，拍出來的照：近處產(chǎn)生了運(yùn)動模糊，遠(yuǎn)處清晰，由近向遠(yuǎn)越來越清晰。。太美了{(lán)>~<}

從一定距離的兩點(diǎn)，觀察同一目標(biāo)的方向差異。

黃油相機(jī)的歡迎頁（注意每個元素的運(yùn)動速度?。?br>
一些新的交互探索

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

paper

red dot

人與攝像頭交互

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

https:///

FLUTTER

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

格靈深瞳

camme

通過前置攝像頭捕捉手掌動作或眨眼實(shí)現(xiàn)快門

Goccia

扣在手機(jī)的前置攝像頭上，獲取光信號，發(fā)出攜帶數(shù)據(jù)的彩光，向手機(jī)傳輸數(shù)據(jù)。

由手機(jī)攝像頭捕捉后轉(zhuǎn)化為電信號數(shù)據(jù)儲存到手機(jī)或者云端

旋轉(zhuǎn)交互

Nest

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

招手取消報(bào)警

后臺自動完成的交互

追蹤睡眠和呼吸等信息

Owlet

采集嬰兒信息

FitBark

采集寵物信息

Google glass的敲擊發(fā)送

Voice in：發(fā)出指令

google glass的“Ok glass”

Voice out：反饋延伸

moov

運(yùn)動設(shè)備

siri給出語音反饋

nike+的Fuelband

硬件更便攜延展至app上

模塊化處理

為解決用戶對不同功能產(chǎn)品的選擇困惑

分離部件（相同接口、不同功能），封裝在不同模塊中（芯片、電池、馬達(dá)、各種傳感器…），廠商和用戶可根據(jù)需求自由組合，如

• 電池續(xù)航模塊
• 記錄卡路里消耗的模塊
• 監(jiān)測心率模塊

Google積木手機(jī)
中控中界面

tesla中控

智能外設(shè)

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

• 錢包
• 游戲機(jī)
• 診療設(shè)備
• 耳機(jī)孔外設(shè)
• 與手機(jī)攝像頭交互的外設(shè)
• 與屏幕交互的智能筆

Square

移動支付設(shè)備

oppo的O-Click的遙控拍照

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

Smart PJ’s

代替自己給孩子講故事

Sensefloor

摔倒報(bào)120

huggies tweetpee

尿不濕更換通知器

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

Quick Trainer

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

Nex Band

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

智能家居公司belkin

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

補(bǔ)充：

個性的字體

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

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

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

顏色

Ios的Key color

Android

Color - Style

icon的幾層境界：

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

品牌

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

same的藍(lán)色

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

day one翻到底部時(shí)

Path翻到底部時(shí)

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

quora

path

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

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

bilibili的彈幕設(shè)置

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

網(wǎng)易云閱讀

UI上顯示弱反饋

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

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