常见UI设计模式（转）

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

常见的UI设计模式如下图&＃xff1a;

下面分别进行具体分析&＃xff0c;遇到不同需求的时候就可以选择合适UI设计模式。

01.主体/细节&＃xff08;Master/Detail&＃xff09;模式

　　主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下&＃xff0c;引导他们在类目下高效地切换&＃xff0c;这无疑是一种理想的方式。如果主体信息对于用户来说更重要&＃xff0c;最好选择横向布局。或是主体部分不仅条目多而且包含信息也多&＃xff0c;那也该选择这种横向布局。

　　举例来说&＃xff1a;

Windows窗口属于纵向排布

Mac mail的横向排布

0.2分栏浏览(Column Browse)

　　分栏浏览也分为横向和纵向两种。用户可以通过它&＃xff0c;选择不同的类别点进并逐步引导用户找到需要的信息。

　　举例&＃xff1a;

Outlook采用逐级分栏的界面&＃xff0c;用户可以选择进入“收件箱”——>“某封收件”——>“具体邮件内容”

0.3搜索/结果(Search/Result)

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

Gmail采用简单搜索

而对于google学术的用户&＃xff0c;高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。

0.4过滤数据组(Filter Dataset)

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

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

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

0.5表单(Forms)

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

注册信息一般使用表单

0.6调色盘/画布(Palette/Canvas)

　　调色盘/画布虽然不算最常见模式&＃xff0c;但它对于创造图形类文档有着不可替代的优势&＃xff1a;比如设计线性或非线性图&＃xff1b;流程图&＃xff1b;页面布局&＃xff1b;调整或控制设计/图表的大小。

对于设计师来说调色盘/画布这种模式并不陌生&＃xff0c;常用软件&＃xff0c;例如&＃xff1a;Axure、ps都是采用这种方式。

0.7仪表盘(Dashboard)

　　一个设计完善的仪表盘应提供&＃xff1a;一目了然的关键信息&＃xff0c;实时数据&＃xff0c;易读的图形和操作&＃xff0c;清晰的入口和浏览。理论上讲&＃xff0c;在一个屏幕下展示复杂的数据本身就很难。

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

0.8电子表格(Spreadsheet)

　　方便用户快速浏览&＃xff0c;编辑大板块信息的理想模式。电子表格需要提供下列功能&＃xff1a;标准的表格&＃xff08;诸如分类&＃xff0c;隐藏/显示 栏目&＃xff0c;重列栏目&＃xff0c;分组&＃xff08;如果可以&＃xff09;&＃xff09;&＃xff0c;全局撤销/重做&＃xff0c;增加/插入/删除排&＃xff0c;键盘导航&＃xff0c;导入和导出。

淘宝购物车选择使用电子表格&＃xff0c;可以让用户对已选商品进行快速编辑&＃xff08;增加/减少数量&＃xff0c;删除等&＃xff09;

0.9向导(Wizard)

　　对于复杂的或是不常见的流程&＃xff0c;向导/快速启动屏幕模式可以有效地导航。

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

0.10.Q&A(Question&Answer)

　　Q&A模式是指用户通过选取相符条件&＃xff0c;从而自主找到适合自己的解决方案。Q&A不同于搜索模式&＃xff0c;它通常需要了解用户基础上&＃xff0c;通过提问来帮助用户弄清他们缺乏经验的在哪里&＃xff08;比如健康保险&＃xff0c;抵押&＃xff0c;计划&＃xff0c;购买&＃xff09;有哪些可供的选择或建议。

上海移动资费导购系统可以让用户通过回答几个问题&＃xff0c;可以建议用户选择哪种话费套餐

0.11.平行面板(Parallel Panels)

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

国外的火车票在不同情况&＃xff0c;票价会随之浮动。The Train.com使用堆叠面板&＃xff0c;让用户在同一页面下对不同项目进行编辑&＃xff0c;又不会觉得混乱

0.12.交互模型(Interactive Model)

　　交互模型屏幕模式应用在关键项目&＃xff08;比如日历、地图、图标、画布等&＃xff09;需要进行交互的时候。是用户体验贴近用户心智模型的理想模式。在日历、地图、线状图、预设场景分析&＃xff08;包括计算器&＃xff09;&＃xff0c;所见即所得编辑器&＃xff08;包括图片处理&＃xff09;时应用效果非常好。

Google的calendar在日历上可以直接编辑提示内容

附加&＃xff1a;13.空白状态(Bonus. Blank State)

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

Wufoo是一个在线表单设计网站&＃xff0c;初始后会引导用户建立表单

14.其他模式

　　还有两种广泛使用但在企业软件很少使用的模式。



- 门户&＃xff1a;如果你是市场调研专家&＃xff0c;商业需求分析师或是用户反馈调研员&＃xff0c;设计门户可以参考“仪表盘”的设计规范和案例。

- Tabs&＃xff1a;其实Tab是一种部件&＃xff0c;不是一种模式。它为同情境下的数据提供多选一的操作。如果数据结构导致你的设计tab显得过多。有两个小建议&＃xff1a;第一&＃xff0c;重新考虑信息架构。通过使用卡片分类法&＃xff08;card sorting&＃xff09;或请教一名专业的信息架构师&＃xff1b;第二&＃xff0c;可以参考“平行面板”的规范和案例。