色彩在交互设计中的应用

UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

色彩在交互设计中的应用


UI设计微课堂

关注将获得一对一解答,设计、资源、分享

色彩在交互设计中的应用 

😛听说很多同学都置顶了我的公众号


色彩在交互设计中的应用


这样就能第一时间收到我精选的UI设计精品教程

感谢大家的支持! ↓↓下方高能↓↓


色彩在交互设计中的应用

色彩在交互设计中的应用

对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(当然,前期也经过了讨论,在纸上也画了交互的流程了)。


对于时间不充分的时候来说,这样是会节约一部分时间。但是,这样经常会带来一个弊端:交互考虑不充分。为什么会这么说呢?因为在制作高保真效果图的时候,设计师会投入更多的时间去关注页面是否好看,产品经理也会去关注这个文字颜色深一点好还是淡一点好,用红色好还是黄色好......一大堆的视觉问题就提前出来了。


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


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

1.区分层级

2.功能指示

3.信息类别指代

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


区分层级

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

如何用色彩来建立层级?

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

色彩在交互设计中的应用

色彩在交互设计中的应用

色彩在交互设计中的应用

上图是谷歌官方推荐颜色部分展示,谷歌推出了一套配色体系,在你没有任何灵感、方案时,你可以使用谷歌的配色。具体可以看谷歌颜色规范文章确定主色后,根据应用的不同场景,还需要设置主色体系的色彩,可以根据透明度的变化来设置。推荐一款谷歌配色方案网站如下图

色彩在交互设计中的应用


其次,确定辅助颜色。

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

辅助颜色最适用于:

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

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

3.进度栏

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

5.链接

6.标题

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

色彩在交互设计中的应用

色彩在交互设计中的应用

色彩在交互设计中的应用

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


功能指示

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

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

色彩在交互设计中的应用

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

色彩在交互设计中的应用

色彩在交互设计中的应用

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


信息类别指代

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

色彩在交互设计中的应用


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

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

色彩在交互设计中的应用

色彩在交互设计中的应用

色彩在交互设计中的应用

色彩在交互设计中的应用

色彩在交互设计中的应用

色彩在交互设计中的应用

推荐阅读设计-UI设计推课堂

色彩在交互设计中的应用UI设计文章推荐

现场视角:绘画深度的新途径

提高色盲人群的色彩理念

提搞自己的手绘能力,在设计圈独领风骚!

有姿有色!设计中色彩的应用原则

色彩在交互设计中的应用软件基础教程

Photoshop中绘制科学实验室组图

Illustrator创建一组扁平动物图标

Illustrator中绘制扁平插画

  

【提示】:每晚20:00有精品UI公开课 (联系下方微信)


色彩在交互设计中的应用

-UI设计微课堂-


微课堂  |  越努力,越幸运

精选  |  干货  |  经验  |  分享  |  资源

色彩在交互设计中的应用

【深入学习UI设计】

添加微信:WSK143 

备注:深入学习UI设计

色彩在交互设计中的应用

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36665/

(0)
交互精选交互精选
上一篇 2018-04-24
下一篇 2018-04-24

相关推荐

  • 設計者說 | 交互设计总监+创始人+设计师导师 潘翔的多维思考

    设计者说  |  设计发声平台| 第 53位设计师 |▲ 专访:设计总监+企业管理者+资深导师 三位一体经验分享今天的嘉宾经历过很多次转型——工业设计出身;毕业做交互设计;创业做用户体验设计;当然他也是一只梨的导师之一:潘翔尚器设计联合创始人资深交互设计师同济大学硕士曾任职于designeaffairs一只梨交互设计资深导师几次转型都成功是潘翔最厉害的地方。每换一次角色就会让他的思考和经历叠加一层全新维度。在他身上,同时有资深设计师的专...

    2018-03-26
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 百度用户体验总监刘超下课,HR内部贴称其“给百度同学造成严重伤害”

    百度用户体验总监刘超因演讲太low被嘘事件又有了进展,就在刚刚,又有网友晒出一张百度内网的帖子,告知员工“公司决定将刘超从百度管理团队除名”等信息,发帖者为“BaiduHR”:截图很快在微信朋友圈流传,但百度公关在相关朋友圈下面没有辟谣。以上帖子,可能是今天(7月3日)早间流传的、刘超在百度内网道歉原帖的最新回复,刘超在百度内网的道歉信如下:刘超在信中称,由于个人重视程度不足、演讲语言和穿衣不恰当的问题,导致在IXDC会议上演讲被嘘,后...

    2018-02-03
  • 一文看懂用户体验五要素

    《用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。用户体验五要素是将产品设计的过程抽...

    2018-03-17
  • 【招聘】萧山众多高薪岗位专场来了,就在等你!

    萧山之窗移动生活由此开始....关注还在愁到哪里去上班吗?还在担心工资不够花吗?这里或许有适合你的岗位!2018萧山信息港小镇春季综合型人才招聘大会企业名称招聘岗位微医集团(浙江)有限公司资深Java开发工程师,搜索研发工程师,前端架构师,Java架构师,自然语言算法工程师,医学影像算法工程师,家庭医生,健康管理师,HRBP,客服专员浙江讯飞智能科技有限公司系统测试工程师,资深视觉设计师,视觉设计师,大数据工程师,高级交互设计师,研发架...

    2018-03-21
  • 来!说一个影响用户体验的网贷“非典型”案例

    点击上方文字“Fintech首席体验官”关注最在乎你体验的公众号这是一个体验至上的时代,无体验,非产品。今天的推送选择了最近在新金融圈,因体验问题而引发的一个“非典型”案例,或许可以作为大家在追求合规过程中的一个警示。先来聊个5毛钱的吧……无论在哪个行业,用户体验都一直被强调。毫不夸张地说,一次用户体验上的失误,给平台带来的伤害几乎是不可估量的。近期,深圳网贷平台人人聚财就遇到了这样的事儿。【背景资料】人人聚财成立于2011年,主营业务...

    2018-03-28
  • 交互设计面试官想了解什么,你知道吗?

    丝路视觉新朋友可点击上方蓝字关注年后又是一波跳槽季,对于即将走出校园的小伙伴来说,春招也马上要开始了。今天推荐的这篇文章包含了校招过程中的所有技巧和秘籍,绝对良心面经。已有一些工作经历、现在想跳槽的朋友们也可以参考一下,不仅可以为准备的面试答案查缺补漏,也可以给心中留一个底。与面试官进行的交谈,每一句话都会影响面试官对你的判断,因此每次讲话都力求向面试官证明你是合适的人选,如果他无法从你身上获取到有效信息,自然会将你淘汰。然而很多同学在...

    2018-02-03
  • 【交互设计】寒假专业设计课程计划

    以清华力量武装自己寒假班开课时间:2018年1月27日 —2月8日报到时间:1月26日 (全天报到)寒假课程不局限于清华美院考研,寒假基础班以专业为导向,报考全国其他院校的同学也可参加。学习最高要求和最高水平的课程,全国名校任你选!说明: 交互设计的考试内容和实际工作基本类似,非考研类同学也可以报名学习,想转型学习或从事交互设计行业的其他专业同学也可报名。师资介绍:老师一:L老师本科中央美术学院数码媒体专业,清美交叉学科硕士考研成绩:初...

    2018-01-30