选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

网页设计中的情感表现技巧

这些网站能给你带来什么感觉?

从表面上看,阅读网站上的文章是一种感情的体验,但科学告诉我们,我们用情感来改变我们的理解。所以,是的,你正在经历一种情感的权利,但会是什么?让我们回到在文章末尾的问题,增强理解。

什么是感情?

马修·麦克唐纳描述感情这个东西正在从大脑的感觉区域区分开来。大脑的自动编程响应某些刺激,感情是我们理解情绪的方式。然而,情绪是立竿见影的,无意识的,而内在感觉是另一方面的处理和 意识。

为什么感情在设计中很重要?

“我明白了,人们会忘记你所说的,人们会忘记你做了什么,但人们永远不会忘记你带给他们的感受。 ”
– 玛雅安吉罗

情感具有维系你访客粘连度的能力。如果你的用户能在这里产生情绪反应,无论时间多久他都难以磨灭这一体验。

看看这个网站:

Mahe

www.mahedineyahia.fr你开始用以前从来没有过的最完美的视角来欣赏巴黎。是什么东西让你提高注意力,并且用动画的形式通知你。虽然你可以不会记住这个网站,但是你一定会记住这个惊喜,你向下滚动吧,试试第一感觉。

Iugo

iuqo.com
没有音乐,只是飞行。谁不爱坐在位置上,透过云层旅行?这几乎是最好的无缝视频去你向往的地方旅行,虽然你不知道是在哪里。我不好告诉你我盯着这个视频看了多久(虽然这有点尴尬)。这个网站的方式确实打动了我,抓住了我的注意力,并且给我留下了深刻的印象。

Before They

beforethey.com

我敢说你通过下拉的方式浏览这个网站,而不是滚动。令人惊奇的高清图像和设计讲述的故事会一直吸引你的情绪。

对受海马损伤,如阿尔茨海默氏症患者最近的一项研究,表明情绪挥之不去的记忆消退之后也是如此。虽然游客可能不记得一切你说,他们会记得的感觉。这种感觉会导致他们一次又一次地回流。

所有设计的重点是面向观众。编发积极的情绪会导致更长的访问,更高的参与,和对你的产品更多的兴奋。

情感设计的重要组成部分

许多人依靠文字形成与他们的访客间的情感纽带,但仅靠文字不足以创造情感。

即使在像Zen Habits,这是著名的极简主义网站,它的情感诉求并不仅仅从文字中获得。作为读者,你觉得在和平,或禅,因为它的目的是在这样一种方式,来唤起你内在的情感。有没有侧边栏。有没有图像。但是,有白色的空间。这感觉纯正,地道和真实。

zenhabits.net

正如你可以说的关于Leo Babuata的设计,字体样式、尺寸和行间距能给产生不同的情感影响。在禅宗习惯的设计里,透气性、开放性和干净的版式是他们设计的主流。他们这样的排版也一样讲述了故事。

你的字体会表述什么情感?

字体可以表现出有好、认真、聪明和不幸。字体有很多不同的类型,但对于文字内容的表现,我们主要讨论以下四种:衬线(对字母的两端装饰) ;无衬线(无衬线,或在字母的两端装饰) ;手写体;和装饰体。

 

衬线字体传达传统主义和尊重如:Times New Roman:

timesnewroman

无衬线字体是决然更现代. 像Calibri:

calibri

手写体可以是复杂的也可以是保守的. 如 Pacifico:

pacifico

装饰体可以是异想天开的. 如 Impact Label:

impact label

在你的设计中,你像把那种感觉作为引子呢?如果你要给访客尊重的感觉请选罗马体或者是新细明体字型。如果你想给他们有创意的感觉,尝试新的Facebook字体或者是Base05字体。

字体的选用应该能呼应你的设计意图。选择字体就像选择爱情,不能是随机的。他们应该能更深的揭示你的情感故事。

色彩的作用是什么?

色彩毫无疑问是说明和增进你网页设计情感的一个最佳的解决方案。科学已经证明了一遍又一遍,人类情绪会受色彩影响。为什么麦当劳的标志黄色和红色的?因为它们引发了饥饿感和快乐的感觉。

当用户第一次访问你的网站,他们得到一个印象,你是谁?并建立识别你的方式。色彩、字体和其他的视觉元素会自动设置一个用户印象中的网站场景

wikipedia.com

例如,当你去维基百科,你可以通过蓝色和灰色的配色方案来判断他是可靠和可信的。你可以通过字体的选中和字号的大小来猜测他是严肃和聪明的。你还可以通过图形分辨率看得出他们的图片是没有购买高清的,这只是一个玩笑。有时候维基百科也有很大的图片,但是图片往往不是他们的内容焦点。维基百科的核心和所有的网站一样——内容。

