今天就和大家来聊一聊 3C 元素当中的三个要素, 它们分别是色彩 (Color) 对比度 (Contrast) 和内容 (Content) 虽然它们的基本概念并不复杂, 但是在实际的 UI 设计项目当中, 它们比看起来要复杂得多今天的文章, 我们就来聊一聊 UI 设计中的 3C 要素
色彩(Color)
色彩是绝大多数设计给用户传递的最显著的视觉元素之一设计师和非设计师都会常常聊到色彩, 对于不同色彩的大家有着不同的感受和体验
色彩本身常常就能够创造出独特的情感体验, 即使没有其他的元素任何可见的色彩, 呈现在任何人面前, 几乎都能够获得反馈这也使得色彩在设计中有着独特的地位
色彩强大, 可以成就设计, 也能毁掉设计色彩在界面当中影响着许多不同的功能和属性:
色彩会影响到:
可用性和可读性
品牌认知度和品牌意识
用户视觉和交互
信息组织和用户流程
设计的整体体验
设计师可以使用色彩创建:
清晰易懂的导航
直观的交互
为整个项目设定情绪
创建强大的可供调用的元素
呈现设计的主题, 营造氛围
但是这并不是意味着将不同的色彩简单的混合到一起
配色方案是控制设计当中不同色彩组合的合集设计师通过创建配色方案, 系统地对品牌和 UI 界面的色彩进行管理, 这确保了品牌和 UI 在色彩的运用上保持着高度的一致
配色方案中的具体搭配是植根于色彩理论的色彩从来都不是越多越好, 通常配色方案当中, 色彩数量要控制在 3 种左右 Mockplus 推荐在配色中 3 中色彩的占比是 6:3:1, 而这一点和室内设计配色的规则是一致的这种配色的策略和黄金比例在内核上是一致的
另外, 还有一种策略, 是基于黑白两色来构建整个设计, 然后再加入更多的其他色彩, 将整个配色方案丰富起来黑白两色确保了整个设计的轮廓足够清晰, 不过在后续加入配色的时候, 要注意色彩的数量, 以及色彩之间的对比度而这也正好牵涉到第二个 C, 也就是 Contrast, 对比
对比(Contrast)
元素之间的差异往往能够借助对比来凸显创建富有层次的视觉结构, 让内容的可读性更强, 让信息更容易被用户所理解和吸收对比强烈的元素让用户轻松地注意到构成对比的元素, 创造自然的视觉模式和用户流程
对比度的重要性之所以如此之高, 很大程度上是因为它广泛的适用性和显著的实用性在控制对比度的时候, 你需要明确对比度通常所涉及的元素类型和属性:
色彩对比
尺寸对比
方向对比
空间对比
形状对比
在探讨 UI 的可访问性的时候, 对比度始终是关键性的因素在 A11Y 这个力求提升网页可访问性的项目当中, 他们对于对比有下列一系列的建议: 在配色的时候, 借助色轮选择处于相对位置的对比色, 让视觉上的对比足够明晰; 在选择字体的时候, 借助不同类型的字体差异, 来创造视觉上的对比, 也是如今网页设计中经常用到的技巧
空间上的对比营造也很有技巧, 使用不同的留白来营造疏密对比如果你想让某一部分内容更容易吸引用户的注意力, 不妨让它周围有更多的留白
简而言之, 对比是通过对立的差异化来创造吸引力看似不同的元素实际上可以搭配起来, 达到一目了然的效果
要知道对比是否达到了你的预期效果, 在查看屏幕上元素的时候, 不妨考虑下面的几个因素:
可读性: 文本和图形是否都清晰可识别?
清晰度: 一个元素和另外一个元素之间能否轻松分辨?
可访问性: 你的设计是否能够服务更多的用户?
上下文环境: 用户是否能在特定的地点特定的场合明白你的设计?
内容(Content)
这是 3C 要素中最后的一个组成部分用户界面中的内容非常丰富, 涵盖了从图像文字图标品牌等所有相关的信息内容还包括视频以及各种微文案甚至 UI 控件上的说明和标签
所有的这些元素汇聚到了一起, 构成用户界面, 甚至让设计变得优秀和特别为什么用户会停留在这个界面而不是去别的地方? 原因就是内容
只有内容是不够的, 内容本身要足够精彩高分辨率的图片, 涵盖有用信息的文本, 和你的竞争对手的内容相比, 你所创建的内容必须更加优秀, 更加有料, 更加突出
这必然是一个艰巨的任务你需要有所坚持, 有所相信, 你需要让用户看到内容的真实, 需要和你的情感产生共鸣
来源: http://sc.chinaz.com/info/180226523905.htm