關於簡單拖動操作的交互思考

　　一個非常簡單的題目：設計一個交互方式，把一個圖標從A處移動到B處。

　　通常最直接的方式是在A處用鼠標左鍵按住圖標 ，然後移動到B處松開。好了，就是這樣一個簡單的交互操作。

　　這裡面其實有很多問題需要考慮周全，才能讓一個簡單的拖動給人感覺從容流暢，讓用戶毫無障礙的去完成他的目標，僅僅是一個簡單拖動操作。

　　簡單列舉一下用戶可能會遇到的問題：

　　用戶可能不知道這個圖標可以拖動

　　用戶拖動了圖標不知道B處可以放下圖標就會停留在B處

　　用戶在拖動的過程中會擔心是不是半路這個圖標就掉了

　　用戶的鼠標不太好用 AB兩個位置和要拖動的圖標又不是很大的時候就很容點錯位置

　　這個過程中還會有其它的種種問題影響用戶做這樣一個簡單的操作 就不一一列舉了 畢竟這個是探討如何設計的帖子 不是提問題的 哈哈

　　如何解決這些問題呢?

　　我個人喜歡把這種設計還原到生活中去，先找生活中的模型。根據生活中的模型來設計一個交互 讓用戶非常熟悉的去完成他的目標 甚至都感覺不到你設計的存在那樣最好了。

　　體會一下這樣一個場景：

　　在外面吃飯的時候，桌子上會有很多杯子盤子什麼的已經放滿了。這時候服務員來上菜，需要我挪動一下面前的酒杯

　　我會很自然的用手拿起酒杯放到桌子的另一個地方

　　這個就是拖動一個圖標從A移動到B的生活中的模型之一

　　在拿杯子之前我十分的卻確定這個杯子是可以用手很從容的拿了起來

　　這個杯子我同樣可以很容的放到桌子的另一個不妨礙上菜的地方

　　這個杯子在這一瞬間其實有好多個狀態

　　停放在桌面A處的狀態; 我的手觸碰到杯子的一瞬間的狀態， 這時候我的手會有一個感覺 這個杯子是真是存在的; 杯子在被我即將端離桌桌面的一個狀態， 這時候我的手會有另一個感覺這個杯子很輕，可以很容易的把它拿起來; 杯子離開桌面往B處移動的過程中有一個狀態，這個時候杯子在手裡 裡面的酒可能會有輕微的晃動;杯子接觸桌面B的一瞬間的一個狀態，我的手知道哦杯子碰到桌面了，可以准備松手了; 杯子平穩的停留在B處又是一個狀態，這個時候我的手已經離開杯子了 而且我很確信這個杯子可以被放在這裡 放在這裡很安全。

　　設計整個拖放的過程可以來模擬用手移動酒杯的過程

　　1.在鼠標移動到圖標上之前，要讓用戶毫不遲疑的確信這個東西可以拖動

　　解決這個問題就需要在用戶進行拖動操作之前給與用戶很強的心裡暗示，這個東西可以拖動

　　如圖所示

　　當一個2d的圖標放在一個平面上的時候，很難讓用戶覺得這個東西可以用鼠標拖動。

　　如果設計成1的這種感覺用戶就很容易感覺到這個圖標可以動(還是還原到生活中 通常一個平面上有一個不深的小洞洞的時候， 這個小洞洞裡面如果有個小東西 很多人會不自然的伸指頭去扣一下裡面的東西)。

　　2.鼠標移動到圖標上的時候圖標要有響應，類似當手接觸到杯子的時候一下就感覺到了這個東西很輕可以從容的移動。

　　如圖這個設計不一定是最好的設計，但至少這個過程讓用戶在拖動之前就知道哦 這個東西是活的，可以動。

　　3.按住拖動的過程中圖標要很好的跟這鼠標移動，如果在這個過程中能有個大小或者陰影的變化就最靠譜了，可惜很多時候在網頁游戲的技術條件下很難實現。

　　4.放置的位置B 最簡單的方案就是做成跟A一致的感覺，這樣用戶就可以不用費腦筋的知道。B處可以放置這個圖標，同樣這個圖標在下落的過程中能有一定的變化就最靠譜了。

　　5.如果這個圖標比較小，那麼用戶鼠標響應的安全位置要做的稍微大一點，整個A區域鼠標移動上去都有反應才好，這個區域還不能太大，如果在A區域以外就有鼠標響應用戶會覺得這個不和常理，出問題了。

　　說了這麼多。其實就是為了實現一個很基本的拖動操作而已，像這種簡單基本的交互操作還有很多很多。每一種都有很多道理在裡面，對這些道理理解的越深 對生活觀察的越細致，設計出來的東西就越容易被用戶接受。

　　Don’t make them think

　　也許還有很多更好的方式來實現這個移動。但是，盡量不要在這樣的東西上玩花樣 用戶這個時候的目標是移動這個圖標，僅此而已。不要試圖在這上面炫耀技術或者創意，不要干擾用戶，讓他們從容的完成他們的目標才好。

　　說兩句題外話

　　現在的手機屏幕很大，但還是因為圖標太多，一屏顯示不開，於是就有了各種各樣的滑動切換屏幕操作。

　　但是只要仔細感覺一下就會發現，不管是左右滑動還是上下滑動 ，這種滑動最好的體驗還是pre和iPhone上的，整個andriod系和黑莓系的手機。都做不出那麼從容順暢的感覺，WP7的手機我沒用過，希望能做的更好。

　　僅僅是一個看起來無比簡單的滑動操作而已 其實裡面也是有很多可以挖掘和深入的設計。只要用心觀察，用心設計。