UI设计师须知,UI设计中的3C要素的特点及属性

2018-02-26  5813 分类:设计资讯

UI设计师须知,UI设计中的3C要素的特点及属性

UI设计重要的不在于操作什么样的软件,而是你的想法,所以自己的想法,设计,创意对于学习UI设计才最重要。美好的事物总是会让人心神向往。而增加美观度,就是让产品成为美好事物的必备条件。而这正是UI设计所要为大家解决的问题。为了让大家更加熟悉和掌握UI设计,品索教育特意为大家分享UI设计中的3C要素的特点及属性,包括色彩(Color)、对比度(Contrast)和内容(Content)。

在如今的UI设计领域也同样有着类似的三要素,它们也是3C,不过和商业模式中的3C不同,它们分别是色彩(Color)、对比度(Contrast)和内容(Content)。虽然它们的基本概念并不复杂,但是在实际的UI设计项目当中,它们比看起来要复杂得多。

UI设计3C要素.jpg

UI设计3C要素一:色彩(Color)

色彩是绝大多数设计给用户传递的最显著的视觉元素之一。设计师和非设计师都会常常聊到色彩,对于不同色彩的大家有着不同的感受和体验。色彩本身常常就能够创造出独特的情感体验,即使没有其他的元素。任何可见的色彩,呈现在任何人面前,几乎都能够获得反馈。这也使得色彩在设计中有着独特的地位。

色彩(Color)2.jpg

色彩(Color)影响因素,包括以下五个方面:

1.可用性和可读性

2.品牌认知度和品牌意识

3.用户视觉和交互

4.信息组织和用户流程

5.设计的整体体验

设计师使用色彩可以创建的内容,换言之,色彩的应用范围:

清晰易懂的导航

直观的交互

为整个项目设定情绪

创建强大的可供调用的元素呈现设计的主题,营造氛围

但是这并不是意味着将不同的色彩简单的混合到一起,这一点我们必须要注意和理解的!

色彩(Color).jpg

设计师通过创建配色方案,系统地对品牌和UI界面的色彩进行管理,这确保了品牌和UI 在色彩的运用上保持着高度的一致。配色方案中的具体搭配是植根于色彩理论的。色彩从来都不是越多越好,通常配色方案当中,色彩数量要控制在3种左右。Mockplus 推荐在配色中3中色彩的占比是6:3:1,而这一点和室内设计配色的规则是一致的。这种配色的策略和黄金比例在内核上是一致的。

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


UI设计3C要素二:对比(Contrast)

元素之间的差异往往能够借助对比来凸显。创建富有层次的视觉结构,让内容的可读性更强,让信息更容易被用户所理解和吸收。对比强烈的元素让用户轻松地注意到构成对比的元素,创造自然的视觉模式和用户流程。对比度的重要性之所以如此之高,很大程度上是因为它广泛的适用性和显著的实用性。

对比(Contrast)2.jpg

对比(Contrast)1.jpg

对比是通过对立的差异化来创造吸引力。看似不同的元素实际上可以搭配起来,达到一目了然的效果。要知道对比是否达到了你的预期效果,在查看屏幕上元素的时候,不妨考虑下面的几个因素:可读性:文本和图形是否都清晰可识别?清晰度:一个元素和另外一个元素之间能否轻松分辨?可访问性:你的设计是否能够服务更多的用户?上下文环境:用户是否能在特定的地点特定的场合明白你的设计?


UI设计3C要素三:内容(Content)

内容(Content)是3C要素中最后的一个组成部分。用户界面中的内容非常丰富,涵盖了从图像、文字、图标、品牌等所有相关的信息。内容还包括视频以及各种微文案甚至UI控件上的说明和标签。所有的这些元素汇聚到了一起,构成用户界面,甚至让设计变得优秀和特别。为什么用户会停留在这个界面而不是去别的地方?原因就是内容。只有内容是不够的,内容本身要足够精彩。高分辨率的图片,涵盖有用信息的文本,和你的竞争对手的内容相比,你所创建的内容必须更加优秀,更加有料,更加突出。

内容(Content)1.jpg

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

内容(Content)2.jpg


UI 设计的魅力在于,你不仅需要适当的技巧,更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现,包括视觉元素与功能操作在内的所有东西都需要完整一致。

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


猜你喜欢