【译】屏幕设计模式

标签: 屏幕 设计模式 | 发表时间:2011-08-21 11:15 | 作者:ISLAND 志强
出处:http://ucdchina.com/rss/all

模式是广泛适用的解决一般问题的解决方案。与此相反:

  • 指南:具体规则
  • 原则:指南的概念型框架

在开发应用程序过程中,无论是面对抽象还是实际问题,模式都大有用处。

它们是解决问题的模板。而标准屏幕模式对于优秀的Web程序甚至企业级软件都很有帮助。

image

摘要/细节(Master/Detail)

摘要/细节模式可横向也可竖向。该模式是满足用户既停留在一个页面又可浏览多个条目需求的典范。

横向

image

image

纵向

image

典型的摘要面板包含:

  • 列表

image

image

  • 折叠板

image

  • 表格

image

而细节面板可能是一个:

  • 文本
  • 小图片/图标(icons)
  • 表格
  • 图表

image

  • 表单

image

最佳实践

显示主窗格的数据量,例如:Inbox(34)

左边使用列表、树、表格等组件的时候,最好包含其标准的操作(添加、删除、重命名、拖放等)

不要在摘要或者细节板块中使用tabs(标签)

在摘要板块显示更多的信息,例如主题或者描述,横向布局是一个不错的选择。

image

image

image

image

image

最佳实践

不要把面板底部当作表格的编辑区。可以使用Spreadsheet模式代替,或者一个高亮显示的层来作为编辑区。

分列浏览(Column Browse)

该模式可横可竖。该模式适用于用户可以从很多入口点导航到他们需要的地方。

纵向

image

image

image

image

横向

image

image

image

image

竖直的条目结构通常可为:

  • 列表
  • 分列表
  • 折叠板

通常3-4栏,往往包含一个全局的搜索模块

最佳实践

只在第一列显示有子节点项目

在标签中加上它所显示的条目数量

很多运用这种模式的程序都提供了一个备用的导航接口,比如树、小图标或者表格视图。

当每个细化列中有很条目很少(少于20个),而且在细节框中有表格或者图形的内容,水平布局是更好的选择。

搜索/结果(Search/Result)

搜索/结果模式可以很简单,也可以很复杂。对于用户需要直接快速的定位所需条目或者设置条目的特殊规则是非常有用,高效的用户体验。

简单搜索

image

image

image

高级搜索

image

image

image

通常,结果显示为:

  • 列表
  • 表格(只读/可编辑)
  • 小图标
  • 地图

搜索返回的数据:

  • 默认排列方式
  • 默认分组方式

image

除了简单的显示最初搜索结果,一般还会附加一些搜索的条件和完善的功能。

最佳实践

除了显示一个简单的搜索框,最好框内包含”key words”字样。

提供便捷的清楚搜索结果的方式(一点完成)。

在同一屏下显示搜索结果。

在企业级运用中通常需要高级的搜索。

高级搜索通常包含如如下一个或者多个功能:

  • 多条件搜索
  • 自定义搜索(可保存)
  • 可定制范围搜索
  • 保存搜索条件
  • 保存搜索结果

image

  • 多次搜索组合到一个列表

image

image

最佳实践

在同一个屏幕上提供高级的搜索条件,NO 弹出框或者分屏。

不要让用户预设搜索域,可按需求设置一个附加功能。比起放在搜索框后面的下拉类表,将其整合到搜索框内更加完美。

image

数据过滤(Filter Dataset)

横纵向皆可,适于用户过滤已知的的数据,或者进一步过滤搜索数据。

纵向

image

image

image

image

横向

image

image

过滤块通常有以下这些组件构成:

  • 文本框
  • 滑块
  • 复选框
  • 列表框
  • 间隔列表框UI
  • 日期范围选择器

最佳实践

动态的过滤结果(无提交按钮),可以使用一个定时器实现。

突出“Clear all filters”按钮

左侧过滤区最好不要使用多个可折叠板

水平布局给结果显示提供了更大的宽度。这种方式便于在简单搜索下面结果集上面扩展一个高级搜索。

Roost和Omio尝试标签化区分不同的类的过滤条件。然而,缺点在于用户不能同时看到所有的过滤条件。

image

最佳实践

如果用户搜索过滤后得结果为空,非常有必要给用户一个清楚的反馈和回复选项。

image

不要为了节约一套过滤而添加新的功能。这个可以考虑用搜索(高级搜索)模式

表单(Forms)

任何表单设计都需要对可用性设计和最佳实践有深刻的理解,请参考Luke Wroblewski的书《Web Form Design:Filling in the Blanks》

image

image

image

最佳实践

通常为左对齐一列式。

image

image

Label放在上边或者左边;在整个应用中保持一致的结构。

image

image

image

image

左对齐命令按钮。

标注清楚必填域。

为用户的每个操作给出清晰的反馈

给出清楚的错误信息和帮助

