Material design - Layout - Principles

Principles - 原則

Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience. Material design adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes. These layouts scale to fit any screen size, which simplifies the process of creating scalable apps.

【翻譯】
材料設計由基于打印的設計元素(例如排版,網格,空間,比例,顏色和圖像)指導,以創建將用戶沉浸在體驗中的層次結構,含義和焦點。 材料設計采用來自打印設計領域的工具,如基準網格和結構模板,通過重復視覺元素,結構網格以及跨平臺和屏幕尺寸的間距,鼓勵跨環境的一致性。 這些布局適合任何屏幕大小,這簡化了創建可擴展應用程序的過程。

How paper works

In material design, the physical properties of paper are translated to the screen. The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets.
The surfaces that comprise applications are referred to in this spec as material, or sheets of material.
Elements outside of applications, such as system bars, are separate from the app content beneath them, and are not treated as material.
For detailed information about material, see Material Properties.

【翻譯】
在material design中,紙的物理性質被轉化到屏幕上。 應用程序的背景類似于一張紙的平坦,不透明的紋理,應用程序的行為模仿了紙張在多個頁面中重新調整大小,混排和綁定的能力。 包括應用的表面在本規范中被稱為材料或材料片。 應用程序之外的元素(例如系統欄)與其下的應用內容是分開的,不會被視為材料。 有關材質的詳細信息,請參閱材料屬性。

Seams - 接縫
Two sheets of material that share an entire common edge are called seams. While joined by a seam, they move together.

【翻譯】
共享整個公共邊緣的兩張材料稱為接縫。當通過接縫連接時,它們一起移動。


Seams in two sheets of material

【翻譯】
兩張材料中的接縫

Steps - 層階
Two overlapping sheets of material, with different z-positions (or depths), form a step. They move independently of each other.

【翻譯】
兩個重疊的材料片,具有不同的z位置(或深度),形成一個臺階。它們彼此獨立移動。


Steps in two sheets of overlapping material

【翻譯】
在兩張重疊材料中的層階

Floating action button - 浮動按鈕

A floating action**** button is a circular sheet separate from a toolbar. It represents a single promoted action.
It can straddle a step if it relates to the content creating that step.

【翻譯】
浮動操作代表在當前情境下的獨立提升操作。當與產生這個層階[step]的頁面內容相關聯時,它可以跨越這個層階。

Floating action buttons straddling steps

【翻譯】
浮動動作按鈕跨越層級

A floating action button can straddle a seam if it relates to the content of both sheets.

【翻譯】
浮動操作在與產生這個疊合線的兩個頁面內容相關聯時,可以跨越這個縫合線。

Do not introduce a decorative seam to provide an anchoring point for an action.

【翻譯】
永遠不要僅僅為了給操作提供一個支撐點而引入一條裝飾性的縫合線。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容