您的位置:365足球外围官方网站 > 摄影技巧 > 色彩与转化率指南,8人机交互指南

色彩与转化率指南,8人机交互指南

发布时间:2019-09-21 17:57编辑:摄影技巧浏览(140)

    正文开始之前先看一发文章框架:图片 1

    色彩与转化率指南

    前一篇:iOS 8人机交互指南(9)

    一. 为什么要让对比度满足「色彩无障碍设计标准」?

    在设计师的工具箱里,色彩是其中一个强大的工具。毫无意外,色彩可以激起不同的情绪和引起使用者的注意。但如果你曾尝试着设计一个新的方案,你就知道去量身定制色彩方案有多困难。

    10. 颜色与排版(Color and Typography)

    Accessible design aids in creating a better experience not just for people with disability, but also for people without it.

    一开始,我已经撰写了一些简易的参考指南,它可以涵盖基本的色彩理论以及它如何与 UX 设计相互作用。这篇文章并不是完整的指南针对如何使用色彩在你的设计上,取而代之的是,一个针对在 UI 和 UX 设计方案中的情境下色彩理论概论。

    10.1 颜色加强交流(Color Enhances Communication)

    举个例子,一般的门,都需要自己推开或者拉开,但美国一款为残障人士设计的门开关,可以一按下门自动打开。

    色彩理论

    In iOS, color helps indicate interactivity, impart vitality, and provide visual continuity. The built-in apps use a family of pure, clean colors that look great individually and in combination, and on both light and dark backgrounds.

    图片 2

    事实上,色彩理论包括了一些事情,但在设计中最基本的互动为互补色(complementation),对比度(contrast),饱和度(vibrancy):

    在 iOS 中,颜色有助于表达交互性、透露活力,也提供了可视化的连续性。内置 app 使用一系列无论单看还是组合都看上去不错的、纯粹干净的颜色,而且这些颜色无论背景明暗都有较好效果。

    △ from:Power Door Openers – Access and Mobility

    互补色是指我们眼中的色彩与其他的颜色中的关系。选择他们在色谱对面的颜色会使视觉上有一种和谐感。这里有两个普遍使用互补色的例子:三等分色(triadic)与复合色(compound)的色彩方案,下面我们会讨论。

    内置 app 的颜色

    这个「一按门就开」的按钮,装在公共建筑的入口,可以帮助坐轮椅的用户方便开门。

    对比色是减少眼睛疲劳和专注在使用者的注意力藉由清楚的区分屏幕上的元素,元素之间的高对比度使文字易读和引导读者的注意力。最显而易见的例子是有效的选择背景与文字的颜色,等等你会看到。

    If you create multiple custom colors, make sure they work well together. For example, if pastels are essential to your app’s style, you should create a family of coordinating pastels that can be used throughout the app.

    这同时也方便了捧着许多东西的人、抱小孩的人,或者人们干脆都去按它开门——因为它真的比自己去推开/拉开大门方便多了。

    鲜明度是对色彩情绪的暗示。这个主题在Create Emotion With Color In UX Design有完整的叙述。

    如果创建多种自定义颜色,那一定要保证它们搭配得很好。例如,如果 app 的风格是轻柔的彩色,那就应该创建一系列协调搭配的彩色并在 app 中使用。

    所以,满足无障碍设计标准的设计,不仅给残障人士提供了更好的体验,同时也能更方便普通人使用。

    色环

    Pay attention to color contrast in different contexts. For example, if there’s not enough contrast between the navigation bar background and the bar-button titles, the buttons will be hard for users to see. A quick but unscientific way to find out if your colors have sufficient contrast is to view your app on a device in different lighting conditions, including outdoors on a sunny day.

    实际生活中的产品设计如此,互联网产品设计如此,颜色对比度的设计亦如此。

    一个色彩环或色彩轮是由一个个颜色色相构成的,并透过一个环来阐述。每一个基本色系(shade of color)都有对立的一组,你可以使用色环去找每一个特定颜色的对立色。

    注意在不同环境下使颜色有差异。例如,如果导航栏背景和上面的按钮标题颜色差异不够明显,那用户就很难看到按钮。有一种快速但不够科学的方法来验证颜色是否有足够的差异性,那就是在一个不同的光线条件下的设备里查看 app,包括阳光明媚时的户外。

    1.面向大众的产品,要尽量满足「有视觉障碍的用户」

    图片来源:artsconnected

    Although viewing your app on a device can help you find some of the areas you need to work on, it's no substitute for a more objective approach that yields reliable results. This approach involves determining the ratio between the luminance values of the foreground and background colors. To get this ratio, use an online contrast ratio calculator or you can perform the calculation yourself using the formula established in the WCAG 2.0 standard. Ideally the color contrast ratio in your app is 4.5:1 or higher.

    Salesforce 的无障碍设计顾问 Cathy O Connor 经常被问到「你们产品究竟有多少残障人士在使用?」他想说的是,残障人士的数量并不少,具体数据如下:

    色环中也展示出三原色(primary colors),三间色(secondary colors)和再间色(tertiary colors)。三原色(红,黄,蓝)可以被混合去创造三间色(橘,绿,紫)。浅色(tints)可以添加白色,和暗色(shades)可以添加黑色。

    虽然这种方法有助于发现那些有待继续改进的区域,但它还是不能替代一个获得可靠结果的更客观的方法。这个方法涉及到前景色与背景色亮度值间的比例如何。为了获得这一比例,使用在线差异率计算器或者使用基于 WCAG 2.0 标准的公式自己计算。理想情况下,颜色差异率应该为 4.5:1 或者更高。

    • 世界人口的15%,有着不同程度的残疾,包括视力、听觉、行动及认知障碍。
    • 约有4%的人口视力低下,0.6%视盲。这些用户可能需要借助屏幕阅读器/盲文阅读器的帮助。
    • 7-12% 的男性有不同形式的色觉缺陷(如色盲),不到1%的女性这样。他们难以区分某些特定颜色组合。
    • 低视力状况随着年龄的增长而增加,50岁以上的一半人有一定程度的低视力低状况。
    • 全球增长最快的人群是60岁以上的人。
    • 过了40岁,大多数人都需要老花镜,才能清楚地看到小物体或文字。

    Create an Effective Color Scheme 创造有效的色彩计画

    Take bar translucency and app content into account when you use a custom bar tint. If you need to create a bar tint that matches a specific color, such as a color in an existing brand, you may have to experiment with various colors before you get the results you want. A bar’s appearance is affected by both the translucency that iOS provides and the appearance of the app content that can be behind the bar.

    △ from:Color Contrast And Why You Should Rethink It ,by: Cathy O Connor

    以下有三种容易被接受的色彩计画:三等分色(triadic),复合色(compound),类似色(Analogous colors)

    使用自定义栏提示的时候,要考虑栏的透明度和 app 内容。如果需要创建栏提示来匹配一个特定颜色,例如一个已存在的品牌的颜色,那需要在获得满意效果前进行多种颜色的验证。栏的外观同时受 iOS 提供的透明度和栏下面的 app 内容显示两个因素的影响。

    2.要尽量让产品在「不佳的使用条件」下,仍能使用

    三等分色:在三种结构当中三等分色是最基本也是最平衡的。它结合了分别是色谱结尾的三种颜色。有一个非常简单的方法去创造三等分色:在色环当中,选择一个你的基本色,然后画一个等边三角形。三角形中的三个顶点会成为你的三等分色彩方案。

    英文原文链接

    也许你觉得你的设计在 Mac 上看起来很完美啊!

    红,黄和蓝色位于120度彼此。它们可用于三元配色方案。图片来源:TUTS +

    后一篇:iOS 8人机交互指南(11)

    但也许你的用户中一部分人,用的是老旧、性能差的设备/ 显示器;也许有人会在强烈的阳光下、在交通工具上,在昏暗的环境中使用你的产品。如果没做可用性测试,很可能在真正的「主要使用场景」中,你的产品是几乎没法用。

    藉由使用等边三角形,你可以确保颜色有相同的饱和度(vibrancy)并跟彼此适当互补。

    为了让使用条件不是很好的用户仍然能正常使用你的产品,也为了更多有视觉障碍的人能用好你的产品,将「无障碍设计」考虑到产品设计中,是一件非常有必要的事。

    复合色:在色环中,色彩对面的颜色我们称为互补色(complementary),他们有着强烈对比,且他们被用来吸引使用者的目光。

    什么?为了美观,不得不放弃足够高的对比度?那看看这个绝佳网站 Contrast Rebellion,上面列举了许多真实案例,证明了高对比度设计仍然很酷很吸引人。

    图片来源:TUTS +

    二. 「Color Accessibility」是什么?

    举例来说,红色的互补色是绿色。看一下未接来电的讯息在iOS中。互补色彩能立即让使用者注意在重要的事件上。

    WCAG 2.0 (Web Content Accessibility Guideline,Web内容无障碍指南)就是为了帮助设计师创造良好用户体验的。

    类似色:颜色在色轮当中旁边的颜色我们称为类似色。他们可以被用于在设计当中创造和谐感和延续性。虽然此方法相对简单可以达成,但是关键是你决定要在哪一个色彩鲜明度使用,有可能会太过喧宾夺主。相似色彩方案是根据缜密的色彩选择在色轮当中的相同区域。

    WCAG 中提到的主要的四种类型的残疾是:

    色调黄色和橙色是一个类似的配色方案的一个例子。图片来源: TUTS +

    • 视力障碍(Visual impairments)
    • 听力障碍(Hearing impairments)
    • 运动障碍(Motor impairments)
    • 智力障碍(Intellectual disabilities)

    在手势导向的任务管理app中,清楚地使用类似色以视觉化安排重要任务的优先顺序,以及特别指出最重要的一个(最上方的项目使用最重的颜色,当然而在比较表单下面的项目就较轻盈和隐晦)

    基于此,提出了「POUR无障碍原则」:

    Clear For iOS

    • 易于感知的(Perceivable)
    • 便于操作(Operable)
    • 容易理解的(Understandable)
    • 稳定耐用的(Robust)

    相似色彩计画能被用于轻盈的心情或气氛在你的app或是网站当中。举例而言,一个静坐的app — Calm使用相似色蓝跟绿去帮助使用者感到放松跟宁静。

    颜色的选择属于「易于感知的」无障碍设计范畴。 也就是说,网站/App 的内容应该很容易被看到——尤其是文字和图像,应该有足够高的色彩对比度(high color contrast ratio),使之很容易地从背景中被辨识出来。

    淡蓝色的天空和水的颜色,它可以提神,自由和平静。绿色与健康有关。

    颜色对比度无障碍标准

    最佳学习创造出漂亮的色彩计画是持续练习。第一次,你可以使用自动配色工具。Color CC 是由 Adobe 开发的工具,提供直觉的方法去创造色彩调色盘。他有着直觉的介面,每一个在调色盘的颜色可以独立编辑,最后的调色盘可以简单地被储存。

    1.4.3 对比度(最小): 文本的视觉呈现以及文本图像至少要有4.5:1的对比度(AA级)。

    Adobe颜色CC(以前称为的Kuler)是配色方案创建一个伟大的工具。色彩中的文字

    大文本: 大号文本以及大文本图像至少有3:1的对比度。

    当你在使用色彩中的颜色,请注意如果使用两个互相明度(value)低的颜色,这会使你的文字非常不好阅读(不管是互补色或是相似色)。这可以特别针对你的行动装置屏幕当你的使用者在室外紧盯着屏幕时。

    1.4.6 对比度(加强): 文本视觉呈现以及文本图像至少有7:1的对比度(AAA级)。

    上图:缺乏文本和背景将推动用户疯狂之间的对比,他们的眼睛不知道要专注于哪种颜色                                       下图:高对比度的文字更可读

    大文本: 大号文本以及大文本图像至少有 4.5:1的对比度。

    WC3’s Web Content Accessibility Guidelines 是一个好的起始点。他们建立了一个对比的极简标准,让使用者可以在可视度低的情况下阅读他们的文字。跟据WC3,颜色与背景间的对比度比例约为1:1比21:1的明度( luminance)或是发散的强光(intensity of light emitted)之间。以下是WC3建议的主题文字与影像文字的比例:

    Ps:大文本:至少 18pt(24px)或 14pt(19px)bold。

    小字相对于背景的对比度比例(contrast ratio)至少为4.5:1

    △ from: Web Content Accessibility Guidelines (WCAG) 2.0

    大字相对于背景的对比度比例(contrast ratio)至少为3:1

    将规范总结成表格:

    左:文本的这些线路不符合彩色对比度和建议,以及难以阅读对他们的背景色。图片来源:材料设计

    图片 3

    只要你决定了你的颜色,向真实使用者在大部分的装置做测试是绝对必要的。如果有任何阅读的问题在你的测试当中展现,那你可以确定你的使用者会有相同的问题。

    △ from:Making Bootstrap a Little More Accessible — SitePoint, by:Rhiana Heath

    色彩在转换率上的影响

    图片 4

    UI 设计中,色彩理论的价值多过于视觉装饰,它可以对你的生意造成极大的影响。这个段落我们会着重在 CTA (call-to-action)按钮上。

    △ 这就意味着,当字号 ≥ 24px normal / 19px bold, 白背景上能用的最浅的纯灰色是#959595。

    一个 CTA 按钮是包含四件事情:位置,形状,文字,以及颜色。如果这元素互相配合,你将会有一个好的 CTA 按钮。按钮颜色在转换率优化领域中是其中一个持续最久的辩论。有大量的A/B测试结果说明改变引动按钮的颜色如何巨大的影响注册率。举例而言,HubSpot 分享了一个著名的按钮颜色测试。

    图片 5

    A 和 B 版本的按钮颜色表现的测试。其他的东西完全一样。只有按钮的颜色不同

    △当字号< 24px normal / 19px bold,白色背景上可以用的最浅纯灰色是#767676。(如果在灰色背景上,文字颜色应该更深)

    虽然他们原本的预测绿色按钮会表现得更好,但结果是红色按钮多了21%的点击。

    另外,以下情况的文本,无最低对比度限制:

    然而,不太可能概括这些结果到所有的情形。没有一个神奇的颜色可以一直表现得很好在所有的网页跟 App 上。所以你应该永远测试你使用的颜色在你的网页和你的观众,看看会发生什么事。

    • 未激活的(inactive)用户界面组件的一部分(按钮或菜单选项)。
    • 表单字段的占位符 (placeholder) 或 ghost text 。
    • 只是纯粹的装饰。
    • 对任何人都不可见的内容。
    • 文本作为「包含其他重要视觉内容图片」的一部分。
    • 文本作为 logo 或品牌名称的一部分。

    对比度是关键

    下图,Salesforce Design Systems team 在自己的移动应用的选色上,很好地满足了「WCAG 2.0 AA标准」 。

    如果你希望使用者按某个东西,让他显而易见。如果你的网页或是app使用很多蓝色,使用者可能不会马上注意蓝色的按纽,就好比浅色的按钮不会在浅色的背景凸显。使用者较常点击引动按钮在背景与其有强烈的对比下。

    而且设计师们在探索高对比度色彩组合的过程中发现,他们自己越来越喜欢高对比度的设计。我相信你也会发现,使用满足标准对比度标准的颜色,并不会影响你产品的美观。

    使用多种的对比色可以聚焦访问者对页面上特定元素的注意力(如 CTA 按钮)

    图片 6

    对于色彩使用的基本了解是网页与 App 设计的先决条件。我们所讨论的仅是色彩理论能如何增强你的 UI 设计的基础。但是没有任何限制你想在颜色上下多深的功夫在你的 App 上。不管你选了什么颜色,一般而言,他们会有明确的影响在你的设计上 — 透过传达对比度与熟悉度去唤起明确的情绪。

    △ 完全满足大字对比度>3;小字对比度>4.5。

    本文由吆喝科技翻译自Nick Babich 的:A Guide to Color and Conversion Rates 

    设计时,可以借助一些工具,比如用「灰度/色盲模拟器」测试设计。 ( Photoshop 在其View> Proof Setup菜单中内置了色盲滤镜。)

    原文链接:uxplanet.org/a-guide-to-color-and-conversion-rates-f3a28e8e32bb#.ex0bgoosb

    时刻记得问问你自己,页面上的 CTA ( call to action ) 是否「看上去」是页面中的主要元素。

    图片 7

    三. 「对比度检测」工具推荐

    一些实用在线工具可以用来测试对比度是否满足 WCAG 2.0 AA 的「色彩无障碍设计」标准。

    WebAIMs Color Contrast Checker

    可以直接在线调颜色,实时看对比度是否满足要求。

    图片 8

    ❤️ Tanaguru Contrast-Finder

    若测试的2个颜色对比度不达标,会自动推荐一系列达标的颜色可供选择。

    图片 9

    Easily calculate color contrast ratios

    方便地检测对比度是否达标。

    图片 10

    Color Safe

    在定色板之前,可以用它来事先选择符合标准的颜色。

    图片 11

    Color tool

    另外推荐一款 Google 的配色工具,可直接检测颜色的accessibility。

    图片 12

    Color Oracle

    检测不同类型色盲、色弱患者,看到屏幕的效果。

    图片 13

    四. 大厂案例

    看完了规范,仍有些困惑未能解决,比如 :

    disabled text 对比度未作要求,那对比度也不可能是1,究竟多少比较合适?

    最低对比度有了要求,那么最高对比度呢?毕竟纯黑加纯白也很难受。

    黄色橙色这种,无论如何在白背景也不可能满足对比度 > 3的颜色,如何处理?

    所以我选取了一些比较注重无障碍设计的大厂案例,以求能发现一些规律。

    Google Chrome

    「无障碍设计」已经是 Google Chrome DNA 的一部分。过去的两年中,这方面做了尤其多的努力。新的配色方案符合 WCAG 2.0 规范,有足够高的对比度。所有的 text、icongraphy,都尽量满足 WCAG 2.0 AAA 标准。

    图片 14图片 15

    我用 EightShapes Contrast Grid 验证了一下 Google text 颜色的对比度:

    图片 16

    经验证,发现 Google 果然在明暗两种背景下的配色,几乎都满足 WCAG 2.0 AAA 标准(color contrast ratio > 4.5)。

    唯独白背景下的 warning 色对比度为3.3,仅满足 AA 标准 ( color contrast ratio > 3)。

    另,disabled 的颜色对比度不属于限定范围,Google 对比度是1.8、2.2。

    另外我发现,Google 在深浅背景上使用的颜色,都不是直接将 brand color 拿过来就用,而是根据不同背景调整后的颜色。

    图片 17

    而即使是 brand color,Google 也尽量使之和白背景的对比度满足 AA 标准(黄色、橙色例外)。

    图片 18

    Material Design

    Material Dsign 官方说明:

    Accessible color palette

    Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.

    Contrast ratios

    The W3C recommends the following contrast ratios for body text and image text:Small text should have a contrast ratio of at least 4.5:1 against its backgroundLarge text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

    Elements

    Elements currently in a disabled state are exempt from color contrast standard: this includes buttons in disabled state or inactive menu items.

    从 Sketch 中选取 Material Design 的 Template, 测试一下颜色的对比度。

    图片 19

    △ Material Design

    我特别测了下按钮 disabled color 的对比度,发现白背景是1.8;暗色背景的对比度高一些,2.5。

    图片 20

    发现:

    • 黑/白色、深灰色,危险色的颜色,都> 4.5,满足 AAA 标准。
    • 白背景的「绿色」满足 AA 标准。
    • 文字 disabled color 对比度分别是2.6、2.5。
    • 看起来,深色背景下的灰色系对比度,比浅色背景下更容易达到 3。

    iOS

    图片 21

    iOS 在对比度上,普遍比 MD 的对比度低。

    即使苹果的官方规范里也明确对「对比度」做了相应规范:

    Human Interface Guidelines:Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

    我猜 iOS11 将纤细文字变粗变大,细线 icon 改为实心 icon, 也是出于提高对比度、让更多人能看清的初衷吧。

    图片 22

    △ from:iOS 10 vs 11:完整 UI 比較分析,by:Taylor Hu

    Medium

    看下早期的Medium,只有「大M」和深灰色,满足对比度 > 3.0。

    图片 23

    如今的 Medium ,色彩对比度都 ≥ 3.0。

    图片 24图片 25

    测量发现:

    • 黑色、深灰色,危险色,都满足对比度> 4.5。
    • 某些地方的灰色文字(如未激活的Tab文字),对比度 > 3。
    • 写文章的 Placeholder 对比度为2.1。
    • 禁用控件对比度为1.2(那个右侧淡淡的on/off radio-button)。
    • 绿色文字较难满足;作为大面积颜色时,绿色更浅。
    • 深浅背景下,用的不同绿色。

    图片 26

    △ 深浅背景下用的是不同绿色。

    Twitter

    图片 27

    • 黑色、深灰色,危险色,都满足对比度> 4.5。
    • Disabled color 对比度是1.9,接近2。

    图片 28

    规律总结

    由此可大致总结出一些规律,可酌情应用:

    • 黑/白色、深灰色、危险色,都尽量满足对比度 > 4.5。
    • 最高对比度一般在 16-18 左右。(最高对比度是21,也就是 #000000 + #FFFFFF 。尽量别用这种对比,这会引起一些诵读困难症患者的不适,他们会感觉文字在旋转、模糊)
    • Disabled color、placeholder 虽未做限制,但浅色背景上对比度大概是1.8~2.3(尽量2以上),深色背景对比度大致是2.5~3(尽量3)。
    • 未激活控件(如tab)文字颜色一般对比度 > 3。
    • 文字颜色、icongraphy,为了满足无障碍色彩对比要求,一般不直接使用 brand color,而是加深/变浅后再用。
    • 如果主要背景是白色,brand color 和白色的对比度尽量满足 ≥ 3。(黄色、橙色、绿色较难满足,酌情处理)。
    • 深色背景的对比度,比浅色背景的容易满足一些。(即便如此,谨慎在产品中使用深色调,研究表明散光的人在黑色上阅读白色文字比在白色黑色文字更难。Bauer和Cavonius 在 发现,在浅色背景上用黑色字符阅读时,比在深色底阅读浅色字的准确率,高出26%。参考:Why light text on dark background is a bad idea)

    五. 满足「无障碍色彩标准」的配色流程

    设计时,可以先从一个非常清晰的方案开始尝试,然后再慢慢往你的美学方向调整。

    1.先确定各颜色的深浅

    • 首先确定的主色调,也许是蓝色。
    • 根据主色调确定不同深浅的灰色。 Colllor 这个在线工具能帮你完整这项工作。

    图片 29

    △ Colllor 网站截图

    • 选定一个灰色后,再根据这个灰色选出灰色的浅色系和深色系。

    图片 30

    • 选定好灰色后,再用相同方法,选出其他颜色的深浅色。

    图片 31

    △ from: Dont let your color palette be an airball,by: Zack Gehin

    每个颜色 4-6 个深浅度比较合适,不同深浅的颜色别太接近,互相和谐。

    如果自己创建变化规则也可以,如「叠加5%的黑色」或者「透明度变为80%」等等。无论采用哪种方法,确保所有颜色的深浅变化,都遵循统一的规则。

    图片 32

    △ 颜色加深、变浅的方法示例。from: Color Contrast for Better Readability | Viget, by: Tom Osborne

    「尝试—失败—再尝试」——这个过程可能会花费大量时间。 Zack Gehin 为 Widen Enterprises 创建色板的过程中,花了40个小时——测试、重选、调整。结果符合了他们的预期,表达出了他们期望的情感,并且满足了Acessibility standards。

    Zack Gehin 利用 Colllor 创建的色板示例:

    图片 33图片 34

    △ from: Dont let your color palette be an airball,by: Zack Gehin, 2017.8.16

    然后再将选好的颜色,放到组件、背景中去测试对比效果。

    1. 确定文字颜色

    这是一个系统化的工作,可以先从几个基本文本类型开始:

    • 主要文字颜色(primary text color): 段落、标签、其他主要文字。
    • 次级文字颜色(secondary text color): 表单辅助说明(form microcopy)、说明文字、表格标题,等。
    • 可交互文字颜色(interactive text color):主要是链接文字。
    • 错误信息文字颜色( inline error text color): 有的在一些交互控件旁边。
    • 禁用文字颜色(disabled text color):通常用在表单控件和按钮上。

    确保至少包含:主要,次要,链接和错误4种文本颜色。谨慎添加新的颜色,如三级文字颜色(teriary text color)、图标填充颜色。

    图标颜色一般可以直接沿用已设置好的 primary, secondary, interactive,error 的颜色。

    同样,先确定body text 的色值,从灰色入手。

    测算出在各个背景色上,可用的最低对比度的灰色。

    如果按「WCAG 2.0 AA 」的标准,下图的 #6B797F 就是白背景上文字的最浅灰色。

    图片 35

    △ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

    接下来测试选择「链接文本色」「错误文本色」。

    图片 36

    △ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

    经反复对比,最后确定,在白背景上,选择 以上2个颜色(对比度>4.5)。

    前文中,从各大网站/ App 中测量得出,

    • 未激活tab文字,对比度一般>3;
    • disabled text、placeholder,一般对比度是2左右(夜间模式可尽量满足3)。
    1. 检测文字色的对比度

    然后,将文字放在按钮上,检测对比度是否满足要求。

    不要忘记交互式状态,例如按钮,选项卡,列表组和链接的 hover,active 和 selected 状态。

    图片 37

    △ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

    将文字放在每一种背景色上测试文字对比度。可以用 EightShapes Contrast Grid 实时测量两两颜色的对比度是否达标。

    图片 38

    来回测试的同时,反复优化色板。

    图片 39

    △ from:Light & Dark Color Systems,by: Nathan Curtis

    1. 在不同环境下测试你的色板

    这是设计过程中最重要的步骤之一。

    调研确定用户使用你的产品的主要环境。 Human environment design 会帮助你确定哪些环境是必须要考虑的。

    环境测试很简单,把你的设备带到强日光下去、放在昏暗房间里,调低手机的屏幕亮度(许多手机快没电了的用户经常这样做)自己去感受测试。

    如果有些地方不好用,重新做。

    • 在不同显示器上测试你的色板

    虽然我们很多人都非常幸运,可以用很好的设备工作,但是世界上的很多人没有这么好的条件。我们很容易就习惯 Retina 或者 5k 的显示器,但如果用回老旧的低质量显示器,我们一定会惊奇自己用的是啥,图纸怎么能显示成这样。

    图片 40

    △ from: Dont let your color palette be an airball,by: Zack Gehin

    若想知道用户都在用什么显示设备,可以从 Google Analytics 上,或者其他你有权限的数据分析工具上获取数据。

    1. 确定不同色调的颜色组合方式

    图片 41

    △ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

    1. 输出色彩规范文档

    图片 42

    △ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

    六. 其他设计点

    1.Input 要有清晰的边界

    图片 43

    △ 一个不错的input 输入区域。

    输入框有明确的边界,这对行动/认知障碍的用户很重要。

    清晰的边界,可以让用户明确知道点击目标的位置和大小。如果没有清晰的边框,认知障碍用户可能很难找到输入框在哪。

    图片 44

    上图是 Medium 写文章的页面,没有任何线索告诉人点击区域在哪。

    而事实上,可点区域只有篮框内一小部分。

    图片 45

    上图2个写文章的截面,虽然也没使用传统的输入框形式,但是它们给用户提供更多的信息和线索。

    在这两个界面,用户可以点击下面空白区域的任意位置开始输入笔记;

    而且,note-taking 笔记的标题位于两条水平线之间,视觉线索更明显一点。

    1. 确定输入控件边框颜色时,要考虑到不同状态

    文本输入框,文本输入区域,radio-button ,都需要足够高的对比度以满足可见性和可用性。 控件的边框颜色非常重要,不能和背景色过于接近。

    主要考虑几种状态:获得焦点状态、默认状态、禁用状态、错误状态。

    图片 46

    △ from:Light & Dark Color Systems,by: Nathan Curtis

    3. 如果表单没有固定标签,那么占位符就要满足最低对比度要求。(对比度>4.5)

    图片 47

    △ from:7 Things Every Designer Needs to Know about Accessibility, by: Jesse Hausler

    但其实右下角 价格input那个,更好的做法,是将标签拿到外面来:

    图片 48

    △ from:7 Things Every Designer Needs to Know about Accessibility, by: Jesse Hausler

    1. 另外,还要注意「背景色A」放到「背景色B」上的情况

    比如,一张card,自己有背景色 pale grey,放到了一张大背景 cream 色上。这时要注意,2个颜色组合起来是否仍有足够高对比度。

    用一些装饰手法可以缓解微弱的对比,比如加边框,加阴影。

    图片 49

    △ from:Light & Dark Color Systems,by: Nathan Curtis

    七. 最后

    文字写出来不就是为了给人看的么,写上去又故意不让人看清,多尴尬。

    对比度足够高的字不仅能让人看得更清楚,还会让人读起来更快更顺畅。

    在产品设计的过程中,给推敲颜色留出应有的、足够的时间。

    别再让用户的眼睛受压迫了,别再让用户特别费劲地看东西了,别再给我们本忙碌的生活增加压力了——在设计中使用满足 WCAG 足够高的对比度吧,力求给用户的生活中,增加一些舒服的、合适的、愉悦的体验。

    本文由365足球外围官方网站发布于摄影技巧,转载请注明出处:色彩与转化率指南,8人机交互指南

    关键词:

上一篇:没有了

下一篇:没有了