网络购物APP的界面设计的研究

李安 赵熙

摘 要：随着网络信息技术的不断发展和互联网的普及，网络购物逐渐成为一种主流消费方式。使用户能够通过网络购物可以买到新奇和物美价廉的商品，从而为人们的生活提供了便利。本文主要从界面设计要求以及发展前景等方面来探讨关于网络购物应用程序的设计方式，并研究其中的视觉原理与动态效果。

关键词：网络购物;视觉设计;APP界面设计

一、网络购物的发展

（一）互联网的发展与网络购物的发展

移动电子商务是近几年随着无线移动通讯技术发展，而新兴起来的新型商务模式，它利用无线通讯技术和移动互联网进行数据传递，通过智能手机、PAD和笔记本电脑等移动设备与企业电子商务平台网连接来完成商务交易过程的新型商务模式。[1]电子商务在上个世纪九十年代开始兴起，当时还没有一个完整的购物体系，但是为现代移动电子商务打下了基础。现阶段的移动电子商务比传统的电子商务更加便捷，选择的种类更多，服务更加完全，不受地点限制。现如今网络购物以及被大部分消费者所认可，交易的安全性、售后保障服务、商品的品质都有良好的保障。

（二）网络购物APP中重要的设计元素

设计中每个元素相辅相成但是在购物APP中简洁的设计和重要信息的准确传达才是重中之重。信息的传达和用户的交互感，一个好的交互能激发消费者的购物欲以及增加对此APP的依赖度，以消费者的体验为主，此基础上在增加审美。

二、网络购物APP界面的设计

（一）图标的设计

APP图标是整个APP的门面，图标应该简洁易懂，与APP名称相呼应。APP图标的风格也要考虑到使用人群、内容定位、企业形象等。而且APP图标会影响用户使用APP的频率，使用一个好的桌面图标可以使设计达到事半功倍的效果。

1.图标的色彩设计

对比国内市面上几款主流的网络综合购物APP产品的图标，它们在颜色方面多使用红色、橘色为主体颜色，白色为字体或是LOGO，或是白色的底色在中心位置放上品牌LOGO，达到一个醒目以及清晰表达的作用，风格中性，符合大众审美。主要是利用的是高饱和度的纯色和清爽的白色拉开对比，给使用者强烈的视觉冲击。面向女性的APP则应该加入粉色、紫色等女性向的色彩，面向男性的各位APP可以加入黑色、深蓝色等，给使用者有一种专属感和归属感，符合性别分类和对应的人群的心理。

2.图标的图形设计

例如苏宁易购（如图2.1所示），采用了自己公司形象的小狮子加上个性化的字体设计，消费者很快就可以锁定选中该APP。小狮子是非常鲜明的企业文化，而且可爱活泼的小狮子表达了苏宁的热情活力以及亲切感，在扁平化当道的时代，苏宁易购剑走偏锋，在LOGO运用了立体感，让消费者眼前一亮。但值得注意，图标设计不应该太过复杂，因为整个LOGO在手机界面上很小，过多的细节不能体现出来，放入能展现出定位和形象的元素即可，简洁大方的设计才能牢牢抓住消费者的心。

3.图标的关联度

例如淘宝（如图2.1所示），阿里巴巴是一个各APP关联度非常高的企业，阿里巴巴集团所有APP的LOGO设计都有相对应的设计风格，以及在各个时间段的活动都能做到统一，阿里系的LOGO都偏爱文字。阿里巴巴集团的企业品牌色是橙色，作为最知名的旗下品牌——淘宝，更需要展现它的企业文化。橘色是暖色，给人带来正能量，就像太阳一样给人一种亲近和温暖的感觉，这种阳光开朗的颜色更能激起消费者的购物欲。

（二）界面设计

1.页面设计

启动页：当我们进入一个APP时都会有一到三秒的时间来欣赏启动页，这是进入APP时给我们的第一印象。启动页好比是一个站在网络商场门口的迎宾，虽然你进门只会见到迎宾一眼，但迎宾的态度也会影响消费者的购物欲望和购物心情。启动页应该传达一种积极向上的情绪，例如大部分APP都会在启动页宣传自己的产品形象和目前活动特色，或是一些简单的标语来传达自己的品牌定位，在各种节日的时候会在启动页送上祝福。

首页：首页是最重要的页面，是所有消费者使用时间最长的页面，它给消费者带来的影响最为深远。首页分为很多类型，列表型首页，图标型首页，卡片型首页等。在网络购物APP中，我们使用的是综合型，顾名思义就是前几种类型的组合。怎样让综合性模块在首页中表达清晰是非常重要的。首页上大多都会放上当下活动或是根据个人喜好的推荐，如何做到各个推荐醒目但不影响主要使用功能就要从各方面均衡。

