android md 顏色,安卓MD(Material Design)規范

Md規范是一種設計風格,并不特指規范。是一種模擬紙張的手法。

一、核心思想

把物理世界的體驗帶進屏幕。去掉現實中的雜質和隨機性,保留其最原始純凈的形態、空間關系、變化與過度,配合虛擬世界的靈活特性,還原最貼近真實的體驗,達到簡潔與直觀的效果。

01、五大原則

1、材料隱喻

受物理世界及其物理紋理材質的啟發,包括它們如何讓反射光線和投射陰影。材料表面進行重新構想,加入紙張和墨水的特性。

2、大膽夸張

以印刷設計方法,排版、網格、空間、比例、顏色和圖像為指導,創造出讓用戶沉浸在精心設計的視覺層級、視覺意義以及視覺聚焦中。

3、動效表意

通過微妙的反饋和平滑的過渡來使動效保持一定的連續性。隨著元素出現在屏幕上,它們在環境中轉換和重組,相互作用產生新的變化。

4、靈活

系統旨在實現品牌傳達。他集成了一個自定義代碼庫,可以使組件、插件和設計元素無縫的鏈接和靈活的運行。

5、 跨平臺

使用跨平臺管理,其中包括android、ios、flutter和web,方便設計師跨平臺維護ui組件。

02、設計目標

創造:我們希望創造一種新的視覺設計語言,能夠遵循優秀設計的經典定則,同時還伴有創新理念和新的科技

統一:我們希望創造一種獨一無二的底層系統,在這個系統的基礎智商,構建跨平臺和超越設備尺寸的統一體驗

定制:通過Material的視覺語言的延伸,為創新和品牌表達提供統一靈活的設計規范。

二、材質與空間

01、材質

Meterial design中,最重要的信息載體就是魔法紙片。紙片層疊、合并、分離,擁有現實中的厚度、慣性和反饋,同時擁有液體的一些特性,能夠自由伸展變形。

這些是紙片的魔法特性,真實紙片所不具備的能力:

1、紙片可以伸縮,改變形狀

2、紙片變形時可以裁剪內容,比如紙片縮小時,內容大小不變,而是隱藏超出部分

3、多張紙片可以拼接成一張

4、一張紙片可以分裂成多張

5、紙片可以在任何位置憑空出現

不過,魔法紙片有些效果是禁止的:

1、一項操作不能同時觸發兩站紙片的反饋

2、層疊的紙片,高度不能相同

3、紙片不能互相穿透

4、紙片不能彎折

5、紙片不能產生透視,必須平行于屏幕

02、空間

Material Design引入了Z軸的概念:

Z軸垂直于屏幕,用來表現元素的疊層關系。Z值越高,元素離界面底層越遠,投影越重。這里有一個前提,所有的元素的厚度都是1dp。

03、動效

Material Design重視動畫效果,它反復強調一點:

動畫不只是裝飾,他有含義,能表達元素、界面之間的關系,具備功能上的作用。

動畫要貼近真實世界,就要重視easing。物理世界中的運動和變化都是有加速和減速的過程的,忽然開始、忽然停止的勻速動畫顯得機械而不真實。考慮動畫的easing,要先考慮它在現實世界中的運動規律。

所有可點擊的元素,都應該有這樣的反饋效果。通過這個動畫,將點擊的位置與所操作的元素關聯起來,體現了Material Design動畫的功能性。

1、通過過渡動畫,表達界面之間的空間與層級關系,并且跨界面傳遞信息。

2、從父界面進入子界面,需要抬升子元素的海拔高度,并展開至整個屏幕,反之亦然。

3、多個相似元素,動畫的設計要有先后次序,起到引導視線的作用。

4、相似元素的運動,要符合統一的規律。

5、通過圖標的變化和一些細節來達到令人愉悅的效果。

四、色彩規范

1、顏色不易過多。選取一種主色、一種輔助色(非必需),在次基礎上進行明度、飽和度變化,構成配色方案。

2、Appbar背景使用主色,狀態欄背景使用深一級的主色或者20%透明度的純黑。

3、小面積需要高亮顯示的地方使用輔助色。

4、其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(包括圖標和分割線)

五、圖標

1、桌面圖標尺寸是48dp*48dp。桌面圖標建議模仿顯示中的折紙效果,通過扁平色彩表現空間和光影。

2、小圖標尺寸是24dp*24dp。圖形限制在中央20dp*20dp區域內。小圖標同樣有刪格系統。線條、空隙盡量保持在2dp寬,圓角半徑2dp。特殊情況相應調整。

