Yuying Wu

Light
Dark

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

October 30, 2012

交互设计模式

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

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

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

简化交互

足不出户

提供邀请

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

使用变换

即时反应

评论区


Yuying Wu
Yuying Wu 个人博客,文字、代码、照片,记录工作和生活.
你可以在这里关注我:RSSGithub