网店页面：网店的页面应该遵循网店自己的风格，选择的商品海报、背景图应与商品相呼应。主要突出商品價格以及商品的特点，图片和文字描述应该相结合，优惠活动时，可将商品优惠突出。

商品页面：商品页面主要有四大点，商品名称、商品图片、商品价格以及商品参数。其他需要放上销量、评价、发货地等，购买与咨询客服的也应该放在下方固定位置，方便消费者进行咨询选购。

2.图片图标

视觉传达设计中的两大基本构成要素即是图形和文字。图片作为真实对象的模拟品，能向接收者呈现具体事物。[2]图片是最直观的表达，商品的外形样貌全部展现出来，文字不能完全描述商品，大量文字只会让消费者感到厌倦，图片的作用就是简洁清晰的表达出商品的形象，大部分商品消费者只要观察图片就可以知道商品的具体信息。所以选择商品图片尽量选择物品为主体，多角度拍摄，将其特点展示。

而图标又是另一种表达，图标一般多用于导航和分类，图标可以被认为是一种简化的图片，排除掉细节仅保留原有含义。导航栏一般是图标与简单的关键文字结合，在各式各样的商品图片里它的简洁更加能够让消费者一眼找到它并做出判断。或是一些小的线型图标，例如淘宝上的个人中心、购物车、消息等，简洁清爽，调高用户体验的同时也丰富了界面的视觉感（如图2.2所示）。

3.文字设计

文字是信息传达中不可缺少的一个重要元素，不一样的字体设计决定了这些文字是“主角”还是“配角”。字体有特殊的色彩和特殊的大小形状就决定了它在界面中是一个“主角”的地位，字体和图片结合，被艺术性创造过后，元素的平衡性和信息的准确性会提高。大量普通的文字相对来说图片和艺术字来说更适合做一个补充描述，但是合适的排板和合适的字体也会让这个“配角”赏心悦目。

4.色彩设计

杰夫·约翰逊总结出的5条色彩使用准则正适用于购物类APP，它们分别是：利用饱和度、亮度、色相来区分颜色;使用更容易感知的特别的颜色避免使用色盲无法区分的颜色;是用其他元素辅助颜色。[3]颜色往往是最容易引导顾客心理的关键因素之一，因为人是视觉占认知主导的生物，而色彩对视觉影响最大。各种购物APP面向的人群不同，所属的功能不同，选择的定位不同，选择颜色要考虑到消费者的心理和消费者带来的购物体验。关于颜色也不是多多益善，要学会保持一个“中庸”。一个页面中颜色尽量不要超过五种但不要少于三种，多了会显得杂乱无章，少了会显得空洞无趣。也不能总是添加过多醒目的强调色，让整个页面失去了重点。色彩的搭配也十分重要，尽量避免互补色大面积出现，画面过于跳跃会使消费者产生视觉刺激感，产生视觉疲劳;或是总是使用单调的同类色，会使得页面拉不开层次，没有重点。如果确定了一种主色系可以多多运用邻近色和对比色，可以达到颜色紧密结合的同时凸显层次，和谐统一，不会产生违和感。可以使用一些无色相的黑、白、灰与任何颜色搭配都会产生良好的效果。

一个APP的界面最重要的是需要确定主色和辅助色。例如得物APP，定位是年轻人的潮流衣鞋与配饰，它的主色是黑白色，配上湖绿的强调色（如图2.3所示）。饱和度较高的湖绿色相对于黑白色来说是个突出的色彩，少量运用在界面中会给消费者在枯燥的黑白页面中带来新鲜感，有着醒目的提示，更富有感染力。黑白和湖绿色是现代年轻人追求的流行时尚风格，让年轻的消费者感受到潮流的冲击感，让年轻消费者更有认同感，简洁的风格体现出他们的简约而不简单的态度。

5.版式设计

版式设计是对版面内的文字字体、图像图形、线条、表格、色块等要素，按照一定的要求进行编排，并以视觉方式艺术地表达出来，并通过对这些要素的编排，使观看者直觉的感受到某些要传递的意思。设计中也分了许多种类，我们熟知的：标准式、定位式、满版式、自由式等。要将每个元素摆得恰到好处，不显拥挤并且突出主体。首先要确定整体的固定元素，例如上方的搜索栏和底部的导航栏，我们打开APP界面第一眼一般都落在中间偏上方的位置，因为现代人的阅读习惯是从上至下，从左往右的。为了消费者能够快速准确的找到和搜索，上半部分这个位置适合插入比较重要的分类图标、导航栏以及宣传窗口，而广告与其他商品推荐则放在中间偏下的部分。

