深色 UI 设计基本原则

发布时间:2022-02-08 21:30:41

如今,深色 UI 设计非常流行。许多用户喜欢它。这也是一个巨大的用户体验趋势。但是数码产品如何选择呢?为什么今天越来越多的公司选择它作为品牌风格?有哪些原则?

深色UI设计.jpg

深色 UI 设计的 6 条原则

尽管物理学家说黑色不是一种颜色,而是没有光,但大多数用户都会将深色主题称为黑色。艾萨克牛顿爵士甚至没有在配色方案中寻找它!然而,在谈到基本的黑色 UI 设计原则时,颜色并不是唯一需要考虑的因素。还有大约五个需要考虑。

1) 颜色

当我们讨论深色主题屏幕时,背景颜色是首先出现的东西。事实上,深色主题并不一定与黑色的使用有关。最好将其视为昏暗的主题,因为颜色可以从深蓝色到灰色以及其他用于深色主题界面的颜色。

大多数设计师认为黑色形成强烈的对比。然而,根据托普塔尔专家意见,您不应该使用纯黑色 (# 000000) 作为背景或表面颜色。它适用于边框或其他较小的 UI 元素。这里面有很多道理。

2) 对比

设计深色 UI 元素的最大挑战之一是实现最佳的颜色对比度。对比度对于分离视觉元素和创建可理解的文本是必要的。

应特别注意深色用户界面中文本的对比度。谷歌的材料设计深色主题推荐使用深灰色(#121212)作为表面颜色。

还值得检查其他 UI 元素之间的对比,例如不同显示器和电子设备上的地图、按钮、字段和图标。但是,如果 UI 元素之间存在难以察觉的分离,则设计会显得过于原始。

根据 Web 内容可访问性指南 (WCAG),文本的视觉呈现必须具有至少 4.5:1 的对比度。一个例外是对比度至少为 3:1 的大尺寸文本。因此,设计人员应始终确保文本在深色背景下阅读时不会引起问题。因此,也介意明暗模式在选择时。

3)负空间

成功的黑暗主题的最基本要素之一是巧妙地使用负空间。

基本上, 负空间 (通常称为空白)是布局中留空的区域。它可能不仅在您放置的物体周围。(design4users)

极简主义设计不仅关乎有什么,也关乎没有什么。明智地使用,负空间将使黑暗的界面更具可读性,并使人们更容易吸收信息。

在设计不佳的界面中,深色主题会使数字产品变得沉重和过饱和。为了平衡这一点,设计师可以通过在稀疏的最小设计中使用负空间来减轻黑暗主题。

4) 排版

排版就是关于样式化的文字。

黑暗界面中的每一段文字都需要仔细研究。问题是双重的:可读性和对比度。

首先,注意字体大小。文本应该足够大,以获得良好的可读性(深色背景上的小文本更难阅读)。

其次,文字和背景之间必须有足够的对比。

数以千计的数字字体可以轻松突出标题和主要信息。设计师可以通过增加对比度和调整字体大小、字符间距、行高等来减少可读性问题。

5) 海拔

在绘图方面,深度或高度意味着创建显示某物正面或侧面的对象。就好像你从天花板上俯视房间,看到一切的顶部。但是,您无法查看对象的侧面、正面或背面。

为什么我们需要这种深度?深度有助于强调界面的视觉层次。大多数现代设计系统使用标高来传达深度。深度感对应于自然世界。我们的眼睛感知深度,我们生活在一个三维世界中。

深色主题并不意味着平面界面。在灯光主题中,灯光和阴影营造出深度感。深色主题更难达到深度,因为它们主要包含带有稀有颜色口音的深色表面。但是,设计人员可以使用具有适当配色方案的文本的三个或四个高度级别来传达这种深度。

6) 深色 UI 与浅色 UI

黑色的 UI 设计应始终与浅色一起考虑。决定很大程度上取决于多种因素,不仅包括用户的观点,还包括业务目标、市场状况和界面设计的当前趋势。这就是为什么光明与黑暗也将是一个标准。


声明:本站发布的内容以原创、转载、分享网络内容为主,如有侵权,请联系电话:400-887-2127,邮箱:7221960@qq.com ,我们将会在第一时间删除。文章观点不代表本站立场,如需处理请联系我们。