网页设计中，诱惑大脑中的“原始人”

一个网站中，图画通常比文字更能招引用户，人的视野好像总在第一眼就定位在图画上。构成这种奇特景象的原因很简单：
每个人的大脑里都住着一个“原始人”。

在原始时代，人的大脑需求处理的内容大多和图画有关。比方，咱们的先人最关怀哪里新长出来能够吃的果实，哪里有新的猎物，哪里有猛兽出没、需求避开风险。这些主要地址和周边环境经过视觉和回忆保存在大脑里，在阅历绵长的进化后，人脑逐步进化出最合适生计的大脑结构。

因而，人类天然生成拿手处理和回忆图画。

研讨标明，人脑对视觉形象的处理速度比文字快60000倍。

相同，在页面规划中，图画更能表现巨大效果。有一个经典说法：一图胜千言。

阅览页面时，用户看到文字后阅历这么的进程：阅览阅览、将文字内容化、情形化。经过这几个处理期间，用户才干搞清楚这段文字想要描绘或表达什。而可视化的信息（相片、图画）能够让人在3秒内敏捷了解，不需求“翻译”期间。

视觉形象在短时间内的严重影响力，决议了图画是视觉传达的一个主要手法。

在页面规划中，图画主要以图画、相片、信息图、图标等多种款式展现。

那图有啥效果？AnyForWeb以为更恰当的说法是“好图胜千言”。

啥是好图？页面规划中啥样的图才是适宜的？

这篇文章共享一些网站中的经典图的运用事例，让咱们了解好图的效果。废话不多说，先上图说话：

1  Biamar  
关键字：时髦感 品牌 视差翻滚 HTML5

Biamar网站主页用了超大布景图，高端、时髦是网站给人的第一感触。

在布景图中，连绵起伏的山峦具有层次，烘托了人物形象，营建的环境空气杰出展现了服装的时髦感，烘托并传达了Biamar的品牌内在。

此处运用的图，契合Biamar针织衫的品牌个性，向用户精确传达了品牌理念。

网站选用了视差翻滚技能，页面用HTML5写成，鼠标翻滚时页面图和文字呈现不一样层次，从视觉上愈加烘托出网站的酷炫。

2  My Deejo  
关键字：HTML5  酷炫  360度全景3D展现  强互动性

翻开My Deejo网站，主页的商品图画无疑是最有目共睹的：精美的折叠刀好像悬浮在空中，从含糊的布景中凸显出来，尽显3D效
果的视觉冲击力。用户的视野很简单被商品招引，主动去阅览文字，进一步了解商品特征。

在阅览进程中，用户会发现网站选用了超级酷炫的360度全景3D展现。经过滑动和翻滚鼠标，能够从全方位视角检查折叠刀的细节，
并能自定义为刀身设置不一样斑纹和刀柄，充满趣味性。


同时还能点击折叠刀下面的OPEN/CLOSE幽灵按钮，检查刀身翻开和折叠的状况。


更棒的是，上图的交互效果完整展现了各个零件拼出折叠刀的动态效果，十分招引人。

该网站的效果很简单激起用户的爱好，让人沉浸其间、玩得不亦乐乎，留下深刻形象。

尽管网站酷炫的交互效果好像更招引人，但翻开网站第一眼的惊艳，来自于商品图画自身的精美感。恰是商品图与布景的奇妙交融，
完美展现了定制的个性化，才干表现交互效果的最大效果。

3  EverEarth  
关键字：360度水平旋转展现  商品图动态旋转 视差翻滚 悉数了解商品

EverEarth是由AnyForWeb开发的网站，该网站的全体个性新鲜，商品图画悉数是拍照的高清图画，从不一样视点展现商品细节。

网站选用了360度水平旋转展现技能展现商品。

与折叠刀定制事例不一样的是，商品图画是主动360度水平旋转，十分便利用户检查商品各个旁边面的细节，协助用户悉数了解商品，感
觉与商品更靠近。

与静态图对比，动态形象明显更简单得到人的留意力，不过对任何效果来说，只有合适的才是最好的。

对于某些职业的商品，高清商品图画和360度水平旋转展现能够表现十分好的效果，比方大型机械设备、精密仪器、珠宝等商品。

4  POSCO  
关键字：线形图 个性共同 专业性

POSCO网站的线形矢量图和线形图标是网站的一个特征。这种共同的线形图，看起来简练、形象。

