下拉箭头在web上的应用

发表于 2007-02-06 22:07 | 分类: 交互设计, 可用性 | tags: , | 评论 (9)

接上篇(下拉箭头怎么拉?),现在聊聊下拉箭头在web上的一些应用。

先给个标准的例子,来自Gmail,在打开一封邮件后,右上角的回复快捷操作和更多的操作。

gmail_reply          gmail_reply_more

很明显,间隔线前的操作是回复此邮件,后的下拉箭头表示更多针对此邮件的操作。

这里还有一个例子,来自著名的Discuz论坛,在任何一个版面都可以见到的右上角的“发新帖”的按钮。

discuz_post

直接看这种样式的设计,应该是鼠标点击“新帖”为发表一个新的帖子的意思,而点击后面的下拉箭头,就是(发表的)更多操作。

但实际上–

discuz_post_over

当你把鼠标移动到这个按钮的任何一处,就弹出了这么一个层。当然,这个是运用的高超的ajax技术,给你带来了不需要多点击一次鼠标的便利,但他同时也给我带来了很大的困惑。

  • 鼠标一移动到“新帖”的按钮,就弹出四个选择,那么是不是,我发帖一定要选择以下四种之一呢?就是说,本站只能发以下四种帖子。(我想,Discuz的意思应该是论坛可以发以下五种帖子。但是,我一移动到新帖上,就弹出四种选项,这么强烈的吸引走了我的注意力。很容易让人觉得这个是发帖的必须选择。)
  • 鼠标移动到下拉箭头上,出来的是同样的东西。那么干嘛把“新帖”和下拉箭头分开?

根据这个设计所表达的意思,我想,只需要简单的这么处理以下,应该就能解决问题了:

discuz_post_over

鼠标移动到新帖上,点击,表示发表一个新的帖子。鼠标移动到后面的下拉箭头,自动弹出选项框,表示还可以发表更多类型的帖子。这个逻辑和Gmail的回复是一致的。

PS:这种设计形式下的交互方式是符合逻辑的,但是,跟Gmail的回复操作一样,他也不免有一些小小的弊端:后面的下拉箭头表示是跟发新帖一类的操作,但是交代的不是很清楚。

最清晰直观的解决方法就是,把这5种发表帖子一一摆开(当然可以在样式上突出第一个),类似的效果在早期的Discuz可以看到

free_discuz

但是以上只有2种类型的帖子,一一摆出来还是可以的。后面发展到了5种(说不定以后还有更多类型的帖子),一一摆开显然是不明智的做法,一是设计上不好看,二是后面四种属于不常有的操作。所以采取了放出一种常用操作(发表普通帖子)而把不常用的藏起来的做法,这时,自然而然的就想到了用下拉菜单来解决。

Discuz的想法是好的,只是在结合ajax技术运用时,一些交互的细节没有把握好。

Comment RSS feed | Trackback this post

9 Comments so far

  1. Banlon @ 2007-02-07 9:21

    顶顶~~~

  2. Knight @ 2007-02-07 15:46

    学到·

  3. sasha @ 2007-02-11 23:16

    ms 有点道理~~

    赞一个先!

  4. 白鸦 @ 2007-02-13 1:07

    你丫说的不对,Discuz论坛那个应该去学flickr那样表现, 不光要把展开的触及区域缩小到箭头上 还要把现在的这个项作为默认项展示出来。

  5. bice @ 2007-02-13 11:58

    “鼠标移动到后面的下拉箭头,自动弹出选项框”
    感觉mouseover触发事件可能会有干扰,另外Discuz的下拉箭头区域太窄,可能不利于点击;这类控件也许需要有一个标准,或者要根据实际的任务去设计。

    p.s:这个评论框需要填写Email地址为什么不事先提示?

  6. lushnis @ 2007-02-13 12:34

    十分感谢你关于论坛发帖按钮的分析,实际上我们在其他很多方面都做得不够。我们会努力改善,多谢!

  7. comfill @ 2007-02-14 10:06

    你的blog首页上的rss订阅好像有问题,订阅不了
    http://feed.feedsky.com/HiSeven

  8. […] 下拉箭头在web上的应用 - Hi Seven (tags: UI) […]

  9. Seven @ 2007-02-23 9:33

    回bice:
    下拉箭头区域是太小,所以我们讨论是否直接以”更多>>”的方式表达出来。还有,也就是因为太小,所以做成直接鼠标移上去就显示。

    这个这个~~~评论必填选项是有点问题。WP默认是前两项都必填的吧。改~~~

Leave a reply

(必需)

(必需,但不会被泄露)