基于检验检测行业电子商务平台的视觉设计研究

张倩

（广州赛宝认证中心服务有限公司，广东 广州 510610）

1 检验检测电商平台分析

1.1 检验检测电商平台用户分析

对于检验检测电商网站的浏览者来说，绝大多数用户都有检验检测某一产品的需求。这些用户主要可以划分为两类，第一类用户主要想通过网络平台完成检验检测过程，此类用户有电商平台用户的典型特点，愿意尝试新的途径，希望节省时间去完成检验检测过程；第二类用户为信息获取型用户，此类用户主要想获取检验检测产品价格或行业内的相关信息，以咨询为主。

对于检验检测电商平台入驻机构来说，检验检测电商平台具有降低交易成本的优势，多数中小型企业与平台合作入驻平台期望可以利用平台得到快速发展的机会。

1.2 电商类检验检测行业网站平台产品定位分析

电商类检验检测行业为检验检测机构提供业务开拓的平台，为企业提供简化检验检测流程的检验检测服务。

1.3 根据平台分析定位网站整体风格

检验检测电商平台可以粗略定位为服务类型平台，设计风格可以参考扁平化风格，弱化不必要且复杂的元素，浏览者可以迅速在平台中发现自己所感兴趣的板块。且扁平化网页设计将网页的页面尽可能展露在蜘蛛爬虫面前，无需深度挖掘就可以被蜘蛛抓取，对搜索引擎友好，有利于展开SEO工作。

2 检验检测平台设计技巧

2.1 合理使用栅格化工具

栅格系统英文名为Grid Systems，是运用规则的网格阵列，遵循一定的规律进行页面的布局设计，使布局规范简洁。通常需要设置定义总宽度、列数和水槽（留白）三个数值。

网页设计师可以利用栅格让画面整体协调、干净，保持网页内容的组织度。方便了组件、各模块之间的校准、对齐等操作，让画面整洁有序，强化版面层次感。营造出空间的节奏感和视觉的流畅感，让整套网页的不同页面都保持一致性。使用栅格化工具的同时需要注意设计不要被工具束缚，没有必要完全受限于栅格。在熟练进行网页排版后可以有技巧地抛开栅格的约束进行一些视觉上的跳跃设计，或许会有更好的效果。

2.2 限制字体的使用

过多的字体或同一字体的大小、粗细改变过多，会使网页内信息看上去杂乱无章，会降低网页的阅读性。通常一个界面不超过三种字体。

2.3 控制字行的长度

过长或者过短的一行文字都会影响网站用户的阅读体验。如果文字行过长，用户视线距离移动过长、很难聚集视线。如果行太短、视线来回返回会打破用户的阅读节奏。

2.4 对齐元素与文字

利用栅格工具，确保网页中元素的对齐、文字的对齐、图片的对齐、区块布局对齐，确保整个页面干净整洁。

2.5 保持适当留白

适当的留白可以保证各元素之间清晰流畅，避免布局过于紧凑而导致的用户信息获取障碍，减少用户的视觉疲劳，给需要重点表达的信息留有空间。

2.6 增强背景色与文字的对比

对于带有背景或背景色的文字，增强背景色与文字的对比，确保文字清晰可见。

3 网页界面设计重点分析

3.1 检验检测平台应用的基础色彩与元素分析

用户浏览检验检测平台时，很短时间内就可以确定该网站是否符合自己的需求。在短暂的几秒钟里，网站的整体设计风格需要突显出网站自身的优势。

主色调在很大程度上决定了网站的整体设计风格，选择合理的颜色并给出恰到好处的搭配是网页界面设计的基础。检验检测行业企业大多数可以让人联想到仪器、设备、科学、实验等关键词，带有一种严谨、公正的色彩，大多数时候需要运用冷色调来体现。

设计上的主色调可选取蓝、白、灰等。检验检测平台可选用偏冷的色调，表达出冷静、严谨、科学等感觉；设计元素上可以尽量选取矩形框或小像素圆角，更贴近严谨公正的感情色彩。

3.2 组件的设计与统一

对于网站的组件，通常要求具有统一规范。相同级别的组件，比如一般购物网站的登录与注册组件属于同一级别的组件，需要确定组件的大小，进行规范设计。

3.3 网页导航

网页导航贯穿整套网页，带领用户实现各个界面的跳转。指向清晰的导航是一个网站成功的必备因素。

