点击“右箭头”按钮，缩略图列表应该往左移还是往右移？

稍做尝试我们便会发现，点击“右箭头”按钮，列表向左移动是更“习惯”的，也是比较普遍的做法。比如下面几个例子：

news.yahoo.com

www.6rooms.com

看过了这种滚动的缩略图列表，再来看一下电子地图：

map.baidu.com

按“右键头”按钮，地图是向左移动的。

再来看视窗界面：

视窗界面中的滚动条，按“右箭头”按钮，界面向左移动。

按“右箭头”按钮，应该是往右移啊？！

是的，按“右箭头”向右移，按“左箭头”向左移。超级玛丽中操纵玛丽兄弟就是这样的，所有的人应该都习惯吧。

横向滚动条中的“左、右箭头”按钮原本是用来控制拖动手柄的。拖动手柄在整个滚动条中的位置对应着整个界面在窗口中的显示。按“右箭头”按钮，拖动手柄向右移，窗口中应显示整个界面更靠右边的部分，因此，整个界面向左移动了。

电子地图、滚动的缩略图列表经过了“进化”，滚动条被简化了，只剩下了方向键（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了。修改效果如下图：

本文中的基本结论是在一次和seven的讨论中得出的，之后，我又进行了一些整理、分析。和seven经常有类似的讨论，另外一次讨论下拉箭头的问题，seven已经整理成文：《下拉箭头怎么拉？》也许以后有精力应该将类似的讨论都系统的整理、记录下来。