中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

這一年就快完了，你還沒搞懂Material design嗎？是嫌文檔太長，還是覺得自己英文不好？都沒關(guān)系，我們?nèi)巳硕际钱a(chǎn)品經(jīng)理專欄作家@可樂橙 幫同學(xué)們通讀了一遍官方的設(shè)計(jì)指南，去糙取精，整理出這篇干貨超多的學(xué)習(xí)筆記，打包票學(xué)完基本就掌握90%了，別錯(cuò)過咯！

自從Material design發(fā)布以來，可樂橙就在一直收集相關(guān)素材與資源，研究別人的作品。這套設(shè)計(jì)風(fēng)格非常鮮明，帶有濃郁的Google式嚴(yán)謹(jǐn)和理性哲學(xué)，深得我心。實(shí)際上，光是研究素材和別人作品，就能發(fā)現(xiàn)一些明顯的規(guī)律，做出幾分相似的設(shè)計(jì)。這樣半吊子的狀態(tài)一直保持到現(xiàn)在，最近有時(shí)間通讀一遍官方的設(shè)計(jì)指南，終于有了深入的理解。在朋友的項(xiàng)目中實(shí)踐了一番，雖然很抱歉拿朋友開刀，不過他對整體效果似乎還算滿意。

Material design的設(shè)計(jì)規(guī)范細(xì)致入微，需要消化好一陣子。越讀越感受到它的妙處，假如每個(gè)細(xì)節(jié)都嚴(yán)格遵照Material design的思想來設(shè)計(jì)，哪怕你不是設(shè)計(jì)人員，你的產(chǎn)品也一定不會難用和難看。當(dāng)然，作為設(shè)計(jì)師，要求就更高了。設(shè)計(jì)文檔本身，就提供了一種很好的方式，幫你從各個(gè)角度思考和構(gòu)建自己產(chǎn)品的規(guī)范。但在這之前，先要好好整理一下學(xué)習(xí)筆記。要打破規(guī)矩，必先掌握規(guī)矩。

由于只是筆記，我會寫得盡量簡單。并且省略掉一些可樂橙認(rèn)為設(shè)計(jì)師都已經(jīng)掌握的信息。想要深入了解Material design，還是建議有空通讀一遍官方文檔。不過，牢記以下要點(diǎn)，基本能做到90%了。實(shí)際上，Google官方的應(yīng)用也有不遵照規(guī)范的地方，不能太拘泥于條條框框。

一、核心思想

aterial design的核心思想，就是

把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗(yàn)，達(dá)到簡潔與直觀的效果。

Material design是最重視跨平臺體驗(yàn)的一套設(shè)計(jì)語言。由于規(guī)范嚴(yán)格細(xì)致，保證它在各個(gè)平臺使用體驗(yàn)高度一致。不過目前還只有Google自家的服務(wù)這么做，畢竟其他平臺有自己的規(guī)范與風(fēng)格。

二、材質(zhì)與空間

材質(zhì)

Material design中，最重要的信息載體就是魔法紙片。紙片層疊、合并、分離，擁有現(xiàn)實(shí)中的厚度、慣性和反饋，同時(shí)擁有液體的一些特性，能夠自由伸展變形。

這些是紙片的魔法特性，真實(shí)紙片所不具備的能力：

1. 紙片可以伸縮、改變形狀；
2. 紙片變形時(shí)可以裁剪內(nèi)容，比如紙片縮小時(shí)，內(nèi)容大小不變，而是隱藏超出部分；
3. 多張紙片可以拼接成一張；
4. 一張紙片可以分裂成多張；
5. 紙片可以在任何位置憑空出現(xiàn)；

不過，魔法紙片有些效果是禁止的：

1. 一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋；
2. 層疊的紙片，海報(bào)高度不能相同；
3. 紙片不能互相穿透；
4. 紙片不能彎折；
5. 紙片不能產(chǎn)生透視，必須平行于屏幕；

空間

Material design引入了z軸的概念，z軸垂直于屏幕，用來表現(xiàn)元素的層疊關(guān)系。z值（海拔高度）越高，元素離界面底層（水平面）越遠(yuǎn)，投影越重。這里有一個(gè)前提，所有的元素的厚度都是1dp。

所有元素都有默認(rèn)的海拔高度，對它進(jìn)行操作會抬升它的海拔高度，操作結(jié)束后，它應(yīng)該落回默認(rèn)海拔高度。同一種元素，同樣的操作，抬升的高度是一致的。

