1、設(shè) 計 規(guī) 范Material Disign 目錄1簡 介2GUI 設(shè)計規(guī)范3總 結(jié)簡單介紹Material Design。實例說明Materialdesign設(shè)計規(guī)范?？偨Y(jié)與展望。1來 源谷歌推出的全新的設(shè)計語言，應(yīng)用于手機、平板電腦、臺式機和“其他平臺”。2特 點顏色鮮艷，動畫突出，干凈，簡約，外觀更一致且更廣泛什么是 Material design1把物理世界的體驗帶進屏幕。去掉現(xiàn)實中的雜質(zhì)和隨機性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。核 心 思 想元 素魔 法 紙 片紙片層疊、合并、分離、分裂、伸縮，擁有現(xiàn)實

2、中的厚度、慣性和反饋，同時擁有液體的一些特性，能夠自由伸展變形。12但是紙片不能穿透、彎折、透視?？?間三 維元素的厚度為1dp(設(shè)備獨立像素)12元素之間相互層疊動 畫動 畫動畫不只是裝飾，它有含義，能表達元素、界面之間的關(guān)系，具備功能上的作用。12運動和變化都是有加速和減速過程的，要先考慮它在現(xiàn)實世界中的運動規(guī)律。所有可點擊的元素，都應(yīng)該有這樣的反饋效果。動 畫動 畫多個相似元素，動畫的設(shè)計要有先后次序通過過渡動畫，表達界面之間的空間與層級關(guān)系選取一種主色、一種輔助色（非必需），在此基礎(chǔ)上進行透明度、飽和度變化。顏 色黑色：87% 普通文字 54% 減淡文字 26% 禁用狀態(tài)/提示文字 1

3、2% 分隔線白色：100% 普通文字 70% 減淡文字 30% 禁用狀態(tài)/提示文字 12% 分隔線顏 色桌面圖標(biāo)尺寸是48dp X 48dp。模仿現(xiàn)實中的折紙效果，通過扁平色彩表現(xiàn)空間和光影。桌 面 圖 標(biāo)小圖標(biāo)尺寸是24dp X 24dp。優(yōu)先使用material design默認圖標(biāo)。小 圖 標(biāo)描述具體事物，優(yōu)先使用照片。然后可以考慮使用插畫。圖片的選用英文字體使用Roboto，中文字體使用Noto。字 體文字排版12sp 小字提示14sp（桌面端13sp） 正文/按鈕文字16sp（桌面端15sp） 小標(biāo)題20sp Appbar文字24sp 大標(biāo)題34sp/45sp/56sp/112sp

4、超大號文字sp：與縮放無關(guān)的抽象像素（Scale-independent Pixel）。1重要性懸浮按鈕凹起按鈕扁平按鈕按 鈕懸浮按鈕凸起按鈕扁平按鈕（適用于對話框）懸浮按鈕觸發(fā)正向的操作，（ 添加、創(chuàng)建、收藏之類。）對 話 框?qū)υ捒? 1 對話框包含標(biāo)題、內(nèi)容和操 作項。通常點擊對話框外的 區(qū)域，不會關(guān)閉對話框。2 2 通常情況，避免出現(xiàn)滾動條。3 3 取消類操作項放在左邊，引 起變化的操作項放在右邊菜 單菜單1 1 順序固定的菜單，操作頻繁的選項放在上面。2 2 順序可變的菜單，可以把之前用過 的選項排在前面，動態(tài)排序。3 3 菜單盡量不要超過2級。4 4 當(dāng)前不可用的選項要顯示出來，讓用

5、戶知道 在特定條件可以觸發(fā)這些操作。5 5 當(dāng)前選項應(yīng)該成為菜單的第一項。分為環(huán)形進度條和線性進度條進 度 條滑 塊非連續(xù)的滑塊，需要標(biāo)出具體數(shù)值。Snackbars 與 ToastSnackbar 是一種針對操作的輕量級反饋機制在PC上，應(yīng)該懸浮在屏幕左下角。輸 入 框簡單一根橫線就可以代表輸入框，有或沒有圖標(biāo)都可以。ps：橫線并不在點擊區(qū)域的底部，還有8dp距離。點擊提示提示只用在小圖標(biāo)上，文字不需要提示。鼠標(biāo)懸停、獲得焦點、手指長按都可以觸發(fā)提示。其他工具或插件TabRadioButtonSwitch桌面布局柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。（內(nèi)容過多不一一簡述）Chrome os 桌面布局模版桌面布局模版桌面布局模版http:/ 結(jié)盡力使GUI設(shè)計更美