按“右箭头”按钮，往左移
转载自臭鱼，本文中的基本结论是在和臭鱼的讨论中得出的。特转载记录于此。
上图中，点击“右箭头”按钮，缩略图列表应该往左移还是往右移？
稍做尝试我们便会发现，点击“右箭头”按钮，列表向左移动是更“习惯”的，也是比较普遍的做法。比如下面几个例子：
看过了这种滚动的缩略图列表，再来看一下电子地图：
按“右键头”按钮，地图是向左移动的。
再来看视窗界面：
视窗界面中的滚动条，按“右箭头”按钮，界面向左移动。
按“右箭头”按钮，应该是往右移啊？！
是的，按“右箭头”向右移，按“左箭头”向左移。超级玛丽中操纵玛丽兄弟就是这样的，所有的人应该都习惯吧。
横向滚动条中的“左、右箭头”按钮原本是用来控制拖动手柄的。拖动手柄在整个滚动条中的位置对应着整个界面在窗口中的显示。按“右箭头”按钮，拖动手柄向右移，窗口中应显示整个界面更靠右边的部分，因此，整个界面向左移动了。
电子地图、滚动的缩略图列表经过了“进化”，滚动条被简化了，只剩下了方向键（yahoo新闻的例子中还能看到一些进化的痕迹），而方向键实现的功能还是不变的。
在实际的设计工作中，会遇到各种不同的具体情况，不仅需要我们清楚上面所说这种种左右对应的关系，还需要能分辨出哪些是“拖动手柄”，哪些是“被间接控制的界面”。来看个实际的例子有助于进一步的理解：
http://qqshow.qq.com/act/2006/zrshow/upload.html
这是一个让用户自己上传图片、加工图片作为个人形象的工具。用户选中本地的图片后，图片会直接显示在331×347px的图像显示区域中。140×226px的黑线框内是个人形象应有的大小。用户可以缩放、移动图片。
方向键操纵的是图片，140×226px的黑线框是不动的。通过缩放，图片可以比整个图像显示区域（331×347px）更大或更小。
被操纵的图片到底是“拖动手柄”还是“被间接控制的界面”？图片被放得很大的时候，在331×347px的图像显示区域里无法完整显示，更象那张无限大的地图。图片似乎应该是“被间接控制的界面”。图片被缩得很小的时候，方向键更像是在操作玛丽兄弟。但是，显然不能随着图片的缩放，方向键的功能也变化吧。
这里提供的功能是让用户调整图片作为个人形象，在140×226px的区域内显示。140×226px的区域是真正的可视窗口。用户上传的图片应当至少是一个能充满整个140×226px窗口的图片。窗口是140×226px的黑线框，图片只会比窗口大，不会比窗口小。这样来理解，图片显然应该是“被间接控制的界面”。接下来只需要修改一下界面上的视觉效果，正确的表现出上面的理解就ok了。修改效果如下图：
下拉箭头在web上的应用
接上篇（下拉箭头怎么拉?），现在聊聊下拉箭头在web上的一些应用。
先给个标准的例子，来自Gmail，在打开一封邮件后，右上角的回复快捷操作和更多的操作。
很明显，间隔线前的操作是回复此邮件，后的下拉箭头表示更多针对此邮件的操作。
这里还有一个例子，来自著名的Discuz论坛，在任何一个版面都可以见到的右上角的“发新帖”的按钮。
直接看这种样式的设计，应该是鼠标点击“新帖”为发表一个新的帖子的意思，而点击后面的下拉箭头，就是（发表的）更多操作。
但实际上–
当你把鼠标移动到这个按钮的任何一处，就弹出了这么一个层。当然，这个是运用的高超的ajax技术，给你带来了不需要多点击一次鼠标的便利，但他同时也给我带来了很大的困惑。
- 鼠标一移动到“新帖”的按钮，就弹出四个选择，那么是不是，我发帖一定要选择以下四种之一呢？就是说，本站只能发以下四种帖子。（我想，Discuz的意思应该是论坛可以发以下五种帖子。但是，我一移动到新帖上，就弹出四种选项，这么强烈的吸引走了我的注意力。很容易让人觉得这个是发帖的必须选择。）
- 鼠标移动到下拉箭头上，出来的是同样的东西。那么干嘛把“新帖”和下拉箭头分开？
根据这个设计所表达的意思，我想，只需要简单的这么处理以下，应该就能解决问题了：
鼠标移动到新帖上，点击，表示发表一个新的帖子。鼠标移动到后面的下拉箭头，自动弹出选项框，表示还可以发表更多类型的帖子。这个逻辑和Gmail的回复是一致的。
PS：这种设计形式下的交互方式是符合逻辑的，但是，跟Gmail的回复操作一样，他也不免有一些小小的弊端：后面的下拉箭头表示是跟发新帖一类的操作，但是交代的不是很清楚。
最清晰直观的解决方法就是，把这5种发表帖子一一摆开（当然可以在样式上突出第一个），类似的效果在早期的Discuz可以看到。
但是以上只有2种类型的帖子，一一摆出来还是可以的。后面发展到了5种（说不定以后还有更多类型的帖子），一一摆开显然是不明智的做法，一是设计上不好看，二是后面四种属于不常有的操作。所以采取了放出一种常用操作（发表普通帖子）而把不常用的藏起来的做法，这时，自然而然的就想到了用下拉菜单来解决。
Discuz的想法是好的，只是在结合ajax技术运用时，一些交互的细节没有把握好。
下拉箭头怎么拉？
现在的软件越做越大，功能也越来越复杂，然而展示给用户操作的界面却有限，聪明的交互设计师们想出了很多方法来解决这类问题，比如放出常用操作，而把一些不常用的相近操作给隐藏起来。下拉箭头就是一种常用的打开更多操作的方式。
看两个标准的windows下拉箭头的例子：
上面两个都是标准的图标+文字+箭头的形式，但是这两种种下拉箭头有什么不同么？我们把鼠标移上去，他们变成了这个样子：
第一种触发后在图标文字和下拉箭头之间有一条分割线，而后面的只是一个有触发的效果；前一种分割线前面的图标文字表示一种操作，而分割线后面的下拉箭头表示更多的操作选项。后面没有分割线的触发后就只是一种更多操作的选项。
所以，目前我们分辨以上两种样式相同的下拉箭头的方法只是：移动鼠标看触发效果，有间隔线的前面是操作，后面是更多选项。而没有间隔线的就是一个下拉选项而已。
当然，这种方法不直观，你必须鼠标触发后，才知道这个下拉箭头倒是是一个什么操作。
但这种操作在Win系统的软件里面，已经很标准了。以下都是运用这个标准的一些例子。
Google toolbar 
QQ聊天窗口 
但同时，在QQ的聊天街面上，发下了一些似乎并不那么符合这个标准的按钮，比如以下这个
按照以上的标准来看，第2、3、6、7的图标旁边应该加个小小的下拉箭头，鼠标触发效果应该是没有间隔线的那种。类比的可以看看msn聊天窗口的处理，似乎就比QQ处理的好（嘿嘿，这样似乎可以证明QQ不是简单的抄袭MSN呢）。
以上聊天窗口操作栏，QQ的传图片的图标（第4个）和MSN的更改字体的图标（第5个）点击后都是弹出windows标准窗体，而其他的图标，比如选择表情，都是拉出一个类似层的界面，本质上属于更多操作。处理方法应该需要下拉箭头，鼠标触发后的效果也是图标可以箭头之间没有间隔线的。
PS：看到了更高级的应用，以下截图是是QQ的群聊天窗口。
发现不同了么？
一个下拉箭头是在图标和字的中间，一个下拉箭头是在图标和字的右侧（和一般的一样）。据说，在箭头在中间的就是表示此操作为打开更多选项，也就是没有间隔线的；箭头在右侧的和一般的逻辑一致（一种理论：根据下拉箭头的位置判断可能的操作，直观）。
这里貌似是个不错的解决办法，但是他的问题是：
- 要是我缩小了窗口，提示文字隐藏了，我该怎么去判断呢？（这个时候还是要用原始的鼠标触发方法吧。）
- 这里的图标+下拉箭头+提示文字的组合根本不符合标准（这里文字出现的意义就是为了解释图标的，但是却被操作性的下拉箭头隔离了，那么他去解释~~~下拉菜单？）。所以根据下拉箭头判断也就无从说起了。
Update：上一个标准的例子，来自yahoo mail。直接做成按钮状的带间隔线的效果，直观，易懂。
