Yuying Wu

《WEB界面设计》书摘:设计界面前来看一眼,UED很赞

October 30, 2012

交互设计模式

直截了当(哪里输出,就要允许在哪里输入)

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

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

简化交互

足不出户

提供邀请

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

使用变换

即时反应