电商网页界面视觉设计元素解析

冯浩煜

中图分类号： J905 文献标识码： A 文章编号： 2095-2457（2018）01-0159-002

1 基础文字作为基石

在最初网页形成时，网页的界面其实只有文字，是当时互联网信息传递的唯一载体。虽然随着电子商务的成熟和互联网技术的提升，网页上多了更丰富的元素，可是文字依旧是不可缺少的载体，缺少文字的网站往往不能给使用者带来最舒适的使用感受。文字可以出现在电商网页界面的任何地方，不论是首页还是产品介绍，或者是导航处，文字的功能已经不仅仅是一种书面语言，在传达文化，更有提升网页界面审美价值的附加功能。优秀的文字设计与排版会增加整个电商网页的视觉效果，吸引用户浏览，从而促进了产品的销售。

就电子商务网站中文字的主要功能来说，要准确有效的传达商品信息，就要考虑文字的整体视觉效果，是否符合电商网页的特性，网站页面的诉求力能否达到浏览者的要求。

我认为电子商务网站中文字需要具有以下特性：首先，文字要清晰可见，容易识别，消费者通过网络进行消费寻求的就是简洁、直接、方便，好的电商网页肯定会给消费者干净、便捷的最初视觉印象。其次，电商网页中的文字一定要方便阅读，文字的排版和布局对于浏览者视觉感受来说是非常重要的，我们可以从行间距、字距或者文字排列上进行设计。最后，网页中的文字设计一般都是有轻有重的，在不影响整体网页风格的前提下，多一些适当变化的文字，使网页界面更有节奏、更有朝气。对于电商网页设计中这点同样适用，例如给当季正在促销的区域标题文字加粗、加框、加下划线、改变文字样式等，强化视觉效果。但是要注意的是，在电商网页中不能滥用彩色字体，如果整篇页面处处都是重点只会让人眼花，不会起到任何美化效果。

2 必不可少的Tab标签

Tab标签是网页中不可缺少的部分，在静态页面设计中，尽量避免使用多排水平标签的布置，可以使用垂直标签代替；如果标签之间存在结构，可以将标签分组，分组可以以下拉菜单或颜色分组等方式进行；如果标签重要性或相关性存在区别，可以显示最重要的标签，然后加入“更多”选项；如果标签之间都是相互平等的，可以考虑对标签栏进行操作，如加入左右移动按钮等，允许用户滑动或拖动。

Tab标签分为两大部分，标签区和内容区。标签区分为选中的标签及未选中的标签，一般情况下选中标签的颜色与未选中标签的背景色明显区分开，具有较高的辨别度。标签区的标题文字之间应该有某种特定的联系，信息之间不应该存在对比或者并行的关系，标题文字也应该是简短精炼的。内容区为重叠区域，每层内容交替显示，既整理了信息，又在有限的空间显示大量内容，信息可以以文字呈现，也可以如下图所示以标志呈现，但是排布必须工整且统一。

3 多层次多形式且有指示性的导航

网页导航表现为网页的栏目菜单设置、辅助菜单、其他在线帮助等形式。网页导航设置是在网页栏目结构的基础上，进一步为用户浏览网页提供的提示系统。网页导航一般分为三种，主导航、次导航、面包屑导航。主导航一般位于网页页眉顶部或者banner下部，可以第一时间引导访问者进入需要的信息栏目。次导航一般位于网站的两侧，当访问者需要切换到其他栏目时，可以通过次导航进入。面包屑导航是一个位置导航，用来让访问者知道自己所在网页的具体位置，是一种显示访问者在网站或网络应用中的位置一层层指引的导航。

顶部水平栏导航是当前兩种最流行的网站导航菜单设计之一，最常用于网站的主导航设计中，且通常放在网站所有页面的网站logo的上方或下方。对于信息过于繁杂的电商网站来说，这种导航最为常见，因为可以使用户操作起来更简便舒适。次导航有几种呈现形式，比如抽屉式导航，默认情况下导航菜单根本不显示，只有当鼠标触及到指定图标时才会打开。当触及到其中一个栏目时，第二层的内容才会继续逐渐展开，给用户清晰明朗的内容导航。这种导航对于电商网页最为合适，不仅节约了本就紧促有限的网页空间，更能给使用者指清操作路径。其次，在导航设计中尽量降低鼠标的操作难度。网站建立好不是为了让用户漫无目的的浏览，而是要引导用户最终访问网站的目标页面。最后就是应该重视面包屑导航设计，明确告知用户目前所在位置。面包屑导航是帮助用户判断当前位置的最好方法，所以一定要设计的易于识别，可以通过字体颜色改变、字体加粗、字号加大等方式与页面中的其他文字区分出来，不要在这里设计太多花哨的东西。

4 信息精简的延展表单

