火星网校
超实用的产品配色指南三部曲:了解选色逻辑|北京蓝蓝 UI 设计公司
发布时间：2024-02-22 17:49:39 浏览量：232次
首先说明一下标题为什么用了 “选色逻辑” 而非 “配色逻辑”，在笔者理念中产品配色的重点不在于 “配”，而在于 “选”。“配” 是指在作品中如何组织、编排颜色，是为了画面更好看，而 “选” 是指经过理性思考、严谨推导得出的解决方案，是为了色彩更适用。那如何选出更适用的色彩呢？这便是本章探讨的内容 —— 色彩的选择逻辑。
上期回顾：
超实用的产品配色指南三部曲：学会色彩管理
本系列文章共分为三个篇章：1.《学会色彩管理》2.《了解选色逻辑》3.《我的配色实践》，笔者将通过三个篇章向大家介绍一些产品配色的基础知识和方法，希望配色时我们有明确的思路和逻辑，帮助我们输出更成熟的配色方案。
产品设计中会将色彩依次分为：主色、辅助色、功能色及中性色，不同色彩选择逻辑是不一样的，我们会逐一进行介绍。由于功能色业内已形成固定认知，绿色代表成功、红色代表错误，事实上已经不用再去选色，所以本章暂且不表。
一、主色
主色在产品用色中占据主要场景，关乎品牌调性与产品印象，选色时可以从产品情绪、行业属性、目标用户三个层面去思考。
1. 产品情绪
颜色本身并无过多内涵，只是人眼对于可见光的视觉感知。但随着人类与自然共处，逐渐将一些对自然事物的心理感知投射到颜色上，此时颜色便产生了不同含义。例如火可以带给人类温暖，使用不当也可以招至灾祸，所以火焰的红色便有了热情、警示的含义。再如烧不尽，春又生的野草，让人们对绿色有了成长与希望的感受。色彩的不同内涵也催生了一门学科叫做 “色彩的情绪价值”，最早研究色彩情绪价值的学者是日本照明大师大庭三郎，他在《色彩的世界》一书中提出了基于东方人群的色彩情绪价值表，解析了不同色彩对人类的物化映射和心理映射。所以在产品设计之前会建立情绪版，确定产品情绪为色彩选择提供依据。
2. 行业属性
不同行业在色彩选择上会有不同偏好，如科技行业更喜欢蓝色，能源、食品行业更喜欢绿色。这背后也催生了两种选色逻辑：一、符合行业偏好，二、异于行业偏好。选择一可以使你的产品处于相对安全的境地，它的色彩不会引起用户反感和不适，但缺乏个性。选择二会使你的产品迅速从同行中跳脱出来，同时也表达了个性。具体使用哪种逻辑需要你对产品策略做好充足规划。下面是一份来自 skilled 公司的调查报告，他们从行业角度出发，调查并研究了色彩在不同行业的流行程度，最终规划出了三个级别：流行行业、不流行行业、可能并不适合使用该颜色的行业。此报告不作为绝对权威，仅作为选色参考。
3. 目标用户
作为产品最终使用者，用户喜好也作为选色必要参考。首先不同文化对用户喜好产生影响，虽然人类群体对色彩的心理反应都很类似，但研究表明不同文化下人们对于同种颜色会有不同反应。例如股票交易，国际市场通常是绿涨红跌，而在中国却是红涨绿跌。这是由于红色在西方国家代表财政赤字，绿色代表财富；而中国正好相反，红色对于中国人民有着非同一般的情感，红色常常意味着喜事正在发生。
其次不同年龄段用户，色彩喜好也不尽相同。Faber Birren 在他的《色彩心理学》一书中有提到关于年龄和色彩的实验，结果显示年轻人倾向于鲜艳、明亮、高饱和的色彩，而婴幼儿、老年人更喜欢柔和、低饱和的色彩。
最后用户性别也影响着色彩喜好，男性更喜欢蓝色、绿色，而女性除了蓝色更喜欢紫色、粉色。
二、辅助色
辅助色常与主色搭配使用，在产品配色中起着非常重要的作用。选色时可从搭配效果和作用方式进行考虑。
1. 搭配效果
不同色彩搭配可以产生丰富的视觉效果，如何确保 “效果” 好看是我们需要思考的。工作中常有设计师根据以往经验进行选色，这是一种感性的选择方式，往往会忽略经验以外的搭配，而经验以外可能存在着更好的效果。所以我们需要进行理性选择，何为理性选择？即通过辅助色的定义，匹配到所有的辅助色，然后进行删减，直到选出最好看的颜色。
不同辅助色的定义：
同类色：色相相差在 15 度左右的颜色。
类似色：色相相差在 30 度左右的颜色，属于较弱对比色。
邻近色：色相相差在 60 度左右的颜色。
中差色：色相相差 90 度左右的颜色，属于中等对比色。
对比色：色相相差 120 度左右的颜色，属于强对比色。
互补色：色相相差 180 度左右的颜色，属于高强度对比色。
以上得到的色彩未必是最好看的，他们和主色并不处于同一色彩层级。为了获取更好的搭配效果，需要进行饱和度、明度调整，此过程也称为色彩的视觉感官校准。
2. 作用方式
辅助色的作用方式可以是强化信息，也可以是区分业务。强化信息是指通过不同颜色对信息进行视觉分类，方便用户接收主要信息。对于强调的信息可以使用对比度高、色相较暖的色彩，暖色具有前进性可以使你的信息更突出。例如京东拍拍商品列表中的促销信息使用了橘色，饿了么的商品列表使用了橘色和红色。
区分业务针对整个产品，不同业务使用不同色彩，方便用户形成固定认知，快速定位业务。使用什么色彩需全局考虑，如色彩与业务的相关性、产品的整体调性等。此处列举两个例子，京东 APP 的京东超市使用了绿色区分此项业务，京东超市主要售卖生鲜食品，绿色可以给到用户 “新鲜”“安全” 的暗示，运用到此处再适合不过。Twitter 在 22 年初新增了 Twitter Space 功能，用户可以轻松创建或加入纯音频聊天室，Twitter 在设计这项功能时使用了紫色，紫色和 Twitter 的蓝色同属冷色，这样可以使整个产品的调性更加统一。
三、中性色
中性色是由黑色、白色及黑白调和的各种深浅不同的灰组成，是产品中看到的最多的颜色，主要用于文本显示和页面背景。有人觉得中性色的推导不需要经过太多思考，且行业内给到一些具体色值可直接使用，如 333、666、999 这类的中性色。使用这类颜色没有太大问题，但会使你的配色略显普通，其实关于中性色的选择还有很多地方值得探索。
1. 色阶调整
中性色的色阶可以通过两种方式调整，改变明度或透明度。相信大家都有这样的体会，如果将灰色文本放置到其他色彩之上，文本会开始变得难以阅读，其原因是色彩对比度不够造成视觉区分困难。如果此时文本的灰色是通过调整透明度得到的，那么文本的灰色会叠加到其他色彩之上，从而解决这个问题。如果你的产品也会遇到类似的使用场景，不妨使用调整透明度的方式得到你的中性色。
2. 色彩倾向
上文提到类似 333、666、999 这样的中性色会使你的配色略显普通，原因是此类色彩属于纯灰没有色彩倾向。我们在选择中性色时可以适当混入蓝色，蓝色被普遍认为是安全、舒适的色彩，在视觉上可以缓解焦虑和压力，具有蓝色倾向的中性色可以使文本更具可读性。除此之外也可以在中性色中叠加品牌色，使你的中性色更具内在逻辑和品牌倾向。
3. 无障碍设计
无障碍设计中对文字颜色的对比度有明确建议，对于 AA 级别正文文字的颜色对比度至少为 4.5:1，标题或加粗的文字颜色对比度至少为 3:1。我们为文字选择中性色时通常会定义四个级别：主要文字、次要文字、提示文字、禁用文字，提示文字对应级别三，需要满足颜色对比度至少为 3:1 的要求，禁用文字属于不可用状态可以低于对比度至少为 3:1 的要求。
通过以上介绍可以发现产品配色不仅仅是一项视觉工作，背后更是蕴含了大量的调研与思考，对于配色只有完美回答出 “为什么要这样选色” 时，我想才会得到最优秀的方案。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了 UI 设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加 vx 蓝小助 ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢～～希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计 (www.lanlanwork.com) 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的 UI 界面设计、BS 界面设计 、 cs 界面设计 、 ipad 界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI 设计公司、界面设计公司、UI 设计服务公司、数据可视化设计公司、UI 交互设计公司、高端网站设计公司、UI 咨询、用户体验公司、软件界面设计公司
文章来源：优设网 作者： 稣稣稣稣
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 物联网APP UI设计:创造智能硬件领域的沉浸式体验
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
最新文章
