用户体验六原则 《WEB界面设计》 读书笔记

理论基础和参考资料：

 

OREILLY WEB界面设计。本书基本上涵盖了现代WEB交互设计的普遍规则和最佳实践。

理论基础的重要性：

普遍规则：防止我们盲目的摸索，避免重复的犯初级的错误【这些错误都是其他人在初级阶段犯过的，我们没必要再发明一次轮子】。

比如绝大多数网站不采用的效果，足已说明该效果不再适合。

最佳实践：在WEB交互设计中各种展现形式的最佳实现方式，了解和掌握这些方法，可以使WEB界面设计开始就走在正途上，并取得最佳的结果，不至于在盲目无谓的摸索中浪费时间。

反模式：最差实践，解决问题的最差实践和最差的结果。

反例：我们应该避免的做法。

 

用户体验的六个原理：

一、直截了当：
1.1“在哪里输出就在哪里输入”
例子：上下文编辑，行内编辑
Flicker即时编辑的图片标题
最佳实践：尽量减少编辑状态和非编辑状态的界面差异，如果空间允许，给用户提供确定和取消按钮。
1.2利用拖放
最佳实践：
拖动要尽量减少页面的抖动对用户的视觉干扰；
有节制的使用拖放，因为其功能不易被发现;
给用户明确的指示，可以拖动；
简单的操作如改变元素属性等，尽量不使用拖动来完成操作
反例：不要为了使用拖动而创建人造元素，拖动应该作为一种备用手段，而不是主角。
比如拖动评分是不可取的例子。

二、简化交互
让交互易于完成轻松便捷，而不是重重障碍磕磕绊绊
Yahoo 360重新设计的理念“少费事”
Digg的例子，仅仅把推送文章的操作由两步变为一步，却对Digg的成功产生了重大的影响，这就是简化交互的巨大作用。
重要途径：上下文工具
最佳实践：
把工具放在接近焦点的位置，易于激活；
尽量做到操作一次生效，不要让用户多浪费一步；
让操作明确直接，除了公认的图标如 X 表示删除以外，不要使用含混不清的图标。
通过按钮实现首要操作，链接实现次要操作；
打开扩展的按钮要足够大，绝对不能小于8*8px
确保工具易于理解，容易定位，执行快捷，简单容易。
反例说明：一步可以完成的，不要分成两步
小的按钮不易让用户捕捉定位，增加交互难度

三、足不出户
刷新页面会打断用户的心流，避免每一步操作刷新一次页面，按照需要决定什么情况下让用户留在当前页面；
心流：最佳体验的定义：当人进入全神贯注的状态时，它会让你感觉到一切都水到渠成信手拈来，不费吹灰之力。
足不出户原理就是为创造连续视觉感知的心流最佳境界而服务的。
如何把用户留在当前页面上：
3.1 覆盖层 对话覆盖层 详情覆盖层 输入框覆盖层
优点：轻量，占资源少，显示便捷，易于控制表现等
反例：过度运用打扰用户心流，永远不要愚蠢的干扰用户行为。
白痴对话框，完全没必要的对话框。比如用户添加了图片，在页面上显示添加数量即可，如果是弹出层提示，则是不折不扣的白痴对话框。

详情覆盖层：鼠标激活的详情扩展覆盖层。
详情覆盖层引出的反模式：
3.1.1“捕鼠器”：不要让用户轻易地激活详情扩展，这样会显得页面太闹腾，用户会觉得到处放满了老鼠夹子，这是很糟糕的体验。一定要设置延迟。
3.1.2激活/禁用不对称：打开和关闭的方式不一样，令用户迷惑。
用户体验的对称原则：操作要对称，怎么来的怎么去。
3.1.3 过度炫耀 不要让用户等待你的动画，用户关心的只是要立即响应的内容。
3.1.4 悬停与遮挡 详情扩展要显示有意义的内容，并且尽量避免遮挡其他元素。