yelp.com

另外一个例子是 Yelp, 它的主色是蓝色和红色。这些色彩组合在说明什么?我们是如何理解yelp的?它谋求的是值得信赖,抓住你的注意力。红色是yelp绝对啦眼的和评论中主要的色调。虽然红色可以让你感觉到饥饿,但是它也容易抓住你的注意力。

tripadvisor.com

有些网站是绿色和蓝色。一个例子是 TripAdvisor,它使用这些颜色来传达一种放松的感觉和信任感(因为你可以阅读到其他用户的真实点评)。你已经注意到趋势?蓝色通常用于网页设计沟通信任和可靠性。

让我们看看颜色是如何改变我们的情绪的:

黄色:快乐,乐观,净度
橙色:友好,更爱它还是恨它
红色:令人兴奋的,年轻的,紧急的,瞩目
紫:创意,想象力,令人振奋
蓝色:可信,可靠,安全的
绿色:和平,成长,放松
灰色:平衡,中性,可靠,智能
黑色:豪华,功能强大,权威

我们很多人选择色彩要么是因为搭配或者是因为漂亮,但如果你选了错误的色彩,它会发出一种混合的情感讯息给你的访客。例如,一些电子商务企业如:PayPal、Stripe和Authorize.Net,他们在设计上突出使用蓝色,目的是为了突出安全性。也有一些反面例子,如美国银行作为一家金融机构使用了红色。美国银行使用红色是为了表现他的独家销售的产品特征。但是,和蓝色的安全感相比,这确实让人有紧迫感。

再回到您的色彩选中,你可以看到你的设计是非常令人振奋的情绪?

内容是什么?

“如果你的网站是一个人,那会是谁?这是个严肃问题,因为他搞定了所有的业务而且值得信赖。他是一个俏皮的话哥们,即使工作很平凡”
-Aarron Walter, 情感设计

huggingwords

此前,我说,文字是不够的,但别搞错了,这是肯定的情感体验一个巨大的一部分。在他的开创性著作,为设计情感,Aarron Walter共享一个强大的可视化。你的网站是什么类型的人?

了解你的网站的风格将帮助您决定如何与你的访问者进行交互。正如我前面所提到的有关维基百科派对,思考访问者如何接受你。难道他们来访问你的网站只是为了一乐,或者是启发,或者是授权?  在内容上不只是你说了什么,而且你怎么说都会给人带来不同的反应。你可以而且必须通过内容引起人物的情感。

图片能带了什么?

当谈到唤起情感,有什么更好的工具比的图像吗?一张图片胜过千言万语,确实如此。图像能深深打动你。它不必是一个严重的tear-jerker。也许是一些很傻的东西,让你笑了几天。

无论你寻求表现什么情感,有一张图片将会很轻松的表达出来。

图像是内容的范围。图像能支撑文字内容有时候会很好的揭示你说的关键点。我们平时交谈的时候总是通过肢体语言去协助表达,图像就是起了这个作用。

成功的设计采用图像与观众见面。图片可以拉任何情绪。

一个趋势,我感到特别兴奋的是使用全屏视频。这些影片是生活的一小片,不够长,要求充分参与,但足够长的时间来传达与游客的消息。请考虑以下网站:

成功的设计总是用图像打动观众。图像可以带来任何情感。另外一个趋势就是用视频做背景,可能是一个生活短片,虽然不够长,但是能更好的表达情感信息。

PayPal

paypal.com

我喜欢使用视频。它轻轻地强化了社会证明他人正在使用PayPal,你也应该这么做。而且配色方案,它引出的信任感和可靠性。

Vimeo

vimeo.com

Vimeo是YouTube的艺术气息的继兄弟。这当然是对视频网站的一个最好的荣誉,他们的首页上也有这样的消息。

Gifn

gifn.it

你可能没有听说过Gifn ,但它展示了一个美丽而充满活力的设计,让你一看就有想加入的兴趣。一起来看看该系列在主页上的视频。它们给你带了什么感觉?快乐!这很难不让你笑,特别是因为每个人都在向你微笑。

让我们总结下

如果你设计的网页是个人:

1.字体和色彩是衣服
2.内容是语言
3.图像是脸

现在,你已经熟悉了网页设计情感相关的知识基础点,请我这个网站让你觉得如何?你自己的网页给你带来了什么感觉?

 原文:http://webdesignledger.com/trends-2/youre-not-emotional-emotions-and-web-design  (云瑞译
云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。