「閱讀」Web界面設計的要點概覽
這幾天在整理作品集，發現之前隨手寫的表單實踐一文巨爛無比，所以決定回爐重搞。不過那篇文章裏提到的《Web界面設計》 一書，倒是本很不錯的書。
此篇文章，我主要想跟大家分享下，我在設計 Web 端的自定義表單需求的時候，從此書學到的知識。（不知道現在還有多少人做過類似「自定義表單」這類的需求... 其實整個交互很簡單，就是用戶從左方拖拽控件到屏幕中央的手機內，然後在右方設置控件屬性）
PS：發現這本書真的非常幸運。在設計此需求的時候，想找一些關於 Web 端設計的書籍來看（因為讀書的時候，做的都是移動端的設計，知識相對薄弱）。然後我隨手在豆瓣搜索「Web」 ，以為沒多大希望... 誰知道一搜就搜到了好書...
----------------------------------------------------------------------------------------------------------
一、疑問
在設計 Web 端的自定義表單的時候，我發現拖放看似很簡單。但事實上，拖放過程涉及了大量細節。比如：
-
用戶怎麽知道可以拖動？
-
拖放對象的目的是什麽？
-
在哪裏可以或不可以放置拖動的對象？
-
通過什麽視覺元素來表示拖動能力？
-
拖動期間，怎樣表示有效和無效的放置目標？
-
是否允許用戶拖動實際的對象？
-
還是只允許用戶拖動實際對象的幻影？
-
整個拖動與放置期間，要對用戶給出哪些視覺反饋？
幸運的是，我在《Web 界面設計》一書的第二章中得到了答案。此書將用戶拖放操作的特殊狀態稱為趣味瞬間（Interesting Moment）。
二、事件
書中提到，趣味瞬間是由15個事件與6個相關元素組合而成。這15個事件分別是：
1. 頁面加載：在所有操作發生之前，可以預告拖放功能。例如，可以在頁面上顯示一條提示信息，告訴用戶可以拖放某些元素。
2. 鼠標懸停：鼠標指針懸停在可拖動的對象上方。
3. 鼠標按下：在可拖動對象上按下鼠標鍵。
4. 拖動啟動：鼠標開始移動。(在對象被拖動3像素或鼠標按下超過0.5秒時啟動拖動。)
5. 拖動離開原始位置：可拖動對象離開了原來的位置或包含它的容器。
6. 拖動重新進入原始位置：可拖動對象又進入了原來的位置。
7. 拖動進入有效目標：可拖動對象位於有效的放置目標上方。
8. 拖動退出有效目標：可拖動對象離開有效的放置目標。
9. 拖動進入無效目標：可拖動對象位於無效的放置目標上方。
10. 拖動進入非特定目標：可拖動對象位於放置目標和非放置目標之外的區域。取決於是否將有效目標之外的區域全都看成無效目標。
11. 拖動懸停於有效目標：可拖動對象暫時停駐於有效目標之上，但用戶沒有釋放鼠標。此時，有效的放置目標通常會突然打開。例如，拖動並在一個文件夾上方暫停，文件夾會打開以示可以接受上方對象。
12. 拖動懸停於無效目標：可拖動對象暫時停駐於無效目標之上，但用戶沒有釋放鼠標。這個事件有用嗎？也許可以在此時對用戶給出反饋，說明為什麽下面不是一個有效目標。
13. 放置被接受：可拖動對象位於有效目標之上，而且放置已經被接受。
14. 放置被拒絕：可拖動對象位於無效目標之上，而且放置已經被拒絕。此時用不用把被拖動對象移回原處？
15. 放置在父容器上：拖動對象時的位置一般來說不會有什麽特殊之處，不過在個別情況下，不同位置會有不同的含義。
三、元素
在上述的每個事件發生時，都可以在視覺上操作一些相關元素，這些元素包括：
-
頁面（例如，在頁面上顯示靜態消息）
-
光標
-
工具提示條
-
拖動對象（或拖動對象的某個部分，例如模塊的標題區）
-
拖動對象的父容器
-
放置目標
四、組合
最後，將這些事件與元素放進一個表格中，就會得到：
每一個事件與元素的交叉點，都是可實現的行為。而上表就像一個備忘錄，可以確保不遺漏交互期間需要處理的任何情況。但是，考慮到簡潔的需求，我們不一定需要為每一個交叉點都設計一個行為。同時，在設計行為的時候，我們還需要考慮該行為是否適合拖放。
五、結論
《Web界面設計》中也提到，適合拖放的情況有以下五種：
1. 拖放模塊（重新排列頁面上的模塊）
2. 拖放列表（重新排列列表項的順序）
3. 拖放對象（改變對象間的從屬關系）
4. 拖放操作（在被放置對象上執行操作，比如：拖動上傳功能）
5. 拖放集合（通過拖放操作集合，比如：購物車功能）
如果你設計的界面是屬於以上幾種，那麽拖放操作會是很好的選擇。
本文轉載自知乎，由甲爪日付廣告聯盟整理編輯！原文鏈接 http://www.jiazhua.com/wz/1024.html
「閱讀」Web界面設計的要點概覽