iPhone Duo App 設計適配教學

本講重點

• Apple 開發者中心提供線上、線下講座、研討會、實驗室、挑戰、諮詢與特別活動，目標是協助開發者提升 App 的設計、品質與性能。
• 本次 iPhone Duo 教學活動安排六場講座，前四場結束後與後兩場結束後各有一輪問答；講座期間可先將問題輸入問答窗口。
• iPhone Duo 的核心設計情境包括閉合外屏、展開內屏、像書本般部分折疊、桌面筆記本姿態、直立放置，以及兩個 App 並排的分屏視圖。
• 設計適配應聚焦緊湊型寬度與普通型寬度兩種尺寸類，避免把版面或功能綁定於固定螢幕規格、斷點或特定姿態。
• 善用系統原生元件、佈局邊距與水平安全區內邊距，可讓多數工具列、面板、選單與互動元件自動調整位置並避開折疊區域。

iPhone Duo緊湊型寬度普通型寬度水平安全區內邊距分屏視圖Overflow MenuSidebar模態面板即時活動靈動島

概念整理：iPhone Duo 的裝置特性

iPhone Duo 在閉合時小巧緊湊，展開後則提供 iPhone 有史以來最大、最具沉浸感的螢幕。裝置可依情境以多種方式持握或放置，因此設計時要把螢幕尺寸、可用區域與操作位置視為會持續變化的條件。

• 閉合時的外屏比傳統 iPhone 更寬、更短。為保留內容的縱向空間，原本常放在頂部與底部的介面空間會移到右側。
• 外屏左側可形成較少干擾的內容區，視覺比例更接近傳統 iPhone；右側則容納 Tab 欄、工具欄、返回按鈕、靈動島與系統狀態欄等介面空間。
• 即時活動出現時，新的靈動島會沿垂直方向擴展；App 必須理解側邊區域會與系統級動態元素共用。
• 展開內屏同樣會把典型介面空間移往側邊，以保留內容的縱向空間並維持方便操作。
• 設備像書本般部分折疊時，中央彎曲處會成為自然分隔線。文字、圖像會遠離彎曲區，按鈕與其他互動元素則移往兩側。
• 豎屏且部分折疊時，互動元素會移到下半屏，讓使用者較容易操作，也有助於裝置穩定地放在桌面。

概念整理：分屏、畫中畫與動態空間

iPhone Duo 可透過熟悉的返回主屏手勢邏輯，將 App 拖曳到螢幕一側以建立分屏視圖。兩側是獨立運行的區域，使用者可在一側處理工作，同時自由使用另一側。

• 分屏時，App 位於哪一側，相關按鈕就應配合移往該側的外緣，讓操作更貼近持握手勢，也不占用中央區域。
• 畫中畫影片可固定在螢幕頂部，正在運行的 App 會沿垂直方向自動調整尺寸，以配合剩餘空間。
• 當設備部分折疊時，影片會自動擴展填滿上半屏；下方 App 也會依影片尺寸變化即時調整。
• 這些行為顯示設計不應假設可用空間固定，而要讓內容與介面能回應同時運行的 App、影片與裝置姿態。

概念整理：以尺寸類建立彈性佈局

使用者會在不同姿態下使用 iPhone Duo，但這不代表每個姿態都要有專屬版面。設計時應優先處理兩種尺寸類：外屏代表的緊湊型寬度，以及展開內屏代表的普通型寬度。從一開始就將 App 做成可自由調整尺寸的形態，能更穩健地面對各種可用空間。

• 避免使用固定寬度、斷點，或與特定螢幕規格綁定的度量方式。
• 建立版面時使用佈局邊距與水平安全區內邊距；既有 App 若已正確採用這些方式，整體佈局通常已能適配 iPhone Duo。
• 桌面使用時可選擇提供免提體驗：媒體內容放在上方，互動元素放在下方的穩定區域。
• 即使為桌面姿態設計特殊版面，仍要與其他姿態維持相同的資訊層級結構與功能邏輯。
• 不要把功能綁定在某一姿態或某一種版面；姿態改變時，使用者仍應能以可預測的方式找到並使用同樣的功能。

概念整理：側邊介面空間與系統自動轉換

