最近在閱讀Bill Scott和Theresa Neil 所著的《Web界面設計》，其中上下文工具一章給我留下深刻的印象，下面我將結合部分實例來回顧一下主要的內容。

在具體講上下文工具之前，先來說說上下文交互（Interaction in Context，英文看起來更容易理解一些） 是怎么回事。

百度：除了“提交”按鈕和超鏈接之外，幾乎什么都用不著的簡單站點。

雅虎郵箱：帶有工具欄和菜單的全功能應用程序。

這是兩個比較極端的例子，大部分的Web站點是介于這兩者之間，它們需要在一定程度上混合內容和功能，這就是上下文交互，如何協調處理功能與數據。

在講上下文工具之前，還有一個不得不提的就是費茨定律：

到達目標的時間是到達目標的距離與目標大小的函數。

就是說：

1）不要讓目標過小。目標足夠大才容易被注意到，也容易操作。

2）盡可能把操作放在距離激活點最近的位置上。

上下文工具其實就像是桌面右鍵菜單的Web版，但它又不需要用戶單擊右鍵，而是可以通過內容在上下文中顯示相關工具。實現這一目標有以下幾種方式：

1）實時可見工具：把上下文工具直接放在內容中。

2）懸停即現工具：在鼠標懸停時顯示上下文工具。

3）開關顯示工具：打開/關閉頁面中上下文工具的總開關。

4）級聯遞進工具：基于用戶操作漸進顯示工具。

5）二級菜單：顯示二級菜單（一般通過右擊對象觸發）。

一、實時可見工具（Always-Visible Tools）

這是最簡單的上下文工具。以知乎來舉例：

可見的工具：在每個回答旁邊，都有一個統計贊同的數字，數字上方是“贊同”按鈕，下方則是“反對”按鈕，并且隨著文章的下拉它能依然保持可見。

邀請：鼠標懸停在“贊同”時，上半部分的背景由淺藍色變成了深藍色，同時也出現一個提示“贊同”。突出顯示是表現交互能力的有效途徑。

完成：單擊“贊同”按鈕后，贊同馬上被記錄，原來的贊同數會立即消失，取而代之的是新的贊同數，背景顏色保持了深藍色。

“贊同”和“反對”按鈕就是始終可見的上下文工具。

需要注意的地方：

明確邀請操作：給回答“點贊”是知乎運營的核心理念，始終顯示相關工具可以明確邀請操作。當然，還有與回答相關的其他操作（評論、感謝、分享、收藏等等），但這些操作只存在于回答的結尾處，表現得不那么明顯。

相對重要性：操作的相對重要性，也可以作為處理這個問題的依據。“贊同”與“分享”這兩個操作的重要性一樣嗎？對于知乎來說，顯然是不一樣的。“贊同”以顯著位置浮動固定在每個回答的左邊，而“分享”操作被放到了回答的末端，所處位置的不同，可以反映出這兩種操作的重要程度不一樣。

易發現性：保持視覺干擾最少化。保持可見項目最少化。

二、懸停即現工具（Hover-Reveal Tools）

當用戶鼠標懸停于對象上方時顯示相關工具。還是以知乎為例：

正常狀態：正常狀態下，“關注”工具是隱藏的。

邀請：鼠標懸停時顯示關注工具。

需要注意的地方：

視覺干擾：基于懸停顯示工具可以減少界面上的視覺干擾，可以將非主要操作先隱藏起來，而在需要時再顯示。

易發現性：設計懸停即現工具時應該認真考慮的一個問題是易發現性。通過“還剩幾天結束”的文字突出內容的稀缺性，借助內容吸引用戶將鼠標移至相關區域并發現功能是一個不錯的做法。

覆蓋層中的上下文工具：

懸停與遮擋（反模式）：如上圖所示，基于懸停顯示的覆蓋層會遮住下面的信息，但知乎同時提供了兩種懸停顯示關注的工具。如果用戶不需要了解圓桌的介紹和相關信息可以直接點擊右邊的關注；如果用戶對于圓桌的內容感興趣，那么基于懸停顯示的內容不會對用戶造成干擾，他們本身就想把注意力轉移到覆蓋層上面。

神秘的肉（反模式）：用戶必須通過鼠標懸停才能得知如何使用某個項。

激活：工具覆蓋層應該即刻激活。工具是界面的擴展，任何延遲都會導致激活與操作之間的時間浪費。

三、開關顯示工具（Toggle-Reveal Tools）

只在頁面處于特定模式時顯示上下文工具，適用于操作并不主要，同時又想減少視覺干擾的情形，在類別編輯上非常適合。

當然，應該盡量避免把界面置于特殊模式下。

四、級聯遞進工具（Multi-Level Tools）

可以利用級聯遞進工具逐步顯示上下文工具。

級聯遞進工具的一個變體是Mutton：Menu + Button（菜單 + 按鈕） = Mutton，如果需要在一個菜單中提供多項操作，而又需要將其中一項作為默認操作時，就可以使用Mutton。

簡書可以自動保存用戶上一次使用的字體大小，并將其作為默認項。

五、二級菜單（Secondary Menu）

在桌面應用程序中很早就開始以二級菜單的形式支持上下文工具了，但在Web上并不常見，因為這樣做容易與瀏覽器菜單造成沖突，除非用戶能夠十分清楚界面中的對象，以及菜單的樣式是否足以與瀏覽器菜單區分開。

二級菜單的一個優勢是可以與某種選擇模型結合使用，從而能夠操作選擇的一組項。其他的上下文工具比如實時可見工具、懸停即現工具、開關顯示工具、級聯遞進工具都只能同時操作一項。

感謝閱讀~

作者：符芳濤Ford

來源：簡書