很多人都在談技術(shù)問(wèn)題斧拍，那筆者今天就談點(diǎn)不一樣的：審美問(wèn)題酒奶。筆者一直覺(jué)得，審美問(wèn)題在互聯(lián)網(wǎng)產(chǎn)品開(kāi)發(fā)過(guò)程中占據(jù)非常重要的地位奢浑，甚至可以說(shuō)蛮艰，一款互聯(lián)網(wǎng)產(chǎn)品能否吸引用戶的關(guān)鍵就是審美設(shè)計(jì)。
本文主要分享來(lái)自Google的Material Design——一套官方的設(shè)計(jì)規(guī)范雀彼。在這里貼一下中文版鏈接先：概述 - Material Design 中文版
目標(biāo)
我們希冀創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言壤蚜，能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則，同時(shí)還伴有創(chuàng)新理念和新的科技徊哑。
我們希望創(chuàng)造一種獨(dú)一無(wú)二的底層系統(tǒng)袜刷，在這個(gè)系統(tǒng)的基礎(chǔ)之上，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)莺丑。遵循基本的移動(dòng)設(shè)計(jì)定則著蟹，同時(shí)支持觸摸、語(yǔ)音梢莽、鼠標(biāo)萧豆、鍵盤等輸入方式。
設(shè)計(jì)原則
Material is the metaphor 材料就是隱喻
谷歌認(rèn)為現(xiàn)實(shí)世界中的材質(zhì)觸感是可以通過(guò)紙片的隱喻來(lái)表達(dá)昏名，通過(guò)在設(shè)計(jì)上運(yùn)用符合運(yùn)動(dòng)規(guī)律的動(dòng)畫(huà)交互涮雷、通過(guò)光影打造設(shè)計(jì)層次的關(guān)系可以創(chuàng)造全新的虛擬交互空間，并且這個(gè)空間是符合現(xiàn)實(shí)規(guī)律的轻局。這也就是文檔中提到的對(duì)于紙墨的研究洪鸭。
Bold， graphic仑扑， intentional 鮮明览爵，形象，深思熟慮
在視覺(jué)上镇饮，谷歌不僅要求生動(dòng)形象蜓竹，更要求設(shè)計(jì)時(shí)要確認(rèn)設(shè)計(jì)的目的，摒棄僅僅為了美觀而設(shè)計(jì)，強(qiáng)調(diào)視覺(jué)設(shè)計(jì)要為用戶使用提供指引梅肤，凸現(xiàn)頁(yè)面當(dāng)下的核心功能司蔬。文檔中谷歌提到這部分借鑒傳統(tǒng)的印刷設(shè)計(jì)。
Motion provides meaning 有意義的動(dòng)畫(huà)效果
交互動(dòng)畫(huà)的目的就是吸引用戶的注意姨蝴，表達(dá)當(dāng)下頁(yè)面發(fā)生的變化，同時(shí)和對(duì)視覺(jué)要求一樣肺缕，一定要有意義左医。
下圖是各個(gè)章節(jié)的重點(diǎn)摘要：##
以下是詳情（部分）：
一、動(dòng)畫(huà)
1.動(dòng)畫(huà)要真實(shí)
自然界物體運(yùn)動(dòng)是有加速減速過(guò)程的（紅球）同木，而不是勻速運(yùn)動(dòng)（籃球）浮梢。
2.反饋
所有可點(diǎn)擊部分都應(yīng)該有這樣的反饋。
3.轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)要體現(xiàn)界面的層級(jí)關(guān)系彤路。
從父界面進(jìn)入子界面秕硝，需要抬升子元素的海拔高度，并展開(kāi)至整個(gè)屏幕洲尊，反之亦然远豺。
二、顏色
顏色不宜過(guò)多坞嘀。選取一種主色躯护、一種輔助色（非必需），在此基礎(chǔ)上進(jìn)行明度丽涩、飽和度變化棺滞，構(gòu)成配色方案。
小面積需要高亮顯示的地方使用輔助色矢渊。
三继准、圖標(biāo)
常規(guī)形狀可以遵循幾套固定柵格設(shè)計(jì)。
四矮男、圖片
圖片上的文字移必，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%-40%之間昂灵，淺色的遮罩透明度在40%-60%之間避凝。
對(duì)于帶有文字的大幅圖片，遮罩文字區(qū)域眨补，不要遮住整張圖片管削。
Android L可以從圖片中提取主色，運(yùn)用在其他UI元素上撑螺。
五含思、布局
所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dp X 48dp。
柵格系統(tǒng)的最小單位是8dp，一切距離含潘、尺寸都應(yīng)該是8dp的整數(shù)倍饲做。以下是一些常見(jiàn)的尺寸與距離：
頂部狀態(tài)欄高度：24dp
Appbar最小高度：56dp
底部導(dǎo)航欄高度：48dp
懸浮按鈕尺寸：56x56dp/40x40dp
用戶頭像尺寸：64x64dp/40x40dp
小圖標(biāo)點(diǎn)擊區(qū)域：48x48dp
側(cè)邊抽屜到屏幕右邊的距離：56dp
卡片間距：8dp
分隔線上下留白：8dp
大多元素的留白距離：16dp
屏幕左右對(duì)齊基線：16dp
文字左側(cè)對(duì)齊基線：72dp
六、組件
- 按鈕
按鈕分為懸浮按鈕遏弱、凸起按鈕和扁平按鈕3種盆均。重要性如下遞減：
2.對(duì)話框
對(duì)話框避免出現(xiàn)滾動(dòng)條，確認(rèn)按鈕放在右側(cè)漱逸，取消按鈕放在左側(cè)泪姨。
3.菜單
菜單最好不要超過(guò)2級(jí)。
菜單不可用項(xiàng)要顯示出來(lái)饰抒。
4.進(jìn)度條
線形進(jìn)度條只出現(xiàn)在紙片的邊緣肮砾。
環(huán)形進(jìn)度條也分時(shí)間已知和時(shí)間未知兩種。
環(huán)形進(jìn)度條可以用在懸浮按鈕上袋坑。
5.輸入框
簡(jiǎn)單一根橫線就能代表輸入框仗处，可以帶圖標(biāo)。
輸入框點(diǎn)擊區(qū)域高度至少48dp枣宫，但橫線并不在點(diǎn)擊區(qū)域的底部婆誓，還有8dp距離。
6.側(cè)邊抽屜
側(cè)邊抽屜從左側(cè)滑出镶柱，占據(jù)整個(gè)屏幕高度旷档，遵循普通列表的布局規(guī)則。手機(jī)端的側(cè)邊抽屜距離屏幕右側(cè)56dp歇拆。
