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

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

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

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

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

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

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

Google toolbar 

QQ聊天窗口 

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

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

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

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

发现不同了么？

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

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

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

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

出处：hiseven.net
责任编辑：moby

上一页 下一页 下拉箭头在web上的应用