【译】为用户选择合适的配色方案:浅色还是深色?

虽然译完发现有前辈已经翻译过了,但仍然坚持完成,发出来,鼓励自己,再接再厉。因为正好最近项目上也遇到这个问题,正好可以从理论的角度帮助思考。

我们每天都处在无尽的选择中。不管是个人生活还是职业生活中,我们都需要考虑许多不同的观点和挑战,好的解决方案不仅是基于建议,而是基于事实、经验和知识的。今天在这里我们将讨论UI设计师在项目中经常会遇到的问题:哪种配色方案更好,浅色还是深色?

一、影响配色选择的因素

可以肯定的是,没有一个特定的选择能够适用于所有界面。解决方案依赖于很多因素,这些因素不仅包括用户方面,也包括商业目标、市场条件和当前的设计趋势。让我们回顾一下对于这个问题必须考虑的基本因素:

1.可读性和易读性

这些术语与文本内容带给用户的感知有直接关系。

可读性是人们阅读单词、短语和文本段落的难易程度。易读性是衡量用户对特定字体中字母的认识速度和直观程度。

应该仔细考虑可读性和易读性,尤其是对包含大段文本内容的界面。在众多因素中,对界面配色方案的选择对于文本感知的有效性起着至关重要的作用。

例如,与在不同背景上感知到的物理对象一样,黑色的字在白色或浅色背景上会显得比白色的字在黑色或深色背景上似乎要更大一些。可读性差会导致用户体验差:用户无法阅读数据,甚至更甚——即使数据是相关的但不可读,用户会对文本感到难以言喻的紧张,甚至可能错过关键信息。

这是否意味着浅色背景更易读呢?并非如此。著名的用户体验大师Jacob Nielsen Jacob Nielsen 曾提到过:「在使用高对比度颜色的文本和背景时。最优的易读性方案是要求使用黑色文字在白色背景上(所谓的正向文本),或者白色文字在黑色背景上(反向文本)几乎也是一样好的。尽管这在对比度上与正向文本是一样的,但相反的配色方案会让人们略微有些迷惑并会稍微降低他们的阅读速度。易读性相当受配色方案的影响,像文本比纯黑稍亮的颜色,尤其是背景色比纯白稍暗的配色,易读性会变得很差。」

所以,如果设计师研究了不同背景下文本的感知特性,并注意字体的选择,任何配色方案都可以具有很高的可读性。

博物馆登录页

然而,回溯到20世纪80年代的一些科学研究表明:对于大多数用户来说,大段的文字在浅色背景上是更有效的选择。D. Bauer 和 C.R.Cavonius在他们的论文《通过对比度反转提高视觉单元的易读性》(1980)中分享了他们的发现。尤其是,他们发现参与者在阅读浅色背景上的深色文字时准确率要高26%。

为什么会这样呢?来自感官知觉与互动研究小组的Jason Harrison(英属哥伦比亚大学)这样解释这种现象:有散光症的人(根据各种统计大约有50%的人有散光症)觉得黑底白字比白底黑色更难识别,这可能与光线水平有关。在明亮的显示屏(白色背景)下,虹膜会稍微关闭一点,减少了“变形”透镜的影响。而在深色的显示屏下,虹膜会打开更多以接收更多的光线,眼睛晶体的变形会使眼睛的焦点更加模糊。所以,基于此,如果界面中涉及大量的文本,并建议长时间阅读,那么浅色背景会让人感觉更加友好。

2.可访问性

可访问性主要定义的是网页或手机界面可以适应更多的人,并在不受任何歧视的情况下提供它的功能。所以,“用还是不用”的决定主要取决于用户的需求和偏好,而不是他们身体的能力,配色是影响这方面的主要因素之一。选择调色板和颜色组合时,设计师需要考虑不同年龄、特殊需求或残疾的用户,这些用户也会影响背景和布局元素的颜色选择。用户研究能在数据上给予UX设计师极大的帮助,帮助他们更深入了解目标用户。

3.清晰

清晰度界定的是能看到和区分屏幕或网页上的所有核心细节的能力。首先,它涉及到导航的简单性和直觉性:能够浏览布局,找到信息区域和交互元素,用户不需要花太多的精力去获取他们需要的东西。如果这个区域没有得到适当的测试,可能会减弱视觉的层次性,使得界面变得一团糟。

对比度在这里扮演了重要的角色,配色成为了它的基础。要检查界面是否清晰,对比度是否足够,当你在模糊模式下查看屏幕或页面时,不要忘记一个很好的老技巧”模糊效果“,检查是否所有重要的东西都很容易被发现。

