遵循Material Design原則有助于您打造出令用戶賞心悅目而又條理清晰的應(yīng)用。
這樣做的好處
Material Design融合了設(shè)計(jì)領(lǐng)域的最佳做法、通用慣例和視覺(jué)震撼效果,可助您打造完美適合任何設(shè)備且極具表現(xiàn)力的應(yīng)用。用戶在逐漸熟悉這種視覺(jué)語(yǔ)言后,就會(huì)期待應(yīng)用采用這種設(shè)計(jì)。如果采用這種設(shè)計(jì),您開(kāi)發(fā)的應(yīng)用便能立即吸引用戶,同時(shí),應(yīng)用的易用性、用戶互動(dòng)度和留存率也會(huì)得以提升。
設(shè)計(jì)原則
根據(jù)表面和陰影的概念,界面元素應(yīng)各自分層,無(wú)論是彼此堆疊還是并排放置,都應(yīng)表現(xiàn)出層次感。為了吸引用戶的注意力并突出表面的層次感,應(yīng)使用陰影來(lái)表明各表面之間的前后關(guān)系。
應(yīng)采用全幅圖像。盡量減小照片之間的間距以及照片與屏幕邊緣之間的外邊距,讓界面的沉浸感更強(qiáng)、內(nèi)容更豐富。
應(yīng)大膽使用各種顏色,以凸顯品牌和重要界面元素。請(qǐng)確保選擇基本色和強(qiáng)調(diào)色,為應(yīng)用營(yíng)造整體一致的風(fēng)格。建議利用Palette API直接從內(nèi)容中提取顏色,以便提供沉浸感更強(qiáng)的體驗(yàn)。
應(yīng)根據(jù)8dp基準(zhǔn)網(wǎng)格采用度量指標(biāo)和框線來(lái)對(duì)齊內(nèi)容和確定內(nèi)容尺寸,以保證可讀性和一致的視覺(jué)效果。如需使文本位置更精準(zhǔn),可以使用4dp網(wǎng)格。請(qǐng)視情況將正文、縮略圖、應(yīng)用欄標(biāo)題等元素與標(biāo)準(zhǔn)框線對(duì)齊。
有意義的動(dòng)態(tài)效果(包括動(dòng)畫(huà)和轉(zhuǎn)場(chǎng)效果)有助于引導(dǎo)用戶并吸引其注意力,同時(shí)還能實(shí)現(xiàn)從一個(gè)屏幕到下一個(gè)屏幕的自然承接。在視覺(jué)敘事中采用有意義的動(dòng)態(tài)效果,有助于提供愉悅的用戶體驗(yàn)并加強(qiáng)視覺(jué)上的連貫性。
響應(yīng)式交互(如基本的觸摸反饋)應(yīng)采用表面漣漪的效果。版本低于5.0的設(shè)備不支持漣漪效果,因此請(qǐng)采用默認(rèn)的android:selectableItemBackground行為。除表面漣漪之外,交互式表面還應(yīng)當(dāng)在觸摸時(shí)浮升,從而在用戶輸入過(guò)程中呈現(xiàn)與用戶手指相接觸的效果,并且任何更改都應(yīng)能從接觸點(diǎn)向外輻射。
系統(tǒng)界面組件
在Android 5.0及更高版本中,系統(tǒng)狀態(tài)欄的顏色應(yīng)該與應(yīng)用的基本色或當(dāng)前屏幕上的內(nèi)容相搭配。對(duì)于全幅圖像,您可以將狀態(tài)欄設(shè)置為透明。對(duì)于API 23及更高級(jí)別,可以將系統(tǒng)狀態(tài)欄設(shè)置為較淺的同色系(圖標(biāo)則以較暗的顏色顯示)。
應(yīng)運(yùn)用相應(yīng)顏色、排版和產(chǎn)品徽標(biāo)(避免使用啟動(dòng)器圖標(biāo)),借助應(yīng)用欄和工具欄來(lái)向用戶傳達(dá)和宣傳品牌。在圖像比較多的屏幕上,由于圖像之間邊緣相貼,甚至可能出現(xiàn)在應(yīng)用欄或狀態(tài)欄下方,因此您可將應(yīng)用欄設(shè)成透明的,以提供沉浸感更強(qiáng)的界面體驗(yàn)。請(qǐng)務(wù)必使用紗罩為透明應(yīng)用欄中的所有圖標(biāo)提供文本保護(hù)。另外,建議您使用合適的滾動(dòng)方式,為用戶提供更豐富的視覺(jué)體驗(yàn)。
標(biāo)簽頁(yè)應(yīng)遵循Material Design的交互和樣式規(guī)范。標(biāo)簽頁(yè)必須能夠水平滑動(dòng),并且標(biāo)簽頁(yè)之間不加垂直分隔符。您可通過(guò)改變前景顏色和/或在標(biāo)簽頁(yè)文本(或圖標(biāo))下方顯示一個(gè)強(qiáng)調(diào)色的小橫條來(lái)表示相應(yīng)標(biāo)簽頁(yè)已被選中。如果沒(méi)有特別的層次結(jié)構(gòu)設(shè)計(jì),標(biāo)簽頁(yè)和應(yīng)用欄應(yīng)處于相同的表面高度。
抽屜式導(dǎo)航欄應(yīng)只包含主要導(dǎo)航元素,并遵循新的視覺(jué)準(zhǔn)則。抽屜式導(dǎo)航欄應(yīng)顯示在應(yīng)用欄和屏幕內(nèi)容的前面、系統(tǒng)狀態(tài)欄的后面。最佳做法為,務(wù)必在應(yīng)用首次運(yùn)行時(shí)讓抽屜式導(dǎo)航欄處于打開(kāi)狀態(tài),以便用戶可以輕松找到相應(yīng)內(nèi)容。
如果您的應(yīng)用包含3到5個(gè)需要能直接轉(zhuǎn)到的頂級(jí)目標(biāo)位置,請(qǐng)考慮使用底部導(dǎo)航欄。建議您使用可變化的底部導(dǎo)航欄模式,因?yàn)樵撃J娇蔂I(yíng)造更強(qiáng)的視覺(jué)沖擊,并允許在標(biāo)簽中使用更長(zhǎng)的文本字符串。請(qǐng)務(wù)必讓用戶可從大多數(shù)屏幕(深層次的詳情屏幕除外)訪問(wèn)底部導(dǎo)航欄,并在用戶滾動(dòng)屏幕時(shí)隱藏導(dǎo)航欄。
界面元素和模式
應(yīng)將主題更新為最新的Material Design主題,以避免應(yīng)用外觀顯得過(guò)時(shí)。更新系統(tǒng)主題是改進(jìn)應(yīng)用外觀最快捷的方法之一。確保結(jié)合Gingerbread和Holo主題進(jìn)行更新,以提供一致的視覺(jué)設(shè)計(jì)和用戶體驗(yàn)。根據(jù)Material Design標(biāo)準(zhǔn)更新界面元素(例如:選擇控件、選擇器、對(duì)話框、菜單和文本字段)的主題。
按鈕是應(yīng)用中最常用的交互式元素,因此將按鈕更新為最新的視覺(jué)設(shè)計(jì)模式可以產(chǎn)生非常大的效果。如果您要使用自定義按鈕,請(qǐng)避免采用過(guò)于圓潤(rùn)的邊角、劇烈的漸變效果或有光澤的表面,因?yàn)檫@種按鈕會(huì)讓您的應(yīng)用顯得過(guò)時(shí)。對(duì)于需要在視覺(jué)上突出顯示的重要操作,或者布局中文本過(guò)多以致平面按鈕容易被忽略的情況,請(qǐng)采用凸起按鈕。對(duì)于不需要突出顯示的簡(jiǎn)單操作,平面按鈕是最常使用的按鈕。對(duì)于特定屏幕中最重要的操作,請(qǐng)使用懸浮操作按鈕(FAB)。這種按鈕會(huì)懸浮在所有其他界面元素之上,因此非常醒目。
在用戶直接比較不同項(xiàng)目時(shí),應(yīng)使用圖塊和列表。如果內(nèi)容以文本為主,請(qǐng)使用列表視圖,方便用戶快速瀏覽。如果內(nèi)容以圖像為主,請(qǐng)使用圖塊。如需功能強(qiáng)大的布局選項(xiàng),請(qǐng)務(wù)必使用RecyclerView微件來(lái)創(chuàng)建列表和圖塊。
當(dāng)內(nèi)容有多種類(lèi)型,并且用戶在瀏覽內(nèi)容而非直接比較圖片或文本字符串時(shí),應(yīng)使用卡片。當(dāng)表面上提供多項(xiàng)操作時(shí),也應(yīng)使用卡片。雖然使用卡片能夠凸顯項(xiàng)目,在視覺(jué)上吸引用戶的注意力,但請(qǐng)注意不要過(guò)度使用,以免造成不必要的視覺(jué)干擾。創(chuàng)建卡片內(nèi)容時(shí),請(qǐng)務(wù)必使用CardView微件。
應(yīng)通過(guò)應(yīng)用欄中的內(nèi)嵌搜索來(lái)實(shí)現(xiàn)應(yīng)用內(nèi)搜索。如果內(nèi)容搜索是應(yīng)用的主要功能,建議您使用常駐搜索微件應(yīng)用欄。
只有在分隔內(nèi)容的主要版塊或明確劃分文本區(qū)塊時(shí)才應(yīng)使用分隔線。請(qǐng)避免為簡(jiǎn)單列表視圖中的每個(gè)項(xiàng)目都設(shè)置分隔線,這樣會(huì)產(chǎn)生大量視覺(jué)干擾,對(duì)可讀性的提升效果卻微乎其微。我們建議您改為借助空格和排版來(lái)分隔內(nèi)容。
在設(shè)計(jì)空白狀態(tài)時(shí),請(qǐng)務(wù)必告知用戶出現(xiàn)空白狀態(tài)的原因,并加入一條號(hào)召性用語(yǔ),說(shuō)明如何解決空白狀態(tài)問(wèn)題。
Android 7.0的新變化
對(duì)通知進(jìn)行了修改,添加了新的內(nèi)容區(qū)域、交互方式、用戶控件和簡(jiǎn)短文本輸入等功能。