假如你通讀了Google的material design文檔：designmodo.com，就會(huì)知道它有多么廣博，多么重視細(xì)節(jié)。通讀整篇文檔，可以讓你學(xué)會(huì)很多東西。其中最重要的教訓(xùn)之一，是創(chuàng)建綜合視覺(jué)風(fēng)格指南是可行的。無(wú)論如何這都不容易，但并非不可能，尤其是對(duì)于谷歌那些錯(cuò)綜復(fù)雜的產(chǎn)品陣列而言。

如果想學(xué)習(xí)視覺(jué)設(shè)計(jì)相關(guān)知識(shí)，你就應(yīng)該深入了解Material design如何處理個(gè)別元素或組件。這份文檔列舉了18種不同的設(shè)計(jì)元素，從按鈕到菜單再到標(biāo)簽頁(yè)。那么，通過(guò)分析它們，能學(xué)到什么？

接受變化

僅按鈕而言就有很多規(guī)則。material design有3種不同類型的按鈕：漂浮式、浮雕式和扁平式。material design有多種多樣的界面，一種單一的按鈕難以滿足需要。

在所有這些各式界面中，也無(wú)法僅憑記憶使它們保持統(tǒng)一。然而，material design包含3種不同類型的按鈕，是為了最大限度地利用設(shè)計(jì)。這些備選方案，是為了應(yīng)對(duì)那些常規(guī)設(shè)計(jì)不好使的情況。

“選擇主按鈕的類型，取決于按鈕的重要性、屏幕中容器的數(shù)量、還有整個(gè)屏幕的整體布局?！薄?按鈕的使用（自備梯子呦，同下）

有些按鈕指的南很明確，還有一些比較模糊?？偠灾?，這部指南是經(jīng)過(guò)深思熟慮的。它有明確的細(xì)節(jié)，講述如何使用或避免使用按鈕，有助于設(shè)計(jì)師的工作。這正是整部指南的美妙之處；設(shè)計(jì)決策則交給設(shè)計(jì)師來(lái)決斷。

重視經(jīng)常遭到忽視的元素

你設(shè)計(jì)界面的時(shí)候，會(huì)經(jīng)?？紤]彈出窗口或警告組件嗎？Material design文檔專門有一章節(jié)講的是對(duì)話框。設(shè)計(jì)師可不會(huì)經(jīng)常從這些框框入手。但是，當(dāng)用到時(shí)，它們?nèi)匀皇窃O(shè)計(jì)的一部分，需要處理。

關(guān)于對(duì)話框部分的指南非常詳盡。他們概述了應(yīng)該使用哪種按鈕，還有原因。也清楚地剖析了對(duì)話框，講得廣泛且深入。

“當(dāng)每個(gè)標(biāo)簽的文字都不超出按鈕的最大寬度，例如常用的確定/取消按鈕，這時(shí)我們推薦使用并排按鈕?！薄?a target="_blank">對(duì)話框

“當(dāng)文字標(biāo)簽超出按鈕最大寬度，你可以使用堆疊式按鈕來(lái)容納文字?！薄?a target="_blank">對(duì)話框

指南中詳細(xì)介紹了對(duì)話框應(yīng)該包含的內(nèi)容種類和操作。它所延伸觸及的各種細(xì)節(jié)令人著迷，非常有趣，因?yàn)檫@是經(jīng)常被忽視的元素。這也證明了要?jiǎng)?chuàng)造一套強(qiáng)大的風(fēng)格指南和設(shè)計(jì)語(yǔ)言，沒(méi)有什么元素是微不足道的。

一切關(guān)乎可見(jiàn)性

這份文檔中充分強(qiáng)調(diào)了可見(jiàn)性。創(chuàng)造一套全新、統(tǒng)一的設(shè)計(jì)語(yǔ)言，其目的在于提供跨瀏覽器/設(shè)備的可見(jiàn)性。一部高質(zhì)量的風(fēng)格指南能夠在設(shè)計(jì)語(yǔ)言中體現(xiàn)可見(jiàn)性，如此才能創(chuàng)造一套高質(zhì)量的設(shè)計(jì)指南。

