---
title: "iPhone Duo 為什麼把 tab bar 搬到側邊？折疊 iPhone 設計指南：size class、保留區與 Figma 畫板尺寸"
slug: iphone-duo-design-guide-hig-tab-bar
url: https://rar.design/posts/iphone-duo-design-guide-hig-tab-bar
published_at: 2026-09-10
author: "設計師 Riven"
category: "UI/UX 設計"
access: public_access
---

# iPhone Duo 為什麼把 tab bar 搬到側邊？折疊 iPhone 設計指南：size class、保留區與 Figma 畫板尺寸

> 蘋果在發表會當天交出 HIG 新頁與六支 Tech Talk，設計師開賣前要改的畫面、要開的畫板、要準備的兩套截圖

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-09-10

UI/UX · APPLE · 2026▲ iPhone Duo 展開後的內螢幕：Dock 與狀態列都站在右側邊緣，垂直空間整片留給內容（圖：Apple）QUICK ANSWERiPhone 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。CONTENTS01發表會當天下午，蘋果交出的四樣東西02兩塊螢幕到底多大：px、pt 與比例03兩個 size class，撐住所有姿勢04三個保留區：動態島、相機、摺線05側邊控制列：iPhone 介面文法的新一頁061:1.42 的代價：影片、遊戲與滿版畫面07現在就能動手的三件事08開賣前的時間表與重點整理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兩塊螢幕到底多大：px、pt 與比例先把數字擺出來。內螢幕 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，在那之前請把這兩組數字當成「換算值」，畫板先開，量測等模擬器。DISPLAYDuo 內螢幕Duo 外螢幕iPhone 18 Pro尺寸7.6 吋5.4 吋6.3 吋像素1878×26701398×20341206×2622ppi430 ppi460 ppi460 ppipt（@3x）626×890466×678402×874長寬比1:1.421:1.451:2.17size classregularcompactcompact表格裡最該盯住的一列是外螢幕。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兩個 size class，撐住所有姿勢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 介面文法的新一頁這章是整份指南的核心，也是設計師最需要重新練習的部分。外螢幕比其他 iPhone 都寬、都矮，所以系統把原本在螢幕頂端與底端的東西全部移到側邊：動態島、狀態列、含導覽按鈕的工具列、tab bar，站成一直行。內螢幕橫向時控制列也留在側邊，好讓人在兩塊螢幕之間切換時，控制列一直在同一個高度。唯一的例外是內螢幕直向，垂直空間夠，保留標準的橫向工具列。▲ 行事曆在內螢幕橫向：月檢視與日檢視並排，狀態列、tab bar 與新增按鈕沿右側邊緣直排（圖：Apple）兩個 App 用 Split View 共用內螢幕時，各自把控制列放在自己的外側邊緣，左邊的 App 控制列在左、右邊的在右。控制列對齊的是硬體，它在外螢幕上永遠跟前鏡頭保持同一個相對位置，右到左的語言也不換邊。這代表版面的可用空間是不對稱的，safe area 要確實用上，包括對面那一側，因為 Split View 時對面可能是另一個 App 的控制列。垂直軸上的排序，指南寫得很清楚。1最上面：主要導覽，Back 或 Close保留垂直軸的頂端給導覽控制項，維持大家熟悉的導覽習慣。2接著：顯眼的主要動作，例如 Done重要動作緊跟在導覽後面，手指不用跑遠。3其餘工具列項目，保持原本的分組系統會在原本頂端與底端的項目之間留一段垂直空隙，讓兩組東西分得開。4放不下就溢出，預設由下往上收用 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 PROBLEM1:1.42 的代價：影片、遊戲與滿版畫面接近 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 日之前派上用場。1在 Figma 開兩個畫板：626×890 與 466×678把你 App 最重要的五個畫面各放進去一次。466 寬會逼你面對「矮 196 pt」的問題，626 寬會逼你決定第二欄要露出什麼。tab bar 元件加一個 vertical 的 variant，按 Back／Close、Done、其餘項目的順序排。2下載官方邊框，照規範做 mockupDesign Resources 的 Product Bezels 區新增了 iPhone Duo，Photoshop 與 PNG 兩種格式，展開與闔起各兩色。PSD 用 Smart Object 換畫面，狀態列的訊號、Wi-Fi、電量選項就在圖層裡。蘋果的行銷規範要求產品圖原樣使用：不加倒影、陰影、高光，不裁切、不傾斜、不旋轉，文案放旁邊不壓在機身上，螢幕上最小 200 px，多台裝置同框維持真實比例，而且永遠用你的 App 支援的最新一代機型。3App Store 截圖從此準備兩套闔起一套、展開一套。App Store Connect 的截圖規格還沒公布，先把兩種狀態的關鍵畫面做出來，規格出來的時候只剩套框。展開態的第一張截圖，請用雙欄版面證明你有為這塊螢幕做設計。▲ Apple Design Resources 的 iPhone Duo 邊框素材：闔起狀態的機背與外螢幕，外螢幕右上角是常駐的前鏡頭（圖：Apple）官方邊框沒有 Figma 版，Figma 使用者的作法是把 PNG 拖進去當框，或者在 Photoshop 裡用 Smart Object 換畫面，跟包裝 mockup 的置入邏輯相同。另外提醒一個小陷阱：Design Resources 上的資料夾叫 iPhone 18，裡面裝的是 18 Pro 系列的邊框，標準版 iPhone 18 要到 2027 年初才會出。CHAPTER 08 · TAKEAWAYS開賣前的時間表與重點整理TIMELINE · SEP—OCT 20269/9發表會HIG 新頁、六支 Tech Talk、規格頁、官方邊框同日上線9/16–17Group Labs線上直接問蘋果的工程師與設計師9/23Forums Q&ASwiftUI、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 · 延伸閱讀WWDC 2026 發表了什麼？Liquid Glass 大修、Siri AI 登場與設計師重點解析iOS 27 的設計底層在六月就改過一輪，iPhone Duo 的指南是接在它後面的。→Figma Auto Layout 完整教學：從基礎到 Grid 新功能兩個 size class 的畫面，最後都靠 resizing 設定撐起來。→Figma Slots 教學：設計系統終於可以靈活又不失控了元件要能在 466 與 626 之間替換內容而不 detach，Slots 是現成的答案。→2026 UI/UX 設計趨勢全解析：10 個正在改寫介面的方向折疊機的側邊控制列，會是今年趨勢清單裡最實體的一條。→7 個 UI/UX 設計原則完整解析：從格式塔到 80/20 法則「只移動必要的東西」背後是格式塔的連續性原則。→Figma Config 2026 發表了什麼？Code Layers、Motion 與六種材料上 canvas今年設計工具端的大更新，跟蘋果這頁指南對照著看。→《蘋果之道》讀後心得：蘋果 50 年給創作者的 5 個啟發蘋果為什麼總是把規則寫得這麼細，書裡有答案。→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 與機身尺寸COURSE100 種 Figma 設計的方法兩個 size class 的畫面，最後都靠 Auto Layout 的 resizing 與 variant 撐起來，這門課從零教起。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →FAQ常見問題Q：iPhone Duo 的螢幕尺寸與解析度是多少？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 紙的比例。Q：iPhone Duo 的 Figma 畫板要開多大？A：以 @3x 換算，內螢幕 626×890 pt、外螢幕 466×678 pt。蘋果的規格頁只公布像素，pt 是把像素除以三的換算值，正式數字請等 Xcode 27.1 beta 的模擬器驗證。對照組：iPhone 18 Pro 是 402×874 pt。Q：iPhone Duo 的 tab bar 為什麼在側邊？A：外螢幕比其他 iPhone 寬又矮，為了把垂直空間留給內容，系統把狀態列、動態島、工具列與 tab bar 全部移到側邊直排；內螢幕橫向時也維持在側邊，讓兩塊螢幕之間的體驗連續。只有內螢幕直向保留標準的橫向工具列。Q：什麼是 iPhone Duo 的保留區（reserved regions）？A：內容要避開、元件要順應的螢幕區域，共三種：永遠存在的動態島區、只在相機啟動時出現的相機區、裝置半開時把內螢幕分成兩塊的摺疊區。大部分系統元件會自動避讓，自訂元件要用 reserved region API 處理。Q：現有的 iPhone App 在 iPhone Duo 上會壞掉嗎？A：不會壞，但會浪費螢幕。依 Tech Talk 的說法，沒有用 iOS 27 SDK 編譯的 App 在展開的內螢幕上只會以原本的大小顯示，要撐到螢幕邊緣得用 iOS 27.1 SDK。用標準系統元件且支援 resize 的 App，只需少量調整就能適應各種姿勢。Q：iPhone Duo 什麼時候開賣、台灣售價多少？A：台灣 10 月 16 日晚上 8 點開放預訂，10 月 23 日開賣，兩色：夜空色、星光白色。官網售價 NT$74,900 起，容量 256GB 到 2TB。Q：哪裡下載 iPhone Duo 的官方邊框（mockup）素材？A：Apple Design Resources 頁面的 Product Bezels 區，提供 Photoshop 與 PNG 兩種格式，包含展開與闔起兩種狀態、兩種顏色。使用時要遵守蘋果的 Marketing Resources and Identity Guidelines：原樣使用、不加倒影陰影、不傾斜裁切、螢幕上最小 200 px。