【 設計理論】詳細解析Material Design組件中的學問

詳細解析Material Design組件中的學問

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

教學大綱:

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


設計理論教學開始

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

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

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

接受變化

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

詳細解析Material Design組件中的學問

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

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

詳細解析Material Design組件中的學問

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

詳細解析Material Design組件中的學問

重視經常遭到忽視的元素

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

詳細解析Material Design組件中的學問

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

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

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

詳細解析Material Design組件中的學問

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

一切關乎可見性

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

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

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

詳細解析Material Design組件中的學問

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

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

打造屬於自己的元素

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

“吐司和點心櫃很像,但不包含操作性,並且不能被滑出屏幕。——點心櫃與吐司

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

詳細解析Material Design組件中的學問

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

詳細解析Material Design組件中的學問

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

詳細解析Material Design組件中的學問

你與Material Design

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

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 詳細解析Material Design組件中的學問