网页设计中,诱惑大脑中的“原始人”.pdfVIP

网页设计中 ，诱惑大脑中的“原始人” 每个人的大脑里都住着一个“原始人”。有一个经典说法 ：一图胜千 。 一个网站中 ，图片往往比文字更能吸引用户 ，人的视线似乎总在第一眼就定位在图片上。形成这种 神奇现象的原因很简单 ：每个人的大脑里都住着一个“原始人”。在原始时代 ，人的大脑需要处理的内 容大多和图像有关。比如 ，我们的祖先最关心哪里新长出来可以吃的果实 ，哪里有新的猎物 ，哪里 有猛兽出没、需要避开危险。这些重要地点和周边环境通过视觉和记忆保存在大脑里 ，在经历漫长 的进化后 ，人脑逐渐进化出最适宜生存的大脑结构。 因此 ，人类天生擅长处理和记忆图像。 研究表明 ，人脑对视觉影像的处理速度比文字快60000倍。同样 ，在网页设计中 ，图片更能发挥巨 大作用。有一个经典说法 ：一图胜千 。 浏览网页时 ，用户看到文字后经历这样的过程 ：阅读浏览、将文字内容化、情景化。经过这几个处 理阶段 ，用户才能搞清楚这段文字想要描述或表达什么。而可视化的信息 （照片、图片 ）可以让人 在3秒内迅速理解 ，不需要“翻译”阶段。 视觉影像在短时间内的重大影响力 ，决定了图像是视觉传达的一个重要手段。在网页设计中 ，图像 主要以图片、照片、信息图、图标等多种样式展现。那图有什么作用 ？A nyFo rWeb认为更恰当的说 法是“好图胜千 ”。什么是好图 ？网页设计中什么样的图才是合适的 ？本文分享一些网站中的经典 图的使用案例 ，让大家了解好图的作用。废话不多说 ，先上图说话 ： 1、Biamar 关键词 ：时尚感 品牌 视差滚动 HT ML5Biamar网站首页用了超大背景图 ，高端、时尚是网站给人的 第一感觉。 在背景图中 ，连绵起伏的山峦具有层次 ，衬托了人物形象 ，营造的环境氛围突出展示了服装的时 尚感 ，渲染并传达了Biamar的品牌内涵。此处使用的图 ，符合Biamar针织衫的品牌风格 ，向用户准 确传达了品牌理念。网站采用了视差滚动技术 ，页面用HT ML5写成 ，鼠标滚动时页面图和文字出现 不同层次 ，从视觉上更加衬托出网站的酷炫。 2、My Deejo 关键词 ：HT ML5 酷炫 360度全景3D展示 强互动性打开My Deejo 网站 ，首页的产品图片无疑是最 引人注目的 ：精致的折叠刀似乎悬浮在空中 ，从模糊的背景中凸显出来 ，尽显3D效果的视觉冲击力 。用户的视线很容易被产品吸引 ，主动去阅读文字 ，进一步了解产品特征。 在浏览过程中 ，用户会发现网站采用了超级酷炫的360度全景3D展示。通过滑动和滚动鼠标 ，可以 从全方位视角查看折叠刀的细节 ，并能自定义为刀身设置不同花纹和刀柄 ，充满趣味性。 同时还能点击折叠刀下面的O PE /CLO SE幽灵按钮 ，查看刀身打开和折叠的状态。 更棒的是 ，上图的交互效果完整展示了各个零件拼出折叠刀的动态效果 ，非常吸引人。该网站的效 果很容易激发用户的兴趣 ，让人沉浸其中、玩得不亦乐乎 ，留下深刻印象。 虽然网站酷炫的交互效果似乎更吸引人 ，但打开网站第一眼的惊艳 ，来自于产品图片本身的精致感 。正是产品图与背景的巧妙融合 ，完美展现了定制的个性化 ，才能发挥交互效果的最大作用。 3、EverEart h 关键词 ：360度水平旋转展示 产品图动态旋转 视差滚动 全面了解产品EverEart h是 由A nyFo rWeb开发的网站 ，该网站的整体风格清新 ，产品图片全部是拍摄的高清图片 ，从不同角 度展现产品细节。 网站采用了360度水平旋转展示技术展示产品。 与折叠刀定制案例不同的是 ，产品图片是自动360度水平旋转 ，非常方便用户查看产品各个侧面的 细节 ，帮助用户全面了解产品 ，感觉与产品更贴近。与静态图相比 ，动态影像显然更容易得到人的 注意力 ，不过对任何效果来说 ，只有适合的才是最好的。针对某些行业的产品 ，高清产品图片 和360度水平旋转展示可以发挥更好的作用 ，比如大型机械设备、精密仪器、珠宝等产品。 4 、PO SCO 关键词 ：线形图 风格统一 专业性PO SCO 网站的线形矢量图和线形图标是网站的一个特色。这种 独特的线形图 ，看起来简洁、形象。 该网站中的线形图有两个重要作用 ，一是当多个页面使用风格一致的线形图时 ，让网站具有统一性 ，能为网站塑造一种简单、专业的形象。另一个作用是 ，用户即使不看文字 ，也能通过线形图了解 文字传达的含义。通常 ，线形图可以起到传递信息的作用 ，好的线形图可以作为网站统一而独特的 元素 ，让网站具有一种设计感。 5、PO SCO 关键词 ：信息图 可视化 易于传播同