在需求分析阶段，构建用户界面模型是十分必要的，构建界面模型可以站在系统使用者的角度去考虑系统的外观与布局。另外，同系统相关者确定和验证已定义的系统需求时，界面模型可以让系统相关者很好地理解系统，对需求的评审和验证都有很大帮助。
在《人脉系统V1.0需求范围》技术需求中，要求人脉系统提供互联网服务，用户通过浏览器来访问和使用系统。因此人脉系统呈现给用户的是一个网站，需要先建立网站模型。建立网站模型可以使用Visio的网站图模型来建模。下图是应用Visio建立的网站图模型。
图 1 用户界面网站图模型
网站图模型给出了人脉系统的网页结构，在网站的主页下面有登录页面、注册页面和我的页面三个页面组成。我的页面由名片管理和信息修改两个页面组成，名片管理由添加名片、名片查询、名片详细页面三个页面组成。
未登录的用户进入网站主页时，主页显示登录页面，并有注册页面的链接。页面模型可以使用Visio的线框图模型来建模。网站主页和登录页面如下图所示。
图 2 主页与登录界面
注册页面主要用于新用户注册，新用户在注册页面输入昵称和登录密码，为防止登录密码输入错误，密码需要输入两次。注册页面如下图所示。
图 3 注册页面
用户登录系统后，就进入了我的页面，我的页面由名片管理和个人信息设置组成。用户可以在该页面修改个人信息，也可以通过名片管理链接进入名片管理页面。我的页面如下图所示。
图 4 我的页面
名片管理页面显示已添加的名片，在该页面可以添加新的名片，也可以编辑和删除已有名片。名片管理如下图所示。
图 5 名片管理页面
添加名片页面用于用户添加新的名片，添加名片如下图所示。
图 6 添加名片页面
查询名片页面用于用户查询名片，当前查询功能仅支持名称模糊查询。查询页面如下图所示。
图 7 查询页面
名片详情页面主要展示名片的详细信息。名片详情页面如下图所示。
图8 名片详情页面
用户界面模型现在已经建好了，再下一步的工作就是让美工美化界面，形成界面设计图，这部分工作将会放在设计阶段。下节课我们将讨论系统的部署模型。