IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

案例分析|通过配色吸引用户注意力的四点技巧

Catherine • 2017-05-01 06:06 • 交互设计

色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能给用户带来完全不同情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的设计更出彩。

文章目录[隐藏]

  • 1、极简风格,少即是多
  • 2、使用装饰,营造页面视觉焦点
  • 3、建立设计语言体系
  • 4、提升文字可读性
  • 5、总结

色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能给用户带来完全不同情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的设计更出彩。

案例分析|通过配色吸引用户注意力的四点技巧

互联网和手机的兴起给我们的生活带来了极大的便利,但是也使我们产生了强烈的依赖性。我们发现自己现在已经离不开手机了,我们的时间被各式各样的社交媒体所占据。我们变得越来越浮躁,越来越缺乏耐心,没有足够的时间去独处,去思考。在这样的一个社会大环境下,加之日益严重的同质化竞争,一款产品能够赢得用户的注意力可谓成功了一大半。那么,如何才能吸引用户的注意力呢?人类是视觉生物,我们天生就对色彩具有极强的感知力,可以在一瞬间判断出颜色的差异,我们可以通过配色来吸引用户的注意力。

接下来,我们通过一些具体例子来分析如何通过配色来吸引用户注意力:

1、极简风格,少即是多

Storq是一个主要面向孕妇的购物网站,主要产品是孕妇和婴幼儿衣服。从总体上来看,网站并没有使用过多的配色。比如,在下面的这个产品详情页面,页面主体是产品图片,配以一些说明性文字。

案例分析|通过配色吸引用户注意力的四点技巧

从用户的角度来说,这种极简风格的界面更容易让他们找到重点。因为用户的注意力是有限的,应该得到合理的分配。我遇到过很多客户,他们说这里要使用大红色突出,那里要放大字体吸引用户注意。在他们的设想中,页面里的任何一个元素都要强调出来,但是殊不知页面中视觉重点有且只有一个,过多的给予对于用户来说其实是一种负担。少即是多,这是互联网时代的信条。

对于用户来说,任何的文字描述都无法比图片来的更加直观。如果我对这款感兴趣,点击进入产品详情页面,那么产品的图片和一些说明性文字就足够我对该产品有一个大致的了解。如果我还想继续了解更多,点击“更多详情”即可。此外网站主要目标用户是准妈妈,她们在购物的时候会更加的理性。她们在挑选商品更加注重的是产品的质量——这个毛巾被的棉絮是否正规的?衣服的质地会不会引起宝宝皮肤过敏?所以在这里,也没有必要像一般电商网站一样通过大红大紫来吸引用户的眼球。

案例分析|通过配色吸引用户注意力的四点技巧

Logo shop这个网站的配色同样值得我们来研究。网站首页的背景是饱和度很低的粉红,字体只用了一个颜色。整个页面看起来十分的简单,但是我们要知道,对于网站而言,最成功的要素莫过于对目标用户群的准确定位和精准营销。一个优秀的logo应该简洁明了,具有很强识别性,而且易于传播。所以如果一个用户要订制一款logo,他打开网站发现界面配色很凌乱的,他们会对这个网站的专业性产生怀疑。

2、使用装饰,营造页面视觉焦点

我们可以通过一些形状和图案给页面做一些装饰,同样可以达到吸引用户注意力的目的。以下面这张图片为例子,这个页面主体是不同肤色的用户手持手机的图片。在这个主体背后,设计师添加了降低的透明度的蓝色和红色色块,而且还有一些零散分布的小泡泡。

案例分析|通过配色吸引用户注意力的四点技巧

接下来我们再看一下,没有装饰效果的页面。

案例分析|通过配色吸引用户注意力的四点技巧

很明显,有无装饰效果页面给我们的感觉是完全不一样的。背景装饰的使用可以很好的将用户的注意力吸引到用户手持手机这个主体上。此外蓝色和粉色小泡的使用看似没有关联,但是我们可以看出它们可以很好的提升页面的趣味性。

3、建立设计语言体系

视觉语言体系也可以理解为设计规范或者设计中的一致性原则,主要包括文字、图标、配色、动效、组件(控件)和版式等一系列构成元素。一款产品的视觉语言体系的建立,主要基于两个方面。首先对于用户来说,规则性和一致性的界面不仅方便了操作,而且十分美观。对于设计师和开发来说,可以极大的提升功能迭代时设计与开发效率。

Wyre总部位于旧金山,是一家从事跨境支付业务的初创公司。该企业的logo就是三个树叶叠加在一起。在这个企业的网站中,我们可以处处看到这片“树叶”,从首页banner中背景点缀小元素到按钮。

案例分析|通过配色吸引用户注意力的四点技巧

例如用户首次进入这个网站,要从下面Get Started按钮开始,再到注册/登录页面。这个流程走下来,用户会发现行为召唤按钮全部是一种样式:蓝色树叶形状加上文案。这个会培养用户的操作习惯,在他们看来,这个网站所有的行为召唤按钮都是这个样式。而且因为界面配色只有蓝色、黑色和白色,所以蓝色作为行为召唤元素可谓相当显眼,用户可以在很短时间内发现,用户的使用效率可以得到很好的提升。

