大多數(shù)桌面應(yīng)用程序，會(huì)把功能和數(shù)據(jù)分開來處理，然而這種方式違背了費(fèi)茨定律，看起來也比較擁擠。為了簡(jiǎn)化交互，可以通過把操作工具直接放在內(nèi)容中，使內(nèi)容和操作融合。具體如何做呢？本文作者對(duì)此進(jìn)行了分析，一起來看一下吧。

一、簡(jiǎn)化交互 Keep It Lightweight

大多數(shù)桌面應(yīng)用程序都把功能與數(shù)據(jù)分開來處理。菜單欄、工具欄、調(diào)色板等是功能的載體，用戶要么選擇一種工具，要么選擇一些對(duì)象，然后再應(yīng)用工具來操作數(shù)據(jù)。

如設(shè)計(jì)師常用的sketch軟件，工具欄和具體的操作對(duì)象是分開的。

但是這種方式違背了費(fèi)茨定律，而且看起來也比較擁擠。

費(fèi)茨定律指出目標(biāo)大小及其上下文的接近程度，會(huì)影響目標(biāo)是否容易使用。具體如下：

到達(dá)目標(biāo)的時(shí)間是到達(dá)目標(biāo)的距離與目標(biāo)大小的函數(shù)?：

如果用戶移動(dòng)鼠標(biāo)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么就越容易操作。

因此為了簡(jiǎn)化交互，可以通過把操作工具直接放在內(nèi)容中（運(yùn)用上下文工具），使內(nèi)容和操作融合。

二、上下文工具

直接放在頁面內(nèi)容上下文中的相關(guān)工具。包括：

• 實(shí)時(shí)可見工具：把上下文工具直接放在內(nèi)容中
• 懸停即現(xiàn)工具：在鼠標(biāo)懸停的時(shí)候顯示上下文工具
• 開關(guān)顯示工具：打開/關(guān)閉頁面中的上下文工具
• 級(jí)聯(lián)遞進(jìn)工具：基于用戶操作漸進(jìn)呈現(xiàn)工具
• 二級(jí)菜單：顯示二級(jí)菜單

1. 實(shí)時(shí)可見工具

如果某個(gè)操作非常重要，那就應(yīng)該把它直接放在界面中，提供明確邀請(qǐng)，并實(shí)時(shí)可見，而不是等到鼠標(biāo)懸浮時(shí)才展示。

如知乎的點(diǎn)贊收藏，用戶可以直接點(diǎn)擊“贊同”按鈕進(jìn)行點(diǎn)贊，并實(shí)時(shí)展示贊同數(shù)量；而“分享”、“收藏”、“舉報(bào)”等次要功能的樣式有所差異。

京東商城的購物車，用戶可以直接通過加減號(hào)編輯商品數(shù)量。

2. 懸停即現(xiàn)工具

當(dāng)操作沒那么重要，使用「實(shí)時(shí)可見工具」容易形成視覺干擾時(shí)，可以在用戶鼠標(biāo)懸停于對(duì)象時(shí)顯示相關(guān)工具。

如網(wǎng)易郵箱中，當(dāng)用戶鼠標(biāo)懸停時(shí)展示標(biāo)記刪除等功能。這些非核心功能，如果每封郵件上都顯示按鈕，會(huì)讓頁面顯得復(fù)雜。

注意事項(xiàng)：

為減少視覺干擾，避免喧賓奪主，可以將非主要操作先隱藏起來，在需要時(shí)再顯示。

1）覆蓋層中的上下文工具

有時(shí)候針對(duì)某個(gè)對(duì)象的操作會(huì)比較多，此時(shí)可以將工具顯示在覆蓋層中。但是也會(huì)有一些問題：

• 覆蓋層會(huì)讓人覺得局促，同時(shí)會(huì)轉(zhuǎn)移用戶部分注意力
• 覆蓋層會(huì)遮住其他信息

覆蓋層中的上下文工具在手機(jī)屏幕中也很常見，屏幕尺寸有限，需要為用戶提供的操作不止一項(xiàng)，此時(shí)可以考慮覆蓋層，如微信聊天右上角的“+”。

2）懸停與遮擋

鼠標(biāo)懸停時(shí)展示的項(xiàng)目，應(yīng)該盡可能少的遮擋頁面。如下圖中鼠標(biāo)懸停時(shí)，整個(gè)區(qū)域被罩上了半透明蒙層，導(dǎo)致下方頁面的所有內(nèi)容都無法看。?????????????

3. 開關(guān)顯示工具

只在頁面處于特定模式時(shí)顯示，可以使用開關(guān)顯示工具。

界面通常不應(yīng)該有模式之分。但是有時(shí)候可以采用容易開啟和關(guān)閉的軟模式來提供上下文工具。當(dāng)某項(xiàng)操作并非核心操作，又不想增加視覺干擾的情況下使用開關(guān)顯示工具。

如京東商城中購物車頁面，只有進(jìn)入編輯狀態(tài)后，會(huì)在下方展示收藏、刪除等操作按鈕，非編輯模式下不展示。????????????????

4. 級(jí)聯(lián)遞進(jìn)工具

可以利用級(jí)聯(lián)遞進(jìn)工具逐步顯示上下文工具。如微信公眾平臺(tái)中編輯已發(fā)布的文章時(shí)，鼠標(biāo)懸停時(shí)展示三個(gè)操作按鈕，當(dāng)鼠標(biāo)繼續(xù)懸停在“…”按鈕時(shí)，顯示更多操作選項(xiàng)。

級(jí)聯(lián)菜單也是很好的例子。如電商網(wǎng)站京東商城，選中一個(gè)菜單后，系統(tǒng)會(huì)繼續(xù)顯示該類目的下一級(jí)菜單。

1）Mutton

Mutton是級(jí)聯(lián)遞進(jìn)工具的變體，Menu+Button=Mutton，按鈕+菜單=Mutton。如果需要在一個(gè)菜單中提供多項(xiàng)操作，而又必須將其中一項(xiàng)作為默認(rèn)操作時(shí)，就可以時(shí)候Mutton。

如網(wǎng)易郵箱中的“回復(fù)全部”功能，點(diǎn)擊回復(fù)全部按鈕后直接回復(fù)郵件，點(diǎn)擊按鈕右側(cè)的下拉箭頭，進(jìn)一步顯示菜單。

2）反模式：目標(biāo)過小

根據(jù)費(fèi)茨定律，可點(diǎn)擊區(qū)域過小會(huì)導(dǎo)致交互困難。可視區(qū)域≠可點(diǎn)擊區(qū)域。

如下圖Ant Design中指出，如果可點(diǎn)擊區(qū)域僅僅是文本區(qū)域就會(huì)目標(biāo)過小，用戶不容易點(diǎn)擊，可將可點(diǎn)擊區(qū)域擴(kuò)大至整塊文本區(qū)域。

5. 二級(jí)菜單

二級(jí)菜單在web設(shè)計(jì)中其實(shí)并不常見。通常激活方式是單擊鼠標(biāo)右鍵后，展示相關(guān)二級(jí)菜單。

如網(wǎng)易郵箱中，在郵件上方的標(biāo)簽項(xiàng)單擊鼠標(biāo)右鍵，會(huì)顯示二級(jí)菜單。

三、總結(jié)

上下文工具是方便用戶操作的有效手段。把工具放在接近焦點(diǎn)的地方，而且容易被激活，可以達(dá)到簡(jiǎn)化交互的目的。

前序文章鏈接：

頁內(nèi)編輯：http://www.codemsi.com/ucd/5762358.html

利用拖放：http://www.codemsi.com/pd/5763808.html