前言：觸控友好度是衡量優劣的關鍵指標

對移動 OS 與 App 而言，界面設計是否優秀，關鍵在於對手指觸控操作的友好程度。觸屏交互特性將體驗設計師推向人機工程領域，設計不再只是視覺呈現規劃，更需體現工效學原理。Josh Clark 深度解析 iPhone、iPad、Android 觸控體驗差異，以下為核心摘要。

一、手機篇：拇指熱區與「底部原則」

1. 拇指統治交互區域

多數用戶單手持機、拇指操作。拇指雖靈活但受限：常規手機螢幕僅約 1/3 區域屬「真正有效觸控區」。右手持機時，熱區位於左下角。

2. 底部原則的由來與應用

此即移動端常將重要工具列/導航置底的原因。桌面端慣將導航置頂，但在拇指有限觸及範圍內，頂部難以企及，傳統佈局不適用移動端。

3. 左右手切換與次要元素安置

用戶會因場景切換持機手（寫字時換左手等），右手持機用戶仍佔多數。底部原則輔助組織可觸控元素：核心功能置於拇指最易觸及熱區；次要/敏感操作（如「編輯」鍵）避開熱區，置於右上角，清晰可見又不易誤觸。

4. 內容上、控制下：通用工效學鐵律

拇指操作時會遮擋下方內容，將控制元素置於內容區下方可將遮擋負面效應降至最低。iPod、計算機、實體鍵盤手機、電子秤無不遵循此原則。

二、Android 篇：實體鍵帶來的佈局困境與破解

1. 硬體鍵佔據底部，軟硬工具列視覺競爭

冰淇淋三明治前 Android 底部實體鍵（返回/Home/選單）與 App 底部軟工具列疊合，拇指熱區雙重佔據，極易誤操作、認知混淆。

2. 破解之道：視覺分離，將控制元素上移頂部

硬鍵無法移除，唯有讓虛擬與實體工具列視覺分離，將 App 導航/控制上移頂部。雖遠離拇指熱區（需半掌覆蓋螢幕），但優於軟硬疊合混亂。此做法與 iOS（Home 鍵不干擾 App 底部）截然相反。

3. Foursquare 雙平台對比實證

iOS 版底部導航；Android 版頂部導航 + 底部實體鍵，清晰展示差異策略。

三、移動網頁篇：瀏覽器工具列的額外約束

1. 禁用 fixed 底部導航

移動瀏覽器常將控制元素置底部工具列，網頁若用 position:fixed 固定底部導航，必產生視覺衝突。

2. 頂部導航同樣有坑：小螢幕橫向導航過擁擠

傳統 Web 橫向全局導航（多個 1~2 字項）在手機螢幕顯擁擠，不可照搬。

3. 最佳模式：首屏內容優先，導航收納於頁面底部錨點

Luke Wroblewski《Mobile First》倡導：Ad Age 移動站首屏僅標題+內容列表+右上角菜單鈕（錨點指向頁底導航列表）。用戶專注閱讀，捲動到底部再探索更多，零 JS/覆蓋層/獨立頁面複雜度。

四、平板篇：持握姿態重塑熱區地圖

iPad 熱區規則隨持握姿態劇變：

• 站立：單手持、單手操，熱區偏單側下緣
• 坐姿桌前：側手架住、主手操作，熱區偏中下
• 膝上操作：雙手可及範圍大，熱區擴大
• 躺/半臥：立於腹部，單手支撐、單手操，熱區偏中上

每種姿態對應不同熱區，設備與身體距離亦異。設計須支援多姿態或針對主流場景優化。

五、給設計師的三條鐵律

1. iPhone App：核心交互與導航置底部。
2. Android App：核心交互與導航置頂部（避開實體鍵）。
3. 移動網頁：導航結構置於頁面底部（非視窗底部），首屏優先內容。

以上僅適用手機語境；大螢幕觸控設備（iPad 等）規則另當別論。