在需求分析阶段,构建用户界面模型是十分必要的,构建界面模型可以站在系统使用者的角度去考虑系统的外观与布局。另外,同系统相关者确定和验证已定义的系统需求时,界面模型可以让系统相关者很好地理解系统,对需求的评审和验证都有很大帮助。
在《人脉系统V1.0需求范围》技术需求中,要求人脉系统提供互联网服务,用户通过浏览器来访问和使用系统。因此人脉系统呈现给用户的是一个网站,需要先建立网站模型。建立网站模型可以使用Visio的网站图模型来建模。下图是应用Visio建立的网站图模型。
图 1 用户界面网站图模型
网站图模型给出了人脉系统的网页结构,在网站的主页下面有登录页面、注册页面和我的页面三个页面组成。我的页面由名片管理和信息修改两个页面组成,名片管理由添加名片、名片查询、名片详细页面三个页面组成。
未登录的用户进入网站主页时,主页显示登录页面,并有注册页面的链接。页面模型可以使用Visio的线框图模型来建模。网站主页和登录页面如下图所示。

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

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

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

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

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

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

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