3、優先使用material design默認圖標。設計小圖標時,使用簡練的圖形來表達,圖形不要帶空間感。

六、圖標

1、描述具體食物,優先使用照片。然后可以考慮使用插畫。

2、圖片上的文字,需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%~40%之間,淺色的遮罩在40%~60%之間。

3、Android L可以從圖片中提取主色,運用在其他UI元素上。

七、文字

1、英文

英文字體使用Roboto

Roboto有6種字重:Thin、Light、Regular、Medium、Bold和Black

2、中文

中文字體使用Noto

Noto有7種字重:Thin、Light、DemiLight、Regular、Medium、Bold和Black

常用字號:

1、12sp小字提示

2、14sp(桌面端13sp)正文/按鈕文字

3、16sp(桌面端15sp)小標題

4、20sp Appbar文字

5、24sp大標題

6、34sp/45sp/56sp/112sp超大號文字

7、長篇幅正文,每行建議60字符(英文)左右。短文本,建議每行30字符(英文)左右。

八、布局

所有可操作元素最小點擊區域尺寸48dp*48dp。

刪格系統的最小單位是8dp,一切距離、尺寸都應該是8dp的整倍數。

頂部狀態欄高度:24dp

Appbar最小高度:56dp

底部導航欄高度:48dp

用戶頭像尺寸:64*64dp/40*40dp

小圖標點擊區域:48*48dp

側邊抽屜到屏幕右邊的距離:56dp

卡片間距:8dp

分割線上下留白:8dp

大多元素的留白距離:16dp

屏幕左右對齊基線:16dp

文字左側對齊基線:72dp

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/536550.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/536550.shtml
英文地址,請注明出處:http://en.pswp.cn/news/536550.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Mariadb修改root密碼

2019獨角獸企業重金招聘Python工程師標準>>> 默認情況下,新安裝的 mariadb 的密碼為空,在shell終端直接輸入 mysql 就能登陸數據庫。 如果是剛安裝第一次使用,請使用 mysql_secure_installation 命令初始化。 # mysql_secure_inst…

【譯】Googler如何解決編程問題

本文是Google工程師Steve Merritt的一篇博客,向大家介紹他自己和身邊的同事解決編程問題的方法。 原文地址:blog.usejournal.com/how-a-googl… 在本文中,我將完整的向你介紹一種解決編程問題的策略,這個策略是我在日常工作中一直…

自學html和css,學習HTML和CSS的5大理由

描述人們學習HTML和CSS最常見的原因是開始從事web開發。但并不是只有web開發人員才要學習HTML和CSS的核心技術。作為一個網絡用戶,你需要你掌握的相關技術很多,但下面有5個你無法拒絕學習HTML和CSS的理由。1、輕松制作卡通動畫Web上的動畫很多年來都是使…

html 左側 樹形菜單,vue左側菜單,樹形圖遞歸實現代碼

學習vue有一段時間了,最近使用vue做了一套后臺管理系統,左側菜單需求是這樣的,可以多層,數據由后臺傳遞。也因為自己對官方文檔的不熟悉使得自己踩了不少坑,今天寫出來和大家一起分享。效果圖如下所示:先說…

Node.js的基本使用3

koa(擴展知識, 建議學習) koa是express超集(進階版)前后端分離和耦合概念介紹 面向過程 -》 面向對象 --》 面向服務數據庫 Node.js mongodb(bson json的超集) 分類: 關系型數據庫: MySql非關系型數據庫: MongoDB Mong…

Flutter的滾動以及sliver約束

Flutter框架中有很多滾動的Widget,ListView、GridView等,這些Widget都是使用Scrollable配合Viewport來完成滾動的。我們來分析一下這個滾動效果是怎樣實現的。 Scrollable在滾動中的作用 Scrollable繼承自StatefulWidget,我們看一下他的State的build方法…

頁面增加html,為靜態頁面HTML增加session功能

一般來說,只有服務器端的CGI程序(ASP、PHP、JSP)具有session會話功能,用來保存用戶在網站期間(會話)的活動數據信息,而對于數量眾多的靜態頁面(HTML)來說,只能使用客戶端的cookies來保存臨時活動數據,但對于cookies的操…

關于Istio 1.1,你所不知道的細節

本文整理自Istio社區成員Star在 Cloud Native Days China 2019 北京站的現場分享 第1則 主角 Istio Istio作為service mesh領域的明星項目,從2016年發布到現在熱度不斷攀升。 Istio & Envoy Github Star Growth 官網中Istio1.1的架構圖除了數據面的Envoy和控制面…

