小編推薦：Material UI出來也有段時間了，但是大家對他的理解好像還都不是很統(tǒng)一，本文寫得感悟雖然不是全面地總結(jié)但能對Material UI有個特征性的認(rèn)識，也是極好的。

如果你讀過Google的Material設(shè)計文檔，你就會發(fā)現(xiàn)其對細(xì)節(jié)和深度的注重。在文檔中你能學(xué)到很多東西。其中最為重要的一項，就是其證明了編寫復(fù)雜視覺風(fēng)格指南是完全可能的。盡管可能困難重重，但還是可能的。特別是對于Google復(fù)雜多樣的產(chǎn)品組合來說。

如果你想學(xué)習(xí)視覺設(shè)計，就應(yīng)該認(rèn)真研究一下Material設(shè)計是如何處理不同元素或要素的。Google的文檔詳細(xì)介紹了18種不同的設(shè)計元素，從按鈕到菜單再到標(biāo)簽等等等等。那么，通過分析這些設(shè)計元素能給我們帶來哪些收獲呢？

接受變體

文檔中僅按鈕就有很多不同的規(guī)則?！端夭脑O(shè)計》中介紹了三種不同的按鈕類型：浮動、突起和扁平。在《素材設(shè)計》所介紹的各種不同界面中要只使用單一的一種按鈕類型是非常困難的。

同時，要保證各種不同界面之間的一致性也不容易。然而，為了保證最佳設(shè)計效果，Material設(shè)計采用了三種不同的按鈕類型。其所采用的方法就是將設(shè)計改造成有時看似不太好的模式。

“為主要按鈕選擇按鈕類型要取決于按鈕的重要地位、屏幕上的框架數(shù)量以及屏幕整體布局情況?！报C?按鈕的使用

按鈕方面的部分指南比較具體，還有一部分比較模糊?？偠灾?，指南思考的非常透徹。指南中就如何使用以及何時不使用按鈕有非常詳盡的說明，以方便設(shè)計師開展工作。而這正是這份指南的美妙之處，其將設(shè)計的決定權(quán)交給了設(shè)計師。

注意容易被遺忘的要素

你在設(shè)計界面時是否會經(jīng)?？紤]彈窗或提醒模塊？Material設(shè)計文檔中有專門介紹對話框的一節(jié)。通常來說設(shè)計師不會從對話框入手進(jìn)行設(shè)計。但在使用對話框時，它們同樣屬于設(shè)計的一個組成部分，需要相應(yīng)的處理。

指南中有關(guān)對話框的部分非常詳盡。其介紹了需要在其中使用的按鈕類型以及相應(yīng)原因。另外，指南還對對話框的架構(gòu)進(jìn)行了解釋，其內(nèi)容詳實并且透徹。

“如果每個標(biāo)簽上的文字不超出最大按鈕寬度（例如常用的確定/取消按鈕），那么推薦使用并排按鈕。”–?對話框

“如果文字標(biāo)簽超出了最大按鈕寬度，則可以使用層疊按鈕容納文字?！报C?對話框

指南中對對話框中應(yīng)包含哪些類型的內(nèi)容和操作進(jìn)行了詳細(xì)說明。這部分的介紹非常有趣，同時這也是經(jīng)常被忽視的一個部分。其介紹道：為了創(chuàng)造出有力的樣式指南和設(shè)計語言，所有設(shè)計要素沒有大小之分，都非常重要。

一切為了可供性

文檔用很大篇幅強(qiáng)調(diào)了可供性。從新創(chuàng)建并統(tǒng)一設(shè)計語言的唯一目的，就是為了實現(xiàn)跨瀏覽器/設(shè)備的可供性。一份高質(zhì)量的樣式指南應(yīng)當(dāng)將可供性融入設(shè)計語言，以求創(chuàng)造出高質(zhì)量的設(shè)計指南。

“標(biāo)簽的可供性就是顯示相關(guān)的內(nèi)容組。標(biāo)簽的說明應(yīng)當(dāng)簡潔的介紹標(biāo)簽相關(guān)的內(nèi)容祖。”–?標(biāo)簽

Material設(shè)計文檔中介紹標(biāo)簽所使用的方式非常精彩。其并不是把標(biāo)簽視為導(dǎo)航工具的一種形式，而是作為另一種瀏覽內(nèi)容的方式。標(biāo)簽欄等特定元素也存在著局限這種觀點非常新穎。顯然，編寫Material設(shè)計文檔的設(shè)計師不僅考慮到了樣式，還考慮到了元素的功能性，以免其被誤用。

如果不同元素的功能得到了清楚明確的界定，那么這些元素的使用方式必然也就會被局限。反過來說，這樣將有助于提高可供性。如果某個元素能夠以不同的方式反復(fù)使用，就會給用戶造成誤解。

“標(biāo)簽可以方便探索和切換應(yīng)用中不同的視圖或功能區(qū)域，或用于瀏覽不同種類的數(shù)據(jù)集?！报C?標(biāo)簽

打造你自己的元素

“浮窗能夠在移動平臺屏幕底部以及臺式機(jī)左下角以彈窗的形式提供有關(guān)操作的少量反饋信息。在屏幕上，他們會覆蓋所有元素，包括浮動的操作按鈕。”-?浮窗和提示欄

“提示欄和浮窗類似，但其中不包含操作內(nèi)容，因此無法滑出屏幕?！??浮窗和提示欄

Material設(shè)計文檔中有一個很有趣的部分叫做“浮窗和提示欄”。這個設(shè)計名詞可能不太常聽見；浮窗和提示欄是我們已經(jīng)知道的設(shè)計元素。如果你讀了下面的注解再看一下下方的圖片，就能夠理解浮窗和提示欄其實就是簡單的彈窗通知。

但文檔里面的介紹卻非常細(xì)致。Materila設(shè)計文檔對彈窗進(jìn)行了分類。這是其設(shè)計語言的需要。浮窗和提示欄類似于對話框但實際卻不同；因此他們是兩個分離的概念。Materila設(shè)計文檔將它們區(qū)分開的原因是其需要它們執(zhí)行不同的功能。創(chuàng)建新元素是沒問題的。和Materila設(shè)計文檔中其他部分一樣，浮窗和提示欄也有專門的指南——使用、案例、度量和顏色。

通常，我們會忘記這些元素不能以多種或新方式使用。有時候，區(qū)分彈窗的兩種不同功能這種簡單的問題也能講出很深的道理，著實有趣。另外，不要忘了你可以加入可能被視為過時的元素，或者你自以為存在實則不然的元素，并以這種方式來革新你的設(shè)計。對小玩意的革新能夠給未來的設(shè)計帶來巨大的改變。

你和Material

親自讀一下Material設(shè)計文檔，給我們講講你的心得體會吧。這套簡單明了的文檔能夠給你帶來設(shè)計方面的大量信息。

來源：ui中國

翻譯：蔣燦

原文地址：designmodo