建站资讯

让你的设计拥有高转换率的配色知识简明指南

作者:admin 发布时间:2020-08-01

我们总希望自己的设计能够拥有不错的转换率,但是高转换率并非一挥而就,都没有一劳永逸的万能方案,一切都是要从基础上着手。今天我们聊聊要做高转换率的设计,应当具备哪些色彩上的基本知识~ 对室内设计师而言,色彩是最强大的工具之一,不同的色彩能够唤起用户不同的情绪和不同的感受,这也是大家都熟知的事情。可假如你真的从零开始一个全新的设计项目就会发现,要拿出一套真正适合这个项目的色彩搭配是何其艰难。 为此,我开始着手撰写这篇涵盖了基础色彩理论和UX规则的快速参考指南。本文并非系统而完备的色彩设计说明,它更接近于一份为UI和UX设计项目而准备的色彩使用概述。 色彩理论 色彩理论中涵盖了许多内容,但是其中最基本的还是通过对比、互补和感染实现色彩与用户的互动: 互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的色彩搭配令双眼觉得和谐。最多见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。 对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。 色彩对于用户的情绪上的感染也是一个重要因素。 每次谈及色彩和配色,总是绕不过色轮。色轮上每个色彩在对称的位置上都有一个与之“相反”的色。 1-MGTsBa5RLRRdzbACtqiDwg 色轮的功能不只是为你展现出互补色。色轮以三原色(Primary Colors)红、黄和蓝为基础,两两混合创造出次色(Secondary colors)橙色、绿色和紫色。在这六个不同的色彩的基础上,加入白色能够创造出不同的色调,加入黑色营造出色度的差异。 创造高效的色彩搭配 想要构建一套可行的色彩搭配,通常有三种可靠可行的色彩搭配:三元色(Tradic),近似色(Analogous)和复合色(Compound)。 三元色。这种色彩搭配是几种色彩搭配中最均衡的,在色轮上选取三个位置互成120度角的三种色彩,以它们的位置为端点能在色轮内画一个等边三角形。 0-qUNX5cpaOKgvX04N 通过这个等边三角形,你能确保色彩搭配中的三种色彩带来的感召力、对用户的影响是均衡的,并且彼此之间能够形成可靠的搭配。 复合色。色轮上相互对称位置上的色彩构成互补色,而两组相邻互补色构成的色彩搭配则为复合色。这两组色彩的强对比是吸引用户专注力的重要手段。 0-AAXRr81-qjajurR_ 举个例子,红色和绿色就是一组互补色。iOS 中电话图标和右上方的数量提示标识就很好的构成了色彩对比。 1-OjNfcCT96VSmWeV6tu68ew 近似色。色轮上彼此相邻的色彩是类似色,它们能在色彩上营造出协调而连续的感觉。虽然这种配色不是很好把控的,但是有诀窍,就是注意选取有感召力的色调作为核心,这样可以利润最大化利用整个方案。一套类似色的色彩搭配通常是在色轮的同一区域内选取色彩的搭配而成。 0-GmWqCn_trRfbguAX 黄色和橙色就能很好的搭配出一套色彩搭配。 1-1KKhHrF-XE01sfyzmrLDTw 著名的任务管理器类工具Clear 就是借助类似色色彩搭配将不同优先的任务视觉化的处理。 1-Tm0nkWNmJvPU9-liGZcqYw 类似色色彩搭配能够用来给APP或者网站营造特定的情绪和氛围。比如医疗类应用Calm 就使用了蓝色和绿色这样的类似色配色来尽量让用户感到轻松和宁静。 1-QwRD0_OQWx8t7kep-Yo7Vg 学习搞定色彩搭配最好的方法就是不断的练习。创造色彩搭配的工具很多,Adobe Color CC 无疑是相当可靠的选择。Color CC的调色面板非常的直观,选中的色彩都能够进行单独的修改,方案制定完成之后只需简单的点击几下就能很好的保存下来。 文本色彩 当你在为文本进行色彩选取的时候,需知道文本和周围的色彩如何彼此之间对比度低的话,用户是很难进行分辨的。当这种配色出现在手机端上之时,户外的炫光和屏幕本身的反光可能让这种情况更加严重。 1-YaITIxoBpJUInZUbwN3q9w 色彩低对比度让用户的眼睛无法聚焦和分辨信息。 WC3 的网络内容可访问性指南 能帮你更好的解决网页中色彩和对比度的问题。这份指南中规定了对比度的最低标准,确保低视力的用户起码能看清文本。根据WC3的规范,文本色彩和背景之间的对比度会根据光照强度分为1-21总计21个不同的级别。对于正文文本和图片文本之间,他们提出了如下的建议: 较小的文本应当确保至少和背景之间有4.5:1的对比度比率 较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1 1-qbGXd_6HlemAs8MJQmHXmw 一旦你对配色作出了选取,那么用绝大部分的常用设备来验证这个配色的对比度是非常必须的。测试结果和用户的实际体验是挂钩的,如果识别度不太好,那么应当作出适当调整。 色彩对转换率的影响 UI设计中,色彩的搭配不仅是一种装饰,合理的设计能够对产品和业务产生直接的影响。色彩对于产品的转换率而言有着诸多影响,它作用于不同的UI控件,直接地影响着用户的交互和体验。而色彩对于转换率的影响,最值得一提的应该是行为召唤(CTA)按钮。 一个CTA 按钮通常牵涉到4件事情:位置,形状,文案和色彩。如果这四个因素在设计上都能良好的配合,那么这就是一个效果良好的CTA按钮了。在按钮的颜色选取和转 换上的争议多是世界范围内争吵的最多也是最常的一个问题了。有大量的A/B 测试的测试数据显示,CTA 按钮的色彩变化对于注册等交互行为有着重大的影响。HubSpot 曾经共享过一个著名的按钮颜色测试: 1-Tz-cZFhVxGvmIF_RAul5_A Performable 所展示的A和B两个版本的按钮颜色测试,页面上的内容都是一样,测试的是颜色对于用户的影响。 虽然大家都预测绿色的按钮效果会更好,但是红色的按钮预期效果比绿色按钮高了21%。 所以,同样的道理,这样的测试结果并不能覆盖所有的情况。并没有一种神奇的色彩能够应用于所有的网页和APP,实际的情况需要根据你的受众、基于测试来进行选取,看看用户会怎样决策。 对比度是关键 假如你想让用户点击某个东西,那么尽量让它出类拔萃。假如你的网站或者APP中使用了大量的蓝色,那么用户可能不会立刻注意到蓝色的按钮,就像浅色 的背景下,浅色的按钮不会显眼。用户往往会更倾向于CTA按钮也是由于它们对比更明显,会因为鼠标悬停、点击而发生状态改变,让人无法忽视。 1-3xIHPKMlIPJzd5olK1yTeg 对色彩的基本知识有完整而深入的理解,是做好网页和APP设计的重要前提条件。这些色彩理论是做好UI设计的重要基石,提升的空间非常的大,怎么提 升还是要在于你的努力方向。不论你此刻选取的色彩是啥,它们对于整体是一定会有影响的,从对比度、协调度和对用户情绪的感召力上,都有着直接的作用。

以上内容由先锋创易(p>


与我们联系

先锋创易能够一直与客户建立长期合作关系,主要由于我们提供出色的品牌形象设计服务。
作为一家品牌形象设计和互动网络科技公司,我们透过策略、创意和服务的互相配合协调,令品牌营销更高效率。


收缩