html調用父頁面的函數,js調用父框架函數與彈窗調用父頁面函數的方法

調用父級中的 aaa的函數子頁面中:οnclick"window.parent.frames.aaa()"父頁面中:function aaa(){alert(‘bbbbb’);}----------------------------------------------frame框架里的頁面要改其他同框架下的頁面或父框架的頁面就用parentwindow.opener引用的是window.…

讀卡距離和信號強度兩方面來考慮

選擇物聯宇手持終端機的時候,你可以參考以下幾個原則:選擇行業需要應用功能,能有效控制好預算。屏幕界面需要高清晰的,選用分辨率較高的能更好的支持展現。按照項目所需求的來分析,需要從讀卡距離和信號強度兩方面來考…

html script 放置位置,script標簽應該放在HTML哪里,總結分享

幾年前,有經驗的程序員總是讓我們將很明顯,現在瀏覽器有了更加酷的兼容方式,這篇文章,俺將跟大家一起來學習script標簽的async和defer新特性,探討script應該放在哪里更好。頁面加載方式在我們討論當瀏覽器加載帶有獲取…

2021吉林高考26日幾點可以查詢成績,2021吉林高考成績查分時間及入口

2021吉林高考成績查分時間及入口2021吉林高考成績查分時間及入口,有一些高考生真的很積極,考完試當天就將答案給對好了,考試嘛,站在旁觀者的角度來看總是有人歡喜有人憂。估出來分數不咋地的,整個六月就毀了。2021吉林…

easyui,layui和 vuejs 有什么區別

2019獨角獸企業重金招聘Python工程師標準>>> easyui是功能強大但是有很多的組件使用功能是十分強大的,而layui是2016年才出來的前端框架,現在才更新到2.x版本還有很多的功能沒有完善,也還存在一些不穩定的情況,但是lay…

廣東2021高考成績位次查詢,廣東一分一段表查詢2021-廣東省2021年一分一段統計表...

廣東省高考一分一段表是同學們在填報高考志愿時的重要參考資料之一。根據一分一段表,大家不僅可以清楚地了解自己的高考成績在全省的排名,還可以結合心儀的大學近3年在廣東省的錄取位次變化,判斷出自己被錄取的概率大概是多少。根據考試院公布…

bootstrap-select動態生成數據,設置默認選項(默認值)

bootstrap-select設置選中的屬性是selected"selected",只要找出哪一項要設置為默認選項,再設置其屬性selected"selected"即可,親測有效。代碼如下: var currentId $(_this).attr(data_id);//目標id&#xff…

無法顯示驗證碼去掉html,如何去除驗證碼-模版風格-易通免費企業網站系統 - Powered by CmsEasy...

去除前臺用戶登錄驗證碼1.修改lib/default/user_act.php 注釋掉或刪除55-58行修改為//if(!session::get(verify) || front::post(verify)<>session::get(verify)) {//front::flash(驗證碼錯誤&#xff01;);//return;//} 復制代碼2.修改template/default/user/login.html…

webpack4打包工具

什么是webpack webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時&#xff0c;它會遞歸地構建一個依賴關系圖(dependency graph)&#xff0c;其中包含應用程序需要的每個模塊&#xff0c;然后將所有這些模塊打包成一個或多個…

通過計算機網絡進行的商務活動包括,電子商務練習題及答案

“電子商務”練習題一、填空題1&#xff0e;EDI系統構成三要素包括數據標準化、(EDI軟件及硬件)和(通信網絡)。2.B2C電子商務模式主要有&#xff1a;門戶網站、(電子零售商)、(內容提供商)、(交易經紀人)和社區服務商。3. 影響消費者網上購物的因素&#xff1a;商品特性、(商品…

PAKDD 2019 都有哪些重要看點?看這篇文章就夠了!...

雷鋒網 AI 科技評論按&#xff1a;亞太地區知識發現與數據挖掘國際會議&#xff08;Pacific Asia Knowledge Discovery and Data Mining&#xff0c;PAKDD&#xff09;是亞太地區數據挖掘領域的頂級國際會議&#xff0c;旨在為數據挖掘相關領域的研究者和從業者提供一個可自由 …

「javaScript-每三位插入一個逗號實現方式」

一道火了很久的面試題&#xff0c;//將以下數字從小數點前開始每三位數加一個逗號var num 1234567890.12345;復制代碼相信大家寫了這么久的前端代碼&#xff0c;不論是培訓也好&#xff0c;面試也好&#xff0c;這種題出現的頻率挺高的&#xff0c;網上方法很多&#xff0c;但…