电商类APP的视觉设计制作

李晨

摘要：为了给电竞爱好者提供专业且多元化的游戏外设服务，以APP的形式设计制作。通过针对性更加强的外设产品导购推荐，使用户省去不知购买何种外设的烦恼；另外通过推荐不同版块的外设资讯以及测评，来提升用户的活跃度，最终打造一个专业的外设生态服务圈。其视觉设计制作效果最终以简洁的色彩与便捷布局为主。根据市场调研，分析APP运营的环境，确认软件功能需求划分以及对于运营的数据分析和效益预测之后，设计工作主要包括了低保真、高保真的还原制作，来实现最终的APP视觉设计。

关键词：低保真；高保真；视觉设计

中图分类号：F49 文献标识码：A 文章编号：1005-5312（2018）23-0041-01

随着电竞市场的不断进步，国内热爱电竞游戏的玩家数量不计其数。因此，用户对于游戏外设的需求也越来越高。而目前購买游戏外设一般的途径是通过淘宝、京东这样的电商平台，但是此类平台又缺乏相关的专业性服务，例如资讯，产品评测等。在这样的背景下，电竞玩家就需要有一款能够为他们提供专业性、多元化服务的游戏外设APP，满足不同玩家对游戏外设的不同需求

一、应用制作的设计理念

1.应用目标以及运行环境。在此类电商APP系统建设中，将注重网络平台、应用体系、数据库体系和安全体系的规划和建设，实现在IOS系统中可以正常运行；体现在游戏外设商品展示、咨询发布，完善数据管理系统主要体现在游戏外设商品数据和外设咨询信息的及时更新、以及用户评论数据的更新。重点维护APP的安全性，如：用户管理和模块管理。最终目标对于用户能够方便、快捷、安全、可靠、及时、准确的收集。对于APP可具备安全体系标准统一、适应需求、切实可行的网络安全保障体系。

2.应用主要功能的设计成型。通过制作问卷调查，对特定人群和游戏玩家的一类人群针对性的发放纸质型调查问卷。也通过市场调研得到的数据结果进行数据分析，对于数据的筛选及分析之后，得到类于超过六成的人考虑购买或者已经购买过中端以上的游戏外设装备；产品评测以及专业资讯是用户最希望具备的功能等这样的分析得到这样的分析结论。

由此将APP的功能模块划分为商品推荐和咨询功能。商品推荐模块主要内容是游戏外设商品的陈列以及导购功能的入口。在推荐模块中，会根据不同的分类陈列商品，譬如热门、耳机、键盘、手柄、鼠标等一系列的细化分类，从而让用户能够更加清晰与快捷的找到自己想要的商品。同时也能够在用户没有目的性的购买时起到商品推荐的作用。在资讯功能模块中，根据不同的外设资讯种类与品牌分类从而设置了不同的外设资讯版块譬如新品测评、外设资讯、游戏资讯、科技前沿等。这些都是便于不同玩家的不同设计分类。

作为电商APP，页面设计上应用的购物车功能保持在界面的右上角，方便用户进行查看、整合、购买。在进入商品详情页面之后，页面的功能更注重于一键购买与商品分享。顶层的漂浮按钮在滑动长界面的时候停留在底部，让用户不用滑动到界面顶端或者底端都可以随时购买或分享商品。方便用户的同时也是给用户视觉上的一种便捷行为习惯。

二、交互设计的低保真与高保真制作

根据页面规范，开始构建APP的低保真原型图。在低保真的制作中，首页一共放置了两个一级界面推荐、资讯。登录注册页面与普通的电商登录注册页不同，此APP将登录注册两个按钮放在了同一个页面当中，避免让用户在页面跳转之间迷失在页面层级之中。在页面中省去了第三方登录按钮其一原因是省去的了让用户选择的时间，其二是获取用户信息保障应用的有效用户量。

在应用的高保真制作上，根据应用的高保真设计规范，高保真按照低保真的标准进行模拟还原。在页面设计上，分为三个部分：其一，在页面色彩选择上为了避免用户的视觉疲劳感，使用大面积藏青色和白色为页面的基本主调；其二，在导航的设计中，使用了90%的半透明，让用户整体浏览商品时的视觉感官得到顺畅。在商品详情页延续了卡片设计，但采用了无阴影的手法，原因上商品信息内容增加，卡片数量也随之增加，更小的卡片间距，去掉阴影后页面的内容更加清爽易读。同样用字体的粗细拉开标题与描述文字的层级关系；其三，在界面布局上，卡片式的布局能够让用户将推荐的商品信息更好的区分，更具有视觉冲击力，同时也让用户有更大的触控区域，更好的得到用户体验。同时也跳出来当今APP大肆使用扁平化设计给用户带来的扁平审美疲劳。

三、结语

设计电商类APP设计中色彩选择上是更具有科技感的单色调让整体界面呈现简洁干净的设计特征但同时不会让用户觉得单调。在制作中高保真按照低保真的标准进行模拟还原，设计出预想最终的视觉特点，为更多的游戏用户带来便捷、舒适的视觉设计效果。