《常见UI设计模式及国内三大B2C网站首页的信息架构by派代网》.pdf

常见UI 设计模式及国内三大B2C 网站首页的信息架构 交互设计师在设计线框图原型时，熟知常见的web 设计模式很有帮助，做到“心 中有数”才能创造出符合需求，用户易学易用的界面来。所谓“没有必要重复发明 轮子”，模式往往容易解决常见问题，正确的模式能帮用户熟悉界面、提高效率。 常见的UI 设计模式如下图： 下面分别进行具体分析，遇到不同需求的时候就可以选择合适UI 设计模式。 01.主体/细节（Master/Detail）模式 主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下，引 导他们在类目下高效地切换，这无疑是一种理想的方式。如果主体信息对于用户 来说更重要，最好选择横向布局。或是主体部分不仅条目多而且包含信息也多， 那也该选择这种横向布局。 举例来说： Windows 窗口属于纵向排布 Mac mail 的横向排布 0.2 分栏浏览(Column Browse) 分栏浏览也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并 逐步引导用户找到需要的信息。 举例： Outlook 采用逐级分栏的界面，用户可以选择进入“收件箱”——“某封收件”— —“具体邮件内容” 0.3 搜索/结果(Search/Result) 搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简 单的到非常复杂的都有。 Gmail 采用简单搜索 而对于google 学术的用户，高级搜索限定更复杂的搜索条件会提炼出用户更期 望得到的信息。 0.4 过滤数据组(Filter Dataset) 分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结 果进行再过滤。 51job 用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如“发 布时间、薪金”等条件，进一步优化信息 以京东为例，多数电子商务网站在用户初步模糊搜索后，提供进一步优化的过滤 条件。上图中，京东采用的是横向排列方式 0.5 表单(Forms) 表单类型众多，也是最能体现用户体验是否良好的地方。其中包含很多内容， 推荐专门介绍表单的书：《Web Form Design: Filling in the Blanks》。 注册信息一般使用表单 0.6 调色盘/画布(Palette/Canvas) 调色盘/画布虽然不算最常见模式，但它对于创造图形类文档有着不可替代 的优势：比如设计线性或非线性图；流程图；页面布局；调整或控制设计/ 图表 的大小。 对于设计师来说调色盘/画布这种模式并不陌生，常用软件，例如：Axure、ps 都是采用这种方式。 0.7 仪表盘(Dashboard) 一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图 形和操作，清晰的入口和浏览。理论上讲，在一个屏幕下展示复杂的数据本身就 很难。 之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘 0.8 电子表格(Spreadsheet) 方便用户快速浏览，编辑大板块信息的理想模式。电子表格需要提供下列功 能：标准的表格（诸如分类，隐藏/显示 栏目，重列栏目，分组（如果可以））， 全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。 淘宝购物车选择使用电子表格，可以让用户对已选商品进行快速编辑（增加/减 少数量，删除等） 0.9 向导(Wizard) 对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。 京东上使用wizard 快速引导不熟悉流程的顾客完成付款 0.10.QA(QuestionAnswer) QA 模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。 QA 不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清 他们缺乏经验的在哪里（比如健康保险，抵押，计划，购买）有哪些可供的选择 或建议。 上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话 费套餐 0.11.平行面板(Parallel Panels) 平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全 部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效 的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。 国外的火车票在不同情况，票价会随之浮动。The T 使用堆叠面板， 让用户在同一页面下对不同项目进行编辑，又不会觉得混乱 0.12.交互模型(Interactive Model) 交互模型屏幕模式应用在关键项目（