2017 Material design 第四章第一節《原則》

第四章《佈局》

1、原則 (Principles)

Material design基於印刷的設計元素(如排版、網格、空間、顏色和圖像等)去建立層次結構、情景含義和視覺焦點,這一切都是爲了增強用戶體驗。Material design 採用印刷設計的基本工具(如通用於全部頁面的基礎網格和結構模板),經過重複的視覺元素、結構網格和跨平臺跨屏幕的能力來促進在不一樣環境中的一致性。這些佈局能夠適配任何屏幕大小進行縮放,這大大簡化了咱們建立可擴展性應用的過程。html

工做原理

Material design是把紙的物理性質轉換到屏幕上,應用的背景相似於一張扁平且不透明的紙。應用的操做行爲是模擬紙的物理行爲,例如可以改變大小,拖拽和約束在多個sheets中。工具

構成應用的面的對象在Material design中咱們稱之爲 material或sheets of material。佈局

應用以外的元素(如系統欄)是獨立於應用以外的對象,這裏不視其爲 material 。google

關於Material的詳細信息,請參閱 Material屬性設計

接縫
兩張material sheets間共享的一條公共邊隙,咱們稱之爲接縫。有接縫的sheets一般會一塊兒移動。
3d

兩張material sheets間的接縫
兩張material sheets間的接縫

Steps
兩個在不一樣Z軸位置的獨立且重疊的sheets會造成一個step
component

兩個重疊的sheets會造成一個step
兩個重疊的sheets會造成一個step

浮動按鈕

浮動按鈕
浮動按鈕是一個與工具欄分離的圓形sheet。cdn

當浮動按鈕與step的內容相關時,它能夠跨立在這個step上。htm

浮動按鈕跨立於steps上。
浮動按鈕跨立於steps上。

當浮動按鈕與接縫的內容相關時,它能夠跨立在這條接縫上。對象

永遠不要只是爲了給浮動按鈕提供一個支撐點而引入一條裝飾性的接縫。

浮動按鈕跨立於接縫上。
浮動按鈕跨立於接縫上。

浮動按鈕的詳細信息,請參閱 浮動按鈕

相關文章
相關標籤/搜索