“明亮的还是黑暗的用户界面?”—— UI设计配色方案的实用技巧

https://dribbble.com/shots/4086107-Design-Universe

我们每天的日常生活中都有无尽的选择。 在个人生活和职业生活中,我们必须考虑许多对立面和挑战。当解决方案更多地基于事实,经验和知识的时候,会比仅仅基于建议更好。 今天,我们将讨论UI设计师在项目中经常需要作出的一个选择:哪种方案更适合界面,明亮的还是黑暗的?


影响配色方案选择的因素

可以肯定的是,没有一个特定的选择可以用于所有的目标对象。 解决方案在很大程度上取决于多种因素的影响,不仅涉及用户方面,还涉及业务目标,市场条件和当前设计趋势。 让我们讨论一下在配色方案选择的问题上必须考虑的基本因素。

可读性和易识别性

这些术语都与对文本内容的感知直接相关。 可读性界定了用户可以怎样轻松地阅读单词,短语和模块。 易识别性衡量了用户如何快速直观地区分特定字体中的字母。

在选择配色方案时应该仔细考虑这些问题,尤其是充满了大量文本的界面。 在许多其他因素中,为界面选择配色方案在文本感知的有效过程中起着至关重要的作用。 例如,与在不同背景下感知的物理对象一样,白色或浅色背景上显示的黑色副本似乎大于黑色背景上的白色副本。 可读性差导致用户体验不佳:用户无法扫描数据,更有甚者 - 即使数据互相关联但不可读,用户会感到文本莫名其妙地纠缠在一起,甚至可能错过关键信息。

这是否意味着具有浅色背景的界面更具可读性? 不总是。 其中一位著名的用户体验设计大师Jacob Nielsen提到:“在文字和背景之间使用高对比度的颜色。最佳易读性需要在白色背景上显示黑色文字(所谓正面文本),同样,黑色背景上显示白色文字(负面文本)效果一样好。 虽然对比度与正面文本的对比度相同,但负面文本的配色方案会使人稍微放松一些,并会稍微放慢阅读速度。 在配色方案中,如果文字比纯黑色浅的时候,易读性会受到很大影响,尤其是当背景色不是纯白色时。”

因此,如果设计师在不同颜色背景下研究文本感知的特性并且慎重选择字体,那么任何配色方案都可能具有足够的可读性。

https://dribbble.com/shots/2620649-Tubik-Studio-Museu

然而,一些可追溯到20世纪80年代的科学研究表明,对于大量文本来说,浅色背景似乎是大多数用户更有效的选择。 通过研究广告运营商的工作习惯,D. Bauer和C.R.Cavonius在文章《通过对比反转提高视觉显示单元的易读性》(1980)中分享了他们的研究成果。 特别是,他们发现参与者在浅色背景中阅读黑色文本时比其他场景下辨认文本更加精确了26%。

为什么会这样?感官认知和互动研究小组(英属哥伦比亚大学)的Jason Harrison以下述方式解释了这种现象。 散光的人(根据不同的统计数据,大约占50%的人口)感觉黑色背景下的白色文本比白色背景下的黑色文本更难识别。 其中一部分与光照等级有关。 有了明亮的显示屏(白色背景),虹膜会更加闭合,从而减少“变形”镜头的影响。 在黑色显示器(黑色背景)下,虹膜会打开以接收更多光线,镜头的变形会在眼睛处产生更加模糊的焦点。 所以基于此,如果界面中呈现大量文本并提示长时间阅读体验,则浅色背景可能会对用户更加友好。

https://dribbble.com/shots/3111755-The-Big-Landscape

无障碍

无障碍主要定义为Web或移动界面尽可能服务更多人的能力,不包含任何歧视地提供其功能。 因此,“使用还是不使用”的决定必须基于用户的需求和偏好,而不是其身体能力。 色彩方案是影响这方面的最主要因素之一。 选择调色板和颜色组合时,设计师需要考虑不同年龄,特殊需求或残疾的用户,这些用户还可以确定背景和布局元素的颜色选择。 用户研究成为向UX设计人员提供有助于更接近目标受众的数据的重要帮助。

清晰度

清晰度定义了查看和区分屏幕或页面上所有核心细节的能力。 首先,它涉及导航的简单性和直观性:能够扫描布局并找到信息和交互元素的区域,用户不需要付出太多努力来找到他们所需的东西。 如果这方面没有得到适当的测试,可能会导致视觉层次较弱,并使屏幕变得一团糟。 对比度在这里起着重要的作用,配色方案成为它的基础。 为了检查,如果界面清晰并且对比度足够,请不要忘记“模糊效果”这个很好的旧技巧,在模糊模式下查看屏幕或页面时,检查是否所有重要的东西都容易明显地找到。

