Web界面设计

1. 前言
   1. 可以尝试在业余时间考虑如何改进市面上的一些产品，做为一种练习；
   2. 本书的内容补充与更新: http://designingwebinterfaces.com
   3. 交互设计模式库: http://www.welie.com
2. 原理一：直截了当（永远在脑袋中思考现在使用的方法是直截了当的吗？有没有更加直接的办法？）
   1. 页面编辑：不离开页面直接编辑（行内编辑：可以不脱离上下文）
      1. 单字段行内编辑：
         1. 易发现性；悬停邀请；编辑按钮始终可见（如果易读性更重要，则使用悬停）；
         2. 易访问性：针对残疾人士，提供备用方案；
      2. 多字段行内编辑
         1. 如果改动一个字段后，必然涉及改动其他字段，则采用本模式更优，因为这样可以降低用户漏编辑的可能性；
         2. 可能占用更多空间，尽量保持显示与编辑两种状态的大小相同，这样可以减少页面抖动；
         3. 保持“显示”与“编辑”模式之间的变换平滑而连续；
      3. 覆盖层编辑：轻量级悬浮层
         1. 当上下文不重要，且编辑区域需要占据较大的空间时考虑使用；
         2. 本模式也可以降低意外修改的可能性；
         3. 不要针对多个字段创建多个覆盖层；考虑使用一个覆盖层编辑一系列元素（例如JIRA的编辑操作）；
         4. 空间允许的情况下，通过“保存”与“取消”按钮来完成或撤销编辑（按钮更具有仪式感，给用户带来更多的确定性）；
         5. 如果可能，允许用户拖动覆盖层，以便看到被覆盖层遮住的内容；
      4. 表格编辑
         1. 易读性优于易发现性；
         2. 通过单击启动编辑，避免使用悬停，不然一移动鼠标就会带来阅读干扰（捕鼠器）；
         3. 相对显示状态，编辑状态占据更大的空间，以示与“显示”状态的区别；
      5. 群组编辑
         1. 用一个开关控制开启和关闭编辑状态；易读性与易发现性之间的一种平衡；
      6. 模块配置
         1. 允许用户直接配置模式（例如控制模块内显示的内容条数）；
         2. 当配置是一个主要功能时使用；
         3. 如果显示内容（易读性）很重要，考虑以全局的方式开启/关闭模块配置；
   2. 利用拖放
      1. 拖放模块
         1. 如果需要清晰显示预览效果，则使用占位符；
         2. 如果需要尽量避免页面抖动，则使用插入条；
         3. 使用被覆盖模块的中心点来确定放置位置；
         4. 半透明被拖动对象；
         5. 如果使用缩略图来表示被拖动的模块，则使用插入条；
      2. 拖放列表
         1. 如果可能，尽量使用占位符实时显示拖动效果；
         2. 使用鼠标来定位拖动的位置；（如果能实时显示拖动后的预览效果，本点我个人倒是觉得不太重要；当然，如果偏移太厉害，会给用户带来排版不准确的坏印象）
         3. 如果响应速度很重要，则考虑使用插入条，因为插入条涉及的计算量比较小；
         4. 由于拖动的易发现性不好，所以应提供备用替代方案；
         5. 在用户使用替代方案时，考虑如何置入提示，让用户知道有拖放功能；
         6. 拖动比较适合在一屏内的有限区域范围内使用，如果是多页长列表，则应考虑辅助方案，如按字母顺序定位，比例滚动条标尺定位，全景缩略+放大镜定位等；
      3. 拖放对象
         1. 如果对象间的关系可以形象化，则使用拖动来配置关系，是非常有效的方案；
         2. 如果对象间的视觉关系很复杂，则使用插入条来表示放置位置，降低拖动带来的视觉干扰（想起了salesforce的一个反模式）；
         3. 对于父子关系，突出显示父对象，也可以表示放置位置（想起了iPhone播放图标进入某个文件夹中）；
         4. 悬停时显示提示，提高可发现性；
         5. 当对象被拖动3像素，或者鼠标按下超过0.5秒时，启动拖动；
         6. 与鼠标同步显示拖动对象（可以考虑右偏移+半透明，来解决可能遮住目标位置的问题）；
      4. 拖放操作
         1. 不要对拖动进行过度设计，一来其易发现性不好，二来其操作路线并不短，只是形象化方面比较突出，因此能简单化的绝对不要复杂化（例如“点赞”“收藏”等功能）；
         2. 记得提供可替代方案；
         3. 悬停时提供明确邀请提示；甚至在页面上放置一个说明也未尝不可，例如上传图片的操作；
      5. 拖放集合
         1. 将某些相关项集中保存到一个列表中，比如将商品加入购物车（感觉一个“加入购物车”的按钮的操作路径更短更快）；
         2. 提供可替代的方式；
         3. 当拖动启动时，突出显示可放置拖动项的区域；
         4. 提供备用提示，以便让用户发现可以使用拖动功能；
