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

  • UI 設計
  • 更新:2025-02-07
  • 初版:2013-11-25

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

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

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

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

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

使用者已習慣這樣子的操作模式,不會想到將手機轉為橫式操作,若非必要其實可以不需製作 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
台灣的 UI 設計

看到有篇文章寫出我的心聲:只是前端工程師的純抱怨文 。雖然是前端工程師寫的文,但有大半在抱怨 UI…「那 UI 簡直難用到飛起,除了是中文以外一無是處,真他媽想問那些說這東西好用的人是眼睛還是腦袋有問題,根本隨便一家國外免費產品都完爆它十條街。」說實在我看台灣大部份的 App 都是這種心情:「去你媽的小確幸,這年頭連 UI 都走小可用小易用路線嗎?」

讀者來信:設計 ≠ 視覺!學生專題如何切入真正的 UI 設計?
讀者來信:設計 ≠ 視覺!學生專題如何切入真正的 UI 設計?

學了 UI 設計卻覺得沒學到「設計」?其實你可能爬錯方向!設計不只是視覺,而是解決問題,這篇帶你重新理解 UI 設計!

4 個步驟,讓你的 UI 設計提升一個檔次
4 個步驟,讓你的 UI 設計提升一個檔次

學 UI 設計最怕什麼?
改了半天還是不對勁、看高手作品卻無從下手?
別擔心!這篇文章教你 4 個實用方法,讓你的 UI 設計不再卡關!

拆解 UI:EZ WAY 易利委-1-Tab Bars
拆解 UI:EZ WAY 易利委-1-Tab Bars

不曉得大家有沒有注意到,因為全球受到疫情的影響,很多實體店面都關閉只靠線上商店獲利。

非常多人失業,購買能力下降,銷售狀況更是雪上加霜。我自己習慣購買的幾個品牌甚至給出了 70% off 這種折扣。(然後我就買買買了。)

購買國外的商品進到台灣,必需先過海關,需要使用EZ WAY 易利委這款 App 報關,但當我打開 App,就像是開啟一場莫名奇妙之旅…

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close