校园学付宝APP界面UI设计与应用研究

周正 司占军 旷羚惠

摘要：现代社会的信息传播大部分人都是通过互联网去获得，并且考虑到设备的便捷性和快痴性，移动端比PC端更为受欢迎，因此，校园服务APP系统也在此潮流下逐步发展起来。该文设计了一款校园学付宝APP的UI界面，并从需求分析、设计准备及制作、前端到后端搭建以及设计完善等方面进行了设计与制作。

关键词：UI设计;人机界面;后台研究

中图分类号：TP37

文献标识码：A

文章编号：1009-3044（2020）04-0054-02

UI设计在如今的信息化社会中飞速发展着，在满足了功能的基础上，越来越多的用户开始重视UI界面的美观程度以及体验感。一个好的UI界面能够给人带来第一感官的舒适性，这也是界面设计师应该注重和深入研究的问题。

随着互联网的飞速发展，线上支付已经成为一种新型的支付方式，学生卡的充值、余额查询、及时挂失等功能显得更为重要，为了更好地服务于学生的校园生活，移动端的支付平台应运而生。学付宝是一款校园服务APP，线上能够提供充值、支付、余额查询、修改密码、冻结账户等一系列服务，解决了大学在校师生在传统模式上的不便，通过移动端设备的智能交互，打造轻松校园、智慧校园。

1 校园学付宝APP界面制作工具介绍

使用AdobePhotoshop.Adobeillustrator合理的设计UI界面图文功能结构布置、色彩搭配，以及个性化图标的绘制，交互部分釆用Axure，AdobeXD进行各个页面之间的交互设计，设计师使用AdobeXD可以更高效准确的完成静态编译或者框架图到交互原型的转变川。后台开发则使用了微信web开发者工具。

2 校园学付宝APP界面规范化设计

2.1 原型图设计

原型图可以帮助设计师更好地发现并解决问题，同时也可以更好地使用户思考核心的概念内容。在进行校园学付宝APP界面设计时，釆用了UI尺与Photoshop软件两者相结合的方式，先用UI尺与铅笔大概绘制出APP的线框图，从客户的角度去思考这个APP所需要的功能，并且用Axure整理出整体的流程图，进行每个页面需要实现的功能分析，最后计算好界面尺寸，使用Photoshop软件中的标尺工具绘制岀整齐规范的产品原型图。

2.2 设计稿的标注与切图

在设计的时侯，需要对设计稿有一个明确的布局标注，这里使用了PxCook软件中的文字标注工具同时结合PS进行标注。标注的内容有：文字字体的大小、颜色;顶部标题栏的背景色值，透明度;内容显示区域的背景色，底部标签栏的背景色值;图标大小以及点击区域的位置;图片的宽高等。此次校園学付宝APP设计以iphone6/6s为原型，状态栏和导航栏的高度分别为40px和88px，切图尺寸为ico_car@2x.pngo另外，针对一^图标在不同情况下有不同的状态，对每一种状态都制作了对应的切片。

2.3 图标设计

在设计中要善于利用图标语义引导用户行为。如釆用象形图形来制作图标，如短信、通讯簿等，用字符来制作图标，如IE浏览器、支付宝的图标，还可以用一些抽象的符号来隐喻要代表的应用⑵。校园学付宝APP的图标设计使用了线面结合的方式利用一些模拟形象来达到希望传递的效果，考虑到用户群体以学生为主，采取了多彩色设计给人以很青春的感觉。

应用中心的图标含有情感化和阴影的设计元素，通过粗细一致的线条去绘制，高度概括并勾勒出各类代收费、爱心捐赠、离校申请、城市卡充值等应用中心的主要功能，使得整个页面整齐划一，利用圆角包围圆角图标给人以亲和力，使用起来更能贴合用户本身，增加用户粘性。

2.4 界面栅格化处理

栅格系统的设计可以保持整体设计的一致性、专业性，合理的利用界面设计功能区布局，以达到页面整洁有序。首先定义最小设计单位为4，左右间距纵向间距为24，28。其次，确定边距和水槽大小，这就是我们定的栅格四列，系统骨架，设计时保证每个设计元素都在框架内，保持规则，边距与水槽尽量避免放置内容，如果放，尽量釆用组的形式。

2.5 文字字号字体及颜色

校园学付宝APP以ios端设计尺寸为标准，字号范围一般在20-36px之间（@2x），英文使用的是SanFrancisco字体，中文使用的是苹方黑体。字体颜色通常很少用纯黑色，一般釆用深灰色和浅灰色、粗体和细体来进行信息层级的划分。

3 校园学付宝APP界面整体开发环境研究

3.1 交互设计

首页是连接所有页面的核心内容，它的设计至关重要。在页面上方放置了两个能够对用户登录状态和整个APP进行设置的按钮，左边的个人按钮可以使用户退出登录状态或者切换其他账号，右边的设置按钮是针对整个APP的基本调整，如调整为夜间浏览模式、清除缓存、隐私设置等功能。

交互设计是为了满足用户最基础的需求，在对首页进行分析之后，添加了以下几个常用的主要功能：支付、出示付款码、卡包以及认证码。在设备连接上了学校的支付系统后，即使没有携带校园卡，也能够通过手机对校园里的财务来往进行操作，为在校师生提供了便利。除此之外还添加了一些针对校园生活的功能，如校园卡充值、校园卡挂失，流水查询等，学付宝APP首页如图4所示。在对页面进行功能分析之后，通过Ado-beXD软件进行界面的交互设计。

3.2 后台开发环境

学付宝APP的后台开发使用了微信web开发者工具，首先需要根据自己电脑的版本下载微信官方提供的模拟器，下载安装完毕以后环境就已经搭建完成。初始化的项目包括一些简单的代码文件，如app.js、app.json、app.wxss。其中，.js后缀的是脚本文件，.json后缀的是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。针对校园学付宝开发，主要是一些样式表的代码，还有基础内容、导航组建和媒体组件的代码学习，用以实现一二级页面的连接跳转。在首页选择卡片式轮播设置更符合当下的趋势，能够更加吸引用户，轮播代码如下所示。

4 结束语

本文通过小程序完成了UI设计跟后台应用开发这两个关键技术的结合。本次校园学付宝APP界面UI设计在经过对设计稿进行多次修改之后，围绕着用户核心内容做出了从布局到功能的调整，但仍存在着一些不足，比如在前期设计的时候，没有做到大量的用户调研与行为研究。一个APP从前期设计到上应用商店进行调试，是一个长期且需要团队分工的过程。虽然目前国内各院校还没有设立相对健全的UI设计专业，但未来这个行业肯定会越来越贴合我们的生活并服务于我们的社会，也会有更多的人投入到界面研究等相关行业。

参考文献：

[1] 李铁萌，侯文军，陈冬庆.对移动互联网产品交互设计中控制感的研究[J].北京邮电大学学报：社会科学版，2014，16（4）：7-11.

[2] 张欣悦.App开发中的UI设计技巧[J].电脑知识与技术，2016，12（2）：82-83.

[通联编辑：谢媛媛]