谷歌設(shè)計(jì)規(guī)范--博森創(chuàng)想分享.ppt

《谷歌設(shè)計(jì)規(guī)范--博森創(chuàng)想分享.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、Materialdesign設(shè)計(jì)規(guī)范核心思想材質(zhì)與空間準(zhǔn)則動(dòng)畫(huà)顏色文字布局組件Materialdesign核心思想把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過(guò)渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗(yàn)，達(dá)到簡(jiǎn)潔與直觀的效果。材質(zhì)和空間Materialdesign中，最重要的信息載體就是魔法紙片。紙片層疊、合并、分離，擁有現(xiàn)實(shí)中的厚度、慣性和反饋，同時(shí)擁有液體的一些特性，能夠自由伸展變形。紙片的魔法特性，真實(shí)紙片所不具備的能力：紙片可以伸縮、改變形狀紙片

2、變形時(shí)可以裁剪內(nèi)容，比如紙片縮小時(shí)，內(nèi)容大小不變，而是隱藏超出部分多張紙片可以拼接成一張一張紙片可以分裂成多張紙片可以在任何位置憑空出現(xiàn)魔法紙片有些效果是禁止的：一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋層疊的紙片，海拔高度不能相同紙片不能互相穿透紙片不能彎折紙片不能產(chǎn)生透視，必須平行于屏幕材質(zhì)和空間Materialdesign引入了z軸的概念，z軸垂直于屏幕，用來(lái)表現(xiàn)元素的層疊關(guān)系。z值（海拔高度）越高，元素離界面底層（水平面）越遠(yuǎn)，投影越重。這里有一個(gè)前提，所有的元素的厚度都是1dp。所有元素都有默認(rèn)的海拔高度

3、，對(duì)它進(jìn)行操作會(huì)抬升它的海拔高度，操作結(jié)束后，它應(yīng)該落回默認(rèn)海拔高度。同一種元素，同樣的操作，抬升的高度是一致的。準(zhǔn)則動(dòng)畫(huà)動(dòng)畫(huà)要貼近真實(shí)世界√加速減速的過(guò)程×忽然開(kāi)始，忽然停止動(dòng)畫(huà)水波反饋所有可點(diǎn)擊的元素都應(yīng)該有這樣的反饋效果動(dòng)畫(huà)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)動(dòng)畫(huà)細(xì)節(jié)動(dòng)畫(huà)顏色主色和輔色顏色其余顏色黑色：[87%普通文字][54%減淡文字][26%禁用狀態(tài)/提示文字][12%分隔線]白色：[100%普通文字][70%減淡文字][30%禁用狀態(tài)/提示文字][12%分隔線]小圖標(biāo)黑色：[54%正常狀態(tài)][26%禁用狀態(tài)]小圖標(biāo)白色：[

4、100%正常狀態(tài)][30%禁用狀態(tài)]文字文字字號(hào)常用字號(hào)：12sp小字提示14sp（桌面端13sp）正文/按鈕文字16sp（桌面端15sp）小標(biāo)題20spAppbar文字24sp大標(biāo)題34sp/45sp/56sp/112sp超大號(hào)文字長(zhǎng)篇幅正文，每行建議60字符（英文）左右。短文本，建議每行30字符（英文）左右。文字行距45sp行距48sp34sp行距40sp24sp行距32sp15sp和16sp行距28sp或24sp13sp和14sp行距24sp或20sp布局所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dpX48

5、dp。柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。頂部狀態(tài)欄高度：24dpAppbar最小高度：56dp底部導(dǎo)航欄高度：48dp懸浮按鈕尺寸：56x56dp/40x40dp用戶頭像尺寸：64x64dp/40x40dp小圖標(biāo)點(diǎn)擊區(qū)域：48x48dp側(cè)邊抽屜到屏幕右邊的距離：56dp卡片間距：8dp分隔線上下留白：7，8dp大多元素的留白距離：16dp屏幕左右對(duì)齊基線：16dp文字左側(cè)對(duì)齊基線（帶頭像）：72dp許多尺寸可變的控件，比如對(duì)話框、菜單等，寬度都可以按56的整數(shù)倍來(lái)設(shè)計(jì)。遵循8

6、dp柵格很容易找到適合的尺寸與距離。組件底部動(dòng)作條（Bottomsheets）列表式通常以列表形式出現(xiàn)，支持上下滾動(dòng)組件底部動(dòng)作條（Bottomsheets）網(wǎng)格式組件按鈕（Buttons）懸浮按鈕有兩種尺寸：56x56dp/40x40dp組件卡片（Cards）組件卡片（Cards）卡片統(tǒng)一帶有2dp的圓角。在以下情況考慮使用卡片：同時(shí)展現(xiàn)多種不同內(nèi)容卡片內(nèi)容之間不需要進(jìn)行比較包含了長(zhǎng)度不確定的內(nèi)容，比如評(píng)論包含豐富的內(nèi)容與操作項(xiàng)，比如贊、滾動(dòng)條、評(píng)論本該是列表，但文字超過(guò)3行本該是網(wǎng)格，但需要展現(xiàn)更多文字

7、組件卡片（Cards）卡片最多有兩塊操作區(qū)域。輔助操作區(qū)至多包含兩個(gè)操作項(xiàng)，更多操作需要使用下拉菜單。其余部分都是主操作區(qū)。組件Chips狹小空間內(nèi)表現(xiàn)復(fù)雜信息的一個(gè)組件，比如日期、聯(lián)系人選擇器組件對(duì)話框（Dialogs）對(duì)話框包含標(biāo)題、內(nèi)容和操作項(xiàng)。點(diǎn)擊對(duì)話框外的區(qū)域，不會(huì)關(guān)閉對(duì)話框。組件對(duì)話框（Dialogs）通常情況，避免出現(xiàn)滾動(dòng)條。空間不足時(shí)允許滾動(dòng)，滾動(dòng)條建議默認(rèn)顯示。組件對(duì)話框（Dialogs）對(duì)話框中，取消類(lèi)操作項(xiàng)放在左邊，引起變化的操作項(xiàng)放在右邊。要寫(xiě)明操作項(xiàng)的具體效果，不要只寫(xiě)“是”和“否

8、”。標(biāo)題文字要明確，即使不讀正文內(nèi)容也能知道在干什么，標(biāo)題不要用“確定嗎”這樣的含糊措辭。組件對(duì)話框（Dialogs）在對(duì)話框中改變內(nèi)容，不會(huì)提交數(shù)據(jù)，點(diǎn)擊確定后，才會(huì)發(fā)生變化。對(duì)話框上方不能再層疊對(duì)話框。組件對(duì)話框（Dialogs）還有一種簡(jiǎn)易對(duì)話框，不帶操作項(xiàng)。點(diǎn)擊列表內(nèi)容觸發(fā)相應(yīng)操作，并關(guān)閉對(duì)話框。點(diǎn)擊簡(jiǎn)易對(duì)話框外面，對(duì)話框會(huì)關(guān)閉，操作取消。組件對(duì)話框（Dialogs）對(duì)話框可以是全屏式的，全屏對(duì)話框上方可