交互设计师经常使用的web设计模式（转）

交互设计师在设计线框图原型时，熟知常见的web设计模式颇有帮助，作到“心中有数”才能创造出符合需求，用户易学易用的界面来。所谓“没有必要重复发明轮子”，模式每每容易解决常见问题，正确的模式能帮用户熟悉界面、提升效率。

常见的UI设计模式以下图：

下面分别进行具体分析，遇到不一样需求的时候就能够选择合适UI设计模式。

01.主体/细节（Master/Detail）模式

　　主体/细节模式能够分为横向和纵向两种。若是想让用户在同一页面下，引导他们在类目下高效地切换，这无疑是一种理想的方式。若是主体信息对于用户来讲更重要，最好选择横向布局。或是主体部分不只条目多并且包含信息也多，那也该选择这种横向布局。

　　举例来讲：

Windows窗口属于纵向排布

Mac mail的横向排布

0.2分栏浏览

　　分栏浏览也分为横向和纵向两种。用户能够经过它，选择不一样的类别点进并逐步引导用户找到须要的信息。

　　举例：

Outlook采用逐级分栏的界面，用户能够选择进入“收件箱”——>“某封收件”——>“具体邮件内容”

0.3搜索/结果

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

Gmail采用简单搜索

而对于google学术的用户，高级搜索限定更复杂的搜索条件会提炼出用户更指望获得的信息。

0.4过滤数据组

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

51job用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如“发布时间、薪金”等条件，进一步优化信息

以京东为例，多数电子商务网站在用户初步模糊搜索后，提供进一步优化的过滤条件。上图中，京东采用的是横向排列方式

0.5表单

　　表单类型众多，也是最能体现用户体验是否良好的地方。其中包含不少内容，推荐专门介绍表单的书：《Web Form Design: Filling in the Blanks》。

注册信息通常使用表单

0.6调色盘/画布

　　调色盘/画布虽然不算最多见模式，但它对于创造图形类文档有着不可替代的优点：好比设计线性或非线性图；流程图；页面布局；制定物理大小的设计/图表或控制布局。

对于设计师来讲调色盘/画布这种模式并不陌生，经常使用软件，例如：Axure、ps都是采用这种方式。

0.7仪表盘

　　一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操做，清晰的入口和浏览。理论上讲，在一个屏幕下展现复杂的数据自己就很难。

以前我用水晶易表为苏宁电器作的实时监控各个地区门店销售系统仪表盘

0.8电子表格

　　方便用户快速浏览，编辑大板块信息的理想模式。电子表格须要提供下列功能：标准的表格（诸如分类，隐藏/显示 栏目，重列栏目，分组（若是能够）），全局撤销/重作，增长/插入/删除排，键盘导航，导入和导出。

淘宝购物车选择使用电子表格，可让用户对已选商品进行快速编辑（增长/减小数量，删除等）

0.9向导

　　对于复杂的或是不常见的流程，向导/快速启动屏幕模式能够有效地导航。

京东上使用wizard快速引导不熟悉流程的顾客完成付款

0.10.Q&A

　　Q&A模式是指用户经过选取相符条件，从而自主找到适合本身的解决方案。Q&A不一样于搜索模式，它一般须要了解用户基础上，经过提问来帮助用户弄清他们缺少经验的在哪里（好比健康保险，抵押，计划，购买）有哪些可供的选择或建议。

上海移动资费导购系统可让用户经过回答几个问题，能够建议用户选择哪一种话费套餐

0.11.平行面板

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

0.12.交互模型

　　交互模型屏幕模式应用在不少交互要素须要与关键项目（好比日历、地图、图标、画布等）进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果很是好。

Google的calendar在日历上能够直接编辑提示内容

附加：13.空白状态

　　空白状态指在任何数据输入或进入系统前，应用的天然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。经过给用户一种预览来下降担忧、沮丧和犹豫。空白状态屏幕包括：视频，快速教程，帮助提示，安装后的截图。

Wufoo是一个在线表单设计网站，初始后会引导用户创建表单

14.其余模式

　　还有两种普遍使用但在企业软件不多使用的模式。

- 门户：若是你是市场调研专家，商业需求分析师和用户反馈调研员设计门户，能够参考控制面板的设计规http://www.uimaker.com/uimakerhtml/uistudy/2010/0825/4181.html范和案例。

- Tabs：其实Tab是一种部件，不是一种模式。它为在多种同语境下的数据提供多选一选择。若是数据结构致使你的设计tab显得不少。有两个小建议：第一，从新考虑架构。经过使用卡片分类或请教一名专业的信息架构师；第二，能够参考平行面板的规范和案例。

参考文献：《Designing interfaces》and 《Designing web interfaces》

转载：