2021-12-12 濤濤
安卓英文名是 Android，它是系統(tǒng)級(jí)源碼的總稱，而谷歌官方為這套系統(tǒng)提供的設(shè)計(jì)規(guī)范，叫做 Material Design （下稱 MD），我們了解官方的設(shè)計(jì)規(guī)范，即了解 Material Design 的過(guò)程。
目前，Material Design 已經(jīng)更新到第 3 代，與 Andoirid 12 代共同發(fā)布，它的設(shè)計(jì)進(jìn)行了大量的更新和調(diào)整，雖然我寫作的時(shí)候這代 MD 設(shè)計(jì)還沒(méi)有正式上線，但下文也將以該版本做說(shuō)明。
建議學(xué)習(xí)前先下載安卓官方的組件文件（MD2 版本，以后會(huì)更新的）和對(duì)應(yīng)字體，可以通過(guò)下方官方鏈接獲取。也可以在這個(gè)網(wǎng)址中用網(wǎng)頁(yè)翻譯查看官方的規(guī)范介紹。
1. 安卓布局規(guī)范
安卓和 iOS 類似，也包含狀態(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ò)我們依然可以用中文稱呼它為底部導(dǎo)航欄。
它和 iOS 底部導(dǎo)航類似，提供了 3-5 個(gè)選項(xiàng)的不同版本，可以根據(jù)自己的需要選擇。并且使用底部指示器的過(guò)程中，需要將導(dǎo)航底部延長(zhǎng)，覆蓋底部指示器的高 28dp。
在 MD3 中，官方默認(rèn)使用的畫布是 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)了。
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 中，提供了用戶自定義系統(tǒng)色彩風(fēng)格，和色彩根據(jù)場(chǎng)景自動(dòng)化生成和填充的強(qiáng)大特性……
這套規(guī)范異常的復(fù)雜，這是一個(gè)針對(duì) MD3 色彩配置的萬(wàn)字干貨才能講清楚的特性，我只在這邊做一些最基本的講解。
首先就是 MD3 中，也強(qiáng)調(diào)了色彩的角色：
只要這些角色的色值被確定，系統(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ā)方定義的，也可以完全交給客戶端自動(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. 國(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è)廠商各自為戰(zhàn)推出自己的設(shè)計(jì)系統(tǒng)的原因。
更底層的因素，是谷歌系統(tǒng)在國(guó)外才能獲取完整的體驗(yàn)，沒(méi)有進(jìn)入國(guó)內(nèi)（被墻），缺乏了廠商去支持和適配它的基本動(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í)在是非常難做出能讓我們滿意的設(shè)計(jì)……
文章來(lái)源：優(yōu)設(shè) 作者：酸梅干超人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.dzxscac.cn