运用5个色彩技巧,设计更优质的网页用户体验

色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访客的行为。所以,在玩转配色本身之外,进阶的色彩运用技巧还有很多。


色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访客的行为。所以,在玩转配色本身之外,进阶的色彩运用技巧还有很多。

运用5个色彩技巧,设计更优质的网页用户体验

1、通过比例变化创造视觉焦点

运用5个色彩技巧,设计更优质的网页用户体验

控制色彩的比例来创造视觉焦点是常见的色彩运用手法之一,控制色彩的比例实际主要是通过控制色彩所在元素的大小来达成效果的。

比如Viporte 这个网站,当你上下滚动首页的时候,每个部分都用超大的字体进行了装饰,而每个字母都使用了漂亮的色彩进行填充。不同的文字使用了不同的色彩,并且搭配以相应的图片。每个页面的焦点肯定是最中心的图片和字母,而焦点的形成和色彩的比例与运用脱不开关系。控制色彩的占比,无论是多还是少,只要有明确的目的,总能形成吸引注意力的焦点。无论是我们常说的“万花丛中一点绿”,还是极简主义设计中大面积的留白,都是色彩比例控制下所构成视觉焦点的典型案例。

2、通过对比度吸引用户注意

运用5个色彩技巧,设计更优质的网页用户体验

在设计过程中,使用色彩来控制对比度也是设计师频繁使用的技巧之一。当设计的整体色调趋于柔和和平静的时候,突然注入强对比的色彩,能够瞬间抓住用户的注意力。

Thinx 这个网站在设计的时候就将对比度控制得很好。网页主体的配色采用的是经典的黑白搭配,白色的背景搭配黑色的文本。而整体的设计感的来源则主要源于排版和彩色的图片。网站所采用的图片明显经过精心的选择和设计,红色的底色、黑色的内衣和模特外露的细腻肌肤色在图片激烈的碰撞,漂亮而充满诱惑,图片大胆的色调搭配和素色的背景与文字形成了鲜明而强烈的对比,无论是经典的红黑搭配,还是永恒的黑白配色,都足够漂亮和吸引人。

Thinx 这个案例我非常喜欢,并且经常会用到,因为它证明了设计师并不一定非得靠高饱和度的霓虹色来创造高对比度的配色。即使是两种平衡的颜色,也能让整个设计脱颖而出。

3、使用色彩创造UX模式

运用5个色彩技巧,设计更优质的网页用户体验

高度一致的配色方案能够创造出视觉模式,而延伸到用户体验上,则会让整个UX呈现出模式化的特征。模式化的设计让用户更容易适应,用户更容易摸索出规律,也更容易产生相匹配的预期,换句话说,UX模式能够培养用户习惯,同用户产生深刻的关联。就像用户习惯了某些特定的图标之后,在其他地方看到这些图标就知道它们的含义,明白该如何交互了。比如,小房子图标会让用户想到首页、主页,而垃圾桶则会关联上删除的概念。色彩相对而言更加主观,因为每个网站和APP都会采用自己的配色方案,不同的色彩代表不同的含义。

那我们就拿Underbelly 这个产品展示页作为示例吧。在Underbelly 这个网站中,所有可点击的组件都是蓝色的,你在试用网站几秒钟之后,能够快速掌握这个UX模式,并且明白如何操作。这就是Underbelly 通过色彩构建UX模式的方法。UX模式的优势在于,它让用户更快地熟识你的产品。越容易识别,用户的想法越少,产品的的使用也就更加顺畅了。

4、使用色彩来创建层次

当我们浏览网页和各种界面的时候,信息的层次感很大程度是借助视觉来营造的。使用色彩来创造视觉层次感就很顺其自然了。

运用5个色彩技巧,设计更优质的网页用户体验

Skore 的产品页面中,每一个部分都有使用到绿色的元素。重复的绿色元素不仅创建出可供用户快速识别的模式,它也让用户能够快速明白哪些因素更加重要。通常,我们解释视觉层次的时候,会用不同大小、粗细的字体来阐述信息层次和结构,但是不同强度的色彩,同样可以实现层次的划分。

在Skore 这个案例当中,绿色和灰色的文本以及白色的背景之间有着良好的对比度,整个配色方案不依赖其他的强调色,以绿色为主。这种相对稳定的配色结构有助于让每个部分都有层次地呈现出来。绿色不仅吸引用户关注关键的元素,而且为不同的部分的内部提供层次结构。

5、充分利用色彩的相似性

运用5个色彩技巧,设计更优质的网页用户体验

除开其他的目的,设计师使用色彩或者调整色彩的目的,基本都是为了创造设计的一致性。InVision 的年度总结页面使用了从粉色到紫色的渐变,在页面的下方,粉色和紫色同样应用到了按钮中,此外,在着陆页当中,将对比度明显的白色置于粉色+紫色的背景之上,确保信息的清晰呈现。如果色彩每次都不一样,那么整个设计看起来就不是那么令人难忘了。

