干貨 | 2015年移動設備界面設計趨勢(多圖解析)

轉載贊16 收藏66 評論2

舉報 2015-04-03

掃描,分享朋友圈

來源：湯先森

知乎上有同學提問：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概念。

2.動效的廣泛應用（app的肢體語言）

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

用動效表現四維時空——展示Z軸空間、時間變化

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

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

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

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

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

2.面積大、時間短
難看清

用于頁面切換，展現界面之間的空間關系
見“轉場動畫”

3.面積小、時間短
輕引導、輕反饋、輕提示→不打斷用戶流程，卻輕輕吸引注意力（情感化設計）

quora的搜索

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

4.面積小，時間長
一直持續輕微吸引用戶，不干擾其他功能和信息

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

Safari

對象切換-指向性動效
當前物體后移（變暗淡透明），新物體出現

YouTube

flickr

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

any do

clear

固定標簽
頭部標簽始終固定在頂部直到被頂走

p1

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

點擊-提示性動效

滑動-提示性動效

切換對象-指向性動效
storehouse

分合-指向性動效

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

動效控件
案例：posegram

flickr的收藏

加載動畫:

京東app的刷新

展開-空間擴展動效
案例：if

轉場動畫（用產品連續性表達了設計的前后關系）
（堅硬的，剛性強，卻不靈活）
案例：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的系統主題讓其成為應用的UI
降低用戶學習成本；
統一跨平臺的視覺交互體驗；
降低設計開發成本
(一個產品，要和iOS交配產生一個個體，具有iOS交互屬性的后代，又要和Android交配，攜帶Android交互基因的后代，也就是說這個產品的視覺上要像他父親（公司產品線），界面和交互上要像她母親（iOS或Android），還要和她母親的孩子們在移動端和諧相處{>~<})

案例：豆瓣

用半透明底板：關聯使用場景、區分內容；
使用系統字體：確保易讀性、可調節性；
無邊框按鈕（被激活時高亮）