https://dribbble.com/shots/3874159-Digital-Agency-Landing-Page

响应

界面的响应性意味着无论用户使用何种设备,它都具有可用性和功能性。 界面在Sketch n高分辨率专业显示器看上去很时尚和吸引人,却可能在小型低分辨率屏幕上会显得脏污。 因此,在设计阶段看起来不错的一些配色方案可能会在其应用的各种日常条件下失去美感。由于配色方案直接影响颜色,形状和感知,所以在做出最终决定之前应该在不同设备上进行测试。

环境

Web和移动界面被用在如果目标受众被仔细研究的情况下,可能被认为是典型的环境中。 例如,关于自然光线下的不断使用,深色背景可以从字面上创造反射效果,特别是在平板电脑和智能手机典型的光面屏幕上。 相反,在光线不好的环境下,黑暗的背景可以将光线从屏幕上移开,这对导航和可读性产生不利影响。 所以,颜色组合,对比度和色调问题在这里引起了很大的关注。

https://dribbble.com/shots/3501539-Bright-Vibe-Calendar

配色方案选择清单

考虑到上面提到的因素,我们在这里提供一个简短的基本步骤清单,同时为网页或移动界面选择一个通用的配色方案。

1.明确界面的核心功能

确定了界面实用程序和解决问题能力的核心点后,您可以更合理地选择颜色方案。 如果UI是文本驱动的(博客,新闻平台,电子阅读器等),浅色背景往往是一个有效的选择。 光线使得屏幕宽敞而宽敞,纯粹专注于复制将更容易。 另一方面,如果界面是视觉化驱动的,并且移动的是图像而不是文本,则背景为黑色或鲜明的配色方案可能是一个很好的解决方案,因为图像的颜色感觉更深,并且总体布局变得时尚甚至奢华。

2.分析你的目标受众

目标受众的定义和分析是设计师应该做的首要事情。 了解谁是你的潜在用户,他们想从网站或应用中获得什么,为可用而有吸引力的界面奠定了坚实的基础。 中年人和老年人倾向于喜欢浅色方案的界面,因为他们发现浅色界面更直观和可导航。 年轻人通常会发现性能良好的界面具有更加原始和时尚的黑色背景,因此可以成为吸引目标用户的方式。 青少年和儿童被吸引到使用鲜明背景和有趣细节的界面。 颜色的选择显然取决于界面功能和内容的性质。 但目标受众的偏好始终是以用户为中心的决策的良好线索。

3.研究你的竞品

另一方面要记住的是,你的产品不会在未开发的市场中出现。 反之亦然,它将在激烈的竞争中争取用户的关注。 配色方案的选择也成为使应用程序或网站变的突出的方式,并可以使用户愿意做出珍贵的互动。 花费在探索该部分现有产品上的时间可以节省时间和精力,否则将浪费在重新设计无效解决方案上。

4.测试,测试,测试

上述要点说明了一个关键问题:因为颜色属于直接影响界面的可用性和吸引力的因素,所以每个设计方案都应该在不同的分辨率下,在不同的屏幕上以及不同的条件下进行适当的测试。 在产品投放市场之前,测试揭示了配色方案的强弱点,如果设计方案效率低下,就会失去令人惊叹的第一印象的机会。

https://dribbble.com/shots/4050692-Vegan-Recipe-App

折衷的解决方案

不需要遵循严格的配色方案,用户界面设计师有时会发现折衷的解决方案,如下所示。

黑暗的界面,白色的标签

正如我们在UX设计趋势回顾中所提到的,这种趋势在基于黑暗背景方案的界面中特别流行。 它还提供了一个更好的方法来实现适当的可读性,这通常是辩论的话题:将核心数据块的浅背景应用框或空格,设计人员可以解决此问题,并为屏幕或页面增添优雅的对比。 其中一种情况是,当它得到有效应用时,是由Tubik团队设计的Watering Tracker应用程序。

https://dribbble.com/shots/3997043-Watering-Tracker-App

让用户自己选择配色方案

另一种方法是让用户选择模式。 这就是我们为Upper做的,这是一个待办事项列表应用程序,可为用户提供一系列配色方案。 一方面,它使产品对用户非常友好,并根据不仅可用性问题而且根据审美偏好进行更加个性化的选择。 另一方面,设计师和开发人员需要额外的工作时间来制定所有的方案。

https://dribbble.com/shots/3287222-Upper-App-Case-Study

我的设计作品(Dribbble):https://dribbble.com/exciting

本文翻译来自Medium感谢Tubik Studio

原文链接

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

推荐阅读更多精彩内容