「閱讀」Web界面設計

這幾天在整理作品集，發現之前隨手寫的表單實踐一文巨爛無比，所以決定回爐重搞。不過那篇文章里提到的《Web界面設計》 一書，倒是本很不錯的書。

此篇文章，我主要想跟大家分享下，我在設計 Web 端的自定義表單需求的時候，從此書學到的知識。（不知道現在還有多少人做過類似「自定義表單」這類的需求... 其實整個交互很簡單，就是用戶從左方拖拽控制項到屏幕中央的手機內，然後在右方設置控制項屬性）

PS：發現這本書真的非常幸運。在設計此需求的時候，想找一些關於 Web 端設計的書籍來看（因為讀書的時候，做的都是移動端的設計，知識相對薄弱）。然後我隨手在豆瓣搜索「Web」 ，以為沒多大希望... 誰知道一搜就搜到了好書...

n

----------------------------------------------------------------------------------------------------------

一、疑問

在設計 Web 端的自定義表單的時候，我發現拖放看似很簡單。但事實上，拖放過程涉及了大量細節。比如：

• 用戶怎麼知道可以拖動？

• 拖放對象的目的是什麼？

• 在哪裡可以或不可以放置拖動的對象？

• 通過什麼視覺元素來表示拖動能力？

• 拖動期間，怎樣表示有效和無效的放置目標？

• 是否允許用戶拖動實際的對象？

• 還是只允許用戶拖動實際對象的幻影？

• 整個拖動與放置期間，要對用戶給出哪些視覺反饋？

幸運的是，我在《Web 界面設計》一書的第二章中得到了答案。此書將用戶拖放操作的特殊狀態稱為趣味瞬間（Interesting Moment）。

二、事件

書中提到，趣味瞬間是由15個事件與6個相關元素組合而成。這15個事件分別是：

1. 頁面載入：在所有操作發生之前，可以預告拖放功能。例如，可以在頁面上顯示一條提示信息，告訴用戶可以拖放某些元素。

2. 滑鼠懸停：滑鼠指針懸停在可拖動的對象上方。

3. 滑鼠按下：在可拖動對象上按下滑鼠鍵。

4. 拖動啟動：滑鼠開始移動。(在對象被拖動3像素或滑鼠按下超過0.5秒時啟動拖動。)

5. 拖動離開原始位置：可拖動對象離開了原來的位置或包含它的容器。

6. 拖動重新進入原始位置：可拖動對象又進入了原來的位置。

7. 拖動進入有效目標：可拖動對象位於有效的放置目標上方。

8. 拖動退出有效目標：可拖動對象離開有效的放置目標。

9. 拖動進入無效目標：可拖動對象位於無效的放置目標上方。

n

10. 拖動進入非特定目標：可拖動對象位於放置目標和非放置目標之外的區域。取決於是否將有效目標之外的區域全都看成無效目標。

11. 拖動懸停於有效目標：可拖動對象暫時停駐於有效目標之上，但用戶沒有釋放滑鼠。此時，有效的放置目標通常會突然打開。例如，拖動並在一個文件夾上方暫停，文件夾會打開以示可以接受上方對象。

12. 拖動懸停於無效目標：可拖動對象暫時停駐於無效目標之上，但用戶沒有釋放滑鼠。這個事件有用嗎？也許可以在此時對用戶給出反饋，說明為什麼下面不是一個有效目標。

13. 放置被接受：可拖動對象位於有效目標之上，而且放置已經被接受。

14. 放置被拒絕：可拖動對象位於無效目標之上，而且放置已經被拒絕。此時用不用把被拖動對象移回原處？

15. 放置在父容器上：拖動對象時的位置一般來說不會有什麼特殊之處，不過在個別情況下，不同位置會有不同的含義。

三、元素

在上述的每個事件發生時，都可以在視覺上操作一些相關元素，這些元素包括：

1. 頁面（例如，在頁面上顯示靜態消息）

2. 游標

3. 工具提示條

4. 拖動對象（或拖動對象的某個部分，例如模塊的標題區）

5. 拖動對象的父容器

6. 放置目標

四、組合

最後，將這些事件與元素放進一個表格中，就會得到：

每一個事件與元素的交叉點，都是可實現的行為。而上表就像一個備忘錄，可以確保不遺漏交互期間需要處理的任何情況。但是，考慮到簡潔的需求，我們不一定需要為每一個交叉點都設計一個行為。同時，在設計行為的時候，我們還需要考慮該行為是否適合拖放。

五、結論

《Web界面設計》中也提到，適合拖放的情況有以下五種：

1. 拖放模塊（重新排列頁面上的模塊）

2. 拖放列表（重新排列列表項的順序）

3. 拖放對象（改變對象間的從屬關係）

4. 拖放操作（在被放置對象上執行操作，比如：拖動上傳功能）

n

5. 拖放集合（通過拖放操作集合，比如：購物車功能）

如果你設計的界面是屬於以上幾種，那麼拖放操作會是很好的選擇。