觸控屏幕手指點(diǎn)擊的人體工程學(xué)

1、觸控屏已伴隨我們渡過(guò)了數(shù)十載的歲月，它也是近五年內(nèi)大多數(shù)人在移動(dòng)設(shè)備上使用的輸入方式。事實(shí)上，很多新手設(shè)計(jì)師、入門開(kāi)發(fā)人員或者移動(dòng)互聯(lián)網(wǎng)入行較晚的人，甚至沒(méi)有用過(guò)帶物理按鍵的手機(jī)。不過(guò)，目前只有很少部分設(shè)計(jì)師了解觸控屏的工作方式并清楚人們是如何與之發(fā)生互動(dòng)的。我（原文作者）在不同公司擔(dān)任用戶體驗(yàn)設(shè)計(jì)咨詢師時(shí)，也碰到過(guò)一些觸控屏設(shè)計(jì)的誤區(qū)。一.不能只依賴44像素的觸控目標(biāo)即便市場(chǎng)份額已經(jīng)落后于Android，iOS定義的觸控目標(biāo)標(biāo)準(zhǔn)尺寸（44像素）也是我們大多數(shù)人遵循的原則，而此處44像素并非物理尺寸。移動(dòng)設(shè)備市場(chǎng)上存在不同規(guī)格的操作系統(tǒng)，Apple使用與設(shè)備無(wú)關(guān)的單位“pt（像素點(diǎn)）”來(lái)替代之

2、前“pixel（像素）”的概念，44像素或者44pt這類概念無(wú)法以物理尺寸來(lái)描述。物理尺寸當(dāng)然很重要，畢竟當(dāng)前所有的優(yōu)秀設(shè)計(jì)規(guī)范中都是以毫米、英尺、字號(hào)或其它真實(shí)尺寸來(lái)作為度量單位的。另外，諸多操作系統(tǒng)或嵌入式系統(tǒng)的設(shè)計(jì)規(guī)范定義的觸控目標(biāo)比各類相關(guān)研究提倡的尺寸要小。例如，Nokia與Microsoft等公司始終強(qiáng)調(diào)7毫米是觸控目標(biāo)的最佳尺寸，同時(shí)也認(rèn)為觸控目標(biāo)之間應(yīng)該保持2毫米的間距。ANSI/HFES 100-2007（譯者注：2007年11月美國(guó)國(guó)家標(biāo)準(zhǔn)機(jī)構(gòu)批準(zhǔn)通過(guò)的計(jì)算機(jī)人因工程學(xué)國(guó)家標(biāo)準(zhǔn)）推薦的按鈕最小尺寸為9.5毫米。為觸控屏做設(shè)計(jì)時(shí)，我們是無(wú)法使用單純的像素或唯一的尺寸來(lái)定義觸控

3、目標(biāo)的大小。二.不同大小的手指真的重要嗎？從另一個(gè)角度來(lái)考慮觸控目標(biāo)的尺寸，ISO 9241-9（譯者注：國(guó)際標(biāo)準(zhǔn)化組織ISO推出的覆蓋人機(jī)工程學(xué)的多部分標(biāo)準(zhǔn)）推薦的按鈕尺寸大小等于95%男性用戶的手指末關(guān)節(jié)寬度，大約為22毫米。但很多用戶卻使用拇指對(duì)移動(dòng)設(shè)備進(jìn)行操作。一些觸控目標(biāo)設(shè)計(jì)規(guī)范基于人們手指的寬度來(lái)制定，然而這種衡量方式并不完全科學(xué)。盡管我們有著不同寬度的手指，但當(dāng)我們操作電容觸控屏幕時(shí)，僅有一部分手指與屏幕接觸，如下圖所示：人的手指是立體柔軟并富有彈性的，接觸屏幕的面積隨著壓感和角度的不同而變化。一些研究結(jié)果建議用戶在觸控偏小的目標(biāo)時(shí)，放慢動(dòng)作并盡量采用更加精準(zhǔn)的觸控方式，例如拿指

