OnlyRoom

最近看了Theresa Neil写的关于屏幕模式的文章，非常实用也很有帮助。于是花了一些时间翻译整理出来，方面大家一起查看。这些屏幕模式是产品经理，UI\UX的设计师，信息架构师，交互设计师和开发人员不可缺少的设计原则和参考。将辅助我们完善那些抽象的不清晰的构思，并启发我们如何应用到具体问题中。在设计原型时如能熟知这些标准模式并将其灵活运用，会大大提高我们的工作效率和设计品质。也可以把它们当做是企业软件和网站制作的解决方案模板或参考模式。（如需转载的朋友请标明出处和原作者，如对翻译有建议的朋友欢迎留言多多交流，以便完善）

1. 主体/细节 Master/Detail

主体/细节屏幕布局可分为水平、垂、以及嵌套。如果希望引导用户在同一页面下高效地切换类目，这无疑是一种理想的方式。如果主体信息对于用户来说更重要或是主体部分不仅条目多而且包含信息也多时，横向布局是不错的选择。

2. 调色板/画布 Palette/Canvas

调色盘/画布不算是常用模式，但它对于创造图形类文档有着不可替代的优势，比如设计线性或非线性图，流程图，页面布局，制定物理大小的设计/图表或控制布局。 调色板可浮动，停靠，或永久坐落。 （可以考虑提供一个“全屏”切换，使用户可以创建更多的内容。）

3. 专栏浏览 Column Browse

分栏浏览屏幕布局，可垂直，水平，甚至更多层级的数目。用户可以通过它，选择不同的类别点击进入并逐步引导用户找到需要的信息。（通常情况下3-4列较适合）

4. 仪表盘 Dashboard

一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操作，清晰的入口和浏览。选择要显示的数据并进行筛选，给用户的反馈要精简，理论上讲在一个屏幕下展示复杂的数据本身就很难。

5. 问题/回答 Question/Answer

Q&A模式是帮助用户快速找到理想的解决方案。用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜索模式，它通常需要在了解用户的基础上，通过提问来帮助用户弄清他们缺乏的经验或是专业知识（比如健康保险，抵押，计划，购买）或是提供一个可行的建议及方案给用户。

6. 电子表格 Spreadsheet

电子表格的布局可以提供简单的编辑，添加，预览和总额，方便用户快速浏览，编辑大板块信息的理想模式。这种屏幕类型应提供以下功能：标准表格功能，隐藏/显示，重新排列栏目，全局撤销/重做，添加/插入/删除行，键盘导航，导入和导出，并可能预览和摘要的功能。

7. 平行板 Parallel Panels

平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。

8. 向导 Wizard

向导布局模式是通过引导用户完成复杂或不常见的工作流程。 选择垂直或水平样式，取决于数据的性质。

9. 交互模式 Interactive Model

交互屏幕模式的特点是许多要素及关键项目（比如日历、地图、图标、画布等）进行交互时使用。是一种更贴近用户心智模型的体验方式，并可以直接操纵。在日历、地图、线状图、预设可能场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果非常好。

10. 选项卡或分页  Tabbed

选项式的布局可以是垂直或水平的，这种方式应该提前考虑到之后其他的所有布局，一定要仔细检查不要让用户在完成这个流程时在不同的页签之间来回切换，要记住一个分屏里一次只能实现一个目标。当工作流程需要从多方面进行分析，同列表，图表及热图一起时，标签式布局是较好的选择。

11. 表单  Forms

表单类型众多，也是最能体现用户体验是否良好的地方。设计良好的表单，能让用户感到心情舒畅，快速完成注册、付款、内容创建及管理。其中包含很多内容，推荐专门介绍表单的书：《Web Form Design: Filling in the Blanks》。最佳应用：使用全部左对齐的布局，将标签放置在左上角，保持整体一致性，命令按钮左对齐，同类或相近的可放置在一个小区域内，明确的标记出必填项，提供清晰的反馈信息，提供明确的错误信息和帮助。

研究

12. 搜索/结果  Search/Results

搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。

13. 过滤器  Filter Dataset

分为横向和纵向，开始定义一些已知信息，之后通过限定条件对搜索后的结果进行再过滤。

14. 门户网站  Portal

门户布局可以根据用户和产品定位，提供非常高的定制化，他们应用在新闻网站是非常理想的。

15. 浏览翻阅  Browse

是提供用户快速读取扫描和浏览信息的最佳布局，它可以是两个或三个列的主要内容，通常放置在左边。也可以根据当地用户的阅读习惯（从左往右或是从右向左等等）。