<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • Material Design元素設計指南

    2015-3-19    用心設計

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計

    來源: s2dongman



    如 果你通讀過Google的material design指南,你就會知道它寫的有多詳細,它涉及的范圍有多廣。通讀過這部“指南”后,你會受益匪淺。指南中講述的課程,最出色的一點在于,它證明了 我們有可能構建復雜的視覺樣式設計規范。構建這樣的設計規范并不容易,但對于復雜的Google產品陣列而言,這又是可能的。


    如果你想要學習一些關于視覺設計的知識,你應該仔細研讀一下material design中設計獨立視覺元素或組件的方法。指南中詳細講述了18個不同的設計元素,從按鈕到菜單(menus),再到頁簽(tabs)。那么,分析這些元素能學到什么呢?


    擁抱變化


    有很多關于按鈕的設計規范。在material design中有3種按鈕類型:懸浮(floating)、浮動(raised)和扁平(flat)。在各種運用material design的用戶界面中,很少只會用到一種類型的按鈕樣式。




    按鈕樣式


    同樣,在各種各樣的用戶界面中,也很難保證設計的一致性。但是,為了做出最好的設計,material design仍舊采用了三種不同的按鈕樣式。其他設計方案則有時不那么好。


    “要基于主按鈕、屏幕上容器的數量以及整體布局為你的按鈕選擇設計風格。”




    按鈕風格使用場景


    對于按鈕的設計指導,有的說的清晰,有的則較模糊。總的來說,指南的說明是經過深思熟慮的。指南中,詳細描述了在使用按鈕時,哪些應該做,哪些不應該做,所以這對于設計師而言很好理解。這就是整個設計指南最出色的地方——它能讓設計師自行決定設計方案。




    按鈕設計指導


    注意經常被忽視的細節

    當你設計用戶界面時,你曾經多少次構思過彈出窗口或報警模塊?material design設計指南有一章主要講對話框的。設計師通常并不是一開始就要設計這些對話框,但當要用到時,它們仍舊是界面設計的一部分,需要認真對待。




    并排按鈕模式對話框


    關于對話框的設計指導很詳細。其中說明了需要用哪種類型的按鈕,以及為什么要那樣用。同時,還翔實又透徹地寫出了關于對話框的詳細設計說明。


    “在每個按鈕的文本信息都沒有超過最大按鈕寬度時,推薦使用并排模式。比如說最常用的 確定/取消 按鈕。”


    “當按鈕的文本超過了最大按鈕寬度時,你就可以使用豎向疊加模式來呈現按鈕文字信息。”




    豎向疊加按鈕模式對話框


    設計指南規定了對話框中需要包括的內容類型和行為方式。這種對細節的延伸既迷人又有趣,因為這些都是通常被忽略的設計元素。這正好說明了一點,那就是為了打造一種強有力的設計規范和設計語言,任何一個元素都至關重要。


    和“ 可感知性(Affordance)”有關的一切


    在 指南中,很多次強調了“可感知性(affordance)”(譯者注:affordance是 afford(能夠承擔)的名詞形式,在討論設計時指的是物體或對象具有的某種操作或功能上的暗示性,有人翻譯成可供性,但個人認為可感知性更好理解)。 創造一種新的、統一的設計語言,唯一目的在于提供跨瀏覽器/平臺的可感知性。為了打造高質量的設計指南,需要將“可感知性”包含在設計指南中。


    “頁簽(tab) 用來顯示有關聯的分組內容。tab標簽用來簡要的描述內容。”


    在material design設計指南中,關于頁簽(Tabs)的用法描述的很聰明。Material design并沒有將頁簽(Tabs)作為表單導航來用,而是用它來作為瀏覽內容的另外一種方式。令人耳目一新的是,某些特定元素,比如頁簽工具條 (tab bar),是有使用條件的。通過元素的風格及其功能,來了解制定material design的設計師的想法,從而避免濫用,這一點很好。




    頁簽(Tabs)


    如果詳細定義了不同元素的功能,這些元素就會各司其職。反過來,這樣也能幫助構建“可感知性(affordance)”。如果某個元素以各種方式重復出現,用戶就會一頭霧水,這種做法對用戶而言既不明確,又不公平。


    “在一款app 中,頁簽(tabs) 使在不同的視圖和功能間探索和切換,以及瀏覽不同類別的數據集變得簡單。”


    創造你自己的設計元素


    “Snackbar 是一種針對操作的輕量級反饋機制,常以一個小的彈出框的形式,出現在手機屏幕下方或者桌面左下方。它們出現在屏幕所有層的最上方,包括浮動操作按鈕。”


    “Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作,也不能從屏幕上滑動關閉。”


    material design設計指南有一章很有趣,講述了叫做“Snackbars和Toasts”的組件。這是兩個你不經常聽到的設計術語,snackbars和 toasts都是我們已知的設計元素。如果你你看了上面的“引用”文字,并注意到下面的圖片,你就會知道snackbars和toasts就是個簡單的彈 出提示。




    snackbars和toasts


    但 我們這里所說的更重要。Material design包括各種彈窗類型。設計語言需要這么做,因此material design就這么做了。Snackbars以及toasts和對話框很像,但還是有所不同,因此,它們是獨立存在的。Material design把它們簡單地區分開,因為人們需要這兩種彈窗來執行不同的功能。就像material design的其他組件一樣,snackbars和toasts都有詳細的設計指導——用例、尺寸和顏色。




    snackbars和toasts的用例、尺寸和顏色


    某 些設計元素在一些場景下不能使用,但我們通常會忽視這一點。有趣的是,一些很簡單的事,比如定義兩種不同的功能彈窗,需要花費很長時間。我們不要忘記進行 設計上的創新,包括去采納那些可能被視為過時的設計元素,或者你希望被廢除,但實際并仍舊存在的設計元素。在一些小事上進行創新非常重要,因為在今后的設 計道路上,它們將會發揮非常大的作用。


    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 国产精品成人国产乱一区| 亚洲av无码成人精品国产| 亚洲精品偷拍视频免费观看 | 国产成人精品免费视频大全| 亚洲AV永久精品爱情岛论坛| 久久99热这里只有精品国产| 免费欧美精品a在线| 国内精品伊人久久久久av一坑| 无码国模国产在线无码精品国产自在久国产 | 拍国产乱人伦偷精品视频| 北条麻妃国产九九九精品视频| 国产成人精品高清在线观看93| 亚洲精品动漫免费二区| 久久久久无码国产精品不卡| 国产内地精品毛片视频| 亚洲精品天天影视综合网| 国产精品666| 国产成人精品日本亚洲| 国产精品无码久久综合| 精品国产乱码久久久久久1区2区 | 亚洲精品色午夜无码专区日韩| 久久国产精品免费一区二区三区| 99精品人妻少妇一区二区| 久久国产精品成人免费| 欧美精品高清在线观看| 久久亚洲精品中文字幕三区| 国产精品久久久久…| 国产精品人人做人人爽人人添| 四虎成人精品在永久在线| 精品人妻伦一二三区久久| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 国产精品视频一区二区三区四| 国产综合精品一区二区三区| 精品国产福利一区二区| 国产最新进精品视频| 91精品国产9l久久久久| 97精品伊人久久大香线蕉app| 99久久精品午夜一区二区| 国产精品18久久久久久vr| 999在线视频精品免费播放观看| 99久久人妻无码精品系列|