UI设计中的浅色主题和深色主题

2019-11-19  本文已影响0人  欧阳桃子
浅色主题和深色主题  图源:Material Design

深色主题在UI的大部分区域显示深色表面,它被设计为默认(或轻量)主题的补充模式。本文将带你梳理浅色主题和深色主题各自的特点,以及浅色主题和深色主题适合使用的场景。


浅色主题与深色主题的特点

浅色主题vs深色主题  图源:自绘


适合使用浅色主题的情景

1.以文字为主的软件

根据研究表明,浅色背景上的深色文本的可读性要优于深色背景上的浅色文本,当需要设计的界面中有很多文字的时候,尽量还是要选择浅色风格。

新闻阅读客户端   图源:Dribbble

2.视觉层级复杂的软件

视觉层级比较复杂的时候,比方说如果需要设计一个复杂的Dashboard 控制中心,里面有各种不同的组件,表单和图形,层级也非常复杂,用深色的界面很难将这些元素做出区分,而浅色的界面上可以使用各种灰度和投影来帮助我们布局,可以使用的颜色也更多,更容易设计出有条理的界面。

操作面板   图源:Dribbble

3.包含较多颜色的软件

做界面设计时,界面上的颜色和背景色之间要满足对比度的要求,才能为用户提供视觉的舒适感,在浅色界面上能使用的颜色远多于深色的背景。

色彩丰富的UI界面   图源:Dribbble

适合使用深色主题的情景

1.和娱乐相关的软件

大多数与娱乐相关的设计,都使用了深色的配色,深色的配色可以让用户获得更沉浸的体验,并且这些应用大多数是在夜晚休闲时间使用,深色主题能在夜间降低视觉疲劳。

Netflix app-iOS   图源:Medium

2.科技和奢侈品行业

深色的配色风格很容易表现出科技感和品质感,因此在很多科技行业和奢侈品行业,深色风格都被广泛使用。

Breitling官网   图源:Medium

3.专业从业人员长时间使用的软件

随着数字技术的发展,一些专业从业人员,例如程序员、金融从业者等,他们主要依赖电脑进行工作。长时间的使用电子设备容易产生眼部疲劳,对于程序员来说,使用深色背景的编程软件不仅能够降低视觉疲劳,也能够帮助他们更好地识别具有强调色的代码。

代码编辑器  图源:Medium

4.工具类产品

工具类产品的内容少,所以黑底并不会影响用户体验,反而通过黑底让用户更聚焦于产品的功能使用。因为黑底白字的情况下,人的生理感知会让白色内容更加突出,视觉刺激强烈,因此白色能够更快地引起用户注意。这可以说是深色界面的一个优势。

工具类产品  图源:人人都是产品经理


选择UI主题时需要考虑的因素

1、定义界面的目标

如果UI是文本驱动的(博客,新闻平台,电子阅读器等),则浅色背景将更容易将注意力集中在文字上。 另一方面,如果界面是视觉驱动的,并且围绕图片而不是文本移动,则深色的配色方案可能是一个不错的解决方案,因为图像的颜色感觉更深并且总体布局变得时尚甚至豪华。

2、考虑用户是谁

中老年人倾向于使用浅色方案的界面,因为更直观,更易于导航。 年轻人通常会更喜欢深色背景的时尚感, 青少年和儿童会因使用明亮的背景和有趣的细节而被界面吸引。

3、分析竞品

你的产品将在激烈的竞争中争取用户的注意。 配色方案的选择也成为使应用程序或网站脱颖而出的方式, 花费在探索该领域现有产品上的时间可以节省时间和精力,否则会浪费在重新设计无效的解决方案上。

4、测试

颜色属于直接影响界面可用性和吸引力的因素,因此应以不同的分辨率,在不同的屏幕和不同的条件下对每种设计解决方案进行适当的测试。 如果设计解决方案效率低下,测试会在产品上市之前揭示配色方案的强项和弱项,避免上市后给用户留下不好的印象。


折衷的解决方案

如果想使用深色背景又想避免给用户带来可读性上的问题,那么可以有以下的解决方案。

1、深色界面上的白色标签文本

利用浅色标签或者区块承载核心的文本信息,从而确保文本的可读性。在设计的时候,注意颜色的对比,这种处理方式让界面兼具可读性和美观度。

Watering Tracker  图源:Medium

2、向用户提供配色方案的选择

另一种方法是为用户提供模式选择,它使产品真正对用户友好,可以根据自己的美学偏好做出更具个性化的选择,但是设计人员和开发人员需要花费额外的工作时间才能制定出所有方案

Upper App  图源:Medium


Reference:

Light or Dark UI? Tips to Choose a Proper Color Scheme for User Interface

APP深色主题设计指南

Dark UIs: the dos and don’ts.

深色风格界面设计指南

Dark UI vs Light UI: How to make the right choice?

Material Design - Dark Theme

上一篇 下一篇

猜你喜欢

热点阅读