6.动态效果

现如今动态效果在界面设计中已经非常常见了，一些简单的动态会让枯燥的页面增加一丝趣味。我们拿淘宝举例，在宣传窗口中会放上八张左右的图片海报，并且让它自动右滑，给消费者带来界面的节奏感的同时，能使每一张海报都能够有机会让消费者看到。在图标分类的模块中，仔细观察会发现在一些时段某个特殊的分类有活动时，图标会做一些简单的动态效果，虽然在所有图标中它本身不起眼，但是加上动态后，会在整个图标分类的模块中脱颖而出。在搜索栏中，会滚动出现一些关键词，将推荐滚动可以让消费者联想起更多自己想买的商品，可以让消费者更快更准确的找到自己想要的商品从而激发消费者的购物欲。

三、发展前景

（一）网购模式的变化

网络直播销售是这几年来开始火爆起来的，用这种销售模式与网络购物APP结合，推动了销售。不同于早些年的电视购物，直播卖货商品品种更多，优惠更实在，还可以与主播互动，网络直播销售看起来更像是朋友给你的推荐，没有距离感。网络直播卖货的出现也增加了APP的使用频率，有各种活动的时候消费者会更加积极参与，限量抢购的模式也更加激发了消费者的消费激情。对主播来说也间接给一部分人就业机会，连明星也纷纷加入这网络直播卖货的队伍中来，可见这就是网络购物带来新产业。

现代网络超市已经非常成熟了，只要动动手指商品就会送上门来。这给很多上班族和学生族带来了便利。上班辛苦平时没有时间去超市，提前买好需要的东西，不用自己拎回家。网络超市还会有许多满减活动，相对来说比去普通超市更加省钱，而且网络超市商品更加全面，在当地超市买不到的东西也可以在网上找到。

（二）网络购物APP的发展

马云先生说过：“没有任何人可以阻止全球化，没有任何人可以制止贸易。”网络购物相对来说在全球范围内，我国是非常普及和方便的，主要原因之一是我国的物流是非常优秀，不论你身处哪个城市，快递总能到达你的手中，但是身在异乡的消费者就没有那么便利了。在经济全球化的时代，跨境电商也是目前我们电子商务要突破的一个难关。如何去与其他国家海关方面以及运输方面的对接，让我们好商品输出去，将国外的好商品引进来。让消费者能够安心地拿到自己想要的商品，要保证质量也要保证速度。现在阿里巴巴在有各种仓库，有与国外品牌合作的官方旗舰店，有全球购认证代购，虽然还不是特别完善，但是也有在不断改进。

放眼全球，也要低头看看自己的脚下。农村淘宝的出现解决了很多由于偏远山村接收快递不便利的问题还有帮助村民们销售自己家乡由于滞销买不出去的商品，这就是所谓的“网货下乡”和“农产品进城”。有实体店扎根，有專门的店长帮助村民，但是农村淘宝的出现也产生了许多质疑，大部分村子并没有那么落后，反而增加了无用的环节。但是对于村里的老年人来说，确确实实给他们带来了许多便利，就像多了一个现实生活中的客服顾问，地形复杂的村子也有一个固定的收货点，有了专门的物流点省去了快递小哥的麻烦，也让农村消费者退货换货更加方便省心。

还有各种先进的技术，例如大数据时代，网络购物平台能够快速准确计算出你的需求，信息处理更高效，消费者使用感更好。更多优秀的人机交互，例如最近阿里巴巴研究的黑科技——脑内意念购，利用脑机接口用大脑意念操控，可能今后只需要动动脑子就可以完成购物，不需要手机电脑等媒介。今后的趋势不仅仅是表层的现实生活，更能服务到虚拟生活，使精神层面也得到极大地丰富。

参考文献

[1]刘玉军.我国移动电子商务运营模式分析与发展对策研究[J].情报科学，2014，32（4）：122.

[2]杨颖.谁该成为体验型产品网络评论的主角，图片还是文字？ [J].心理学报，2016，48（8）：1026.

[3]（美）杰夫·约翰逊著.张一宁译.认知与设计：理解UI设计准则[M].北京：人民邮电出版社，2011.09

作者简介：

李安（1999-），女，浙江人，浙江树人大学。

二作：赵熙（1982-），女，江苏人，浙江树人大学讲师，硕士，主要从事数字媒体交互设计、动画理论研究。