技术限制下交互差错及应对-设计学院设计理论 -
把设计无限加入收藏夹 繁体中文
设计欣赏 设计理论 Photoshop教程 Imageready教程 Illustrator教程 CorelDraw教程 FLASH教程 Fireworks教程 FreeHand教程 Dreamweaver教程 FrontPage教程 CSS教程 3DSMAX教程 AutoCAD教程 Maya教程 swift3d教程 Painter教程 Authorware教程 Director教程 Acrobat教程 Poser教程 数据库 服务器教程 网络安全 站长专栏 网页编程
当前位置:设计学院首页 >> 设计理论 >> 技术限制下交互差错及应对

技术限制下交互差错及应对

简介:原文:http://hi.baidu.com/interaction%5Fdesign/blog/item/824216f5339e4524bc3109aa.html 这是一个产品编辑界面,界面分成两个区域,左边是编辑区,右边资源区,用户在资源区选择图片,执行添加或替换操作即能...
作者:  来源:  浏览次数:991  2006-08-26 17:34:14

原文:
http://hi.baidu.com/interaction%5Fdesign/blog/item/824216f5339e4524bc3109aa.html

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

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

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

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

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

问题处在哪里?后来经过反复的点击对比,终于发现问题的所在:

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

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

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

通常,在一个产品中为相似功能提供不一致的设计,是由于不同部分有不同的负责人,没有规范。每个人都按照自己的意愿去处理用户界面。当然,也存在只有一个人负责开发,却没能注意到产品在不同部分的相似内容,未能遵循一致性原则。

什么是一致性原则呢?
一致性原则分为四个方面:审美一致、功能一致、内部一致和外部一致。

审美一致
风格和外观一致。审美一致增强识别度,传递相关组成部分信息,引发情感期待。
如标识、字体、色彩组合。

功能一致
意义和行为一致。功能一致人们能积极利用现有知识,使产品更易学易用。
如带下划线的文字即可点。

内部一致
与系统内的其他组成部分保持一致。内部一致建立起产品与用户之间的信任。在任何逻辑分组里,组成部分都应该在审美和功能上保持一致。
例如网站中的icon系统。

外部一致
与同一环境中的其他系统保持一致。外部一致把一致的好处延伸到多个独立系统,但不同的系统很少遵循共同的设计标准,因此很难达到。
如网站的后台发布与前台系统。

网络产品设计中避免违规的方法:

  1. 产品开发之前建立概念模型,详细分析用户的操作对象。概念模型可以详了解产品提供给用户的基本操作,发现功能之间的相似性。也有利于后期的升级。
  2. 加强负责人之间在开发新产品和产品升级之前的沟通。
  3. 建立规范系统,由PM或UI设计师对项目进行监督。
  4. 如没有企业自己的规范尽量先采用通用的设计标准。

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

msn和yahoo message略有差别:

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

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

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

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

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

    相关文章

    相关评论

    粤ICP备05044888