|
一個非常簡單的題目：設(shè)計一個交互方式，把一個圖標(biāo)從A處移動到B處。
通常最直接的方式是在A處用鼠標(biāo)左鍵按住圖標(biāo) ，然后移動到B處松開。好了，就是這樣一個簡單的交互操作。
這里面其實有很多問題需要考慮周全，才能讓一個簡單的拖動給人感覺從容流暢，讓用戶毫無障礙的去完成他的目標(biāo)，僅僅是一個簡單拖動操作。
簡單列舉一下用戶可能會遇到的問題：
- 用戶可能不知道這個圖標(biāo)可以拖動
- 用戶拖動了圖標(biāo)不知道B處可以放下圖標(biāo)就會停留在B處
- 用戶在拖動的過程中會擔(dān)心是不是半路這個圖標(biāo)就掉了
- 用戶的鼠標(biāo)不太好用 AB兩個位置和要拖動的圖標(biāo)又不是很大的時候就很容點錯位置
- 這個過程中還會有其它的種種問題影響用戶做這樣一個簡單的操作 就不一一列舉了 畢竟這個是探討如何設(shè)計的帖子 不是提問題的 哈哈
如何解決這些問題呢？
我個人喜歡把這種設(shè)計還原到生活中去，先找生活中的模型。根據(jù)生活中的模型來設(shè)計一個交互 讓用戶非常熟悉的去完成他的目標(biāo) 甚至都感覺不到你設(shè)計的存在那樣最好了。
體會一下這樣一個場景：
在外面吃飯的時候，桌子上會有很多杯子盤子什么的已經(jīng)放滿了。這時候服務(wù)員來上菜，需要我挪動一下面前的酒杯
我會很自然的用手拿起酒杯放到桌子的另一個地方
這個就是拖動一個圖標(biāo)從A移動到B的生活中的模型之一
- 在拿杯子之前我十分的卻確定這個杯子是可以用手很從容的拿了起來
- 這個杯子我同樣可以很容的放到桌子的另一個不妨礙上菜的地方
- 這個杯子在這一瞬間其實有好多個狀態(tài)
停放在桌面A處的狀態(tài)； 我的手觸碰到杯子的一瞬間的狀態(tài)， 這時候我的手會有一個感覺 這個杯子是真是存在的； 杯子在被我即將端離桌桌面的一個狀態(tài)， 這時候我的手會有另一個感覺這個杯子很輕，可以很容易的把它拿起來； 杯子離開桌面往B處移動的過程中有一個狀態(tài)，這個時候杯子在手里 里面的酒可能會有輕微的晃動；杯子接觸桌面B的一瞬間的一個狀態(tài)，我的手知道哦杯子碰到桌面了，可以準(zhǔn)備松手了； 杯子平穩(wěn)的停留在B處又是一個狀態(tài)，這個時候我的手已經(jīng)離開杯子了 而且我很確信這個杯子可以被放在這里 放在這里很安全。
設(shè)計整個拖放的過程可以來模擬用手移動酒杯的過程
1.在鼠標(biāo)移動到圖標(biāo)上之前，要讓用戶毫不遲疑的確信這個東西可以拖動
解決這個問題就需要在用戶進(jìn)行拖動操作之前給與用戶很強的心里暗示，這個東西可以拖動
如圖所示
當(dāng)一個2d的圖標(biāo)放在一個平面上的時候，很難讓用戶覺得這個東西可以用鼠標(biāo)拖動。
如果設(shè)計成1的這種感覺用戶就很容易感覺到這個圖標(biāo)可以動（還是還原到生活中 通常一個平面上有一個不深的小洞洞的時候， 這個小洞洞里面如果有個小東西 很多人會不自然的伸指頭去扣一下里面的東西）。
2.鼠標(biāo)移動到圖標(biāo)上的時候圖標(biāo)要有響應(yīng)，類似當(dāng)手接觸到杯子的時候一下就感覺到了這個東西很輕可以從容的移動。
如圖這個設(shè)計不一定是最好的設(shè)計，但至少這個過程讓用戶在拖動之前就知道哦 這個東西是活的，可以動。
3.按住拖動的過程中圖標(biāo)要很好的跟這鼠標(biāo)移動，如果在這個過程中能有個大小或者陰影的變化就最靠譜了，可惜很多時候在網(wǎng)頁游戲的技術(shù)條件下很難實現(xiàn)。
4.放置的位置B 最簡單的方案就是做成跟A一致的感覺，這樣用戶就可以不用費腦筋的知道。B處可以放置這個圖標(biāo)，同樣這個圖標(biāo)在下落的過程中能有一定的變化就最靠譜了。
5.如果這個圖標(biāo)比較小，那么用戶鼠標(biāo)響應(yīng)的安全位置要做的稍微大一點，整個A區(qū)域鼠標(biāo)移動上去都有反應(yīng)才好，這個區(qū)域還不能太大，如果在A區(qū)域以外就有鼠標(biāo)響應(yīng)用戶會覺得這個不和常理，出問題了。
說了這么多。其實就是為了實現(xiàn)一個很基本的拖動操作而已，像這種簡單基本的交互操作還有很多很多。每一種都有很多道理在里面，對這些道理理解的越深 對生活觀察的越細(xì)致，設(shè)計出來的東西就越容易被用戶接受。
Don’t make them think
也許還有很多更好的方式來實現(xiàn)這個移動。但是，盡量不要在這樣的東西上玩花樣 用戶這個時候的目標(biāo)是移動這個圖標(biāo)，僅此而已。不要試圖在這上面炫耀技術(shù)或者創(chuàng)意，不要干擾用戶，讓他們從容的完成他們的目標(biāo)才好。
說兩句題外話
現(xiàn)在的手機屏幕很大，但還是因為圖標(biāo)太多，一屏顯示不開，于是就有了各種各樣的滑動切換屏幕操作。
但是只要仔細(xì)感覺一下就會發(fā)現(xiàn)，不管是左右滑動還是上下滑動 ，這種滑動最好的體驗還是pre和iPhone上的，整個andriod系和黑莓系的手機。都做不出那么從容順暢的感覺，WP7的手機我沒用過，希望能做的更好。
僅僅是一個看起來無比簡單的滑動操作而已 其實里面也是有很多可以挖掘和深入的設(shè)計。只要用心觀察，用心設(shè)計。
經(jīng)典論壇交流：http://bbs.blueidea.com/thread-3036222-1-1.html
本文鏈接：http://www.95time.cn/design/doc/2011/8607.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
|
