按“右箭头”按钮,往左移

二月 27th, 2007 14 Comments »

uploads/200702/27_233541_1.gif
上图中,点击“右箭头”按钮,缩略图列表应该往左移还是往右移?

稍做尝试我们便会发现,点击“右箭头”按钮,列表向左移动是更“习惯”的,也是比较普遍的做法。比如下面几个例子:
uploads/200702/27_233623_2.gif
news.yahoo.com

uploads/200702/27_233639_3.gif
www.6rooms.com

看过了这种滚动的缩略图列表,再来看一下电子地图:
uploads/200702/27_233651_4.gif
map.baidu.com
按“右键头”按钮,地图是向左移动的。

再来看视窗界面:
uploads/200702/27_233701_5.gif
视窗界面中的滚动条,按“右箭头”按钮,界面向左移动。

按“右箭头”按钮,应该是往右移啊?!

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

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

电子地图、滚动的缩略图列表经过了“进化”,滚动条被简化了,只剩下了方向键(yahoo新闻的例子中还能看到一些进化的痕迹),而方向键实现的功能还是不变的。

在实际的设计工作中,会遇到各种不同的具体情况,不仅需要我们清楚上面所说这种种左右对应的关系,还需要能分辨出哪些是“拖动手柄”,哪些是“被间接控制的界面”。来看个实际的例子有助于进一步的理解:
uploads/200702/27_233807_6.gif
http://qqshow.qq.com/act/2006/zrshow/upload.html

这是一个让用户自己上传图片、加工图片作为个人形象的工具。用户选中本地的图片后,图片会直接显示在331×347px的图像显示区域中。140×226px的黑线框内是个人形象应有的大小。用户可以缩放、移动图片。

方向键操纵的是图片,140×226px的黑线框是不动的。通过缩放,图片可以比整个图像显示区域(331×347px)更大或更小。
uploads/200702/27_234558_7.gif
被操纵的图片到底是“拖动手柄”还是“被间接控制的界面”?图片被放得很大的时候,在331×347px的图像显示区域里无法完整显示,更象那张无限大的地图。图片似乎应该是“被间接控制的界面”。图片被缩得很小的时候,方向键更像是在操作玛丽兄弟。但是,显然不能随着图片的缩放,方向键的功能也变化吧。

这里提供的功能是让用户调整图片作为个人形象,在140×226px的区域内显示。140×226px的区域是真正的可视窗口。用户上传的图片应当至少是一个能充满整个140×226px窗口的图片。窗口是140×226px的黑线框,图片只会比窗口大,不会比窗口小。这样来理解,图片显然应该是“被间接控制的界面”。接下来只需要修改一下界面上的视觉效果,正确的表现出上面的理解就ok了。修改效果如下图:
uploads/200702/27_234559_8.gif

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

有14 条对“按“右箭头”按钮,往左移”的评论

  1. Seven 说:

    一句话:看移动操作的对象是什么。

    真人秀这个很典型,几个对象放一起了,容易混乱,框外一定要加灰处理。同时这个框能拖动(或者背景图能拖动,类rtx的)就更完美了。

    ps:应该把第一个图的地址放出来,让别人体验体验。我今天找不到了。(一个是yahoo英文,按右箭头往左移动;一个是yahoo中文,按右箭头却向右移动。有意思!)

  2. JoeCom 说:

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

    我觉得这个问题其实跟物理学上的是否静止或者运动中的参照物概念,
    在游戏中,按右箭头,以玛丽作为参照物,则背景图就是向左走;
    以背景图作为参照物,则玛丽是向右走。

    在以上图中,都有两个在走。点击“右箭头”按钮,内容是向左走,但方向(图片中的圆点颜色不同来代表方向或者是滚动条的位置)是向右走。这种走法是正确的,没有任何问题。

  3. kingokiko 说:

    同意joecom的看法
    参照物很重要
    用户也拥有这方面的知识 遇到此问题应该能很快调整过来
    但是 seven说的"一个是yahoo英文,按右箭头往左移动;一个是yahoo中文,按右箭头却向右移动。有意思!" 这里 yahoo为什么要这样做就令人费解了, 应该统一的

  4. GOGO 说:

    那个地图跟其它东西应该是不一样的,不是"上下左右",而是"东南西北",所以我觉得那地图应该那样做,如果做得跟网页上这样会很不习惯.网页这些主要是中间有个参照物..

  5. SDF 说:

    seen
    欢迎回访我的个人BLOG,
    阅读了你的这篇文章,
    My Blog:听景777
    GOOGLE个人空间-
    http://shunhill.googlepages.com/2.htm
    tingjing777@gmail.com

  6. olio 说:

    如果按左图片列表也往左,那估计会觉得更加别扭。按左实际意味着眼睛向左看,图片列表自然要向右滚了。上下按钮一样。

    很同意JoeCom,kingokiko的关于参照物的看法。

  7. chester 说:

    一个例子——网游当中
    以游戏者自身在屏幕中心为参照物,鼠标点击图片下方,则显示的内容下移,空间相对往上走。

    互联网给用户培养的习惯是以用户自身为中心的——点向下按钮,则视觉上能看到的物品往下走,类似于我人本身往下走。

  8. Hexy 说:

    我倒是觉得一句话应该是:充分理解用户的本意。

    上当视角固定,用户点击某方向键头或是其他任何指向性对象,是因为他要在视角被固定的情况下看到他所点击的方向上原视角外的图像,那么自然背景或目标就该向相反的方向移动。

  9. Luis 说:

    操作对象的及时反馈是很重要的

  10. asun 说:

    广告删删删
    因为用户点击右按钮,表示他要看到右面的东西,因此往左移动,以显示右面的内容。其他方向也是一样。

  11. Ring 说:

    同意2,3楼的观点,”参照物很重要”。
    需要补充一下的是,就截图来看上面五个例子,只有第一个例子是确实可以做成”点右箭头向右移动”。
    而例二和例三虽然表现方式和第一个例子差不多,但区别在于它们箭头旁边那几个平行的作为标识”帧”用途的小圆点。
    对于一个固定可视区域中阅读二维多祯画面的时候,默认的传统习惯都是以第一”帧”为起始点,由上至下或从左向右地进行帧变换显示。所以当这些圆点平行起来起到标识当前帧作用时,“先后”的概念也就很自然的变成为了“左右”。
    同样第一个例子也可以理解为帧,但因为它并没有出现作为引导标识的符号,也就是说它的起始点可以是第一帧也可以是最后一帧,所以就能随意地根据箭头的标识来将起控制变为认知系统的左右移动了。:)

  12. Robin 说:

    嗯,这个很容易理解。如果将人看为静止的(箭头),那么人向前走,想对与人,路是向后退的。

  13. zhuxiaocao 说:

    第一个例子,我认为原始模型来源于现实生活。
    外框好比一个空心的相框,而箭头的拉动,实际在拖动相框,而相框后面的相片是不动的,这样会造成相对位移。于是右箭头,相当于相框右移,相片左移。

    不过有时候左右箭头,控制的不是外框,而是整个控件,这个时候,情景就相反了。按右箭头就向右

  14. 豆子here 说:

    最简单的,我们翻书,从右下角翻,但是往左翻,这个才符合用户的心智模型。

    但是如果不是翻页的,而是在一个大页面的局部移来移去,就是点右往右。

发表评论

您的大名: