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