首页 > 网页教程 > 设计分享 > 5个色彩进阶技巧!帮你创造更优质的网页用户体验

5个色彩进阶技巧!帮你创造更优质的网页用户体验

时间:2017-03-01    来源:优设网

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

所以,在玩转配色本身之外,进阶的色彩运用技巧还有很多。

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

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

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

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

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

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

3、使用色彩创造UX模式

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

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

相关推荐
酷站欣赏之欧美棕色调网站设计案例赏析
网页设计的文字色彩与可读性分析
30个出色的网页设计色彩搭配案例欣赏
网页设计的色彩理论与案例浅析
18个国外经典优雅黑白色调的酷站欣赏
网页配色经验分享:叠柔配色技巧及图解分析
网页配色之色彩搭配技巧与色彩对用户的心理作用
色调心理效应 颜色在网页设计中的重要性分析
网页设计新趋势:撞色风(Color Blocking)风格的网站欣赏
6个步骤让你快速打造一个有设计感的网站
网页排版设计如何才能让页面文字阅读更舒适?
创造视觉冲击力的网页设计配色技巧
色彩情感对用户体验设计的影响
11个网页配色超棒的网站案例欣赏
移动应用图标配色诀窍 APP界面配色设计教程
如何巧妙运用色彩心理学来提高网站转化率
网页设计教程:让页面活跃起来的四个技巧
秒变配色高手!六条网页设计黄金配色原则
网页色彩搭配教程:三个实用方法搞定网页配色设计
10个实用方法帮你搞定网页柔和色调设计
2015年网页设计配色趋势预测
QQ空间配色变迁解密:“杀集取卵”!
网页配色教程:六条网页设计安全配色指南
网页配色教程:什么样的配色方案才有高端的感觉?
色彩搭配教程:颜色对用户究竟有哪些影响?
走心的技巧!如何为色盲用户提升网页的可用性?
网页配色设计:红色空间如何设计才好看?
网页配色设计:如何运用黄色来表达网页的光感?
网页配色设计:如何用蓝色调搭配出天空和大海的感觉?
3个使用鲜艳配色来制作WEB/APP界面的技巧分享
双色调配色、分屏式设计、空间共享式排版的网页设计趋势

精彩推荐

热门教程