4、尖觸碰；放輕動(dòng)作力度從而以更小的觸控印跡來(lái)獲得更佳的觸控感，將來(lái)我們可以好好利用這一建議。我（原文作者）通過(guò)研究發(fā)現(xiàn)，盡管手指更小，兒童在操作觸控屏幕時(shí)不如成人精準(zhǔn)，因?yàn)樗麄兣c成人具備同樣的觸控印跡。這種情況或許讓你感到驚訝，如今的觸控屏感知的只是觸控印跡的中心或質(zhì)心而不是整個(gè)觸控區(qū)域，如下圖所示：因此觸控屏無(wú)法將用戶觸控印跡的大小傳遞給手機(jī)應(yīng)用。移動(dòng)設(shè)備只是根據(jù)觸控印跡的質(zhì)心來(lái)判斷用戶點(diǎn)擊了什么，而不看觸控印跡的大小程度。幸運(yùn)的是，人們已經(jīng)能夠熟練運(yùn)用雙手并且善于點(diǎn)擊目標(biāo)的中心位置，因而能夠?qū)⒂|控質(zhì)心觸及他們想要的位置。在上圖中，被遮擋區(qū)域容易影響人們定位觸控印跡，但觸控印跡的質(zhì)心很容易讓人

5、們了解哪里被點(diǎn)擊了。誠(chéng)然，手指的大小會(huì)影響用戶的點(diǎn)擊界面的精度，但手指尺寸與觸控目標(biāo)的關(guān)系與之不能混為一談。這種情形下，手部遮蓋的屏幕部分究竟有多大取決于用戶手持設(shè)備的方式。三.臨界點(diǎn)之前越大的按鈕越好用當(dāng)觸控目標(biāo)為一個(gè)按鈕時(shí)，在達(dá)到某個(gè)臨界點(diǎn)之前越大越好。研究表明超過(guò)某個(gè)尺寸之后，按鈕面積的增大對(duì)于提高觸控交互準(zhǔn)確性的提升非常有限。當(dāng)按鈕變得過(guò)于龐大之后，用戶會(huì)懷疑它們是否可點(diǎn)擊，甚至將其當(dāng)做特殊的控件來(lái)看待。信奉按鈕越大越好帶來(lái)了一定程度的誤解，因?yàn)樗谷藗兿嘈趴梢晠^(qū)域即為觸控區(qū)域，這種觀點(diǎn)導(dǎo)致了很多設(shè)計(jì)問(wèn)題。實(shí)際上，為了獲得更大的觸控目標(biāo)，并不需要增加視覺(jué)區(qū)域的大小，而只需要增加可點(diǎn)擊按

6、鈕或鏈接的熱區(qū)大小。對(duì)于任何交互控件來(lái)說(shuō)，視覺(jué)區(qū)域的大小與觸控區(qū)域的大小不一致往往比一致更好。四.設(shè)計(jì)目標(biāo)當(dāng)設(shè)計(jì)觸控界面時(shí)，我們必須考慮到三方面：設(shè)計(jì)視覺(jué)目標(biāo)設(shè)計(jì)觸控目標(biāo)避免干擾1.設(shè)計(jì)視覺(jué)目標(biāo)視覺(jué)目標(biāo)包括文本鏈接、圖標(biāo)或者其它傳遞交互概念的圖形元素，它們必須足夠清晰、足夠大才能：吸引用戶眼球。使用戶了解它們是可以操作的元素。具備可讀性，從而讓用戶理解將會(huì)執(zhí)行什么操作。使用戶能輕而易舉的完成點(diǎn)擊動(dòng)作。視覺(jué)目標(biāo)的最常見(jiàn)問(wèn)題來(lái)自用戶期望目標(biāo)是什么。例如，在列表或表格中，如果行與行之間有可見(jiàn)背景或者分隔線，用戶一般會(huì)期望行間的單元格或者列作為目標(biāo)。因此不要僅僅將文字作為目標(biāo)，同時(shí)也要注意多加利用容器

