web交互设计原则和模式

标签： web 交互设计 原则 | 发表时间：2009-08-03 13:21 | 作者：yapollo.li shallwelin
出处：http://www.yeeyan.org

原文作者：Bill Scott
原文链接：Designing Web Interfaces Principles and Patterns for Rich Interaction
译者：yapollo.li

 

Logo

web界面设计（丰富交互设计的原则和模式）

(本书英文版大家可以到我blog下载：http://blog.youmila.com/?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_0234c (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

预知刷新

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

 

 

 

 

 

 

 

添加评论

相关 [web 交互设计 原则] 推荐：

web交互设计原则和模式

- shallwelin - 译言-
原文作者：Bill Scott. 原文链接：Designing Web Interfaces Principles and Patterns for Rich Interaction. web界面设计（丰富交互设计的原则和模式）. (本书英文版大家可以到我blog下载：http://blog.youmila.com/?p=325).

Android界面与交互设计原则

- - 人人都是产品经理
在 iOS HIG已经强大经典了N年之后，Android终于推出了一套比较系统的 HIG（大概是为了配合Android 4.0 Ice Cream Sandwich）. 仔细比较两套HIG的“设计原则”部分，发现完全是截然不同的两种风格. iOS HIG走的是更专业型的路线，描述严谨且有不少的专业词汇（比如Metaphors、Consistency之类的）.

交互设计原则有哪些？

- - 人人都是产品经理
笑天涯说：交互设计直接决定用户使用你的产品过程中体验，其重要性不言而喻. 那么我们做交互设计的时候该考虑哪些交互设计原则呢. 知乎问题：交互设计原则有哪些. 问题虽然有点久远，但是知乎用户 向华胜的回答还是很干货，感兴趣的读者可以仔细看看. 产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计8原则：.

Web交互设计优化的简易check list

- 没剑 - 互联网的那点事
“优化已有产品的体验”，这是用户体验相关岗位职责中常见的描述. 我们的产品常常是在快速的迭代过程中不断完善的，就像孩子生下来需要养育才能长大一样，优化已有功能/产品，和设计新功能/产品同样重要，不可偏废. 但是，相比实现新功能，已有功能的优化总是显得没有那么紧迫而且很零散，导致了迭代优化的计划总是被归入“重要不紧急”甚至是“不重要不紧急”的象限，变成了东一棒子西一榔锤的买卖.

谈谈人机交互设计 (UX) 的三个半原则

- - 盒子UI
一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的，例如优先级、一致性、界面的隐喻等等，好的设计都需要考虑到这些问题，甚至再更广的范围内也同样适用，而不仅仅是交互设计范畴. 一个设计师&产品经理应该在决策时下意识的、本能的考虑这些原则. 就像以前很多零售业者能够一抓准，你要一斤糖，他抓起来就是一斤，不多不少，靠的就是不断的练习+思考，最后将其变成了自己的本能.

手机客户端交互设计原则及信息展现方式

- - 互联网分析沙龙
在手机上浏览信息，存在着太多的局限，手机屏幕小注定了一页不能显示太多的信息，环境光线的变化注定页面设计不能过于花哨，流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页，即使是经过一些手机浏览器的优化，体验还是会很糟糕，甚至有时候会让人难以忍受. 如何调整信息展现方式，使内容能在小屏幕的手机上也更友好的展现呢.

华为内部的Web安全原则

- - 服务器运维与网站架构|Linux运维|X研究
Web安全原则 1.认证模块必须采用防暴力破解机制，例如：验证码或者多次连续尝试登录失败后锁定帐号或IP. 说明：如采用多次连续尝试登录失败后锁定帐号或IP的方式，需支持连续登录失败锁定策略的“允许连续失败的次数”可配置，支持在锁定时间超时后自动解锁. 2.对于每一个需要授权访问的页面或servlet的请求都必须核实用户的会话标识是否合法、用户是否被授权执行这个操作，以防止URL越权.

Web开发的七个原则

- - JavaScript - Web前端 - ITeye博客
Web(网站)开发的七个原则:. (1)能在前端校验的就尽量在前端校验.  比如上传图片,在后台也可以校验:判断MultipartFile 是否为空.但是也可以直接在前台js校验:. $('#tipsDiv').html(" 正在上传,请耐心等待...");.

Web前端：11个让你代码整洁的原则

- - 博客 - 伯乐在线
写Web页面就像我们建设房子一样，地基牢固，房子才不会倒. 同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗. 上图展示了两段代码，我想大家都只会喜欢第一种，我们先不说其语义，至少他的结构让我们看上去清爽，而第二种呢.

[Web] 几个原则让前端代码更整洁

- - 博客园_首页
    在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的.     片段一  1 .     片段二是对片段一的改进，下面就改进点进行详细的讲解.     片段二的第 1 行，添加了代码 .