注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

优品设计

简约至上 点石成金(http://www.upindesign.com

 
 
 

日志

 
 

关于下拉箭头   

2007-03-23 08:39:19|  分类: 网站人性化专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

现在的软件越做越大,功能也越来越复杂,然而展示给用户操作的界面却有限,聪明的交互设计师们想出了很多方法来解决这类问题,比如放出常用操作,而把一些不常用的相近操作给隐藏起来。下拉箭头就是一种常用的打开更多操作的方式。

看两个标准的windows下拉箭头的例子:

上面两个都是标准的图标+文字+箭头的形式,但是这两种种下拉箭头有什么不同么?我们把鼠标移上去,他们变成了这个样子:

第一种触发后在图标文字和下拉箭头之间有一条分割线,而后面的只是一个有触发的效果;前一种分割线前面的图标文字表示一种操作,而分割线后面的下拉箭头表示更多的操作选项。后面没有分割线的触发后就只是一种更多操作的选项。

所以,目前我们分辨以上两种样式相同的下拉箭头的方法只是:移动鼠标看触发效果,有间隔线的前面是操作,后面是更多选项。而没有间隔线的就是一个下拉选项而已。

当然,这种方法不直观,你必须鼠标触发后,才知道这个下拉箭头倒是是一个什么操作。

但这种操作在Win系统的软件里面,已经很标准了。以下都是运用这个标准的一些例子。

Google toolbar 

QQ聊天窗口 

 

但同时,在QQ的聊天街面上,发下了一些似乎并不那么符合这个标准的按钮,比如以下这个

按照以上的标准来看,第2、3、6、7的图标旁边应该加个小小的下拉箭头,鼠标触发效果应该是没有间隔线的那种。类比的可以看看msn聊天窗口的处理,似乎就比QQ处理的好(嘿嘿,这样似乎可以证明QQ不是简单的抄袭MSN呢)。

以上聊天窗口操作栏,QQ的传图片的图标(第4个)和MSN的更改字体的图标(第5个)点击后都是弹出windows标准窗体,而其他的图标,比如选择表情,都是拉出一个类似层的界面,本质上属于更多操作。处理方法应该需要下拉箭头,鼠标触发后的效果也是图标可以箭头之间没有间隔线的。

PS:看到了更高级的应用,以下截图是是QQ的群聊天窗口。

发现不同了么?

一个下拉箭头是在图标和字的中间,一个下拉箭头是在图标和字的右侧(和一般的一样)。据说,在箭头在中间的就是表示此操作为打开更多选项,也就是没有间隔线的;箭头在右侧的和一般的逻辑一致(一种理论:根据下拉箭头的位置判断可能的操作,直观)。

这里貌似是个不错的解决办法,但是他的问题是:

  • 要是我缩小了窗口,提示文字隐藏了,我该怎么去判断呢?(这个时候还是要用原始的鼠标触发方法吧。)
  • 这里的图标+下拉箭头+提示文字的组合根本不符合标准(这里文字出现的意义就是为了解释图标的,但是却被操作性的下拉箭头隔离了,那么他去解释下拉菜单?)。所以根据下拉箭头判断也就无从说起了。

Update:上一个标准的例子,来自yahoo mail。直接做成按钮状的带间隔线的效果,直观,易懂。


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

          

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

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

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

但实际上:

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

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

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

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

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

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

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

Discuz的想法是好的,只是在结合ajax技术运用时,一些交互的细节没有把握好。本文链接:http://www.blueidea.com/design/doc/2007/4500.asp 

  评论这张
 
阅读(154)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017