Material Design的東風吹過一波，但市場上根據Material Design進行設計的產品仍寥寥可數，今天好不容易捕捉到一枚@Teambition，驚喜的是，設計和產品團隊在重設計的過程中總結了五個關鍵要點，親測都很實用，想跟上潮流的設計師來借鑒學習吧!

　　導語

　　@Teambition ：Material Design 主張將現實世界中的交互體驗，應用到界面設計中來，以求用戶的經驗能夠遷移，并更快習慣新系統。Teambition 已經根據 Material Design 重新設計了旗下所有的 Android 客戶端產品。在實踐過程中，設計和產品團隊總結了一些值得分析的要點，與大家分享。

　　一、正確用好新元素

　　迎接新“抽屜導航”的到來

　　是的，就像“抽屜導航”那樣，最早被零散使用的交互要素，進入Android的設計規范后，會在接下來的時間中被廣泛使用，乃至擴散到iOS和桌面端。這次同樣最具代表性和潛力的兩個元素，應該是炙手可熱的浮動按鈕(FAB，Floating Action Button)和卡片。

　　浮動按鈕

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

　　“浮動”之說是因為，Material Design的設計指導這次著重關注了z軸(垂直于我們手機平面的那根軸)的存在。按鈕按照z軸位置劃分，有三種類型，扁平(Flat)，抬升(Raised)，浮動(Floating)。

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

　　根據Teambition后臺使用情況的統計，Teambition移動端最常見的用途主要有這么幾項：

　　1. 響應收件箱中事項進展

　　2. 添加任務并分配

　　3. 查看對應事項安排，當todo list。

　　Teambition各產品線原來版本中，只有收件箱得到了首頁級的入口，各種內容的添加需要手動點入各個項目的對應層級中去，再從導航條中點擊新建，極端案例下需要4、5次點擊才能完成任務。

　　自然，Teambition在移動版上，把這個新增的入口分配給了“添加”功能。我們還額外關注了兩處細節：

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

　　2. 浮動按鈕因為相對位置固定，要考慮避免遮擋相關的內容，最下一屏的拉到底時，按鈕應該自動隱藏。

　　卡片界面

　　卡片呈現信息的實踐其實一直都有，得到Material Design 強調后應該很快會迎來一波爆發。從社區討論看來，直接使用卡片的欲望也是相當強烈的 ，但根據Material Design的官方指導的建議，卡片的應用場景和與列表應該要有明確的區分，而不是盲目替換，該用列表視圖的場景，還是應該堅持使用列表，以免割裂瀏覽體驗。

　　節選一些官方指導中比較重要的用卡片的場景：

　　1. 大量不同數據(文字、圖片)的集合，或呈現非常長(超過三行)的文字

　　2. 有大量交互(比如+1、評論、分享等按鈕)，比如三個或以上

　　3. 不同卡片間的內容不需要被對照比較

　　4. 通常作為一個整體可以像在Google Now中那樣被滑動移除

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

　　綜上，我們這次還是把項目和任務的羅列用列表視圖來呈現。

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

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

　　相比較而言，Twitter對動作按鈕的處理要相對克制一些。

　　二、讓材質、層疊與動畫效果體現信息邏輯

　　借鑒現實中紙張層疊排列的光影效果，和海報中常見的強烈的顏色反差，新的 Material Design 設計指導想嘗試用能更接近用戶生活經驗的方式來呈現信息的層級結構。

　　大致有這些首要的原則：

　　層疊關系

　　交接界面之間(比如導航欄、工具欄與內容部分)的獨立性(比如是否會共同移動)不同，最好在z軸的高度層次上有體現，平邊(seams)則連接兩個共同移動的界面，仿佛一張紙推動著另一張紙移動。

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

　　官方設計指導中著重解釋了應用的導航欄、工具欄與內容各種不同的相對運動情況下應該采用的不同邊界層疊模式，有紙夾式(clips)、瀑布式(waterfalls)、平移式、覆蓋式等等。

　　Teambition各線產品采用的主要是紙夾式。

　　三、界面切換等場合，要關注動畫質量

　　Material Design強調現實生活中積累的交互預期向數字空間的移植，于是設計指導一方面要求動畫的形式必須具備現實中的運動的關鍵特征，同時也要求在界面轉換時，如同現實空間那樣，伴隨動畫動作的發生。

　　切換動畫應如現實那樣，具備這些關鍵特征：

　　1. 有質量和慣性

　　上下方向運動時，運動受重力的影響，并不是勻速運動，而是類似向上拋物和下落，進而——2.進入和離開視野是對速度應該是最高速度，案例如下：

　　官方指導中還特意給出了不符合這一規律的動畫案例，作為對比，這種與自然狀況不吻合的運動會額外牽引我們不必要的注意力，增加用戶的認知負擔，壞案例如下，進入畫面后加速，離開前減速：

　　一脈相承的，考慮降低用戶認知負擔，官方指導還要求所有的界面切換都應該有承接前后界面的、相關的、有意義的動畫作為過渡。

　　比如列表中點擊一個項目后的展開，屏幕不應突然切換，相關內容滑入屏幕，會是一個更好的做法，如果支持手勢操作，用戶反方向滑動屏幕能夠直接回到列表，就更加酸爽了!

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

　　四、讓信息呈現一致，順應用戶預期

　　應用圖標和功能圖標呈現應該一致與清晰，包括：

　　應用圖標方面

　　1. 應用圖標上的元素不超過兩層的層疊

　　2. 應用圖標上引入z軸分布時，每層不要超過1dp厚(160dpi屏幕上的1像素)，仿佛是紙疊出來的，可以引入陰影加強層次關系

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

　　功能圖標上

　　1. 線條簡明，線條末端不要圓角修飾，不要出現太細的線條，

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

　　3. 簡單對稱，有高度關聯的行動

　　除此之外，官方指導直接給出了一大批符合各種應用場景的系統功能圖標。如果說整個應用生態是一門語言，各種有意義的圖標應該就是其中的單詞了，出現一本詞典其實對統一溝通規則很有幫助。

　　Teambition的全線產品，一面把參與者、截止日期，修改等概念全部轉向了標準化的圖標。一面全面革新了應用圖標，以全新的面貌出現。

　　五、扁平風格的點綴，帶出亮點

　　按鈕新效果

　　新指導下，盡管按鈕扁平，但是對聚焦和觸摸高度敏感，會有各種漣漪擴散狀的效果。

　　1. 即使按下后0.5秒之內界面就會切換，但這個效果對于減緩等待的心理時間，對操作結果反饋用戶有很大的幫助

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

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

　　會心一笑的小細節

　　官方指導花了一節來鼓勵開發者往應用內加入令人會心一笑的小細節(delightful details)，會根據當前界面狀態變化的圖標，比如點贊數字酷炫的無縫轉變，比如播放器中 播放 與 停止 標識的無縫切換。

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

　　你看到這句話了?

　　幫個忙!優設哥說微信公眾號關注達20萬有年終獎 → youshege ╭( ･ㅂ･)و