注意：這不止是設(shè)計(jì)中的概念，開發(fā)人員確實(shí)可以通過一個(gè)值來控制元素的海拔高度和投影。

三、動畫

Material design重視動畫效果，它反復(fù)強(qiáng)調(diào)一點(diǎn)：動畫不只是裝飾，它有含義，能表達(dá)元素、界面之間的關(guān)系，具備功能上的作用。

easing

動畫要貼近真實(shí)世界，就要重視easing。物理世界中的運(yùn)動和變化都是有加速和減速過程的，忽然開始、忽然停止的勻速動畫顯得機(jī)械而不真實(shí)?？紤]動畫的easing，要先考慮它在現(xiàn)實(shí)世界中的運(yùn)動規(guī)律。

水波反饋

所有可點(diǎn)擊的元素，都應(yīng)該有這樣的反饋效果。通過這個(gè)動畫，將點(diǎn)擊的位置與所操作的元素關(guān)聯(lián)起來，體現(xiàn)了Material design動畫的功能性。

轉(zhuǎn)場效果

通過過渡動畫，表達(dá)界面之間的空間與層級關(guān)系，并且跨界面?zhèn)鬟f信息。

從父界面進(jìn)入子界面，需要抬升子元素的海拔高度，并展開至整個(gè)屏幕，反之亦然。

多個(gè)相似元素，動畫的設(shè)計(jì)要有先后次序，起到引導(dǎo)視線的作用。

相似元素的運(yùn)動，要符合統(tǒng)一的規(guī)律。

細(xì)節(jié)動畫

通過圖標(biāo)的變化和一些細(xì)節(jié)來達(dá)到令人愉悅的效果。

四、顏色

顏色不宜過多。選取一種主色、一種輔助色（非必需），在此基礎(chǔ)上進(jìn)行明度、飽和度變化，構(gòu)成配色方案。

Appbar背景使用主色，狀態(tài)欄背景使用深一級的主色或20%透明度的純黑。

小面積需要高亮顯示的地方使用輔助色。

其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(xiàn)（包括圖標(biāo)和分隔線），而且透明度限定了幾個(gè)值。

黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態(tài)/提示文字] [12% 分隔線]

白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態(tài)/提示文字] [12% 分隔線]

延伸閱讀：《超方便！Material Design專用在線配色工具》

五、圖標(biāo)

桌面圖標(biāo)

桌面圖標(biāo)尺寸是48dp X 48dp。

桌面圖標(biāo)建議模仿現(xiàn)實(shí)中的折紙效果，通過扁平色彩表現(xiàn)空間和光影。注意避免以下問題：

1. 不要給彩色元素加投影；
2. 層疊不要超過兩層；
3. 折角不要放在左上角；
4. 帶投影的元素要完整展現(xiàn)，不能被圖標(biāo)邊緣裁剪；
5. 如果有折痕，放在圖片中央，并且最多只有一條；
6. 帶折疊效果的圖標(biāo)，表面不要有圖案；
7. 不能透視、彎曲；

常規(guī)形狀可以遵循幾套固定柵格設(shè)計(jì)。

小圖標(biāo)

優(yōu)先使用material design默認(rèn)圖標(biāo)。設(shè)計(jì)小圖標(biāo)時(shí)，使用最簡練的圖形來表達(dá)，圖形不要帶空間感。

小圖標(biāo)尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區(qū)域內(nèi)。

小圖標(biāo)同樣有柵格系統(tǒng)。線條、空隙盡量保持2dp寬，圓角半徑2dp。特殊情況相應(yīng)調(diào)整。

小圖標(biāo)的顏色使用純黑與純白，通過透明度調(diào)整：

黑色：[54% 正常狀態(tài)] [26% 禁用狀態(tài)]

白色：[100% 正常狀態(tài)] [30% 禁用狀態(tài)]

六、圖片

選用圖片

描述具體事物，優(yōu)先使用照片。然后可以考慮使用插畫。

圖片上的文字

圖片上的文字，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%-40%之間，淺色的遮罩透明度在40%-60%之間。

對于帶有文字的大幅圖片，遮罩文字區(qū)域，不要遮住整張圖片。

可以使用半透明的主色蓋住圖片。

提取顏色

Android L可以從圖片中提取主色，運(yùn)用在其他UI元素上。

圖片加載過程

