陌北默

北京pk10预测网:如何用色彩打造动人心弦的设计?

陌北默 设计理论 8776浏览

pk10技巧 冠亚和稳赚 www.581n8.cn dropbox

根据Kissmetrics 的说法,当我们看到一个色彩的时候,信息会传递到大脑的下丘脑的某个区域中。接下来,信号会进一步传递到脑垂体,然后到甲状腺腺体。这也就意味着,色彩会刺激大脑和腺体分泌激素,引发出我们的情绪反应,并影响我们的行为。

科学研究表明,色彩会影响情绪,会招致正面的情绪,也能带来负面的影响,有的时候带来的情绪与实际要的并不匹配。Kissmetrics 接着补充道,网站的访客通常只需要大概90秒就能针对一个网站作出判断和选择,而在者其中,有62%~90%的因素是取决于某个产品的色彩。

在UXPin的免费电子书Web Design for the Human Eye?中我们曾说过,某个事物在给人第一印象的时候,色彩扮演着无可争议的重要角色。

色彩意味着什么

每种色彩对于每个人而言都有着特定的含义,但是它的具体含义通常取决于他们所处的文化背景、个人经历和喜好。

简单说明这一点,我们不妨看看下面的色卡。

colors

事实上,色彩心理学在设计领域并不是一个精确的学科,个体差异非常明显。社会因素,个人认知,甚至性别也会对色彩感知产生影响。进一步的研究发现,产生影响的并不总是色彩本身,使用这些色彩的品牌与用户之间的关系也会影响用户对于色彩的感知。

Kissmetrics

所以,如果你的设计是针对女性的,那么紫色会是一个相当不错的选择,因为紫色在女性受众中普遍受欢迎,但是对于多数男性而言,紫色并不太受欢迎。在下方的图片中,紫色被运用在巴黎欧莱雅的网页中,效果非常不错。主体使用的黑白配色,黑色的页头页脚看起来非常优雅,紫色点缀其中,整体感非常不错。实际上他们的产品并不便宜,但是给人感觉比较高端。

Kissmetrics1

另外,使用白色的文本,让人感觉平静又足够现代,紫色则被赋予了奢华、优雅、女性化的含义。所有的这些都能够在这个网站里查到。

