设计笔记－－技术限制出现的交互差错和应对办法
（大智 jack.lee 2007-6-4）

这是一个产品编辑界面，界面分成两个区域，左边是编辑区，右边资源区，用户在资源区选择图片，执行添加或替换操作即能把资源加载进编辑区。这种对照模式把左右两个区域的信息匹配起来，使用户非常直观的评估他的操作行为和结果。

这里要讨论的是右侧的交互设计，模式对用户意图的把握很清楚，即：先选择资源，然后执行添加操作。步骤也很简单：

1、在网格资源列表中浏览缩略图；
2、（眼睛选定某个图）单击鼠标左键
3、以缩略图左上角为坐标原点定位到x＝20，y＝-20的位置出现浮动面板，显示详图预览；并提供“添加”和“替换”功能按钮；
4、点击按钮执行相应的操作。

考虑到熟练用户不需要预览详图，快速添加的需要，if，双击鼠标左键，不出现浮动面板，直接添加图片，或替换当前的资源；

当编码人员把交互demo做出来，问题出现了，当用户在缩略图区域双击鼠标时，有时可以直接添加图片有时却是出现浮动面板，而添加不进来呢？那么就意味着“有时候”“双击＝单击” 这种反馈结果和用户企图之间的错位，使操作行为就变得不可信了。

问题处在哪里？后来经过反复的点击对比，终于发现问题的所在：

在图示红色的缩略图区域双击鼠标，系统接收到完整的双击事件，执行添加动作；在图示白色的浮动面板定位区域和缩略图的重叠区域双击鼠标，结果是一个戏剧性的系统反馈，系统首先在瞬间响应一个单击事件，立即打开浮动面板，然后，另一个瞬间单击，被浮动面板捕获，变成了一个无效点击。

把这样的产品给用户使用显然不行，怎么办？

把双击取消？那会损害熟练用户的利益；
把单击变成右键？会损害大多数不甚熟练用户的利益，而且把本应显而易见的功能“藏”到只作为辅助手段的右键中，明显有悖设计原则，另外，这样也会使用户习惯的左键单击无反馈，更加不行！

设计不变，要达到目的，还是得从技术上找应对之策，从技术分析上看，因为“热区”重叠才出现了这样的问题，单、双击可以共用热区，但是和浮动面板热区重叠，就会把双击“分割”成一个有效单击和一个无效单击。浮动面板功能在msn和yahoo message都有，为什么没有热区冲突，是因为它的浮动面板在主窗体之外。

msn和yahoo message略有差别：

msn打开浮动面板的单击热区和选择联系人单击热区不同；
yahoo打开浮动面板的单击热区和选择联系人的单击热区相同，单击联系人即选择联系人，同时打开面板；而且，不选择联系人，鼠标移入联系人热区，就能打开浮动面板；

我们不可能移开浮动面板，但是可以从单、双击的热区上找解决问题的办法：

把双击热区从重叠区域移开，图示白色图片编码区域定义为双击热区，就避免了上述问题，刚好也符合熟练用户执行快速操作时，以编码作为激发详图记忆的心理特点。

符合易用和技术限制的设计方案出来，这是一次成功的迭代，不仅满足了技术限制，而且使设计方案更加成熟，更利于区别熟练用户和普通用户，以及他们的操作习惯。

但是，修改方案开发人员来说并不是“福音” 他不仅需要另外定义双击热区，还要在用户鼠标移入双击热区时，给予功能操作暗示进行编码，这无疑增加了他的开发量，开发人员其实是不大情愿的。他觉得，只要双击功能实现了，又解决了技术上的冲突，要“热区视觉暗示”干什么？因为他不理解用户，假如没有视觉暗示与用户意图相匹配，那么，即使实现了功能，那也是被隐藏的。需要用户以瞎子摸象的交互方式操作显然是失败的。