3. 原理二：简化交互
   1. 上下文中的工具
      1. 内容即是界面，无需划定功能区，每个对象都可以直接操作；
      2. 费茨定律：到达目标的时间，是到达目标的距离和目标大小的函数；（因此，为了降低到达时间，应考虑缩短到达的距离，以及增加目标的大小）；
      3. 几种方式：
         1. 实时可见工具
            1. 优点：突出显示，明确邀请；易发现性好；缺点：页面可能比较拥挤；
            2. 适用场景：如果某个操作非常重要，则把它直接放在界面中（例如“赞”）；
            3. 注意事项：保持视觉干扰最小化，保持可见项目最少化；
            4. 通过按钮实现主要操作，通过链接实现次要操作；（前者目标更大，更吸引注意力）
         2. 悬停即现工具
            1. 可以减少视觉干扰；易发现性稍弱，故应尽量使用熟悉的方式来帮忙用户发现隐藏的工具（例如下拉箭头意味着更多功能，超链接意味着执行操作等）；
            2. 使用覆盖层显示附加信息或工具要额外小心，因为覆盖层可能会妨碍正常的导航或遮挡住重要的信息（如有可能，考虑使用嵌入层，或者在排版上预留空间用显示初始隐藏的工具链接）；
            3. 工具覆盖层在悬停时应立即激活，附加信息可以有0.5秒延迟，因为前者是操作，用户希望最短时间进行；后者是一种内容补充，用户不一定想知道，可能只是误触；
            4. 不要让用户为了搞清楚工具的含义而悬停鼠标（因此如果空间不是非常有限，或者图标非常不言而喻，则尽量使用文字来表示工具用途）；
            5. 保证页面布局不被悬停显示干扰出现抖动，因为这样会分散用户的注意力；
         3. 开关显示工具
            1. 如果操作不是常用主要功能，但又想为用户提供直接操作页面对象的便利时，可以使用一个开关来打开和关闭编辑；
            2. 尽量保持打开和关闭的对称性；
            3. 编辑和非编辑状态的过渡尽可能平滑稳定；即开关开启后，用户操作或不操作均可，不会困于其中导致必须操作；
         4. 级联递进工具
            1. 尽量将常用的操作，放在激活位置最近的地方，例如如果是放射圆盘，对于播放器，可以将播放按钮放在中心；
            2. 永远不要让目标太小，目标足够大才容易被注意到，也容易操作；
            3. 对于重要的操作按钮，可以提升其在级联菜单中的层次；
            4. 一般来说，最好避免使用级联，因为让用户执行过多的鼠标操作容易带来反感，而且用户也会感觉复杂度提升；
         5. 二级菜单
            1. 类似桌面程序的右键菜单，但这种模式的易发现性很差，因此不要通过它显示除备用命令以外的操作；
            2. 好处是可以应付批量编辑；
            3. 不要在与传统界面类似的场景下使用二级菜单，因此可能会与浏览器和用户习惯相冲突；
