深色和浅色都是产品呈现给用户的界面状态,最终目的是提高易用性

发布时间:2021-08-25 08:21:09 作者:admin 393
深色和浅色都是产品呈现给用户的界面状态,最终目的是提高易用性

【文摘】黑暗模式的设计要求的是颜色的变化,是用灰度画出背景的颜色,掌握文字和背景的强弱关系,适当降低图标的亮度和彩度。

一、选择黑暗模式的理由
1 .需求趋势
过去一年来,黑暗模式已适用于安卓10和iOS  13。 此外,苹果和谷歌也致力于将资源和注意力集中在黑暗模式上,黑暗模式备受用户关注。
2 .集中于内容
深色模式在弱光环境下容易读取,能够集中于眼前的屏幕。 昏暗的背景降低了内容周围元素的影响,使用户能够专注于内容,特别是在以照片和视频为中心的APP领域。
作为一个内容消费型APP,Netflix以深色背景为默认设计风格,深色设计可以让用户更加专注,延长使用时间。
3 .减轻刺激
相对于其他颜色,深色系的设计是晚上看着最舒服的。 晚上玩手机可能不用担心光线太刺眼,但黑暗模式对眼睛的保护作用不大。 只能说能减少对眼睛的刺激。
4 .提高续航距离
只有OLED画面在暗模式下省电。 OLED面板的各像素点可以分别发光,使用暗模式时,一些像素点熄灭,只有一些像素点亮,画面的一部分相当于处于休眠状态,因此更省电。
二、平台设计指南
1. iOS平台的暗模式设计
在黑暗模式下,苹果将重新审视UI风格和颜色在iOS中的意义,看看在iOS中设计黑暗模式带来的变化。
(1)语义化颜色(Semantic  Colors  ) )。
语义化色是指根据用途进行描述,而不是用某一定的RGB色值来描述颜色,从而使接口要素能够自动适合当前的外观模式。
淘宝团参考了苹果官方的匹配提案,通过颜色的语义化进行了匹配,大幅降低了匹配成本。 设计师根据不同UI元素的特性事先制定颜色语义化规则,技术在框架级通过“颜色自动反转”技术实现颜色反转。
)2)系统颜色
除了语义颜色外,苹果还提供了9种预定义的系统颜色。 在“亮”和“暗”模式中,这些颜色会动态变化,以支持整个系统的外观,并且还可以适应选定的界面样式。
)3)模糊和动态效果
在iOS13上,苹果引入了4种模糊效果和8种动态效果,自动适应了iOS界面的风格。 这在亮模式和暗模式中是不同的模糊效果。
苹果在iOS黑暗模式发布套件中引入了4种动态效果,3种为叠加效果,1种为隔离效果。
2 .安卓平台的暗模式设计
谷歌提供了广泛的文档支持,帮助设计师了解黑暗主题在安卓生态系统中的作用。
UI界面元素之间的投影最能清楚地识别用户界面的深度。 在设计暗主题时,组件将保留与亮主题相同的默认阴影组件。 Elevation越往上走,颜色就越浅。
)2)与无障碍性对比
暗的UI设计背景必须足够暗,才能显示白色文本。 请注意,设计师在背景和文字之间至少使用15.8:1的对比度。 由此,当以正文为开头时,可以确保wcag  (通过web内容的无障碍指南,容易访问web内容)的AA标准。
(3)颜色
黑暗模式需要避免饱和的颜色,以免引起眼睛疲劳。 相反,设计师必须集中精力使用不饱和的颜色来增加清晰度。 主色和子色的选择还取决于浅色和暗色的UI主题的考虑。
4 )文字的不透明度
在暗背景下设计亮文字时,强调文字的不透明度为87%; 一般提示文本的不透明度为60%; 无效字符的不透明度为38%。
三、黑暗模式的设计要点
苹果和谷歌都利用各自的设计原则,为黑暗模式的设计做准备。 在实际设计中,不仅需要注意这些基本原则,还需要注意设计暗模式的实用要点。
1 .背景灰度
在设计深色背景时,不要简单地将白色变为黑色,而是在背景中使用深色,以减轻眼睛的疲劳。
在灯光模式下,界面深度倾向于用细微的阴影传达,使用起来更自然。 但是,在大多数黑暗模式中,阴影的效果并不明显,通常以颜色浓淡来传达界面的层次关系。
要点:注意应用场景
在已知的黑暗模式中,背景设计从深到浅使用了三个灰度级,使页面更加清晰。
一级灰度的应用场景主要是大背景色,使用面积相对大的颜色最深; 二级灰度应用场景为可选背景色,根据可选件的数量设定使用面积,位置配置比较灵活; 三色调颜色最浅,使用面积最小,通常用于分割线。
2 .文字比较
白底黑字和黑底白字,给我们的眼睛体验是不同的。 设计不当的黑暗模式,由于强烈的对比度而经常变得刺眼,同时为了提高光的吸收,虹膜会张开,容易疲劳。
关键点:字符之间的比较
在黑暗模式下,文字的颜色通常是纯灰色,根据标题、正文、注释等位置的不同,会用浓淡不同的颜色进行比较。 上面的照片是wechat的暗模式,利用该方法来区分不同文字的内容,显示文字的层次关系。
另外,每个APP的定位不同,希望通过界面传达的信息也不同,因此设计思路不同需要注意。关键点:比较文本和背景
更新暗模式的APP主要分为两种,一种是工具型APP通信,如QQ、wechat、百度网盘等,这种APP通信追求信息的有效传递,设计时文字内容和背景色区别明显
上面的照片是百度网盘的深色模式,标题的文字和背景明显对比,可以看出保障了用户使用时的操作性和可读性。 这样的设计不需要用户过度沉浸阅读,只需要用户快速找到有用的信息,使其易于使用,这是工具型APP设计黑暗模式时必要的原则。
另一个是知乎、简书等内容型APP应用,这些APP应用注重用户沉浸式的阅读体验。 用户通常在某个界面停留较长时间观看内容,因此需要营造文字和背景对比度低、读书柔和的氛围。
在简书的深色模式下,文字与背景的对比关系被设计得很弱,整个界面呈灰色调。 这样的设计有助于在弱光环境下长时间阅读和浏览。
3 .图标/按钮
在黑暗模式下,请避免特别鲜艳的颜色。 亮度和彩度越高,则暗的背景的对比度越强,页面的可读性越差,刺激也越强。
要点:降低颜色的亮度
在由浅变深的过程中,知乎对界面中所有图标的颜色都发生了改变。 界面中的图标和主题按钮的颜色随色调、饱和度而变化,但亮度有所降低,保证了内容在不同照明条件下的可读性。
这是在黑暗模式下处理颜色的一种方法,灯光界面喜欢鲜艳的颜色,但亮度低的颜色更适合黑暗主题。 匹配两种模式的另一个好方法是创建互补的色板。
四、结论
深色和浅色都是产品呈现给用户的界面状态,最终目的是提高易用性。
无论选择什么模式,都要记住从产品本身出发,记住这几点。
了解趋势:熟悉黑暗模式流行的原因以及苹果和谷歌的相关研究
寻找方向:在设计黑暗模式之前,必须了解产品对应的平台、满意的标准;
掌握要点:黑暗模式的设计要求的是颜色的变化。 是用灰度画出背景的颜色,掌握文字和背景的强弱关系,适当降低图标的亮度和彩度。
 
文章中插图照片材料和相关内容来自网络,如有侵权请告知,我们马上删除!