為 iPhone Duo 做設計

iPhone Duo 依然是一臺 iPhone。合上時，它是一臺緊湊的手機；展開時，它是一塊中間有轉軸的寬畫布。人們一整天都會在兩者之間來回切換，而且常常是在做事做到一半的時候。設計要做的，是讓這種切換感覺像同一個 App 得到了更多空間，而不是變成了另一個產品。

Apple 的設計講座建議你不要為每種姿態都畫一套自定義佈局。兩種寬度就能覆蓋大部分工作。本文其餘部分講的是這條建議在大家已經在模擬器中試過的 App 上是如何落地的。API 在豎向欄和摺痕指南里，發布前要過一遍的是模擬器檢查清單。

為兩種尺寸類別做設計

Apple 描述了人們拿這臺手機的四種方式：

• 合上，使用外螢幕。
• 展開，使用內螢幕。
• 半折，像手裡拿著一本書，或像一臺放在桌上的筆記型電腦。
• 立起，靠邊緣立著。

每種方式都可以豎著或橫著，所以一整套草圖要六塊畫板：合上、展開和半折，各分豎向和橫向。其中有一種對 iPhone 來說是全新的：合上後橫過來的手機，模擬器報告它的寬度和高度都是緊湊尺寸。

你要為分配給你的空間做設計。外螢幕是緊湊寬度，和其他任何 iPhone 屬於同一類。內螢幕的寬度和高度都是常規尺寸，更接近一臺小 iPad。Apple 表示 Duo 會遵守你支援的方向，但 App 仍會縮放到鋪滿內螢幕，所以一個只支援直向的 App，在手機展開後也會變寬。讀取 horizontalSizeClass 和 verticalSizeClass，不要再根據 userInterfaceIdiom 做分支。即使內螢幕是常規寬度，Duo 報告的裝置型別也仍然是 iPhone。

尺寸類別只是一個粗略的訊號，不是一把尺子。fatbobman 針對可調整大小的 iPhone 視窗做過這個區分，這裡同樣適用：尺寸類別告訴你適合用哪些系統容器。需要某一欄的真實寬度時，就去測量檢視。

在 Anton Gubarenko 記錄的一次小組實驗室中，Apple 的工程師用 Apple TV App 描述了同樣的思路。展開手機會把視窗拉寬，你會看到更多正在看的東西，外加放置詳情的空間。他們還用“查詢”App 來檢驗哪些控制元件應該放在一起：標籤列要跟著面板走，因為每個標籤決定了面板顯示什麼，把它們拆開就等於把一個控制元件劈成兩半。Anton 提醒說，筆記可能漏掉細節，所以請把這次實驗室當作工程師給出的方向，並在模擬器裡驗證。

從合上的手機開始

Vidit Bhargava 在 Bitrig 駭客松上用幾個小時做出了磁帶播放器 Duo-Man。正如 Kyle Macomber 引用的那樣，Vidit 在和 Sean Allen 聊起它時建議：從合上的手機開始。把大布局縮到小螢幕上，比把小布局擴充套件到大螢幕上更難。在 Duo-Man 裡，你在外螢幕上依然可以退出磁帶。沒有展開時那麼好玩，但它是同一個功能。

Avionics Buddy 也是這樣做的。Sharif El Fatatry 說，它沒有單獨的一套 Duo 介面，同一套 SwiftUI 佈局會在你摺疊、旋轉或翻轉裝置時重新排布。

如果某個功能只在手機展開時才存在，從不展開手機的人就用不到它，而在中途折起手機的人則會失去它。上面是畫面、下面是控制元件的免手持桌面佈局是很好的加分項，但它不能取代緊湊佈局。

用好寬度，否則就是一個空洞

Bunny Lau 在探索 Tweed 瀏覽器的 Duo 版本時說得很直白：展開後仍然表現得像一臺長條手機的佈局，就是一片浪費像素的海洋。在完整的內螢幕上，Tweed 充分利用橫向畫布；在分割畫面和外螢幕上，它切換到豎向側邊欄，讓內容欄保持緊湊。