“標(biāo)簽頁(yè)提供了顯示相關(guān)內(nèi)容分組的可見(jiàn)性。一個(gè)標(biāo)簽簡(jiǎn)明扼要地描述了它的相關(guān)內(nèi)容分組。”——標(biāo)簽頁(yè)

Material design文檔中描述標(biāo)簽頁(yè)的方式簡(jiǎn)直精彩絕倫。Material design并沒(méi)有把標(biāo)簽頁(yè)當(dāng)作導(dǎo)航的一種，而是把它們作為一種額外的瀏覽內(nèi)容的方式。看到這些特殊元素有所限制，例如標(biāo)簽頁(yè)，真使人眼前一亮。很高興能 了解到，material design的設(shè)計(jì)師們除了樣式之外，也深入思考了各元素的功能性，確保它不被誤用。

如果各不同元素的功能得到了清晰的定義，那么這些元素將只會(huì)用于特定的途徑。反過(guò)來(lái)，這一點(diǎn)也有助于塑造可見(jiàn)性。如果一種元素重用于多種場(chǎng)合，它就會(huì)使用戶困惑；這對(duì)用戶而言是不清晰明了也是不公平的。

“標(biāo)簽頁(yè)簡(jiǎn)化了應(yīng)用的瀏覽、切換不同視圖或功能、瀏覽分類數(shù)據(jù)。”——標(biāo)簽頁(yè)

打造屬于自己的元素

“點(diǎn)心柜作為一種小型彈出窗口，出現(xiàn)在移動(dòng)設(shè)備屏幕底部和桌面的左下方，為某項(xiàng)操作提供了輕量級(jí)的反饋。它們居于所有元素之上，包括懸浮操作按鈕?！薄?a target="_blank">點(diǎn)心柜與吐司

“吐司和點(diǎn)心柜很像，但不包含操作性，并且不能被滑出屏幕。”——點(diǎn)心柜與吐司

Metarial design文檔有一個(gè)章節(jié)很有趣，介紹了叫做“點(diǎn)心柜和吐司”的組件。這是種不常聽(tīng)聞的設(shè)計(jì)術(shù)語(yǔ)；點(diǎn)心柜和吐司是我們已知的設(shè)計(jì)元素。如果你閱讀了上面的引述，再看看下面的圖片，你就會(huì)意識(shí)到，點(diǎn)心柜和吐司的概念是一種簡(jiǎn)單的彈出通知。

不過(guò)這里的學(xué)問(wèn)更大。Material design給各種彈出窗口分了類。設(shè)計(jì)語(yǔ)言需要這么做，于是就這么做了。點(diǎn)心柜與吐司和對(duì)話框很像，但有所不同；因此，他們被區(qū)分開(kāi)了。 Material design將它們分開(kāi)，是因?yàn)樾枰麄兂袚?dān)不同的功能。創(chuàng)造新元素沒(méi)有問(wèn)題。就像material design的每一種其他元素一樣，點(diǎn)心柜和吐司也有特定的指南——使用示例、尺寸標(biāo)注和配色。

通常我們會(huì)忘記，這些元素不能用于各種不同場(chǎng)合或新途徑。僅僅是為彈出窗口定義兩種功能，如此簡(jiǎn)單的事情竟也大有作用，真是有趣。別忘了革新我們的 設(shè)計(jì)，包括那些被視作過(guò)時(shí)的元素、你希望它消失卻依然存在的元素。在小細(xì)節(jié)上進(jìn)行創(chuàng)新是非常好的，因?yàn)樗鼈儗?duì)后面的設(shè)計(jì)會(huì)產(chǎn)生重大影響。

你與Material Design

通讀Material design文檔，告訴我們你從中學(xué)到了什么。令人驚訝的是，梳理一部如此簡(jiǎn)明的文檔，竟能學(xué)到這么多設(shè)計(jì)知識(shí)。

原文地址：designmodo

譯文地址：colachan

譯者：@十萬(wàn)個(gè)為什麼