2015-3-17 藍(lán)藍(lán)設(shè)計(jì)的小編
如果你通讀過(guò)Google的material design指南，你就會(huì)知道它寫的有多詳細(xì)，它涉及的范圍有多廣。通讀過(guò)這部“指南”后，你會(huì)受益匪淺。指南中講述的課程，最出色的一點(diǎn)在于，它證明了我們有可能構(gòu)建復(fù)雜的視覺(jué)樣式設(shè)計(jì)規(guī)范。構(gòu)建這樣的設(shè)計(jì)規(guī)范并不容易，但對(duì)于復(fù)雜的Google產(chǎn)品陣列而言，這又是可能的。
如果你想要學(xué)習(xí)一些關(guān)于視覺(jué)設(shè)計(jì)的知識(shí)，你應(yīng)該仔細(xì)研讀一下material design中設(shè)計(jì)獨(dú)立視覺(jué)元素或組件的方法。指南中詳細(xì)講述了18個(gè)不同的設(shè)計(jì)元素，從按鈕到菜單（menus），再到頁(yè)簽（tabs）。那么，分析這些元素能學(xué)到什么呢？
有很多關(guān)于按鈕的設(shè)計(jì)規(guī)范。在material design中有3種按鈕類型：懸?。╢loating）、浮動(dòng)（raised）和扁平（flat）。在各種運(yùn)用material design的用戶界面中，很少只會(huì)用到一種類型的按鈕樣式。
按鈕樣式
同樣，在各種各樣的用戶界面中，也很難保證設(shè)計(jì)的一致性。但是，為了做出最好的設(shè)計(jì)，material design仍舊采用了三種不同的按鈕樣式。其他設(shè)計(jì)方案則有時(shí)不那么好。
“要基于主按鈕、屏幕上容器的數(shù)量以及整體布局為你的按鈕選擇設(shè)計(jì)風(fēng)格?！?/p>
按鈕風(fēng)格使用場(chǎng)景
對(duì)于按鈕的設(shè)計(jì)指導(dǎo)，有的說(shuō)的清晰，有的則較模糊。總的來(lái)說(shuō)，指南的說(shuō)明是經(jīng)過(guò)深思熟慮的。指南中，詳細(xì)描述了在使用按鈕時(shí)，哪些應(yīng)該做，哪些不應(yīng)該做，所以這對(duì)于設(shè)計(jì)師而言很好理解。這就是整個(gè)設(shè)計(jì)指南最出色的地方——它能讓設(shè)計(jì)師自行決定設(shè)計(jì)方案。
按鈕設(shè)計(jì)指導(dǎo)
注意經(jīng)常被忽視的細(xì)節(jié)
當(dāng)你設(shè)計(jì)用戶界面時(shí)，你曾經(jīng)多少次構(gòu)思過(guò)彈出窗口或報(bào)警模塊？material design設(shè)計(jì)指南有一章主要講對(duì)話框的。設(shè)計(jì)師通常并不是一開(kāi)始就要設(shè)計(jì)這些對(duì)話框，但當(dāng)要用到時(shí)，它們?nèi)耘f是界面設(shè)計(jì)的一部分，需要認(rèn)真對(duì)待。
并排按鈕模式對(duì)話框
關(guān)于對(duì)話框的設(shè)計(jì)指導(dǎo)很詳細(xì)。其中說(shuō)明了需要用哪種類型的按鈕，以及為什么要那樣用。同時(shí)，還翔實(shí)又透徹地寫出了關(guān)于對(duì)話框的詳細(xì)設(shè)計(jì)說(shuō)明。
“在每個(gè)按鈕的文本信息都沒(méi)有超過(guò)最大按鈕寬度時(shí)，推薦使用并排模式。比如說(shuō)最常用的 確定/取消 按鈕。”
“當(dāng)按鈕的文本超過(guò)了最大按鈕寬度時(shí)，你就可以使用豎向疊加模式來(lái)呈現(xiàn)按鈕文字信息?！?br />
豎向疊加按鈕模式對(duì)話框
設(shè)計(jì)指南規(guī)定了對(duì)話框中需要包括的內(nèi)容類型和行為方式。這種對(duì)細(xì)節(jié)的延伸既迷人又有趣，因?yàn)檫@些都是通常被忽略的設(shè)計(jì)元素。這正好說(shuō)明了一點(diǎn)，那就是為了打造一種強(qiáng)有力的設(shè)計(jì)規(guī)范和設(shè)計(jì)語(yǔ)言，任何一個(gè)元素都至關(guān)重要。
和“ 可感知性（Affordance）”有關(guān)的一切
在指南中，很多次強(qiáng)調(diào)了“可感知性（affordance）”（譯者注：affordance是 afford（能夠承擔(dān)）的名詞形式，在討論設(shè)計(jì)時(shí)指的是物體或?qū)ο缶哂械哪撤N操作或功能上的暗示性，有人翻譯成可供性，但個(gè)人認(rèn)為可感知性更好理解）。創(chuàng)造一種新的、統(tǒng)一的設(shè)計(jì)語(yǔ)言，唯一目的在于提供跨瀏覽器/平臺(tái)的可感知性。為了打造高質(zhì)量的設(shè)計(jì)指南，需要將“可感知性”包含在設(shè)計(jì)指南中。
“頁(yè)簽（tab） 用來(lái)顯示有關(guān)聯(lián)的分組內(nèi)容。tab標(biāo)簽用來(lái)簡(jiǎn)要的描述內(nèi)容?！?/p>
在material design設(shè)計(jì)指南中，關(guān)于頁(yè)簽（Tabs）的用法描述的很聰明。Material design并沒(méi)有將頁(yè)簽（Tabs）作為表單導(dǎo)航來(lái)用，而是用它來(lái)作為瀏覽內(nèi)容的另外一種方式。令人耳目一新的是，某些特定元素，比如頁(yè)簽工具條（tab bar），是有使用條件的。通過(guò)元素的風(fēng)格及其功能，來(lái)了解制定material design的設(shè)計(jì)師的想法，從而避免濫用，這一點(diǎn)很好。
頁(yè)簽（Tabs）
如果詳細(xì)定義了不同元素的功能，這些元素就會(huì)各司其職。反過(guò)來(lái)，這樣也能幫助構(gòu)建“可感知性（affordance）”。如果某個(gè)元素以各種方式重復(fù)出現(xiàn)，用戶就會(huì)一頭霧水，這種做法對(duì)用戶而言既不明確，又不公平。
“在一款app 中，頁(yè)簽（tabs） 使在不同的視圖和功能間探索和切換，以及瀏覽不同類別的數(shù)據(jù)集變得簡(jiǎn)單?！?/p>
創(chuàng)造你自己的設(shè)計(jì)元素
“Snackbar 是一種針對(duì)操作的輕量級(jí)反饋機(jī)制，常以一個(gè)小的彈出框的形式，出現(xiàn)在手機(jī)屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的最上方，包括浮動(dòng)操作按鈕?！?/p>
“Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作，也不能從屏幕上滑動(dòng)關(guān)閉?！?/p>
material design設(shè)計(jì)指南有一章很有趣，講述了叫做“Snackbars和Toasts”的組件。這是兩個(gè)你不經(jīng)常聽(tīng)到的設(shè)計(jì)術(shù)語(yǔ)，snackbars和toasts都是我們已知的設(shè)計(jì)元素。如果你你看了上面的“引用”文字，并注意到下面的圖片，你就會(huì)知道snackbars和toasts就是個(gè)簡(jiǎn)單的彈出提示。
snackbars和toasts
但我們這里所說(shuō)的更重要。Material design包括各種彈窗類型。設(shè)計(jì)語(yǔ)言需要這么做，因此material design就這么做了。Snackbars以及toasts和對(duì)話框很像，但還是有所不同，因此，它們是獨(dú)立存在的。Material design把它們簡(jiǎn)單地區(qū)分開(kāi)，因?yàn)槿藗冃枰@兩種彈窗來(lái)執(zhí)行不同的功能。就像material design的其他組件一樣，snackbars和toasts都有詳細(xì)的設(shè)計(jì)指導(dǎo)——用例、尺寸和顏色。
snackbars和toasts的用例、尺寸和顏色
某些設(shè)計(jì)元素在一些場(chǎng)景下不能使用，但我們通常會(huì)忽視這一點(diǎn)。有趣的是，一些很簡(jiǎn)單的事，比如定義兩種不同的功能彈窗，需要花費(fèi)很長(zhǎng)時(shí)間。我們不要忘記進(jìn)行設(shè)計(jì)上的創(chuàng)新，包括去采納那些可能被視為過(guò)時(shí)的設(shè)計(jì)元素，或者你希望被廢除，但實(shí)際并仍舊存在的設(shè)計(jì)元素。在一些小事上進(jìn)行創(chuàng)新非常重要，因?yàn)樵诮窈蟮脑O(shè)計(jì)道路上，它們將會(huì)發(fā)揮非常大的作用。
本文來(lái)源于 s2dongman
2015年，IXDC國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)以“重新定義用戶體驗(yàn)”為主題，重新出發(fā)，在7月的北京，和你相見(jiàn)！現(xiàn)報(bào)名更有特別優(yōu)惠，快來(lái)占座！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com
