屏幕设计模式.pdfVIP

屏幕设计模式 模式是广泛适用的解决一般问题的解决方案。与此相反 ： 指南 ：具体规则 原则 ：指 的概念型框架 在开发应用程序过程中 ，无论是面对抽象还是实际问题 ，模式都大有用处。 它们是解决问题的模板。而标准屏幕模式对于优秀的Web程序甚至企业级软件都很有帮助。 image 摘要/细节 （Mast er/Det ail ） 摘要/细节模式可横向也可竖向。该模式是满足用户既停留在一个页面又可浏览多个条目需求 的典范。 横向 image image 纵向 image 典型的摘要面板包含 ： 列表 image 树 image 折叠板 image 表格 image 而细节面板可能是一个 ： 文本 小图片/图标 （ico ns ） 表格 图表 image 表单 image 最佳实践 显示主窗格的数据量 ，例如 ：Inbox(34 ) 左边使用列表、树、表格等组件的时候 ，最好包含其标准的操作 （添加、删除、重命名、拖 放等 ） 不要在摘要或者细节板块中使用t abs （标签) 在摘要板块显示更多的信息 ，例如主题或者描述 ，横向布局是一个不错的选择。 image image image image image 最佳实践 不要把面板底部当作表格的编辑区。可以使用Spreadsheet模式代替 ，或者一个高亮显示的 层来作为编辑区。 分列浏览 （Co lumn Bro se ） 该模式可横可竖。该模式适用于用户可以从很多入口点导航到他们需要的地方。 纵向 image image image image 横向 image image image image 竖直的条目结构通常可为 ： 列表 分列表 树 折叠板 通常3-4栏 ，往往包含一个全局的搜索模块 最佳实践 只在第一列显示有子节点项目 在标签中加上它所显示的条目数量 很多运用这种模式的程序都提供了一个备用的导航接口 ，比如树、小图标或者表格视图。 当每个细化列中有很条目很少 （少于20个 ），而且在细节框中有表格或者图形的内容 ，水平 布局是更好的选择。 搜索/结果 （Search/Result ） 搜索/结果模式可以很简单 ，也可以很复杂。对于用户需要直接快速的定位所需条目或者设置 条目的特殊规则是非常有用 ，高效的用户体验。 简单搜索 image image image 高级搜索 image image image 通常 ，结果显示为 ： 列表 表格 （只读/可编辑 ） 小图标 地图 搜索返回的数据 ： 默认排列方式 默认分组方式 image 除了简单的显示最初搜索结果 ，一般还会附加一些搜索的条件和完善的功能。 最佳实践 除了显示一个简单的搜索框 ，最好框内包含”key o rds”字样。 提供便捷的清楚搜索结果的方式 （一点完成 ）。 在同一屏下显示搜索结果。 在企业级运用中通常需要高级的搜索。 高级搜索通常包含如如下一个或者多个功能 ：