用户界面建模
941字,阅读需时4分钟
来自专栏
课程/专栏

在需求分析阶段,构建用户界面模型是十分必要的,构建界面模型可以站在系统使用者的角度去考虑系统的外观与布局。另外,同系统相关者确定和验证已定义的系统需求时,界面模型可以让系统相关者很好地理解系统,对需求的评审和验证都有很大帮助。

在《人脉系统V1.0需求范围》技术需求中,要求人脉系统提供互联网服务,用户通过浏览器来访问和使用系统。因此人脉系统呈现给用户的是一个网站,需要先建立网站模型。建立网站模型可以使用Visio的网站图模型来建模。下图是应用Visio建立的网站图模型。

image.png      

                                    

图 1 用户界面网站图模型

网站图模型给出了人脉系统的网页结构,在网站的主页下面有登录页面、注册页面和我的页面三个页面组成。我的页面由名片管理和信息修改两个页面组成,名片管理由添加名片、名片查询、名片详细页面三个页面组成。

未登录的用户进入网站主页时,主页显示登录页面,并有注册页面的链接。页面模型可以使用Visio的线框图模型来建模。网站主页和登录页面如下图所示。

image.png

图 2 主页与登录界面

注册页面主要用于新用户注册,新用户在注册页面输入昵称和登录密码,为防止登录密码输入错误,密码需要输入两次。注册页面如下图所示。

image.png

图 3 注册页面

 

用户登录系统后,就进入了我的页面,我的页面由名片管理和个人信息设置组成。用户可以在该页面修改个人信息,也可以通过名片管理链接进入名片管理页面。我的页面如下图所示。

image.png

图 4 我的页面

名片管理页面显示已添加的名片,在该页面可以添加新的名片,也可以编辑和删除已有名片。名片管理如下图所示。

image.png

图 5 名片管理页面

 

添加名片页面用于用户添加新的名片,添加名片如下图所示。

image.png

图 6 添加名片页面

 

查询名片页面用于用户查询名片,当前查询功能仅支持名称模糊查询。查询页面如下图所示。

image.png

图 7 查询页面

名片详情页面主要展示名片的详细信息。名片详情页面如下图所示。

image.png

图8 名片详情页面

 

用户界面模型现在已经建好了,再下一步的工作就是让美工美化界面,形成界面设计图,这部分工作将会放在设计阶段。下节课我们将讨论系统的部署模型。

我要评论
全部评论