登陆页

4.响应性

响应性意味着用户无论在什么设备上都可以正常使用。在高分辨率的专业显示器上,看似时尚有吸引人的东西,在低分辨率的小屏幕上可能会变成很拥挤。因此,一些在设计阶段看起来很漂亮的配色方案可能会在各种各样的实际条件下失去它们的美丽。由于配色方案直接影响颜色、形状和文本感知,所以在做出最终决定之前,应该在不同的设备上进行测试。

5.环境

如果仔细研究目标受众,那么网页和手机界面的使用可能被认为是典型的。例如,考虑到在自然光线下的持续使用,深色的背景可以产生反射的效果,尤其是在平板电脑和智能手机的光面显示屏上。相反的,在光线不好的环境下,深色的背景会将光线从屏幕上带走,对导航和可读性造成不好的影响。所以,颜色组合、对比度和阴影的问题在这里引起了很大的关注。

明亮的日历

二、配色方案的选择清单

基于上述的因素,我们在这里提供一个简短的清单可供在网页和手机界面设计选择配色方案时遵循。

1. 定义界面的用途

在确定了界面的核心功能和解决问题能力后,你可以更合理的选择配色方案。如果界面是文本驱动的(博客、新闻平台、电子阅读器等),那么浅色背景往往是一个有效的选择。浅色让界面更加宽敞和有呼吸感,更容易让用户专注于文字内容。另一方面,如果界面是以视觉内容为核心的,围绕图像而不是文本,那么深色或明亮背景的配色可能是一个很好的选择,因为深色让图像感觉更深入,总体布局更时尚,甚至更奢华。

2. 分析你的目标受众

定义和分析目标受众是设计师应该做的主要事情。知道谁是你的潜在用户和他想从网页和APP中获得什么,将为设计出一个可用的、有用的、有吸引力的界面奠定坚实的基础。

中年人和老年人更喜欢使用浅色的界面,因为他们觉得这些界面更直观、更易于浏览。年轻人通常更倾向深色背景、更新颖时尚,表现良好的界面,这样能让目标用户参与进来。使用明亮的背景和有趣的细节来吸引青少年和儿童。

颜色的选择显然取决于界面的功能和内容,但是目标受众的偏好始终是以用户为中心决策的一个好的线索。

3. 调研竞品

另一个需要记住的方面是,你的产品不会出现在蓝海市场中。反之亦然,它将在激烈的、动态的竞争中获取用户的注意力。对配色的选择也成为了网页或者App出彩的一种方式,它会影响用户产生珍贵的第一个互动愿望。要么花点时间在现有产品的探索上,要么就浪费在重新设计无效的解决方案上。

4. 测试 测试 测试

上面描述的要点是关于一个令人信服的关键事情:由于颜色属于直接影响界面可用性和吸引力的因素,每个设计方案都应该在不同的分辨率、不同的屏幕、不同的条件下进行适当的测试。在产品上市前,测试并讨论配色方案的优点和缺点,如果设计方案效率低下,就会失去令用户惊叹的第一印象的机会。

素食食谱APP

三、折中的解决方案

用户界面设计师不希望遵循严格的配色方案,有时会找到折中的解决方案,如下所示:

1.深色界面,白色文本标签

正如我们在”UX流行趋势的回顾“中提到的,这一趋势尤其在深色背景配色中流行。它还提供了一种更好的可读性的方法,这也通常是争论的问题:为核心数据块使用带有浅色背景的方框。设计师解决了这个问题:为屏幕或页面提供优雅的对比。其中一个案例是Tubik团队设计的浇水跟踪器就是应用了这个方法。

Tubik 浇水跟踪器

2.为用户提供可选择的配色方案

另一种方法是让用户自己选择配色方案的模式。我们在Upper,一个代办事项列表的应用程序,就是这样做的,给用户提供了配色的选择。一方面,这样会让产品对用户更加用好,同时根据易用性和审美喜好作出更加个性化的选择。另一方面,设计师和开发人员需要更多的时间来完成所有的方案。

Upper App

原文地址:https://uxplanet.org/light-or-dark-ui-tips-to-choose-a-proper-color-scheme-for-user-interface-9a12004bb79e

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,589评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,615评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,933评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,976评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,999评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,775评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,474评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,359评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,854评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,007评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,146评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,826评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,484评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,029评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,153评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,420评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,107评论 2 356

推荐阅读更多精彩内容