為釋放縱向內容空間，iPhone Duo 多數介面會沿側邊排列；但內屏豎屏時，由於縱向空間充足，典型介面元素仍會維持水平排列。側邊區域也會與即時活動、狀態欄共用，因此 App 必須接受可用空間可能縮減。

• 若側邊空間不足，App 的介面空間會自動折疊進 Overflow Menu。
• 既有 iPhone App 的頂部工具欄按鈕會自動移至垂直區域頂部；底部工具欄按鈕與作為一級導航的 Tab 欄，則會移至垂直區域底部。
• 寬度超過側邊空間的元件不會被移到側邊，例如文字按鈕與分段控制項，仍應留在原本的頂部位置。
• 系統會完成多數介面空間的映射工作，但設計者仍需檢查內容是否因側邊空間而呈現不對稱，並確認互動元件可操作。

概念整理：外屏內容的置中與偏移

傳統全螢幕設計常把內容置中，但 iPhone Duo 外屏的右側介面空間可能遮擋內容，因此多數內容需要水平偏移。只要正確使用水平安全區，這種偏移可自動完成。不過，是否偏移仍應依內容類型判斷。

• 可捲動或一般內容多半應使用水平偏移，避免被右側空間遮擋。
• 不支援捲動、沉浸式且高度視覺化的介面，仍可採全螢幕置中；但互動元素不可落在會被右側空間遮擋的位置。
• 可混合兩種方法：背景圖片或主標題使用全螢幕寬度，前景的可捲動內容採水平偏移。
• 混合式版面中，所有可互動元件都應放在可捲動區域內，以避免被右側空間遮住。

概念整理：內屏資訊架構與內容擴展

內屏不只是把外屏放大，而是能呈現更多資訊層次的空間。使用者可能頻繁展開與閉合裝置，因此內外屏應保持資訊架構一致、功能行為可預測，再依較寬的空間逐步增加呈現效率。

• 分屏視圖是內屏的重要布局選項，可同時呈現 App 資訊架構中的多個層次。
• 外屏與內屏顯示的資訊層級必須一致，且不可將特定功能邏輯綁定到某個螢幕狀態。
• 可參考 Apple Music 的方式：預設採縱向堆疊，在水平空間更充裕時自動轉換為雙欄布局。
• 使用 Tab 欄的 App 可考慮在內屏改用 Sidebar，但較適合資訊密集、類別多或層級複雜的產品，例如系統健康 APP 類型。
• Sidebar 並非所有 App 的必要選項；是否採用應取決於資訊架構，而不是單純因為內屏較寬。

重要提醒：模態面板與折疊區域

• 外屏上的模態面板預設會將按鈕移到右側；若面板只有一個按鈕，可禁用面板的垂直欄，避免按鈕移至右側。
• 以這種方式呈現的面板會停在前置攝像頭下方，系統狀態欄也會自動重新布局。
• 內屏無論橫屏或豎屏，面板按鈕都使用標準的橫向布局。
• 設備部分折疊時，面板會自動滑向一側，避免內容顯示在折疊區域。
• 彈出面板、提示、選單與工具欄按鈕等許多系統元件，都已內建在部分折疊時把互動元素推往一側的行為。
• 應盡可能採用系統原生元件，以直接獲得自動避開折疊位置的能力；一般內容通常無須特別規避折疊位置。

「不要把功能與特定的姿態或者佈局綁定在一起。」
— Easy

課後複習

• 盤點 App 目前是否使用固定寬度、特定裝置斷點或綁定螢幕規格的度量；將可改善部分改為依緊湊型寬度與普通型寬度運作的彈性布局。
• 檢查主要畫面是否使用佈局邊距與水平安全區內邊距，並確認外屏右側介面空間出現時，可捲動內容與互動元件不會被遮擋。
• 測試閉合外屏、展開內屏、部分折疊、桌面使用、分屏與畫中畫影片同時出現時，內容是否能自然重新配置。
• 確認內外屏的資訊層級與功能邏輯一致，避免使用者在展開或閉合後找不到原有功能。
• 依產品資訊密度評估內屏是否適合採雙欄布局或 Sidebar；若採用，確認其目的在改善資訊架構，而非僅增加版面裝飾。
• 檢查模態面板、提示、選單與工具欄按鈕是否優先使用系統原生元件，並在部分折疊時確認互動元件可順利避開折疊位置。