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。重要的功能還是別把它藏在要讓使用者轉橫才會發現的介面上吧,我就是個活生生的操作例子。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close