Material Design提供了設(shè)計APP時所需的整套工具和指南，幫助你在用戶體驗設(shè)計過程中遇到困難時做出明智的決策。但當(dāng)你的app不那么符合特定的使用案例該怎么辦？在谷歌，當(dāng)設(shè)計師要做的產(chǎn)品不那么適合這份指南的時候會如何？
Material Design指南應(yīng)當(dāng)因事制宜。透過此文，我們將細(xì)看Keep和Inbox這兩個谷歌app，來理解它們設(shè)計過程中是如何改變一些規(guī)則，領(lǐng)會Material Design指南的整體精神后進行實際應(yīng)用。
Inbox：探索印刷網(wǎng)格
在谷歌設(shè)計一款全新的電子郵件Web應(yīng)用可謂一個相當(dāng)有野心的任務(wù)，尤其是在Gmail已經(jīng)存在的情況下。借助新的Materail Design規(guī)則，Inbox團隊企圖創(chuàng)建更密集的UI、更特別的用戶體驗和品牌標(biāo)識。就在Inbox設(shè)計團隊在整合最初的設(shè)計時，Material Design尚仍在開發(fā)中。這提供了他們一個絕佳的機會：建立Material Design 網(wǎng)頁標(biāo)準(zhǔn)，以解決密集UI的設(shè)計問題。
密集的UI設(shè)計
Inbox最初的設(shè)計不夠靈活，因為在13英寸屏幕上只有7封郵件的空間。這相比較于Gmail能展示16-20封郵件而言實在太少。Inbox的視覺設(shè)計首席Tim Smith解釋道：
“如果你分別打開Gmail和Inbox，在視覺密度上有很大區(qū)別。在內(nèi)容和留白之間找到理想的平衡就成了我們最大的挑戰(zhàn)之一。”
通過調(diào)整網(wǎng)格、行高、文字表達，Inbox成功建立了密集型網(wǎng)頁UI的設(shè)計標(biāo)準(zhǔn)，做到能展示12-17封郵件，每個郵件存在于一張Material Design卡片中。字體大小和外觀也被設(shè)計成因個人設(shè)備不同而有所調(diào)整改變。例如，電子郵件的主題行會根據(jù)屏幕尺寸的增長而變化字體尺寸。
INBOX為了在小尺寸屏幕上適應(yīng)盡可能多的信息而設(shè)計，設(shè)定了密集網(wǎng)頁外觀的MATERIAL DESIGN標(biāo)準(zhǔn)。
利用顏色、圖像和Icon承前啟后
與Gmail比較，Inbox的視覺差異體現(xiàn)于頭圖的使用，頭圖會與捆綁的郵件內(nèi)容相關(guān)。如果一個人使用Inbox來計劃去紐約的一次旅行，舉個例子，他們將會看到曼哈頓天際線的圖片。Inbox還在左側(cè)導(dǎo)航欄中使用了大量的icon，這些icon會根據(jù)它們在app中的功能被賦予不同的色彩。例如，當(dāng)用戶點擊或輕觸綠色的“完成”按鈕，標(biāo)題欄的背景色也會變成綠色，讓用戶持續(xù)的知曉變化和前后聯(lián)系。
這種承前啟后的圖像使用也是Inbox不同的品牌體驗的另一個鮮明特征。
INBOX會給綁定的郵件增加圖像從而賦予它們意義。例如，去紐約旅行的飛機票和酒店預(yù)訂郵件會配上城市的天際線照片。
為網(wǎng)頁設(shè)計標(biāo)題欄
對Inbox團隊的另一個挑戰(zhàn)是app標(biāo)題欄的設(shè)計。最初的提議是設(shè)計成一個可調(diào)的標(biāo)題欄，不會拉伸填滿整個瀏覽器窗口，但取而代之的是會匹配內(nèi)容的寬度。
“我們研究了這個方案的十幾個變體，知道最終確定為你今天看到的全寬度標(biāo)題欄。我們還通過幾個原型的探索來決定最佳的搜索區(qū)域樣式。”——視覺設(shè)計首席Tim Smith
既然Inbox的卡片能夠縮放，這意味著每一次用戶和郵件交互的時候都必須進行頭部的調(diào)整。App的標(biāo)題欄還包括了搜索區(qū)域和展示其他谷歌應(yīng)用的菜單。這一處理方式讓Inbox無需復(fù)雜化它的外觀就能保持良好的響應(yīng)。
Keep：改變導(dǎo)航模式
Keep是一款跨平臺的筆記應(yīng)用，擴展折疊屏幕上的Material卡片讓用戶在添加筆記時集中注意力。改進過的底部導(dǎo)航欄也讓人們能夠通過一個輕觸快速地新建筆記。
通過空狀態(tài)和動效來鼓勵用戶行為
空狀態(tài)主要出現(xiàn)在沒有任何內(nèi)容展示給用戶的時候。Keep通過這種設(shè)計模式給用戶一個空畫布來起草他們的想法。貧乏的UI鼓勵用戶更多去探索app的搜索欄元素，擴展到顯示圖標(biāo)篩選器；分類菜單讓用戶在列表顯示和網(wǎng)格顯示之間切換；左側(cè)導(dǎo)航抽屜用于調(diào)整app的主要設(shè)置。卡片通過放大和縮小來提示用戶其前后關(guān)系。
KEEP利用空狀態(tài)來鼓勵用戶創(chuàng)建新的筆記。
“動效方面我們耗費了諸多努力，從筆記流動展示的動態(tài)，到你打開和關(guān)閉它們的方式。”
——谷歌KEEP軟件工程師GENEVIEVE CUEVAS
為你的app使用正確的Material模式：底部導(dǎo)航欄 VS. 懸浮按鈕（Floating Action Button）
當(dāng)你重新設(shè)計一款app時，Keep團隊的設(shè)計師和研發(fā)人員仔細(xì)研究了Material Design模式，并且最終應(yīng)用了一些組件，比如讓筆記與筆記區(qū)分開的卡片、讓app設(shè)置更容易操作的左側(cè)抽屜式導(dǎo)航和根據(jù)筆記內(nèi)容不同而變化的菜單，比如在列表內(nèi)容上加上勾選框以便于檢查每條內(nèi)容。總而言之，這些不同的設(shè)計模式最終創(chuàng)造了一個全新的功能體驗，它建立在用戶的使用場景和需求之上，是Keep這個應(yīng)用的簡單易用的關(guān)鍵。
再設(shè)計的過程中，Keep團隊對Material核心導(dǎo)航做了一些實驗，測試讓一個可擴展的懸浮按鈕替代現(xiàn)有的底部導(dǎo)航欄。需要指出的是，底部導(dǎo)航提供了簡單的一鍵式動作來創(chuàng)建新的筆記。新型懸浮按鈕則需求兩步操作，第一步擴展選項，第二步才創(chuàng)建筆記。
“當(dāng)我們發(fā)布了懸浮按鈕后，一些用戶抱怨沒有了能夠一鍵創(chuàng)建筆記的功能。”
——谷歌KEEP軟件工程師GENEVIEVE CUEVAS
這個改變看似對app的老用戶和已經(jīng)習(xí)慣了單觸式導(dǎo)航的用戶而言是個退步。Keep在測試后最終放棄了諸如懸浮按鈕這樣的核心Material組件，這是一個很好的例子來告訴人們，在使用Material指南時應(yīng)該堅決拒絕強行套用不適合產(chǎn)品的指南的行為。
指南不是法則
Inbox和Keep團隊都利用了Material Design指南來幫助設(shè)計和開發(fā)應(yīng)用。但當(dāng)他們遇到一個對產(chǎn)品無用的案例時，他們會相應(yīng)地調(diào)整設(shè)計。Material Design給了非常多的指引，這是建立于谷歌多年的UX經(jīng)驗之上的，但它不可能包羅萬象。希望以上這些例子能告訴你，在符合其整體精神的基礎(chǔ)上，設(shè)計時要按照實際需求來改變你的運用方式。