image

参考37signals的《Defensive Design for the Web》

调色板/画布(Palette/Canvas)

image

image

image

image

image

image

image

很少被正确使用的模板,但是它是唯一在文档制作和设计中使用的模式:

  • 线性或非线性工序
  • 流程图
  • 屏幕布局
  • 任何受到实际大小约束的设计或图表

最佳实践

提供明确的“空白状态”信息来说明开始

提供模板

按类型组织调色板中的对象,尽量可视化

提供可视的网格选项便于点击

提供撤销和重做功能

提供一个项目管理区来管理画布(分组,复制,编辑以及删除画布)

仪表盘(Dashboard)

image

image

image

image

仪表盘是一个被严重滥用的模式,一个优秀的仪表板提供:

  • 关键信息一览

image

  • 实时数据
  • 易读的图表
  • 明确的切入点

这不是简单一屏度量就可以实现的(一个大的表格或者简单一堆图表)

高度定制化无法取代用户研究和测试

image

设计最佳实践

  1. 选择要显示的数据
  2. 依照实际用户确认
  3. 删掉一半
  4. 再次依照用户确认剩下的元素
  5. 选择组件和布局,创建3-4方案用于测试
  6. 全部修订——关键是数据

电子表格(Spreadsheet)

电子表格模式允许用户便捷的浏览修改和键入(大量)数据信息来提高用户体验

image

image

image

需提供以下功能:

  • 标准的表格功能:分类,显示/应藏列,重排列,分组
  • 重做/撤销
  • 添加,插入,删除行

image

  • 键盘导航
  • 导入导出

最佳实践

从视觉上区分可编辑表格(没有斑马线)和只读表格(使用斑马线)。

指明哪些列可编辑,计算,和/或

不要进行多行或多单元格编辑——单击即可编辑单个单元格或单行

image

image

image

点击行或者单元格才显示编辑器

出错信息提醒

向导(Wizard)

对于引导用户进行一些复杂的不常见的工作流程,该模式能有效的提高用户体验。

image

image

image

image

最佳实践

最小化步骤

如果超过五步,在任务层分组,不要编号(类似于亚马逊的购物车)

image

清晰的说明每个步骤

只在一些不常见的工作流程中使用该模式:设置、安装、修复、填写复杂的申请或者表单、提供给有经验用户选择性推出

image

显示正在进行的步骤,允许用户“回退”到上一步

Q&A(Question&Answer)

该模式下,用户可输入已知的信息来获得解决方法。

image

image

image

QA模式和搜索模式不一样的地方在于前者在用户不熟悉的地方提供一些可能的选项和建议。

例如,“我需要一个合适的抵押贷款”,与下个星期五订一张从AUS到JFK的机票不一样,当我看着搜索出来的抵押贷款的结果,缺乏专业知识来对比选择搜索结果。QA模式可以根据我在提问板块提供的信息来给出最佳的选择。

最佳实践

在问题模块允许用户指定其目标(超过十年以上的房屋居住权,低扣税,高医保(co-pay))

提供回答的评价:赞成/反对

平行板  is OK?=平行板:折叠板(Parallel Panels)

平行板模式有折叠(每次显示一个项目)和展开(一次显示所有项目)状态。这种模式易于用来组织相似互相依赖的的多块信息,一屏显示大量信息。

image

image

image

最佳实践

把折叠板放在左下角,把目标放在屏幕的上面、下面或者右边。

image

用对比和边距来突出折叠板,和屏幕下边缘保持一定的距离

整个面板都可点击,不单单是文本块

三到五个面板为佳

展开模式的平行板被应用在:

  • 需要同时显示所有工具的程序
  • 对话框-可折叠面板比起tabs标签,用户更加易于操作

image

最佳实践

如果项目有层次或连续的关系,那折叠板模式就不适合了,可以试试摘要/细节或者向导模式

不能嵌套

互动模型(Interactive Model)

有很多和关键对象(一个日历,地图,图,表,画布)联系的可交互元素是互动模式的特点。一个理想的用户体验模型,与用户的心理模型紧密结合。

image

image

image

该模式可候选:

  • 日历

image

image

  • 地图
  • Gantt 图标
  • 假定情景(包括计算表)

image

  • WYSIWYG 编辑器(包括图形编辑器)

image

最佳实践

用户可快速获得交互对象(批量加载,少量问题,模板,合理的默认设置)

避免弹出窗口,直接互动最佳,拖动,缩放,删除,双击创建……

源地址:http://island205.coolpage.biz/?p=191

相关 [屏幕 设计模式] 推荐:

【译】屏幕设计模式

- 志强 - 所有文章 - UCD大社区
模式是广泛适用的解决一般问题的解决方案. 在开发应用程序过程中,无论是面对抽象还是实际问题,模式都大有用处. 而标准屏幕模式对于优秀的Web程序甚至企业级软件都很有帮助. 摘要/细节(Master/Detail). 摘要/细节模式可横向也可竖向. 该模式是满足用户既停留在一个页面又可浏览多个条目需求的典范.

