安卓是由谷歌公司開(kāi)源的，除 iOS 外的另一大手機(jī)系統(tǒng)，也是我們要學(xué)習(xí)規(guī)范的對(duì)象之一。但不同的是，安卓規(guī)范的學(xué)習(xí)沒(méi)有 iOS 那么簡(jiǎn)單，安卓系統(tǒng)的市場(chǎng)生態(tài)因?yàn)楫惓５幕靵y，導(dǎo)致我們面向安卓平臺(tái)設(shè)計(jì)界面的時(shí)候需要大量的思考和經(jīng)驗(yàn)做判斷。

下面，我們會(huì)先從安卓的官方規(guī)范講起，再描述國(guó)內(nèi)當(dāng)前的安卓規(guī)范現(xiàn)狀和設(shè)計(jì)的思路。

安卓英文名是 Android，它是系統(tǒng)級(jí)源碼的總稱(chēng)，而谷歌官方為這套系統(tǒng)提供的設(shè)計(jì)規(guī)范，叫做 Material Design （下稱(chēng)MD），我們了解官方的設(shè)計(jì)規(guī)范，即了解 Material Design 的過(guò)程。

目前，Material Design 已經(jīng)更新到第 3 代，與 Andoirid 12 代共同發(fā)布，它的設(shè)計(jì)進(jìn)行了大量的更新和調(diào)整，雖然我寫(xiě)作的時(shí)候這代 MD 設(shè)計(jì)還沒(méi)有正式上線(xiàn)，但下文也將以該版本做說(shuō)明。

建議學(xué)習(xí)前先下載安卓官方的組件文件（MD2版本，以后會(huì)更新的）和對(duì)應(yīng)字體，可以通過(guò)下方官方鏈接獲取。也可以在這個(gè)網(wǎng)址中用網(wǎng)頁(yè)翻譯查看官方的規(guī)范介紹。

https://material.io/resources

https://m3.material.io/styles/color/overview

3.3.1 安卓布局規(guī)范

安卓和 iOS 類(lèi)似，也包含狀態(tài)欄、頭部標(biāo)題、底部導(dǎo)航欄以及 …… 底部指示器，我們簡(jiǎn)單對(duì)它們做個(gè)介紹。

首先，頂部狀態(tài)欄在 MD2 中，是有背景色的，而在 MD3 則改成了和 iOS 一樣的透明背景。它的高是52dp（安卓的單位，和 PT 就名字的差別），使用方式和 iOS 狀態(tài)欄基本一致。

頂部標(biāo)題欄上，MD 提供了 4 種模式，依次為 **center-aligned, small, medium, large，**在實(shí)際界面中可以根據(jù)自己的需要選擇。

在 MD3 中，基本取消了安卓過(guò)去在頂部放導(dǎo)航的 “優(yōu)良傳統(tǒng)”，所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar，不過(guò)我們依然可以用中文稱(chēng)呼它為底部導(dǎo)航欄。

它和 iOS 底部導(dǎo)航類(lèi)似，提供了3-5個(gè)選項(xiàng)的不同版本，可以根據(jù)自己的需要選擇。并且使用底部指示器的過(guò)程中，需要將導(dǎo)航底部延長(zhǎng)，覆蓋底部指示器的高 28dp。

在 MD3 中，官方默認(rèn)使用的畫(huà)布是 412*892，左右頁(yè)邊距默認(rèn)為 24。所以如果我們要?jiǎng)?chuàng)建一個(gè)以 MD3 規(guī)范為標(biāo)準(zhǔn)的頁(yè)面，就可以通過(guò)置入所需的官方元素完成基礎(chǔ)布局，進(jìn)行后續(xù)設(shè)計(jì)。

至于其它的官方組件，可以在源文件和官方的規(guī)范文檔中查看，就不再這里展開(kāi)了。

3.3.2 安卓規(guī)范細(xì)節(jié)

MD3 和 MD2 看起來(lái)完全像 2 套規(guī)范，原因就在于細(xì)節(jié)層面變化太大。MD3 一改以往直男的設(shè)計(jì)風(fēng)格和配色，搖身一變成年輕人喜聞樂(lè)見(jiàn)的網(wǎng)紅風(fēng)……

而相比起來(lái)，顏色填充的邏輯比色彩風(fēng)格的變化更大。在安卓12中，提供了用戶(hù)自定義系統(tǒng)色彩風(fēng)格，和色彩根據(jù)場(chǎng)景自動(dòng)化生成和填充的強(qiáng)大特性……

這套規(guī)范異常的復(fù)雜，這是一個(gè)針對(duì) MD3 色彩配置的萬(wàn)字干貨才能講清楚的特性，我只在這邊做一些最基本的講解。

首先就是 MD3 中，也強(qiáng)調(diào)了色彩的角色：

• 主色 Primary Key Color

• 二級(jí)主色 Secondary Key Color

