【UI设计】色彩设计指南

色彩在互联网UI设计师的日常设计中起着定生死的作用，它是设计的灵魂，舒适的色彩搭配可以让设计师一遍定稿，他们日常工作中大部分都是在与色彩的博弈中度过的，虽然用户可能不懂色彩原理，可是用户天生都是色彩的感受家，什么样的色彩搭配美，通常他们瞄一眼就会有定论，不用你去辩解太多，不好的搭配，纵使有千万种理由，也说服不了用户，所以好好研究色彩以及每一种色彩传递的情感对做好设计至关重要。 这不，亿图从7个方面讲述UI设计中色彩的用处： 一、 色彩定义 二、 色彩三属性 三、 三种常见色彩模型 四、 色彩的语意及它的应用 五、 色彩在 线下 - 商场 和 线上 - B端设计 的应用 六、 色彩在B端设计中的作用 七、 B端色彩设计使用的原则

色彩设计指南

• 05
• 04
• 03
• 02
• 01
• 内容凸显
• 定色调意识
• 带有主色调的灰
• 无彩色
• 6:3:1原则
• 卡片用白色，底色选灰色，因卡片内容重要，需高亮色突显。白色使内容突出，灰色背景则显后退，形成前后对比，有助于内容传播。这种设计能更有效地引导视觉焦点，增强信息传达效果。
• 设计前一定要提前与需求方定好主色调，这样设计交付的产品才不会偏离正确的轨道，避免大面积返工修改。
• 在设计中用跟主视觉相符的灰，会使得界面更加的高级、协调与美观
• 为了保证画面风格的统一、干净整洁，文字颜色、边框颜色、以及边框背景色都需要用到无彩色，通常通过颜色的深浅来区分信息的层级关系。
• 色彩设计应遵循6:3:1原则：60%的主色，30%的次要色，10%的点缀色； 按照这个规则的配色会显得高级。
• 七、B端色彩设计使用的原则
• 人的性格多样，色彩亦然。了解色彩特性，有助于更好地应对客户需求。活泼、文静、沉稳、深邃等色彩特性，在设计时更加游刃有余，精准拿捏色彩，满足客户的多样化设计需求。
• 色彩可以传递性格
• 选择合适的色彩对比度可以增强文本的可读性，减少用户的视觉疲劳。例如，黑色文字在白色背景上通常比较容易阅读。
• 舒适的色彩搭配可以提升用户体验
• B端设计中通常可以通过不同的色彩来区分功能区域，可以让用户更清晰地了解界面的结构和布局，例如，导航栏使用一种特定的颜色，而内容区域则使用另一种颜色。
• 颜色做信息区分明显
• B端设计大面积运用品牌色能强化品牌形象。采用与品牌标志相近的色彩，便于用户快速识别记忆。统一不同B端产品的色彩方案，可建立品牌连贯性和一致性，增强用户信任。
• 增强用户对品牌的信任
• 流程设计中，红色代表失败，绿色代表成功，橙色代表信息有告警，蓝色代表着链接，同时不同的按钮颜色也可以很好的区分按钮状态，在反馈结果和状况方面，色彩起着非常重要的作用。
• 利用鲜明色彩即时向用户传达操作结果与当前状态
• 减少焦虑 提高专注度
• 提高产品的复用率
• 科技行业引领 传统与延续
• 系统复用
• 行业准则
• 心理影响
• 04
• 03
• 02
• 稳定性 专业性
• 视觉特性
• 01
• 传递 人格属性
• 提升 用户体验
• 明确 信息区分
• 增强 品牌传达
• 六、色彩在B端设计的作用
• 告知 结果状态
• 线上 - B端设计：为什么蓝色在B端设计中广泛应用？
• 商场通过特定色彩组合展现个性与风格，吸引目标顾客。独特鲜明的色彩搭配加深顾客印象，不仅彰显品牌特色，还显著提升品牌的记忆度与辨识度，让顾客在众多商场中轻松记住并辨认出该商场。
• 塑造品牌形象
• 引导消费行为
• 商场用色彩分区帮助助顾客快速寻找兴趣区，提升效率。同时，鲜艳色彩突出重点商品，吸引顾客目光，引导购买，提升销售。
• 缓解压力
• 现代生活中，人们常常面临各种压力。走进一个多彩热烈的商场，可以暂时摆脱日常的烦恼和压力，享受购物的乐趣。
• 营造愉悦氛围
• 当顾客进入一个色彩丰富的商场时，会感受到一种愉悦和轻松的氛围，从而更愿意在商场中停留和购物。
• 即使在较远的距离或在繁忙的街道上，多彩热烈的配色也能让商场更容易被发现，提高商场的知名度和曝光度。
• 更容易被看到
• 色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来，吸引过往行人的目光，激发他们的好奇心和探索欲。
• 吸引顾客注意力
• 6
• 5
• 4
• 3
• 2
• 1
• 线下 - 商场：商场的色彩为什么总是多彩热烈的？
• 五、色彩在 线下 - 商场 和 线上 - B端设计 的应用
• 粉色代表甜美、浪漫、可爱和温馨 粉色是一种温暖的色彩，能够缓解紧张情绪，营造温馨浪漫的氛围，使人感到舒适和放松。‌
• 青色寓意清新、宁静和沉稳 青色是一种带有蓝色和绿色的颜色，既有蓝色的专业感、信任感，也有绿色的生机感、希望感。
• 蓝色代表冷静、忠诚和信任 它常与沉稳、深邃的情感相关，能带来宁静、平和的心境，也象征着智慧和理性。
• 紫色象征神秘、优雅、高贵和浪漫 它常给人一种优雅、奢华的感觉，同时也带有神秘莫测的氛围，与梦幻、创造力等情感相关。
• 粉色 ec80b3
• 青色 5ccee9
• 蓝色 7085ff
• 紫色 9177ec
• 绿色代表平静、和谐与生机 绿色常与大自然相关，给人带来安宁、放松的感觉，也象征着成长、希望和新生。
• 绿色 5bdc98
• 黄色象征富贵、快乐、开朗和乐观 黄色能带来明亮、愉悦的情绪，代表着阳光、温暖和智慧。
• 黄色 ffc34c
• 橙色传达温暖、欢快和积极向上的情感 橙色常与乐观、友好、创造力联系在一起，给人以活力充沛和充满希望的感觉。
• 橙色 fe864b
• 红色代表热情、活力、喜庆、强烈的情感和爱 红色象征着激情、勇气和行动力，也常与兴奋、热烈的情绪相关。
• 红色 ff4757
• 四、色彩的语意及应用
• ‌CMYK模型‌ ‌CMYK模型‌是一种用于彩色印刷的套色模式，它利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓的“全彩印刷”。 这四种标准颜色分别是青色（Cyan）、洋红色（Magenta）、黄色（Yellow）和黑色（Black）。‌ C青：Cyan，以百分比值（0%-100%）表示 M品红：Magenta，以百分比值（0%-100%）表示 Y黄：Yellow，以百分比值（0%-100%）表示 B黑：Black，以百分比值（0%-100%）表示 特点：CMYK模式则是一种依靠反光的色彩模式 应用场景：在印刷行业中有着广泛的应用，通过调整这四种颜色的比例和强度，可以实现丰富的色彩效果。
• RGB模型 RGB模型是一种加色模型，通过红（Red）、绿（Green）、蓝（Blue）三种色光的不同比例相加来产生多种多样的色光。RGB模型使用红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各种颜色。 R红：Red，以数值（0-255）表示 G绿：Green，以数值（0-255）表示 B蓝：Blue，以数值（0-255）表示 特点：颜色范围广泛‌：约上千万种；标准应用：屏幕显示器等应用标准；设备依懒性：颜色显示依赖设备 应用场景：显示器系统、彩色阴极射线管、彩色光栅图形显示器；扫描仪、LED显示技术等领域
• HSB模型 HSB模型也叫HSV模型，其中H代表色相，即颜色的种类；S代表饱和度，即颜色的纯度；B(V)代表亮度，即颜色的明亮程度。 H色相：Hue，以角度（0°-360°）表示 S饱和度：Saturation，以百分比值（0%-100%）表示 B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示 特点：视觉上直观易懂，能够通过简单的数字判断颜色的色相、饱和度和亮度。 应用场景：UI设计中，用于制定色板、渐变色搭配等。通过调整色相、饱和度和亮度，可以轻松地调整和匹配颜色，使设计更加协调和美观。
• 三、三种常见色彩模型
• 饱和度（纯度）是指同一色别的纯净度和鲜明度的变化。从色光的角度而言，色光波长越单一，饱和度越高。红色纯度常最高，绿色较低。同色相深浅不同，饱和度各异。黑白色光渗入会改变饱和度和明度。
• 饱和度
• 明度是指色彩的明暗程度。一般在反光率相同的情况下，不同色别的明暗程度不同。如黄色光比红色光更明亮，而红色光则比青色光要明亮。
• 明度
• 色相是指不同颜色之间的差别，即不同颜色的表象和名称，每个颜色都有自己的专属ID，如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示，人的眼睛可分辨出的色别有180种左右。
• 色相
• 二、色彩三属性
• 在数字图像处理中，色彩通常通过颜色模型（如RGB、CMYK等）来定义，这些模型通过不同比例的原色或色料混合来表示各种颜色。
• 计算机
• 色彩是光的属性，当光波通过物体时，物体会吸收某些波长的光，而反射或透射其他波长的光，这些被反射或透射的光波长度决定了我们看到的颜色。
• 物理学
• 色彩是艺术创作的重要元素，它不仅关乎视觉感受，还与情感、文化、象征意义相关联。
• 色彩是传达信息、影响情绪和创造美感的关键工具
• 设计学
• 艺术 学
• 心理学
• 色彩是人脑对光波长的视觉感知，不同的波长刺激视网膜上不同类型的感光细胞，进而产生不同的色彩感觉。
• 一、色彩定义