相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

Material Design暗色主题设计指南

leyqw发布于:2019-7-11 23:23 |原作者: 郗鉴|
leyqw
天津市 河西区 平面设计师
发私信 + 关注
简介: 本文是我学习Material Design设计规范的学习笔记和个人理解,希望对大家设计暗色主题有所帮助。


饱和度:界面中主要色彩与文字信息的对比度应该高于4.5:1(根据Web可用性指南的标准)。

设计少量强调色彩:我们在设计时会使用大量深灰色来设计背景,也会用少量强调色彩来表示更重要的信息,与背景产生对比。

Material Design暗色主题设计指南 飞特网 设计理论

关于信息层级

暗色主题的UI界面主要使用深灰色的背景和少量的强调色彩,它们不刺眼但仍然保持着很强的可用性。用户使用起来不会有任何的不舒适。界面按信息层级的重要性依次让用户注意到以下四部分:主强调色、次强调色、较亮的灰色前景、较暗的灰色背景。

Material Design暗色主题设计指南 飞特网 设计理论

1 背景(高度:0dp);2 表面(高度:1dp);3 主强调色; 4次强调色;5 在背景上的元素; 6 在层级上的文字色; 7 主强调色上的文字色; 8 次强调色上的图标色

Material Design暗色主题设计指南 飞特网 设计理论

触发暗色主题的开关

我们可以设计控件来让用户打开(或关闭)暗色主题,这个控件可以使用很明显的方式来进行突出强调:比如在明显的位置设计开关图标来让用户切换;也可以使用不太明显的方式:在菜单或者设置界面中放置开关。

Material Design暗色主题设计指南 飞特网 设计理论

形式1:顶部应用栏中的暗色主题开关

Material Design暗色主题设计指南 飞特网 设计理论

形式2:在气泡中切换暗色主题

Material Design暗色主题设计指南 飞特网 设计理论

形式3:在设置界面中切换暗色主题

暗色的属性

暗色主题使用深灰色而非黑色作为组件的主要设计配色。深灰色表面可以表现出更广泛的高度和深度,因为我们仍然可以在深灰色之上设计更重的投影。除此之外,深灰色的设计还可以减少视觉疲劳,因为深灰色表面上的浅色文字与黑色表面上的浅色文字相比对比度更低,对眼睛刺激较小。

Material Design暗色主题设计指南 飞特网 设计理论

推荐的深色主题默认颜色为#121212

海拔高度

在暗色主题中的组件和在默认主题中的组件可以使用相同的海拔和阴影大小,然而在暗色主题下它们的色彩会根据信息层级的排序而改变,这一点是通过明度不同的灰色来表现的:海拔越高则越亮(暗示接近光源)。我们在这里通过给深灰色上叠加一层不同透明度的白色来改变亮度(不是直接做灰色的形状)。

Material Design暗色主题设计指南 飞特网 设计理论

16276

好评
29

差评

刚表态过的朋友 (16305 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

leyqw
天津市 河西区 平面设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计