• UI 設計
  • 更新:2026-07-14
  • 初版:2013-11-25

直式與橫式螢幕設計的挑戰與解決方案

每次看到使用者拿著手機,橫豎切換自如,我都在想:「他們知道這背後的設計巧思嗎?」
Portrait 和 Landscape。
螢幕方向不只是視覺上的轉變,更是使用者體驗的關鍵。

直式螢幕稱為「Portrait」,橫式螢幕「Landscape」,頁面會依照橫直螢幕不同而改變形式的作法稱之為「Auto Orientation」。

不管是 iPhone、iPad、還是 iPod,它們都是長方形的,一般情況下會直式使用,但某些情況就會轉成橫式更為合適,最明顯的例子就是遊戲類。

什麼情況下會轉橫使用?橫式和直式的頁面樣子是否會不同?要怎麼調整呢?從 iOS 內建的 App 就可以發現數種切換模式與其代表的功能。

除了遊戲外,在 iPhone 上大部份的 App 多是 Portrait,以單手操作而言直式螢幕可觸控的範圍最廣、也最容易被握持。

使用者已習慣這樣子的操作模式,不會想到將手機轉為橫式操作,若非必要其實可以不需製作 Landscape。

我後來會用一個很簡單的方式來判斷要不要做 Landscape。

如果功能本身「不轉橫也能流暢用」,那多半不需要為了展示而硬做一套橫式畫面。

只有在轉成 Landscape 之後,能明確讓使用者「看得更清楚、操作更省力、理解更快」,而且這個差異在使用情境中真的會被用到,我才會認真把它當成一個設計題目來處理。

否則,Landscape 很容易只是多做了一套畫面,卻沒有真正解決任何使用問題

如果已製作此種操作,記得告知使用者這款 App 上有這樣的功能,否則 Landscape 會變成不為人知的畫面,非常可惜。

在 iPad 上 Auto Orientation 十分常見。

iPhone 因為畫面較小,需要 Landscape 輔助顯示更多資料如圖表等等,iPad 因為畫面夠大,較少出現 Portrait 和 Landscape 呈現內容完全不同的情況。

進階

有些 App 在 Landscape 時會在原始畫面上置入進一步功能。

計算機

1.jpg
Portrait:基本型的計算機,適合簡單的四則運算。

2.jpg
Landscape:工程用計算機,除專業人士外一般人不常使用。

擴展

有些 App 在 Landscape 時會放大某部份的畫面。

股市

3.jpg
Portrait:今日的股市概況,下半部為走勢圖,走勢圖為 Page Control,可左右滑動。

4.jpg
Landscape:放大下半部的走勢圖,較大的圖表和字體更容易閱讀,同樣有 Page Control,可左右滑動。

Safari

5.jpg
Portrait:畫面上出現狀態列、導覽列、工具列及內容視窗。

6.jpg
7.jpg
Landscape:狀態列消失,導覽列濃縮僅剩回前頁按鈕,工具列縮小為一顆快速鍵,點擊顯示完整的工具列和導覽列。

備忘錄

8.jpg
Landscape:畫面分成左右兩個部份,選單和詳細內容。(當畫面會切成兩欄時,主要目的通常是為了快速切換、選單和內容同時呈現,轉成 Portrait 模式時提供使用者能夠專注於目前工作且較大的顯示區域。)

9.jpg
Portrait:將選單縮小為左上方的按鈕。

適應

也有 Portrait 和 Landscape 幾乎相同的情形。

地圖

10.jpg
11.jpg
Portrait、Landscape:畫面元素、操作方式幾乎完全相同。

相機

12.jpg
13.jpg
Portrait、Landscape:icon、文字跟著畫面轉正,位置不變。

相片

14.jpg
15.jpg
Portrait、Landscape:狀態列、導覽列、工具列自動延伸,照片等比例縮小置中。

設定

16.jpg
17.jpg
Portrait、Landscape:畫面元素、操作方式幾乎完全相同。

iTunes

18.jpg
19.jpg
Portrait、Landscape:畫面元素、操作方式幾乎完全相同。

互補

有些 App 在 Landscape 時畫面會比 Portrait 顯示更多的資訊,

行事曆

20.jpg
Portrait:日模式,擁有許多可操作元件。

21.jpg
Landscape:切換成週模式、可操作的元件消失,以瀏覽為主。

更多

有些 App 在轉橫之後畫面完全不同

音樂

22.jpg
Portrait:單曲播放模式,擁有許多可操作元件。

23.jpg
Landscape:專輯選單,採用 Cover Flow 顯示,左右滑動選擇欲聆聽的專輯。

以上僅列出較常見的部份,如果有漏的請跟我講,我會補上。(寫好半年了才發佈是怎麼回事 = = )

自己在使用 iPhone 的時候,除了遊戲外,90% 以上都是拿直的,如果不是點了某個按鈕、畫面鎖死在橫式螢幕逼你一定要轉橫看的話,很難發現轉橫後原來有另一種瀏覽方式。
比如 MoneyBook - finance with flair 這個記帳 App,天天使用它記錄開支,用了半年後的某天、躺在床上補記時才發現原來在 Store 上寫的圖表功能只要把畫面轉橫就會自動出現orz。
重要的功能還是別把它藏在要讓使用者轉橫才會發現的介面上吧,我就是個活生生的操作例子。

更多文章

wave
iOS Guideline 怎麼看?(2)

iOS Human Interface Guidelines 第二章是設計策略 Design Strategies ,主要講畫面、使用者操作、反應等等的一致性與注意事項。在閱讀這個章節之前,建議把 十大易用性原則 先看過一遍、對易用性有粗淺概念後會更容易理解為什麼 Guideline 會這樣寫。

從業界需求逆推,規劃你的 UI 設計自學路線 2:畫好戰場的界線
從業界需求逆推,規劃你的 UI 設計自學路線 2:畫好戰場的界線

這是「從業界需求逆推,規劃你的 UI 設計自學路線」系列文章的第 2 篇。

接著上一個階段的故事 ,當產品經理終於講清楚使用者需求和專案目標後,討論功能會議開始了。

推播通知越多越好?這樣設計反而更有效
推播通知越多越好?這樣設計反而更有效

「叮咚!」深夜收到促銷通知,氣到直接刪 App?
推播訊息設計不好,真的會讓使用者崩潰!
到底怎樣的通知才不討人厭,還能提升互動?

國泰世華 ATM 提款機

話先說在前頭,這是我想領 3000 元過日子,ATM 很開心的吐給我 30 張 100 元而埋下淦意。國泰世華新改版 ATM 介面!

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close