UP智慧校园APP的设计与制作

摘  要：软件设计可分为两个部分：编码设计和UI设计。编码设计大家都很熟悉，但UI设计还是一个很陌生的词。UI界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计，是用户与计算机系统相互沟通的重要渠道。由计算机系统通过用户界面面向用户提供数据输入环境、系统运行状态和程序运行结果，用户通过用户界面向计算机系统提供工作要求、设计想法和问题处理意见，所以用户界面设计的好坏对计算机系统的使用起着非常重要的作用。用户界面作为关键的交互平台,如何建构更有效的界面风格体系,如何建构更好体现产品性能的特定体系成为智能手机全面开发的重点。当手机用户的需求越来越多,当手机界面操作越来越复杂,对界面设计也提出了更高的要求。

该项目以Photoshop为主要的开发工具，原型图与交互效果使用Axure RP 8这款软件，该软件可以设置效果图的交互效果，使得用户有较好的体验感，使用HBuilder完成web一级栏目展示的静态官网。主要界面有启动页、引导页、首页（个人主页页面、语音助手页面、校园卡页面、我的学校页面、校园服务页面）、记录（智能课表页面、智能笔记页面、UP记账页面、备忘录页面、私密日记页面）、兼职（校内兼职页面、我的简历页面、消息中心页面、发布任务页面）、跳蚤市场页面（二手闲置页面、校园代理页面、发布商品信息页面、聊天页面、购物车页面）、我的、用户的登录页面、注册页面等。

本文结合UP智能校园项目实例研究如何设计高用户体验的软件UI，并对软件页面的设计原则、方法、及过程进行分析。

关键词：UI界面设计  交互设计  UP智慧校园  设计原则  

目 录

1. 引言 1

1.1 UP智慧校园APP的开发背景 1

1.2 UP智慧校园APP的意义和设计目的 1

2 开发工具及环境介绍 2

2.1 UP智慧校园APP开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 Photoshop CC 2017 2

2.2.2 Axure RP 8 3

2.2.3 HBuilder 9.0.6 3

2.2.4 XMind 7.5 Update 1 3

3 项目概述 4

3.1 项目概述 4

3.2 项目风险 4

3.3 项目进度 4

4 需求分析 5

4.1 用户需求 5

4.2 功能需求 5

4.3 同类型APP分析 7

4.4 现行研究存在的问题及解决办法 7

5 APP基本要素 8

5.1 设计规范 8

5.2 LOGO设计步骤与含义 9

5.3 UP智慧校园APP结构图 10

6 APP界面设计 11

6.1 APP原型图设计 11

6.1.1 首页 11

6.1.2 记录页面 12

6.1.3 兼职页面 13

6.1.4 跳蚤市场页面 14

6.1.5 我的页面 15

6.1.6 登录注册页面 16

6.2 APP界面实现 17

6.2.1 引导页1 17

6.2.2 引导页2 18

6.2.3 启动页 19

6.2.4 首页 20

6.2.5 记录页面 25

6.2.6 兼职 31

6.2.7 跳蚤市场 36

6.2.8 我的 42

6.2.9 登录/注册 43

7 WEB界面设计 46

7.1 WEB功能界面介绍 46

7.2 WEB界面布局介绍 46

7.3 WEB界面实现 47

7.3.1 登录页 47

7.3.2 首页 54

7.3.3 记录 58

7.3.4 兼职 62

7.3.5 跳蚤市场 66

7.3.6 购物详情页 69

总结与展望 76