4. 原理三：足不出户：为创造连续视觉感知的心流最高境界服务；
   1. 覆盖层
      1. 不要使用老式的弹出窗口，因为无论从速度、资源、外观等来看，都比不上覆盖层好用；
      2. 对话框覆盖层
         1. 使用亮盒效果强调模态特性或吸引用户的注意力；
         2. 避免使用不必要的对话框，以防打断用户的流程；（若非必要，慎用）
         3. 在页内交互可以满足的情况下，不要使用覆盖层；
         4. 尽量不要使用JS的警告框，因为各浏览器的样式不统一；
      3. 详情覆盖层
         1. 使用详情覆盖层显示详细信息，避免用户打开新的页面；
         2. 悬停激活的场景，建议有0.5秒的延迟，避免地雷阵；
         3. 悬停激活，移开关闭（开启与关闭的对称性）；
         4. 如果想确认用户更明确的意图后再展示详情页，则可以使用点击，但需要显示点击的入口，例如一个“更多内容”的链接；
      4. 输入覆盖层
         1. 使用输入覆盖层简化表单的外观，帮助信息只在覆盖层中显示；
         2. 表单字段与覆盖层中的字段，可以加以区分，例如加粗的外框；
         3. 用户点击任何其他地方都可以退出覆盖层，同时捕捉TAB事件；
   2. 嵌入层：好处是可以保持上下文，像打开一个抽屉一样，然后用完还可以关上；
      1. 对话框嵌入层
         1. 可以用来实现页面自定义，这样既可以调整页面，又可以马上看到结果；
         2. 建议使用快速的滑动动画，免得打开太生硬；
         3. 一般用来显示一些不太重要的，不属于页面主流程的工具或操作（如果是主要的操作，则应该放在外面，方便快速点击，提高易发现性）；
      2. 列表嵌入层
         1. 列表是使用嵌入层的理想场所；
         2. 如果列表项的其他项作为上下文有助于用户理解可见的嵌入层，则应该使用列表嵌入层（如果组合的搜索条件）；
         3. 可以避免用户打开新页面或新覆盖层来查看细节信息；
         4. 如果空间大小有限，则每次只展开一项，每当有新一项打开时，缩起隐藏其他项；
         5. 在显示并列性内容时，可以一次打开多个项（例如搜索条件的筛选）；
      3. 详情嵌入层
         1. 可以在上下文中显示附加信息，且不会遮挡其他信息；
         2. 可以避免悬停与遮挡的反模式；
         3. 关闭嵌入层的操作要简单（考虑对称方式）；
   3. 标签页
      1. 可以用标签页在当前页面中，显示更多的附加信息；
      2. 避免在一个页面中使用多组标签页；如果确实需要使用，则内容区域在视觉上要有所区分；
      3. 最重要的内容放在第一项，因为其他项打开的机率会逐渐减小；
      4. 一般通过鼠标单点来激活TAB标签（有时候意外划过，导致启动TAB会让人感觉意外，不过如果是延迟0.5秒呢？）；除非其他标签的内容很重要，才使用悬停，帮助用户更快的发现其他重要的内容；
   4. 虚拟页面
      1. 虚拟滚动
         1. 适合显示搜索结果，不太适合显示邮件或者任务，因为前者用户不需要查看所有结果，但后者一般用户需要查看到底；
         2. 保证用户随时知道自己的位置，告诉他们滚动后呈现的数据范围；
         3. 在用户等待数据加载期间给出反馈；
         4. 可以既定的数据集，可以创造一个完全加载状态的假象（有利于滚动条的定位和暗示）；
         5. 对于搜索结果，可以随着滚动持续扩展虚拟空间
         6. 为用户提供好的往返导航的体验，比如隐喻有限的空间，方便其操作定位；
      2. 内置分页
         1. 内置分页可以呈现自然的“分块”效果；同时也能保证切换页面时的平滑流畅的体验；
         2. 正确处理“后退”按钮，让后退按钮对分页有效；（是否可以用局部的上一页与下一页按钮？）
         3. 只刷新“虚拟页面”，则不是整个页面；
         4. 以渐进加载的方式，向虚拟空间中加载更多的内容，而不是一次加载，不然当结果很大时，会很慢；
      3. 滚动分页：传送带
         1. 特点：以动画方式滚进视图；非常适合显示有视觉差异的内容，尤其是有图片的类型；（如果没有差异，用户不能立即分辨出内容之间的区别，显得单调无聊，浏览效率也比较低，此时用列表浏览可能更好）
         2. 一般来说，传送带左端的内容优先级更高，用户更经常访问，右端的访问概率逐渐降低；故传送带适合有显示优先级的内容；
         3. 如果要显示的内容很多，需要用户浏览，则传送带的浏览效果较低，并不方便；
         4. 一般内容要够大，内容间的留白也要大一些，以便区分；
         5. 将往返箭头放在一起虽然会方便操作，但不容易被发现，因为用户的心理预期经常是放在两端；
      4. 虚拟摇摄
         1. 可以作为滚动无穷大的2D画面的替代手段；（昨晚在TED看见了一个新式的图片浏览技术，即是用摇摄的办法；不过其最牛逼之处还在于将集合同一事物的不同用户的图片数据库，生成浏览集合拼贴）
         2. 尽量在摇摄中加入惯性，这样可以提高浏览效果，也更加接近现实效果；
      5. 伸缩式用户界面
         1. 通过虚拟的3D空间（增加深度一轴），来扩展显示更多的内容；
         2. 在移动画面时，可以考虑使用虚拟摇摄，例如谷歌地图
      6. 分页与滚动
         1. 如果内容实际上具有连续性，则使用滚动会比例好；
         2. 如果有批量操作功能，则滚动会比分页好，除非增加一个临时空间来存放（但不好处理全选后的滚动场景）；
         3. 对于临时数据，如搜索结果，则分页比较好，因为越后面的结果相关性越低，查看必要性越弱；
   5. 流程处理
      1. 魔法原理：一个摆脱技术驱动的技巧，问自己一个问题“能否考虑通过某种魔法来帮助用户快速神奇的完成任务？”（通过设计隐藏复杂性）；
      2. 交互式单页、嵌入式部件
         1. 将多个过程缩减在一页中处理，简化了步骤，例如淘宝购物的“颜色”“尺码”选择（实时显示各种有效选项）；
         2. 加快了用户的决策速度；
         3. 可以在上下文中显示预览；
      3. 对话框覆盖层
         1. 可以将多个步骤汇集到页面的上下文中；用户会感觉比使用多个页面更轻松；
         2. 亮盒效果有助于用户集中注意力；显示步骤进度，让用户有进度预期；由易入难，避免一开始吓跑了用户；
   6. 配置程序
      1. 即时反馈：让用户可以看到选择后的效果（感觉跟对话框嵌入层有点像）；
   7. 静态单页
      1. 如果过程比较复杂，可以考虑使用多页流程；如果步骤较少较简单，则应考虑使用静态单页（可以考虑渐进展示）；
      2. 使用视觉技巧减少用户心理上的步骤数（例如通过颜色对步骤二次分组）；
      3. 对用户当前的步骤及所剩步骤给出提示；
      4. 尽可能汇集默认选项，以简单整个流程；
      5. 把最简单的操作放在多步流程的前面；