3.2利用嵌入层来扩展页面内容
最常见的形式：标签页（选项卡）
选项卡的最佳实践：
避免一个页面上使用多组标签页
将重要的内容放在第一个，因为许多用户不会点击其他选项
通过点击来激活标签页
如果其他标签的内容同样重要，也要必须谨慎的使用悬停激活（很容易引起反感）

3.3 虚拟页面
虚拟滚动 渐进加载
在数据量大和未知的情况下，要渐进的加载内容。
通过滚动加载新的内容。
虚拟分页，传送带等多种按需加载和无刷新加载形式能有效地将用户保留在当前页面上。
最佳实践：
及时反馈信息给用户，让用户明确当前状态；
缺点：基于AJAX方法的程序返回按钮不好用

四、提供邀请
易发现性是WEB界面设计的挑战之一。
再好的功能，用户发现不了等于零。
邀请是引导用户进入下一个交互层次的提醒和暗示，能告诉用户下一步操作是什么，改善功能的易发现性。

4.1静态邀请：
引导操作邀请 引导用户执行一个或者多个主要任务
文本邀请，交互式评级，引导操作按钮 都是引导操作邀请的实例.
注意事项：合理的处理邀请与内容直接的关系，做到既易于发现激活，又不影响内容展示以及页面的视觉外观。
白板邀请和未完成邀请：
给用户展现空白的内容或者未完成的项目，人的天性会促使他去完成。

4.2动态邀请
在交互过程的某个点上吸引用户，引导他们去完成操作。
悬停邀请，预期功能邀请，拖动邀请，推论邀请 和更多内容邀请
悬停邀请的最佳实践：
当操作不如内容重要时，可使用悬停邀请。
悬停邀请可使用光标变化，背景变换等方式表明邀请。

五、应用变换
    应用变换来增加沟通
    变化对人脑的作用，运动和变化能吸引人潜意识的注意力
    变换的作用：增加魅力，增进沟通；
    对大多数站点而言，传达信息才是变换的最核心目的，增加魅力是次要考虑。
    增加沟通：
    在视图变化时保持上下文

    解释刚刚发生了什么

    揭示对象之间的关系

    吸引用户的注意力

改善感知性能
在用户等待的时候提供进度条，提示用户系统还在运行而不是失去响应
  
扩展屏幕空间 等
变换的最佳实践：
变换越快，说明事件越重要
移动比颜色变化重要
主意对称性交互，消失在哪里，就要能从哪里打开
不要过度使用变化
花里胡哨的效果令人讨厌，只能干扰用户

六、及时反映

智能界面的特点是具有良好而的反应能力。

其他：

用户体验的常见误区、禁忌和反模式：
使用背景音乐或者声音，有声音的网页是最差的用户体验之一，不要强迫用户接受你的声音，断续的声音令人难以忍受。
滥用变换和新技术，过度的使用变化很容易导致捕鼠器的反模式，为了使用效果而使用效果，过度炫耀会引起反感

产品设计、UI设计、前端开发、后台开发人员在用户体验设计中的角色和任务：

产品设计：把握产品的交互流程，以一个用户的心流去体验产品，在策划中明确各个操作的细节，提供完整完全的策划，便于UI设计师完全的把握和理解WEB界面的各个层次需求。

UI设计：WEB界面设计已经不是单纯的界面设计，而是交互设计，需要根据产品策划提供的交互细节，考虑并设计WEB界面交互中的所有可能情况。
比如一个按钮，就不是一个简单的按钮，它至少要有三种状态：正常 禁用 激活
一个交互组件要有打开和关闭两种状态，这些都要考虑到，要有完整的，自成体系的UI设计。

前端开发：完成用户体验设计的具体实现。其中包括各个交互过程的心流控制，用户邀请，变换提示等。做好的静态文件应该模拟真实情况，具有完全的交互功能，作为用户体验的基本样板和参考。

后台开发：按照用户体验样板进行开发，利用AJAX等技术保证在操作中用户的心流不被打断，完整的还原具有实际功能的用户体验产品。

对称交互实例：


对称交互
运用变换扩展空间
运用变换改善感知，在动画中等待而不是失去响应
给用户明确的反馈