編者按：Material Design的東風(fēng)吹過一波，但市場上根據(jù)Material Design進(jìn)行設(shè)計(jì)的產(chǎn)品仍寥寥可數(shù)，今天好不容易捕捉到一枚@Teambition，驚喜的是，設(shè)計(jì)和產(chǎn)品團(tuán)隊(duì)在重設(shè)計(jì)的過程中總結(jié)了五個(gè)關(guān)鍵要點(diǎn)，親測都很實(shí)用，想跟上潮流的設(shè)計(jì)師來借鑒學(xué)習(xí)吧！

不太了解Material Design同學(xué)，兩篇基礎(chǔ)好文送上：

1. 《超全面總結(jié)！深聊MATERIAL DESIGN引領(lǐng)的設(shè)計(jì)趨勢》
2. 《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》

學(xué)有所成的同學(xué)，一波資源收好：《該跟上潮流了！一大波優(yōu)質(zhì)的MATERIAL DESIGN資源免費(fèi)下載》

導(dǎo)語

@Teambition?：Material Design 主張將現(xiàn)實(shí)世界中的交互體驗(yàn)，應(yīng)用到界面設(shè)計(jì)中來，以求用戶的經(jīng)驗(yàn)?zāi)軌蜻w移，并更快習(xí)慣新系統(tǒng)。Teambition 已經(jīng)根據(jù) Material Design 重新設(shè)計(jì)了旗下所有的 Android 客戶端產(chǎn)品。在實(shí)踐過程中，設(shè)計(jì)和產(chǎn)品團(tuán)隊(duì)總結(jié)了一些值得分析的要點(diǎn)，與大家分享。

一、正確用好新元素

迎接新“抽屜導(dǎo)航”的到來

是的，就像“抽屜導(dǎo)航”那樣，最早被零散使用的交互要素，進(jìn)入Android的設(shè)計(jì)規(guī)范后，會(huì)在接下來的時(shí)間中被廣泛使用，乃至擴(kuò)散到iOS和桌面端。這次同樣最具代表性和潛力的兩個(gè)元素，應(yīng)該是炙手可熱的浮動(dòng)按鈕（FAB，F(xiàn)loating Action Button）和卡片。

浮動(dòng)按鈕

目前 Google 伴隨 Lolipop 發(fā)布的全線產(chǎn)品都帶上了全局浮動(dòng)的按鈕，視覺配色上高調(diào)突出，圖案簡明，主要作用是給最重要的動(dòng)作加上醒目的入口（比如Google Calendar中添加日程，Gmail中寫新郵件，等等）。

“浮動(dòng)”之說是因?yàn)?，Material Design的設(shè)計(jì)指導(dǎo)這次著重關(guān)注了z軸（垂直于我們手機(jī)平面的那根軸）的存在。按鈕按照z軸位置劃分，有三種類型，扁平（Flat），抬升（Raised），浮動(dòng)（Floating）。

前兩種按鈕與界面內(nèi)容一起運(yùn)動(dòng)，一般的按鈕用扁平的，需要突出的用抬升樣式。浮動(dòng)按鈕在z軸上是最高的，加入下方陰影等元素，懸浮于界面上，不隨內(nèi)容移動(dòng)。

根據(jù)Teambition后臺(tái)使用情況的統(tǒng)計(jì)，Teambition移動(dòng)端最常見的用途主要有這么幾項(xiàng)：

1. 響應(yīng)收件箱中事項(xiàng)進(jìn)展

2. 添加任務(wù)并分配

3. 查看對(duì)應(yīng)事項(xiàng)安排，當(dāng)todo list。

Teambition各產(chǎn)品線原來版本中，只有收件箱得到了首頁級(jí)的入口，各種內(nèi)容的添加需要手動(dòng)點(diǎn)入各個(gè)項(xiàng)目的對(duì)應(yīng)層級(jí)中去，再從導(dǎo)航條中點(diǎn)擊新建，極端案例下需要4、5次點(diǎn)擊才能完成任務(wù)。

自然，Teambition在移動(dòng)版上，把這個(gè)新增的入口分配給了“添加”功能。我們還額外關(guān)注了兩處細(xì)節(jié)：

1. 與環(huán)境相容（context aware）的全局添加按鈕，比如除了任務(wù)、分享、文件、日程四大固定項(xiàng)目之外，在不同的界面下，還會(huì)有額外的選項(xiàng)，比如在項(xiàng)目列表界面下會(huì)新增“新項(xiàng)目”選項(xiàng)，在具體的任務(wù)中，可以選擇添加備注，執(zhí)行人、截止日期等等……

2. 浮動(dòng)按鈕因?yàn)橄鄬?duì)位置固定，要考慮避免遮擋相關(guān)的內(nèi)容，最下一屏的拉到底時(shí)，按鈕應(yīng)該自動(dòng)隱藏。

卡片界面

