追求卓越一諾千金

藍藍設計_--镇元大仙的诨号,2011年成立|__蘑菇街首页2013,主創清華團隊_爱玩毛线球,專注軟件和互聯網ui設計開發_-_中国电信iphone4。擅長企業信息化管理-_唯爱侦察、監控_进进孕妇装、大數據軟件UIUE谘詢和設計開發服務_|_178国际娱乐。立足UI||-斗战神宠物本源技怎么升级,好好學習___038彩票注册,天天進步||-云顶国际怎么提现不了!


Material Design暗色主題設計指南

2019-7-28 分享達人 手機及小程序界麵設計文章及欣賞



如果您想訂閱本博客內容_||铁通游戏,每天自動發到您的郵箱中-__青海卫视 湖南卫视, 請點這裏

本文是我學習Material Design設計規範的學習筆記和個人理解-迟重瑞简历,希望對大家設計暗色主題有所幫助-蛋神奇踪第1部全集。

undefined


暗色主題是什麼-合肥市工商局年检?

最近|-黄山奇石图片及名称,Material Design中新增了關於暗色主題的設計規範_|-湖北专科学校排名:暗色主題(Dark theme)是指在UI界麵中使用大麵積的深色來構成界麵的一種設計__,它是產品默認主題的一種補充-|234彩票正规平台么。很多朋友可能認為暗色主題就是現在新聞客戶端的“夜間模式”|106福利版ios版v2,這個說法其實並不正確_-试算平衡表。因為暗色主題是可以由用戶自己選擇是否開啟的|-_038可靠吗,它的使用場景並不局限於夜晚_|-57bt龙发布。很多用戶偏愛暗色模式是因為暗色更“酷”|_光明牛奶网上订购。比如前段時間蘋果電腦增加了類似的“黑暗模式”(Dark Mode)的設計-_|金范金素恩小说,大受用戶的喜愛-荆门运动人。用戶沉迷使用暗色主題_-|毕业生登记表班组鉴定,而不是以前灰色的默認設計-|_借一个身份证号。暗色主題不但顏值高|-256买彩票安卓版2016,而且可以在保持色彩對比度的同時降低設備屏幕的亮度--中兴彩票首页,還可以根據當前照明條件自動調節亮度_云鼎彩票app,這有助於改善視覺疲勞__|2号彩票平台。除此之外||java手机qq软件下载,暗色主題還可以節省設備的電量-|黑龙江移动网上营业厅详单查询,可謂是一舉多得__22249平特肖。那麼__北华信集团董事长,暗色模式都有什麼樣的規範呢-|-168彩票官方?

 

undefined 

首先|台湾最新消息,暗色模式用深色視覺元素來構成界麵的UI

 

undefined 

使用深灰色進行設計

在設計暗色主題的時候_|_陈焕新,我們應該使用深灰色來進行界麵設計-|-ab汽车网。黑色由於太過於深邃-德国thomas锅具,無法讓用戶感知當前界麵的高度和空間感-|168彩票注册送彩金,而不同級別的灰色就可以暗示給用戶這些信息|-堵车电影。

 

 undefined

使用強調色彩突出組件

在暗色主題下|-玛雅wang 发信到,我們可以使用少量的強調色彩來凸顯一部分功能或者組件|2013四川地震,大部分的界麵全部為深灰色--6 67c ai,所以這些被凸顯的部分會更加突出|--326游戏中心注册。

 

undefined 

節約能源

在很多帶有OLED屏幕的設備中__-炫舞双开工具下载,暗色主題可以通過減少亮色的使用來有效地延長電池壽命|-|花瑜。試驗表明_--长虹l128,使用暗色主題可以讓設備的續航時間變長--团体赛双人滑失误。

 

undefined 

增強可訪問性

暗色主題對於色弱及有其他視覺障礙的用戶非常友好|-中央政治局常委人数,可以提升他們使用產品的體驗|_-定陶教育信息网。

 

規則

對比度_-168现场开奖下载:深色背景和100%白色正文文本的對比度達15.8|约彩彩票注册不了:1以上-|雷暴套装。

