看谷歌設(shè)計(jì)師如何使用Material Design

Material Design提供了設(shè)計(jì)app時所需的整套工具和指南，幫助你在用戶體驗(yàn)設(shè)計(jì)過程中遇到困難時做出明智的決策。但當(dāng)你的app不那么符合特定的使用案例該怎么辦？在谷歌，當(dāng)設(shè)計(jì)師要做的產(chǎn)品不那么適合這份指南的時候會如何？

Material Design指南應(yīng)當(dāng)因事制宜。透過此文，我們將細(xì)看Keep和Inbox這兩個谷歌app，來理解它們設(shè)計(jì)過程中是如何改變一些規(guī)則，領(lǐng)會Material Design指南的整體精神后進(jìn)行實(shí)際應(yīng)用。

Inbox：探索印刷網(wǎng)格

在谷歌設(shè)計(jì)一款全新的電子郵件Web應(yīng)用可謂一個相當(dāng)有野心的任務(wù)，尤其是在Gmail已經(jīng)存在的情況下。借助新的MaterailDesign規(guī)則，Inbox團(tuán)隊(duì)企圖創(chuàng)建更密集的UI、更特別的用戶體驗(yàn)和品牌標(biāo)識。就在Inbox設(shè)計(jì)團(tuán)隊(duì)在整合最初的設(shè)計(jì)時，MaterialDesign尚仍在開發(fā)中。這提供了他們一個絕佳的機(jī)會：建立Material Design 網(wǎng)頁標(biāo)準(zhǔn)，以解決密集UI的設(shè)計(jì)問題。

密集的UI設(shè)計(jì)

Inbox最初的設(shè)計(jì)不夠靈活，因?yàn)樵?3英寸屏幕上只有7封郵件的空間。這相比較于Gmail能展示16-20封郵件而言實(shí)在太少。Inbox的視覺設(shè)計(jì)首席TimSmith解釋道：

“如果你分別打開Gmail和Inbox，在視覺密度上有很大區(qū)別。在內(nèi)容和留白之間找到理想的平衡就成了我們最大的挑戰(zhàn)之一?！?/p>

通過調(diào)整網(wǎng)格、行高、文字表達(dá)，Inbox成功建立了密集型網(wǎng)頁UI的設(shè)計(jì)標(biāo)準(zhǔn)，做到能展示12-17封郵件，每個郵件存在于一張MaterialDesign卡片中。字體大小和外觀也被設(shè)計(jì)成因個人設(shè)備不同而有所調(diào)整改變。例如，電子郵件的主題行會根據(jù)屏幕尺寸的增長而變化字體尺寸。

Inbox為了在小尺寸屏幕上適應(yīng)盡可能多的信息而設(shè)計(jì)，設(shè)定了密集網(wǎng)頁外觀的MaterialDesign標(biāo)準(zhǔn)

利用顏色、圖像和Icon承前啟后

與Gmail比較，Inbox的視覺差異體現(xiàn)于頭圖的使用，頭圖會與捆綁的郵件內(nèi)容相關(guān)。如果一個人使用Inbox來計(jì)劃去紐約的一次旅行，舉個例子，他們將會看到曼哈頓天際線的圖片。Inbox還在左側(cè)導(dǎo)航欄中使用了大量的icon，這些icon會根據(jù)它們在app中的功能被賦予不同的色彩。例如，當(dāng)用戶點(diǎn)擊或輕觸綠色的“完成”按鈕，標(biāo)題欄的背景色也會變成綠色，讓用戶持續(xù)的知曉變化和前后聯(lián)系。

這種承前啟后的圖像使用也是Inbox不同的品牌體驗(yàn)的另一個鮮明特征。

Inbox會給綁定的郵件增加圖像從而賦予它們意義。例如，去紐約旅行的飛機(jī)票和酒店預(yù)訂郵件會配上城市的天際線照片

為網(wǎng)頁設(shè)計(jì)標(biāo)題欄

對Inbox團(tuán)隊(duì)的另一個挑戰(zhàn)是app標(biāo)題欄的設(shè)計(jì)。最初的提議是設(shè)計(jì)成一個可調(diào)的標(biāo)題欄，不會拉伸填滿整個瀏覽器窗口，但取而代之的是會匹配內(nèi)容的寬度。

“我們研究了這個方案的十幾個變體，知道最終確定為你今天看到的全寬度標(biāo)題欄。我們還通過幾個原型的探索來決定最佳的搜索區(qū)域樣式?！薄曈X設(shè)計(jì)首席Tim Smith