圖片的加載過程非常講究，透明度、曝光度、飽和度3個(gè)指標(biāo)依次變化，效果相當(dāng)細(xì)膩。

七、文字

字體

英文字體使用Roboto，中文字體使用Noto。

Roboto有6種字重：Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7種字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

文字排版

常用字號：

1. 12sp 小字提示；
2. 14sp（桌面端13sp） 正文/按鈕文字；
3. 16sp（桌面端15sp） 小標(biāo)題；
4. 20sp Appbar文字；
5. 24sp 大標(biāo)題；
6. 34sp/45sp/56sp/112sp 超大號文字；

長篇幅正文，每行建議60字符（英文）左右。短文本，建議每行30字符（英文）左右。

八、布局

所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dp X 48dp。

柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。以下是一些常見的尺寸與距離：

1. 頂部狀態(tài)欄高度：24dp；
2. Appbar最小高度：56dp；
3. 底部導(dǎo)航欄高度：48dp；
4. 懸浮按鈕尺寸：56x56dp/40x40dp；
5. 用戶頭像尺寸：64x64dp/40x40dp；
6. 小圖標(biāo)點(diǎn)擊區(qū)域：48x48dp；
7. 側(cè)邊抽屜到屏幕右邊的距離：56dp；
8. 卡片間距：8dp；
9. 分隔線上下留白：8dp；
10. 大多元素的留白距離：16dp；
11. 屏幕左右對齊基線：16dp；
12. 文字左側(cè)對齊基線：72dp；

另外注意56dp這個(gè)數(shù)字，許多尺寸可變的控件，比如對話框、菜單等，寬度都可以按56的整數(shù)倍來設(shè)計(jì)。

還有非常多規(guī)范，不詳細(xì)列舉，遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多，距離與尺寸要相應(yīng)增大。

九、組件

Bottom sheets

通常以列表形式出現(xiàn)，支持上下滾動。

也可以是網(wǎng)格式的。

Buttons

按鈕分為懸浮按鈕、凸起按鈕和扁平按鈕3種。重要性如下遞減：

最重要且隨處用到的操作，建議使用懸浮按鈕。信息較多時(shí)，選用凸起按鈕可以有效突出重要操作，但注意紙片不要疊太多層。扁平按鈕適合用在簡單的界面，例如對話框中。

使用懸浮按鈕要遵循以下規(guī)則：

1. 建議只用一個(gè)懸浮按鈕；
2. 懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話框、側(cè)邊抽屜和菜單的邊緣；
3. 懸浮按鈕不能被其他元素蓋住，也不能擋住其他按鈕；
4. 列表滾動至底部時(shí)，懸浮按鈕應(yīng)該隱藏，防止它擋住列表項(xiàng)；
5. 懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對齊基線；

懸浮按鈕通常觸發(fā)正向的操作，添加、創(chuàng)建、收藏之類。不能觸發(fā)負(fù)面、破壞性或不重要的操作，也不應(yīng)該有數(shù)字角標(biāo)。下圖就是懸浮按鈕的錯(cuò)誤使用：

懸浮按鈕有兩種尺寸：56x56dp/40x40dp

Cards

即使在同一個(gè)列表中，卡片的內(nèi)容和布局方式也可以不一樣。

卡片統(tǒng)一帶有2dp的圓角。

在以下情況考慮使用卡片：

1. 同時(shí)展現(xiàn)多種不同內(nèi)容；
2. 卡片內(nèi)容之間不需要進(jìn)行比較；
3. 包含了長度不確定的內(nèi)容，比如評論；
4. 包含豐富的內(nèi)容與操作項(xiàng)，比如贊、滾動條、評論；
5. 本該是列表，但文字超過3行；
6. 本該是網(wǎng)格，但需要展現(xiàn)更多文字；

卡片最多有兩塊操作區(qū)域。輔助操作區(qū)至多包含兩個(gè)操作項(xiàng)，更多操作需要使用下拉菜單。其余部分都是主操作區(qū)。

Chips

狹小空間內(nèi)表現(xiàn)復(fù)雜信息的一個(gè)組件，比如日期、聯(lián)系人選擇器。

Dialogs

對話框包含標(biāo)題、內(nèi)容和操作項(xiàng)。點(diǎn)擊對話框外的區(qū)域，不會關(guān)閉對話框。

通常情況，避免出現(xiàn)滾動條?？臻g不足時(shí)允許滾動，滾動條建議默認(rèn)顯示。

