Material Design支持跨平臺(tái)的設(shè)計(jì)和可用性最佳的實(shí)踐,以幫助創(chuàng)建優(yōu)秀的用戶體驗(yàn)。
1. 什么時(shí)候適配
Material Design建立在傳統(tǒng)和網(wǎng)絡(luò)設(shè)計(jì)的最佳實(shí)踐的基礎(chǔ)上,由用戶體驗(yàn)研究和認(rèn)知科學(xué)提供。 從這些發(fā)現(xiàn)開發(fā)的設(shè)計(jì)指南旨在被廣泛應(yīng)用于所有平臺(tái)和設(shè)備。
設(shè)計(jì)約定可能因平臺(tái)而異。 這些約定的差異可以影響用戶理解UI或完成某些任務(wù)的能力。 在這些情況下,建議適應(yīng)平臺(tái)特定的約定。 在設(shè)計(jì)差異最小化的地區(qū),適應(yīng)平臺(tái)是可選的。
以下準(zhǔn)則指示您何時(shí)應(yīng)該適應(yīng)本機(jī)平臺(tái)約定,以及何時(shí)可以選擇適應(yīng)。 平臺(tái)慣例不斷發(fā)展,材料設(shè)計(jì)正在與他們一起發(fā)展,以提高我們的設(shè)計(jì)模式的質(zhì)量。

2. 平臺(tái)建議
工具欄
工具欄通常用于框架屏幕的上下文。
建議對(duì)工具欄標(biāo)題使用平臺(tái)的默認(rèn)文本對(duì)齊方式,除非存在多個(gè)操作按鈕。

Android/Web
標(biāo)題總是左對(duì)齊

iOS
標(biāo)題默認(rèn)居中

Android
當(dāng)有多個(gè)操作圖標(biāo)時(shí),甚至沒有操作圖標(biāo)出現(xiàn)在右側(cè)時(shí),工具欄標(biāo)題總是左對(duì)齊。

ios
當(dāng)多個(gè)動(dòng)作按鈕位于應(yīng)用程序的右側(cè)或主屏幕時(shí),標(biāo)題可以左對(duì)齊。
圖標(biāo)
系統(tǒng)圖標(biāo)用于表示平臺(tái)最普遍可用的操作。

Android/Web
后退按鈕包含帶桿的細(xì)箭頭。

iOS
在iOS上,后退箭頭更厚,沒有桿。

Android/Web
操作溢出菜單圖標(biāo)(由“更多...”符號(hào)指示)包含三個(gè)垂直點(diǎn)。

ios
操作溢出菜單圖標(biāo)(由“更多...”符號(hào)指示)包含三個(gè)水平點(diǎn)。
控件
控件應(yīng)清楚地指示用戶應(yīng)如何與它們進(jìn)行交互。

Android
使用Materials控件:Switch,checkboxes,radio buttons

ios
Native平臺(tái)qaitch可以被使用,因?yàn)樗鼈兙哂信cMaterial switch匹配的功能和外觀。
使用開關(guān)而不是復(fù)選框和復(fù)選標(biāo)記列表,而不是單選按鈕,因?yàn)檫@些是iOS上預(yù)期的圖形。
手勢(shì)
邊緣滑動(dòng)
邊緣滑動(dòng)從屏幕外部開始,以顯示屏幕外部?jī)?nèi)容。
邊緣滑動(dòng)可能與其他滑動(dòng)手勢(shì)發(fā)生沖突,例如通過頁面或表行的水平滑動(dòng)。 為了避免這些類型的沖突,邊緣滑動(dòng)應(yīng)該執(zhí)行與存在于內(nèi)容區(qū)域上的任何其他滑動(dòng)相同的行為。

Android
當(dāng)不存在沖突手勢(shì)時(shí),從左邊執(zhí)行邊緣滑動(dòng)顯示內(nèi)容,諸如DrawerLayout。

ios
當(dāng)不存在沖突手勢(shì)時(shí),從左側(cè)執(zhí)行邊緣滑動(dòng)可導(dǎo)航回通過應(yīng)用程序的層次結(jié)構(gòu)。
排版
排版同時(shí)傳達(dá)文本內(nèi)容和品牌。 在這兩種情況下,文本必須可訪問和可調(diào)整大小。
如果您的應(yīng)用程序已使用排版的品牌,建議這樣做適度。

Android
Android上的默認(rèn)字體是Roboto。 在Android上,應(yīng)以可縮放像素指定文字大小,以允許使用輔助功能來調(diào)整類型大小。

ios
iOS上的默認(rèn)字體是舊金山。 使用此字體是實(shí)現(xiàn)輔助功能(如“動(dòng)態(tài)類型”)的最簡(jiǎn)單方法。 使用其他字體可能需要進(jìn)行調(diào)整才能獲得相同的輔助功能。