考慮到手指、觸屏和人的設計

備註:本文作者在2013年寫過一篇專欄文章《用戶如何真正持有移動設備?》,文中有一張我們在很多場合看到過的圖片,如下圖。隨着設備的不斷更新、交互方式的變化,文中的很多結論已不再適用。該文是作者通過大量的研究和分析後,在2017年新得出的結論。

原作者:Steven Hoober發佈時間:2017-03-06

原文章:Design for Fingers, Touch, and People, Part 1


1、關於觸屏面積的研究

“接觸面”指用戶手指與電容式觸摸屏接觸的區域。如圖所示,該區域的大小隨用戶觸摸屏幕方式不同而發生變化,如用指尖還是指腹觸摸、下壓的力度等。沒有把研究中發現的不同用戶指腹觸摸大小的數據拎出來是因爲:指腹大小的差異並沒有你想象中大,也沒有你想象中重要。

2、關於手持手機姿勢的研究

人們會以多種方式手持手機,並且手持姿勢會不斷變化。所以之前的圖1中拇指掃動盲區的圖示是不適用的。

根據研究,關於用戶持握手機得出以下幾組數據和結論:

·人們會因環境、設備、需求的不同,採取多種不同的持握方式;

·人們持握手機的方式是無意識地變換的,是無法預測的;

·75% 的用戶僅用一個拇指觸摸屏幕;

·不到 50% 的用戶單手持握手機;

·36% 的用戶雙手持手機,其中一隻手來操作,既穩定又能提高觸屏的準確性;

·10% 的用戶一隻手拿手機,另一隻手的手指敲擊。

3、人們擅長點擊屏幕中心

觸屏點擊是不準確的,圖4描述了左上角圖標的觸控精準性。目標點擊區域不存在完美的目標尺寸,一些用戶甚至都沒有點到目標,因此只需達到一定的比率即可。圖中綠色的圓圈是R95圓概率誤差範圍(95%的觸擊點都會落在這個半徑範圍內)。

雖然觸控是不準確的,但是這種不準確是有規律的。人們更擅長點擊屏幕中心的目標,屏幕中心的目標的可點擊區域可小至7mm,而屏幕角落目標的需要更大,約12mm。

tips:

觸屏是不準確的,所以觸屏對象間會存在干擾,這時候設計就要注意避免將破壞性選項和正向選項放一起,如請勿將格式相關按鈕和發送按鈕放一起。(關於災難性設計NNG上有一篇文章,我有將其翻譯:勿將破壞性選項和正向選項放一起)。

綜合考慮用戶點擊的不準確性和視覺偏好,在界面的信息層級設計有一些小建議。將次要操作放在屏幕的頂部或底部邊緣,把第三級功能統一收納到菜單裏,用戶通過點擊角落的按鈕查看它們。

屏幕頂部或底部的操作按鈕數量要儘可能少,留出足夠的空間。不要在菜單欄上放置4個以上的操作按鈕。

4、人們喜歡點擊屏幕中心

在移動設備上,人們的視線不是從左上掃描到右下,手指操作也不是從右下到左上,人們的視線和操作都更喜歡集中於屏幕的中央。圖 5 顯示在全屏滾動列表中,用戶的實際點擊熱力圖。

在實驗中發現,如果允許用戶把內容移動到屏幕中的任意他們感到舒適的位置時,用戶會內容移動到屏幕中央後進行操作。因此,重要的可點擊的元素不應該放在屏幕的邊緣,而因放在屏幕中央。即便不把重要信息放在頁面中央,用戶仍會嘗試將內容移至屏幕中間,這樣即浪費了他們的時間,增加了他們的挫敗感,用戶會感到不爽。

tips:

在設計需要滾動或佔據整屏的內容時,要在文章頁面和表單的底部留出空白,方便用戶可以將文本的最後一行滑到屏幕中央。不要將內容填滿整個頁面,也要避免一頁內容結束剛好卡到下一頁就開始的設計方式。

5、手指會礙事

在文章一開頭說過手指的大小並不重要,這僅僅指的是指腹大小與觸屏目標大小和精準度無太大關係,但是手指不是透明的,它會遮擋視線。用戶無法看到他在操作的圖標,也不知道是否操作成功,除非把手指移開。因此在設計時,因保證目標和目標狀態變化能夠讓用戶看到。

在一項讓用戶滾動並點擊列表的調研中,發現了人們點擊區域的偏好:大部分用戶會點擊右側、一些用戶點擊屏幕中央、很少有用戶點擊左側。當內容鋪滿全屏,用戶習慣側邊滑動屏幕並在側邊點擊,即便用戶使用的是左手滑動也會跨過內容區滑右側空白區。但是一些從右向左閱讀文化如阿拉伯文的用戶,他們習慣點擊左側的空白區域。

研究中還發現,因爲平板的屏幕較大,一般情況列表不會撐滿整個頁面的寬,人們更傾向於在靠近屏幕中央的位置滑動操作。

tips:

內容間要有合理的留白和足夠的邊距,給用戶足夠的安全感在遠離內容區的空白區域進行操作。

6、手機不是平的

手機會有凸起的邊框,比如手機殼,也有一些邊緣是曲面屏的手機,在手機的邊緣屏幕會逐漸彎曲,偏離用戶的視覺平面,設計的時候要注意在邊緣留有一定間隙。

結論

· 將內容和功能放到屏幕中央

· 考慮到手指會遮擋內容,設計時確保交互操作的結果可以被看到

· 針對屏幕區域不同位置做不同的設計,在屏幕的邊緣和角落處使用更大的觸控目標

· 合理佈局觸控目標,避免用戶誤觸造成災難性後果

· 設計用戶界面和交互時要保持一致性

· 關注用戶以及用戶使用的設備、模式和情景

· 使用實際尺寸設計移動界面

· 在真機上測試你的設計

· 請記住爲手、手指、拇指和人類設計

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章