追隨谷歌的設計！Material Design組件中的學問

編者按：是時候學習最新的設計語言了！今天的譯文，特意分享給那些想通讀整篇Material design文檔的同學，如何從這份包含18種不同設計元素的文檔中學習呢？作者分享了4個組件經驗，權當拋磚引玉，希望能在你真正學習Material design時能有所收獲。

@十萬個為什麼?：假如你通讀了Google的material design文檔：designmodo.com，就會知道它有多么廣博，多么重視細節。通讀整篇文檔，可以讓你學會很多東西。其中最重要的教訓之一，是創建綜合視覺風格指南是可行的。無論如何這都不容易，但并非不可能，尤其是對于谷歌那些錯綜復雜的產品陣列而言。

如果想學習視覺設計相關知識，你就應該深入了解Material design如何處理個別元素或組件。這份文檔列舉了18種不同的設計元素，從按鈕到菜單再到標簽頁。那么，通過分析它們，能學到什么？

除了Material Design，這些設計趨勢也是一個都不能放過！《上進的設計師！聊聊2015年流行的網頁設計趨勢》

如果你還不了解Material Design，那趕緊來看最全面總結！《超全面總結！深聊MATERIAL DESIGN引領的設計趨勢》

接受變化

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

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

“選擇主按鈕的類型，取決于按鈕的重要性、屏幕中容器的數量、還有整個屏幕的整體布局。”——?按鈕的使用（自備梯子呦，同下）

有些按鈕指的南很明確，還有一些比較模糊。總而言之，這部指南是經過深思熟慮的。它有明確的細節，講述如何使用或避免使用按鈕，有助于設計師的工作。這正是整部指南的美妙之處；設計決策則交給設計師來決斷。

重視經常遭到忽視的元素

你設計界面的時候，會經常考慮彈出窗口或警告組件嗎？Material design文檔專門有一章節講的是對話框。設計師可不會經常從這些框框入手。但是，當用到時，它們仍然是設計的一部分，需要處理。

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

“當每個標簽的文字都不超出按鈕的最大寬度，例如常用的確定/取消按鈕，這時我們推薦使用并排按鈕。”——對話框

“當文字標簽超出按鈕最大寬度，你可以使用堆疊式按鈕來容納文字。”——對話框

指南中詳細介紹了對話框應該包含的內容種類和操作。它所延伸觸及的各種細節令人著迷，非常有趣，因為這是經常被忽視的元素。這也證明了要創造一套強大的風格指南和設計語言，沒有什么元素是微不足道的。

一切關乎可見性

這份文檔中充分強調了可見性。創造一套全新、統一的設計語言，其目的在于提供跨瀏覽器/設備的可見性。一部高質量的風格指南能夠在設計語言中體現可見性，如此才能創造一套高質量的設計指南。

“標簽頁提供了顯示相關內容分組的可見性。一個標簽簡明扼要地描述了它的相關內容分組。”——標簽頁

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

如果各不同元素的功能得到了清晰的定義，那么這些元素將只會用于特定的途徑。反過來，這一點也有助于塑造可見性。如果一種元素重用于多種場合，它就會使用戶困惑；這對用戶而言是不清晰明了也是不公平的。

“標簽頁簡化了應用的瀏覽、切換不同視圖或功能、瀏覽分類數據。”——標簽頁

打造屬于自己的元素

“點心柜作為一種小型彈出窗口，出現在移動設備屏幕底部和桌面的左下方，為某項操作提供了輕量級的反饋。它們居于所有元素之上，包括懸浮操作按鈕。”——點心柜與吐司

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

Metarial design文檔有一個章節很有趣，介紹了叫做“點心柜和吐司”的組件。這是種不常聽聞的設計術語；點心柜和吐司是我們已知的設計元素。如果你閱讀了上面的引述，再看看下面的圖片，你就會意識到，點心柜和吐司的概念是一種簡單的彈出通知。

不過這里的學問更大。Material design給各種彈出窗口分了類。設計語言需要這么做，于是就這么做了。點心柜與吐司和對話框很像，但有所不同；因此，他們被區分開了。Material design將它們分開，是因為需要他們承擔不同的功能。創造新元素沒有問題。就像material design的每一種其他元素一樣，點心柜和吐司也有特定的指南——使用示例、尺寸標注和配色。

通常我們會忘記，這些元素不能用于各種不同場合或新途徑。僅僅是為彈出窗口定義兩種功能，如此簡單的事情竟也大有作用，真是有趣。別忘了革新我們的設計，包括那些被視作過時的元素、你希望它消失卻依然存在的元素。在小細節上進行創新是非常好的，因為它們對后面的設計會產生重大影響。

你與Material Design

通讀Material design文檔，告訴我們你從中學到了什么。令人驚訝的是，梳理一部如此簡明的文檔，竟能學到這么多設計知識。

10月眨眼就過，快來看最火的素材合集！

最受設計師歡迎的字體打包！免費下載呦！
《字體排行榜！2014年最受歡迎的35款字體素材打包下載》

圖標資源！1000+打包免費下載！
《圖標素材哪里找？1000+圖標資源打包免費下載！》

一鍵大變樣的50個超方便動作免費下載！
《超方便！50個一鍵搞定的實用動作免費下載》

原文地址：designmodo
譯文地址：colachan
譯者：@十萬個為什麼

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量83萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：