首页 > 网页教程 > 设计分享 > 配色设计:如何学会给配色做减法?

配色设计:如何学会给配色做减法?

时间:2017-10-28    来源:优设网

王M争: 人类在回忆所看到过的场景和事物时,对色彩的记忆度要高于形态。也就是说,从视觉角度来看,一款产品给用户留下最深的印象往往是界面的配色。由此我们也能够看出配色可以说是设计师最重要的武器,很可能没有之一,但是这个武器有使用的「限制」。

UI设计的一个基本原则就是避免页面中出现过多的颜色,这个道理大家都懂,但是在真正自己设计的时候总是会下意识的引入过多的颜色,导致整个界面看起来非常的杂乱。所以对于设计师来说,学会给界面的配色做减法是很重要的一项技能。

配色体系的目的

给一款产品建立配色体系之前,设计师首先要弄明白的是:我为什么要建立配色体系?这个问题听起来十分多余而且稍显无厘头。但是在我看来,每次做东西之前常问自己为什么可以更好的提高工作效率。只有真正理解了配色的意义,我们才可以做到有的放矢,进行有选择性的删减。

通常来说,配色体系的建立主要有以下三个目标:

  • 视觉区分
  • 调整界面风格
  • 吸引用户注意力

视觉区分

一个App或网站可能会有好几个主要且同级别的功能和分区。这时,设计师需要对产品的信息内容和功能模块进行整体规划,建立界面的基本格局来帮助用户在视觉上进行更好的区分。配色可以很好的帮助设计师实现这一目标。

配色可以完成视觉区分,但是视觉区分不是只能通过配色来实现。文字、图像(图标)、布局都可以完成视觉区分。

例如,一款理财类应用中有不同种类的理财产品(普通型,随借随还型和可转让型)和不同的状态(投资确认中,投资成功已起息,清算中等合计11种状态)。

在这种情况下(3种产品类型,11种产品状态),配色就要很小心了。首先我们要对状态进行整合,相似的状态整合成一种,这样可以减少颜色的数量。当然会有人感觉六种颜色还是多,因为书本上告诉我们同一页面中配色不要超过三种。但是我们得从实际情况出发,对于理财产品来说,用户不太可能在同一屏中看到全部的六种状态,也就是说用户同时看到六种颜色的概率很小。

另外我们放弃了对产品类型使用配色,因为状态已经使用了六种配色。在这种情况下,如果我们还对产品类型使用颜色来区分(一个类型一个颜色),那么整个页面就会显得很乱。所以在这里,对于产品类型我们选择使用文字(标签)的形式来区分。

文字相对于色彩来说,给用户的视觉体验还是稍弱一点。所以我们要对要页面中的内容做一个优先级的排序,重要的内容优先使用配色。在这里我们认为相对于产品类型,用户更关注自己产品的当前状态。

视觉风格

产品的视觉风格是根据其自身定位和用户需求所决定的,有的产品要求界面具有活力,能让用户产生兴奋感(购买欲望),我们可以使用光波较长红色和橙色来作为产品的主色调。

有的产品讲究沉稳舒适内敛,那么我们使用蓝色,灰色可能会更加适合点。

配色可以很好的帮助我们建立一个产品的视觉风格。但是我们也要知道一款产品的视觉风格是由文字,图像和色彩一起构成的。也就是说,文字和图像同样可以影响一款产品的视觉风格。

文字的跳跃率是指同一界面中不同文字之间的大小比率。不同功能的文字在排版设计的时候会有字号和字重的区别,例如主标题,副标题和正文的字号通常是依次减小的,这种字号的差异会带来不同的文字跳跃率。一般来说,文字跳跃率高的界面会显得比较活泼,文字跳跃率低的界面会显得平静沉着。

相关推荐
移动应用图标配色诀窍 APP界面配色设计教程
网页色彩搭配教程:三个实用方法搞定网页配色设计
2015年网页设计配色趋势预测
QQ空间配色变迁解密:“杀集取卵”!
网页配色教程:六条网页设计安全配色指南
色彩搭配教程:颜色对用户究竟有哪些影响?
配色教程:手把手教你从大师的作品中借鉴配色灵感
网页配色设计:红色空间如何设计才好看?
网页配色设计:如何运用黄色来表达网页的光感?
网页配色设计:如何用蓝色调搭配出天空和大海的感觉?
年度总结:最新视觉设计六大趋势分享
3个使用鲜艳配色来制作WEB/APP界面的技巧分享
5个色彩进阶技巧!帮你创造更优质的网页用户体验
双色调配色、分屏式设计、空间共享式排版的网页设计趋势
色彩设计:色盲用户的友好体验,你应该注意五点
配色设计:写给零基础新手的配色指南
100%提升转化率?据说懂这些色彩心理学知识就行
最受欢迎的色彩出炉了,她的名字叫马尔斯绿
配色设计一些有趣且有用的小技巧分享
超全面的UI设计配色指南 拿走不谢!
色彩设计:配色方法论之观感谜题
UI设计中最常用的色彩为什么是蓝色?
配色设计:如何在设计中搭配出好看的颜色?
PANTONE潘通预测的10种2017年秋冬两季流行色
那些技巧可以帮你玩转单色配色设计?
如何巧妙运用色彩心理学来提高网站转化率
网页配色教程:什么样的配色方案才有高端的感觉?
网页配色经验分享:叠柔配色技巧及图解分析
深入探讨图片格式与网页设计的那点事儿
色调心理效应 颜色在网页设计中的重要性分析
网页设计新趋势:撞色风(Color Blocking)风格的网站欣赏
创造视觉冲击力的网页设计配色技巧
色彩情感对用户体验设计的影响
网页配色教程:Thinkful网站配色完全学习指南

精彩推荐

热门教程