心若磐石|即刻7.0:如何设计深色模式?( 三 )


心若磐石|即刻7.0:如何设计深色模式?2)文字
即刻的文字色主要有三个层级 , 适配深色模式时由于内容型产品文字占比很大 , 大量纯白色文字会使界面对比度过大 , 浏览很费力 , 所以均降低不同程度的透明度的来还原三个层级 , 并保证主要内容的色彩对比率在7:1以上 。
对于签名文字等辅助型信息 , 个人认为可以不必强制7:1 , 或4.5:1 , 否则文字间的主次关系会变得很弱 。
心若磐石|即刻7.0:如何设计深色模式?3)图标
规范中建议深色模式下将线型图标转为面型来帮助用户建立体量感 , 但为了更倾向用户习惯 , 高频使用的功能图标依旧保持与浅色模式一致 , 所以在这里并没有将线型图标重新绘制面型样式 。
即刻的图标色与文字色使用的是一套颜色 , 所以在深色模式中也顺应使用了这套颜色 , 白色图标保持不变 。
对于彩色图标 , 采取适当降低饱和度和明度的方法与暗色背景更融合不突兀 。
心若磐石|即刻7.0:如何设计深色模式?4)图片
深色模式下的对比下 , 饱和度较高的图片会显得格外突出 , 就像灯泡一样明亮晃眼 , 我们无法控制用户会发什么样色彩的图片 , 所以统一做处理 , 在图片上叠加一层10%不透明度的全局背景色来缓和这种情况 。
心若磐石|即刻7.0:如何设计深色模式?(首页两模式对比)
心若磐石|即刻7.0:如何设计深色模式?(WCAG色彩对比率测试)
心若磐石|即刻7.0:如何设计深色模式?5)其他元素
个性化图片背景:
在即刻的个人主页、圈子主页顶部都会出现可编辑的图片背景满足用户个性化需求 , 默认状态为头像放大模糊出现毛玻璃的效果 。 经观察发现在背景图片上部会叠加一层带有透明度渐变的深色满足背景层上信息的识别性 , 这样的设计手法发现只需按深色模式规范适配文字、标签和头像就能和整体界面较好融合 , 所以背景图片不做处理 。
心若磐石|即刻7.0:如何设计深色模式?加载:
即刻的加载动画其实直接用在深色模式也可以 , 不会突兀 , 但在视觉上感知比较弱 , 所以我将加载动画颜色以背景色为基础提亮来提升用户对界面状态的感知 。
心若磐石|即刻7.0:如何设计深色模式?默认图:
【心若磐石|即刻7.0:如何设计深色模式?】由于只会在网络不佳时出现 , 所以默认图是容易被忽略的一个点 , 但不作处理在深色模式下就会显得非常突兀 , 浅色模式即刻选择了背景色作为默认图 , 深色模式也一样处理 。
心若磐石|即刻7.0:如何设计深色模式?空状态: