姿勢和螢幕方向

Android 設計涵蓋各種獨特層面和裝置,光是查看中斷點並不夠。使用者可以在裝置上調整應用程式視窗,並重新定位。有了折疊式裝置,單一裝置就能涵蓋所有這些使用情境。請務必以窗格為單位思考,確保內容能適應不同大小的螢幕。

螢幕方向變更

請勿將應用程式鎖定為直向模式。這樣做可能會導致錯誤,並在執行多工時產生不必要的上下黑邊。

使用者經常會調整裝置方向,以便符合人體工學和觀看內容。應用程式必須支援這些螢幕方向變更。

在較大的裝置上,直向和橫向模式從中型變成大型時,效果可能較不明顯,但橫向模式會提供中型視窗大小,以及精簡的直向檢視畫面。

直向模式的設計做法如下:

  • 支援無邊框系統資訊列。

  • 決定最適合內容的導覽元件,例如橫向導覽列或導覽邊欄。

  • 建議重新排版內容或變更密度。

橫向版面配置可使用中等寬度的 UI。

橫向模式的導覽選項。

橫向模式可充分利用橫向底部導覽列的高度縮減優勢。

橫向全螢幕內容

如要處理內容,請嘗試使用容器將內容加上上下黑邊,或使用其他內容方向 (如直向而非橫向影片)。在精簡直向模式下,全寬內容會占據大型橫向版面配置的大部分螢幕空間。如果內容在直向模式下不會捲動,請勿在橫向模式下捲動,以免使用者感到困惑。

在橫向模式下重排內容

主頁橫幅會佔用顯眼的位置並固定。底部應用程式列會取消固定。

在橫向模式下重排內容

從直向模式切換為橫向模式:兩個容器群組都會在原位置旋轉。

版面配置變更和元件變更

如果是篩選器工作表,工作表元件可能會變更為側邊工作表。如果需要更多注意力,工作表會維持全螢幕,但會調整為兩欄版面配置。

防護機制

考量獨特的機型使用情境,例如摺疊姿勢 (摺疊、平放和桌面模式)。

版面配置變更和元件變更

應用程式不必特別考量每種姿勢,但可以考慮善用其中一種。舉例來說,媒體播放器可以顯示獨特的立放模式和封面 UI。

持平

摺疊式裝置展開時會呈現平放狀態。螢幕通常是中型或大型類別大小。

版面配置變更和元件變更

折疊

摺疊式裝置闔上時,會處於摺疊姿勢。在此姿勢下,您會與外螢幕互動,外螢幕通常較小。

版面配置變更和元件變更

桌面

桌上模式:手機部分摺疊,螢幕朝上。這種姿勢可讓你使用獨特的版面配置,例如大型控制項和橫式影片。

版面配置變更和元件變更

Hinge

讓應用程式支援螢幕轉軸,確保內容能順暢地延續顯示,不會在轉軸處中斷。單一窗格版面配置可能不需要這麼做。不過,請考慮控制項和文字是否應避開螢幕轉軸空間。

版面配置變更和元件變更

如果使用版面配置格線和窗格設計,請預留較寬的間距,以容納螢幕轉軸,例如雙窗格清單/詳細資料版面配置。

部分折疊式裝置 (例如三折機) 有多個鉸鏈。

封面

部分折疊式手機的外部螢幕採用正方形螢幕比例,例如摺疊式手機。

設計封面螢幕時,請遵循下列規範:

  • 確保應用程式可顯示在螢幕邊框。
  • 確認 UI 元素未遭攝影機凹口遮蓋。
  • 專注於應用實例和使用者介面。

版面配置變更和元件變更

舉例來說,如果裝置只做為媒體播放器,封面設計即可做為背景,顯示資訊較少的快速檢視畫面。

版面配置變更和元件變更

在較小的螢幕和顯示比例上,請考量聚焦內容的體驗。主頁橫幅會佔據封面大部分空間,以提升視覺吸引力,並顯示部分標題和內容,方便使用者捲動和閱讀。

版面配置變更和元件變更

封面應著重於輸入內容,舉例來說,鍵盤顯示時,訊息會是主要焦點。

版面配置變更和元件變更

在封面等較小的螢幕上,篩選器頁面會全螢幕顯示,但按鈕位置和縮放比例會隨之調整。

版面配置變更和元件變更

導覽邊欄雖然精簡,但在封面螢幕上可能更符合人體工學。

較大的封面可採用任一導覽方向。請考量使用者與內容的互動方式。

版面配置變更和元件變更

小型導覽軌可避開系統 UI 和攝影機凹口,同時符合精簡高度。

繼續在系統 UI 下方顯示 UI,不受阻礙。
在系統資訊列之前停止 UI。