Scala设计模式

- - ITeye博客
       我的话: 在国外网站上看到一篇文章,里面详细描述了很多设计模式,并且用Java及Scala两种语言描述,清晰的让我们看到各种常规的设计模式,在Scala中是如何在语言特性层面直接支持的. 基于文章很nice,我利用今天的空闲时间将其翻译,希望大家能一起学习,讨论. 翻译比较倡促,也就两小时左右,有何不当,请在下面留言指出.

Spring设计模式

- - 行业应用 - ITeye博客
springMVC通常采用属性注入的IOC方式和AOP织入方式相结合实现依赖注入 同时使用强制代理方式,代理类或者接口. 这里又涉及到单例模式(注入的类或者接口在容器中只存在一个)、工厂模式(通过反射实现类实例化过程的公用化)、楼上所说的装饰模式属于AOP织入的一部分. 想了解spring先从IOC和AOP开始吧.

“另类” 设计模式

- Sean Lee - 酷壳 - CoolShell.cn
下面这篇文章来自这里:http://www.lsd.ic.unicamp.br/~oliva/fun/prog/resign-patterns,这篇文章有点意思了,山寨了我们著名的Design Pattern. 这篇文章并不是很容易翻译,也许我翻译的不好,大家多指正. 另外,这篇文章将失去原有的趣味在于其使用了经典设计模式的单词很相似的单词,一走眼你还以为是正二八经的设计模式.

设计模式之代理模式(Proxy)

- - 博客园_首页
这段时间一直忙于期末考试,好久没来博客园了,现在好了,终于考完了,也该过上正常的日子了. 开学就是大四的学生了,时间过的可是真快啊,转眼间大学四年已经接近尾声了. 回想大学这三年,成绩还可以吧(年级前10%),参加过各种竞赛(acm,数学建模等等),学生会也呆过(打了一年的酱油),好哥们也有那么五六个(希望以后能在一个城市发展,大学期间的宝贵财富啊),另外所谓的大学生创新实践项目也搞了一个(就算开阔一下视野吧,大学能生有什么创新呢.

设计模式原则总结

- - IT技术博客大学习
0、单一职责原则(SRP) 就一个类而言,应该仅有一个引起它变化的原因. 一、”开放-封闭”原则(OCP) 在软件设计模式中,这种不能修改,但可以扩展的思想也是最重要的一种设计原则. 即软件实体(类、模板、函数等等)应该可以扩展,但是不可修改. 【通俗】:设计的时候,时刻考虑,尽量让这个类是足够好,写好了就不要去修改了,如果新需求来,我们增加一些类就完事了,原来的代码能不动则不动.

Web应用的缓存设计模式

- - robbin的自言自语
从10年前的2003年开始,在Web应用领域,ORM(对象-关系映射)框架就开始逐渐普及,并且流行开来,其中最广为人知的就是Java的开源ORM框架Hibernate,后来Hibernate也成为了EJB3的实现框架;2005年以后,ORM开始普及到其他编程语言领域,其中最有名气的是Ruby on rails框架的ORM - ActiveRecord.

设计模式和设计原则

- - 编程 - 编程语言 - ITeye博客
26.1  设计模式和设计原则. 26.1.1  设计模式和设计原则的关系. 面向对象的分析设计有很多原则,这些原则大都从思想层面,给我们指出了面向对象分析设计的正确方向,是我们进行面向对象分析设计应该尽力遵守的准则.        而设计模式已经是针对某个场景下某些问题的某个解决方案. 也就是说这些设计原则是思想上的指导,而设计模式是实现上的手段,因此设计模式也是应该遵守这些原则的,换句话说,设计模式就是这些设计原则的一些具体体现.

面向对象设计模式的核心法则

- tonytech - Michael`s blog
有本经典的书叫《设计模式》,讲了经典的21种设计模式,建议大家都看看. 就一个类而言,应该仅有一个引起它变化的原因. 如果一个类承担的职责过多,就等于把这些职责耦合在一起,一个职责的变化可能会削弱或者抑制这个类完成其他职责的能力. 这种耦合会导致脆弱的设计,当变化发生时,设计会遭到意想不到的破坏. 软件设计真正要做的许多内容,就是发现职责并把那些职责互相分离.

如何向妻子解释设计模式

- brett80 - 博客园-首页原创精华区
  自上篇翻译<如何向妻子解释OOD>后收到了很好的反应. 故特继续翻译作者的一文,以飨读者. 在此文中,作者依旧通过与妻子浅显易懂的对话,向读者解释了什么是设计模式. Shubho:通过我们关于面向对象设计原则(OODP,即SOLID原则)的对话,我想你已经对面向对象设计原则(OODP)有了基本的认识.