【深圳大学软件工程】实验一 软件界面设计

实验目的

1. 从实用的角度，掌握软件分析和界面设计。

2. 了解矢量图绘图软件的使用方法，按要求完成特定软件界面的绘制与设计。

实验内容

本实验内容分为三部分，如下所示。

第一部分：利用Microsoft Office系列中的Visio设计一个向导界面.

（1）要求绘制WinRAR中的工作界面；

（2）要求绘制WinRAR中【选项--设置--常规】界面，将每个界面中的元素进行组合（可以整体移动）；

（3）要求绘制WinRAR中【选项--设置—集成】界面，将每个界面中的元素进行组合（可以整体移动）；

第二部分：利用磨刀或者Axure，绘制移动客户端界面

（1）绘制微信中的“我”界面

（2）绘制微信中的“卡包”界面

（3）绘制生活服务中的“深圳市公交地铁”界面（可从“最近使用”或者“交通卡”中进入）

第三部分：综合设计题

结合你对软件使用的认识，完成一个软件界面的设计（例如聊天界面、拍照处理界面等）

（1）写出软件功能的综述描述

（2）结合软件综述的内容，设计一个能够实现该软件的软件界面。

（3）要求将功能描述写入到实验报告中，并将实现的软件界面贴到实验报告中

要求：

1. 第一部分和第二部分可选其一，第三部分必做。
2. 画图过程中，请注意各个元素的层次关系。
3. 图可以参考自己手机、电脑上的图。

实验分析及过程

第二部分：利用磨刀或者Axure，绘制移动客户端界面

（1）绘制微信中的“我”界面

（2）绘制微信中的“卡包”界面

（3）绘制生活服务中的“深圳市公交地铁”界面（可从“最近使用”或者“交通卡”中进入）

1.打开磨刀，新建一个页面。

2.点击左上角插入图片格子如页面3所示。

3.拖动页面格子和页面相匹配，随后上传图片并放入，如页面2所示。

4.页面2的图片是一个整体，我们需要将其分割成一块一块的，利用右侧的图片分割可以做到。

5.分割后如图所示，“我”的界面如下。

6.同理，完成“卡包”和“交通卡”界面的设计。

7.添加点击按钮后跳转界面的响应，包括点击“卡包”跳转界面，点击“交通卡”跳转界面，点击返回按钮调回上一个界面等。

8.运行演示后点击按钮，验证跳转成功。

第三部分：综合设计题

结合你对软件使用的认识，完成一个软件界面的设计（例如聊天界面、拍照处理界面等）

（1）写出软件功能的综述描述。

（2）结合软件综述的内容，设计一个能够实现该软件的软件界面。

（3）要求将功能描述写入到实验报告中，并将实现的软件界面贴到实验报告中。

1.设计一个支付功能，该功能能够实现支付的功能。该功能包含四个界面，四个界面共同实现了支付功能。第一个界面是支付界面，此时能够看到订单金额和收款方名称，终止支付的取消按钮，以及确认支付的立即支付按钮。点击确认支付后会跳转到第二个界面。

2.第二个界面相当于在第一个界面上弹出一个小窗，同样显示收款方和金额，以让用户再次确认，若放弃则可以点击x退出支付界面。与此同时，用户可以选择付款方式，选择后点击免密支付可以直接完成支付。

3.第三个界面是一个加载界面，代表正在进行支付。会有提示界面，提示用户当前正在支付中。以及支付完成后自动跳转支付成功界面。

4.第四个界面是支付成功界面，弹出收款方和付款金额，以及完成按钮退出支付界面。至此，支付功能已完全实现，四个界面均已设计完成。

实验结论

通过此次实验，学会了如何简单的使用磨刀网站进行软件界面设计，学会了实现软件的基本排版和界面间的跳转，并成功实现了卡包功能和支付功能界面的设计。

与此同时，还学会了如何从实用的角度，掌握软件分析和界面设计。了解了矢量图绘图软件的使用方法，并按要求完成特定软件界面的绘制与设计。

（by 归忆）