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

-精选财经经济类资料- -最新财经经济资料-感谢阅读- 1 电商网页界面视觉设计元素解析 中图分类号： J905 文献标识码： A 文章编号： 2095-2457（2018）01- 0159-002 中国论文网 /8/view-12932561.htm 1 基础文字作为基石 在最初网页形成时，网页的界面 其实只有文字，是当时互联网信息传递 的唯一载体。虽然随着电子商务的成熟 和互联网技术的提升，网页上多了更丰 富的元素，可是文字依旧是不可缺少的 载体，缺少文字的网站往往不能给使用 者带来最舒适的使用感受。文字可以出 现在电商网页界面的任何地方，不论是 首页还是产品介绍，或者是导航处，文 字的功能已经不仅仅是一种书面语言， -精选财经经济类资料- -最新财经经济资料-感谢阅读- 2 在传达文化，更有提升网页界面审美价 值的附加功能。优秀的文字设计与排版 会增加整个电商网页的视觉效果，吸引 用户浏览，从而促进了产品的销售。 就电子商务网站中文字的主要功 能来说，要准确有效的传达商品信息， 就要考虑文字的整体视觉效果，是否符 合电商网页的特性，网站页面的诉求力 能否达到浏览者的要求。 我认为电子商务网站中文字需要 具有以下特性：首先，文字要清晰可见， 容易识别，消费者通过网络进行消费寻 求的就是简洁、直接、方便，好的电商 网页肯定会给消费者干净、便捷的最初 视觉印象。其次，电商网页中的文字一 定要方便阅读，文字的排版和布局对于 浏览者视觉感受来说是非常重要的，我 们可以从行间距、字距或者文字排列上 进行设计。最后，网页中的文字设计一 般都是有轻有重的，在不影响整体网页 风格的前提下，多一些适当变化的文字， 使网页界面更有节奏、更有朝气。对于 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 3 电商网页设计中这点同样适用，例如给 当季正在促销的区域标题文字加粗、加 框、加下划线、改变文字样式等，强化 视觉效果。但是要注意的是，在电商网 页中不能滥用彩色字体，如果整篇页面 处处都是重点只会让人眼花，不会起到 任何美化效果。 2 必不可少的 Tab 标签 Tab 标签是网页中不可缺少的部 分，在静态页面设计中，尽量避免使用 多排水平标签的布置，可以使用垂直标 签代替；如果标签之间存在结构，可以 将标签分组，分组可以以下拉菜单或颜 色分组等方式进行；如果标签重要性或 相关性存在区别，可以显示最重要的标 签，然后加入“ 更多” 选项；如果标签之 间都是相互平等的，可以考虑对标签栏 进行操作，如加入左右移动按钮等，允 许用户滑动或拖动。 Tab 标签分为两大部分，标签区 和内容区。标签区分为选中的标签及未 选中的标签，一般情况下选中标签的颜 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 4 色与未选中标签的背景色明显区分开， 具有较高的辨别度。标签区的标题文字 之间应该有某种特定的联系，信息之间 不应该存在对比或者并行的关系，标题 文字也应该是简短精炼的。内容区为重 叠区域，每层内容交替显示，既整理了 信息，又在有限的空间显示大量内容， 信息可以以文字呈现，也可以如下图所 示以标志呈现，但是排布必须工整且统 一。 3 多层次多形式且有指示性的导 航 网页导航表现为网页的栏目菜单 设置、辅助菜单、其他在线帮助等形式。 网页导航设置是在网页栏目结构的基础 上，进一步为用户浏览网页提供的提示 系统。网页导航一般分为三种，主导航、 次导航、面包屑导航。主导航一般位于 网页页眉顶部或者 banner 下部，可以第 一时间引导访问者进入需要的信息栏目。 次导航一般位于网站的两侧，当访问者 需要切换到其他栏目时，可以通过次导 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 5 航进入。面包屑导航是一个位置导航， 用来让访问者知道自己所在网页的具体 位置，是一种显示访问者在网站或网络 应用中的位置一层层指引的导航。 顶部水平栏导航是当前芍肿盍 餍械耐站导航菜单设计之一，最常用 于网站的主导航设计中，且通常放在网 站所有页面的网站 logo 的上方或下方。 对于信息过于繁杂的电商网站来说，这 种导航最为常见，因为可以使用户操作 起来更简便舒适。次导航有几种呈现形 式，比如抽屉式导航，默认情况下导航 菜单根本不显示，只有当鼠标触及到指 定图标时才会打开。当触及到其中一个 栏目时，第二层的内容才会继续逐渐展 开，给用户清晰明朗的内容导航。这种 导航对于电商网页最为合适，不仅节约 了本就紧促有限的网页空间，更能给使 用者指清操作路径。其次，在导航设计 中尽量降低鼠标的操作难度。网站建立 好不是为了让用户漫无目的的浏览，而 是要引导用户最终访问网站的目标页面。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 6 最后就是应该重视面包屑导航设计，明 确告知用户目前所在位置。面包屑导航 是帮助用户判断当前位置的最好方法， 所以一定要设计的易于识别，可以通过 字体颜色改变、字体加粗、字号加大等 方式与页面中的其他文字区分出来，不 要在这里设计太多花哨的东西。 4 信息精简的延展表单 每当页面中出现需要填写的表单 时，用户就开始感到头疼，有些用户甚 至直接选择放弃，而设计者应该考虑的 是如何让用户看到表单时不会产生反感， 让他们直接注意到他们需要填的必填项， 减少其他信息的干扰。 对于商业中的表单来说，用户的 目的是获取网站商品信息及完成购买； 商业目的是提升销售量，获取利益最大 化。网页表单是必要的，而往往是设计 师和用户的痛点。随着时间的推移，用 户已经形成一种期望，表单的外观应该 如何以及如何运作。他们通常期望网页 表单有以下六个组成部分：标签、输入 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 7 框、行为、帮助、信息和验证。同样， 构成电商网页表单的这六个部分的功能 之间也是互不相同但相辅相成的，标签 可以告诉用户即将输入的元素的含义是 什么；输入框可以让用户提供反馈，包 括文字输入框、密码输入框、复选框、 单选按钮、滑块以及更多；行为是在用 户按下链接或按钮时表单会执行相应操 作的按钮；帮助会在用户填写表单时提 供及时有效的操作指南；信息是系统对 用户输入信息的反馈，在上图登录名后 方的信息，给予的反馈属于负面反馈， 是对用户输入信息的不肯定，也有正面 反馈，如“用户名可使用 ”这种信息等； 验证是最基本的确保用户提交数据符合 可接受参数。 5 面子工程logo Logo 在传播中起到识别和推广 公司或网站的作用，好的 logo 可以让消 费者记住公司主体和相关网页，网络中 的 logo 主要是各个网站用来与其他网站 链接的图形标志，代表一个网站或网站 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 8 的一个板块。 Logo 在电商网页 版面设计中也是必不可少的，当用户在 第一时间进入一个站点中时，电商网站 logo 无疑就是首先进入用户的视线的， 这时如果 logo 没有任何特色就毫无吸引 力，该网站很可能给用户留下零印象。 相反如果某个电商网页的 logo 很吸引视 线，就会让人轻易记住该 logo 及网站， 进而可以增加电商网站的交易量。所以， 网站的 logo 作为电商网页推广最重要的 一部分，是应用最广泛、出现频率最高 的视觉元素。它不再是简简单单的一个 图形或者与文字的组合，它是根据特定 的网页类型、整体风格结构并考虑该网 页的受众及应用环境，为网站量身定做 的标准视觉符号。 6 图形链接Icon 在网页的浏览过程中，使用者很 容易迷失方向，不知道应该点哪里，图 标在网页的作用也就体现在此，图标不 仅可以美化网页界面，更能清楚的告诉 使用者的位置及接下来该进行的步骤。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 9 图标在网页的使用成为了将信息高效率 传递给消费者的有效方式之一。 图标在一般意义上，它是一个图 像，一种表示手法，是重要的，并且具 有持久效用符号。点击图标可以产生不 同的行为结果，好比打开一个文件或者 执行一个程序。在大部分情况下，图标 所采用的图像是与它所要表现的内容紧 密相关的，比如文件夹的 icon 就是一个 文件袋的图。电商网页中也有大量的图 形元素出现，而且图标所表现的行为或 者它所代表特殊的网页性质也使图标区 别于其他网页，但是在电商网页中，有 几个固定含义的图标为大部分电商网页 通用。如收藏夹的 icon 就是一个正五角 星，这个图标的不同配色运用于各个电 商网页，但是都代表着收藏夹的含义。 7 合理有效地管理配色 在电商网页的众多构成因素中， 颜色比文字与图形更能引起人的视觉反 应。合理的运用颜色可以对购物网站的 商品进行分类，从而提升使用者的浏览 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 10 速度，更为便捷的搜索到自己所需要的 产品类e，并定义了整个电商网站的 风格。我认为，电商网页颜色的设计的 过程是通过进行市场调研，选择符合那 些对该网页感兴趣的潜在用户的感受， 而不是紧紧跟随设计者本身的颜色搭配， 从而了解到该电商网页的风格要求，这 样设计出的色彩才不会令访问者失望。 电子商务网站的颜色具有几个特 性：首先，电商网页的颜色具有导向性， 工业设计色彩专家安契尔霍金认为“色 彩能够直接影响人的思维状态及心理活 动，这是商品和生产销售的命脉”。根 据色彩对人心理的影响，合理地加以运 用。其次，电商网页的颜色也具有功能 性。根据色彩给人留下的印象深浅排名， 暖色一般给人留下的印象比较深刻；同 时色彩还具有特定的联想和象征意义， 例如，蓝色多出现在电商网页的男士用 品区，就像生活中男厕所的标志也多用 蓝色一样，蓝色与男性已经形成了一定 的对应关系。最后，电商网页中的颜色 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 11 可以引发浏览者的心理