(想了解更多极简风的设计以及如何使用留白来营造现代感,可以看看这本电子书:?The Elegance of Minimalism?和?The Zen of White Space in Web Design?

下图是女性健康杂志的页面,上面的Banner使用了粉红色,导航设计更为大胆,除此以外网站其他的地方用色倒并不丰富。不得不说这样的选择非常有趣。

首先,对于女性类的网站而言,粉红色本身还是比较老套的,但是作为一个女性健康类的网站,这样的配色和主体并不算是特别搭。

?Women’s-Health

当我们继续探索网站其他的部分,比如当你打开减肥页面的时候,导航栏上相应的位置会变成粉色以示标识。

Women’s-Health1

色彩会影响用户的心情和感受,尽管这个页面的第一张图片是随机滚动播放的,但是想想看,整个减肥相关的页面几乎被粉色淹没了,适得其反。

配色方案

通常当你准备设计一个网站的时候,不会只使用一种色彩吧?你需要考虑整个网站的整体配色方案,单个色彩的选取,以及不同色彩之间的搭配。接下来,你还需要考虑不同色彩对于用户的影响,搭配色与主色调之间的协调,等等等等。

这样一来,就需要设计师对于色彩的混合搭配使用有更深入的考量了。下面三个基本的配色技巧,可以帮你搞定这一问题。

#1: 三色搭配

Triadic

这是最基本的方法,也是最平衡的配色思路,使用互补的鲜艳色彩。在色轮上选取相互间隔120度角的三种色彩,分别来作为背景、内容和导航的色彩。

#2: 组合配色(拆分互补)

Compound-Split-Complementary

这种配色方案相对而言比较有难度,你需要通过一定的测试和探索才能获取。如果搭配好了,效果非常惊艳。如图所示,这种配色方案是选取色轮上相邻的两对对比色。

#3: 近似配色

Analogous

这种配色的核心是选取连续的相邻互补色,如果你想借此来取悦用户的话,在选取的时候一定要谨慎小心。这种配色方式能够突出色彩的活力,但是因为相辅相成,色彩和效果对比不会那么强烈,但是会更加夸张。

所以,当你开始考虑色彩的心理学属性的时候,尽量将整个配色方案作为整体来进行衡量,而不是单独为某个部分选取一个色彩,以期它能与其他部分协调工作。

看看下面的页面,想想看,它会向用户传达怎样的信息呢?

Codementor

1、背景色——深色的背景让整个页面看起来经典、精益求精、沉稳、正式且足够“企业化”。当你设计一个网站的是,“精益求精”的感觉总能给人良好的观感。正式和企业化的属性,则通常能让访客不会以玩乐的心态来看待这个网站,且能够带来一定的信任感。

2、按钮色—— 设计师在这个CTA按钮(行为召唤按钮)上使用了强对比的红色,醒目且非常吸引用户去点击。相对而言,白色边缘的幽灵按钮在优先级上明显低于红色的CTA按钮。按钮用色按钮用色在整体配色中符合逻辑,位置清晰。

3、文本色——白色的文本与黑色的底色形成明显的对比,从整体配色方案上来看也非常搭调。另外和文字搭配的线条图标也采用了同样的白色,在色彩上采用了高度一致的方案,露头的文本暗示用户需要向下滚动。

总体上来说,整套设计方案还不错,中规中矩的黑白配,加上红色之后,就显得活泼起来了。由于红色的使用相当之可知,稍加点缀,不会显得过犹不及,这一切让整个配色脱颖而出。让整个配色脱颖而出。

需要规避的用色

棕色通常能给人以自然的感觉,但是这种色彩通常都不为男性所喜。但是在有的场合,棕色能让人产生可靠和安全的感觉,这个时候使用还是挺不错的。

Color-Matters

作为一家著名的物流公司,UPS使用棕色能给用户一种强烈的可被依赖的感觉。

但是作为怀俄明州大学橄榄球队的队服的用色,这套配色方案被评为史上最差的设计方案。最有趣的地方在于,这套棕色的队服大家一致认为它非常的耐用,但是与此同时也 非常的难看。男性对于色彩的认知在这一设计上体现得淋漓尽致。

在女性用户这边,橙色也是相对不那么受欢迎的色彩,所以,如果你的客户是女性的话,尽量避免这一点。

当然,这些规则大都是一些指引性的条目,它们通常都有上下文和使用场景,色彩只有和谐搭配起来才会看起来漂亮而合用。

配色和取色工具

用现成的配色方案和调色板其实理所当然的事情,你并不需要为网页设计或者UI设计方案单独创造色轮。

Adobe Color CC?– Adobe出品的配色工具,之前被称为Kuler。

Paletton?– 这是一套为初学者准备的取色工具。

Flat UI Color Picker?– 这是一套扁平化配色工具

Mudcube Color Sphere?– 内置了一系列色彩主题,相应的配色都包含了相应的HEX代码。

Check My Colours?– 这个工具是用来坚持前景和背景的色彩组合的,它能提供正确的对比度检测,确保色盲用户也能正常分辨色彩。

Color?– 这个工具允许你用鼠标在屏幕上取色,设置饱和度,并且提供相应的HEX代码。

案例分析

网络上有成千上网的网站,其中有许多不错的站点,但是绝大部分和优秀无关。不过下方的网站,正式优秀的那波中的一员,它曾荣获Awwwards 的每日最佳网站的头衔。

AWWWards

网站的背景色使用的是浅灰,同其中电动车的配色同系。整个页面设计简单,超大的字体和小巧的车体形成对比,传达出电动车小巧灵活的特性。作为中性色的灰色,让页面中其他的色彩更加鲜艳也更加显眼,对比明显,也赋予了页面以活力。同时,灰色的主色调,也强调了产品和品牌沉稳大气的一面。

巨大的Go,配色开朗活泼,渐变和鲜亮充分展现了设计的现代性。很重要的一点是,蓝色是男性和女性都非常喜欢的色彩,这一点使得网站是不针对性别进行区别的?;疑勾锌酥坪突繁5奶匦?,结合电动车小巧的设计,整个设计还在暗示产品的环保和安全的特性。

总体而言,这个页面的生活感和现代感和当代都市人的状态契合度非常高。

最后的注意事项

色彩是产品设计的重要部分,同时也是品牌设计中至关重要的一环。所以,在设计网站或者UI的时候,色彩传达的意义必须同品牌契合,将品牌故事和意义 融入到设计到中来。通常情况下,设计师会直接从品牌的LOGO或者品牌设计指南来取色,尽管这样会有局限,但是这确实可以让事情变得更简单。

原文地址:designmodo

译文地址:优设

优设译者:@陈子木

转载请注明:pk10技巧 冠亚和稳赚 » 如何用色彩打造动人心弦的设计?

登录收藏
 
你可能喜欢的:
如何改进注册/登录用户体验如何改进注册/登录用户体验
初级设计师必备-色彩基础部分【内附干货】初级设计师必备-色彩基础部分【内附干货】
交互设计案例分享之指纹识别(附完整交互文档)交互设计案例分享之指纹识别(附完整交互文档)
全面解析弹窗提醒交互设计全面解析弹窗提醒交互设计
掌握了这个导航控件,你可以设计80%的应用导航掌握了这个导航控件,你可以设计80%的应用导航
用户界面中的按钮基本类型用户界面中的按钮基本类型
谈像素画在终端游戏中的现状,问题及对策分析谈像素画在终端游戏中的现状,问题及对策分析
鬼话连篇之 —— “标签的使用方法”鬼话连篇之 —— “标签的使用方法”
关于瓷片区,你需要了解这些设计要点关于瓷片区,你需要了解这些设计要点
Dribbble-变化的尝试Dribbble-变化的尝试
?
  • 中信银行收购阿尔金银行后新股东“首聚” 2019-06-24
  • 钱江潮评 让高质量发展插上人才的翅膀 2019-06-24
  • 湖北浠水十月村经济史料及其研究价值 2019-06-23
  • 高清:鲍哈杜兹自摆乌龙 摩洛哥0 2019-06-23
  • 中国动力电池市场竞争加剧 70家公司仅占三成份额 2019-06-22
  • 发展的机遇 合作的平台(国际论坛) 2019-06-22
  • 美丽中国:环保督察 不达目的不松手 2019-06-21
  • [微笑]这样一来,混资源的被杜绝了,真正有病需要治的也不受影响! 2019-06-21
  • 天津市级机关工委机关党委部署开展br“不忘初心 牢记使命”——纪念建党97周年系列活动 2019-06-20
  • 端午节过后福利多高铁票打折 高温津贴提高! 2019-06-20
  • 国务院关税税则委员会关于对原产于美国500亿美元进口商品加征关税的公告 2019-06-19
  • 学深悟透监察法 提高履职尽责能力 2019-06-18
  • 《虎啸龙吟》黑化司马懿?真实的人性没那么简单 2019-06-17
  • 中国共产党第十九次全国代表大会 2019-06-16
  • 《古汉字发展论》简介 2019-06-15
  • 腾讯分分彩可以控制吗 优博线上娱乐城百家乐打不开 浙江11选5号码推荐 泳坛夺金任二选号技巧 新疆18选7走势图 斗地主规则四带二 快乐时时彩是哪里的 深圳风采新材料 上海时时乐开奖视频 江苏7位数18159期 香港6合特码资料 顶呱刮怎么算中奖 四川快乐12免费预测 香港六合彩全年资 黑龙江时时彩通知