1. 程式人生 > >Material Design常用設計標準

Material Design常用設計標準

1. Material Design(原質化設計)
Material環境是一個三維空間,z軸用來顯示平面,並用來延伸使用者視角,每個物質在z軸上佔據一定的位置並且有1dp的厚度為標準。在網頁上z軸被用來分層而3不是為了視角。3D空間是用y軸來進行模擬。
光影關係在物質的環境中,虛擬光線照射使用場景中的物件投出陰影,主光源投射出一個定向陰影,環境光從各個角度投射出連貫而柔和的陰影。

  • Material屬性

  • 物理特性
    材料擁有變化的長寬尺寸(*dp),和均勻的厚度(1dp)。
    材料總是1dp的厚度,就會形成陰影,陰影是由原件之間的相對高度(Z軸的位置)產生的。

  • 元素的參考陰影
    應用條 4dp;
    浮動按鈕 靜態 2dp,敲擊狀態 8dp;
    浮動動作按鈕(FAB)靜態 6dp,敲擊狀態 12dp;
    卡片 靜態 2dp,選中狀態 8dp;
    選單和子選單 選單 8dp,子選單 9dp;
    對話方塊 24dp;
    導航抽屜和右抽屜 16dp;
    底部單頁 16dp;
    重新整理按鈕 3dp;
    快速查詢/搜尋條 靜止狀態 2dp,滾動狀態 3dp;
    snackbar 6dp;
    切換按鈕 1dp;

  • 陰影特效
    elevation:高度,靜態屬性。
    transitionz:z軸相對於高度的位置,用於實現動畫的動態屬性。

    色彩的選擇
    1)工具欄和大色塊選擇飽和度500的基礎色,狀態列使用飽和度700的基礎色
    2)鮮豔的強調色用於主要操作按鈕以及元件。如開關和滑片,左對齊的部分 圖示或章節標題。
    3)備用強調色如果你的強調色相對於背景顏色太深或太淺,預設的做法是選 擇更深或更淺的備用顏色。如果你的強調的顏色無法正常顯示,那麼在白色背景上使用飽和度500的基礎色,如果背景是飽和度為500的基礎色就使用100%的白色或54%的黑色。

  • 字型的排版(textSize)
    基於最基本的樣式集合12、14、16、20、34號的字型進行縮放。
    Display 1 Regular 34sp
    Headline Regular 24sp
    Title Medium 20sp
    Subhead Regular 16sp
    Body2 Medium 14sp
    Body1 Regular 14sp
    Caption Regular 12sp
    Menu Medium 14sp
    Button Medium 14sp

  • 行高(lineSpacingExtra)
    Display Type 34sp Leading 40 pt
    Headline Type 24sp Leading 32 pt
    subhead2 Type 16sp Leading 28 pt
    subhead1 Type 15sp Leading 24 pt
    Body2 Type 14sp Leading 24 pt
    Body1 Type 13sp Leading 20 pt

  • 換行規則和連字元
    每行包含60個字元左右.
    字間距(textScaleX)
    Display 1 0pt;
    Headline 0pt;
    Title 5pt;
    Subhead 10pt;
    Body2 10pt;
    Body1 10pt;
    Caption 20pt;
    Menu 10pt;
    Button 10pt;

  • 列表在螢幕的佈局
    從上到下的外邊距依次 24 56 48 72 8(順序不唯一),整體內容左右各留16dp;

  • 觸控目標的尺寸
    48dp;佈局中圖示24dp或者頭像40dp設定邊距時,觸控目標不能重疊。

  • 應用欄(操作欄)
    手機豎屏預設高度 56dp;
    手機橫屏預設高度 48dp;
    對於拉高了的選單,它的高度等於預設高度加上內容高度。
    側邊導航欄寬度=螢幕寬度-應用欄的高度