信息層級_||尼采s3:組件和元素通過較深和較淺的灰色來表達信息層級_魔法龙虾盒。

飽和度|_康熙来了20111201:界麵中主要色彩與文字信息的對比度應該高於4.5||-丁丁地图上海交通查询:1(根據Web可用性指南的標準)-__3cp彩票平台。

設計少量強調色彩__取暖歌词:我們在設計時會使用大量深灰色來設計背景||_永盛娱乐是什么平台,也會用少量強調色彩來表示更重要的信息__广州铁通无线固话,與背景產生對比_-_如何在淘宝网开店。

 

undefined


關於信息層級

暗色主題的UI界麵主要使用深灰色的背景和少量的強調色彩_|-阿訇,它們不刺眼但仍然保持著很強的可用性_||诺基亚n79论坛。用戶使用起來不會有任何的不舒適|-敬一丹公开质疑打虎。界麵按信息層級的重要性依次讓用戶注意到以下四部分_-苏州火车站咨询电话:主強調色-|-长垣车祸、次強調色_--平谷聊天室、較亮的灰色前景|_33彩票官方网站、較暗的灰色背景||众发彩票官网首页。


undefined

 1 背景(高度|-|广东电大成绩查询:0dp)|||众赢彩票可靠吗;2 表麵(高度__丁丁网 上海:1dp)_-2019世界杯竞彩app;3 主強調色-_|2019年白姐另版先锋诗; 4次強調色|-22选5河南走势图百度;5 在背景上的元素--|31选7大星彩票走势图; 6 在層級上的文字色_-云发购彩票是真的吗; 7 主強調色上的文字色||梅鸿; 8 次強調色上的圖標色

 

undefined


觸發暗色主題的開關

我們可以設計控件來讓用戶打開(或關閉)暗色主題_|芦竹根,這個控件可以使用很明顯的方式來進行突出強調_-|360彩票杀号定胆走势图:比如在明顯的位置設計開關圖標來讓用戶切換-_-王建瑞;也可以使用不太明顯的方式__|村村通卫星:在菜單或者設置界麵中放置開關_-_银河时时彩。


undefined

 形式1--|永盛app犯法吗:頂部應用欄中的暗色主題開關

 

undefined

 形式2-|-臻怎么读:在氣泡中切換暗色主題

 

undefined

 形式3中奖身份证号码:在設置界麵中切換暗色主題

 

暗色的屬性

暗色主題使用深灰色而非黑色作為組件的主要設計配色-_唐山针灸减肥。深灰色表麵可以表現出更廣泛的高度和深度-|18号彩票225599com,因為我們仍然可以在深灰色之上設計更重的投影||钛雷。除此之外|-丰田路霸汽车报价,深灰色的設計還可以減少視覺疲勞_-手机四核处理器,因為深灰色表麵上的淺色文字與黑色表麵上的淺色文字相比對比度更低-|亿贝平台手机客户端,對眼睛刺激較小--至尊传奇手游。


undefined

 推薦的深色主題默認顏色為#121212

 

海拔高度

在暗色主題中的組件和在默認主題中的組件可以使用相同的海拔和陰影大小__|拳王97电影,然而在暗色主題下它們的色彩會根據信息層級的排序而改變_|08彩票平台,這一點是通過明度不同的灰色來表現的-_-钳子先生的魔法龙虾盒:海拔越高則越亮(暗示接近光源)|-闲鱼网二手网官网。我們在這裏通過給深灰色上疊加一層不同透明度的白色來改變亮度(不是直接做灰色的形狀)--|锦绣骄子。


 元素的海拔越高|_陈丽华 前夫,顏色就越亮


undefined 

通過使用半透明白色覆蓋層來暗示海拔_--goodbyemissripley:1.形狀 2.帶有透明度的白色疊加層

 

undefined 

默認主題使用陰影來表示海拔_|-踏西男孩,而暗色主題則通過表麵顏色來表示海拔


undefined 

不同的海拔高度與白色層不同的透明度之間的換算關係(透明度從0%到16%)

 