對話框中，取消類操作項(xiàng)放在左邊，引起變化的操作項(xiàng)放在右邊。要寫明操作項(xiàng)的具體效果，不要只寫“是”和“否”。標(biāo)題文字要明確，即使不讀正文內(nèi)容也能知道在干什么，標(biāo)題不要用“確定嗎”這樣的含糊措辭。

在對話框中改變內(nèi)容，不會提交數(shù)據(jù)，點(diǎn)擊確定后，才會發(fā)生變化。

對話框上方不能再層疊對話框。

還有一種簡易對話框，不帶操作項(xiàng)。點(diǎn)擊列表內(nèi)容觸發(fā)相應(yīng)操作，并關(guān)閉對話框。點(diǎn)擊簡易對話框外面，對話框會關(guān)閉，操作取消。

對話框可以是全屏式的，全屏對話框上方可以再層疊對話框。左圖是一個(gè)普通界面，其中的任何改動立即生效。右圖是全屏對話框，其中任何改動，要點(diǎn)擊保存后才生效，點(diǎn)擊X取消。

全屏對話框右上角的操作項(xiàng)，可以是諸如保存、發(fā)送、添加、分享、更新、創(chuàng)建之類的操作，不要使用完成、OK、關(guān)閉這樣的含糊措辭。

只有必填項(xiàng)都填了，右上角的操作項(xiàng)才變?yōu)榭牲c(diǎn)擊狀態(tài)。

內(nèi)容發(fā)生了改變，點(diǎn)左上角的X，需要有個(gè)確認(rèn)對話框，提示是否忽略修改。內(nèi)容沒有發(fā)生改變，點(diǎn)左上角的X，直接退出全屏對話框。

對話框的四周留白比較大，通常是24dp。

Dividers

列表中有頭像、圖片等元素時(shí)，使用內(nèi)嵌分隔線，左端與文字對齊。

沒有頭像、圖標(biāo)等元素時(shí)，需要用通欄分隔線。

圖片本身就起到劃定區(qū)域的作用，相冊列表不需要分隔線。

謹(jǐn)慎使用分隔線，留白和小標(biāo)題也能起到分隔作用。能用留白的地方，優(yōu)先使用留白。分隔線的層級高于留白。

通欄分隔線的層級高于內(nèi)嵌分隔線。

Grids

網(wǎng)格由單元格構(gòu)成，單元格中的瓦片用來承載內(nèi)容。

瓦片可以橫跨多個(gè)單元格。

瓦片包含主操作區(qū)和副操作區(qū)，副操作區(qū)的位置可以在上下左右4個(gè)角落。在同一個(gè)網(wǎng)格中，主、副操作區(qū)的內(nèi)容與位置要保持一致。兩者的操作都應(yīng)該直接生效，不能觸發(fā)菜單。

網(wǎng)格只能垂直滾動。單個(gè)瓦片不支持滑動手勢，也不鼓勵(lì)使用拖放操作。

網(wǎng)格中的單元格間距是2dp或8dp。

Lists

列表由行構(gòu)成，行內(nèi)包含瓦片。如果列表項(xiàng)內(nèi)容文字超過3行，請改用卡片。如果列表項(xiàng)的主要區(qū)別在于圖片，請改用網(wǎng)格。

列表包含主操作區(qū)與副操作區(qū)。副操作區(qū)位于列表右側(cè)，其余都是主操作區(qū)。在同一個(gè)列表中，主、副操作區(qū)的內(nèi)容與位置要保持一致。

在同一個(gè)列表中，滑動手勢操作保持一致。

主操作區(qū)與副操作區(qū)的圖標(biāo)或圖形元素是列表控制項(xiàng)，列表的控制項(xiàng)可以是勾選框、開關(guān)、拖動排序、展開/收起等操作，也可以包含快捷鍵提示、二級菜單等提示信息。

Menus

順序固定的菜單，操作頻繁的選項(xiàng)放在上面。順序可變的菜單，可以把之前用過的選項(xiàng)排在前面，動態(tài)排序。菜單盡量不要超過2級。

當(dāng)前不可用的選項(xiàng)要顯示出來，讓用戶知道在特定條件可以觸發(fā)這些操作。

菜單原地展開，蓋住當(dāng)前選項(xiàng)，當(dāng)前選項(xiàng)應(yīng)該成為菜單的第一項(xiàng)。