7、和指示器引導(dǎo)點(diǎn)擊，確保盡可能的使用分隔符或容器。通常我們利用視覺(jué)目標(biāo)的設(shè)計(jì)來(lái)顯示多種狀態(tài)。很多觸控問(wèn)題歸結(jié)于緩慢的響應(yīng)速度，因?yàn)榇蟛糠钟脩粼跊](méi)有立即看到點(diǎn)擊反饋的情況下，會(huì)認(rèn)為點(diǎn)擊失敗而再次嘗試。只要設(shè)備接收到了觸碰的信號(hào)，視覺(jué)目標(biāo)應(yīng)該立即切換到與默認(rèn)狀態(tài)不同的激活狀態(tài)。切記用戶手指遮擋目標(biāo)時(shí)出現(xiàn)的問(wèn)題，確保狀態(tài)改變的視覺(jué)區(qū)域大到用戶很容易察覺(jué)。從人的視力角度來(lái)看，最重要的不是字體大小，而是通常被稱為角坐標(biāo)分辨率的視線角度。在下圖中，狹窄的錐形顯示最小可讀尺寸，較寬的錐形則是用戶目光聚焦的高分辨率區(qū)域。用戶觀看較遠(yuǎn)的設(shè)備時(shí)更大的字體能帶來(lái)更好的效果。最小字號(hào)必須滿足3個(gè)標(biāo)準(zhǔn)：可讀、易讀和可點(diǎn)擊

8、。如上圖示，通過(guò)角分辨率和距離的計(jì)算，可讀性的最小尺寸為6pt或者2.1毫米。除非是用來(lái)加強(qiáng)文本效果（例如鏈接打開(kāi)新窗口頁(yè)面的標(biāo)識(shí)），圖標(biāo)必須大于8pt或者2.8毫米。視力不佳的用戶需要更大的視覺(jué)目標(biāo)。視覺(jué)目標(biāo)同樣有最大尺寸的限制。不難得出這樣的觀點(diǎn)：我們注意力范圍遠(yuǎn)小于我們的視野范圍。錐形代表5度左右寬度的視網(wǎng)膜中心凹視力，約為以手臂為軸心，一半拳頭大小劃出的圓弧大小。這恰好正是大多數(shù)移動(dòng)手持設(shè)備的角度標(biāo)注，它遠(yuǎn)小于平板電腦的屏幕。因此，用戶無(wú)法察覺(jué)到跨越整屏大小的按鈕或其它可點(diǎn)擊元素是可操作的。如果你認(rèn)為橫幅廣告是個(gè)例外的話，請(qǐng)注意，大多數(shù)橫幅廣告通常含有偏小尺寸的行動(dòng)按鈕或鏈接。因此請(qǐng)確

9、保你的視覺(jué)目標(biāo)在用戶的關(guān)注區(qū)域中不至于過(guò)大。注釋：除非特別聲明，作者提供的具體設(shè)計(jì)規(guī)范僅適用于手機(jī)。人們?cè)诟h(yuǎn)的距離下使用平板電腦、臺(tái)式顯示器和視頻播放器，根據(jù)屏幕尺寸和期望結(jié)果，你可能需要設(shè)計(jì)更大的視覺(jué)區(qū)域。人們常常在離自己很近的情況下手持偏小的移動(dòng)設(shè)備，比如大部分功能手機(jī)，因此你可以用偏小的尺寸作為視覺(jué)目標(biāo)。只要確保計(jì)算好角坐標(biāo)分辨率并且讓真實(shí)用戶在真實(shí)設(shè)備上測(cè)試可讀性就好。2.設(shè)計(jì)觸控目標(biāo)用戶可以在屏幕中進(jìn)行操作的區(qū)域稱為觸控目標(biāo)，在觸控目標(biāo)之外的屏幕區(qū)域進(jìn)行觸控?zé)o法激活對(duì)應(yīng)目標(biāo)。正如我（原文作者）之前所提到的，目標(biāo)的視覺(jué)設(shè)計(jì)決定了用戶對(duì)其尺寸大小的期望。如果用戶期望該按鈕或元素可以被點(diǎn)

