基于认知心理的电商界面视觉优化设计

王晓迎 代大齐 肖静

【摘 要】 本文运用认知心理学原理，提出了电商界面视觉在“用户引导”和“用户体验”方面的优化设计方案，旨在为电商企业在日益竞争激烈的互联网市场中赢得更多的市场占有率和用户口碑。

【关键词】 认知心理学；电商界面；视觉引导；优化设计

随着互联网技术的飞速发展和普及，电子商务行业蓬勃兴起。网上购物、订票、学习等已经成为了人们生活中的重要组成部分。电子商务界面设计的优劣，直接影响到用户的购买率和参与率。本文运用认知心理学原理，提出了电商界面视觉在“用户引导”和“用户体验”方面的优化设计方案，旨在为电商企业在竞争日益激烈的互联网市场中赢得更多的市场占有率和用户口碑。

一、背景知识回顾

1、认知心理学与人机视觉界面

作为心理学的一个分支，认知心理学是二十世纪五十年代中期在西方兴起的，[1]主要研究认知的心智处理，其范围涉及思维、记忆、推理、决定等诸多方面，所以也有人将认知心理学称作为“信息加工心理学”。

随着近年来互联网技术的飞速发展和人们的需求不断提升以及智能手机的普及，人与电脑的交流可以方便快捷地通过电脑屏幕操作来完成。这种进行人机交互的屏幕逻辑通常被称为“界面”，其中视觉界面占绝大多数。

2、电子商务界面的视觉特点

在电子商务的活动中，用户界面承载着重要的人机信息交换任务。电子商务界面主要体现出“数字化（无纸）”、“交互性（双向沟通）”、“高效率（不受传统时间空间制约）”的性质。其视觉方面，具有高效性、快捷性、可扩展性等特点。

基于认知心理的电商界面视觉优化设计，是通过认知心理学的原理和方法，研究用户对产品的使用习惯以及分析逻辑，使界面设计尽可能符合用户对产品的期望，从而追求电商界面视觉的用户引导和用户体验达到较高的层次，提升产品在消费者中的口碑。

二、电商界面用户视觉引导的优化设计

1、人眼视觉感知信息加工的特点

人眼视觉感知信息加工具有以下几个特点。

（1）中央凹：人眼的视锥细胞主要聚集于“中央凹”的小区域内，占视网膜面积的1%，这个区域具有较高的视觉分辨率。

（2）周边视觉：周边视觉不具备高分辨率，它们只提供低分辨率的视觉索引，用来引导眼球运动，使得“中央凹”处能够抓住视觉线索从而看到视野里所有重要的东西。

（3）视觉感知的格式塔原理：[2]该原理认为物体之间的相对距离、性质等会影响人们感知它们是否以及如何组织在一起。也就是说，我们人类的视觉系统会对看到的视觉信息进行构建结构（分组或分类）。比如，相互之间距离比较接近的会认为是一组。又比如，性质相似的会认为是一组等等。

2、基于认知心理学的用户视觉引导优化设计

认知心理学认为，认知的过程包括接受、编码、操作、提取和利用知识的过程。人类认识世界是从感觉和知觉开始的。人们感知事物时需要以注意为前提，从众多信息中将有用的信息进行筛检过滤，储存到记忆系统，然后进一步形成表象和概念。

根据人眼视觉感知信息加工的特点和认知过程的原理，我们认为：电商界面中的视觉流程，首先应满足最一般的人眼视觉阅读规律：从上到下，从左到右。还有需要强调的是，界面的布局、色彩、图标等设计都会吸引用户的眼球，对用户的视觉有明显的引导作用。因此，界面上的重要部分一定要醒目，千万不要放到盲区的位置上。

基于上面的分析，我们提出了电商界面的“用户视觉引导”的优化设计，主要针对“登录注册”、“首屏”这两个在用户引导方面最重要的部分。

（1）登录注册网站界面的优化设计。电子商务网站登录界面的优化设计，我们认为要以用户引导为先，给用户提供必要的引导提示。对于浏览者，可以按照游客的身份注册并可以进行部分产品的体验。对于成为正式用户的浏览者，应该提供更多的优惠项目。这样的设计让人感觉登录注册网站界面清晰明了而且富有人情味儿。在界面的结构设计上，要做到以下几点。

一是简洁突出，大胆留白。由于登录注册界面往往需要填入一些用户的相关信息，用户会把一部分精力放在思考如何填写上，因此心理负担会加重。这时登录界面可以通过大量的留白，给用户一种清晰明了的感觉，帮助用户理清思路，快速和方便地进行登录信息的填写。

二是清晰准确的提示也非常重要。人们在浏览页面的时候，首先注意的是标题。好的标题提示对用户的引导作用非常之大，起着一种“敲门砖”的作用。标题提示吸引人，用户一般会主动参与消费活动，这也是对用户最好的引导。

