手機拿法也能影響介面設計，談談拇指法則👍(上)

手機版選單

當薩哈跟隨 2019 換機潮從萬年的 iPhone6 更新到 iPhone 11，拿到新手機的那一刻不是欣喜與期待，而是默默在心中大驚「怎麼那麼大！好重好不習慣！」從 4.7 寸直上 6.1 吋螢幕的 iPhone 11 手感是全新的體驗，第一件事擔心的是躺在床上滑手機砸到一定超痛（誤）原本隻手能遮天的範圍，縮小到只能按到螢幕寬度 3/4 是極限，甚至要按關機鍵都得在手掌上挪個位置，對於單手使用者轉換期需要較長適應的時間。這讓我回想起以前看過的拇指法則，如果應用在近年的裝置上，是否會改變設計師遵循的介面設計法則呢？

你都使用單手滑手機嗎？如果是的話，仔細思考一下是否主要依賴大拇指的移動來操作呢？資深互動設計師 Steven Hoober 在 2013 年針對一千三百名手機用戶的量化研究發現以下數據：

單手使用手機的比率 49%
以右手拇指操控的比率為 67%
以左手拇指操控比率為 33%

透過 Steven 的研究發現，有一半的使用者單手持拿手機，依靠拇指進行操作，而在近年大螢幕手機的趨勢下，不得不利用雙手持握手機時，人們大部分仍依賴拇指進行互動。而 Josh Clark 的研究也支持這個結果說明 75% 互動任務是由拇指完成。

拇指 vs. 小螢幕

根據 2016 年 Samantha 提供的模型，以一個 4.7 寸手機女生能觸及的範圍如下圖所示，綠色是輕鬆可以觸碰到的，橘黃色區域是需要伸展甚至移動抓握區域，而紅色則是困難碰到的地方。

The Thumb Zone: Designing For Mobile Users

透過這個模型，我們可以發現許多 APP 介面的趨勢由上方的 button 默默移至下方綠色拇指區域，讓使用者常用的功能可以更輕鬆的達成任務。例如舊版的 Facebook 將上方漢堡 menu 和訊息功能統一放到下方工具列，並擺出最常用的四大功能，其他就合併在漢堡裡收納；而 Airbnb 的固定式工具列則簡單明瞭列出所有五大項功能在最下方。台灣區我則舉蝦皮為例，除了工具列外，可以看到蝦皮將主要服務也都置放在易觸碰的位置，並往左滑看更多。

那大螢幕手機呢？

透過我自身使用 iPhone 11 的經驗，這個模型已經改變。我利用手機內建繪圖軟體簡單繪製了以 S 號手掌在 6.1 吋手機上的觸碰軌跡如下，可見手機上層幾乎是觸碰不到的，而右手持握者則是觸碰不到左側 1/5 處螢幕。

若是將此模型套在 airbnb 現在的手機 APP 上，可以看到下方工具列的「探索」如果單利用右手持手機，是無法不變換手掌位置輕鬆用大拇指按到的。這也是為什麼在 2020 年的介面設計趨勢裡，不但主功能往下移，甚至連 IMDb 和微軟 APP 都將搜尋欄直接挪至下方，讓拇指可以做的事一氣呵成。再來看看台灣 Richart 的 APP 支付頁面，將五大主功能羅列在畫面底部，讓使用者在點擊工具列的收付後可以輕鬆用拇指按到下一個功能選單。比起以前開方塊或 list 的呈現方式，又更符合手機上的行為互動了。這個 UI 真的是要給台新銀行拍拍手，不愧是年輕人的行動銀行當之無愧啊！