2021-12-12 資深UI設(shè)計者
安卓英文名是 Android，它是系統(tǒng)級源碼的總稱，而谷歌官方為這套系統(tǒng)提供的設(shè)計規(guī)范，叫做 Material Design （下稱 MD），我們了解官方的設(shè)計規(guī)范，即了解 Material Design 的過程。
目前，Material Design 已經(jīng)更新到第 3 代，與 Andoirid 12 代共同發(fā)布，它的設(shè)計進行了大量的更新和調(diào)整，雖然我寫作的時候這代 MD 設(shè)計還沒有正式上線，但下文也將以該版本做說明。
建議學(xué)習(xí)前先下載安卓官方的組件文件（MD2 版本，以后會更新的）和對應(yīng)字體，可以通過下方官方鏈接獲取。也可以在這個網(wǎng)址中用網(wǎng)頁翻譯查看官方的規(guī)范介紹。
1. 安卓布局規(guī)范
安卓和 iOS 類似，也包含狀態(tài)欄、頭部標(biāo)題、底部導(dǎo)航欄以及 …… 底部指示器，我們簡單對它們做個介紹。
首先，頂部狀態(tài)欄在 MD2 中，是有背景色的，而在 MD3 則改成了和 iOS 一樣的透明背景。它的高是 52dp（安卓的單位，和 PT 就名字的差別），使用方式和 iOS 狀態(tài)欄基本一致。
頂部標(biāo)題欄上，MD 提供了 4 種模式，依次為 center-aligned, small, medium, large，在實際界面中可以根據(jù)自己的需要選擇。
在 MD3 中，基本取消了安卓過去在頂部放導(dǎo)航的 “優(yōu)良傳統(tǒng)”，所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar，不過我們依然可以用中文稱呼它為底部導(dǎo)航欄。
它和 iOS 底部導(dǎo)航類似，提供了 3-5 個選項的不同版本，可以根據(jù)自己的需要選擇。并且使用底部指示器的過程中，需要將導(dǎo)航底部延長，覆蓋底部指示器的高 28dp。
在 MD3 中，官方默認使用的畫布是 412*892，左右頁邊距默認為 24。所以如果我們要創(chuàng)建一個以 MD3 規(guī)范為標(biāo)準(zhǔn)的頁面，就可以通過置入所需的官方元素完成基礎(chǔ)布局，進行后續(xù)設(shè)計。
至于其它的官方組件，可以在源文件和官方的規(guī)范文檔中查看，就不在這里展開了。
2. 安卓規(guī)范細節(jié)
MD3 和 MD2 看起來完全像 2 套規(guī)范，原因就在于細節(jié)層面變化太大。MD3 一改以往直男的設(shè)計風(fēng)格和配色，搖身一變成年輕人喜聞樂見的網(wǎng)紅風(fēng)……
而相比起來，顏色填充的邏輯比色彩風(fēng)格的變化更大。在安卓 12 中，提供了用戶自定義系統(tǒng)色彩風(fēng)格，和色彩根據(jù)場景自動化生成和填充的強大特性……
這套規(guī)范異常的復(fù)雜，這是一個針對 MD3 色彩配置的萬字干貨才能講清楚的特性，我只在這邊做一些最基本的講解。
首先就是 MD3 中，也強調(diào)了色彩的角色：
只要這些角色的色值被確定，系統(tǒng)就會自動幫助我們生成不同的明度等級，并應(yīng)用在不同的場景，比如下方左側(cè)是我們設(shè)置的角色色值，右側(cè)是系統(tǒng)會自動生成的關(guān)聯(lián)色彩。
下面是色彩應(yīng)用的示例：
這些角色的具體色值，可是是我們作為 APP 開發(fā)方定義的，也可以完全交給客戶端自動生成（獨立設(shè)置或背景生成）。
所以當(dāng)我們使用 MD3 規(guī)范做設(shè)計的時候，就要借助官方的插件來完成角色色值的生成。感興趣的同學(xué)可以在 Figma 官方社區(qū)搜索 Material Theme Builder 插件，并根據(jù)下方介紹了解它的使用方法。
除色彩外，MD3 使用了更多、更大的圓角，讓界面元素變得更圓潤。圓角使用 4 的倍數(shù)，根據(jù)元素尺寸分別應(yīng)用了 4、8、12、16、28 等圓角。
在使用了圓角的同時，還棄用了 MD2 中核心材質(zhì) —— 投影（我忍它很久了）。讓元素之間通過色彩的對比來實現(xiàn)分隔，而不是應(yīng)用一大堆厚重的投影來突出元素。
除此之外，MD3 中篇幅最多的還包括設(shè)備適配有關(guān)的規(guī)范，就不在這邊介紹，留到后面的分享中講解。
如果是面向國內(nèi)市場的 UI 設(shè)計師，針對 MD3 只需要停留在了解的層面就行，在真實的工作環(huán)境里基本沒有應(yīng)用場景。
3. 國產(chǎn)安卓設(shè)計現(xiàn)狀
為什么我們作為 UI 設(shè)計師可以對 MD3 停留在了解的層面，而不是真實的實踐？
因為面向國內(nèi)市場的安卓界面設(shè)計，基本不遵守谷歌官方的設(shè)計規(guī)范！這里面包含了非常多復(fù)雜的歷史問題，有谷歌自己規(guī)范做的不清不楚（對比 iOS）的關(guān)系，也有每個廠商各自為戰(zhàn)推出自己的設(shè)計系統(tǒng)的原因。
更底層的因素，是谷歌系統(tǒng)在國外才能獲取完整的體驗，沒有進入國內(nèi)（被墻），缺乏了廠商去支持和適配它的基本動力。同時在商業(yè)層面上，如果我們每設(shè)計一個 APP，iOS 和 Andorid 使用各自的規(guī)范，會對產(chǎn)品規(guī)劃、設(shè)計、開發(fā)和測試都造成非常大的壓力，是一般公司完全承受不起的。
再者，國內(nèi)的安卓項目，多數(shù)是在完成 iOS 端的設(shè)計后，安卓工程師直接參照該設(shè)計稿適配到安卓端中。只有少數(shù)安卓特定的需求需要為其設(shè)計獨立的頁面。
所以常規(guī)情況下，我們只需要提供標(biāo)準(zhǔn)的 iOS 界面即可。只有在產(chǎn)品經(jīng)理提供的特殊需求和頁面，要根據(jù)它輸出安卓尺寸的對應(yīng)界面，但設(shè)計風(fēng)格、元素依舊可以保持 iOS 版本的樣式。
要提升對安卓官方系統(tǒng)的理解，就一定要在你們的安卓手機上刷原生的系統(tǒng)，同時安裝 Google 三件套，否則你們體驗的就只有魔改版 iOS。
今天的分享到這里結(jié)束！仔細研究了下 MD3 的新增規(guī)范花了不少的精力，個人意見，MD3 實在是非常難做出能讓我們滿意的設(shè)計……
文章來源：優(yōu)設(shè) 作者：酸梅干超人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.sillybuy.com