4、提升文字可读性

当页面中出现大段文字的时候,我们可以通过使用配色来提升内容的可读性。

案例分析|通过配色吸引用户注意力的四点技巧

YummyGun网站主页对主标题使用了蓝色来突出,而且给每一个段落的标题都加深了颜色。因为现在用户都是缺乏耐心的,他们进入你的主页,看到这样一大段文字很少会通读完的。所以我们要文字进行处理,让用户瞬间分清标题与正文的区别。标题即是对于内容的总结,用户可以通过标题即可了解正文大致内容。当然提升文字可读性光靠配色是不够,还应该有字体尺寸和留白的共同作用。在上面这个例子中,即使我们不使用蓝色,通过字体的尺寸我们也能看出来Let’s talk and turn your idea into something memorable.这句话是主标题。但是如果不使用蓝色,这个页面会显得过于单调。

案例分析|通过配色吸引用户注意力的四点技巧

5、总结

以上我是对于配色的一些看法,设计是一个包容性很强的行业,允许不同的声音存在。我认为配色少即使多,极简风格可以吸引用户注意力。但是我也承认配色多,奢华风的页面同样也很出彩。配色一定要考虑产品定位,具体问题具体分析,不能死搬硬套。

案例分析|通过配色吸引用户注意力的四点技巧

色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能给用户带来完全不同情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的设计更出彩。

 

本文由 @王M争 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22281/

logo产品产品经理动效图标字体极简风格案例分析用户视觉设计设计师设计规范转载配色配色设计
赞 (0)
CatherineCatherine
0
生成海报
案例|设置是查看还是修改?
上一篇 2017-05-01 05:10
预加载:尝试分析这种自动加载的交互方式
下一篇 2017-05-01 07:03

相关推荐

  • 交互设计师从业时间长度与对应状态

    不同的经历决定了你的认知,而我们中的很多人往往以自己的认知去度量别人的工作和成果,每每于此,长不自拔而废咦! 从业0-2年: 这个阶段往往是浑浑噩噩进入这个行业,读了几本书,分析过几个案例,感觉自己掌握了…

    IxD案例 2016-05-24
  • ”交互设计“菜鸟如何入门? 交互设计WiKi

    ”交互设计“菜鸟如何入门?

    大多数新手初次自学设计时有两大难关要过:我适合干这行吗?我该如何入门?带着这两种疑问上路,学习效果很难保证。今天小编特地分享亲身经历以及多年设计经验,为你解答这两大难题! 1. 我适合干这行吗? “我不是…

    2015-08-27
  • 微信热点

    用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-11
  • 从业务视角看交互设计师的价值

    最近和组里的设计师review近期工作进展时,发现了不少问题。想起设计新人一脸无辜和迷茫的表情,我觉得我需要再多做点什么。 对于处在业务部门中的UED团队来说,专业固然重要,但更重要的是如何体现你带给业务的价…

    交互设计 2016-03-24
  • 微信热点

    求职指南 | 阿里巴巴2018春季实习生招聘-中科大站

    阿里巴巴2018春季实习生招聘技术高校行中国科学技术大学站从全世界规模最大的电商双11安全级别最高的支付金融到全球领先的云计算覆盖全球的智能物流……今天的阿里巴巴正在从商业模式创新的引领者逐渐成为科技创新的引领者在技术高校行现场有资深的技术大牛和亲分享阿里重点技术有各级学长们和亲聊一聊这一年的成长有亲切的HR带领亲领略阿里的企业文化本硕场同学们提前将简历投递到官网相应职位报名,将有机会获取交流会名额、免笔试、现场面试、进入快速Offer...

    2018-03-23
  • Axure中使用图标字体【FontAwesome】 交互设计

    Axure中使用图标字体【FontAwesome】

    我们使用Axure制作原型时,经常会使用到各种小图标。有些朋友自己制作、有些到网上下载,然后使用截图导入到Axure中使用。这样做非常繁琐,有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用图标字体呢?答…

    2015-01-16
  • iOS和Android规范解析——搜索 交互设计

    iOS和Android规范解析——搜索

    各位亲爱的读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非弹出类控件。此篇要说的是搜索。

    2017-04-29
  • 一篇文章读懂用户体验(下) 交互设计

    一篇文章读懂用户体验(下)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。举个栗子:假设我是个潮人,同时我也是个医生,那我就有两个角色。如果给我设计一款音乐播放器,应该给我一款酷炫的,我会喜欢。但当我坐在办公桌边,给病患开药的时候,我电脑的开药软件需要很酷炫吗?我一边摇晃脑袋踩着节奏,看着充满特效的界面开出来的药,你敢吃吗?所以医院的软件需要简洁,保证开药的准确度。(然而需要强烈的视觉表达情绪的设计例外)。

    2017-06-01
  • 搜狐设计师:我从产品经理转为交互设计师的经验总结 交互设计

    搜狐设计师:我从产品经理转为交互设计师的经验总结

    从正式入职搜狐到现在已经四个多月,刚刚从产品岗来到了设计组转成了一名交互设计师 。今天来聊聊这个转变过程中的一些思考,希望能对职业迷茫的同学有帮助。

    2017-05-25
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress