螢幕加長讓介面設計更為小心

Apple 公司於 2012 年 9月 2 日於舊金山發表了 iPhone5 手機，首次更改螢幕尺寸的動作讓許多開發人員與使用者與之嘩然，還記得 iPhone5 發表會後，大家群起討論其加長螢幕的設計嘛？

甚至 Cinesaurus （一家位於美國西雅圖的動畫及影片廣告公司，以製作許多惡搞影片出名）在短短一個禮拜內就製作並發表了這個煞有其事的惡搞影片：

儘管這個影片都是為了搏君一笑，但 iPhone5 的新螢幕比例也的確讓我們頭痛了一陣子。實際上新的 16:9 螢幕，對於瀏覽網頁、觀看資料以及閱讀信件等場合，可以容納更多顯示資訊是相當不錯，但是我們在實際配置 UI 時遇到了問題。

首先，16:9 的螢幕本來就不是一個歷史久遠的比例設計，它是近代才開始流行普遍的。就算是影片規格，它也是用於橫幅 16:9 的一個影片比例（Wiki : 16:9 註 1），相信大家都在官方影片中看到這個全新螢幕橫向欣賞 16:9 比例的影片的效果，真的很棒：

手機的操作方式

針對必須用手操作的手機來說，我們不得不從操控性來看待這件事情。以下我們以右手使用手機為例，一般人使用手機的狀況大致如下：

純單手操作
一手手持裝置、另一隻手點擊使用
雙手使用手機

在 iPhone5 的發表會影片一開始， Ive 就提到了這隻全新手機的設計理念：「我們把螢幕變長了，但是卻沒有更改寬度，你可以看到更多的資訊，卻依然可以輕鬆的使用單手操作」”By making the screen taller, but not wider, you can see more of your content, but still comfortably use it with one hand.”。是的，無論哪一代 iPhone 的設計，大原則都考慮到了使用者單手使用時的舒適性。

手機的使用性研究

在 Lukew 上曾經發表過一篇文章（註 2），研究各種觸控式螢幕裝置的設計不同、對於其螢幕區域的觸控區域最佳化的研究。而其中一段提到了當單手使用手持裝置時，螢幕上的最佳感應區部位，要注意的是這會根據不同手機尺寸、使用者的手掌大小而出現些微的出入，這邊以 iPhone4 為例，在使用者的大拇指可以隨時點到 Home 鍵的右手單手握持法的狀況，其最佳感應區域約略如下圖：（如果是左手持用則圖像區域對稱）

可以發現的是最佳感應區域都是偏於螢幕下方（由於使用者的手指必須兼顧到隨時可以按到 Home 鍵的姿勢）這也可以同時解釋為什麼 iOS APP 的 UI 設計會將選單功能列放置於底部；而設定、離開等較為少用的按鈕則多位於螢幕上部。

在 iPhone 4s 以及以前的手機，由於 3.5 吋螢幕的尺寸不是很大，所以就算是最困難的點擊區域，在單手體驗下，其實也可以輕鬆的點擊到目標，但是在 iPhone5 的 4 吋螢幕上就不是這麼一回事了，雖然 iPhone5 的厚度變薄了、但是寬度基本上是一樣的。若手指兼顧到 Home 鍵的姿勢下，最佳感應區域應該依然偏下方，而上方的困難區域變大了（iPhone5 的 Home 鍵與螢幕底部邊緣的距離有略微調整，iPhone 4s 為 4mm，iPhone5 則縮短至 2mm）（註 3, 4）。

比較 iPhone4 與 iPhone5

我們實際比較 iOS 內建的計時器 APP，並比較兩種螢幕上的 UI 配置差異，可以發現的是在 3.5 吋螢幕上時並沒有特別的問題。但是換到 4 吋螢幕的配置時就可以稍微發現設計師的想法：在拉長比例的螢幕上，元件配置位置並沒有因為螢幕變長而產生變化，所有的元件基本上都維持相同的位置（由底部算起），也說明頂部的區域並不是個適合擺放重要控制元件的位置：太遠、對於單手使用上不是很友善。

在這個情況下看來，舊款 APP 會以「上下加黑邊」的方式支援新的 4 吋螢幕的設計，其實就操作上並不是一個相當好的作法（但在視覺上是），還好截至目前為止大部分的 APP 都已經針對 4 吋螢幕進行最佳化以及配置，未來的 iOS APP 設計方向亦會慢慢針對 4 吋顯示器比例支援，所以並不是個太大的問題。

當然，單手操作並不是個必須嚴格遵守的規定，但是在設計上的彈性允許的狀況下，依然建議將主要操作區域擺放於靠近螢幕底部的位置，尤其是當你希望你的 APP 能夠提供使用者一致的使用體驗時。而 4 吋螢幕增加的上方空間就很適合配置較為少用的元件、逃脫方式或是純粹提供顯示用資訊等，善用新增的顯示區域也是相當重要的一環。

參考資料：