每当页面中出现需要填写的表单时，用户就开始感到头疼，有些用户甚至直接选择放弃，而设计者应该考虑的是如何让用户看到表单时不会产生反感，让他们直接注意到他们需要填的必填项，减少其他信息的干扰。

对于商业中的表单来说，用户的目的是获取网站商品信息及完成购买；商业目的是提升销售量，获取利益最大化。网页表单是必要的，而往往是设计师和用户的痛点。随着时间的推移，用户已经形成一种期望，表单的外观应该如何以及如何运作。他们通常期望网页表单有以下六个组成部分：标签、输入框、行为、帮助、信息和验证。同样，构成电商网页表单的这六个部分的功能之间也是互不相同但相辅相成的，标签可以告诉用户即将输入的元素的含义是什么；输入框可以让用户提供反馈，包括文字输入框、密码输入框、复选框、单选按钮、滑块以及更多；行为是在用户按下链接或按钮时表单会执行相应操作的按钮；帮助会在用户填写表单时提供及时有效的操作指南；信息是系统对用户输入信息的反馈，在上图登录名后方的信息，给予的反馈属于负面反馈，是对用户输入信息的不肯定，也有正面反馈，如“用户名可使用”这种信息等；验证是最基本的确保用户提交数据符合可接受参数。

5 面子工程——logo

Logo在传播中起到识别和推广公司或网站的作用，好的logo可以让消费者记住公司主体和相关网页，网络中的logo主要是各个网站用来与其他网站链接的图形标志，代表一个网站或网站的一个板块。

Logo在电商网页版面设计中也是必不可少的，当用户在第一时间进入一个站点中时，电商网站logo无疑就是首先进入用户的视线的，这时如果logo没有任何特色就毫无吸引力，该网站很可能给用户留下零印象。相反如果某个电商网页的logo很吸引视线，就会让人轻易记住该logo及网站，进而可以增加电商网站的交易量。所以，网站的logo作为电商网页推广最重要的一部分，是应用最广泛、出现频率最高的视觉元素。它不再是简简单单的一个图形或者与文字的组合，它是根据特定的网页类型、整体风格结构并考虑该网页的受众及应用环境，为网站量身定做的标准视觉符号。

6 图形链接——Icon

在网页的浏览过程中，使用者很容易迷失方向，不知道应该点哪里，图标在网页的作用也就体现在此，图标不仅可以美化网页界面，更能清楚的告诉使用者的位置及接下来该进行的步骤。图标在网页的使用成为了将信息高效率传递给消费者的有效方式之一。

图标在一般意义上，它是一个图像，一种表示手法，是重要的，并且具有持久效用符号。点击图标可以产生不同的行为结果，好比打开一个文件或者执行一个程序。在大部分情况下，图标所采用的图像是与它所要表现的内容紧密相关的，比如文件夹的icon就是一个文件袋的图。电商网页中也有大量的图形元素出现，而且图标所表现的行为或者它所代表特殊的网页性质也使图标区别于其他网页，但是在电商网页中，有几个固定含义的图标为大部分电商网页通用。如收藏夹的icon就是一个正五角星，这个图标的不同配色运用于各个电商网页，但是都代表着收藏夹的含义。

7 合理有效地管理配色

在电商网页的众多构成因素中，颜色比文字与图形更能引起人的视觉反应。合理的运用颜色可以对购物网站的商品进行分类，从而提升使用者的浏览速度，更为便捷的搜索到自己所需要的产品类別，并定义了整个电商网站的风格。我认为，电商网页颜色的设计的过程是通过进行市场调研，选择符合那些对该网页感兴趣的潜在用户的感受，而不是紧紧跟随设计者本身的颜色搭配，从而了解到该电商网页的风格要求，这样设计出的色彩才不会令访问者失望。

电子商务网站的颜色具有几个特性：首先，电商网页的颜色具有导向性，工业设计色彩专家安契尔霍金认为“色彩能够直接影响人的思维状态及心理活动，这是商品和生产销售的命脉”。根据色彩对人心理的影响，合理地加以运用。其次，电商网页的颜色也具有功能性。根据色彩给人留下的印象深浅排名，暖色一般给人留下的印象比较深刻；同时色彩还具有特定的联想和象征意义，例如，蓝色多出现在电商网页的男士用品区，就像生活中男厕所的标志也多用蓝色一样，蓝色与男性已经形成了一定的对应关系。最后，电商网页中的颜色可以引发浏览者的心理情感。颜色可以很直接的给人呈现出美的感受，其中包括与网页内容有关的互融性美化和与网页内容没有关系的色彩装饰性美化。同样色彩也会引发人的疲劳感，在视线长时间面对同一种颜色时，首先会出现视觉疲劳，接着就是引起了心理疲劳，浏览者开始在心理上产生了寻求新型刺激物的需求，产生了更多的心理需要。像消费者看到橘色就会联想到淘宝网一样，某些电商网页中的颜色会给浏览者留下永久的记忆，所以好的色彩使用能使电商网页受益无穷。