目前网络上的导航可按结构划分为顶部导航、竖直/侧边导航（因视觉靠左通常将侧边导航放置左侧）。顶部导航是目前大多数网站采用的一种网站导航栏设计模式。常见的是网站logo、导航分类文字与登录、注册、搜索组件结合的形式，是单列布局网页的唯一选择。竖直/侧边导航栏的导航项在一个单项中排列，一项叠一项，是当前最通用的模式之一，可同时放入大量链接。检验检测电商平台需要选用顶部导航贯穿全局，又因产品种类繁多、顶部位置有限不能完全展示，可以采用顶部导航与侧边导航两者相结合的形式。

3.4 图片的优化

电商类网站设计对于图片的使用需要同时考虑网站传输图片时所需的加载时间和图片清晰度。图片文件大小不能过大，否则网站响应时间过长会造成一定数量上的用户流失。但图片的质量也不可太差，清晰度低的图片会让用户认为产品低落，把握好图片的大小与质量是设计师给出图片时需要衡量的因素之一。

网页的产品图首先选取与产品相关的图片，可以避免用户的预期和内容产生割裂感。检验检测行业的产品多数情况下为证书，但是证书的视觉表现力没有产品强烈。可以选用被检测产品的产品图做行业内的产品图，注意选取产品的合适角度以及图片的质量、除产品本身色彩外不要多余三种颜色或者统一使用白色背景。被检测的产品多种多样，可以根据每一类产品的特点选取产品图。但所有产品的装饰元素，比如背景色或者边框还要与网站整体风格统一。

3.5 文字排版设计的灵活使用

将文字图形化同样会增长网站的反应时间，减少图形化文字的出现。尽量用纯文字排版营造出网站的设计感是设计师必须掌握的技巧。文字的排版主要分为以下几种。

3.5.1 文字与文字的排版

文字与文字的排版需要观察文字的字间距与行间距、文字模块与模块之前的间距。相关文字可采用包围结构紧凑排版，与其他不相关内容进行区分。做到疏密有致，让需要获取信息的用户一目了然，方便获取信息。

3.5.2 文字与图片的排版

文字与图片的排版是整个网页中最常运用的排版方式，通常会占用整个网页中的绝大部分面积。文字与图片的排版可以多样结合。在进行网页文字与图片的排版布局之前应进行整体规划，平衡页面的文字与图片。检验检测行业的页面布局通常不需过多趣味性，保持整洁排版，文字、图片信息清晰展现，利用颜色、线条、组件等进行装饰。

3.5.3 文字与图形的排版

网页界面中常需要文字与图形的结合来组成一个控件或一个模块等，当文字与图形相结合时需要注意文字在图形内部时的居中、组件与组件之间对齐，相同组件之间大小相同、间隔相同，对其参考线。同类模块中的各组件需做到完全一致，以保持页面的干净整洁。

4 网页中图片的视觉传达

4.1 轮播图的交互设计

轮播图在Web网页中已经司空见惯，主要发布网站的信息、活动与广告。轮播图的使用与设计也是一个值得思考的问题。网站使用轮播图重点放置哪些内容、是否有效、怎样设计可以达到想要的展示、推广的效果都是一个值得探究的问题。

可以将检验将策行业服务理念贯彻轮播图设计，成为网站的门面，让轮播图与网站融为一体，也可以利用轮播图空间推出网站展开的一系列活动，具体的利用方法可以根据网站的运营阶段与实际情况而定。

4.2 轮播图的视觉设计

不管是平台的相关信息展示还是平台推出的活动，文案的展开背后都会有一定的表达情感倾向。找准感情倾向，拿出情感化的设计，将情感融入设计，并且用情感来说服用户，才是网站首页设计图的设计之道，只有能够触动用户情绪的设计更具有说服力。

将所要展示的信息主旨重点表达，位置上可利用视觉靠左原则。善于利用各点缀元素，充实丰富画面。

4.3 活动页面的设计与排版

平台有大量图文信息需要表述时，需要运用活动页面的设计与排版。

从文案中吸取信息，浏览主要标题与次要标题，确定图片所要表达情绪，分清主次。与运营小组沟通好所要表达的重点，根据表达重点选择元素主体、寻找素材。大部分时候，我们的创意与文案最终目的在于调动用户情感，通过活动页面的视觉设计传达出我们想要表达的情感感染用户。积极的情绪刺激能够更好地建立用户和你的网站之间的互动感。