您需要 登录 才可以下载或查看，没有账号？注册
x
本帖最后由 Jack- 于 2022-3-20 13:18 编辑
邓杰（Jack）：暗色的设计我们需要注意哪些问题呢，下面文章在配色、文字等细节方面做了一定阐述，希望能对大家有一定帮助。
做为一个小设计师关注《庞门正道》公众号很长时间了，不仅平时能学到很多大咖经验分享，还不时会看到很棒的设计书籍。最近买了一本郗鉴老师新书，感觉很给力，里面内容虽然讲的是平面ui但是设计理念也同样适合于我们游戏ui呢。
这边我们也可以尝试用这些设计理念运用到工作和个人练习中，提取部分书籍内容和后面案例结合，方便大家加深印象。
引文： 暗色主题是什么？ 在我的新书《UI全书》中，我和大家介绍了Material Design。最近，Material Design中新增了关于暗色主题的设计规范：暗色主题（Dark theme）是指在UI界面中使用大面积的深色来构成界面的一种设计，它是产品默认主题的一种补充。
首先，暗色模式用深色视觉元素来构成界面的UI
使用深灰色进行设计 在设计暗色主题的时候，我们应该使用深灰色来进行界面设计。黑色由于太过于深邃，无法让用户感知当前界面的高度和空间感，而不同级别的灰色就可以暗示给用户这些信息。
使用强调色彩突出组件 在暗色主题下，我们可以使用少量的强调色彩来凸显一部分功能或者组件，大部分的界面全部为深灰色，所以这些被凸显的部分会更加突出。
节约能源 在很多带有OLED屏幕的设备中，暗色主题可以通过减少亮色的使用来有效地延长电池寿命。试验表明，使用暗色主题可以让设备的续航时间变长。
增强可访问性 暗色主题对于色弱及有其他视觉障碍的用户非常友好，可以提升他们使用产品的体验。
规则
对比度： 深色背景和100％白色正文文本的对比度达15.8：1以上。
信息层级： 组件和元素通过较深和较浅的灰色来表达信息层级。
饱和度： 界面中主要色彩与文字信息的对比度应该高于4.5：1（根据Web可用性指南的标准）。
设计少量强调色彩： 我们在设计时会使用大量深灰色来设计背景，也会用少量强调色彩来表示更重要的信息，与背景产生对比。
关于信息层级 暗色主题的UI界面主要使用深灰色的背景和少量的强调色彩，它们不刺眼但仍然保持着很强的可用性。用户使用起来不会有任何的不舒适。界面按信息层级的重要性依次让用户注意到以下四部分：主强调色、次强调色、较亮的灰色前景、较暗的灰色背景。
1 背景（高度：0dp） 2 表面（高度：1dp） 3 主强调色； 4 次强调色； 5 在背景上的元素； 6 在层级上的文字色； 7 主强调色上的文字色； 8 次强调色上的图标色
触发暗色主题的开关 我们可以设计控件来让用户打开（或关闭）暗色主题，这个控件可以使用很明显的方式来进行突出强调：比如在明显的位置设计开关图标来让用户切换；也可以使用不太明显的方式：在菜单或者设置界面中放置开关。
形式1：顶部应用栏中的暗色主题开关
形式2：在气泡中切换暗色主题
形式3：在设置界面中切换暗色主题
海拔高度 在暗色主题中的组件和在默认主题中的组件可以使用相同的海拔和阴影大小，然而在暗色主题下它们的色彩会根据信息层级的排序而改变，这一点是通过明度不同的灰色来表现的：海拔越高则越亮（暗示接近光源）。我们在这里通过给深灰色上叠加一层不同透明度的白色来改变亮度（不是直接做灰色的形状）。
元素的海拔越高，颜色就越亮
通过使用半透明白色覆盖层来暗示海拔：1.形状 2.带有透明度的白色叠加层
默认主题使用阴影来表示海拔，而暗色主题则通过表面颜色来表示海拔
不同的海拔高度与白色层不同的透明度之间的换算关系（透明度从0％到16％）
A.高度为1dp、5％白色叠加的卡片式设计； B.高度为6dp的FAB按钮，使用了次要强调的颜色 C.高度为8dp的底部应用程序栏，12％白色叠加
错误1：辅助色的配色所表示的海拔不应该过高 错误2：阴影的颜色应该暗于界面元素的颜色
可访问性和对比度 暗色主题表面必须足够暗才可以显示白色的文本。为保证信息能够被良好的阅读，文本和背景之间的对比度应不少于15.8：1。也就是说，我们不可以用纯白色来设计所有的文本信息，而要根据背景色和文本的对比度来调整。
如果需要创建带有品牌色的暗色界面，请在推荐的暗色主题默认颜色（＃121212）上叠加带有不透明度的主要品牌色。这个案例中，界面深色＃1F1B24是暗色主题默认颜色＃121212和8％的品牌紫色叠加的结果。
科普一下，在显示纯黑色的时候，屏幕需要消耗更高的电量。为了节能，某些设备（例如带有OLED屏幕的可穿戴设备）可以关闭所有显示黑色的像素以节省电池电量。
使用调色板中较少饱和的紫色可以提高在深色背景中的易读性并减少视觉上的突兀.
辅助色饱和度过高，和背景不融合 ……
来，接下来一起干起来！！
以下配图均为高清大图，可以保存和放大仔细查看。
案例1
看完上面的干货也许有些新人设计朋友会觉得很深奥或者是在实际练习中不知道如何下手，这边分享一下我们个人练习的一些过程稿，相互交流。
暗色系列最大的好处就是很容易突出信息内容和营造气氛，所以不少游戏的设计通常会选择暗色系，既可以突出内容明确主题，最关键的还是可以省电，这可延长了不少游戏体验时间哦。
这边我们可以很明确看到设计师在关键的按钮部分给了很明显面积的亮色，方便快速找到交互按钮。
同样暗色题材，下面这个赛车系列很稀饭，配色和纹理，都很到位。
我个人认为记住下面2个最简单的对比方法就肯定能做好暗色系列作品 1、色彩、饱和度对比
2、明度对比
我们在做一些个人练习时候注意需要突出的主体，信息和交互按钮，尝试用下面的方面就可以做出不错的作品。
作者：小米 作者：UKI 作者：王小二
作者：航航 作者：溜溜 作者：鱼 作者：托尔
很多朋友也许觉得，还是太难，能不能给出一些改前，改后的细节对比图呢？
没问题啊~ 案例2 这是我们做的同一交互稿的二个方案，一个为深色，一个为亮色表现，示范发下暗色系更容易突出气氛，而且我们在做暗色稿时候故意把人物服装的层次和高矮做了变化，突出女性角色，层次和视觉冲击力得到了加强。
下面这个游戏界面也是同样设计需求，之前的气氛和功能非常不明显，修改后我们发现功能非常清晰，角色的辨识度和气氛也提高了很多。
案例3 好了，通过上面案例我们来分析下这位朋友的练习存在什么问题？ 如果是您会怎么修改呢？
在认真学习完上面理念知识后同学有了以下修改，有很大进步哦，但是还不够。
个人认为武器才是该界面最重要的主角，其它按钮和信息都是围绕他来的配角，于是我做了一下修改。
在借助一些素材和绘制后，我修改了层次和表现力。
就在快要下班的时候，老大又来了微信，想到每月的银行贷款，花呗，信用卡，第二句话就是没敢发出去，不知道还有没有朋友也是每天和我一样活的如此卑微……
拿到需求后，吓了一跳。
长 这 样
大家留言说说怎么整客户才满意？下期我来改完分享过程。
谢谢，完毕！
公众号素材每周更新，需要可自取（复制链接粘贴使用） 提取码：0uht
游戏UI界面、图标、VIP班随到随学 夏季班7中旬正式开课，可报名 秋季班10月份左右开课，可预定 课程咨询微信 jackartstudio 更多免费教程和素材，公众号菜单栏可查阅下载
| 
