分享

web交互设计原则和模式...

 linmu 2009-08-04
web交互设计原则和模式

634个读者 yapollo.l... @ 昨天 13:21:56 双语对照  原文 字体大小

简介

交互设计的原则和模式
本书的作者是Bill Scott && Theresa Neil

本书的介绍了六个交互设计的原则和模式
1 直接到达(完成)预定目标 或者说更直接化操作
2.更轻量级,更简洁- 联系上下文环境提供一些轻量级别简洁工具操作
3.页面停留控制--让用户在一个页面中停留而不是反复刷新页面。
4.页面提供引导邀请
5.过渡(过场)的使用
6.实时(或即时)响应

 

 

Logo

web界面设计(丰富交互设计的原则和模式)

(本书英文版大家可以到我blog下载:http://blog./?p=325)

本书所有的例子都来自我们同事在flicker网站的图片。下面将会介绍六个设计原则,在本书中能够发现最好的范例和设计模式

一: 直接到达(完成)预定目标

 

正如:alan cooper(交互设计发起的倡导者)陈述的那样:"那里有输出,那里就有输入" 这是一个直接操作(操纵)的原则。

例如:直接用一个页面实现编辑和展示的效果,代替了原来用你一个单独页面去实现编辑的内容,并且另一个页面实现展示的效果。

 第一章:在一个页面中编辑和展示。

Single Field Inline Edit

单行编辑和展示

实例自flicker

 

Multi-Field Inline Edit

多行的编辑和展示

实例来自 Backpackit

Overlay Edit

覆盖编辑,比如:move over 事件触发的 link

Yahoo! Trip Planner provides a complex editor in an overlay for scheduling an itinerary item

dwi_0112b (by Designing Web Interfaces)

Table Edit

表格式的编辑模式 实例来自google doc

Editing a spreadsheet in Google Docs is very similar to editing a spreadsheet in Microsoft Excel

dwi_0113b (by Designing Web Interfaces)

组编辑模式.直接改变一个组的编辑模式

实例来自iphone得菜单组位置变换模式

dwi_0115c (by Designing Web Interfaces)

模块配置

直接在一个页面中进行模块的配置设置。

 

第二章:拖拽

dwi_0203d (by Designing Web Interfaces)

模块拖拽,在一个页面中重新编排模块的位置

实例来自Netvibes,netvibes,允许用户自主进行各个模块的拖拽操作。

 

dwi_0218c (by Designing Web  Interfaces)

列表的拖拽,重新给列表排序

实例来自 Backpackit

dwi_0223c (by Designing Web  Interfaces)

对象的拖拽,通过拖拽改变对象之间的关系

实例来自Cogmap

dwi_0233b (by Designing Web  Interfaces)

拖拽的动作事件,在拖拽一个对象的时候触发的事件

 

拖拽收藏装置。

通过拖拽达到收藏的目的,实例:比如购物车实现

 第三章,直接选择

dwi_0304c (by Designing Web   Interfaces)

选择切换开关,比如gmail用checkbox实现对邮件的选择性操作

 

dwi_0309b (by Designing Web   Interfaces)

收藏选择

提供多个页面的选择收藏操作

实例来自LinkedIn 提供一个区域用来保存从多个页面选择收藏的东西。

 

dwi_0312 (by Designing Web   Interfaces)

对象的选择

直接进行对象选择的操作

dwi_0317 (by Designing Web   Interfaces)

混合选择操作

合并了开关和对象选择的操作

 

第二: 保持轻量级

 

关于保持的一个轻量级的操作,是因为当用户进行应用程序的交互操作的时候,肯定会有身体或者精神上的消耗。一个首要的方面就是要创建一个轻量级别的贯穿用户使用的上下文的工具

第四章,用户上下文背景中的工具

dwi_0403c (by Designing Web   Interfaces)

Always-Visible Tools

总是可见的工具

如dig网站的dig按钮总是对用户可见

Place Contextual Tools directly in the content.

dwi_0408b (by Designing Web   Interfaces)

Hover-Reveal Tools

鼠标mouse over的时候才会显示的工具

Show Contextual Tools on mouse hover.

dwi_0419b (by Designing Web   Interfaces)

Toggle-Reveal Tools

开关切换时显示的工具

A master switch to toggle on/off Contextual Tools for the page.

dwi_0421c (by Designing Web   Interfaces)

Multi-Level Tools

多级工具

Progressively reveal actions based on user interaction.

dwi_0425c (by Designing Web   Interfaces)

Secondary Menu

二级菜单

Show a secondary menu (usually by right-clicking on an object).

在当前页面停留

页面的刷新一般来说会打断用户的思维流,网站默认的情况下每次事件的触发都会从一个页面切换到另一个页面,由于我们不再

被那些技术束缚,我们能够决定什么时间保持用户停留在当前的页面中,从而不打断他的思维流。

第五章,”覆盖“模式

dwi_0503b (by Designing Web   Interfaces)

对话框的浮层模式

替换浏览器自己的弹出框用自己重新定义的弹出框(pop up)

dwi_0508b (by Designing Web   Interfaces)

详情浮层模式

允许在文章中的段落中用户的鼠标的点击或者mouser over时触发弹出某个关键字的详情浮层

 

dwi_0515c (by Designing Web   Interfaces)



第三:输入浮层模式

在每个输入框的焦点触发的时候,会弹出一个浮层去提示一些额外的备注信息。

 


第六章嵌入模式

dwi_0603 (by Designing Web   Interfaces)

对话框的嵌入

 

dwi_0605b (by Designing Web   Interfaces)

列表的嵌入

Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.

dwi_0610c (by Designing Web   Interfaces)

详情的嵌入

Reveals additional information in the context of the page.

dwi_0611 (by Designing Web   Interfaces)

Tabs

标签模式

用标签 控制显示提示信息的方式

Provides additional panels of information accessible by tab controls.

 

第七章虚拟页面

dwi_0703b (by Designing Web   Interfaces)

Virtual Scrolling

When data sets are large, virtual scrolling allows content to be dynamically scrolled in on demand.

dwi_0706a (by Designing Web   Interfaces)

Inline Paging

When information needs to be chunked into pages, content can still be loaded dynamically.

dwi_0711a (by Designing Web   Interfaces)

Scrolled Paging

A blending of inline paging and virtual scrolling.

dwi_0714a (by Designing Web   Interfaces)

Virtual Panning

A virtual canvas allows users the freedom to roam in two-dimensional space.

dwi_0715a (by Designing Web   Interfaces)

Zoomable User Interface

Allows the user freedom of motion in both 2D and 3D. Supports the concept of an infinite interface.

 Chapter 8. Process Flows

dwi_0803b (by Designing Web   Interfaces)

Interactive Single-Page Process

As the user interacts the workflow adapts.

dwi_0807b (by Designing Web   Interfaces)

Inline Assistant Process

Inline assistance for keeping workflows in-context.

dwi_0809 (by Designing Web   Interfaces)

Dialog Overlay Process

Encapsulating a process in an overlay.

dwi_0815 (by Designing Web   Interfaces)

Configurator Process

Interactive process for configuring products.

dwi_0819 (by Designing Web   Interfaces)

Static Single-Page Process

One page workflow.

第四:提供一个引导邀请

 

发现能力对于RIAweb来说是一个首要的挑战之一,一个重要的特点就是如果用户不能发现它,那么就是毫无用途滴。

改善提高发现能力的一个主要的途径就是提引导邀请。引导邀请的提示用户下一个级别的交互操作。

Chapter 9. Static Invitations

dwi_0902c (by Designing Web   Interfaces)

Call to Action Invitation

Invite users to primary task or tasks.

dwi_0907 (by Designing Web   Interfaces)

Tour Invitation

Invite users to explore new features.

 Chapter 10. Dynamic Invitations

dwi_1001b (by Designing Web   Interfaces)

Hover Invitation

Invitation during mouse hover.

dwi_1008d (by Designing Web   Interfaces)

Affordance Invitation

Using the familiar as a bridge to the new.

dwi_1010d (by Designing Web   Interfaces)

Drag and Drop Invitation

Invitations during drag and drop.

dwi_1021 (by Designing Web   Interfaces)

Inference Invitation

Invitations during interaction.

dwi_1025 (by Designing Web   Interfaces)

More Content Invitation

Invitations for revealing more content.

 


第五:过渡转换的使用

动画和过场特效,以及各种各样的可视化过渡 对于加强衔接和交流来说是很强大的技术。

 

Chapter 11. Transitional Patterns

dwi_1101b (by Designing Web   Interfaces)

Brighten/Dim

Change focus by brightening and dimming items.

dwi_1106b (by Designing Web   Interfaces)

Expand/Collapse

Transitions to open and close items.

dwi_1109b (by Designing Web   Interfaces)

Self-Healing Fade

Removed items fade out and area "heals".

dwi_1109b (by Designing Web   Interfaces)

Animation

Showing the transition between repositioned items.

dwi_1112c (by Designing Web   Interfaces)

Spotlight

Using highlighting to focus user attention.

 

 Chapter 12. Purpose of Transitions

dwi_1201a (by Designing Web   Interfaces)

Slide In/Slide Out

Expose a slide out overlay.

dwi_1202b (by Designing Web   Interfaces)

Faceplate

Cross-fade between a main screen and configuration panel.

dwi_1203b (by Designing Web   Interfaces)

Flip

Flip between a main screen and configuration panel.

dwi_1208b (by Designing Web   Interfaces)

Accordion

Component that slides open a panel while hiding the rest.

dwi_1206a (by Designing Web   Interfaces)

Carousel

Animated scrolling of more content.

 

第六 :即时响应

一个能响应的页面才是智能的页面,这个原理探究了如何用实时响应你构建一个丰富的用户体验


第十三章:查找匹配模式

dwi_1303a (by Designing Web   Interfaces)

Auto Complete

自动完成事件

用户打字的时候,在输入框中匹配用户输入的内容并且显示出来

 

dwi_1306 (by Designing Web   Interfaces)

Live Suggest

实时提醒

用户打字的时候,提示用户搜索的相关关键字

As the user types search suggestions are displayed.

dwi_1312c (by Designing Web   Interfaces)

Live Search

实时搜索

当用户在搜索框中键入内容后直接在当前页面实时显示搜索结果。

 

dwi_1318 (by Designing Web   Interfaces)

Refining Search

精准化搜素

在实时搜索的同时提供修改搜索关键字的面板

 

第14章:feedback模式

dwi_1407c (by Designing Web   Interfaces)

Live Preview

实时预览效果

比如:用户的交互操作结果能被实时预览看到。

 

dwi_1410b (by Designing Web   Interfaces)

Progressive Disclosure

进度状态公开

如用户交互操作一样,给于用户更多界面单元显示。

 

dwi_1416 (by Designing Web   Interfaces)

Progress Indicator

进度指示

在长进度出现的时候,应该用一个进度指示给于用户好的体验

 

dwi_1418c (by Designing Web   Interfaces)

Periodic Refresh

预知刷新

当有新的消息时能实时提示

 

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多