undefined 

A. 高度為1dp-||易旺彩票可以提现嘛、5%白色疊加的卡片式設計-西雅图邀请赛; B. 高度為6dp的FAB按鈕__|军用棉衣棉裤,使用了次要強調的顏色 C.高度為8dp的底部應用程序欄-|345彩票开奖,12%白色疊加


undefined 

錯誤1--隋唐大运河开凿顺序:輔助色的配色所表示的海拔不應該過高

錯誤2|__本亮大叔简介:陰影的顏色應該暗於界麵元素的顏色

 

可訪問性和對比度

暗色主題表麵必須足夠暗才可以顯示白色的文本_-永盛国际彩票。為保證信息能夠被良好的閱讀--_拜毯,文本和背景之間的對比度應不少於15.8-再见美丽女孩:1_-|闺友魅力时尚内衣。也就是說_09被骗20w,我們不可以用純白色來設計所有的文本信息|王晶的女儿,而要根據背景色和文本的對比度來調整_|韩德馨。

 

如果需要創建帶有品牌色的暗色界麵_-云顶彩票是真的吗,請在推薦的暗色主題默認顏色(#121212)上疊加帶有不透明度的主要品牌色--青年宫电影院影讯。這個案例中__-节能超市,界麵深色#1F1B24是暗色主題默認顏色#121212和8%的品牌紫色疊加的結果|-_花花公子成人网。

 

 

 

科普一下__7777小游戏,在顯示純黑色的時候|_北京466鼻腔科医院,屏幕需要消耗更高的電量__7k 7k小游戏。為了節能--中环放电影院,某些設備(例如帶有OLED屏幕的可穿戴設備)可以關閉所有顯示黑色的像素以節省電池電量|--买什么车性价比高。

 

 

使用調色板中較少飽和的紫色可以提高在深色背景中的易讀性並減少視覺上的突兀

 

輔助色飽和度過高|-盐城一中,和背景不融合

 

主體色

主體色是應用裏最常顯示的顏色-李天一受害老师照片。Material Design暗色主題使用原色的200色調(在所有背景和層級上均需通過WCAG的AA標準_-网游快车金牌网吧下载:文本和背景至少對比度達到4.5-||新台湾星光大道:1)-|_儿童风景图画。

 

 

暗色主題中的主體色示例_--苜蓿园二手房:1.主要顏色 2.色調變體

 

主體色變體

在我們設計界麵時_||黄梁txt,某些淺色界麵上的組件需要使用主體色的變體|苏州园林卡景点。

 

這個暗色主題使用了主體色(紫色200)和主體色的變體(紫色700)

 

輔助色

大多數的時候我們都無法僅僅依靠主體色這一種顏色撐起畫麵|360怎么设置主页,我們還需要輔助色_|郑州基础教育教研网。輔助色一般來說是主體色的臨近色或互補色-|永盛彩票首页。在暗色主題中-阿玛拉王国锻造材料,輔助色可以用來顯示用於突出的部分內容_-邮政上班时间。當然|_-波特卡斯d提娜,輔助色同樣必須滿足背景與文本4.5||106官网彩票不能提现:1的對比度要求_洪秀全公园。

 

暗色主題中的輔助色調色板1.輔助色指示符2.色調變體

 

 

這個界麵中使用了主體色和輔助色變體

強調色

在暗色的主題中_-长春艺术实验中学,暗色占據了UI的大部分空間|-|csol腐化暴君。而在暗色之上我們也會運用強調色_长春房地产报房源。強調色通常是淺色或明亮的色彩|-_108娱乐被骗,這樣的顏色能讓我們希望突出的元素在暗色中脫穎而出_-_湖南特岗计划信息管理系统。

 

 

為了提升靈活性和可用性__盈盈彩好吗,建議在暗色主題中使用較淺的色調(200-50)__美罗城 种子,而不是默認主題顏色(飽和色調範圍為900-500)-罕穆尔成分。1.默認主題原色指示燈2.暗色主題原色

 

選擇色彩時要考慮飽和度對界麵閱讀的影響

 

 

暗色主題下頂部應用欄使用的顏色不可以是主體色

 

品牌色

為了保持品牌的識別性-|pcp套件,品牌顏色可以在暗色主題中使用|-韩版恶作剧之吻收视率,但應當僅限於一個或兩個品牌元素|_伯西来,例如Logo或品牌按鈕|电视剧热爱。界麵中的其他部分如文字和次要元素仍然可以使用飽和度低的顏色來設計__库粉乐园。

 

 

1. 暗色主題色2.品牌顏色

飽和度很高的品牌色應用於FAB(2)_|西凤酒1952价格表,而不飽和的暗主題色應用於文本(1)

 

暗色主題色板

我們設計一個產品的時候需要完成一套專屬的色板_-私募内线,它包括_|青岛万达电影院影讯:顏色(主體色|||至尊nono、輔助色||联想a60游戏、主體色變體-|yyy863 com、輔助色變體)_|248彩票平台下线、表麵(背景和組件)||_苏州宽带转让、狀態(例如錯誤狀態) 內容(排版和圖像)等的色彩選擇-|金良顺。

 

暗色主題的色板實例


 

1 Material Design默認主題色板 2 Material Design暗色主題色板


 

錯誤顏色

錯誤顏色在產品中用來指示錯誤狀態_-|陇南市人民政府网,當看到這個色彩|-许晋龙,用戶就知道有些事情出錯了|-注册就送88的彩票软件。暗色主題的默認錯誤顏色為#CF6679_|038彩票网站。

 

這種顏色是通過默認的錯誤顏色(#B00020)並使用40%白色疊加來創建的-_302sh,這種顏色通過了AA級對比度標準_|_罗莎月饼。


 


文本顏色

當淺色文本出現在深色背景上的時候時|_|开淘宝店流程,應使用以下不透明度-||15700牛蛙彩票开奖记:高度強調的文本(87%)--云顶娱乐斗地主可提现、中等強調的文本(60%)和禁用文本(38%)|马三家子。

 

 

高度強調的文本--中兴彩票准成不、中等強調的文本和禁用文本的顏色

 

狀態

通過使用疊加顏色來傳達組件或交互元素的狀態_--霸气行会名字。在暗色主題中--云顶至尊风水,狀態應使用與其默認主題相同的疊加值_|宋家王朝 喜多郎,並且可以調整它們以通過AA級對比度標準_乒乓球拍专卖店 优个网。


 

懸停|||锵锵三人行20140801、聚焦||改装车出售、按下和拖動狀態時組件的不同設計

 

使用什麼軟件設計-_|开封电视台主持人?

Material Design旨在為設計師設計一套可以應用在所有平台的設計語言_|圆点包包网。在目前的UI設計界較為通用的軟件都可以支持Material Design的設計---亿博国际娱乐,比如我們可以行業裏比較流行的Adobe XD|_青岛单独二胎新政策2014、Sketch||135天空彩票与你同行、Figma等UI軟件來設計界麵_|_cfve卡枪代码。Material Design提供了暗色主題的Sketch文件_|盈彩二维码,大家可以在支持Sketch格式的設計軟件如XD_|罗西尼手表5393、Sketch_阜南教育局、Figma中打開它--|龙玛显脉片。

 

 

使用Adobe XD打開暗色主題模板

 


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|_|脑出血圈,為期望卓越的國內外企業提供卓越的UI界麵設計_-dvon、BS界麵設計 -||全际通物流、 cs界麵設計 _-铁路安全管理条例、 ipad界麵設計 ||我想看一级片、 包裝設計 -|青岛教育人事处、 圖標定製 |_-舒兰七中、 用戶體驗 |11选5助手免费版、交互設計|_反间谍工作的主管单位是、網站建設 ||出入境检验检疫局待遇、平麵設計服務-||天天快递价格。


標簽: 暗色主題設計指南 « 用 PST 框架--阿旗绿源网,幫你係統掌握產品的信息引導設計方法 | 中後台界麵設計流程剖析»


訂閱Rss