iPhone Duo控制欄設計教學重點

會議重點

iPhone Duo控制欄垂直工具欄TabViewNavigationStackAxis Behavior APIOverflow menuVisibility Priority API

iPhone Duo帶來全新的產品輪廓。較大的寬高比提供更多水平空間，而為了有效運用寬度並騰出內容所需的垂直空間，原本位於頂部或底部的互動元素通常會移至螢幕側邊。外屏與內屏橫向時，控制欄的位置保持一致；內屏竪屏因垂直空間充足，則恢復熟悉的頂部與底部水平控制欄。這些是同一組元件對不同螢幕環境的適配，而非不同功能。

「這些都是相同的組件，它們只是在適應不同的螢幕環境和佈局。」

設計與實作可依序處理四項工作：將既有水平欄適配為縱向佈局、建立控制欄元素的排列與容器適配規則、調整自訂內容以支援縱向空間，並管理overflow menu。

基礎適配與標準容器

• 先以最新版本的SDK重新編譯APP，讓原生介面空間自動完成基本適配。
• SwiftUI應搭配TabView、NavigationStack或NavigationSplitView等標準導航容器，並透過工具欄修飾符配置控制項。
• UIKit建議使用UIUINavigationController與UITabBarController管理工具欄；工具欄項目應設於ViewController後再置入UINavigationController。
• 避免以UIToolbar、UINavigationBar或UITabBar自行拼裝自訂工具欄，否則其中空間不會移至側邊。

控制欄排列與容器邏輯

iPhone Duo允許導航欄、工具欄與Tab欄在同一區域共存，可將其理解為旋轉90度後形成的垂直堆疊；具體組合取決於介面需求。系統備忘錄APP的堆疊可僅含工具欄，時鐘APP可顯示Tab欄，健身APP則可同時包含工具欄與Tab欄。

並非所有工具欄都應轉為縱向。複雜佈局中，只有工具欄容器本身位於螢幕邊緣時，該容器的工具欄元素才會垂直排列。例如分割視圖僅右側詳情欄的工具欄改為垂直，側邊欄仍維持水平；右側詳情欄已有垂直工具欄時，展開的檢查器面板仍以水平排列其按鈕。

外屏上的模態面板工具欄預設垂直顯示，內屏則維持置中水平排列。可透過Preferred Placement API改變面板位置：面板位於左側時工具欄按鈕不變，位於右側時會自動切換為垂直形態。垂直控制欄與硬體對齊，即使在從右到左語言環境中也固定在同一側，內容區則另行調整。

「並不是所有的空間都應該移到縱軸，具體的形態會取決於它所在的容器在整個界面佈局當中的邏輯。」

垂直欄須維持清楚的由上而下層級：頂端保留返回或關閉，其後放置當前畫面最關鍵的操作，如完成或保存。原生導航框架會自動將返回按鈕放在正確位置；自訂返回或關閉按鈕在SwiftUI應使用CancellationAction，在UIKit應使用LeadingItem，並將LeftItemsSupplementBackButton設為False。

需要凸顯的關鍵操作，SwiftUI應設為TopUpPinnedTrailing，UIKit應使用PinnedTrailingGroup。其餘元素維持原有分組；即使合併為單一工具欄，原本頂部與底部群組仍會以分隔間距保有視覺區隔。不同姿態不一定都採垂直工具欄，因此必須維持空間關係一致，避免使用者重新學習操作位置。

內容軸向與自訂視圖調整

水平工具欄具有固定高度與彈性寬度；垂直工具欄則固定寬度、高度可彈性延展，因此更適合圖標形式的互動元素。每個工具欄元素原則上都應同時提供圖標與標題，由系統依情境決定呈現方式：可見於既有頂部或底部欄位時通常優先顯示圖標，未指定圖標則顯示文字；移入溢出菜單時則同時顯示標題與圖標。

提供圖標的按鈕，如返回或分享，會移往縱軸；僅含文字的按鈕則留在水平軸。若已使用SwiftUI的Label或UIBarButtonItem屬性設定標題與圖標，即已具備縱向工具欄適配基礎。即使目前只顯示圖形，也應提供標題，讓元素在溢出菜單或展開狀態中能正確顯示文字。

