<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 最新安卓規范入門解析

    2021-12-12    濤濤

    零基礎 UI 入門六:最新安卓規范入門解析

    零基礎 UI 入門六:最新安卓規范入門解析


    安卓英文名是 Android,它是系統級源碼的總稱,而谷歌官方為這套系統提供的設計規范,叫做 Material Design (下稱 MD),我們了解官方的設計規范,即了解 Material Design 的過程。

    目前,Material Design 已經更新到第 3 代,與 Andoirid 12 代共同發布,它的設計進行了大量的更新和調整,雖然我寫作的時候這代 MD 設計還沒有正式上線,但下文也將以該版本做說明。

    零基礎 UI 入門六:最新安卓規范入門解析

    建議學習前先下載安卓官方的組件文件(MD2 版本,以后會更新的)和對應字體,可以通過下方官方鏈接獲取。也可以在這個網址中用網頁翻譯查看官方的規范介紹。

    零基礎 UI 入門六:最新安卓規范入門解析

    1. 安卓布局規范

    安卓和 iOS 類似,也包含狀態欄、頭部標題、底部導航欄以及 …… 底部指示器,我們簡單對它們做個介紹。

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

    零基礎 UI 入門六:最新安卓規范入門解析

    頂部標題欄上,MD 提供了 4 種模式,依次為 center-aligned, small, medium, large,在實際界面中可以根據自己的需要選擇。

    零基礎 UI 入門六:最新安卓規范入門解析

    在 MD3 中,基本取消了安卓過去在頂部放導航的 “優良傳統”,所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar,不過我們依然可以用中文稱呼它為底部導航欄。

    它和 iOS 底部導航類似,提供了 3-5 個選項的不同版本,可以根據自己的需要選擇。并且使用底部指示器的過程中,需要將導航底部延長,覆蓋底部指示器的高 28dp。

    零基礎 UI 入門六:最新安卓規范入門解析

    零基礎 UI 入門六:最新安卓規范入門解析

    在 MD3 中,官方默認使用的畫布是 412*892,左右頁邊距默認為 24。所以如果我們要創建一個以 MD3 規范為標準的頁面,就可以通過置入所需的官方元素完成基礎布局,進行后續設計。

    零基礎 UI 入門六:最新安卓規范入門解析

    至于其它的官方組件,可以在源文件和官方的規范文檔中查看,就不在這里展開了。

    2. 安卓規范細節

    MD3 和 MD2 看起來完全像 2 套規范,原因就在于細節層面變化太大。MD3 一改以往直男的設計風格和配色,搖身一變成年輕人喜聞樂見的網紅風……

    零基礎 UI 入門六:最新安卓規范入門解析

    而相比起來,顏色填充的邏輯比色彩風格的變化更大。在安卓 12 中,提供了用戶自定義系統色彩風格,和色彩根據場景自動化生成和填充的強大特性……

    零基礎 UI 入門六:最新安卓規范入門解析

    這套規范異常的復雜,這是一個針對 MD3 色彩配置的萬字干貨才能講清楚的特性,我只在這邊做一些最基本的講解。

    首先就是 MD3 中,也強調了色彩的角色:

    • 主色 Primary Key Color
    • 二級主色 Secondary Key Color
    • 三級主色 Tertiary Key Color
    • 中性色 Neutral Color
    • 錯誤色 Error Color

    只要這些角色的色值被確定,系統就會自動幫助我們生成不同的明度等級,并應用在不同的場景,比如下方左側是我們設置的角色色值,右側是系統會自動生成的關聯色彩。

    零基礎 UI 入門六:最新安卓規范入門解析

    下面是色彩應用的示例:

    零基礎 UI 入門六:最新安卓規范入門解析

    零基礎 UI 入門六:最新安卓規范入門解析

    零基礎 UI 入門六:最新安卓規范入門解析

    這些角色的具體色值,可是是我們作為 APP 開發方定義的,也可以完全交給客戶端自動生成(獨立設置或背景生成)。

    所以當我們使用 MD3 規范做設計的時候,就要借助官方的插件來完成角色色值的生成。感興趣的同學可以在 Figma 官方社區搜索 Material Theme Builder 插件,并根據下方介紹了解它的使用方法。

    零基礎 UI 入門六:最新安卓規范入門解析

    除色彩外,MD3 使用了更多、更大的圓角,讓界面元素變得更圓潤。圓角使用 4 的倍數,根據元素尺寸分別應用了 4、8、12、16、28 等圓角。

    零基礎 UI 入門六:最新安卓規范入門解析

    在使用了圓角的同時,還棄用了 MD2 中核心材質 —— 投影(我忍它很久了)。讓元素之間通過色彩的對比來實現分隔,而不是應用一大堆厚重的投影來突出元素。

    零基礎 UI 入門六:最新安卓規范入門解析

    除此之外,MD3 中篇幅最多的還包括設備適配有關的規范,就不在這邊介紹,留到后面的分享中講解。

    如果是面向國內市場的 UI 設計師,針對 MD3 只需要停留在了解的層面就行,在真實的工作環境里基本沒有應用場景。

    3. 國產安卓設計現狀

    為什么我們作為 UI 設計師可以對 MD3 停留在了解的層面,而不是真實的實踐?

    因為面向國內市場的安卓界面設計,基本不遵守谷歌官方的設計規范!這里面包含了非常多復雜的歷史問題,有谷歌自己規范做的不清不楚(對比 iOS)的關系,也有每個廠商各自為戰推出自己的設計系統的原因。

    零基礎 UI 入門六:最新安卓規范入門解析

    更底層的因素,是谷歌系統在國外才能獲取完整的體驗,沒有進入國內(被墻),缺乏了廠商去支持和適配它的基本動力。同時在商業層面上,如果我們每設計一個 APP,iOS 和 Andorid 使用各自的規范,會對產品規劃、設計、開發和測試都造成非常大的壓力,是一般公司完全承受不起的。

    再者,國內的安卓項目,多數是在完成 iOS 端的設計后,安卓工程師直接參照該設計稿適配到安卓端中。只有少數安卓特定的需求需要為其設計獨立的頁面。

    零基礎 UI 入門六:最新安卓規范入門解析

    所以常規情況下,我們只需要提供標準的 iOS 界面即可。只有在產品經理提供的特殊需求和頁面,要根據它輸出安卓尺寸的對應界面,但設計風格、元素依舊可以保持 iOS 版本的樣式。

    要提升對安卓官方系統的理解,就一定要在你們的安卓手機上刷原生的系統,同時安裝 Google 三件套,否則你們體驗的就只有魔改版 iOS。

    零基礎 UI 入門六:最新安卓規范入門解析

    今天的分享到這里結束!仔細研究了下 MD3 的新增規范花了不少的精力,個人意見,MD3 實在是非常難做出能讓我們滿意的設計……

    文章來源:優設   作者:酸梅干超人

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.

    免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務




    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 久久99精品国产麻豆蜜芽| 中文字幕久精品免费视频| 99久久精品国产麻豆| 国产精品亚洲片在线观看不卡 | 手机日韩精品视频在线看网站| 99国产精品永久免费视频| 国产午夜精品一区二区三区漫画| 国产区精品高清在线观看| 国产精品久久自在自线观看| 亚洲精品无码鲁网中文电影| 欧美精品久久久久久久自慰| 无码aⅴ精品一区二区三区浪潮| 国产精品国产三级国产a| 国产亚洲美女精品久久久久狼| 亚洲精品乱码久久久久久久久久久久| 精品国产午夜福利在线观看| 久久精品国产亚洲欧美| 99国产精品国产精品九九| 久久精品国产亚洲AV无码娇色| 亚洲午夜国产精品无码| 欧洲精品一区二区三区在线观看| 国内精品久久久久久久涩爱| 国产精品爱搞视频网站| 91大神精品全国在线观看| 1区1区3区4区产品芒果精品| 欧美精品/日韩精品/国产精品| 国产suv精品一区二区33| 精品国产午夜理论片不卡| 四虎国产成人永久精品免费| 亚洲国产第一站精品蜜芽| 中文字幕精品亚洲无线码二区| 亚洲国产精品无码久久九九| 久久久久久久久久久免费精品| 久久精品国产99久久香蕉| 久久久久九九精品影院| 久久综合精品国产一区二区三区| 精品第一国产综合精品蜜芽| 久久精品国产一区二区| 日韩精品一二三区| 亚洲欧美日韩久久精品第一区| 亚洲精品成人网站在线观看 |