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

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

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

 

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

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

 

手機的操作方式

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

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

在 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)[4]。

 

比較 iPhone4 與 iPhone5

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

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

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

 

延伸閱讀:

【UI 陷阱】按鈕總是看的到卻點不到?

釋放瀏覽空間:滑動隱藏術

合適的逃脫方式:iOS 與 Android 大不同

 

參考資料:

[1] Wiki : 16:9

[2] Responsive Navigation: Optimizing for Touch Across Devices

[3] 3.5 Inches

[3] 4 Inches

Image via Adam Skalny, cc License.

在設計資料量比較大的網站或是應用程式的時候,我們常常會遇到的問題是要考慮要採用分頁(Pagination)的方式、還是移動捲軸(Scrolling)便自動載入來...
「如果你不夠小心,在 Photoshop 中旋轉圖像時,可能會毀了你辛苦完成的作品!」 ~ Marc Edward 在 Photoshop 中旋轉圖像時(這邊指...
咦?我明明放在這裡呀?怎麼不見了?上次回家,怕弄丟所以就先打開抽屜把它收在這裡呀?怎麼會沒有看到咧?糟了啦,如果真的不見,就很麻煩耶!這個找東西找不到的情節,大...
你曾經想過家中零零種種的電器用品的操作介面為什麼長這樣嗎?這樣的介面設計是合理並且容易使用的嗎?人類是善於歸納過去經驗的動物,我們在面對新的產品時,會主動尋找符...
記得停電時伸手不見五指的狀況嗎?你可能要伸出手來摸摸牆壁與家具,確認現在所處的位置才有辦法移動到你的目的地。少了視覺的回饋是不是瞬間就讓你無助了起來? 其實這樣...
2000 年,現任哥倫比亞大學商學院的教授 Iyengar 和他的研究生們做了個名聞遐邇的果醬實驗。她們在知名的德爾格超市擺了兩個果醬試吃攤,其中一個總共擺了 ...
© 2013 Desiring Clicks. All Rights Reserved.
Top