运用5个色彩技巧,设计更优质的网页用户体验

另外一个案例来自于 Comotion。Comotion 的工作室首页采用了几种不同的色彩,但是这些色彩的色调是非常接近的,从而创建出了一种和而不同的配色方案。在这个设计案例当中,几个不同的色彩互为搭配,并不会太过于突出,但是又能够恰到好处地进行强调,最终让色彩足够好看,有保持了用户的参与度。

结语

色彩能够帮助设计师达成各种各样的目的,灵活的运用能够让实现这一切。当你将上述的色彩使用技巧都合理的运用起来,可以灵活的创造视觉焦点,构造层次,打造真正有趣而有用的设计。

 

原文作者:Paula Borowska

原文地址:webdesignerdepot

译者:@陈子木

译文地址:http://www.uisdc.com/5-color-techniques-fine-tuning-ux

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

(0)
CatherineCatherine
上一篇 2017-05-06 11:00
下一篇 2017-05-06 13:03

相关推荐

  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 设计和记录用户体验的细节

    设计和记录用户体验的细节体验设计是产品开发过程中一个复杂、多用途、耗时的阶段。组织良好的流程通过减少误解使结果可预测来减轻团队压力,在本文中,我希望着重将主流方法映射到实际项目中,并且将可交付的成果归总在一起。阶段1: 构想这个阶段的目标是弄清楚客户的业务如何运作以及产品目标是什么。低保真原型是一种工具,它可以帮助你与利益相关方确认产品的心智模型,并讨论设计方法,在这一点上,我们正在寻找一个关于“我们正在建设什么东西?”问题的答案。附注...

    2018-03-31
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • web端和移动端产品设计的区别

    移动设备发展非常迅速,移动端产品越来越多。今天小编来扒一扒web端与移动端产品设计有哪些不同。 场景不同,需求不同 首先,两者对应的需求场景不同,这会相应地导致功能点的优先级变动,进而影响到界面控件和信息…

    交互设计 2015-06-15
  • 如何用axure参与团队项目

    1、下载安装axure破解版,可以去axure.com下载。这里为了方便大家,分享个人的百度云盘资源,链接:https://pan.baidu.com/s/1o9qFOyY 密码:hodp2、下载File Zilla,File Zilla从百度上搜索即可下载,这里不需要多言,以下主要讲讲如何配置File Zilla。Ctrl+S创立本地站点,输入主机IP地址,协议默认是SFTP,输入团队用户&密码,点击连接,进入团队项目。3、在团队项目...

    2018-03-15
  • 关于创意,国外设计师用垃圾制作的插画,震惊到我了。

    本文来源于交互设计网:我是UE网,小编:阿西巴巴 图片来源:互联网 有些生活中的日用品或消耗品产生的垃圾我们随手都丢掉了,不过在设计师眼里这些也可能价值数十万美元。她是如何变废为宝的呢? 下面是作品: 我真…

    2015-04-20
  • 关于用户体验 生活才是最好的老师

    早早起床,天下去小雨,收拾完一切,带上我的花伞出门。今天的任务是买一双早已在网上看好的球鞋![我的主要需求]来到了步行街,街上的人还不少。我的目光在细雨的缝隙间不断的寻找着我心中的那个目标。偶然,在一个个华丽的招牌旁边,我发现了一个黑色的招牌,特别显眼!黑底白字虽然单调却不失档次,门内的贴画很简单,不是某某明星,仅仅是一双鞋子,在鞋子的表面,有几滴水珠。我不禁心中发起感慨,有意思。[广告展示的对比,不光是门头还是贴画,给我视觉上的冲击和...

    2018-02-07
  • 表单页面功能元素设计攻略:字段种类及属性说明

    本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。

    2017-05-10
  • 用户体验 | 6个细节成就了今天的X1 Carbon 2018(下篇)

    上篇我们聊了Logo配色、ThinkShutter以及电源键设计,这一次我们一起来看看外形设计、移动便携和扩展能力ThinkPad X1 Carbon 2018在用户体验上有什么有趣的故事吧!一条曲线的神奇虽然建筑师高迪说直线属于人类,而曲线属于上帝,而逐渐读懂曲线的意义,思考曲线与直线之间合理应用,这整个的过程正是人类自我救赎和思想进化的过程。纵观笔记本变化的历史,外形和颜色往往决定着“颜值”,改变外形或者颜色设计的情况比比皆是,连M...

    2018-03-22
  • 取消了Home键的 iPhone X,交互方式都有哪些变化?

    iPhone X 作为一台全面屏的设备,和上一代的 iPhone 7 还是有着很大的区别,这些区别不仅体现在材质和工业设计上,在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」(同为 375pt),但在高度方面就比原先多出了 145 pt ,再加上 iPhone X 去掉了最为标志性的 Home 键,这两点直接导致的就是界面的布局和交互会发生相应的变化。

    2017-09-18