5. 原理四：提供邀请
   1. 邀请是引导用户进入下一个交互层次的提醒和暗示；
   2. 静态邀请
      1. 引导操作邀请
         1. 针对主要操作使用；
         2. 针对简单的1-2-3步骤使用；
         3. 把引导操作的区域设计得容易吸引用户注意力，但不干扰整个页面的视觉外观；
         4. 可以利用空白区域来引导用户操作；
         5. 可以利用看起来未完成的区域引导用户操作（但用户怎么知道它是未完成的呢？嗯，是个挑战）
      2. 漫游探索邀请
         1. 在重新设计站点或发布新站点，需要向用户介绍一系列新功能时使用；
         2. 尽可能密切漫游探索邀请与站点本身的联系（如果没有联系，干嘛出现？）
         3. 保持简明扼要，使其容易退出且容易重新启动；
         4. 不要指望通过它解决界面本身存在的问题（使用前记得先反省）；
         5. 保持漫游过程简单；
   3. 动态邀请
      1. 悬停邀请
         1. 当操作不如内容重要且需要操持界面整洁时使用；
         2. 可以通过改变光标、背景、显示工具提示等共同配合表明所邀请的操作；
         3. 在悬停邀请期间，尽量为用户提供单击后产生结果的预览；
         4. 在交互的不同阶段，尽量使用一些用户熟悉的元素，以助于用户的理解（如按钮、链接、下拉箭头和通用图标）；
      2. 预期功能邀请
         1. 把邀请安排在适当的上下文中，特别是要靠近交互的主体；
      3. 拖放邀请
         1. 拖放期间，尽可能利用多个趣味瞬间确保用户理解每一次邀请；
         2. 在位于可拖动区域时，应该改变光标形状；
         3. 为用户拖动明确提供一个可以抓握的空间；
      4. 推论邀请
         1. 类似代码自动补全；
         2. Sketchup的下一步功能提示；
      5. 更多内容邀请
         1. 可以利用悬停提示更多内容的存在，同时显示少量更多的内容；
