介面在 iPhone Duo 模擬器中出現留白、拉伸或裁切,不一定是設計稿尺寸錯誤。
最快的排查方式:先確認專案使用的 SDK,再用 Xcode 27.1 模擬器逐一重現展開、摺疊與旋轉狀態;錯位優先檢查固定螢幕尺寸與只依裝置方向切換版面的邏輯。模擬器能協助找出問題,但不等於完成真機驗收。

適合需要把 Figma 設計意圖和原生畫面逐項核對的 UI 設計師,以及要檢視摺疊、展開、旋轉後關鍵流程的產品設計師。
專案或 QA 負責人也可用本文確認交付前需要哪些 Mac、Xcode 和裝置驗收安排。

最後更新於 2026 年 10 月 26 日;SDK 與模擬器資訊依 Apple iPhone Duo 準備指南、Xcode 27.1 發布記錄及相關技術說明核對。

01

先辨認錯位發生在哪個狀態

不要只截下一張「看起來不對」的畫面。先把問題描述成可重現的狀態:外螢幕或內螢幕、展開或摺疊、直向或橫向,以及畫面是留白、裁切、拉伸還是控件被遮擋。這些線索能協助分辨 SDK 顯示差異、可用空間變動和版面邏輯錯誤。

Apple 的準備指南指出,iOS 27 與 iOS 27.1 SDK 在 iPhone Duo 的螢幕利用方式上有差異。舊 SDK 建置的程式即使能執行,也可能未呈現更新 SDK 下的顯示範圍。因此,外螢幕或內螢幕出現留白時,先記下建置使用的 SDK,不要只憑畫面判定素材尺寸錯誤。Apple 的 iPhone Duo 準備指南與 Xcode 27.1 發布說明可用來核對版本背景。

觀察到的狀況 優先核對 判斷方向
邊緣有異常留白 建置所用 SDK、問題出現的螢幕 比較相同姿態下不同 SDK 的畫面;先分清版本差異與資源留白
展開後內容位置偏移 展開前後實際可用寬高、版面斷點 檢查是否以固定螢幕邊界計算位置
旋轉後選錯版面 可用寬高或 size class、方向切換條件 不要假設同一方向必然對應同一種應用程式區域
按鈕或工具列被擠壓 安全區域、可用空間、工具列排列 分別核對內容區和可觸控控件,不要只看背景是否鋪滿

SDK 與畫面狀態對照

檢查項目 要記錄的資料 為什麼有用
SDK 專案建置使用的 SDK 版本 區分版本行為與版面本身的缺陷
裝置姿態 展開、摺疊及旋轉狀態 讓團隊能以相同條件重現錯位
螢幕位置 內螢幕或外螢幕 判斷問題是否只影響特定顯示範圍
異常類型 留白、裁切、拉伸或遮擋 將後續檢查集中到尺寸、裁切或控件位置
02

展開或摺疊後內容突然位移

展開與摺疊會改變應用程式可使用的空間。如果版面仍根據一個固定的螢幕尺寸計算內容位置,就可能出現控件偏移、空白區域過大,或內容被推到可視範圍以外。這類問題通常不是只改一張背景圖就能修好。

可請開發人員確認版面讀取的是視窗或視圖當下的實際範圍,而非假設整個螢幕永遠維持同一個邊界。UIKit 的 UIView bounds 文件說明了視圖自身座標空間的邊界;若使用 SwiftUI,可參考 GeometryReader 文件,核對版面如何依據容器幾何資訊調整。

設計師不必先讀懂程式碼,也能檢查幾個結果:主要標題是否仍在預期位置、主要按鈕是否可見且可觸及、展開後新增的空間是否被合理使用。若只有其中一個狀態出錯,應把該姿態和螢幕位置一併交給開發團隊,而不是只附一張沒有狀態說明的截圖。

提醒:背景圖片填滿寬螢幕,不代表前景按鈕仍處於安全且可觸及的位置。背景裁切與互動控件位置要分開驗收。

03

旋轉後版面分支選錯

裝置方向本身不足以判斷 iPhone Duo 上應採用哪種版面。若設計或程式只用「直向/橫向」切換,就可能在方向相同、但應用程式可用區域不同的情況下,套用不合適的排列。

排查時先比較實際可用寬度與高度,再看目前使用的版面斷點或 size class。Apple 的 iPhone Duo 技術講解涵蓋姿態與應用程式區域的檢查方式,可供團隊核對具體測試情境。設計複核則應回到稿件上的斷點:旋轉前後,主要內容、導覽和關鍵操作是否仍符合原有設計意圖。

如果寬螢幕狀態下圖片主體被切掉,請分開記錄圖片裁切與內容版面。圖片可以採用不同裁切策略,但不可因此遮住主要操作;工具列和標籤列也要留意是否因空間變化而重新排列。若主要按鈕被擠到螢幕邊緣,應再檢查安全區域和可用空間,而非單純縮小整組介面。

04

可重現的排查流程

