网页设计中

一个网站中,图片往往比文字更能引发用户,人的视线似乎总在首先眼就固定在图片上。形成这种神奇现象的缘故很粗略:每个人的大脑里都住着一个“原始人”。

在原始时代,人的大脑需要处理的内容大多和图像有关。比如,大家的上代最关注哪儿新长出来可以吃的战果,哪儿有新的猎物,何地有猛兽出没、需要避开危险。这个重大地方和周边环境通过视觉和记念保存在大脑里,在经历长时间的腾飞后,人脑逐渐提升出最方便生活的大脑社团。

所以,人类天生擅长处理和回想图像。

研究阐明,人脑对视觉形象的处理速度比文字快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度水平旋转显示   产品图动态旋转  视差滚动  系数领悟产品

伊芙(Eve)rEarth是由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网站接纳了漫画手绘风格的筹划,首页的图是一个特色分明的人物形象,不管是人物发型、神态,仍旧动作,都表现一种引人注目的个性化。

这种卡通手绘风格的图塑造的个性化相当非凡,能引发用户的注意力,具有高识别度,不仅符合该商家的形象定位,还容易给用户留下深入映像。


有关图的实在利用案例,以上就是AnyForWeb的本次分享。

从那一个案例中大家得以窥见,图在培训/影响网站风格、传递心情、打造品牌等地方起着老大关键的职能。进一步说,图的职能或许是传递消息、体现产品亮点,也说不定是传言品牌内涵、激发用户激情,甚至是激励用户反馈、促进购买等。

本来,图虽重要,但假诺只是给文字随便配图,或者采用了不确切的图,会大失所望。假设想要达到目的,就要看设计师怎样成功引发到用户大脑中的“原始人”了。

设计师应该咋样选用图,怎么样设计适合的图?在收受里的篇章里,AnyForWeb将和豪门分享怎么样成功引发“原始人”。

发表评论

电子邮件地址不会被公开。 必填项已用*标注