由于最近各種原因?qū)е耹eader和我本人對(duì)成都的設(shè)計(jì)師都不太滿意中跌,u can u up ?
所以我就i can i up 爹橱,我行我上了终惑,開始進(jìn)行了一周的Material Design的學(xué)習(xí)研究,成果如下
參考文獻(xiàn):
精華資源兩波:
《新鮮熱辣!一組實(shí)用的Material Design風(fēng)格素材绷柒!》
《該跟上潮流了!一大波優(yōu)質(zhì)的MATERIAL DESIGN資源免費(fèi)下載》
一涮因、核心思想
Material design的核心思想,就是把物理世界的體驗(yàn)帶進(jìn)app和手機(jī)里伺绽。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性养泡,保留其最原始純凈的形態(tài)、空間關(guān)系奈应、變化與過渡澜掩,配合虛擬世界的靈活特性,還原最貼近真實(shí)的體驗(yàn)杖挣,達(dá)到簡潔與直觀的效果
二肩榕、材質(zhì)與空間
材質(zhì)
Material design中,最重要的信息載體就是魔法紙片惩妇。紙片層疊株汉、合并、分離歌殃,擁有現(xiàn)實(shí)中的厚度乔妈、慣性和反饋,同時(shí)擁有液體的一些特性氓皱,能夠自由伸展變形路召。
這些是紙片的魔法特性,真實(shí)紙片所不具備的能力:
紙片可以伸縮波材、改變形狀
紙片變形時(shí)可以裁剪內(nèi)容股淡,比如紙片縮小時(shí),內(nèi)容大小不變廷区,而是隱藏超出部分
多張紙片可以拼接成一張
一張紙片可以分裂成多張
紙片可以在任何位置憑空出現(xiàn)
不過唯灵,魔法紙片有些效果是禁止的:
一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋
層疊的紙片,海報(bào)高度不能相同
紙片不能互相穿透
紙片不能彎折
紙片不能產(chǎn)生透視隙轻,必須平行于屏幕
空間
Material design引入了z軸的概念早敬,z軸垂直于屏幕,用來表現(xiàn)元素的層疊關(guān)系大脉。z值(海拔高度)越高搞监,元素離界面底層(水平面)越遠(yuǎn),投影越重镰矿。這里有一個(gè)前提琐驴,所有的元素的厚度都是1dp。
所有元素都有默認(rèn)的海拔高度,對(duì)它進(jìn)行操作會(huì)抬升它的海拔高度绝淡,操作結(jié)束后宙刘,它應(yīng)該落回默認(rèn)海拔高度。同一種元素牢酵,同樣的操作悬包,抬升的高度是一致的评疗。
注意:這不止是設(shè)計(jì)中的概念灰追,開發(fā)人員確實(shí)可以通過一個(gè)值來控制元素的海拔高度和投影。
三捕透、動(dòng)畫
Material design重視動(dòng)畫效果丝格,它反復(fù)強(qiáng)調(diào)一點(diǎn):動(dòng)畫不只是裝飾撑瞧,它有含義,能表達(dá)元素显蝌、界面之間的關(guān)系预伺,具備功能上的作用。
easing
動(dòng)畫要貼近真實(shí)世界曼尊,就要重視easing酬诀。物理世界中的運(yùn)動(dòng)和變化都是有加速和減速過程的,忽然開始骆撇、忽然停止的勻速動(dòng)畫顯得機(jī)械而不真實(shí)料滥。考慮動(dòng)畫的easing艾船,要先考慮它在現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律葵腹。
水波反饋
所有可點(diǎn)擊的元素,都應(yīng)該有這樣的反饋效果屿岂。通過這個(gè)動(dòng)畫践宴,將點(diǎn)擊的位置與所操作的元素關(guān)聯(lián)起來,體現(xiàn)了Material design動(dòng)畫的功能性爷怀。
轉(zhuǎn)場效果
通過過渡動(dòng)畫阻肩,表達(dá)界面之間的空間與層級(jí)關(guān)系,并且跨界面?zhèn)鬟f信息运授。
從父界面進(jìn)入子界面烤惊,需要抬升子元素的海拔高度,并展開至整個(gè)屏幕吁朦,反之亦然柒室。
多個(gè)相似元素,動(dòng)畫的設(shè)計(jì)要有先后次序逗宜,起到引導(dǎo)視線的作用雄右。
相似元素的運(yùn)動(dòng)空骚,要符合統(tǒng)一的規(guī)律。
細(xì)節(jié)動(dòng)畫
通過圖標(biāo)的變化和一些細(xì)節(jié)來達(dá)到令人愉悅的效果擂仍。
四囤屹、顏色
顏色不宜過多。選取一種主色逢渔、一種輔助色(非必需)肋坚,在此基礎(chǔ)上進(jìn)行明度、飽和度變化肃廓,構(gòu)成配色方案智厌。
Appbar背景使用主色,狀態(tài)欄背景使用深一級(jí)的主色或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)空間和光影羹幸。注意避免以下問題:
不要給彩色元素加投影
層疊不要超過兩層
折角不要放在左上角
帶投影的元素要完整展現(xiàn)脊髓,不能被圖標(biāo)邊緣裁剪
如果有折痕,放在圖片中央栅受,并且最多只有一條
帶折疊效果的圖標(biāo)将硝,表面不要有圖案
不能透視、彎曲
常規(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%之間寒屯。
對(duì)于帶有文字的大幅圖片,遮罩文字區(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能耻。
文字排版
常用字號(hào):
12sp 小字提示
14sp(桌面端13sp) 正文/按鈕文字
16sp(桌面端15sp) 小標(biāo)題
20sp Appbar文字
24sp 大標(biāo)題
34sp/45sp/56sp/112sp 超大號(hào)文字
長篇幅正文,每行建議60字符(英文)左右亡驰。短文本晓猛,建議每行30字符(英文)左右。
八凡辱、布局
所有可操作元素最小點(diǎn)擊區(qū)域尺寸:48dp X 48dp戒职。
柵格系統(tǒng)的最小單位是8dp,一切距離透乾、尺寸都應(yīng)該是8dp的整數(shù)倍洪燥。以下是一些常見的尺寸與距離:
頂部狀態(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
另外注意56dp這個(gè)數(shù)字磕秤,許多尺寸可變的控件,比如對(duì)話框捧韵、菜單等市咆,寬度都可以按56的整數(shù)倍來設(shè)計(jì)。
還有非常多規(guī)范再来,不詳細(xì)列舉蒙兰,遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多芒篷,距離與尺寸要相應(yīng)增大搜变。
九、組件
Bottom sheets
通常以列表形式出現(xiàn)针炉,支持上下滾動(dòng)挠他。
也可以是網(wǎng)格式的。
Buttons
按鈕分為懸浮按鈕篡帕、凸起按鈕和扁平按鈕3種殖侵。重要性如下遞減:
最重要且隨處用到的操作,建議使用懸浮按鈕赂苗。信息較多時(shí)愉耙,選用凸起按鈕可以有效突出重要操作贮尉,但注意紙片不要疊太多層拌滋。扁平按鈕適合用在簡單的界面,例如對(duì)話框中猜谚。
使用懸浮按鈕要遵循以下規(guī)則:
建議只用一個(gè)懸浮按鈕
懸浮按鈕可以貼在紙片邊緣或者接縫處败砂,但不要貼在對(duì)話框、側(cè)邊抽屜和菜單的邊緣
懸浮按鈕不能被其他元素蓋住魏铅,也不能擋住其他按鈕
列表滾動(dòng)至底部時(shí)昌犹,懸浮按鈕應(yīng)該隱藏,防止它擋住列表項(xiàng)
懸浮按鈕的位置不能隨意擺放览芳,可以貼著左右兩邊的對(duì)齊基線
懸浮按鈕通常觸發(fā)正向的操作斜姥,添加、創(chuàng)建沧竟、收藏之類铸敏。不能觸發(fā)負(fù)面、破壞性或不重要的操作悟泵,也不應(yīng)該有數(shù)字角標(biāo)杈笔。下圖就是懸浮按鈕的錯(cuò)誤使用:
懸浮按鈕有兩種尺寸:56x56dp/40x40dp
Cards
即使在同一個(gè)列表中,卡片的內(nèi)容和布局方式也可以不一樣糕非。
卡片統(tǒng)一帶有2dp的圓角蒙具。
在以下情況考慮使用卡片:
同時(shí)展現(xiàn)多種不同內(nèi)容
卡片內(nèi)容之間不需要進(jìn)行比較
包含了長度不確定的內(nèi)容球榆,比如評(píng)論
包含豐富的內(nèi)容與操作項(xiàng),比如贊禁筏、滾動(dòng)條持钉、評(píng)論
本該是列表,但文字超過3行
本該是網(wǎng)格融师,但需要展現(xiàn)更多文字
卡片最多有兩塊操作區(qū)域右钾。輔助操作區(qū)至多包含兩個(gè)操作項(xiàng),更多操作需要使用下拉菜單旱爆。其余部分都是主操作區(qū)舀射。
Chips
狹小空間內(nèi)表現(xiàn)復(fù)雜信息的一個(gè)組件,比如日期怀伦、聯(lián)系人選擇器脆烟。
Dialogs
對(duì)話框包含標(biāo)題、內(nèi)容和操作項(xiàng)房待。點(diǎn)擊對(duì)話框外的區(qū)域邢羔,不會(huì)關(guān)閉對(duì)話框。
通常情況桑孩,避免出現(xiàn)滾動(dòng)條拜鹤。空間不足時(shí)允許滾動(dòng)流椒,滾動(dòng)條建議默認(rèn)顯示敏簿。
對(duì)話框中,取消類操作項(xiàng)放在左邊宣虾,引起變化的操作項(xiàng)放在右邊惯裕。要寫明操作項(xiàng)的具體效果,不要只寫“是”和“否”绣硝。標(biāo)題文字要明確蜻势,即使不讀正文內(nèi)容也能知道在干什么,標(biāo)題不要用“確定嗎”這樣的含糊措辭鹉胖。
在對(duì)話框中改變內(nèi)容握玛,不會(huì)提交數(shù)據(jù),點(diǎn)擊確定后甫菠,才會(huì)發(fā)生變化挠铲。
對(duì)話框上方不能再層疊對(duì)話框。
還有一種簡易對(duì)話框淑蔚,不帶操作項(xiàng)市殷。點(diǎn)擊列表內(nèi)容觸發(fā)相應(yīng)操作,并關(guān)閉對(duì)話框刹衫。點(diǎn)擊簡易對(duì)話框外面醋寝,對(duì)話框會(huì)關(guān)閉搞挣,操作取消。
對(duì)話框可以是全屏式的音羞,全屏對(duì)話框上方可以再層疊對(duì)話框囱桨。左圖是一個(gè)普通界面,其中的任何改動(dòng)立即生效嗅绰。右圖是全屏對(duì)話框舍肠,其中任何改動(dòng),要點(diǎn)擊保存后才生效窘面,點(diǎn)擊X取消翠语。
全屏對(duì)話框右上角的操作項(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)對(duì)話框甘磨,提示是否忽略修改橡羞。內(nèi)容沒有發(fā)生改變眯停,點(diǎn)左上角的X,直接退出全屏對(duì)話框卿泽。
對(duì)話框的四周留白比較大莺债,通常是24dp。
Dividers
列表中有頭像签夭、圖片等元素時(shí)齐邦,使用內(nèi)嵌分隔線,左端與文字對(duì)齊第租。
沒有頭像措拇、圖標(biāo)等元素時(shí),需要用通欄分隔線慎宾。
圖片本身就起到劃定區(qū)域的作用丐吓,相冊(cè)列表不需要分隔線浅悉。
謹(jǐn)慎使用分隔線,留白和小標(biāo)題也能起到分隔作用券犁。能用留白的地方术健,優(yōu)先使用留白。分隔線的層級(jí)高于留白粘衬。
通欄分隔線的層級(jí)高于內(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)格只能垂直滾動(dòng)蹲盘。單個(gè)瓦片不支持滑動(dòng)手勢股毫,也不鼓勵(lì)使用拖放操作。
網(wǎng)格中的單元格間距是2dp或8dp召衔。
Lists
列表由行構(gòu)成铃诬,行內(nèi)包含瓦片。如果列表項(xiàng)內(nèi)容文字超過3行苍凛,請(qǐng)改用卡片趣席。如果列表項(xiàng)的主要區(qū)別在于圖片,請(qǐng)改用網(wǎng)格醇蝴。
列表包含主操作區(qū)與副操作區(qū)宣肚。副操作區(qū)位于列表右側(cè),其余都是主操作區(qū)悠栓。在同一個(gè)列表中霉涨,主、副操作區(qū)的內(nèi)容與位置要保持一致惭适。
在同一個(gè)列表中笙瑟,滑動(dòng)手勢操作保持一致。
主操作區(qū)與副操作區(qū)的圖標(biāo)或圖形元素是列表控制項(xiàng)癞志,列表的控制項(xiàng)可以是勾選框往枷、開關(guān)、拖動(dòng)排序、展開/收起等操作错洁,也可以包含快捷鍵提示茅信、二級(jí)菜單等提示信息。
Menus
順序固定的菜單,操作頻繁的選項(xiàng)放在上面。順序可變的菜單孵淘,可以把之前用過的選項(xiàng)排在前面画株,動(dòng)態(tài)排序。菜單盡量不要超過2級(jí)。
當(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)水平對(duì)齊。
靠近屏幕邊緣時(shí)遥巴,位置可適當(dāng)錯(cuò)開千康。
菜單過長時(shí),需要顯示滾動(dòng)條铲掐。
菜單從當(dāng)前選項(xiàng)固定位置展開拾弃,不要跟隨點(diǎn)擊位置改變。
菜單到上下留出8dp距離摆霉。
Pickers
日期和時(shí)間選擇器是固定組件豪椿,在小屏幕設(shè)備中携栋,通常以對(duì)話框形式展現(xiàn)搭盾。
Progress & activity
線形進(jìn)度條只出現(xiàn)在紙片的邊緣。
環(huán)形進(jìn)度條也分時(shí)間已知和時(shí)間未知兩種婉支。
環(huán)形進(jìn)度條可以用在懸浮按鈕上鸯隅。
加載詳細(xì)信息時(shí),也可以使用進(jìn)度條磅摹。
下拉刷新的動(dòng)畫比較特殊滋迈,列表不動(dòng)霎奢,出現(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在移動(dòng)設(shè)備上,出現(xiàn)在底部舰褪。在PC上皆疹,應(yīng)該懸浮在屏幕左下角。
不一定要用戶響應(yīng)的提示占拍,可以使用Snackbars略就。非常重要的提示,必須用戶來決定的晃酒,應(yīng)該用對(duì)話框表牢。
Snackbars不能遮擋住懸浮按鈕,懸浮按鈕要上移讓出位置贝次。
Snackbars的留白比較大崔兴,24dp。
toasts和Snackbars類似蛔翅,樣式和位置可以自定義敲茄,建議遵循Snackbars的規(guī)則設(shè)計(jì)。
Subheaders
小標(biāo)題是列表或網(wǎng)格中的特殊瓦片山析,描述列表內(nèi)容的分類折汞、排序等信息。
滾動(dòng)時(shí)盖腿,如果列表較長爽待,小標(biāo)題會(huì)固定在頂部,直到下一個(gè)小標(biāo)題將它頂上去翩腐。
存在浮動(dòng)按鈕時(shí)鸟款,小標(biāo)題要讓出位置,與文字對(duì)齊茂卦。
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動(dòng)式柑贞,左右翻頁方椎。
tab文字要顯示完整,字號(hào)保持一致钧嘶,不能折行棠众,文字與圖標(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ò)誤提示都會(huì)使點(diǎn)擊區(qū)域增高。
同時(shí)有多個(gè)輸入框錯(cuò)誤時(shí)局冰,頂部要有一個(gè)全局的錯(cuò)誤提示测蘑。
輸入框盡量帶有自動(dòng)補(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è)邊抽屜支持滾動(dòng)。如果內(nèi)容過長荒适,設(shè)置和幫助反饋可以固定在底部梨熙。抽屜收起時(shí),會(huì)保留之前的滾動(dòng)位置刀诬。
列表較短不需要滾動(dòng)時(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í)考慮以下使用場景:
沒有聲音
沒有色彩
手機(jī)開啟了高對(duì)比度模式
手機(jī)畫面放大
沒有視覺信息速兔,使用屏幕閱讀器
只能通過語音控制
以上多項(xiàng)結(jié)合
并注意以下問題:
無鼠標(biāo)、純鍵盤操作活玲。鼠標(biāo)懸停顯示信息涣狗,也要通過其他方式展現(xiàn)谍婉。
考慮大字號(hào)情況下的使用體驗(yàn)。
不要只通過顏色表達(dá)某些信息镀钓。
音頻信息也要提供文字或其他視覺呈現(xiàn)穗熬。
為圖片和視頻提供備用的文字信息。
本地化
為阿拉伯語丁溅、希伯來語唤蔗、波斯語用戶設(shè)計(jì)相反的界面,他們的書寫和閱讀習(xí)慣是從右到左的窟赏。