嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

最新安卓規范入門解析

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 實在是非常難做出能讓我們滿意的設計……

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

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

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

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




日歷

鏈接

個人資料

藍藍設計的小編 http://m.sdgs6788.com

存檔

嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片
<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 欧美一区二区三区日韩视频| 午夜在线精品偷拍| 午夜视频一区| 国内精品嫩模av私拍在线观看 | 亚洲精品中文字| 欧美日韩在线播放三区| 亚洲欧美一区二区三区极速播放 | 极品少妇一区二区三区| 亚洲电影网站| 另类激情亚洲| 亚洲亚洲精品在线观看 | 亚洲无吗在线| 久久久91精品| 亚洲一区二区三区涩| 久久成人人人人精品欧| 久久一本综合频道| 亚洲在线免费观看| 久久久久久久久岛国免费| 一本色道久久综合狠狠躁篇的优点| 亚洲欧美激情四射在线日 | 久久久7777| 亚洲欧美在线观看| 欧美精品免费播放| 免费日韩av| 国产欧美精品xxxx另类| 亚洲人成网站影音先锋播放| 国产真实乱偷精品视频免| 一区二区日韩精品| 亚洲精品久久视频| 欧美影院成人| 亚洲一区二区视频在线观看| 欧美在线免费观看视频| 亚洲校园激情| 久久只有精品| 久久久久久自在自线| 欧美日韩国产区| 裸体素人女欧美日韩| 欧美午夜电影一区| 欧美风情在线观看| 国产无一区二区| 亚洲精品人人| 亚洲福利精品| 午夜视频久久久久久| 亚洲一区二区三区视频| 欧美成人国产| 久久午夜羞羞影院免费观看| 欧美中文在线观看| 日韩一本二本av| 久久久久久高潮国产精品视| 欧美一区二区三区四区在线| 欧美日本在线一区| 欧美jizzhd精品欧美喷水 | 欧美福利视频在线| 国内外成人在线| 国产精品99久久久久久白浆小说| 亚洲激情在线观看| 久久久久网站| 久久精品一区二区三区不卡牛牛| 欧美视频在线视频| 亚洲国产高清自拍| 亚洲国产日韩欧美在线动漫| 久久国产精品亚洲va麻豆| 午夜精品久久久久99热蜜桃导演| 欧美精品一区二区三区视频| 欧美国产日韩在线| 国产精品亚洲成人| 亚洲免费视频一区二区| 欧美国产精品v| 免费久久精品视频| 在线看国产一区| 久久久久久久久久久久久女国产乱 | 国产精品亚洲精品| 亚洲特级片在线| 亚洲愉拍自拍另类高清精品| 玖玖视频精品| 国产日韩欧美一区二区三区四区| 一区二区三区黄色| 亚洲一级影院| 国产精品久久999| 亚洲——在线| 欧美一区二区精品| 国产伊人精品| 久久久夜色精品亚洲| 欧美二区在线播放| 一区二区三区免费观看| 国产精品久久久久久久免费软件| 一区二区三区视频在线观看| 亚洲女同同性videoxma| 国产精品久久久久久久久免费桃花 | 午夜天堂精品久久久久| 欧美成人黄色小视频| 蜜臀久久99精品久久久久久9| 国产亚洲一区二区三区在线播放| 亚洲综合视频1区| 亚洲午夜一区二区| 欧美日韩一区二区三区在线看| 亚洲精品在线观看免费| 亚洲精品三级| 欧美成人日韩| 亚洲最新视频在线| 欧美一区二视频| 在线观看日韩av先锋影音电影院| 蜜桃av一区| 在线综合亚洲| 久久综合色影院| 99热这里只有成人精品国产| 国产精品女人网站| 久久偷看各类wc女厕嘘嘘偷窃| 亚洲精品国产系列| 久久国产66| 亚洲美女毛片| 国产日韩欧美精品| 欧美高清视频| 欧美在线视频二区| 亚洲三级网站| 老司机精品福利视频| 亚洲第一色在线| 久久米奇亚洲| 亚洲国产精品一区二区第一页| 99这里只有精品| 国产精品mm| 久久都是精品| 日韩视频中文| 另类天堂视频在线观看| 亚洲影院在线| 亚洲激情视频网| 国产欧美一区二区色老头| 欧美高清免费| 久久久精品免费视频| 亚洲视频一二区| 亚洲高清视频中文字幕| 久久亚洲美女| 午夜精品久久久| 在线一区视频| 91久久久亚洲精品| 樱桃国产成人精品视频| 国产日韩成人精品| 欧美激情中文字幕乱码免费| 亚洲老板91色精品久久| 欧美成人首页| 久久综合激情| 久久av一区二区三区漫画| 亚洲少妇一区| aa成人免费视频| 欧美日韩一区二区三区| 欧美另类人妖| 欧美韩日一区二区| 老司机午夜精品| 久久久久久97三级| 欧美在线亚洲在线| 亚洲美女在线看| 老司机午夜免费精品视频| 久久久人成影片一区二区三区| 午夜在线观看免费一区| 亚洲一区二区三区在线播放| 亚洲视频网在线直播| 一本色道久久综合亚洲精品不卡 | 欧美成人三级在线| 欧美黄色免费| 欧美高清视频在线播放| 美国成人毛片| 欧美a级大片| 亚洲国产经典视频| 欧美激情影音先锋| 亚洲精品123区| 亚洲精品韩国| av成人手机在线| 亚洲网站视频福利| 亚洲日本中文字幕| 亚洲成人在线视频播放| av不卡在线看| 亚洲区一区二区三区| 欧美精品一区二区三区久久久竹菊 | 国产精品av一区二区| 国产精品久久| 国产欧美一区二区视频| 激情av一区| 亚洲欧洲一区| 99精品欧美一区| 亚洲特级毛片| 欧美亚洲在线观看| 久久色中文字幕| 欧美国产日韩在线观看| 亚洲精品久久久蜜桃| 亚洲在线视频观看| 久久久久国色av免费观看性色| 欧美激情第4页| 国产精品久久国产精品99gif | 亚洲三级免费观看| 亚洲一区二区三区精品视频| 久久狠狠婷婷| 欧美欧美全黄| 国产欧美一区二区精品忘忧草 | 午夜日本精品| 美女精品在线观看| 国产精品成av人在线视午夜片| 国产午夜精品久久久久久久| 亚洲国产精品国自产拍av秋霞| 中文欧美在线视频| 久久久夜夜夜|