10、擊，那么讓它整個(gè)看起來(lái)應(yīng)該就是可點(diǎn)擊的。我曾遇到很多按鈕僅有文字區(qū)域可點(diǎn)擊，而其它區(qū)域點(diǎn)擊上去沒(méi)有任何作用。因?yàn)橛|控屏幕僅對(duì)觸控印跡的質(zhì)心或者中心敏感，所以僅從用戶手指的觸控印跡無(wú)法像人們認(rèn)為的那樣可以確定觸控目標(biāo)了。為了了解當(dāng)觸控目標(biāo)有多大時(shí)不會(huì)影響到可用性，我（原文作者）閱讀了大量文獻(xiàn)并且查閱了圓概率偏差（CEP）有關(guān)概念的數(shù)學(xué)資料。任何定位都有不可避免的誤差存在。用戶在目標(biāo)上的實(shí)際觸控區(qū)域是不完全規(guī)則的，它們分布在目標(biāo)周圍。這種分布不是隨機(jī)的，而是緊緊圍繞著視覺(jué)目標(biāo)。通過(guò)測(cè)量它們的誤差，你能將圓概率偏差作為命中率的指標(biāo)，并能得知用戶是否可以在可接受的精度下?lián)糁心繕?biāo)。精度超過(guò)95%之后會(huì)出

11、現(xiàn)收益遞減，說(shuō)明很小的改進(jìn)需要更大的目標(biāo)。因此我（原文作者）使用R95的圓概率偏差來(lái)確定尺寸的大小。文本鏈接往往很小而難以準(zhǔn)確點(diǎn)擊。一些現(xiàn)代的操作系統(tǒng)和瀏覽器，比如Google Chrome嘗試通過(guò)將那些偏小目標(biāo)或模糊目標(biāo)放大，從而提供更大的點(diǎn)擊區(qū)域來(lái)解決這類問(wèn)題。如下圖所示：然而，視覺(jué)目標(biāo)一般情況下不應(yīng)該是并且不必是觸控目標(biāo)。例如，移動(dòng)站點(diǎn)經(jīng)常有很小的（6pt）文字鏈接跳轉(zhuǎn)到網(wǎng)站申明或完整站點(diǎn)，因?yàn)椴幌胱層脩絷P(guān)注到該鏈接太多而使用較小的文字尺寸，但同時(shí)太小的尺寸而會(huì)變得難以點(diǎn)擊。很簡(jiǎn)單，第一，并不是只有文字鏈接的視覺(jué)元素本身才能被點(diǎn)擊，它周圍的區(qū)域都可以作為可點(diǎn)擊熱區(qū)。（如果你用手指拖動(dòng)來(lái)選

12、擇文本的話你會(huì)發(fā)現(xiàn)鏈接的可點(diǎn)擊區(qū)域。）如果一個(gè)使用6pt字號(hào)Helvetica字體的鏈接，其可點(diǎn)擊區(qū)域應(yīng)該在7.68pt或者2.7毫米高度左右的范圍內(nèi)。但這還遠(yuǎn)沒(méi)達(dá)到容易點(diǎn)擊的尺寸，用戶仍然可能在這種尺寸的熱區(qū)上遇到50%的誤操作率。在用戶相對(duì)靜止的狀態(tài)下，可靠的最小點(diǎn)擊區(qū)域?yàn)?毫米。當(dāng)用戶在移動(dòng)過(guò)程中或者注意力分散時(shí)，8毫米的點(diǎn)擊區(qū)域才夠。更小的觸控目標(biāo)可能延緩用戶操作速率，這往往會(huì)造成無(wú)法接受的界面操作效率下降。同時(shí)，也沒(méi)有任何觸控區(qū)域必須大于15毫米。這也取決于你測(cè)量觸控質(zhì)心的方式，有時(shí)質(zhì)心趨于出現(xiàn)在視覺(jué)目標(biāo)中心線的下方。盡管從技術(shù)角度來(lái)說(shuō)是準(zhǔn)確的，但圓概率偏差（D2RMS or R95