菜單的當(dāng)前選項(xiàng)，始終與當(dāng)前選項(xiàng)水平對齊。

靠近屏幕邊緣時(shí)，位置可適當(dāng)錯(cuò)開。

菜單過長時(shí)，需要顯示滾動條。

菜單從當(dāng)前選項(xiàng)固定位置展開，不要跟隨點(diǎn)擊位置改變。

菜單到上下留出8dp距離。

Pickers

日期和時(shí)間選擇器是固定組件，在小屏幕設(shè)備中，通常以對話框形式展現(xiàn)。

Progress activity

線形進(jìn)度條只出現(xiàn)在紙片的邊緣。

環(huán)形進(jìn)度條也分時(shí)間已知和時(shí)間未知兩種。

環(huán)形進(jìn)度條可以用在懸浮按鈕上。

加載詳細(xì)信息時(shí)，也可以使用進(jìn)度條。

下拉刷新的動畫比較特殊，列表不動，出現(xiàn)一張帶有環(huán)形進(jìn)度條的紙片。

Sliders

滑塊左右兩邊可以放置圖標(biāo)。

或是可編輯文本框。

非連續(xù)的滑塊，需要標(biāo)出具體數(shù)值。

Snackbars toasts

Snackbars至多包含一個(gè)操作項(xiàng)，不能包含圖標(biāo)。不能出現(xiàn)一個(gè)以上的Snackbars。

Snackbars在移動設(shè)備上，出現(xiàn)在底部。在PC上，應(yīng)該懸浮在屏幕左下角。

不一定要用戶響應(yīng)的提示，可以使用Snackbars。非常重要的提示，必須用戶來決定的，應(yīng)該用對話框。

Snackbars不能遮擋住懸浮按鈕，懸浮按鈕要上移讓出位置。

Snackbars的留白比較大，24dp。

toasts和Snackbars類似，樣式和位置可以自定義，建議遵循Snackbars的規(guī)則設(shè)計(jì)。

Subheaders

小標(biāo)題是列表或網(wǎng)格中的特殊瓦片，描述列表內(nèi)容的分類、排序等信息。

滾動時(shí)，如果列表較長，小標(biāo)題會固定在頂部，直到下一個(gè)小標(biāo)題將它頂上去。

存在浮動按鈕時(shí)，小標(biāo)題要讓出位置，與文字對齊。

Switches

必須所有選項(xiàng)保持可見時(shí)，才用Radio button。不然可以使用下拉菜單，節(jié)省空間。

在同一個(gè)列表中有多項(xiàng)開關(guān)，建議使用Checkbox。

單個(gè)開關(guān)項(xiàng)建議使用Switch。

Tabs

tab只用來展現(xiàn)不同類型的內(nèi)容，不能當(dāng)導(dǎo)航菜單使用。tab至少2項(xiàng)，至多6項(xiàng)。

超出6項(xiàng)，tab需要變?yōu)闈L動式，左右翻頁。

tab文字要顯示完整，字號保持一致，不能折行，文字與圖標(biāo)不能混用。

tab選中項(xiàng)的下劃線高度是2dp。

Text fields

簡單一根橫線就能代表輸入框，可以帶圖標(biāo)。

激活狀態(tài)和錯(cuò)誤狀態(tài)，橫線的寬度變?yōu)?dp，顏色改變。

輸入框點(diǎn)擊區(qū)域高度至少48dp，但橫線并不在點(diǎn)擊區(qū)域的底部，還有8dp距離。

輸入框提示文字，可以在輸入內(nèi)容后，縮小停留在輸入框左上角。

整個(gè)點(diǎn)擊區(qū)域增高，提示文字也是點(diǎn)擊區(qū)域的一部分。

通欄輸入框是沒有橫線的，這種情況下通常有分隔線將輸入框隔開。

右下角可以加入字?jǐn)?shù)統(tǒng)計(jì)。字?jǐn)?shù)統(tǒng)計(jì)不要默認(rèn)顯示，字?jǐn)?shù)接近上限時(shí)再顯示出來。

通欄輸入框也可以有字?jǐn)?shù)統(tǒng)計(jì)，單行的字?jǐn)?shù)統(tǒng)計(jì)顯示在同一行右側(cè)。

錯(cuò)誤提示顯示在輸入框的左下方。默認(rèn)提示文本可以轉(zhuǎn)換為錯(cuò)誤提示。

