為什麼 Bar 會變成垂直?
iPhone Duo 是 Apple 首款可折疊 iPhone。它具有外螢幕與內螢幕，並支援收合、展開、橫向、直向與半折立放等不同裝置姿勢（Device Poses）。裝置尺寸與可用空間會隨姿勢改變，因此介面不應只延伸既有 iPhone 的水平 Bar 版型，而需要隨版面重新配置。
當 iPhone Duo 收合時，外螢幕相較一般 iPhone 更寬、更矮。若仍將導覽列與工具列放在上方或下方，容易壓縮垂直內容空間。因此，系統會將原本位於頂部與底部的狀態列（Status bar）、工具列（Toolbar）、標籤列（Tab bar）移至側邊，保留更多空間給閱讀、瀏覽與捲動內容，也讓控制項維持在較容易觸及的位置。
裝置姿勢（Device Poses）
iPhone Duo 的使用方式不只包含收合與完全展開。使用者可以像翻開一本小書般半折使用，也可以將裝置立在桌面上，或以接近平板的形式展開操作。不同姿勢改變的不只是螢幕尺寸，也包括內容可視範圍、單手觸及性，以及使用者對主要任務的期待。
不過，支援多種姿勢不代表每一種姿勢都需要一套專屬版型。較合適的做法，是讓既有版型依尺寸類別與可用空間自然調整，同時維持功能與操作層級的一致性。
當攤開iPhone Duo內螢幕有足夠寬度時，雙欄版型能協助使用者同時處理瀏覽與閱讀任務。例如可將左側視為主要窗格，用來呈現信箱列表或檔案列表；右側則作為次要窗格，顯示目前選取的信件或檔案內容。這種安排類似檔案總管的操作方式：左側負責選擇，右側負責查看細節。
比較 iPhone 與 iPhone Duo 的工具列配置
相較於非折疊 iPhone 的傳統上 Status bar 和 Toolbar 配置，iPhone Duo 將狀態列保留區域（Reserved region）設於畫面上方，並把工具列向右旋轉 90 度，改為由上而下的垂直排列。我們來跟著官方釋出的畫面，比較看看 iPhone 和 iPhone Duo 兩者的變動。
在操作優先順序上，Toolbar 先放置 「返回」 或 「關閉」 按鈕，讓使用者能快速離開或回到上一層；其後配置 「完成」 按鈕，用於確認當前操作。其他較少使用的功能則收合至省略圖示中。
這種配置將最常見的導覽與離開操作放在容易辨識的位置，也可避免工具列過度占用折疊裝置的水平空間。不過，實際效果仍需進一步觀察按鈕觸及性、左右手操作習慣，以及展開與折疊狀態下的介面一致性。
動態版面（Dynamic layouts）
版面應隨 iPhone Duo 的展開、摺疊等使用狀態自動調整，並避開系統保留區域和螢幕彎折處，讓內容完整顯示、按鈕方便操作。應保留適當的邊距，將重要內容放在安全顯示範圍內，並讓內容寬度彈性變化，避免只適用於某一種螢幕尺寸。
保留區域（Reserved regions）
- 外側前置鏡頭（Outer camera region）：該區域始終存在，並擴展為動態活動島。
- 內建前置鏡頭（Inner camera region）：此區域僅在攝影機處於活動狀態時顯示。當攝影機處於非開啟狀態時，攝影機可讓出位置；當攝影機啟動時，使用者介面會移動到一側以示意攝影機的位置。
- 折疊區域（Folding region）：當裝置沒有完全攤平時，中央彎折處會被排除在可用區域之外；但螢幕折疊後，中心區域將無法使用。
相關連結：試著把你的設計，套用至新的 Figma iOS and iPadOS 27 – Layout Guides
相關連結：保留區域和安全內容詳細數值，可參考 safearea.info
版面排列（Views）
- 分開排列（Split arrangement）：就像前面內文提到左方信件列表，右方是信件內容。
- 重疊排列（Overlay arrangement）：上方是次畫面，下方是可以是輸入或控制區塊。
垂直控制區：為折疊裝置重新安排操作位置
折疊裝置展開後，原本適用於非折疊 iPhone 的下方水平導覽列，不一定仍是最有效率的配置。若將工具列向右旋轉 90 度，改為沿著側邊由上而下排列，便能把水平空間留給內容，同時開啟兩個App時，也讓控制項更貼近左右App 的使用情境。
側邊控制區可整合系統與應用程式元素，例如動態島（Dynamic Island）、狀態列（Status bar）、工具列（Toolbar）、與標籤列（Tab bar）。設計重點不只是把控制項搬到側邊，而是重新安排各項功能的優先順序、尺寸與收合方式。
1. 轉向排列與操作優先順序
在非折疊 iPhone 上，導覽項目通常由左至右排列；在垂直控制區中，則改為由上至下排列。垂直軸的頂部可優先保留給 「返回」 或 「關閉」 等主要控制鍵，其後再放置 「完成」 等確認操作。
原先由圖示搭配文字組成的導覽項目，在側邊空間有限時，可優先保留圖示，減少文字占用的寬度。不過控制項的相對位置應盡可能維持一致，讓使用者在不同裝置姿勢之間切換時，不必重新學習操作位置。
2. 單邊固定，讓寬度或高度隨內容調整
水平工具列通常採固定高度、彈性寬度；垂直工具列則可反向處理，採固定寬度與彈性高度。這種尺寸邏輯較適合以純圖示呈現的控制項，因為圖示能在有限寬度中維持一致的點擊目標與視覺平衡。
4. 先收合哪一個控制區，取決於使用情境
當畫面空間不足時，不應一律收合 Tab bar 或 Toolbar，而應先判斷產品的主要任務。以導覽為主的體驗，例如 Podcasts，應優先保留 Tab bar 與主要目的地的可用性，並將 Toolbar 中較次要的項目移入收合選單。相反地，若產品以完成任務為主，例如遊戲或創作工具，則可優先壓縮 Tab bar，保留最常使用的動作控制。
5. 控制項要靠近它影響的內容
控制項的位置應反映它所作用的範圍。例如在電子信箱中，影響郵件列表的控制項應保留在列表窗格上方，讓使用者清楚知道它影響的是列表，而非單封郵件內容。
若折疊裝置展開後左右兩側分別呈現不同 App 或不同內容窗格，控制區也應與對應的內容保持一致：左側控制左側內容，右側控制右側內容。這能降低跨區操作造成的理解成本。
6. 不必所有畫面都保留垂直控制區
某些畫面不需要固定的控制區。例如強調視覺沉浸感、沒有捲動需求的介面，可讓內容延伸至全螢幕寬度。也可採混合方式：背景圖片與標題滿版呈現，下方可捲動內容則內縮，為側邊控制區保留空間。
以下情況也可不採完整垂直控制區：
- 只有單一 「關閉」 按鈕的簡單 Sheet。
- 圖示操作如 「返回」 、「分享」 改為垂直排列，但純文字操作如 「編輯」 仍維持水平排列。
7. 收合時的注意事項
收合設計不應只看空間，也要考慮操作頻率與資訊重要性。
- 電子郵件的 「撰寫」 或筆記本的 「新增筆記」 等高頻動作，應最後才被收合。
- 收合選單可使用省略號圖示，但應避免把所有功能都丟入同一個選單。
- 文字連結按鈕與圖示按鈕並存時，應以間距或分組明確區隔，避免使用者誤以為它們屬於同一類操作。
- 帶有 Badge 的項目通常傳達重要狀態，應盡可能保持可見。
- 若文字只是輔助辨識圖示，可考慮移除；若文字本身承載資訊，例如購物車金額，則應保留。
多螢幕案例：官方影音錄製
Apple 在開發者影片中示範，錄製 App 可以同時使用 iPhone Duo 的內外螢幕：內螢幕保留相機預覽與主要錄製介面，外螢幕則顯示提詞機（Teleprompter）。讓兩個螢幕各自承擔不同任務。內螢幕服務錄製者的操作與畫面確認；外螢幕則提供台詞或輔助資訊。使用者不必在錄影、查看畫面與閱讀台詞之間來回切換，而能在一台裝置上完成整個流程。
實際案例：TranslateCat
TranslateCat 將 iPhone Duo 轉化為面對面翻譯工具。使用者可在內螢幕輸入或查看原文，外螢幕則朝向對方呈現翻譯結果。
相較於一般手機翻譯 App，使用者不必每次輸入後再把螢幕轉向給對方。兩個螢幕分別服務對話的兩端，讓裝置本身成為雙方之間的溝通媒介，而不是需要輪流傳遞的單一螢幕。
*TranslateCat 目前屬於專案作品，公開資料也提到仍在測試與完善階段。
實際案例：Percento
Percento 是一款個人資產管理 App。其更新紀錄顯示，展開後，使用者可以在更大的畫面中同時查看資產總覽、分類資訊與圖表等細節內容，減少在不同頁面間反覆切換的需求。
重點整理
- 先保留必要區域
- 先確認各種裝置姿勢下的保留區域、邊界與控制區。
- 讓內容能隨螢幕尺寸自然延展，避免被系統元素或控制項遮蔽。
- 依空間調整版面排列
- 橫向攤開 iPhone Duo 時，內螢幕空間充足可採左右雙欄呈現內容，區分主要內容與次要列表或操作區。左右雙欄也能避免簡易內容卻橫向單一撐滿寬度，反而會不易左右快速掃瞄內容。
- 也可改為上下排列，優先保留主要任務所需的內容在上方。
- 重新安排垂直控制區
- Toolbar 位於垂直軸上方、Tab bar 位於下方。
- 常用操作優先保留，並以圖示呈現。
- 低頻功能收合至更多選單。
- 純文字連結本身代表獨立操作，且不適合垂直排列時，仍可保留水平呈現。
最重要的是，裝置收合、展開或改變方向時，不應讓介面出現大幅跳動。功能與內容的位置可以因空間調整，但整體層級與操作邏輯應盡可能一致，降低使用者重新尋找與學習的成本。建議親自動手把目前設計的產品套用 iPhone Duo 的 Layout，也可以多看其他已經推出新排版的產品。
