2026年9月10日 下午 12:32
UI/UX 設計UI/UX · APPLE · 2026
QUICK ANSWER
iPhone Duo 是蘋果第一台折疊 iPhone，內螢幕 7.6 吋、外螢幕 5.4 吋，10 月 23 日開賣。蘋果同一天在 Human Interface Guidelines 新增〈Designing for iPhone Duo〉，核心只有三件事：用 compact 與 regular 兩個 size class 撐住所有姿勢、避開動態島、相機與摺線三個保留區、把工具列與 tab bar 移到側邊。本文整理尺寸換算、版面規則、mockup 素材與開賣前時間表。
iPhone Duo 闔起來的時候，tab bar 站在螢幕右側。
iPhone 的 tab bar 從 2007 年起就待在底部。9 月 9 日發表會當天下午，蘋果在 Human Interface Guidelines 新增〈Designing for iPhone Duo〉這一頁，把它搬走了：外螢幕又寬又矮，狀態列、動態島、工具列、tab bar 全部靠到側邊排成一直行，把垂直空間留給內容。同一天上線的還有六支 Tech Talk、開發者專頁、規格頁，以及 Design Resources 裡展開與闔起兩種狀態的官方邊框。
這篇文章把這些一手資料讀完，整理成設計師現在就用得上的東西：兩塊螢幕的真實尺寸和換算後的 Figma 畫板 pt 數、蘋果要求的兩個 size class、三種保留區、側邊控制列的排序規則、mockup 與 App Store 截圖的準備方式，還有從現在到 10 月 23 日開賣前的時間表。
我做了近十年 UI/UX，這是第一次看到蘋果在發表會當天就把硬體、設計指南和素材一起交齊。接下來六週，這頁指南會決定你的 App 在一台 NT$74,900 的手機上，是撐滿整片內螢幕，還是縮在中間像一支普通 iPhone。
CONTENTS
CHAPTER 01 · WHAT CHANGED
台灣時間 9 月 10 日凌晨一點 keynote 開場，iPhone 18 Pro 先上，接著是 iPhone Duo。WWDC 2026 時蘋果把 Liquid Glass 底層重修了一遍，很多人以為今年設計面的大事到此為止，結果硬體發表會又補了一刀。
Keynote 結束後幾小時內，四樣東西同時上線。第一是 Human Interface Guidelines 的新頁面〈Designing for iPhone Duo〉，更新紀錄寫著 September 9, 2026、New page，內容涵蓋裝置姿勢、雙螢幕的動態版面、還有工具列與 tab bar 改站垂直軸的規則。第二是 developer.apple.com/iphone-duo 這個專頁，掛了六支 Tech Talk：Design for iPhone Duo、Prepare your app for iPhone Duo、Strike a pose with adaptive layouts on iPhone Duo、Raise the bar with iPhone Duo，另外兩支講多螢幕與相機。第三是規格頁，兩塊螢幕的解析度與 ppi 全部公開。第四是 Design Resources 的 Product Bezels 區新增了 iPhone Duo 與 iPhone 18 的邊框素材。
給設計師看的那支叫 Design for iPhone Duo，由蘋果設計團隊主講，建議整篇文章看完之後回頭看一次，你會發現指南裡每條規則背後都有一個具體的 App 案例。
▲ Apple Developer 頻道的 Tech Talk〈Design for iPhone Duo〉，發表會當天上線
CHAPTER 02 · TWO DISPLAYS
先把數字擺出來。內螢幕 7.6 吋，1878×2670 px，430 ppi，nano-texture 霧面處理；外螢幕 5.4 吋，1398×2034 px，460 ppi。兩塊都是 Super Retina XDR、ProMotion 最高 120Hz、常駐顯示，而且兩塊都有動態島。內螢幕的前鏡頭藏在螢幕下方，只在相機啟動時才現身；外螢幕的前鏡頭在角落，永遠看得見。
626×890
內螢幕 · PT（@3x 換算）
466×678
外螢幕 · PT（@3x 換算）
1:1.42
內螢幕長寬比 · 接近 A4
蘋果的規格頁只給像素，沒有給 pt。現役 iPhone 全部是 @3x，把像素除以三就是 626×890 與 466×678，這也是幾個開發者部落格在發表會當晚算出來的數字。模擬器要等本月稍晚的 Xcode 27.1 beta，在那之前請把這兩組數字當成「換算值」，畫板先開，量測等模擬器。
表格裡最該盯住的一列是外螢幕。466×678 pt 對上 iPhone 18 Pro 的 402×874 pt，寬了 64 pt，矮了 196 pt。矮掉的兩百個點差不多是一整組 navigation bar 加 tab bar 再加一個 section 的高度，這就是蘋果把控制列全部趕去側邊的原因。內螢幕那邊，2670 除以 1878 是 1.42，跟 A4 紙的 √2（1.414）幾乎重疊，蘋果自己的說法是內螢幕面積比 iPhone 18 Pro Max 大五成，外螢幕面積則有 iPhone 18 Pro 的九成以上。你可以把展開後的 iPhone Duo 想成一張直放的 A5 紙，闔起來則是一支矮胖版的 iPhone。
CHAPTER 03 · SIZE CLASSES
HIG 對 iPhone Duo 的第一條規則，跟很多人的直覺相反。這台機器可以半開像一本書、攤平放在桌上、立在桌緣當小相框，看起來像要為每一種姿勢各畫一套版面，蘋果的指南明講：支援各種姿勢，不代表為每種姿勢設計一套自訂版面。外螢幕用 compact width 的版面，內螢幕用 regular width 的版面，這兩套就是所有姿勢的基本盤。App 改變尺寸的時候不要重新發明介面，讓既有的版面依可用空間展開就好。
Mail 是指南裡的示範。闔起時外螢幕只顯示一層，信件列表或單封信件擇一；展開後兩者並排。資訊架構沒有動，只是在大螢幕上多露出一層。這跟 iPhone 轉去 iPad 的邏輯完全一樣，split view 在內螢幕展開成雙欄、在外螢幕收成單欄，用標準元件蓋的 App 幾乎不用改。
外螢幕 · 闔起
compact width
單欄版面，一次一層資訊。狀態列、動態島、工具列、tab bar 全部直排在側邊，垂直空間留給內容。split view 收成單一 pane。
內螢幕 · 展開
regular width
雙欄版面，多露出一層資訊。橫向時控制列仍在側邊，直向時垂直空間夠，保留標準的橫向工具列。split view 展開成兩欄，可以跑 Split View 多工。
指南裡真正的新東西叫 arrangement view，一種裝著主視圖與次視圖的版面容器，依螢幕大小、方向和保留區自動決定怎麼排。它有兩種型態：split 會把空間分給兩個視圖，比較寬時左右切、比較高時上下切；overlay 則把兩個視圖疊在一起，裝置半開時各佔一邊，其他時候主視圖蓋在次視圖上。指南給的對應關係很好記：原本用 HStack 或 VStack 並排的兩個視圖，直接對應 split arrangement；原本用 ZStack 疊起來的，對應 overlay arrangement。它只管版面不管導覽，navigation split view 和 tab view 要包在它外面。
對 Figma 端的意義是：你的元件必須真的能 resize。Auto Layout 的 fill、hug、fixed 三種 resizing 在這台機器上會被實際考驗，一個寫死寬度的卡片在 466 pt 與 626 pt 之間會露餡。用 Slots 管理內容替換的設計系統，這次會比 detach 派輕鬆很多。
CHAPTER 04 · RESERVED REGIONS
safe area 大家都會處理，iPhone Duo 在 safe area 之上多了一層叫 reserved regions 的概念：螢幕上有些區域內容要避開，元件要順著它調整。指南說如果你做過 iPad 上的視窗控制項，會覺得眼熟。
01
動態島區
永遠存在。Live Activities 出現時會擴大。控制列在側邊時，系統會自動把元件排開避讓。
02
相機區
只在相機啟動時出現。內螢幕的鏡頭平常藏在螢幕下，一開相機，UI 會讓開一塊，提示鏡頭在那裡。
03
摺疊區
裝置半開時才出現。把內螢幕分成兩塊可用區域，中間那條摺線被扣掉。
大部分系統元件會自動避讓：alert、context menu、sheet 遇到摺線會自動移位，navigation split view 會調整欄寬與邊距去對齊內螢幕的對稱結構。自訂元件則要靠 reserved region API 把內容推離保留區。指南給了兩條實務建議，第一條是版面容器選會自己適應的那種，例如備忘錄的 split view 會在裝置摺起時調整兩個 pane 的寬度，讓兩邊都看得清楚；第二條是格線版面用偶數欄，內容才能在摺線兩邊分得乾淨。三欄的產品格線在半開的 iPhone Duo 上，中間那欄會剛好卡在摺線上。
還有一句話很值得抄進設計系統文件：只移動必要的東西。元件消失或大幅位移都會讓人找不到，小幅調整永遠好過重新排列。
CHAPTER 05 · VERTICAL CONTROLS
這章是整份指南的核心，也是設計師最需要重新練習的部分。外螢幕比其他 iPhone 都寬、都矮，所以系統把原本在螢幕頂端與底端的東西全部移到側邊：動態島、狀態列、含導覽按鈕的工具列、tab bar，站成一直行。內螢幕橫向時控制列也留在側邊，好讓人在兩塊螢幕之間切換時，控制列一直在同一個高度。唯一的例外是內螢幕直向，垂直空間夠，保留標準的橫向工具列。
兩個 App 用 Split View 共用內螢幕時，各自把控制列放在自己的外側邊緣，左邊的 App 控制列在左、右邊的在右。控制列對齊的是硬體，它在外螢幕上永遠跟前鏡頭保持同一個相對位置，右到左的語言也不換邊。這代表版面的可用空間是不對稱的，safe area 要確實用上，包括對面那一側，因為 Split View 時對面可能是另一個 App 的控制列。
垂直軸上的排序，指南寫得很清楚。
最上面：主要導覽，Back 或 Close
保留垂直軸的頂端給導覽控制項，維持大家熟悉的導覽習慣。
接著：顯眼的主要動作，例如 Done
重要動作緊跟在導覽後面，手指不用跑遠。
其餘工具列項目，保持原本的分組
系統會在原本頂端與底端的項目之間留一段垂直空隙，讓兩組東西分得開。
放不下就溢出，預設由下往上收
用 visibility priority 改順序，先整組排、再排組內的個別項目。常用動作先保、帶 badge 的狀態項目留久一點。
幾條細規則會直接影響你怎麼畫元件。第一，帶文字的標籤會留在橫向列裡，所以按鈕能用 symbol 就用 symbol，但 title 還是要給，系統在溢出選單與展開形式裡會用它。第二，導覽為主的 App 把工具列項目收進溢出選單，讓 tab bar 與主要目的地留著；任務為主的 App 則反過來縮小 tab bar，保住完成任務要用的工具列動作，這跟其他 iPhone 上的 tab bar 縮小行為是同一套。第三，如果你的 App 本來就有自己的「更多」選單，把那些動作併進系統的溢出選單，省略號留給溢出，其他選單換別的 symbol。
滿版版面沒有被禁止。計算機就是整個寬度撐滿，只要別跟動態島與狀態列打架，沉浸式、不捲動的視覺介面都可以這樣做，也可以混用：背景圖或 header 滿版，可捲動的內容內縮。
“
控制列跟著硬體站，內容跟著空間走。
這句話是我讀完整份指南之後的濃縮。iPhone 十九年來的介面文法，第一次把「控制列在哪裡」交給硬體決定，把「內容長什麼樣」交給空間決定。指南自己的用詞是：控制列在垂直軸上的位置，是 iPhone Duo 的核心模式之一，把控制列放在熟悉的位置，人才能一拿到手就知道你的 App 怎麼用。
CHAPTER 06 · THE 1.42 PROBLEM
接近 A4 的比例對文件、信件、閱讀、雙欄版面都是禮物，因為那就是一張紙對摺後的形狀。對 16:9 的內容則是麻煩。內螢幕橫放時長邊 890 pt，一支 16:9 的影片會被畫成 890×501 pt，上下總共剩 125 pt 的黑邊，差不多是螢幕的五分之一。影片 App 在這台機器上同時拿到更大的畫面和更大的黑邊，比例就是比例，沒有魔法可以消掉。
遊戲的規則寫得更直接。你可以鎖定直向或橫向，但姿勢改變時畫面要填滿螢幕；resize 的時候文字與控制項的大小盡量維持一致；能改比例就改比例，別用 letterbox 或 pillarbox；真的避不掉，就在留白區補上美術，讓體驗看起來仍然是滿版。這條規則對做遊戲 UI 的設計師而言，等於多了一張「邊框美術」的工作單。
CHAPTER 07 · IN PRACTICE
模擬器要等 Xcode 27.1 beta，但有三件事今天就能做，而且都會在 10 月 23 日之前派上用場。
在 Figma 開兩個畫板：626×890 與 466×678
把你 App 最重要的五個畫面各放進去一次。466 寬會逼你面對「矮 196 pt」的問題，626 寬會逼你決定第二欄要露出什麼。tab bar 元件加一個 vertical 的 variant，按 Back／Close、Done、其餘項目的順序排。
下載官方邊框，照規範做 mockup
Design Resources 的 Product Bezels 區新增了 iPhone Duo，Photoshop 與 PNG 兩種格式，展開與闔起各兩色。PSD 用 Smart Object 換畫面，狀態列的訊號、Wi-Fi、電量選項就在圖層裡。蘋果的行銷規範要求產品圖原樣使用：不加倒影、陰影、高光，不裁切、不傾斜、不旋轉，文案放旁邊不壓在機身上，螢幕上最小 200 px，多台裝置同框維持真實比例，而且永遠用你的 App 支援的最新一代機型。
App Store 截圖從此準備兩套
闔起一套、展開一套。App Store Connect 的截圖規格還沒公布，先把兩種狀態的關鍵畫面做出來，規格出來的時候只剩套框。展開態的第一張截圖，請用雙欄版面證明你有為這塊螢幕做設計。
官方邊框沒有 Figma 版，Figma 使用者的作法是把 PNG 拖進去當框，或者在 Photoshop 裡用 Smart Object 換畫面，跟包裝 mockup 的置入邏輯相同。另外提醒一個小陷阱：Design Resources 上的資料夾叫 iPhone 18，裡面裝的是 18 Pro 系列的邊框，標準版 iPhone 18 要到 2027 年初才會出。
CHAPTER 08 · TAKEAWAYS
TIMELINE · SEP—OCT 2026
9/9
發表會
HIG 新頁、六支 Tech Talk、規格頁、官方邊框同日上線
9/16–17
Group Labs
線上直接問蘋果的工程師與設計師
9/23
Forums Q&A
SwiftUI、UIKit、相機三場
9 月下旬
Xcode 27.1 beta
模擬器到手，驗證 pt 數與側邊控制列
10/16
台灣開放預訂
晚上 8 點，夜空色與星光白色
10/23
開賣
你的 App 出現在真機上的第一天
NOTE
依 Tech Talk 的說法，沒有用 iOS 27 SDK 編譯的 App，在展開的內螢幕上只會以原本的大小顯示；用 iOS 27 SDK 會延伸到狀態列旁邊；要撐到螢幕邊緣得用 iOS 27.1 SDK。arrangement view 這類新 API 也要等 iOS 27.1。設計稿可以先走，工程端的排程要對齊這個版本。
TAKEAWAYS · 一分鐘懶人包
→
兩組畫板：內螢幕 626×890 pt、外螢幕 466×678 pt（@3x 換算，等 Xcode 27.1 模擬器驗證）。外螢幕比 iPhone 18 Pro 寬 64 pt、矮 196 pt。
→
兩個 size class 撐所有姿勢：外螢幕 compact width、內螢幕 regular width，別為每種姿勢各畫一套。
→
三個保留區：動態島永遠在、相機區只在拍照時出現、摺疊區在半開時把內螢幕切成兩塊。格線用偶數欄。
→
側邊控制列的排序：Back／Close 最上、Done 其次、其餘保持原分組、溢出由下往上收；能用 symbol 就別用文字標籤。
→
內螢幕 1:1.42 接近 A4：文件與雙欄舒服，16:9 影片橫放會留五分之一的黑邊，遊戲寧可改比例也別 letterbox。
→
官方邊框只有 PSD 與 PNG，展開、闔起各兩色；行銷素材原樣使用、最小 200 px、永遠用最新機型。App Store 截圖準備兩套。
→
兩個日期：10 月 16 日晚上 8 點台灣開放預訂，10 月 23 日開賣；官網售價 NT$74,900 起。
回頭看這一整頁指南，蘋果做的事情很節制。它沒有替折疊機發明一套新的 iPhone 介面，它把既有的 size class、safe area、split view 和 tab bar 縮小行為全部搬過來，只在兩個地方動刀：多了保留區，控制列改站側邊。剩下的工作留給設計師，那就是把每一個畫面都放進 466 寬與 626 寬的框裡，看它會不會露餡。
從今天起，每個 iPhone 畫面都要能被摺成兩半。
RELATED READS · 延伸閱讀
EXTRA · LINKS 官方資源
Human Interface Guidelines：Designing for iPhone Duo 本文所有版面規則的原始出處
Get Ready for iPhone Duo 六支 Tech Talk、Group Labs 與 Q&A 時程
Apple Design Resources：Product Bezels iPhone Duo 與 iPhone 18 系列的官方邊框
Marketing Resources and Identity Guidelines 產品圖原樣使用、最小尺寸與禁止事項
iPhone Duo 技術規格（台灣官網） 兩塊螢幕的解析度、ppi 與機身尺寸
FAQ
A：內螢幕 7.6 吋、1878×2670 px、430 ppi；外螢幕 5.4 吋、1398×2034 px、460 ppi。兩塊都是 Super Retina XDR OLED、ProMotion 最高 120Hz、常駐顯示，都有動態島。內螢幕長寬比約 1:1.42，接近 A4 紙的比例。
A：以 @3x 換算，內螢幕 626×890 pt、外螢幕 466×678 pt。蘋果的規格頁只公布像素，pt 是把像素除以三的換算值，正式數字請等 Xcode 27.1 beta 的模擬器驗證。對照組：iPhone 18 Pro 是 402×874 pt。
A：外螢幕比其他 iPhone 寬又矮，為了把垂直空間留給內容，系統把狀態列、動態島、工具列與 tab bar 全部移到側邊直排；內螢幕橫向時也維持在側邊，讓兩塊螢幕之間的體驗連續。只有內螢幕直向保留標準的橫向工具列。
A：內容要避開、元件要順應的螢幕區域，共三種：永遠存在的動態島區、只在相機啟動時出現的相機區、裝置半開時把內螢幕分成兩塊的摺疊區。大部分系統元件會自動避讓，自訂元件要用 reserved region API 處理。
A：不會壞，但會浪費螢幕。依 Tech Talk 的說法，沒有用 iOS 27 SDK 編譯的 App 在展開的內螢幕上只會以原本的大小顯示，要撐到螢幕邊緣得用 iOS 27.1 SDK。用標準系統元件且支援 resize 的 App，只需少量調整就能適應各種姿勢。
A：台灣 10 月 16 日晚上 8 點開放預訂，10 月 23 日開賣，兩色：夜空色、星光白色。官網售價 NT$74,900 起，容量 256GB 到 2TB。
A：Apple Design Resources 頁面的 Product Bezels 區，提供 Photoshop 與 PNG 兩種格式，包含展開與闔起兩種狀態、兩種顏色。使用時要遵守蘋果的 Marketing Resources and Identity Guidelines：原樣使用、不加倒影陰影、不傾斜裁切、螢幕上最小 200 px。
