上圖中，點擊“右箭頭”按鈕，縮略圖列表應(yīng)該往左移還是往右移？

稍做嘗試我們便會發(fā)現(xiàn)，點擊“右箭頭”按鈕，列表向左移動是更“習(xí)慣”的，也是比較普遍的做法。比如下面幾個例子：

看過了這種滾動的縮略圖列表，再來看一下電子地圖：

按“右鍵頭”按鈕，地圖是向左移動的。

再來看視窗界面：

視窗界面中的滾動條，按“右箭頭”按鈕，界面向左移動。

按“右箭頭”按鈕，應(yīng)該是往右移?。?！

是的，按“右箭頭”向右移，按“左箭頭”向左移。超級瑪麗中操縱瑪麗兄弟就是這樣的，所有的人應(yīng)該都習(xí)慣吧。

橫向滾動條中的“左、右箭頭”按鈕原本是用來控制拖動手柄的。拖動手柄在整個滾動條中的位置對應(yīng)著整個界面在窗口中的顯示。按“右箭頭”按鈕，拖動手柄向右移，窗口中應(yīng)顯示整個界面更靠右邊的部分，因此，整個界面向左移動了。

電子地圖、滾動的縮略圖列表經(jīng)過了“進(jìn)化”，滾動條被簡化了，只剩下了方向鍵（yahoo新聞的例子中還能看到一些進(jìn)化的痕跡），而方向鍵實現(xiàn)的功能還是不變的。

#p#

在實際的設(shè)計工作中，會遇到各種不同的具體情況，不僅需要我們清楚上面所說這種種左右對應(yīng)的關(guān)系，還需要能分辨出哪些是“拖動手柄”，哪些是“被間接控制的界面”。來看個實際的例子有助于進(jìn)一步的理解：

這是一個讓用戶自己上傳圖片、加工圖片作為個人形象的工具。用戶選中本地的圖片后，圖片會直接顯示在331×347px的圖像顯示區(qū)域中。140×226px的黑線框內(nèi)是個人形象應(yīng)有的大小。用戶可以縮放、移動圖片。

方向鍵操縱的是圖片，140×226px的黑線框是不動的。通過縮放，圖片可以比整個圖像顯示區(qū)域（331×347px）更大或更小。

被操縱的圖片到底是“拖動手柄”還是“被間接控制的界面”？圖片被放得很大的時候，在331×347px的圖像顯示區(qū)域里無法完整顯示，更象那張無限大的地圖。圖片似乎應(yīng)該是“被間接控制的界面”。圖片被縮得很小的時候，方向鍵更像是在操作瑪麗兄弟。但是，顯然不能隨著圖片的縮放，方向鍵的功能也變化吧。

這里提供的功能是讓用戶調(diào)整圖片作為個人形象，在140×226px的區(qū)域內(nèi)顯示。140×226px的區(qū)域是真正的可視窗口。用戶上傳的圖片應(yīng)當(dāng)至少是一個能充滿整個140×226px窗口的圖片。窗口是140×226px的黑線框，圖片只會比窗口大，不會比窗口小。這樣來理解，圖片顯然應(yīng)該是“被間接控制的界面”。接下來只需要修改一下界面上的視覺效果，正確的表現(xiàn)出上面的理解就ok了。修改效果如下圖：

本文中的基本結(jié)論是在一次和seven的討論中得出的，之后，我又進(jìn)行了一些整理、分析。和seven經(jīng)常有類似的討論，另外一次討論下拉箭頭的問題，seven已經(jīng)整理成文：《下拉箭頭怎么拉？》也許以后有精力應(yīng)該將類似的討論都系統(tǒng)的整理、記錄下來。