那條貼文裡關於 SwiftUI 的說明（根據姿態關閉豎向欄）只是佈局的一半。Kashif Mehmood 的回覆補上了另一半：姿態告訴你的是模式，而不是轉軸落在哪裡。側邊欄的分隔線或者居中的控制元件，仍然可能落在摺痕上。系統容器已經會繞開它，所以被拉伸的手機佈局是一個尺寸類別問題。摺痕只會坑到你自己擺放的控制元件，對於這些控制元件，你要讀取分隔區域，見摺痕指南。

不使用側邊那一列是一個實實在在的選擇，而且應該取決於內容。翁天信在設計 Camarts 3.0 時保留了傳統的對稱佈局，沒有用側邊控制元件欄。Camarts 裡的照片大多是橫幅，所以寬度留給了畫面。翁天信說模擬器上的版本目前已經夠用，剩下的要在真機上調。

如果你確實關閉了側邊那一列，就對整個頁面關閉，並且保持不變。在使用者導航時切換欄的方向，會讓介面框架跳來跳去。什麼時候值得這樣做，見豎向欄指南。

讓系統去挪它自己的欄

用 iOS 27.1 SDK 重新建置，並把導航、工具列和標籤列放在系統容器裡：NavigationStack、NavigationSplitView、TabView，或者自帶欄的 UIKit 控制器。當螢幕又寬又矮時，這些欄會移到側邊；在豎向的內螢幕上，它們會回到頂部和底部。你自己畫的欄會停在你固定的位置。浮動按鈕也屬於這一類。

Sahil AK 在適配 TimeWave 時發現了這一點。原生工具列 API 完成了大部分工作，浮動的加號按鈕則還需要自己擺放。

Harshil 和 Rob Swift 在各自的 App 裡也遇到了同樣的分化：系統欄移動了，而一個浮動分享按鈕、一個自定義鈴鐺和一個浮動操作按鈕沒有動。這些都是自定義介面元素，修復方法見豎向欄指南。

保持同一套層級結構

人們會不停地開啟、合上手機，App 的結構應該經得起這種折騰。列表可以變成側邊欄，文章可以有更寬的版心。使用者不應該需要重新找回自己的位置，也不應該因為轉軸動了一下就落到另一個首頁上。

可滾動的內容可以跨過摺痕。資訊流、文章和列表本來就靠滾動來適應。需要點中的控制元件，比如傳送按鈕、播放控制元件組或浮動操作按鈕，應該避開摺痕，並待在安全區域內。背景圖可以鋪到邊緣。

Duo 上的安全區域經常左右不對稱，而且會在欄移動時變化。檢查清單裡有測量方法，以及把左側內邊距加倍時會出現的那個 bug。面板本身的資料見尺寸指南。

圓角要貼合玻璃。Apple 的準備講座指向了 iOS 26 的同心度（Concentricity）API，並針對 Duo 的圓角形狀做了更新：SwiftUI 裡的 ConcentricRectangle，UIKit 裡的 UICornerConfiguration。當某個形狀需要貼合螢幕時，用它們代替寫死的圓角半徑。

交付前的五個問題

在任何人開啟 Xcode 之前，對設計中的每個頁面都問一遍：

1. 這個功能在合上的手機上存在嗎，還是隻在展開後才有？
2. 每個欄歸哪個系統容器管？列出你自己畫的那些，因為它們不會移動。
3. 手機半折時，每個可點按的控制元件在哪裡？可滾動內容可以跨過摺痕，按鈕不行。
4. 展開後的佈局怎麼利用多出來的寬度：顯示更多內容，還是把同樣的內容放大？
5. 做事做到一半時轉軸動了，使用者會落在哪裡？

接下來，讀一讀豎向欄如何決定哪些東西會移動，再看看如何在不讀取轉軸角度的情況下圍繞摺痕佈局。