iOS 人機交互規範裡面的 44*44 最小點觸面積，在不同設備不同 PPI 時該如何處理？

01-23

44*44像素是按iPhone一~三代換算的。實際上HIG中說了是44x44 points。

iOS開發中，都是使用point這個單位來規定大小。在iPhone 4上，1 point 相當於iPhone屏幕上2x2個像素點。

在iPhone、iTouch設備上，1 point相當於0.006135英寸。在iPad上，1 point相當於0.007576英寸。

HIG中所說的44 points在iPhone上，可以換算成物理尺寸是0.27英寸（6.86毫米）。這個大小是觸屏中普遍使用的手指最小點擊的尺寸。

回頭看iPad ，按0.27英寸計算，是約36 points。

我來說一下web下的最小點擊區域的問題：

大家都知道在iPhone1到3GS下，Apple推薦的最小可點擊元素的尺寸是44*44 point（iOS Human Interface Guidelines: Adaptivity and Layout），在這些設備上1 point等於1像素，所以轉換成像素就是44*44像素。別的iPhone呢？iPad們呢？

我計算了一下當我們設置了width等於device-width的viewport之後，其它iOS設備下可點擊元素的最小尺寸：

&

可以看到儘管iPhone 6+的PPI已經高達401，但當我們設置了如上的viewport以後，虛擬像素（Device-Width）對應的虛擬PPI（姑且稱為Device-PPI）只有154，也就是說同樣一個44*44像素的元素，在iPhone 6+上顯示的物理尺寸反而比iPhone 4更大。

結論就是按照44*44像素的最小可點擊元素尺寸的規範來做，你的頁面將適用於所有的iOS設備，只不過在某些設備上用戶得到了一個更容易點中的按鈕，多happy啊。

附上表格中幾個關鍵數值的計算方式：

PPI計算公式（javascript）

公式中寬度和高度的單位是`px`，物理尺寸的單位是`英寸`

Math.sqrt( Math.pow( [寬度], 2 ) + Math.pow( [高度], 2 ) ) / [物理尺寸]

Device-PPI計算公式

將上個PPI公式中的寬度、高度換成device-width、device-height即可

Math.sqrt( Math.pow( [device-width], 2 ) + Math.pow( [device-height], 2 ) ) / [物理尺寸]

不同Device-PPI下對應最小點擊區域的計算公式

iphone1~3gs下165 device-ppi是44px，按一個比率就可以算出別的device-ppi下應該是多少像素

44/165 * Device-PPI

資料

- 關於viewport：A tale of two viewports

- 設備屏幕信息：Screen Sizes

- PPI：PPI （像素數目）

手冊里說44*44是point，低解析度版對應一個像素，retina就自動對應4個像素了。

做界面時只需要按低解析度的做，在retina屏下apple自動幫你拉伸，如按鈕就變大4倍。圖片資源呢就準備一個retina版的，名字後面帶@2x，apple會自動在retina屏幕時選這個

44px的數據是在320×480的iphone屏時代提出來的，ppi大幅提升的現在，這個數據自然要與時俱進。

而且各家（蘋果，谷歌，微軟，諾基亞）的用戶指南提出的最適宜點擊尺寸也不完全一致。但換算成物理尺寸後大致是在7mm-9mm之間。

他們定的這個尺寸是根據人類手指（我記得是食指）的指腹尺寸定的，但是這個人機學數據是否納入了亞洲人的樣本還不得而知。

所以這個數據可以作為參考，產品出來後找幾個用戶試用一下，就可以大致判斷是否易誤點擊了。