iOS中UI元素拖拽圖標(biāo)的優(yōu)化
發(fā)表日期:2015/8/12 11:54:23 文章編輯: 瀏覽次數(shù):2831

和移動設(shè)備上建設(shè)網(wǎng)站的很多其他圖標(biāo)一樣,拖拽圖標(biāo)也并不能很直觀的體現(xiàn)出背后的含義。我們發(fā)現(xiàn)很多用戶其實并不明白這個圖標(biāo)代表著所在元素是可以被拖拽移動的,而且縱向排列的三條橫線也很容易讓人誤以為是某種菜單圖標(biāo)。實際上,這種形象隱喻的是可拖拽物體上的防滑條紋,好像你把手指放在上面就可以拖動整個對象而不至于打滑。通常,用戶需要長按這個圖標(biāo),使對象整體進(jìn)入某種激活狀態(tài),然后拖拽到合適的位置。
在可用性測試當(dāng)中,我們發(fā)現(xiàn),用戶更傾向于點(diǎn)按對象本身進(jìn)行拖拽,而不是去按住一個含義模棱兩可的小圖標(biāo)。相比于列表單元這樣的對象,圖標(biāo)在尺寸上太小了,如果要求用戶必須通過按住它來拖動整個單元,那么交互成本的增加就是必然的(相關(guān)閱讀:交互成本的定義及案例分析)。此外,用戶也會認(rèn)為一個單元整體只會觸發(fā)一種行為,也就是無論拖拽小圖標(biāo)還是單元本身,都可以使其被拖動。

Yahoo! Finace使用了標(biāo)準(zhǔn)的iOS拖拽圖標(biāo),用戶長按該圖標(biāo)可以使單元進(jìn)入可拖動狀態(tài)。雖然列表單元本身是目標(biāo)更大、更易操作、更符合直覺的對象,但用戶卻無法通過長按單元本身來達(dá)到觸發(fā)拖拽的目標(biāo)。
此外,我們還是要強(qiáng)調(diào)一下拖拽圖標(biāo)與我們所熟悉的漢堡包菜單圖標(biāo)真的過于相似了:

外形相同或過于相似的對象,所觸發(fā)的事件是截然不同的,這種情況會使人迷惑不安。雖然行業(yè)中關(guān)于漢堡包圖標(biāo)的爭論愈發(fā)激烈,但越來越多的用戶已經(jīng)開始習(xí)慣了“點(diǎn)擊三根線的圖標(biāo)展開導(dǎo)航菜單”的模式。當(dāng)他們發(fā)現(xiàn)行為結(jié)果和他們所習(xí)慣的、所預(yù)期的東西不一致時,就會產(chǎn)生挫敗與迷茫。
鑒于拖拽圖標(biāo)所存在的一些可用性問題,我們建議:
至少允許用戶長按目標(biāo)單元整體也能實現(xiàn)拖拽的目標(biāo),而不要只將交互區(qū)域限制在拖拽圖標(biāo)上。
另一方面,對于漢堡包菜單圖標(biāo),可以嘗試更清晰明確的表達(dá)方式,例如在三根線前面增加三個點(diǎn),或是同時放出“菜單”標(biāo)題在圖標(biāo)旁邊。
------北京網(wǎng)站建設(shè)公司 北京傳誠信------
-
安卓和蘋果手表之間的操作系統(tǒng)對比。
日期:2015-08-12 瀏覽次數(shù):3115
-
iOS的UI元素導(dǎo)航欄里的完成按鈕的優(yōu)化
日期:2015-08-12 瀏覽次數(shù):2766
-
iOS當(dāng)中UI元素頁碼指示符(小圓點(diǎn))的優(yōu)化。
日期:2015-08-12 瀏覽次數(shù):2935
-
如何打造響應(yīng)式的布局結(jié)構(gòu)。
日期:2015-07-23 瀏覽次數(shù):2839
-
CSS3樣式收集
日期:2015-07-30 瀏覽次數(shù):3173
-
免費(fèi)SSL證書申請網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):2262
-
如何在北京順義尋找一個踏實的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):5288
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點(diǎn)
日期:2023-05-25 瀏覽次數(shù):5651
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):4475
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):4717
-
北京順義網(wǎng)站前端制作開發(fā)
日期:2023-03-23 瀏覽次數(shù):3613
-
如何讓網(wǎng)站移動端更友好
日期:2018-12-03 瀏覽次數(shù):2818
-
網(wǎng)站數(shù)據(jù)安全操作的幾個重要概念
日期:2019-07-02 瀏覽次數(shù):2958
-
如何為您的網(wǎng)站設(shè)計完美的目標(biāo)網(wǎng)頁
日期:2019-03-13 瀏覽次數(shù):2596
-
可追溯性SEO術(shù)語解釋
日期:2018-12-05 瀏覽次數(shù):2898










