導(dǎo)語

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)突出，圖案簡(jiǎn)明，主要作用是給最重要的動(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)品線原來版本中，只有收件箱得到了首頁(yè)級(jí)的入口，各種內(nèi)容的添加需要手動(dòng)點(diǎn)入各個(gè)項(xiàng)目的對(duì)應(yīng)層級(jí)中去，再?gòu)膶?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)用場(chǎng)景和與列表應(yīng)該要有明確的區(qū)分，而不是盲目替換，該用列表視圖的場(chǎng)景，還是應(yīng)該堅(jiān)持使用列表，以免割裂瀏覽體驗(yàn)。

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

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

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

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

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

反之，單一的（比如圖片庫(kù)），主要供瀏覽的，沒有太多對(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ì)造成打擾。

相比較而言，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)品采用的主要是紙夾式。

界面切換等場(chǎng)合，要關(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è)更好的做法，如果支持手勢(shì)操作，用戶反方向滑動(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. 線條簡(jiǎn)明，線條末端不要圓角修飾，不要出現(xiàn)太細(xì)的線條，

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

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

除此之外，官方指導(dǎo)直接給出了一大批符合各種應(yīng)用場(chǎ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)的“返回頂部”按鈕。

作者：Teambition

來源：簡(jiǎn)書

原文地址：http://www.jianshu.com/p/a3b2422b5465