iPhone Duo 設計規範與研究整理｜給產品設計師的工作筆記
先講結論：iPhone Duo 不是「多做一張展開版畫面」而已。 真正要設計的是同一個任務，怎麼在外螢幕、內螢幕、部分摺疊與 Split View 之間保持連續，而且控制項永遠找得到。
文案內容
- Apple 官方：產品規格、Human Interface Guidelines、Developer Tech Talks。
- 媒體實測：摺痕、手感與轉場等現場觀察；只能當初步印象。
- 設計建議：我根據官方規範整理出的 Figma 做法與檢查清單，屬於工作方法，不是 Apple 的硬性規定。
資料更新時間：2026 年 9 月 10 日。
先看結論
- 不要為每個摺疊角度各畫一套 UI。 Apple 要你抓住 compact／regular 兩種 size class，讓版面沿著可用空間自然伸縮。1
- 外螢幕不是一般直向 iPhone。 它比較寬、比較矮，系統會把工具列、分頁列與導覽控制移到側邊。
- 展開後也不是把手機版等比例放大。 內螢幕適合多顯示一層資訊，例如 list + detail、雙欄內容或兩個協作中的 view。
- 折線不是固定的一條禁區。 部分摺疊時，中央才會成為 reserved region；鏡頭、Dynamic Island、Split View 也會改變安全區。
- 最重要的是狀態連續。 開合裝置時，使用者正在看的內容、選取狀態與功能都應保留，不要像切換到另一個 app。
設計核心：做一個會適應的體驗
1. 用可用空間思考，不要用機型名稱思考
Apple 的方向很明確：以 size class、layout margin 與 safe-area inset 來決定版面，不要寫死寬度，也不要假設「外螢幕一定直向、內螢幕一定橫向」。部分摺疊與 Split View 都會產生更多中間尺寸。1
對設計師來說，可以把問題改寫成：
- 空間變寬時，資訊層級是否能多展開一層？
- 空間變窄時，哪些內容先收合，哪些動作不能消失？
- 使用者開合裝置後，焦點、捲動位置、選取內容與未完成輸入是否保留？
- 背景可以滿版，但文字與互動控制是否仍在安全區內？
2. Reserved regions 會動，安全區也可能不對稱
iPhone Duo 有三種特別需要避開的區域：外螢幕鏡頭與 Dynamic Island、啟用時才出現的內螢幕下相機，以及部分摺疊時的中央折疊區域。系統元件會自動避讓；自製元件則必須跟著 safe area／reserved-region API 調整。16
別把左右 inset 當成一樣。 側邊控制列、鏡頭與 Split View 都可能讓安全區不對稱；Figma 的置中不能只靠畫布中心線。
3. 摺疊時只移動必要的東西
Apple 不建議在使用者折起裝置時大幅重排。按鈕突然消失或跨到另一側，會讓人找不到剛才的操作位置。優先做小幅位移，讓互動元素避開中央；可捲動內容可以跨過折線，但重要控制最好不要壓在那裡。7
如果是 grid，優先使用偶數欄，部分摺疊時比較容易平均切到兩側。
Apple HIG 官方圖解
下面都是 Apple HIG 的原始高解析圖，不是二手媒體重畫。文案可以搭著圖看，理解會比只讀規則快很多。1
裝置姿態：不用每個角度重畫一套
同一個 app 可能闔起、完全展開、像書一樣半開、放在桌面或立在邊緣。Apple 的做法不是為六種姿態各做一套 UI，而是從 compact／regular 與可用空間出發。
外螢幕與內螢幕：資訊層級可以增加，但狀態要連續
外螢幕一次顯示 list 或 detail；展開後可以同時顯示兩層。重點是選取狀態、捲動位置與正在閱讀的內容不能因為開合而重置。
Reserved regions：鏡頭與折線都會改變可用空間
外螢幕鏡頭區永遠存在，還可能展開成 Dynamic Island。內螢幕相機只在啟用時成為可見的 reserved region；中央折線則只在部分摺疊時成為 division region。
部分摺疊：移動必要內容，不要整頁大風吹
Apple 的例子不是把畫面改成另一個 layout，而是保留原本的欄位與關係，只調整寬度與位置避開中央。這就是 displacement。
垂直控制列與不對稱安全區
當兩個 app 並排時，左側 app 的控制在左邊、右側 app 的控制在右邊。這也是為什麼不能假設左右 safe-area inset 相等。
空間不足時：決定保留 toolbar 還是 tab bar
導覽導向的產品優先保留 tab bar；任務導向的畫面優先保留 toolbar。若實際檔名或圖示隨 Apple 更新，以 最新 HIG 為準。
六種狀態，設計時至少都要看過
| 狀態 | 系統／版面變化 | 設計師要檢查 |
|---|---|---|
| 外螢幕、闔起 | Compact；側邊垂直控制列 | 主要任務能否單手完成；內容有沒有被側邊控制吃掉 |
| 內螢幕、橫向展開 | Regular；側邊控制維持，適合 sidebar／雙欄 | 是否真的增加資訊價值，而不只是把卡片拉寬 |
| 內螢幕、直向展開 | 空間較高，工具列可維持水平 | 直向與橫向的資訊層級是否一致 |
| 部分摺疊 | 中央成為 reserved region；元件會向兩側避讓 | CTA、輸入欄、影片控制與浮動按鈕不要卡在折線 |
| Split View | 每個 app 的控制列靠各自外側；安全區更不對稱 | 最窄寬度、文字換行、overflow、左右兩側手勢 |
| 坐立／帳篷／桌面模式 | 一側可成內容區，另一側可成控制區 | 不要假設哪一半永遠在上；關鍵功能需跨姿態可用 |
垂直控制列：最陌生，也最容易畫錯
外螢幕與內螢幕橫向時，Dynamic Island、status、toolbar、tab bar 會共享同一條垂直邊。使用標準系統元件，多數適應會自動完成。1
設計時可以照這個順序檢查：
- 最上方保留 Back／Close 等主要導覽。
- 接著是 Done 或當下最重要的行動。
- 高頻、帶 badge 或會傳達狀態的動作優先留在畫面上。
- 空間不足時讓低優先動作進系統 overflow；不要再做第二個自訂「⋯」。
- 圖示型 toolbar item 仍要有文字名稱，系統會在 overflow 或展開狀態使用。
- 與特定內容區域有關的控制，留在內容附近，不必全部搬到最外側。
- 導覽型產品優先保留 tab bar；任務型產品優先保留 toolbar。
文字按鈕通常仍會留在水平 bar，因此工具列能用清楚的 symbol 就不要塞長文字。但「圖示化」不是刪除標籤：語意與無障礙名稱還是要完整。8
內螢幕該怎麼多用，而不是亂塞
Split view
最直接的模式是 list + detail。外螢幕一次顯示一層；展開後顯示兩層，但使用者正在看的 detail、選取項目與返回關係要保持一致。
Arrangement view
這一段最容易和 Split view 搞混。
先講最簡單的版本：Arrangement view 不是一種新的導覽，而是一個會看空間、方向與折線，自動安排兩塊內容的容器。
你先準備 primary 和 secondary 兩個 view，系統再依照裝置現在是展開、直放、橫放或部分摺疊，決定它們要並排、上下排列，還是疊在一起。1
| 模式 | 畫面怎麼排 | 比較適合 |
|---|---|---|
| Split arrangement | 兩個 view 都完整顯示。畫面寬時左右排，畫面高時上下排。 | 影片 + 播放清單、相機預覽 + 控制、編輯器 + inspector |
| Overlay arrangement | 平放時 primary 疊在 secondary 上；部分摺疊時，兩個 view 可以各自移到折線兩側。 | 地圖 + 資訊卡、播放器 + 浮動面板、主要內容 + 可收合工具 |
Apple HIG 就有提供這兩張圖，放在一起看會比較容易理解：
左邊的 Split 是「兩個都要完整看到」；右邊的 Overlay 是「一個是底、一個浮在上面」。部分摺疊時，Overlay 才會把兩塊內容分到折線兩側。
拿 Podcast 來說，播放器可以是主要內容，Up Next 是第二塊內容。手機完全展開時，Up Next 可以像一張卡片疊在播放器上；手機摺起來之後，播放器和清單就各自移到一側。內容沒有換頁，只是彼此的位置關係改了。
那它和 Split view 差在哪裡？
| Split view | Arrangement view | |
|---|---|---|
| 主要工作 | 管理資訊層級與導覽 | 安排兩塊內容的位置 |
| 常見例子 | 信件列表 → 信件內容 | 播放器 + 清單、地圖 + 資訊卡 |
| 會不會處理 navigation | 會 | 不會 |
所以如果兩塊內容之間有「選左邊，右邊換內容」的層級關係，比較像 Split view；如果兩塊內容本來就屬於同一個任務，只是要隨著空間重新站位，才比較像 Arrangement view。
導覽容器要放在 Arrangement view 外面。Apple 也特別提醒，Arrangement view 只負責 layout，不負責使用者怎麼前進、返回或切換頁面。Strike a pose with adaptive layouts
Foldable design：Apple 官網是怎麼做的？
這段看起來很複雜，但拆開其實就三個東西：滑桿、Three.js，以及三個開合狀態。
我看完程式碼後，這段應該不是用幾張圖片互相切換，而是把一台完整的 3D iPhone 模型放進 Three.js。手機左右兩半和中間轉軸本身都可以動，拖曳滑桿時，程式會同時改變轉軸角度、模型位置和鏡頭，所以才會有一台手機真的在面前打開的感覺。
螢幕畫面則是另外貼在 3D 模型上的 texture。手機開合時，同一個進度也會控制螢幕的模糊、亮度和內側陰影；半開時畫面最模糊，完全闔起或展開後再慢慢回到清楚。
模糊的做法有點像一條會移動的清晰線，離它越遠就越糊，所以看起來會像 100 → 0 → 100。而且 blur 只作用在螢幕 texture 上，手機邊框、轉軸和反光還是清楚的，整體才會看起來比較真。
程式來源：Apple iPhone Duo Product Viewer／main.built.js
官方資源
Apple 的 Product Bezel 目前以 DMG 提供，內含 Photoshop／PNG 資產。正式設計與交付請以官方 UI Kit、bezel、Xcode 27.1 Device Hub 顯示的 safe area 為準，不要只從像素解析度反推 Figma pt 畫布。但是Duo的畫面目前還沒有，所以需要再等等 96
建議的檔案結構
- 00 Foundations：色彩、字級、spacing、safe-area overlay。
- 01 Device contexts：Outer / Inner / Partial fold / Split View。
- 02 Navigation：Horizontal bar / Vertical bar / Sidebar / Overflow。
- 03 Components：同一元件的 compact、regular 與 fold-avoidance 變體。
- 04 Key flows：挑 3–5 條核心任務，做開合前後的連續流程。
- 05 QA：把檢查狀態做成 section，而不是散落在畫面旁。
元件屬性可以這樣設
| Property | 建議值 | 用途 |
|---|---|---|
| Display | Outer / Inner | 切換外、內螢幕語境 |
| Pose | Closed / Open / Partial | 測試折線避讓與資訊展開 |
| Size class | Compact / Regular | 決定單欄、雙欄與 sidebar |
| Bar axis | Horizontal / Vertical | 同一組 action 換軸，不換語意 |
| Priority | Primary / Visible / Overflow | 明確定義空間不足時誰先被收起 |
| Camera | Inactive / Active | 測試內螢幕相機出現時的位移 |
Prototype 不用做一百張，做這三段就夠有用
- 外螢幕開始 → 展開繼續：同一 detail、同一輸入狀態，展開後多出 sidebar 或輔助資訊。
- 展開 → 部分摺疊：互動控制離開中線，但不改變相對位置與操作語意。
- 單 app → Split View：縮到最窄狀態，驗證工具列 overflow、文字換行與安全區。
- 不過我自己一定是挑幾張出來做啦，要重複做這麼多張也很難管理，我認為展開的時候畫面如何呈現是需要重新思考一下。
- 另外元件一定要用apple原生的，不然全部都要單獨設定會很痛苦（我自己公司的就要全部換了）
Apple 官方影片：資訊與重點章節
| 影片 | 片長 | 最有用的部分 |
|---|---|---|
| Design for iPhone Duo | 10:45 | 整體設計模型、外／內螢幕、sheet 與折線避讓 |
| Prepare your app for iPhone Duo | 10:10 | Size class、safe area、Xcode Device Hub |
| Raise the bar with iPhone Duo | 15:43 | 垂直工具列、item 次序、overflow 與 visibility priority |
| Strike a pose with adaptive layouts | 18:01 | Reserved regions、displacement、split／overlay arrangement |
| Leverage multiple displays and scenes | 7:17 | Hinge angle、Split View、多 scene 與雙螢幕 accessory |
| Build a great camera experience | 9:27 | 雙前鏡頭、Virtual Front Camera、雙螢幕 preview |
發表會與延伸觀看
- Apple Event — 2026 年 9 月 9 日：完整發表會，Apple Events 頁面也會提供 replay。
- Apple Events Podcast 版本：1 小時 17 分鐘。
- MacRumors hands-on：有現場影片，適合看機身、摺痕與實際比例。
- Tom's Guide hands-on：適合看開合轉場、操作流暢度與尺寸感。