三是有趣美观的页面设计。视觉上美观的界面会给人留下好的第一印象。登陆界面的设计要美观和谐，这样用户才乐于使用和点击。

四是尽量减少表单域。从视觉角度来说，电商网站登陆界面上显示的表单域越少，转化率就越高。特别是对新用户来说，过多的表单域会增加用户的思考时间甚至造成用户的思维混乱。所以尽量减少表单域，降低用户登录的难度，是形成良好用户引导的必要条件。

（2）首屏的优化设计。电子商务网站的首屏（指的是不滚动网页屏幕就能被用户看到的画面）。世界著名的网页易用性专家尼尔森曾经有报告显示，首屏以上的关注度为80.3%，首屏以下的关注度仅有19.7%。这两个数据足以表明，首屏对每一个需要转化率的电商网站是非常重要的。在电子商务网站中，用户最急切需要获得的不外乎有两点：吸引人的商品或店铺，以及网站能够给予他的信任感。因此，各类宣传推广信息就成了电商首屏界面的首要选择。需要注意的是，首屏在设计时一定要迎合用户的阅读习惯，进行必要的提示和结构化处理对用户进行友好的引导。切忌将首屏设计成杂乱的布告栏，这样会造成大量的用户流失。

三、電商界面用户视觉体验的优化设计

我们人类借助于“视觉、听觉、嗅觉、触觉、味觉”所获得的信息中，80%来自于视觉信息。因而，电商界面上用户“视觉体验”就显得尤为重要。

美国认知心理学家Donald Norman曾在他的书籍《设计心理学》中提出“用户体验”的定义。他认为对于用户来讲，很多知识并不存在于他们的脑中，他们需要外部刺激（体验）才能获得。以用户为中心，增强用户体验必须作到以用户的角度去看问题，也就是以用户的需求和利益为基础，让用户方便快捷地明白每一步的状态和产品的使用方法以及带给他们的利益。[3]根据以上原理，我们对电商界面用户视觉体验进行了优化设计，主要体现在以下几个方面。

1、界面的排版与布局

排版与布局是对界面里的文字、图形、图标等因素进行位置、大小的编排，以达到美观且能够传达信息的过程。对电商界面用户视觉体验进行优化设计，我们建议排版与布局要突出界面的“骨骼”。这是一种理性的排版与布局方式，需要界面中的文字与图形按照一定的分组和结构比例进行排版和布局。这样的排版和布局设计，会给用户一种条理分明、逻辑清晰的视觉体验，增加用户对网站和产品的信任感。

2、界面的色彩与纹理

电商界面设计，其颜色应该控制在三种以内，在同一色相中通过调节渐变来体现色彩的细节。纯色应该是使用最多的，适当加一些纹理可以增加界面设计的层次感。界面使用互补色（一般是指色彩对比强烈的两种颜色）、图像尺寸相对较大、有动态效果的按钮或图形，往往容易吸引用户的视觉，因而界面上的重要内容要注意使用上述设计规律。在界面设计中，设计师应切忌只重视界面美化而忽略用户的需求。也就是说，设计师应该将人的认知规律和用户需求放在首位，在此基础上再合理的布局页面元素和美化界面，从而正确地引导用户的视觉体验。

3、扁平化设计和拟物化设计

扁平化设计是去掉冗余，让最本质的核心内容展示出来的一种设计形式，具有抽象、极简和符号化的特点。与扁平化设计对应的是拟物化设计。拟物化设计属于偏写实风格的界面设计形式，具有阴影、立体、渐变等效果，目前多用于游戏界面。对于电商界面用户视觉体验的优化设计，我们建议采用扁平化的设计风格，这种设计风格具有很多优势：其一，极简的元素；其二，贴切的图标；其三，更多的圆角；其四，中性之美等。这些都有助于消费者对信息的快速阅读和吸收，体现出用户视觉体验的高效性。

四、结论和展望

基于认知心理的电商界面视觉优化设计，可以预测并引导用户的视线走向，主动调整界面中内容的主次布局和色彩，按照认知规律的视线运动来排版，实现电商界面视觉信息更好的用户引导和用户体验，从而提升产品在消费者中的口碑。目前电商界面的设计，也出现了一些新的趋势，如“叠加效果”、“个性化插画”、“动画和交互功能”等等，需要我们密切关注。我们相信，随着科技的进步和人们需求的提高，电商界面视觉设计水平也将不断的得到提升。

【參考文献】

[1] 何亭.基于认知心理的网络界面设计研究[D]. 苏州：苏州大学.2009.5.

[2] （美）约翰逊（Johnson，J.）.理解UI设计准则[M].北京：人民邮电出版社，2011.9.

[3] 程安萍. 智能手机UI设计中用户体验的视觉研究[D]. 北京：北京林业大学.2016.6.

【作者简介】

王晓迎（1963—）女，副教授，研究方向：设计艺术学.

代大齐，男，讲师，研究方向：电子商务.

肖 静，女，讲师，研究方向：UI设计.