心若磐石|即刻7.0：如何设计深色模式？( 三 )
2）文字
即刻的文字色主要有三个层级 ， 适配深色模式时由于内容型产品文字占比很大 ， 大量纯白色文字会使界面对比度过大 ， 浏览很费力 ， 所以均降低不同程度的透明度的来还原三个层级 ， 并保证主要内容的色彩对比率在7:1以上 。
对于签名文字等辅助型信息 ， 个人认为可以不必强制7:1 ， 或4.5:1 ， 否则文字间的主次关系会变得很弱 。
3）图标
规范中建议深色模式下将线型图标转为面型来帮助用户建立体量感 ， 但为了更倾向用户习惯 ， 高频使用的功能图标依旧保持与浅色模式一致 ， 所以在这里并没有将线型图标重新绘制面型样式 。
即刻的图标色与文字色使用的是一套颜色 ， 所以在深色模式中也顺应使用了这套颜色 ， 白色图标保持不变 。
对于彩色图标 ， 采取适当降低饱和度和明度的方法与暗色背景更融合不突兀 。
4）图片
深色模式下的对比下 ， 饱和度较高的图片会显得格外突出 ， 就像灯泡一样明亮晃眼 ， 我们无法控制用户会发什么样色彩的图片 ， 所以统一做处理 ， 在图片上叠加一层10%不透明度的全局背景色来缓和这种情况 。
（首页两模式对比）
（WCAG色彩对比率测试）
5）其他元素
个性化图片背景：
在即刻的个人主页、圈子主页顶部都会出现可编辑的图片背景满足用户个性化需求 ， 默认状态为头像放大模糊出现毛玻璃的效果 。 经观察发现在背景图片上部会叠加一层带有透明度渐变的深色满足背景层上信息的识别性 ， 这样的设计手法发现只需按深色模式规范适配文字、标签和头像就能和整体界面较好融合 ， 所以背景图片不做处理 。
加载：
即刻的加载动画其实直接用在深色模式也可以 ， 不会突兀 ， 但在视觉上感知比较弱 ， 所以我将加载动画颜色以背景色为基础提亮来提升用户对界面状态的感知 。
默认图：
【心若磐石|即刻7.0：如何设计深色模式？】由于只会在网络不佳时出现 ， 所以默认图是容易被忽略的一个点 ， 但不作处理在深色模式下就会显得非常突兀 ， 浅色模式即刻选择了背景色作为默认图 ， 深色模式也一样处理 。
空状态：
推荐阅读
- 心若磐石|3D建模提升机器人空间感知能力
- 心若磐石|最新AI工具首次实现了“鸟脸识别”，准确率达90%
- 酿酒|即刻抓捕：落网！云南省51岁“女魔头”被逮捕！
- 心若磐石|网友投诉：三星电子售后无法确定手机故障原因
- 心若磐石|本国企业也要打击？特朗普：若国会不行，我将亲自出手限制美科技巨头
- 爱情@不要对一个人太好
- 磐石之心|罗永浩凭什么成为品牌方及粉丝的“香饽饽”？
- 磐石之心罗永浩凭什么成为品牌方及粉丝的“香饽饽”？
- 心若磐石 从苹果这些专利来看苹果AR眼镜功能和技术路径
- 全国党媒信息公共平台|房产过户45分钟，抵押登记20分钟！烟台开发区首创不动产登记全事项即刻办