字?jǐn)?shù)限制與錯(cuò)誤提示都會使點(diǎn)擊區(qū)域增高。

同時(shí)有多個(gè)輸入框錯(cuò)誤時(shí)，頂部要有一個(gè)全局的錯(cuò)誤提示。

輸入框盡量帶有自動補(bǔ)全功能。

Tooltips

提示只用在小圖標(biāo)上，文字不需要提示。鼠標(biāo)懸停、獲得焦點(diǎn)、手指長按都可以觸發(fā)提示。

上圖是錯(cuò)誤例子。提示不能包含富文本，不需要三角箭頭。

觸摸提示（左）和鼠標(biāo)提示（右）的尺寸是不同的，背景都帶有90%的透明度。

Navigation drawer

側(cè)邊抽屜從左側(cè)滑出，占據(jù)整個(gè)屏幕高度，遵循普通列表的布局規(guī)則。手機(jī)端的側(cè)邊抽屜距離屏幕右側(cè)56dp。

側(cè)邊抽屜支持滾動。如果內(nèi)容過長，設(shè)置和幫助反饋可以固定在底部。抽屜收起時(shí)，會保留之前的滾動位置。

列表較短不需要滾動時(shí)，設(shè)置和幫助反饋跟隨在列表后面。

十、設(shè)置界面

設(shè)置和幫助反饋通常放在側(cè)邊抽屜中。如果沒有側(cè)邊抽屜，則放在Appbar的下拉菜單底部。

設(shè)置界面只能包含設(shè)置項(xiàng)，諸如關(guān)于、反饋之類的界面，入口應(yīng)該放在其他地方。

設(shè)置項(xiàng)使用通欄分隔線來分組。7項(xiàng)以下不必分組。如果某項(xiàng)獨(dú)立一組，考慮把它放在頂部（重要）或放在底部的“其他”一欄中（不重要）。設(shè)置項(xiàng)較多時(shí)嘗試合并，比如把兩個(gè)相關(guān)的勾選項(xiàng)合并成一個(gè)多選項(xiàng)。設(shè)置項(xiàng)非常多時(shí)，使用子界面。

十一、易用性

無障礙設(shè)計(jì)

material design很重視用戶的廣度，應(yīng)該盡量照顧到殘障人士的體驗(yàn)。設(shè)計(jì)時(shí)考慮以下使用場景：

1. 沒有聲音；
2. 沒有色彩；
3. 手機(jī)開啟了高對比度模式；
4. 手機(jī)畫面放大；
5. 沒有視覺信息，使用屏幕閱讀器；
6. 只能通過語音控制；
7. 以上多項(xiàng)結(jié)合；

并注意以下問題：

1. 無鼠標(biāo)、純鍵盤操作。鼠標(biāo)懸停顯示信息，也要通過其他方式展現(xiàn)；
2. 考慮大字號情況下的使用體驗(yàn)；
3. 不要只通過顏色表達(dá)某些信息；
4. 音頻信息也要提供文字或其他視覺呈現(xiàn)；
5. 為圖片和視頻提供備用的文字信息；

本地化

為阿拉伯語、希伯來語、波斯語用戶設(shè)計(jì)相反的界面，他們的書寫和閱讀習(xí)慣是從右到左的。

十二、資源（需要科學(xué)上網(wǎng)）

1. 配色方案；
2. 界面模板：手機(jī)；
3. 界面模板：平板；
4. 界面模板：桌面；
5. 界面模板：線框圖；
6. 英文字體Roboto；
7. Roboto介紹；
8. 中文字體Noto；
9. 組件集psd；
10. 組件集ai；
11. 組件集sketch；
12. 系統(tǒng)圖標(biāo)；

精華資源兩波：

1. 《新鮮熱辣！一組實(shí)用的Material Design風(fēng)格素材！》；
2. 《該跟上潮流了！一大波優(yōu)質(zhì)的MATERIAL DESIGN資源免費(fèi)下載》；

實(shí)踐

最后，展示一下朋友的項(xiàng)目——云集（http://lydiabox.com）的部分界面。這是一款瀏覽器，也是一個(gè)html5應(yīng)用平臺。功能結(jié)構(gòu)不算復(fù)雜，但也有它的特殊性。非常適合用來理解material design，并嘗試做一些變通。

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計(jì)師，至少是個(gè)快樂的設(shè)計(jì)師。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。