色彩如何应用在交互设计中?

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

色彩如何应用在交互设计中?


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


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

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

我们主要从以下几个方面来研究色彩在交互中的作用:

1.区分层级 2.功能指示 3.信息类别指代 4.色彩心理学在交互设计中的作用


一、区分层级

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



如何用色彩来建立层级?

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

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

上图是谷歌官方推荐颜色部分展示,谷歌推出了一套配色体系,在你没有任何灵感、方案时,你可以使用谷歌的配色。具体可以看谷歌颜色规范文章(https://material.io/guidelines/style/color.html#color-color-palette)

确定主色后,根据应用的不同场景,还需要设置主色体系的色彩,可以根据透明度的变化来设置。推荐一款谷歌配色方案网站如下图(https://material.io/color/#!/?view.left=0&view.right=0&primary.color=26A69A&secondary.color=7E57C2)

色彩如何应用在交互设计中?

其次,确定辅助颜色。

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

辅助颜色最适用于:

1.按钮,浮动动作按钮和按钮文字 2.文本字段,光标和文本选择 3.进度栏 4.选择控件,按钮和滑块 5.链接 6.标题

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

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

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


二、功能指示

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

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



色彩如何应用在交互设计中?


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


色彩如何应用在交互设计中?


色彩如何应用在交互设计中?


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


色彩如何应用在交互设计中?

三、信息类别指代

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

色彩如何应用在交互设计中?

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

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

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

色彩如何应用在交互设计中?

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

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

相关推荐

  • 两个交互设计鸿沟:评估与执行

    通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑,确保它们都已打开,并且翻查了耳机评论以确认耳机与我的电脑兼容,甚至通过将耳机同...

    2018-03-13
  • 交互设计、视觉设计 | 专业、课程大起底,

    dadsadsadasdsadsMulticultural epicenters for arts, culture, design, and business.是什么原因让你对设计感兴趣?是爱吗?是责任吗?都不是!是因为当年某个app的UI设计让你眼前一亮然后就欲罢不能!于是确认过眼神,我遇见了最爱的专业。想为之奋斗一生。于是就这么愉快的决定了 在设计这条不归路上愈行愈远。纠结了许久,等到开始准备作品集时却分不清什么是视觉设计或是交互...

    2018-03-29
  • Day 5 | 关于 [交互设计] 的一些思考

    你知道坚持做一件事的动力是什么吗?除去喜欢,那应该就是大家的反馈与交流。我不会分享干货,也没有能力分享干货,只是觉得有一个平台能够表达自己的思考与想法,并能够和大家交流,这样成长很快不是吗?坚持了几天写完个人思考的文章后,收到很多回复,特别感动的就是收到特别认真的回复hhh,比如:有人问了我一句:交互设计是做什么的呀?其实这个时候自己脑子里飘过很多词,什么用户体验,用户研究啊,UX,UED啊,使用流程啊,人机交互啊,操作逻辑啊等等,就是...

    2018-04-26
  • Sketch强大新技能: 支持多个设计师之间同步组件啦!

    ▵优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。封面设计:Graphéine团队里多个设计师之间经常需要共用一些设计组件和元素,如果可以有一个包含这些组件的 Symbol 库,并且自动和所有人保持同步就好了。现在 Sketch47 就搞定了这个问题, 再也不用像过去一样通过发邮件、QQ 来同步了。如果你的团队需要多人共享一个 Sketch 组件库, 只需把这个包含公共 Symbol 的文件在你的 S...

    2018-03-02
  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17
  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28
  • 从用户体验到品牌形象,营销的道路有多远?

    在数字化时代,如何提升品牌形象和用户体验,是两个营销的核心问题,品牌形象塑造消费感知,用户体验决定消费忠诚。企业重要的战略资源之一是:优质化的内容。而真正做内容营销的门槛极高,唯有真正强大的IP内容,才具有引爆市场与号召市场的能力。什么是营销IP,即知识产权(Intellectual Property),大IP,本身是产业链也延伸,具有黑洞版的吸金能力,是从招牌、内容、产业链等的延伸式营销。举个目前比较火热的例子,电影《魔兽》,根据网络...

    2018-02-02
  • CTB50成员周红军| 从互联网用户体验谈交易银行创新发展思路

    诚邀各领域专家学者、从业者及机构投稿或荐稿与30余万行业精英分享与共同发展投/荐稿邮箱:tougao@sinotf.com中国交易银行50人论坛:客户在使用交易银行服务过程中所关注的用户体验,是竞争激烈的交易银行服务能否在市场上取得优势地位的决定性因素。文/安邦保险集团国际部总经理、中国交易银行50人论坛(CTB50)成员 周红军来源:中国交易银行50人论坛 学术成果汇编(2017)当下,随着互联网技术的迅猛发展,各行各业已经融入到“互...

    2018-03-31
  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11