该网站中的线形图有两个主要效果，一是当多个页面运用个性共同的线形图时，让网站具有共同性，能为网站刻画一种简单、专业的
形象。另一个效果是，用户即便不看文字，也能经过线形图了解文字传达的意义。

通常，线形图能够起到传递信息的效果，好的线形图能够作为网站共同而共同的元素，让网站具有一种规划感。

5  POSCO  
关键字：信息图 可视化 易于传达

相同在POSCO网站上，还选用了扁平化的信息图规划。

该网站中，信息图将数据、文字转化为更直观的可视化方式，让人更简单了解和感触。

与文字对比，该事例运用更赋有招引力的信息图，而且其配色和网站全体个性相共同，让用户的留意力会集在数据上，让人在脑海中
敏捷树立可视化形象。

在网站中合理运用信息图，是提高传达效果的最优途径之一。

6  Glanway伽然  
关键字：流程图  直观 易了解 人文精神

在Glanway伽然的招聘请求中，以流程图的方式展现了招聘请求流程，看上去一望而知。

上图的悉数流程用图标、线条、文字调配展现，强化了流程的图顺序，并视觉上增加了文字排版款式，显得漂亮。

从视觉效果来说，纯粹的文字描绘在页面中显得单调或板滞，而不相同式的流程图通常比文字有更多款式，乃至让用户感到操作步骤
简化，进而影响用户反响、推进人举动。

7  Vito Salvatore  
关键字：手写文字 情怀 经典 发生共鸣

假如让你用图画表达留念，你会用啥样的图？在Vito Salvatore网站上，一张和布景融为一体的相片让人情不自禁发生一种留念的
心情。

大布景图含糊化，让人的视觉会集在“相片”中的路虎车和人物上，色彩的奇妙改变，让相片与周边坏境融为一体，又凸显了层次感。
路虎第一款发如今1989年推出，相片下手写的“1989”让留念味儿更浓，再加上包括“25 Years”的大号文字，让悉数页面烘托出一种
经典的感触。

该网站此处图画的运用，能够激起用户情感，导致用户共鸣。

8  The Lounge  
关键字：手绘风 人物实在形象 亲切感 人情味

The Lounge网站中，服务人员悉数选用了手绘风的人物实在形象，是网站的一个特征。

该网站的实在人物形象展现让用户感触到服务背面有活生生的人，体会到一种实在感和亲切感。这种亲切友好更有人情味，对比简单让
用户发生信任，无形中提高了网站用户体会。

别的，网站规划与事务紧密联系，手绘个性更是表现了一种艺术气味，奇妙传递该公司的事务特征。

但规划师们需求留意，应谨慎挑选和规划人物实在形象，由于不恰当的人物相片呈如今网站上，反而影响网站阅览效果。

该网站能够获得十分好效果的原因是：从全体看，无论是左边的实在人物形象，仍是右侧的手绘人物、以及别的元素（梳子、剪刀等）风
格共同，而且在配色上和谐、交融，让网站全体个性保持着共同。

9  La Baldufa  
关键字：卡通图 情感染 感动用户

La Baldufa网站的商品选用了很多心爱的卡通图，充满了童趣。

在网站上，一切的卡通图色彩鲜亮柔软，显得活泼心爱，十分契合婴幼儿用品给人的感触。而且卡通图的布景选用圆角规划，潜在包含
并传达出商品的安全性，也十分好地烘托网站全体的卡通个性。

该网站的卡通图契合商品定位，不仅仅为了展现商品，还从全体营建了一种幼嫩、温馨的空气，能够引发人心里的柔软，感动用户。

10  Glamour.biz  
关键字：卡通手绘风 个性化 高辨认度

Glamour.biz网站选用了卡通手绘个性的规划，主页的图是一个特征明显的人物形象，不管是人物发型、神态，仍是动作，都展现一种
激烈的个性化。

这种卡通手绘个性的图刻画的个性化十分共同，能招引用户的留意力，具有高辨认度，不只契合该公司的形象定位，还简单给用户留下
深刻形象。

从这些事例中咱们能够发现，图在刻画/影响网站个性、传递情感、打造品牌等方面起着十分主要的效果。进一步说，图的效果可能是
传递信息、展现商品长处，也可能是传达品牌内在、激起用户情感，乃至是影响用户反响、推进采购等。

当然，图虽主要，但假如仅仅给文字随意配图，或许挑选了不适宜的图，会适得其反。假如想要到达方针，就要看规划师怎么成功引诱
到用户大脑中的“原始人”了。