曹菲菲
【摘要】:互联网高速发展的时代,电子商务网页视觉设计越来越重要,以典型的电子购物平台淘宝天猫网为例,以平面视觉元素分析为研究框架,从文字、图片、色彩、版式四个方面对两者进行了对比分析研究,得出了电子商务网页视觉设计的一些基本规律。
【关键词】:电子商务;网页设计;视觉元素
一、前言
当今进入一个数字信息化时代,互联网在全球的普及,给人们的生活带来了很大的便利。尤其是电子商务的发展,极大地带动了网络经济的繁荣,网络购物已经成为当今中国人民普遍的生活方式。而作为商家和消费者连接的纽带,电子商务网络平台的重要性越发显著。对消费者来说电子商务平台的页面设计是最直接的视觉刺激,所以对其网页视觉设计进行研究就具有了现实的必要性,此研究有利于改进现有网页平台的视觉吸引力,带动更多的消费者提高消费欲望,从而为推动互联网经济进一步发展做出贡献。淘宝网作为中国用户最多的购物平台,研究淘宝网以及它旗下的天猫网的网页视觉设计,对其它电子商务网页设计来说具有很大的参考价值性,有利于推动其他电子商务和整体网络网页设计的发展。
二、网页设计的视觉元素分析
1.整体的设计理念:以人为本
天猫网是淘宝网的进阶版,两者虽然在网站定位上有区别,但两者的整体设计理念却保持了统一,都是以用户为导向,属于典型的用户体验设计的网络购物平台。在这两个网站首页,用户都可以很方便得用搜索栏搜索到自己需要的商品,或者通过左侧的分类导向一样很便捷地找到自己需要购买的商品。这里的对用户没有限制,用户身份可以是新用户也可以是老用户,两个网站都是为用户提供最方便最快捷的操作方式。首页界面分类齐全,种类繁多,方便了各种需求用户的购物诉求,两者都充分考虑到用户的需求,尊重了用户操作习惯,真正做到了以人为本的设计理念。尤其是淘宝网近两年推出的根据用户搜素习惯为每个用户定制推荐商品一栏,更是极大考虑每个用户的需求,推动了个性化服务发展。
2.视觉设计元素分析
淘宝网和天猫网是从属关系,前者内容上包含了后者。后者是前者细分化的一部分,天猫网定位更高品质的高端化购物平台。作为同类型的网站,对比而言,两者有很多相似设计,在具体视觉元素设计分析上也有很多类似的特点,文字、图片和色彩是具体表达了视觉信息,版式则是整体表达了视觉信息。总结起来:都配有简洁并富有变化的文字、展示了合适的设计感图片、呈现出活泼温馨的色彩搭配、形成了整齐有序的版面布局。但也存在着一些因为网站自身形象定位不同所作出的明显区别。
2.1.简洁并富有变化的文字
文字是最可以准确传达信息的载体,网页视觉设计在文字选择上则更多强调文字传递信息的功能,但是近几年注重了文字的审美。两者整体来看是选择了以黑色作为文字主要颜色,背景基本上为白底,这样的设计呈现出简洁明快的风格,优化了用户的视觉感受。导航栏淘宝和天猫都选了黑白两色的文字搭配,并且在字体大小上也做出了合适的变化,方便用户的视觉聚焦到重要网页信息上。总体选择了宋体和楷体两种主流字体,只在一些栏目标题以及店铺名称上选择了其他有具有美感的字体。淘宝的栏目名称上的字体有多种类别,比天猫字体选择更富有变化,呈现出商品琳琅满目的感觉。天猫基本上是选择了宋体,彰显出统一的美感,这种统一整齐感更能表现出一种高端质感,从而契合了天猫本身的高端化形象定位。在文字颜色上两者都是黑色为主,少部分加入了橙色、红色以及白色,这几个颜色都是起着醒目的作用,在黑色文字的衬托下,更能起到突出某些信息的作用。淘宝和天猫网上的文字表达都是精简准确,在传递信息方面效果明显,满足了用户的信息获取的需求,并且整体来看文字搭配符合网页的特点。
2.2.合适的设计感图片
网页上的文字主要功能是传递信息,在视觉传达方面给人更多的是平淡的感觉,而图片则能在视觉上给用户带来强有力的冲击,对用户的视觉刺激是最直接的,在视觉传达效果上是最佳的。图片的重要性得到越来越多的人重视,目前的电子商务网页设计都是以图片为主,文字为辅。淘宝和天猫网也是采取了图片为主,文字为辅的设计格局。打开这两个网站的首页,首先映入眼帘的就是大幅的图片,淘宝图片在尺寸大小上比天猫的小,淘宝更多是拼接的方式将图片组合在一起,而天猫的大幅图片尺寸基本整幅占满了屏幕,这样带来的视觉冲击是非常大的,配以高纯度底色,天猫首页带给用户高端时尚的感受,这一点也是牢牢契合天猫的高端化定位,对比之淘宝就朴实一点,大小不一的图片组合在一起,突出种类繁多的景象。再从图片内容上看,基本上都是对商品的展示,并且多角度的来展示,有的突出商品本身的特性,有的展现模特使用商品的良好效果。图片都是基本上采取了分辨率高清晰的照片,并且首页图片都加入了设计元素和后期加工,极具美感,更加注重了图片的审美性。另从实用性方面来说,展示的图片都准确传达了商品的信息,用户很容易解码图片从而选择需要的商品。图片基本形式也是以白色或者灰色为底,配之具体的商品样式,这一点在天猫网表现更明显,给人很强的秩序感。在这两个网页设计上,图片不仅有具象照片形式的,也有抽象图标形式的,具体和抽象相互结合,主次清晰,相得益彰。
2.3.活泼温馨的色彩搭配
色彩是网页设计非常重要的一部分,一个网页的整体色彩是用户形成第一印象的最关键的因素。色彩本身是没有任何感情因素的,但是由于人体感官的发展,人眼对色彩形成了比较固定的感情联想。最基本的就是基于色相的不同,分成了冷暖色系,暖色系如橙色,红色等,冷色系则有蓝色,绿色等。在明度和纯度这两个坐标上,明度是从色彩明暗程度来说的,明度高给人生机勃勃,活泼欢快的感受,明度低给人暗沉的感受。纯度是从色彩的鲜艳程度来说的,纯度越高越接近原色,越纯度低则越暗淡并且杂加白、灰色。首先淘宝和天猫这两个网站都有统一的颜色基调,淘宝的颜色基调是明度纯度都很高的橙色,天猫的颜色基调则选择了明度稍暗纯度很高的酒红色。首先这两个颜色的选择都是属于暖色调的,橙色和酒红色都营造了活泼温馨的购物氛围,这两者都属于红色系,有心理学研究表示红色系的色彩能使人体的脉搏增加,血压升高,使人的情绪处于兴奋而冲动的状态。这样来看這两者使用橙色和酒红色颜色基调无疑对提高用户购物欲望是有帮助的。天猫选择的明度适中纯度高的酒红色基调,增加了页面华丽的感觉,更突出了它最为高端化购物平台的定位。其次,这两个网页设计都增加了大片的白色,灰色作为搭配,因为大片的红色系看多了容易让人疲倦,增加了白色和灰色这两个安全平淡的颜色,中和了红色带来的强烈刺激感,这样不容易让人造成视觉疲倦,更显人性化设计理念。
2.4.整齐有序的版面布局
网页的版面布局是从整体来看的,版面设计关系到网页给人整体感受。随意无序的版面设计给人混乱感受,无法吸引用户有效浏览,而整齐有序的版面设计则会带给用户审美和实用上的双重享受。版面设计的秩序感,即方便了用户最快捷地找到需求信息,也通过井然有序的编排带给用户审美上的满足。淘宝和天猫在这一点上都采取了整齐规划的版面设计,以栏格式为基本的区分方式,区域以长方形为基本形状。在两个网站首页屏幕上,都采取了三纵栏的版式,导航栏放在上方,分类栏放在左方。比较来看,淘寶的分栏更多,更小,更细,而天猫的分栏则更加简洁。在秩序感上天猫比天猫更加强烈,更能显示出天猫的高格调的定位。