6. 原理五：巧用变换
   1. 把动画加入到应用程序中必须有一个理由，滥用反而会带来干扰；
   2. 变换模式
      1. 加亮和减暗，适用情形如下：
         1. 吸引用户注意力至界面中某一特定的部位；
         2. 提醒用户某个对象正处于交互的状态；
         3. 通过暗化减少界面中干扰视觉的元素；
         4. 表示界面中某一部分还未就绪，不能响应操作；
      2. 扩展与折叠，适用情形如下：
         1. 处理大量的内容或模块；
         2. 有效利用屏幕空间；
         3. 进一步展示列表项的细节；
         4. 辅助编辑内容
      3. 自恢复式淡出（删除-缺口-闭合），适用情形：
         1. 从列表或风格中删除一个对象；
         2. 形象的表示移动过程，哪里来；
         3. 表示拖动操作完成（即放下的对象从旧位置成功移到了新位置）
      4. 动画效果（运动的重量与加速度）
         1. 减少一半的规则（定义变换效果后，减少一半效果值会更加理想）；
         2. 如果直接移动对象到不同位置上让人容易困惑，则考虑使用动画展现过程；
      5. 聚光灯效果
         1. 表明某个对象的状态已经改变或已经更新为新的信息；（方便用户预览修改的效果）
   3. 变换的目的
      1. 增添魅力
         1. 让界面变化看起来更加优雅；
      2. 增进沟通
         1. 在视图变化时保持上下文
         2. 解释刚刚发生了什么
         3. 提示对象之间的关系
         4. 吸引用户的注意力
         5. 缩短时间感知
         6. 创建虚拟空间的假象
      3. 最佳实践
         1. 变化越快，表明事件越重要；
         2. 快速移动看起来比快速的颜色变化更重要；
         3. 朝向用户移动看起来比远离用户移动更重要；
         4. 非常慢的变化可以用在不干扰用户注意力的场景；
         5. 移动可以表达对象的位置有变化（听起来像是废话）；
         6. 正常情况下，应该对称性设计；
         7. 一定不要过渡使用变换（滥用效果的广告即是例证，变换应该是对用户操作后的反馈）；
         8. 尽量不要只依靠变换来表达界面的变化（那还有什么其他方法呢？）
         9. 让变换发生在用户视力的焦点区附近（这样比较容易引起用户察觉）；
         10. 花里胡哨的效果容易适得其反，干扰用户；
