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