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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

通過(guò)空狀態(tài)和動(dòng)效來(lái)鼓勵(lì)用戶行為

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

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

“動(dòng)效方面我們耗費(fèi)了諸多努力，從筆記流動(dòng)展示的動(dòng)態(tài)，到你打開(kāi)和關(guān)閉它們的方式?！?/p>

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

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

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

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

“當(dāng)我們發(fā)布了懸浮按鈕后，一些用戶抱怨沒(méi)有了能夠一鍵創(chuàng)建筆記的功能。”

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

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

指南不是法則

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

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

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

譯者：Miruku