13、）方面有效理論并沒(méi)有證實(shí)這一點(diǎn)。測(cè)量等距的高點(diǎn)擊和靠近中心的低點(diǎn)擊的差異沒(méi)有任何統(tǒng)計(jì)學(xué)意義。我不由將它納入移動(dòng)設(shè)計(jì)無(wú)法解釋的現(xiàn)象，因?yàn)樗鼘?duì)設(shè)計(jì)沒(méi)有絲毫影響。3.避免干擾保證觸控目標(biāo)的合適尺寸意味著它能被用戶點(diǎn)擊。當(dāng)用戶無(wú)法精確的點(diǎn)擊觸控目標(biāo)時(shí)，則會(huì)導(dǎo)致目標(biāo)未被激活。我們要留意的一個(gè)關(guān)鍵因素是當(dāng)用戶錯(cuò)失一個(gè)觸控目標(biāo)時(shí)會(huì)有什么結(jié)果。無(wú)論如何人們總是會(huì)錯(cuò)失一些目標(biāo)，那么如何為出錯(cuò)買單則至關(guān)重要。當(dāng)界面上兩個(gè)或更多觸控目標(biāo)的物理距離太近時(shí)，圓概率誤差半徑致使一個(gè)目標(biāo)覆蓋到另外一個(gè)目標(biāo)之上，這會(huì)造成嚴(yán)重的干擾。因此我們要確保在觸控目標(biāo)的每條軸上對(duì)干擾進(jìn)行檢查。為了避免干擾，應(yīng)確保各個(gè)觸控目標(biāo)的中心至少保

14、持8毫米距離，最佳為10毫米。此處的“中心”為工程術(shù)語(yǔ)，表示從每個(gè)觸控目標(biāo)的中心位置。按這種方法，你能測(cè)量不同尺寸控件（比如鏈接和按鈕）的中心位置，因?yàn)檫@種測(cè)量方式與視覺(jué)和觸控目標(biāo)尺寸皆無(wú)關(guān)。大多數(shù)觸控目標(biāo)之間不會(huì)距離太近，它們之間僅留很小的間隔，并且這種間隔較難察覺(jué)。非觸控區(qū)域不需要留白，比如，工具欄通常由間距適當(dāng)?shù)膱D標(biāo)組成，但它們之間的間距不會(huì)在視覺(jué)上有明顯提示。分頁(yè)標(biāo)簽的高度可以做的很矮，只要其上下方?jīng)]有其它觸控目標(biāo)。不管是原始屏幕還是拉伸屏幕，在每個(gè)目標(biāo)上用一個(gè)圈來(lái)驗(yàn)證干擾問(wèn)題，如下圖所示：在這里外圈為10毫米直徑，內(nèi)圈為8毫米直徑。左右兩張截圖里的列表項(xiàng)高度都為最小可接受尺寸。但左邊