• 三級(jí)主色 Tertiary Key Color

• 中性色 Neutral Color

• 錯(cuò)誤色 Error Color

只要這些角色的色值被確定，系統(tǒng)就會(huì)自動(dòng)幫助我們生成不同的明度等級(jí)，并應(yīng)用在不同的場(chǎng)景，比如下方左側(cè)是我們?cè)O(shè)置的角色色值，右側(cè)是系統(tǒng)會(huì)自動(dòng)生成的關(guān)聯(lián)色彩。

下面是色彩應(yīng)用的示例：

這些角色的具體色值，可是是我們作為 APP 開(kāi)發(fā)方定義的，也可以完全交給客戶(hù)端自動(dòng)生成（獨(dú)立設(shè)置或背景生成）。

所以當(dāng)我們使用 MD3 規(guī)范做設(shè)計(jì)的時(shí)候，就要借助官方的插件來(lái)完成角色色值的生成。感興趣的同學(xué)可以在 Figma 官方社區(qū)搜索?Material Theme Builder?插件，并根據(jù)下方介紹了解它的使用方法。

除色彩外，MD3 使用了更多、更大的圓角，讓界面元素變得更圓潤(rùn)。圓角使用 4 的倍數(shù)，根據(jù)元素尺寸分別應(yīng)用了 4、8、12、16、28 等圓角。

在使用了圓角的同時(shí)，還棄用了 MD2 中核心材質(zhì) —— 投影（我忍它很久了）。讓元素之間通過(guò)色彩的對(duì)比來(lái)實(shí)現(xiàn)分隔，而不是應(yīng)用一大堆厚重的投影來(lái)突出元素。

除此之外，MD3 中篇幅最多的還包括設(shè)備適配有關(guān)的規(guī)范，就不在這邊介紹，留到后面的分享中講解。

如果是面向國(guó)內(nèi)市場(chǎng)的 UI 設(shè)計(jì)師，針對(duì) MD3 只需要停留在了解的層面就行，在真實(shí)的工作環(huán)境里基本沒(méi)有應(yīng)用場(chǎng)景。

3.3.3 國(guó)產(chǎn)安卓設(shè)計(jì)現(xiàn)狀

為什么我們作為 UI 設(shè)計(jì)師可以對(duì) MD3 停留在了解的層面，而不是真實(shí)的實(shí)踐？

因?yàn)槊嫦驀?guó)內(nèi)市場(chǎng)的安卓界面設(shè)計(jì)，基本不遵守谷歌官方的設(shè)計(jì)規(guī)范！

這里面包含了非常多復(fù)雜的歷史問(wèn)題，有谷歌自己規(guī)范做的不清不楚（對(duì)比 iOS）的關(guān)系，也有每個(gè)廠(chǎng)商各自為戰(zhàn)推出自己的設(shè)計(jì)系統(tǒng)的原因。

更底層的因素，是谷歌系統(tǒng)在國(guó)外才能獲取完整的體驗(yàn)，沒(méi)有進(jìn)入國(guó)內(nèi)（被墻），缺乏了廠(chǎng)商去支持和適配它的基本動(dòng)力。

同時(shí)在商業(yè)層面上，如果我們每設(shè)計(jì)一個(gè) APP，iOS 和 Andorid 使用各自的規(guī)范，會(huì)對(duì)產(chǎn)品規(guī)劃、設(shè)計(jì)、開(kāi)發(fā)和測(cè)試都造成非常大的壓力，是一般公司完全承受不起的。

再者，國(guó)內(nèi)的安卓項(xiàng)目，多數(shù)是在完成 iOS 端的設(shè)計(jì)后，安卓工程師直接參照該設(shè)計(jì)稿適配到安卓端中。只有少數(shù)安卓特定的需求需要為其設(shè)計(jì)獨(dú)立的頁(yè)面。

所以常規(guī)情況下，我們只需要提供標(biāo)準(zhǔn)的 iOS 界面即可。只有在產(chǎn)品經(jīng)理提供的特殊需求和頁(yè)面，要根據(jù)它輸出安卓尺寸的對(duì)應(yīng)界面，但設(shè)計(jì)風(fēng)格、元素依舊可以保持 iOS 版本的樣式。

要提升對(duì)安卓官方系統(tǒng)的理解，就一定要在你們的安卓手機(jī)上刷原生的系統(tǒng)，同時(shí)安裝 Google 三件套，否則你們體驗(yàn)的就只有魔改版 iOS。

今天的分享到這里結(jié)束！仔細(xì)研究了下 MD3 的新增規(guī)范花了不少的精力，個(gè)人意見(jiàn)上，MD3 實(shí)在是非常難做出能讓我們滿(mǎn)意的設(shè)計(jì)……

下一篇，我們就會(huì)具體來(lái)說(shuō)說(shuō)，關(guān)于A(yíng)PP適配有關(guān)的知識(shí)點(diǎn)。

我們下篇再賤……