读书笔记
这篇书评可能有关键情节透露
书里总共介绍了6个交互设计的原则,依次是直接了当、简化交互、足不出户、提供邀请、巧用变换、即时反馈
(有图版http://blog.sina.com.cn/s/blog_7b9385b00101jy5l.html)
1直截了当:从哪里输出就从哪里输入
1.1页内编辑
注意易发现性
如果易读性比易编辑性更重要,则应该在用户与内容交互时在给出可以编辑的提示,否则,应该隐藏相应提示
注意易访问性
为行内编辑功能提供备用方案,即允许用户在另外一个页面中编辑,也可以增进易访问性。
在多字段行内编辑的情况下,显示的内容与编辑时所需要的字段会存在比较大的差异。理想情况下,应该把显示和编辑两个模式完全连续地混合在一起。把编辑表单加载到页面中,势必会影响页面中原有的内容。要从视觉上消除这种影响,可以巧妙地利用动画。Backpackit采用的方式就是在淡出显示视图的同时,淡入编辑视图。
覆盖层编辑
如果有必要占用专门的屏幕空间放置编辑窗格(需要用户更多地关注被编辑的项),而且页面的上下文对编辑任务也不重要,就可以考虑使用覆盖层编辑。
表格编辑
不要轻易通过鼠标悬停启动单元格编辑。否则,不仅会让用户有进入“地雷阵”之感,更会干扰到正常的界面交互。
应该立即切换到编辑模式,让用户在编辑之前等待切换动画没有任何意义。
进入与退出编辑模式通常应该采用同样的交互风格。这样才有助于发现相反的操作,而这就是所谓的对称性交互原则。
1.2利用拖放:趣味瞬间
用户怎么知道可以拖动?
拖放对象的目的是什么?
在哪里可以或不可以放置拖动的对象?
通过什么视觉元素来表示拖动能力?
拖动期间,怎么样表示有效和无效的放置目标?
是否允许用户拖动实际的对象?
还是只允许用户拖动实际对象的幻影?
还是拖动一个小缩略图?
整个拖动与放置期间,要对用户给出哪些视觉反馈?
1.3直接选择。注意显示选择了几项
2简化交互
2.1上下文工具(放在页面内容上下文中的相关工具)
如果某个操作非常重要,就采用实时可见工具,否则使用悬停即现工具,必须综合考虑视觉干扰和易发现性
在显示上下文工具时,要保证页面各个部分的布局不变
尽量使用熟悉的方式帮助用户发现隐藏工具
2.2级联递进工具
如果不想基于鼠标悬停显示上下文工具,可以使用级联递进工具
在可能的情况下,最好避免使用级联。为了使用下一级菜单而执行过多鼠标操作,很容易导致用户反感
尽可能把操作放在距离激活点最近的位置上
3足不出户:心流
3.1覆盖层
在激活后,不要使用长时间动画或效果延迟显示详情覆盖层。如果单击对象会调用其他操作,则使用悬停。在yahoo news中,单击链接会打开新闻页面;而悬停则可以为用户提供快速预览
如果想让用户通过更明确的方式获取更多信息,可以使用单击。
3.2嵌入层
使用嵌入层既可以调整页面,又可以同时看到结果
为了消除在页面中嵌入的突兀感,可以使用快速的滑动动画
使用嵌入层来联系触发它的元素和对话框
使用嵌入层显示不太重要、不属于页面主流程的工具
3.3交互式单页
3.4嵌入式部件
4提供邀请
悬停邀请、预期功能邀请、拖放邀请、推论邀请
5巧用变换
1加亮和减暗2扩展和折叠3自恢复式淡出4动画效果
减少一半规则
为避免过分强化加亮效果或计时变换,应该把效果的值减少一半
因为人们很容易为淋漓尽致地表现某种动画而沉迷其中,结果往往会忽略想要得到的整体交互效果。
6即时反应
6.1查询模式
自动完成、实时建议、实时搜索、微调搜索
对自动完成而言,须直接给一个值,建议就是可能的匹配项,可以直接用TAB选取。对实时建议来说,则须要尽力给出适当的查寻条件,而不应该直接给予匹配值,而给出每个建议的上下文。
6.2反馈模式
实时预览、渐进展现、进度指示、定时刷新
(有图版http://blog.sina.com.cn/s/blog_7b9385b00101jy5l.html)
1直截了当:从哪里输出就从哪里输入
1.1页内编辑
注意易发现性
如果易读性比易编辑性更重要,则应该在用户与内容交互时在给出可以编辑的提示,否则,应该隐藏相应提示
注意易访问性
为行内编辑功能提供备用方案,即允许用户在另外一个页面中编辑,也可以增进易访问性。
在多字段行内编辑的情况下,显示的内容与编辑时所需要的字段会存在比较大的差异。理想情况下,应该把显示和编辑两个模式完全连续地混合在一起。把编辑表单加载到页面中,势必会影响页面中原有的内容。要从视觉上消除这种影响,可以巧妙地利用动画。Backpackit采用的方式就是在淡出显示视图的同时,淡入编辑视图。
覆盖层编辑
如果有必要占用专门的屏幕空间放置编辑窗格(需要用户更多地关注被编辑的项),而且页面的上下文对编辑任务也不重要,就可以考虑使用覆盖层编辑。
表格编辑
不要轻易通过鼠标悬停启动单元格编辑。否则,不仅会让用户有进入“地雷阵”之感,更会干扰到正常的界面交互。
应该立即切换到编辑模式,让用户在编辑之前等待切换动画没有任何意义。
进入与退出编辑模式通常应该采用同样的交互风格。这样才有助于发现相反的操作,而这就是所谓的对称性交互原则。
1.2利用拖放:趣味瞬间
用户怎么知道可以拖动?
拖放对象的目的是什么?
在哪里可以或不可以放置拖动的对象?
通过什么视觉元素来表示拖动能力?
拖动期间,怎么样表示有效和无效的放置目标?
是否允许用户拖动实际的对象?
还是只允许用户拖动实际对象的幻影?
还是拖动一个小缩略图?
整个拖动与放置期间,要对用户给出哪些视觉反馈?
1.3直接选择。注意显示选择了几项
2简化交互
2.1上下文工具(放在页面内容上下文中的相关工具)
如果某个操作非常重要,就采用实时可见工具,否则使用悬停即现工具,必须综合考虑视觉干扰和易发现性
在显示上下文工具时,要保证页面各个部分的布局不变
尽量使用熟悉的方式帮助用户发现隐藏工具
2.2级联递进工具
如果不想基于鼠标悬停显示上下文工具,可以使用级联递进工具
在可能的情况下,最好避免使用级联。为了使用下一级菜单而执行过多鼠标操作,很容易导致用户反感
尽可能把操作放在距离激活点最近的位置上
3足不出户:心流
3.1覆盖层
在激活后,不要使用长时间动画或效果延迟显示详情覆盖层。如果单击对象会调用其他操作,则使用悬停。在yahoo news中,单击链接会打开新闻页面;而悬停则可以为用户提供快速预览
如果想让用户通过更明确的方式获取更多信息,可以使用单击。
3.2嵌入层
使用嵌入层既可以调整页面,又可以同时看到结果
为了消除在页面中嵌入的突兀感,可以使用快速的滑动动画
使用嵌入层来联系触发它的元素和对话框
使用嵌入层显示不太重要、不属于页面主流程的工具
3.3交互式单页
3.4嵌入式部件
4提供邀请
悬停邀请、预期功能邀请、拖放邀请、推论邀请
5巧用变换
1加亮和减暗2扩展和折叠3自恢复式淡出4动画效果
减少一半规则
为避免过分强化加亮效果或计时变换,应该把效果的值减少一半
因为人们很容易为淋漓尽致地表现某种动画而沉迷其中,结果往往会忽略想要得到的整体交互效果。
6即时反应
6.1查询模式
自动完成、实时建议、实时搜索、微调搜索
对自动完成而言,须直接给一个值,建议就是可能的匹配项,可以直接用TAB选取。对实时建议来说,则须要尽力给出适当的查寻条件,而不应该直接给予匹配值,而给出每个建议的上下文。
6.2反馈模式
实时预览、渐进展现、进度指示、定时刷新