购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

4.5 视图的全面设计

在完成了各个视图的关联性设计后,就可以进入到视图的全面设计阶段。在这一阶段主要解决的问题是各个视图的具体内容和大致布局,在任何视图上明确体现与其他相关视图的关系,保证系统的整体性及和谐性。图4-8所示为学生使用的课程具体信息视图的全面设计的示例。

图4-8 课程信息视图示例

从示例视图的全面设计与关联性设计结果的比较可以看出,关联性设计中讨论的所有用户可能的行为在全面设计中都对应地得到了支持。在实际的设计中,也经常会出现关联性设计中的某些功能未能被全面设计所支持的情况。例如,可能由于屏幕大小或内容布局要求的局限性,某些功能需要移到其他屏幕上去完成,这时就需要针对具体的情况进行决定。在此例中,如果屏幕无法包括所有的功能,则可以考虑将“退出系统”功能从此屏幕去掉。其原因是此功能可能在当前屏幕状态下是较少被用到的。如果用户在当前屏幕时想退出系统,用户会自然地试图回到课程注册的原始屏幕。

除了与关联性相关的因素之外,在图4-8示例的全面设计中还包括了若干设计的考虑方面,以保证系统的整体性及和谐性。

(1)视图的左上角显示了学校的标志。系统中的所有主要视图都会在同一位置显示同样的学校标志。

(2)视图的左侧显示了学校网页浏览的主要项目。课程注册系统是这些项目之一。当用户选择了某一个项目的内容时,这个项目就被用特殊的视觉处理方法标记出来。在图4-8所示的设计中,“课程注册”被标记出来。这种设计要求学校所有的网页在左侧都应当保持同样的浏览项目。这样就从宏观上保证了系统的一致性,又能够方便用户在各个项目之间随时切换。

(3)视图包括了“课程具体信息”的题目。这有助于明确当前视图的内容与整体系统的关系。系统中所有的主要网页都应当以与其一致的形式提供题目。

(4)视图中还包括了标记页数的元素。在例子中用“2/5”表示在课程查询列表中共有5门课程,当前显示的课程是列表中的第2门课程。这一标记也有助于明晰当前屏幕与其他屏幕的联系。

经过全面设计的视图可以用视图状态转化图直观地表达出来。这种转化图的本质和前面所述的综合状态转化图类似,都是表明系统或某些元素的不同状态之间的转化关系。不同的是视图的状态转化图中的节点都是包含若干用户界面元素的视图。这些视图之间的转化是通过用户对于用户界面元素的动作(例如鼠标左键双击等)触发的。连接节点的有箭头的连线往往始于视图中的某个特定人机界面的元素,而且有箭头的连线也常常要标记动作的方式,例如单击或双击,左键或右键等。图4-9是一个包括课程查询结果列表视图和课程具体信息视图的视图状态转化图。在实际设计时往往要在一个视图状态转化图中包括系统中的多个甚至全部视图。由于篇幅所限,图4-9可以认为是一个视图状态转化图的局部。

图4-9 视图的状态转化图 HO0+AIgg7h/Zb9wenm4jD/rds3MIWOMiHHMp1o5Y0y1IrXDzPU+rR5Lqsu1KDbCs

点击中间区域
呼出菜单
上一章
目录
下一章
×