既然Inbox的卡片能夠縮放，這意味著每一次用戶和郵件交互的時候都必須進(jìn)行頭部的調(diào)整。App的標(biāo)題欄還包括了搜索區(qū)域和展示其他谷歌應(yīng)用的菜單。這一處理方式讓Inbox無需復(fù)雜化它的外觀就能保持良好的響應(yīng)。

Keep：改變導(dǎo)航模式

Keep是一款跨平臺的筆記應(yīng)用，擴(kuò)展折疊屏幕上的Material卡片讓用戶在添加筆記時集中注意力。改進(jìn)過的底部導(dǎo)航欄也讓人們能夠通過一個輕觸快速地新建筆記。

通過空狀態(tài)和動效來鼓勵用戶行為

空狀態(tài)主要出現(xiàn)在沒有任何內(nèi)容展示給用戶的時候。Keep通過這種設(shè)計(jì)模式給用戶一個空畫布來起草他們的想法。貧乏的UI鼓勵用戶更多去探索app的搜索欄元素，擴(kuò)展到顯示圖標(biāo)篩選器；分類菜單讓用戶在列表顯示和網(wǎng)格顯示之間切換；左側(cè)導(dǎo)航抽屜用于調(diào)整app的主要設(shè)置?？ㄆㄟ^放大和縮小來提示用戶其前后關(guān)系。

Keep利用空狀態(tài)來鼓勵用戶創(chuàng)建新的筆記

“動效方面我們耗費(fèi)了諸多努力，從筆記流動展示的動態(tài)，到你打開和關(guān)閉它們的方式。”

——谷歌Keep軟件工程師Genevieve Cuevas

為你的app使用正確的Material模式：底部導(dǎo)航欄 VS. 懸浮按鈕（Floating Action Button）

當(dāng)你重新設(shè)計(jì)一款app時，Keep團(tuán)隊(duì)的設(shè)計(jì)師和研發(fā)人員仔細(xì)研究了Material Design模式，并且最終應(yīng)用了一些組件，比如讓筆記與筆記區(qū)分開的卡片、讓app設(shè)置更容易操作的左側(cè)抽屜式導(dǎo)航和根據(jù)筆記內(nèi)容不同而變化的菜單，比如在列表內(nèi)容上加上勾選框以便于檢查每條內(nèi)容?？偠灾?，這些不同的設(shè)計(jì)模式最終創(chuàng)造了一個全新的功能體驗(yàn)，它建立在用戶的使用場景和需求之上，是Keep這個應(yīng)用的簡單易用的關(guān)鍵。

再設(shè)計(jì)的過程中，Keep團(tuán)隊(duì)對Material核心導(dǎo)航做了一些實(shí)驗(yàn)，測試讓一個可擴(kuò)展的懸浮按鈕替代現(xiàn)有的底部導(dǎo)航欄。需要指出的是，底部導(dǎo)航提供了簡單的一鍵式動作來創(chuàng)建新的筆記。新型懸浮按鈕則需求兩步操作，第一步擴(kuò)展選項(xiàng)，第二步才創(chuàng)建筆記。

“當(dāng)我們發(fā)布了懸浮按鈕后，一些用戶抱怨沒有了能夠一鍵創(chuàng)建筆記的功能?！?/p>

——谷歌Keep軟件工程師Genevieve Cuevas

這個改變看似對app的老用戶和已經(jīng)習(xí)慣了單觸式導(dǎo)航的用戶而言是個退步。Keep在測試后最終放棄了諸如懸浮按鈕這樣的核心Material組件，這是一個很好的例子來告訴人們，在使用Material指南時應(yīng)該堅(jiān)決拒絕強(qiáng)行套用不適合產(chǎn)品的指南的行為。

指南不是法則

Inbox和Keep團(tuán)隊(duì)都利用了MaterialDesign指南來幫助設(shè)計(jì)和開發(fā)應(yīng)用。但當(dāng)他們遇到一個對產(chǎn)品無用的案例時，他們會相應(yīng)地調(diào)整設(shè)計(jì)。Material Design給了非常多的指引，這是建立于谷歌多年的UX經(jīng)驗(yàn)之上的，但它不可能包羅萬象。希望以上這些例子能告訴你，在符合其整體精神的基礎(chǔ)上，設(shè)計(jì)時要按照實(shí)際需求來改變你的運(yùn)用方式。

本文轉(zhuǎn)自微信公眾號點(diǎn)融設(shè)計(jì)中心DDC

英文原文：Mustafa Kurtuldu, How Google Designers Adapt Material.

譯者：Miruku