SwiftUI與UIKit預設依元素內容判斷合適軸向，必要時可使用Axis Behavior API調整。關聯性高的元素應維持在同一軸線，例如可在文字編輯與圖標完成狀態間切換的按鈕，即使變成圖標也不應移至垂直區域；自訂此類按鈕時，應將Axis Behavior設為Horizontal Only。

UIKit自訂視圖與SwiftUI複雜視圖預設維持水平佈局；若自訂視圖確實適合垂直呈現，例如指南針，才設定Axis Behavior為Vertical Preferred。應盡量減少純文字或文字加圖標的自訂按鈕，讓更多元素可垂直配置；多數情況可用圖標傳達操作，計數資訊則可改以徽標呈現。

自訂視圖是否保留文字，應判斷文字是僅強化圖標資訊，或是傳達精確資訊所必需。前者通常只保留圖標即可；後者如購物車總額，可採橫向大按鈕。附屬視圖應始終與鍵盤綁定，不應移至縱軸。

欲讓自訂底欄等視圖移至縱軸，須確保內容符合固定欄寬，或具備垂直自適應佈局。可針對垂直呈現調整參數，例如隱藏標題並略微縮短高度；在SwiftUI可讀取Vertical Edge環境變數，在UIKit可讀取trait。只有元素能配置至垂直欄時才可取得這些值，否則會回傳nil或未指定。

垂直欄預設不提供滾動邊緣效果；若系統開啟降低透明度，預設垂直欄會加入背景以維持視覺分隔，自訂視圖亦應同步調整樣式。縱軸上的彈性分隔間距高度預設為0，固定分隔間距則保有最小尺寸；無論水平或垂直欄，元素間都不需額外加入間距。

Overflow menu與壓縮策略

縱向空間較有限，控制欄容易因鍵盤、畫中畫等競爭元素而溢出。設計時應先判斷工具欄與Tab欄何者需較長時間保持可見：以內容導航瀏覽為核心的體驗，如播客APP，預設優先壓縮工具欄，讓作為一級導航的Tab欄持續可見；以任務為導向的體驗，如遊戲APP，則可優先壓縮Tab欄以保留高頻工具欄按鈕。

應使用Toolbar Vertical Compression Behavior API設定壓縮規則。若APP已有溢出菜單，SwiftUI應使用Toolbar Overflow Menu，UIKit則使用Additional Overflow Items，將操作整合至系統管理菜單。省略號圖標是iOS的標準溢出菜單圖標，不應用於其他語意，也不應以其他平台圖標替代。

透過Visibility Priority API可設定工具欄元素的可見性優先級。預設由下而上折疊，也可對按鈕群組或單一按鈕指定高、低或自訂優先級。編寫郵件、創建筆記等高頻建立操作，以及帶有未讀徽標等傳達重要資訊的按鈕，應盡可能延後折疊至溢出菜單。

側邊化不是所有介面的預設答案。計算器等以單一畫面為主、下方內容密集的APP，建議保留頂部工具欄的水平佈局，讓下方內容使用完整空間。模態面板若本身操作很多、工具欄僅有關閉按鈕，也可禁用垂直工具欄，避免壓縮面板內容；可透過toolbarVerticalBehavior或preferred vertical bar behavior設定。

待辦追蹤

• 以最新版本SDK重新建置APP，並盤點各控制欄是否能由標準導航容器管理。
• 走查垂直工具欄的元素順序，確認返回或關閉位於頂端、關鍵完成或保存操作獲得適當凸顯，並維持跨姿態的位置一致性。
• 補齊所有互動元素的圖標與標題；檢視自訂視圖是否需支援垂直佈局、隱藏補充文字或調整高度。
• 設定Toolbar Vertical Compression Behavior與Visibility Priority API，明確定義工具欄、Tab欄及高頻操作的壓縮與溢出順序。

討論摘錄

「咱們應該提前為這些元素提供所有的資訊，然後由系統去決定它們在不同的上下文環境里的呈現方式。」

「要考慮哪些按鈕是使用者最頻繁會用到的。」

「首先，要讓咱們的APP做好準備，第一步是使用最新的SDK來構建。」