AAA教育-大数据培训 Python培训 产品经理培训 UI设计师培训

全国统一咨询热线/400-0100-444

AAA教育百度营销大学战略合作伙伴

>>报名须知

首页 >行业资讯 >

色彩在交互设计中的应用

2017-07-26 11:31:46

对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(当然,前期也经过了讨论,在纸上也画了交互的流程了)。对于时间不充分的时候来说,这样是会节约一部分时间。但是,这样经常会带来一个弊端:交互考虑不充分。为什么会这么说呢?因为在制作高保真效果图的时候,设计师会投入更多的时间去关注页面是否好看,产品经理也会去关注这个文字颜色深一点好还是淡一点好,用红色好还是黄色好......一大堆的视觉问题就提前出来了。
 

换个方式来说,同样的给你一天时间:一个只做交互设计;另一个就交互和视觉一起做,然后出高保真。你不难想象到,一天只用来做交互设计的,他逻辑和流程肯定比直接出视觉稿的要好,考虑的更全面。所以,对于时间充足或者设计资源充足的团队来说,交互设计和视觉设计分离是很有必要的。
 

今天就来说说色彩在交互设计中的应用,前面说的是交互设计通常是黑白稿,但是对于用户来说,他看到的是真实线上的产品。我们最终的目的是设计产品给用户使用,做为一个交互设计师,那就不能只考虑黑白交互稿上的事情了,要关注后期视觉的设计,用户是怎么理解产品的交互的,这是非常重要的问题。我们主要从以下几个方面来研究色彩在交互中的作用:
 

1.区分层级

2.功能指示

3.信息类别指代

4.色彩心理学在交互设计中的作用

 

一、区分层级

不管是UI设计还是其他平面设计,层级是设计中非常重要的一个环节。视觉层级手法主要有以下几种元素,实际设计中为了让效果拉开主次,可能会同时使用多种方法以达到更好的效果:位置、大小、距离、内容形式、色彩。在此,我们主要研究下色彩的的作用。

如何用色彩来建立层级?

首先,你要确定主色。确定主色的因素有很多,比如说行业属性、企业色、个人便好、色彩心理作用等。不管最后我们以何种方式来做,但必须要确定出主色,一款app、一个网页,必须要有一个主色。 

 

上图是谷歌官方推荐颜色部分展示,谷歌推出了一套配色体系,在你没有任何灵感、方案时,你可以使用谷歌的配色。

确定主色后,根据应用的不同场景,还需要设置主色体系的色彩,可以根据透明度的变化来设置。

cf70596cbf64a8012193a37d71cb.jpg

 

其次,确定辅助颜色。

主色是指应用程序中最常出现的颜色。一辅助色是指用来强调自己的UI的关键部分的颜色。辅助颜色用于强调UI的部分选择。它可以是互补的或类似于你的主要颜色,但它不应该简单地是一个轻或黑色变化你的主要颜色。它应该与周围的元素对比,并谨慎应用。

辅助颜色最适用于:

1.按钮,浮动动作按钮和按钮文字

2.文本字段,光标和文本选择

3.进度栏

4.选择控件,按钮和滑块

5.链接

6.标题

使用辅助颜色是可选的。如果您使用主色的变体来强调元素,则辅助颜色不是必需的。 

6f1c596cc030a8012193a36fc249.jpg

294a596cc0f4a8012193a3332408.jpg

7aaa596cc17ba8012193a36d961f.jpg

 

所以,色相不同,可以用来区分层级。色相相同的颜色,我们也可以根据透明度、明度来区分层级
 

二、功能指示

功能指示,主要包括功能跳转、获取焦点、可操作和不可操作

1.功能跳转指示,在UI、交互设计中是一个很重要的指示,要让用户使用你的产品,不会感到迷茫。我们除了箭头、文字提示、按钮等来指示外,还可以用颜色来指示功能,当然很多情况下是于文字、按钮结合。通常就用辅助色来指代文字可操作,如右图的文字链接。同样,我们经常会在微信朋友圈、QQ空间、微博中看到文字链接提示。 

afdd596cc1cca8012193a3ad8288.jpg

 

2.获取焦点,通常是在输入文字的时候会出现,常用的是光标闪动,也会经常见到正在输入的输入框的颜色与其它不同。pc上该方式用的较多。 

4479596cc228a8012193a3426aea.jpg

1468596cc25ea8012193a30401bd.jpg

 

3.不可操作指示,常见于按钮,通常不可操作的灰色显示。 

d88a596cc2afa8012193a3fca8c7.jpg

 

 

三、信息类别指代

色彩的信息传达能力是非常强的,比如十字路口的红绿灯,人们已经形成了认知习惯,看到灯就知道其所表达的意思。在UI设计中也是同样的,通常我们会用颜色和文字来区分不同的状态。通常警告就会用红色或者黄色来指示,成功用绿色来指示。不可用或者弱提示文字就会用和背景对比较小的颜色。 

5ea7596cc2d9a8012193a33569c0.jpg

 

 

四、色彩心理学在交互设计中的作用

当色彩情感遇到交互设计,会是一种怎样的体验(知乎的问题套路,哈哈)?情感化设计、服务设计等这些名词,我们已经耳熟能详了,总觉得它们离我们很遥远,其实并不是这样。我们的设计和生活中,会经常遇到,只不过我们没有注意或者没有用这些词来概括而已。 

2d78596ef89fa8012193a3b6efe5.jpg



 

H5学习交流群本文仅为提供更多信息,不代表AAA教育同意其观点或描述,如需转载请注明出处。点击咨询

免费获取1对1试听课程

AAA教育确保绝不将您的信息外泄

  • previous
  • next
AAA教育服务
AAA热点资讯