网站案例作品

知识分享

iOS中UI元素拖拽图标的优化

发表日期：2015/8/12 11:54:23 文章编辑： 浏览次数：2745

11-ios-design-guideline-mode-break-usability-test.png

      和移动设备上建设网站的很多其他图标一样，拖拽图标也并不能很直观的体现出背后的含义。我们发现很多用户其实并不明白这个图标代表着所在元素是可以被拖拽移动的，而且纵向排列的三条横线也很容易让人误以为是某种菜单图标。实际上，这种形象隐喻的是可拖拽物体上的防滑条纹，好像你把手指放在上面就可以拖动整个对象而不至于打滑。通常，用户需要长按这个图标，使对象整体进入某种激活状态，然后拖拽到合适的位置。

      在可用性测试当中，我们发现，用户更倾向于点按对象本身进行拖拽，而不是去按住一个含义模棱两可的小图标。相比于列表单元这样的对象，图标在尺寸上太小了，如果要求用户必须通过按住它来拖动整个单元，那么交互成本的增加就是必然的(相关阅读：交互成本的定义及案例分析)。此外，用户也会认为一个单元整体只会触发一种行为，也就是无论拖拽小图标还是单元本身，都可以使其被拖动。

iOS中UI元素拖拽图标的优化

Yahoo! Finace使用了标准的iOS拖拽图标，用户长按该图标可以使单元进入可拖动状态。虽然列表单元本身是目标更大、更易操作、更符合直觉的对象，但用户却无法通过长按单元本身来达到触发拖拽的目标。

此外，我们还是要强调一下拖拽图标与我们所熟悉的汉堡包菜单图标真的过于相似了：

13-ios-design-guideline-mode-break-usability-test.png

外形相同或过于相似的对象，所触发的事件是截然不同的，这种情况会使人迷惑不安。虽然行业中关于汉堡包图标的争论愈发激烈，但越来越多的用户已经开始习惯了“点击三根线的图标展开导航菜单”的模式。当他们发现行为结果和他们所习惯的、所预期的东西不一致时，就会产生挫败与迷茫。

鉴于拖拽图标所存在的一些可用性问题，我们建议：

  • 至少允许用户长按目标单元整体也能实现拖拽的目标，而不要只将交互区域限制在拖拽图标上。

  • 另一方面，对于汉堡包菜单图标，可以尝试更清晰明确的表达方式，例如在三根线前面增加三个点，或是同时放出“菜单”标题在图标旁边。

------北京网站建设公司  北京传诚信------

标签： 手机网站建设 html5网站设计 响应式Web设计
将文章分享到..
上一篇下一篇
相关新闻
全新新闻
随机新闻
最新网站设计案例

我们来谈谈您的网站建设项目.

现在联系!!
Hi，我来帮您！