集致设计 | www.sxh4.net 西安集致品牌设计有限公司是品牌设计更新管理的专家14年来为300多家客户提供了品牌设计服务
集致设计
品牌热线
扫码访问手机微网
集致全部服务
集致服务 首页 关于集致 服务领域 案例展示 集致动态 集致观点 集致文化 人力资源 联系集致
集致文化 > 网站设计 返回目录
色彩的意义用户体验设计师必知的色彩基础知识

色彩的含义和对于用户体验的影响算的上是基础的色彩知识了在开始做配色方案满脑子浆糊的阶段这些色彩知识可能会非常有用~

咱们探讨色彩对于用户体验设计的影响色彩和形象是用户视觉感知中最快?#24425;?#26368;直接的元素无需语言和文字色彩会在第一时间通过眼球反馈到大脑触发感受影响情绪不同的色彩能够给予用户不同的刺激唤醒用户不同的感受所以今天的文?#24405;?#21333;总结一下不同色彩能带来的效果在情绪上的作用通过案例展示它们是如何影响用户体验设计的

红色

危险重要激情

红色是最强有力的色彩之一它能展现爱的炙热也能反映战争的惨烈英文当中的to see red?#20445;?#20013;文中的见红都能够很好的反映出这种色彩中蕴含的情感色彩

通常而言红色的元素更容易被人注意到它的强调作用让使用这一色彩的部分显得更为重要当然这一部分本身是提示还是警告是好是坏就是另外一个问题了

1.jpg

Netflix 和 YouTube 都将红色作为主色调

红色可以用作警告色自?#21796;?#20013;生物的充满警示性的红色皮毛表示停止和警告的交通灯都是红色但是红色的含义会根据场合用量和设计而表示不同的含义少量的红色常常能够很好的起到高亮的作用而过量使用可能让氛围显得不是那么轻松

2.jpg

相比于取消的按钮红色的?#21543;境?#25353;钮显得警示意味明显

另外?#29615;?#38754;红色同热量一直紧密关联

3.jpg

智能家居设备Nest使用红色表示加热模式

橙色

信?#27169;?#33021;量乐观

和红色同为暖色系的橙色同样有着激励的一面不过程度相对会轻一些橙色不像红色那么富有?#33268;?#24615;但是同样充满活力橙色经常出现在与健康相关的场合下?#28909;?#32500;他命C当然这和饱含维生素的橙子分不开

4.jpg

电信运营商Orange 的海报

橙色是俏皮而乐观的非常适合于出现在休闲场所不过对于企业而言橙色并不是首选的色彩有研究显示橙色会给人一种廉价的感觉不过Hipmunk 基于自身的配色方案很好的运用了橙色不论廉价与否一个提示性效果明显的CTA按钮在蓝色白色为主的页面中总是相当显眼的吧

5.jpg

黄色

注意提醒快乐

黄色其实是一种矛盾而有趣的色彩它同时包含了快乐和焦虑两重情绪黄色不仅仅能够表?#24535;?#21382;充沛乐观的情绪但是同时它还是用作警示禁止和提示的色彩

6.jpg

Breitling 使用黄色的CTA按钮来提醒用户发现

当黄色同黑色搭配到一起的时候整体效果会醒目不少这?#24425;?#20026;什么世界上许多城市的出租车都选择了黄黑搭配的配色这样的搭配让行人很好的同其他的车辆区分开来注意到

7.jpg

当然黄色的选取和情绪传达?#24425;?#26377;规律的浅黄色通常会显得更加阳光而色调更暗的黄色?#28909;?#37329;色则通常显得更加严肃给人的感受也更加厚重和复古

绿色

生长自然成功

植物和自然同绿色在视觉上有着天然的联系所以作为含义的自然延伸绿色也具有生长健康的含义

8.jpg

Organic Food 的网站中大量使用了绿色

9.jpg

色彩的饱和度其实是非常值得注意的

高饱和度的绿色会给人非常振奋富有动态的感受非常的抢眼这?#24425;?#20026;什么CTA按钮大多会选择高饱和度的绿色

10.jpg

蓝色

信?#21361;?#33298;适放松

蓝色是UI设计中最重要?#24425;?#20351;用的最频繁的色彩不同的色调和色度的蓝色能够营造出不同的氛围传递出不同的情绪深沉的蓝色能够给人忧伤的感受英文?#23376;?#20013;的Feeling Blue说的就是这个

浅蓝色能够让人联想到天空和水面给人以清新自由?#32479;辆?#30340;感受这种放松友好同样可以转化为内在的信?#21361;?#25152;以银行也常常会使用这样的蓝色

11.jpg

