中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、簡化交互 Keep It Lightweight

大多數桌面應用程序都把功能與數據分開來處理。菜單欄、工具欄、調色板等是功能的載體，用戶要么選擇一種工具，要么選擇一些對象，然后再應用工具來操作數據。

如設計師常用的sketch軟件，工具欄和具體的操作對象是分開的。

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

費茨定律指出目標大小及其上下文的接近程度，會影響目標是否容易使用。具體如下：

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

如果用戶移動鼠標距離越少、對象相對目標越大，那么就越容易操作。

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

二、上下文工具

直接放在頁面內容上下文中的相關工具。包括：

• 實時可見工具：把上下文工具直接放在內容中
• 懸停即現工具：在鼠標懸停的時候顯示上下文工具
• 開關顯示工具：打開/關閉頁面中的上下文工具
• 級聯遞進工具：基于用戶操作漸進呈現工具
• 二級菜單：顯示二級菜單

1. 實時可見工具

如果某個操作非常重要，那就應該把它直接放在界面中，提供明確邀請，并實時可見，而不是等到鼠標懸浮時才展示。

如知乎的點贊收藏，用戶可以直接點擊“贊同”按鈕進行點贊，并實時展示贊同數量；而“分享”、“收藏”、“舉報”等次要功能的樣式有所差異。

京東商城的購物車，用戶可以直接通過加減號編輯商品數量。

2. 懸停即現工具

當操作沒那么重要，使用「實時可見工具」容易形成視覺干擾時，可以在用戶鼠標懸停于對象時顯示相關工具。

如網易郵箱中，當用戶鼠標懸停時展示標記刪除等功能。這些非核心功能，如果每封郵件上都顯示按鈕，會讓頁面顯得復雜。

注意事項：

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

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

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

• 覆蓋層會讓人覺得局促，同時會轉移用戶部分注意力
• 覆蓋層會遮住其他信息

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

2）懸停與遮擋

鼠標懸停時展示的項目，應該盡可能少的遮擋頁面。如下圖中鼠標懸停時，整個區域被罩上了半透明蒙層，導致下方頁面的所有內容都無法看。?????????????

3. 開關顯示工具

只在頁面處于特定模式時顯示，可以使用開關顯示工具。

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

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

4. 級聯遞進工具

可以利用級聯遞進工具逐步顯示上下文工具。如微信公眾平臺中編輯已發布的文章時，鼠標懸停時展示三個操作按鈕，當鼠標繼續懸停在“…”按鈕時，顯示更多操作選項。

級聯菜單也是很好的例子。如電商網站京東商城，選中一個菜單后，系統會繼續顯示該類目的下一級菜單。

1）Mutton

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

如網易郵箱中的“回復全部”功能，點擊回復全部按鈕后直接回復郵件，點擊按鈕右側的下拉箭頭，進一步顯示菜單。

2）反模式：目標過小

根據費茨定律，可點擊區域過小會導致交互困難?？梢晠^域≠可點擊區域。

如下圖Ant Design中指出，如果可點擊區域僅僅是文本區域就會目標過小，用戶不容易點擊，可將可點擊區域擴大至整塊文本區域。

5. 二級菜單

二級菜單在web設計中其實并不常見。通常激活方式是單擊鼠標右鍵后，展示相關二級菜單。

如網易郵箱中，在郵件上方的標簽項單擊鼠標右鍵，會顯示二級菜單。

三、總結

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

前序文章鏈接：

頁內編輯：http://www.aharts.cn/ucd/5762358.html

利用拖放：http://www.aharts.cn/pd/5763808.html