7. 原理六：即时反应
   1. 查询模式
      1. 自动完成
         1. 智能的体现，减轻用户的输入负担，辅助用户更快的完成输入；
         2. 问题：多长时间内给出反馈？（我觉得取决于待搜索选项的多少，如果很多，则在用户停止输入时，再反馈；如果很少，则可以每输入一个字符就马上给出反馈）
         3. 问题：如何选项选项？当用户输入时，手是放在键盘上面的，所以应该支持快捷键，例如回车或者TAB等，减少用户再转移到鼠标操作；
         4. 问题：如何用户的输入涉及多个文本框，则应该根据逻辑关系进行配合，尽量减少用户的操作负担；
      2. 实时建议
         1. 针对大选项的情况，通过算法给出建议，从大概率上减少用户的输入负担
         2. 问题：应避免无效选项分散用户注意力，好的算法很重要；
         3. 由于猜不准用户的真实想法，所以实时建议应该做为辅助选项，而不是像“自动完成”做为直接的搜索关键词；
         4. 提供建议时，应该考虑给出上下文，这样用户易于理解建议的合理性；
         5. 由于面向未知，所以应在用户停止输入后，再显示建议，不然估计服务器吃不消；
      3. 实时搜索
         1. 利用用户输入关键词的时间，从服务器获得结果并给予展示，相对常规搜索，某些程度上节省了时间，因为用户有可能输入到一半的时候，就已经发现选项，不需要输入全部的关键词；
         2. 实时搜索的结果应该有摘要或部分内容预览，这样有利于用户判断结果是否自己想要的内容；
         3. 注意：提供太多的搜索结果，也会一定程度分散用户的注意力；
      4. 微调搜索
         1. 通过侧边栏显示多种筛选选项，来调整搜索结果的范围（个人经验证明，此种方式效果甚好，但也不一定在侧边，现在很多购物网站如淘宝京东是放在上边）
         2. 避免刷新整个页面，而应迅速显示筛选后的结果（此处估计需要用到缓存的办法）（同时考虑使用动画，视觉上面减少等待时间，过渡也更加平滑）
         3. 交互式单页也算是一种微调；
         4. 具有多种特征的商品，适合使用微调搜索；
         5. 适当延迟再触发搜索，因为有可能用户会勾选多个微调条件；
   2. 反馈模式
      1. 实时预览
         1. 可以有效预防用户犯错，如果出现错误，在第一时间即可以知道并修正（用户在这个过程中也会更有参与感）；
         2. 把预览放在操作的上下文中；
         3. 尽量让用户看到操作后对象的实时变化；
         4. 实时预览应避免页面切换；
         5. 预览的触发：最好能“每个字符”，其次“焦点离开”，再次“明确的邀请操作的按钮”；
      2. 渐进展现
         1. 从视觉上减少复杂度，避免用户被太多内容吓到，产生心理负担；
         2. 在必要时，才展示出帮助信息，界面更加清爽简洁；
         3. 可以用来引导用户完成较长的流程；
      3. 进度指示
         1. 从视觉上减少用户的时间感知；
         2. 使用各种指示器：进度条、百分比、菊花等有趣的循环动画；（我特别喜欢将内容分享至Evernote进行收藏的动画）
         3. 指示器应该放在发生操作的位置旁边；例如，焦点是输入框，则在输入框旁边显示；如果焦点是操作的结果，则在显示结果的区域显示；
         4. 尽可能用指示器显示实际的进度（微信的骗人的进度条也行），如果不行，才考虑使用循环动画；
      4. 定时刷新
         1. 适用持续动态有新内容的场景，比如新闻、社交状态等，目的是为了保持内容的新鲜；
         2. 但需要考虑易读性，所以也不能太频繁；而且当有新内容进入时，应该考虑使用动画让其显得不突兀；
         3. 也可以考虑为用户提供控制刷新的手段，例如邮件中的“收信”、“刷新”等按钮；