当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >UI设计中的3C要素：色彩、对比和内容！

UI设计中的3C要素：色彩、对比和内容！

发布时间：2018-11-17 19:57:24

在以往的商业模式当中，常常讲究“3C”，分别是公司（company）、客户（customers）和竞争对手（competitors）。在如今的UI设计领域也同样有着类似的三要素，它们也是3C，不过和商业模式中的3C不同，它们分别是色彩（Color）、对比度（Contrast）和内容（Content）。虽然它们的基本概念并不复杂，但是在实际的UI设计项目当中，它们比看起来要复杂得多。今天的文章，我们就来聊一聊UI设计中的3C要素。

色彩（Color）

色彩是绝大多数设计给用户传递的最显著的视觉元素之一。设计师和非设计师都会常常聊到色彩，对于不同色彩的大家有着不同的感受和体验。

色彩本身常常就能够创造出独特的情感体验，即使没有其他的元素。任何可见的色彩，呈现在任何人面前，几乎都能够获得反馈。这也使得色彩在设计中有着独特的地位。

色彩强大，可以成就设计，也能毁掉设计。色彩在界面当中影响着许多不同的功能和属性：

色彩会影响到：

●可用性和可读性

●品牌认知度和品牌意识

●用户视觉和交互

●信息组织和用户流程

●设计的整体体验

设计师可以使用色彩创建：

●清晰易懂的导航

●直观的交互

●为整个项目设定情绪

●创建强大的可供调用的元素

●呈现设计的主题，营造氛围

但是这并不是意味着将不同的色彩简单的混合到一起。

配色方案是控制设计当中不同色彩组合的合集。设计师通过创建配色方案，系统地对品牌和UI界面的色彩进行管理，这确保了品牌和UI 在色彩的运用上保持着高度的一致。

配色方案中的具体搭配是植根于色彩理论的。色彩从来都不是越多越好，通常配色方案当中，色彩数量要控制在3种左右。Mockplus 推荐在配色中3中色彩的占比是6:3:1，而这一点和室内设计配色的规则是一致的。这种配色的策略和黄金比例在内核上是一致的。

另外，还有一种策略，是基于黑白两色来构建整个设计，然后再加入更多的其他色彩，将整个配色方案丰富起来。黑白两色确保了整个设计的轮廓足够清晰，不过在后续加入配色的时候，要注意色彩的数量，以及色彩之间的对比度。而这也正好牵涉到第二个“C”，也就是 Contrast，对比。

对比（Contrast）

元素之间的差异往往能够借助对比来凸显。创建富有层次的视觉结构，让内容的可读性更强，让信息更容易被用户所理解和吸收。对比强烈的元素让用户轻松地注意到构成对比的元素，创造自然的视觉模式和用户流程。

对比度的重要性之所以如此之高，很大程度上是因为它广泛的适用性和显著的实用性。在控制对比度的时候，你需要明确对比度通常所涉及的元素类型和属性：

●色彩对比

●尺寸对比

●方向对比

●空间对比

●形状对比

在探讨UI的可访问性的时候，对比度始终是关键性的因素。在A11Y这个力求提升网页可访问性的项目当中，他们对于对比有下列一系列的建议：在配色的时候，借助色轮选择处于相对位置的对比色，让视觉上的对比足够明晰；在选择字体的时候，借助不同类型的字体差异，来创造视觉上的对比，也是如今网页设计中经常用到的技巧。

空间上的对比营造也很有技巧，使用不同的留白来营造疏密对比。如果你想让某一部分内容更容易吸引用户的注意力，不妨让它周围有更多的留白。

简而言之，对比是通过对立的差异化来创造吸引力。看似不同的元素实际上可以搭配起来，达到一目了然的效果。

要知道对比是否达到了你的预期效果，在查看屏幕上元素的时候，不妨考虑下面的几个因素：

●可读性：文本和图形是否都清晰可识别？

●清晰度：一个元素和另外一个元素之间能否轻松分辨？

●可访问性：你的设计是否能够服务更多的用户？

●上下文环境：用户是否能在特定的地点特定的场合明白你的设计？

内容（Content）

这是3C要素中最后的一个组成部分。用户界面中的内容非常丰富，涵盖了从图像、文字、图标、品牌等所有相关的信息。内容还包括视频以及各种微文案甚至UI控件上的说明和标签。

所有的这些元素汇聚到了一起，构成用户界面，甚至让设计变得优秀和特别。为什么用户会停留在这个界面而不是去别的地方？原因就是内容。

只有内容是不够的，内容本身要足够精彩。高分辨率的图片，涵盖有用信息的文本，和你的竞争对手的内容相比，你所创建的内容必须更加优秀，更加有料，更加突出。

这必然是一个艰巨的任务。你需要有所坚持，有所相信，你需要让用户看到内容的真实，需要和你的情感产生共鸣。

结语

将UI界面中的色彩，对比和内容放在一起构成3C要素并不仅仅是因为它们的单词开头都是字母C，而是它们本身在UI设计中都占据这足够突出的地位，有着无与伦比的重要性。在策略上，围绕着这3C要素来设计，能让你的UI界面更加富有凝聚力。

（本文转载于：优设网，原作者：CARRIE COUSINS，原文地址：http://www.uisdc.com/user-interface-color-contrast-content）

上一篇 2011年网页设计趋势全面分析

下一篇 UI设计新人容易犯的7个细节错误，你都知道吗？

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

知道了这17种剪辑技巧，做短视频博主上热门洒洒水啦！

电影剪辑通常被称为“隐形的艺术”，尽管剪辑师的名号不如导演的名号响，但是如果缺少了剪辑师对拍摄素材的二次加工，电影作品将缺少其......
迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......