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

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

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

外形相同或過于相似的對象,所觸發(fā)的事件是截然不同的,這種情況會使人迷惑不安。雖然行業(yè)中關(guān)于漢堡包圖標的爭論愈發(fā)激烈,但越來越多的用戶已經(jīng)開始習(xí)慣了“點擊三根線的圖標展開導(dǎo)航菜單”的模式。當(dāng)他們發(fā)現(xiàn)行為結(jié)果和他們所習(xí)慣的、所預(yù)期的東西不一致時,就會產(chǎn)生挫敗與迷茫。
鑒于拖拽圖標所存在的一些可用性問題,我們建議:
至少允許用戶長按目標單元整體也能實現(xiàn)拖拽的目標,而不要只將交互區(qū)域限制在拖拽圖標上。
另一方面,對于漢堡包菜單圖標,可以嘗試更清晰明確的表達方式,例如在三根線前面增加三個點,或是同時放出“菜單”標題在圖標旁邊。
------北京網(wǎng)站建設(shè)公司 北京傳誠信------
-
安卓和蘋果手表之間的操作系統(tǒng)對比。
日期:2015-08-12 瀏覽次數(shù):2990
-
iOS的UI元素導(dǎo)航欄里的完成按鈕的優(yōu)化
日期:2015-08-12 瀏覽次數(shù):2673
-
iOS當(dāng)中UI元素頁碼指示符(小圓點)的優(yōu)化。
日期:2015-08-12 瀏覽次數(shù):2806
-
如何打造響應(yīng)式的布局結(jié)構(gòu)。
日期:2015-07-23 瀏覽次數(shù):2689
-
CSS3樣式收集
日期:2015-07-30 瀏覽次數(shù):3027
-
免費SSL證書申請網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):1924
-
如何在北京順義尋找一個踏實的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):4981
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點
日期:2023-05-25 瀏覽次數(shù):5362
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):4201
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):4419
-
網(wǎng)站可用性或用戶體驗的重要性
日期:2019-03-07 瀏覽次數(shù):2582
-
如何提高您的網(wǎng)站的移動加載速度
日期:2019-04-16 瀏覽次數(shù):2465
-
網(wǎng)站設(shè)計中插件對網(wǎng)站速度的影響及解決方法
日期:2019-02-20 瀏覽次數(shù):2882
-
網(wǎng)站設(shè)計的類型和應(yīng)用工具
日期:2019-01-29 瀏覽次數(shù):2534
-
?HTML5是怎么來的!
日期:2015-07-31 瀏覽次數(shù):2833