卡片呈現(xiàn)信息的實(shí)踐其實(shí)一直都有，得到Material Design 強(qiáng)調(diào)后應(yīng)該很快會(huì)迎來一波爆發(fā)。從社區(qū)討論看來，直接使用卡片的欲望也是相當(dāng)強(qiáng)烈的 ，但根據(jù)Material Design的官方指導(dǎo)的建議，卡片的應(yīng)用場景和與列表應(yīng)該要有明確的區(qū)分，而不是盲目替換，該用列表視圖的場景，還是應(yīng)該堅(jiān)持使用列表，以免割裂瀏覽體驗(yàn)。

節(jié)選一些官方指導(dǎo)中比較重要的用卡片的場景：

1. 大量不同數(shù)據(jù)（文字、圖片）的集合，或呈現(xiàn)非常長（超過三行）的文字

2. 有大量交互（比如+1、評(píng)論、分享等按鈕），比如三個(gè)或以上

3. 不同卡片間的內(nèi)容不需要被對(duì)照比較

4. 通常作為一個(gè)整體可以像在Google Now中那樣被滑動(dòng)移除

反之，單一的（比如圖片庫），主要供瀏覽的，沒有太多對(duì)應(yīng)動(dòng)作的內(nèi)容的羅列，并且設(shè)計(jì)上不能被滑動(dòng)移除的信息流，做成列表會(huì)更合適，卡片會(huì)打斷閱讀，造成困惑，損害體驗(yàn)。

綜上，我們這次還是把項(xiàng)目和任務(wù)的羅列用列表視圖來呈現(xiàn)。

卡片是一種好的呈現(xiàn)方式，但與其說被鼓勵(lì)的是卡片，不如說，被鼓勵(lì)的是卡片所能承載的那種多類型豐富信息的聚合。

最后，一個(gè)有意思的例子：微博新改版的過程中使用卡片收到了很多吐槽，其實(shí)也是一件很無奈的事情，理論上來說每條微博有轉(zhuǎn)贊評(píng)等行為，但如果大部分人的使用行為都只是瀏覽，則著重動(dòng)作的卡片就會(huì)造成打擾。

微博的同學(xué)還是非常用心的，團(tuán)隊(duì)關(guān)于卡片式設(shè)計(jì)的思考：《水器相形！新版微博設(shè)計(jì)錄》

相比較而言，Twitter對(duì)動(dòng)作按鈕的處理要相對(duì)克制一些。

二、讓材質(zhì)、層疊與動(dòng)畫效果體現(xiàn)信息邏輯

借鑒現(xiàn)實(shí)中紙張層疊排列的光影效果，和海報(bào)中常見的強(qiáng)烈的顏色反差，新的 Material Design 設(shè)計(jì)指導(dǎo)想嘗試用能更接近用戶生活經(jīng)驗(yàn)的方式來呈現(xiàn)信息的層級(jí)結(jié)構(gòu)。

大致有這些首要的原則：

層疊關(guān)系

交接界面之間（比如導(dǎo)航欄、工具欄與內(nèi)容部分）的獨(dú)立性（比如是否會(huì)共同移動(dòng)）不同，最好在z軸的高度層次上有體現(xiàn)，平邊（seams）則連接兩個(gè)共同移動(dòng)的界面，仿佛一張紙推動(dòng)著另一張紙移動(dòng)。

而不共同移動(dòng)端界面交接最好是形成層疊（steps），交接邊界用陰影區(qū)隔，宛如一張靜止的紙蓋著另一張移動(dòng)中的紙。

官方設(shè)計(jì)指導(dǎo)中著重解釋了應(yīng)用的導(dǎo)航欄、工具欄與內(nèi)容各種不同的相對(duì)運(yùn)動(dòng)情況下應(yīng)該采用的不同邊界層疊模式，有紙夾式（clips）、瀑布式（waterfalls）、平移式、覆蓋式等等。

Teambition各線產(chǎn)品采用的主要是紙夾式。

三、界面切換等場合，要關(guān)注動(dòng)畫質(zhì)量

Material Design強(qiáng)調(diào)現(xiàn)實(shí)生活中積累的交互預(yù)期向數(shù)字空間的移植，于是設(shè)計(jì)指導(dǎo)一方面要求動(dòng)畫的形式必須具備現(xiàn)實(shí)中的運(yùn)動(dòng)的關(guān)鍵特征，同時(shí)也要求在界面轉(zhuǎn)換時(shí)，如同現(xiàn)實(shí)空間那樣，伴隨動(dòng)畫動(dòng)作的發(fā)生。

切換動(dòng)畫應(yīng)如現(xiàn)實(shí)那樣，具備這些關(guān)鍵特征：

1. 有質(zhì)量和慣性

上下方向運(yùn)動(dòng)時(shí)，運(yùn)動(dòng)受重力的影響，并不是勻速運(yùn)動(dòng)，而是類似向上拋物和下落，進(jìn)而——2.進(jìn)入和離開視野是對(duì)速度應(yīng)該是最高速度，案例如下：

官方指導(dǎo)中還特意給出了不符合這一規(guī)律的動(dòng)畫案例，作為對(duì)比，這種與自然狀況不吻合的運(yùn)動(dòng)會(huì)額外牽引我們不必要的注意力，增加用戶的認(rèn)知負(fù)擔(dān)，壞案例如下，進(jìn)入畫面后加速，離開前減速：