以下流程適合設計交付前與開發、QA 團隊一起操作;每次只變更一項條件,才能看出錯位是否跟版本或姿態相關。

  • 記錄建置版本。 請開發人員確認專案實際使用的 SDK,並記下 Xcode 版本。不要只記錄本機安裝了哪個 Xcode,因為安裝版本和專案建置使用的 SDK 不是同一項資訊。
  • 固定問題樣本。 選一個最容易出錯的主要畫面,記下入口、畫面內容及操作步驟,例如打開頁面後展開裝置;同一份樣本供設計、開發和 QA 使用。
  • 逐一改變姿態。 在 Xcode 27.1 的 iPhone Duo 模擬器中,分別檢查展開、摺疊及旋轉狀態;每次只改一項,並記下異常是否跟著該狀態出現。
  • 比對可用空間。 若異常只在展開或旋轉後出現,請開發人員核對視窗或視圖實際範圍、版面斷點和 size class,並檢查是否使用固定螢幕邊界。
  • 逐項看交互控件。 核對主要按鈕、工具列、標籤列及安全區域;另外檢查大幅圖片或影片的主體有沒有被裁掉,不要把背景填滿當成版面通過。
  • 留下可交接紀錄。 每個樣本保留螢幕位置、姿態、SDK、重現步驟與截圖,並標出設計稿中對應的斷點或關鍵元素。
  • 劃分驗收責任。 模擬器複核可用於發現版面問題;實際裝置的觸控、顯示和最終交付驗收,仍應由負責真機測試的團隊完成。Apple 亦分別說明了在模擬裝置或實體裝置上執行程式的方式。

若需要交接一個精簡紀錄,可用這段文字模板;以下輸出只是記錄格式示例,不代表實際測試結果:

SDK:請填入專案建置使用的版本
螢幕:外螢幕/內螢幕
姿態:展開/摺疊/旋轉
異常:留白/裁切/拉伸/控件遮擋
重現步驟:請按操作順序填寫
結果:請貼上對應模擬器截圖
05

iPhone Duo 模擬器錯位常見問題

介面被拉伸或裁切時,先檢查什麼?

先記下異常發生的螢幕位置、裝置姿態和專案 SDK,接著用相同條件重現。若只有某個姿態出現問題,再檢查固定螢幕尺寸、視窗實際範圍及圖片裁切方式;若不同 SDK 的呈現不同,先確認版本差異,不要立即重製素材。

展開後版面不合,應看螢幕尺寸還是方向?

先看應用程式實際可用的寬高或 size class,再核對方向判斷。展開會改變可用空間,方向相同也不表示版面區域相同。設計師可將稿件斷點、主要內容位置和按鈕可觸及性逐項比對,並把不一致的姿態交由開發人員檢查版面邏輯。

iOS 27 與 iOS 27.1 SDK 的顯示行為一樣嗎?

Apple 資料指出兩者的螢幕利用方式存在差異。舊 SDK 建置的程式可以執行,但不一定已按新 SDK 的顯示方式適配。排查時應保存建置所用 SDK,再在相同螢幕與姿態下比較;只有確認版本條件一致後,才適合判斷是否為設計資源或版面程式的錯誤。

沒有自己的 Mac,怎麼檢查原生介面?

可先請開發或 QA 團隊提供 Xcode 模擬器的姿態截圖、SDK 資訊和重現步驟。若設計師需要自行操作模擬器,則要安排可用的 Mac 與 Xcode 環境,並先用代表性專案驗證能否完成所需檢查。模擬器可供版面複核,不能取代真實裝置驗收。

06

沒有 Mac 時的檢查安排

Xcode 27.1 的 Device Hub 可用於檢查 iPhone Duo 模擬器中的不同姿態;Apple 的技術講解可協助團隊核對模擬器檢查方式。若設計師目前主要使用 Windows,先確認負責原生複核的同事能否提供 Mac 與 Xcode 環境;若團隊希望自行操作,再用自己的代表性專案測試環境是否符合工作需要。

沒有自有 Mac 時,可比較由開發團隊代為複核與短期使用遠端 Mac 兩種安排。代為複核較省去環境準備,但設計師未必能即時操作和反覆調整;遠端使用則可自行重現問題,仍需先確認可用環境與操作方式。NodeMini 的遠端 Mac 方案資訊可作為評估起點,但服務環境是否符合 Xcode 27.1 的實際需求,應先行確認,不能由此推定模擬器已覆蓋所有裝置狀況。

如果目前流程完全依賴 Windows,原生模擬器複核會多一道設備切換,團隊協作也可能受限於別人何時能提供畫面,且模擬器結果仍不能取代真機驗收。偶爾需要 Xcode 時,租用 Mac 可避免為短期檢查直接購置設備,也讓設計師能自行重現與記錄錯位;若要評估這種短期方案,可查看 NodeMini 的 Mac 使用選項,並先以代表性專案確認環境是否可用。若工作長期依賴穩定的本機 Mac,或驗收必須接觸實體裝置,則應安排自有設備或由團隊負責真機測試,不宜把遠端模擬器當成完整替代方案。