15、截圖中很矮的分頁(yè)標(biāo)簽可能會(huì)給操作帶來(lái)一些干擾：用戶有可能不慎在點(diǎn)擊標(biāo)簽時(shí)激活下面列表項(xiàng)。規(guī)避風(fēng)險(xiǎn)是防干擾設(shè)計(jì)的另外一種手段，讓觸控目標(biāo)保持足夠間隔從而避免誤點(diǎn)擊往往很難。有時(shí)候操作系統(tǒng)規(guī)范過(guò)度強(qiáng)調(diào)使用偏小且相鄰的目標(biāo)，使用一些策略來(lái)解決這類問(wèn)題相對(duì)來(lái)說(shuō)不難。不要將按鈕放在糟糕的位置，也不要讓操作結(jié)果很難撤銷，這樣會(huì)帶來(lái)各種麻煩。例如，用戶在界面上撰寫一封郵件時(shí)，“發(fā)送”和“刪除”按鈕應(yīng)該遠(yuǎn)離對(duì)方，并且遠(yuǎn)離格式調(diào)整之類的功能。偶爾的誤點(diǎn)“加粗文字”按鈕能通過(guò)再次點(diǎn)擊取消，但要取消發(fā)送郵件很難，而且恢復(fù)刪除的郵件需要在郵件垃圾箱里重新找到該誤刪郵件。在移動(dòng)設(shè)備上，交互元素彼此臨近。當(dāng)使用手指點(diǎn)擊或

16、進(jìn)行其它手勢(shì)操作時(shí)經(jīng)常發(fā)生誤操作。幸運(yùn)的是，一些最佳設(shè)計(jì)實(shí)踐已經(jīng)從很大程度上解決了這類問(wèn)題：我們花時(shí)間將功能按照行為類型分組，從視覺(jué)設(shè)計(jì)上使得觸控目標(biāo)之間不會(huì)太過(guò)靠近，對(duì)不同重要性的控件在視覺(jué)上和位置上做出區(qū)分。鼓勵(lì)有興趣的讀者進(jìn)一步研究觸摸屏技術(shù)從而更好的理解它的功能和限制。舉個(gè)例子，觸摸屏的設(shè)計(jì)會(huì)在不同類型的設(shè)備之間引起精度問(wèn)題，特別是在屏幕的某些位置更加明顯。只要我們更好的了解這些技術(shù)限制，就有可能更好的通過(guò)避免在屏幕上低分辨率位置進(jìn)行細(xì)致觸控操作來(lái)規(guī)避這些問(wèn)題。五.設(shè)計(jì)手勢(shì)和動(dòng)作本文主要闡述包括點(diǎn)擊和長(zhǎng)按操作的觸控交互設(shè)計(jì)，而在如何將人體工程學(xué)因素應(yīng)用在手勢(shì)上所作的研究甚少。例如，設(shè)計(jì)

17、一個(gè)易用的音量調(diào)節(jié)滑塊，在任何觸控交互中都有長(zhǎng)按控件這一前提，但當(dāng)用戶在屏幕上移動(dòng)手指來(lái)拖動(dòng)控件時(shí)就需要考慮更多方面了。具體來(lái)說(shuō)，就是需要將拖動(dòng)的方向限制在單軸、特定的角度或動(dòng)作上。在水平音量調(diào)節(jié)滑塊上，一旦用戶激活了控件，應(yīng)用應(yīng)該忽略用戶手指在垂直方向上的所有移動(dòng)。這是讓用戶精確操作控件的秘訣。其它手勢(shì)交互需要大體類似但稍有區(qū)別的規(guī)范。關(guān)于觸摸設(shè)計(jì)，無(wú)論從定義上還是理解上，有許多對(duì)手勢(shì)設(shè)計(jì)最佳實(shí)踐的誤解，因此在進(jìn)行手勢(shì)設(shè)計(jì)時(shí)務(wù)必認(rèn)真考慮用戶的需要。希望在不斷擴(kuò)充手勢(shì)設(shè)計(jì)最佳實(shí)踐的同時(shí)，一些實(shí)用研究能幫助我們更深入的了解手勢(shì)設(shè)計(jì)。觸摸屏設(shè)計(jì)規(guī)范總結(jié)我（原文作者）做過(guò)很多這方面設(shè)計(jì)依據(jù)的闡述，所以會(huì)總結(jié)一下在設(shè)計(jì)觸摸用戶界面時(shí)需要遵循的關(guān)鍵步驟：1.確定每個(gè)視覺(jué)目標(biāo)的尺寸。2.在你的設(shè)計(jì)文檔中定義每個(gè)觸控目標(biāo)的