上一篇文章中，給大家介紹了谷歌設計語言Material Design的由來，以及環(huán)境與空間、光源與陰影、動畫效果、顏色等四個小節(jié)的內(nèi)容，這篇文章，接著為大家介紹樣式、布局、兩個方面的內(nèi)容。
樣式
在上一篇中，我們介紹了material design的顏色部分，顏色也是樣式中的一部分，接下來我們將陸續(xù)介紹剩下的樣式：字體排版、圖標、圖像、書寫。
字體
關于字體排版，我們只要簡單記住兩點：英文字體一般采用Roboto，中文字體使用Noto最基本的樣式集合是基于12、14、16、20和34號的字體排版縮放。
圖標
產(chǎn)品圖標作為一個品牌下產(chǎn)品、服務、工具的一種視覺表現(xiàn)，能夠簡潔、顯眼且友好地傳遞產(chǎn)品的核心理念與內(nèi)涵。
桌面圖標尺寸：48dp X 48dp；
桌面圖標建議模仿現(xiàn)實中的折紙效果，通過扁平色彩表現(xiàn)空間和光影。注意避免以下問題：
不要給色彩元素加投影；
層疊不超過兩層；
折角不放在右上角；
帶投影的元素要完整呈現(xiàn)，不能被圖標邊緣裁剪；
如果有折痕，放在圖片中央，并且最多只有一條；
帶折疊效果的圖標，表面不要有圖案；
不能透視，彎曲。
應用程序小圖標尺寸：24dp X 24dp，圖形限制在20dp X 20dp區(qū)域內(nèi)。
圖像
在material design中圖像應該是組建而成，而并非人為策劃，遵循以下幾個原則：
選擇能夠表達個人關聯(lián)、信息和令人喜悅的圖像；
傳達特定的信息，以輔助理解的方式來創(chuàng)建只能的感官體驗；
有焦點
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 個人關聯(lián)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特定信息
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 焦點明確
書寫
記住幾個重要的原則：
。使用“你”對用戶說話；
。不要使用“我們”；
。語言盡量簡潔；
。用現(xiàn)在時書寫；
。目標引導而不是方法引導；
布局
在布局這一章中，同學們除了熟記集中常規(guī)的布局方式，更重要的是要掌握一些常見的尺寸和距離。讓app在不同平臺和屏幕尺寸上擁有一致的外觀和感覺，結構和視覺上的一致創(chuàng)造了一個可識別的跨平臺產(chǎn)品的用戶環(huán)境，它給用戶提供高度的熟悉感和舒適感，讓產(chǎn)品便于使用。
最小的觸摸尺寸是48dp，在布局中，為圖標（24dp）或者頭像（40dp）設置邊距時，要時刻記得。觸摸目標不能重疊。
Overview
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp
The app bar with significantly increased height for prominence
App bar height = 128dp
Action area height: 56dp
Title area height: 80dp
Title area bottom padding: 8dp
Description area height: 72dp
Description area bottom padding: 16dp
List
A two-column, left-aligned list with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Subtitle: 48dp
List item: 72dp
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Title and list items: 72dp
Subtitle: 48dp
Space between content areas: 8dp
Detail view
A detail card with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Space between content areas: 8dp
List item: 72dp
Navigation drawer
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.
Vertical spacing
Account menu and list items: 48dp
Space between content areas: 8dp
Navigation right margin: 56dp
上述內(nèi)容是筆者自己的總結，歡迎對material design感興趣的同學評論留言表達自己的看法。