Calm APP 就将浅蓝作为主色调

最著名的两大社交媒体Facebook和Twitter 不约而同的将蓝色作为主色调并非巧合

也有传言说扎克伯格使用蓝色是因为他是色盲使用其他的色彩他并不能完全分辨

12.jpg

紫色

奢华浪漫创意

紫色之所以有奢华的内涵很大程度上是因为它在历史上很长一?#38382;?#38388;中都是王室和贵族专用的色彩这一点成就了它高端和奢侈的文化特质

13.jpg

所以当今许多奢侈品牌选择紫色作为主色调

由于紫色当中还含有红色的光谱所以它本身还带有一些激情的特质类似薰衣草紫这样的色彩尤其明显

14.jpg

Google Forms 将其主色调更新为紫色了

粉色

女性化天真无邪青春

粉色应该是最甜蜜的色彩之一所以这种色彩同样会给人一种嬉闹玩乐的感受颇为孩子气这就是为什么在很多时候选择粉色能够让用户感?#25509;?#24742;

14OvtquMgmgJC8leCg.gif

?#23548;?#19978;粉色并不是任?#38382;?#20505;都代表着女性化过度使用粉红色会让部分相对更加传统的用户感到恼火

15.jpg

棕色

保守地球稳定

棕色其实并不适合绝大多数的网站而英国伦敦甚至有?#21543;?#32453;士不穿棕色的?#23376;|?#19981;过对于有些场合棕色能够很好的胜任棕色能够营造出乡土老派的感受非常适合农业户外相关的页面棕色还可以同?#38745;?#32852;系到一起给人稳定和可靠的感觉

16.jpg

德芙巧克力的网站设计几乎整个都是用的棕色通过不同色度色调的棕色相互搭配

一般说来低饱和度的棕色适用于菜单控制面板和背景

黑色

正式权力老练

黑色是所有色彩中最强有力的它甚至比红色更快吸引用户的注意力这?#24425;?#20026;什么文本和强调默认是使用的黑色当黑色在配色方案中起主导作用的时候?#28909;?#29992;作黑色背景它可以和其他色彩一样营造特定的情绪

17.jpg

当黑色同银色灰色结合起来使用的时候它可以呈现出老练?#32479;?#29087;的感受

18.jpg

白色

新鲜清洁健康

就像和它正好相反的黑色一样白色可以和它周围的色彩搭配起来作为次要配色而存在

19.jpg

当白色作为主色调而存在的时候它的?#21024;?#21644;纯净的特?#31034;?#20855;有压倒性的优势了如果你的网站上使用的白色过多导致整体看起来过于单调可以用白色的分支诸如象牙白和奶白色来让整个设计更加立体

20.jpg

灰色

正式重力成熟

棕色代表中性不论你的网站是使用的冷色调还是暖色调加入灰色能够创造出该色系下不同色调的色彩

21.jpg

当灰色用作主色调的时候它会给人一?#24535;?#35880;的印象但是这并非是坏事Dropbox 就是使用灰色的CTA按钮设计用户能?#29615;?#24120;快速的?#19994;?#21512;适的按钮

22.jpg

同样的你还可以使用相应的内容和图像来规避色彩本身阴郁的感觉让用户关注更吸引人的元素

浅灰色的按钮是最适合用来表示按钮的无效状态的

24.jpg



本文章来源于网络如有侵权请联系?#22659;?#32852;系电话029-85421195

来源互联网    作者?#20309;?#30693;    时间2018-11-7

上一篇 你会如何设计26个字母来描绘一座城市的
下一篇 解析绿色建筑设计发展的五大趋势
返回目录 返回集致文化目录
集致公司介绍.pdf 标志案例下载.pdf
VIS案例下载.pdf 包装案例下载.pdf
?#39057;?#26696;例下载.pdf 实施案例下载.pdf
客户案例>>
小图标 在线联系
公司地址西安小寨西路皇家公馆英郡楼1903室
联系集致029-85421195   18991272078
图文传真029-85421195
电子?#22987;[email protected]
人才招聘[email protected]
QQ咨询 集致设计 集致设计
小图标 在线留言
小图标 电子地图
集致公司位置图
公交路线6006163619605603路小寨站下西行300米皇家公馆英郡楼1903室地铁1号线小寨站下
Ŧ˹ͼ
ʱʱͶעƱ ׿˼ľapp 7080Ϸ ʱʱֻ ȺӢԤ ʱʱ׬qqȺ 11ѡ5 ͼ ƻվ ɹʱʱ11ѡ5ͼ 120367Dzʿ ڲƱƽ̨ qqȺͧ ߸ʱʱ ǧڲᱦ