交互设计模式

直截了当（哪里输出，就要允许在哪里输入）

example：flickr 图片名字编辑，单击图片名，即可更改，有 save OR cancel 支持

• 页内编辑（直接编辑内容：用户不会离开页面，在页面内直接编辑完成）
        ○ 单字段行内编辑
                § 易发现性
                § 易访问性
                § 易编辑性
        ○ 多行字段内编辑
        ○ 覆盖层编辑
                § 满足更多、更复杂的编辑要求
        ○ 表格编辑
        ○ 群组编辑
        ○ 模块配置
        ○ Advice：
                • 如果页面中有一个字段需要编辑，应该优先使用单字段行内编辑
                • 对于多个字段或更复杂的编辑，可以使用多字段行内编辑
                • 如果编辑时的上下文无关紧要，或者用户在编辑时应该全身关注，则使用覆盖层编辑
                • 对于网格编辑，应该遵循表格编辑模式
                • 在处理页面中的多个项时，群组编辑是平衡视觉干扰与易发现性的有效方案
                • 如果想让用户直接配置模式，则应该使用模块配置模式
• 利用拖放（使用鼠标直接移动对象）
        ○ 用户怎么知道可以拖动？
                • 页面加载
                • 鼠标悬停
                • 鼠标按下
                • 拖动启动（通常标准是移动3px）
                • 拖动离开原始位置
                • 拖动重新进入原始位置
                • 拖动进入有效目标
                • 拖动退出有效目标
                • 拖动进入无效目标
                • 拖动进入非特定目标
                • 拖动悬停于有效目标
                • 拖动悬停于无效目标
                • 放置被接受
                • 放置被拒绝
                • 放置在父容器上
        ○ 拖放对象的目的是什么？（要达成最佳的拖动体验，应该通过被遮住模块的中心点位置来确定把被拖动模块放在何处）
                • 拖放模块
                        □ 占位符目标
                        □ 中心点边界
                        □ 全尺寸模块拖动
                        □ 幻影呈现
                • 拖放列表
                • 拖放对象
                        □ 插入目标来表示放置位置
                        □ 对于父子关系，凸显父容器表明放置位置
                        □ 对象被拖动3px或者鼠标按下超过0.5秒时启动拖动
                        □ 与光标同步直接定位被拖动的对象
                        □ 鼠标悬停在可以拖动的对象上时，要通过改变光标来表明可以拖动
                • 拖放操作
                        □ 提供backup方案，如果用户不拖放，怎么办
                • 拖放集合
        ○ 在哪里可以或不可以放置拖动的对象？
        ○ 通过什么视觉元素来表示拖动能力？
        ○ 拖动期间，怎样表示有效和无效的放置目标？
        ○ 是否允许用户拖动实际的对象？
        ○ 还是只允许用户拖动实际对象的幻影（ghost）？
        ○ 还是拖动一个小缩略图？
        ○ 整个拖动与放置期间，要对用户给出哪些视觉反馈？
• 直接选择（通过操作直接选择对象）

简化交互

足不出户

提供邀请

• 静态邀请
        ○ 引导操作邀请
        ○ 漫游探索邀请
                • 对话框覆盖层引导

使用变换

即时反应