一脈相承的，考慮降低用戶認(rèn)知負(fù)擔(dān)，官方指導(dǎo)還要求所有的界面切換都應(yīng)該有承接前后界面的、相關(guān)的、有意義的動(dòng)畫作為過渡。

比如列表中點(diǎn)擊一個(gè)項(xiàng)目后的展開，屏幕不應(yīng)突然切換，相關(guān)內(nèi)容滑入屏幕，會(huì)是一個(gè)更好的做法，如果支持手勢操作，用戶反方向滑動(dòng)屏幕能夠直接回到列表，就更加酸爽了！

Teambition智能日程表中「今天」中的事件：

四、讓信息呈現(xiàn)一致，順應(yīng)用戶預(yù)期

應(yīng)用圖標(biāo)和功能圖標(biāo)呈現(xiàn)應(yīng)該一致與清晰，包括：

應(yīng)用圖標(biāo)方面

1. 應(yīng)用圖標(biāo)上的元素不超過兩層的層疊

2. 應(yīng)用圖標(biāo)上引入z軸分布時(shí)，每層不要超過1dp厚（160dpi屏幕上的1像素），仿佛是紙疊出來的，可以引入陰影加強(qiáng)層次關(guān)系

3. 平視，不透視，不扭曲（這是在打MS全線產(chǎn)品的臉啊）

功能圖標(biāo)上

1. 線條簡明，線條末端不要圓角修飾，不要出現(xiàn)太細(xì)的線條，

2. 基本元素一致（都能拆解成正方形、圓等基礎(chǔ)圖形的層疊包絡(luò)）

3. 簡單對(duì)稱，有高度關(guān)聯(lián)的行動(dòng)

除此之外，官方指導(dǎo)直接給出了一大批符合各種應(yīng)用場景的系統(tǒng)功能圖標(biāo)。如果說整個(gè)應(yīng)用生態(tài)是一門語言，各種有意義的圖標(biāo)應(yīng)該就是其中的單詞了，出現(xiàn)一本詞典其實(shí)對(duì)統(tǒng)一溝通規(guī)則很有幫助。

Teambition的全線產(chǎn)品，一面把參與者、截止日期，修改等概念全部轉(zhuǎn)向了標(biāo)準(zhǔn)化的圖標(biāo)。一面全面革新了應(yīng)用圖標(biāo)，以全新的面貌出現(xiàn)。

五、扁平風(fēng)格的點(diǎn)綴，帶出亮點(diǎn)

按鈕新效果

新指導(dǎo)下，盡管按鈕扁平，但是對(duì)聚焦和觸摸高度敏感，會(huì)有各種漣漪擴(kuò)散狀的效果。

1. 即使按下后0.5秒之內(nèi)界面就會(huì)切換，但這個(gè)效果對(duì)于減緩等待的心理時(shí)間，對(duì)操作結(jié)果反饋用戶有很大的幫助

2. 相比以前的按鈕凸起落下的反饋，這樣更直觀

3. 大部分工作5.0系統(tǒng)可以完成，沒有更好的理由時(shí)不要覆蓋它既可

會(huì)心一笑的小細(xì)節(jié)

官方指導(dǎo)花了一節(jié)來鼓勵(lì)開發(fā)者往應(yīng)用內(nèi)加入令人會(huì)心一笑的小細(xì)節(jié)（delightful details），會(huì)根據(jù)當(dāng)前界面狀態(tài)變化的圖標(biāo)，比如點(diǎn)贊數(shù)字酷炫的無縫轉(zhuǎn)變，比如播放器中 播放 與 停止 標(biāo)識(shí)的無縫切換。

我們也埋入了不少這樣的小彩蛋等大家發(fā)掘。 比如「今天」當(dāng)中，返回頂部按鈕，隨著你往前回溯或者往后展望日程，都會(huì)想指南針一樣指向今天的事件應(yīng)該在的位置，一定距離之后就平滑轉(zhuǎn)動(dòng)，變了傳統(tǒng)的“返回頂部”按鈕。

你看到這句話了？

幫個(gè)忙！優(yōu)設(shè)哥說微信公眾號(hào)關(guān)注達(dá)20萬有年終獎(jiǎng) ?→ ?youshege ?╭( ???)?

【圍觀各大企業(yè)的設(shè)計(jì)實(shí)戰(zhàn)項(xiàng)目！】

網(wǎng)易版：最受歡迎的網(wǎng)易云音樂誕生過程！
《項(xiàng)目實(shí)戰(zhàn)！網(wǎng)易云音樂IPAD V1.0設(shè)計(jì)總結(jié)》

騰訊家：創(chuàng)意十足大受好評(píng)的小紅點(diǎn)是怎么來的？
《讓創(chuàng)意落地！QQ手機(jī)版5.0“一鍵下班”設(shè)計(jì)小結(jié)》

阿里系：網(wǎng)站的實(shí)戰(zhàn)也不能少！經(jīng)驗(yàn)超多！
《阿里設(shè)計(jì)實(shí)戰(zhàn)！“回聲”項(xiàng)目第一期設(shè)計(jì)小結(jié)》

原文地址：teambition
作者：@Teambition

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：