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

实验目的

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.打开磨刀,新建一个页面。

【深圳大学软件工程】实验一 软件界面设计_第1张图片

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

【深圳大学软件工程】实验一 软件界面设计_第2张图片

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

【深圳大学软件工程】实验一 软件界面设计_第3张图片

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

【深圳大学软件工程】实验一 软件界面设计_第4张图片

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

【深圳大学软件工程】实验一 软件界面设计_第5张图片

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

【深圳大学软件工程】实验一 软件界面设计_第6张图片

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

【深圳大学软件工程】实验一 软件界面设计_第7张图片

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

【深圳大学软件工程】实验一 软件界面设计_第8张图片

第三部分:综合设计题

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

(1)写出软件功能的综述描述。

(2)结合软件综述的内容,设计一个能够实现该软件的软件界面。

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

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

【深圳大学软件工程】实验一 软件界面设计_第9张图片

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

【深圳大学软件工程】实验一 软件界面设计_第10张图片

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

【深圳大学软件工程】实验一 软件界面设计_第11张图片

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

【深圳大学软件工程】实验一 软件界面设计_第12张图片

实验结论

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

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

(by 归忆)

你可能感兴趣的:(软件工程,深圳大学,软件工程,软件界面设计,磨刀)