---
title: "iOS 27 Liquid Glass 有了滑桿：當用戶能調透明度，設計師該怎麼設計？"
slug: ios-27-liquid-glass-slider-design-guide
url: https://rar.design/posts/ios-27-liquid-glass-slider-design-guide
published_at: 2026-09-15
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["無障礙設計", "WWDC 2026", "HIG", "UI 設計", "APPLE", "Liquid Glass", "iOS 27"]
access: public_access
---

# iOS 27 Liquid Glass 有了滑桿：當用戶能調透明度，設計師該怎麼設計？

> 從透明／著色二選一到一整條光譜，Apple 把材質的最後決定權交給使用者。你的 App 從今天起有無限種長相，這篇講怎麼設計得住

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

APPLE · iOS 27 · 2026▲ Apple 的 OS 27 家族主視覺。iOS 27 今天正式推送，Liquid Glass 從這個版本起變成一條可以拉的光譜，不再是兩個選項。（圖：Apple）QUICK ANSWERiOS 27 在「設定 → 外觀 → Liquid Glass」加了一條滑桿，從超透明到全著色連續可調，取代 iOS 26.1 的透明／著色二選一。滑桿是全系統的，你 App 裡的玻璃元件會自動跟著變濃變淡，不用改程式碼。設計師該做的事有三件：品牌色從工具列搬進內容層、自訂顏色補齊深色與高對比變體、把滑桿兩端加上「減少透明度」都當成必測狀態。CONTENTS01這條滑桿到底改了什麼02為什麼這對設計師是件大事03滑桿動的是什麼、不動的是什麼04Apple 給的框架：UI 層與內容層05六個該改掉的設計習慣06設計稿怎麼交：從一張畫面到一個範圍07重點整理CHAPTER 01 · WHAT CHANGED這條滑桿到底改了什麼iOS 27 今天推送到所有能裝 iOS 26 的 iPhone，設計圈的討論卻沒有落在 Siri AI 身上，而是落在一條滑桿上。打開設定，你會看到一個新的分頁叫「外觀」，Apple 把原本散在「螢幕顯示與亮度」裡的淺色／深色模式、文字大小全部收進來，然後在最上面放了 Liquid Glass 這一項。點進去，就是那條滑桿：往左拉，玻璃越透、桌布越看得見；往右拉，著色越重、文字越好讀。中點是 Apple 的預設值，上方的預覽畫面會跟著你的手指即時重畫，不用退出設定再回來看。這條滑桿取代的是 iOS 26.1 那組「透明／著色」二選一。去年 10 月 Apple 給了兩個點，今年給了整條線。裝完 iOS 27 第一次開機，系統甚至會先把這條滑桿端到你面前，讓你在進主畫面之前就決定好自己要多少玻璃。我在六月的 WWDC 整理裡預告過這件事，今天它落到每個人的手機上了。影響範圍是全系統：控制中心、主畫面的資料夾、鎖定畫面的通知、App 裡的浮動工具列和分頁列，全部跟著同一條滑桿走。要注意的是，就算拉到最右邊，介面還是保留一點玻璃質感，Apple 沒有給「關掉」這個選項。真的想拿掉透明度，還是得去輔助使用裡開「減少透明度」；想讓邊界更硬，開「增加對比」。這兩個開關跟滑桿是三個獨立變數，後面會講為什麼這對設計師很重要。THE SLIDER · 設定 → 外觀 → LIQUID GLASSULTRA CLEARDEFAULTFULLY TINTED桌布主場玻璃幾乎消失，底下的內容直接透上來。beta 5 之後這一端比六月時更透。Apple 預設中點。多數人不會動它，你的主要設計稿應該對準這裡。可讀性優先接近毛玻璃，但仍留一點折射。再往上就是輔助使用的減少透明度。滑桿只是使用者看得到的那一半。Apple 這次同時改了 Liquid Glass 的底層：官方的說法是折射更均勻、對比更好，具體做法是讓玻璃對底下複雜內容的擴散更強、在元件邊緣加一圈深色描邊、把高光調亮，用這三件事把「浮在上面的東西」和「底下的內容」分得更開。這些改動已經在 iOS 27 上用 Liquid Glass 的 App 會自動吃到，不需要重新編譯。換句話說，你的 App 在使用者更新的那一刻，長相就已經變了，而你可能還沒開過 Xcode 27。CHAPTER 02 · WHY IT MATTERS為什麼這對設計師是件大事先講過去十五個月發生了什麼。iOS 26 在 2025 年的 WWDC 發表，Liquid Glass 是十多年來 Apple 最大的一次介面翻新，也是 beta 期間被罵最兇的一次：通知太透看不到字、控制中心糊成一片、音樂 App 裡歌手名字消失在專輯封面裡。Apple 在 beta 之間把不透明度調高，又被喜歡玻璃的人罵回去。10 月的 26.1 給了透明／著色二選一，26.2 給鎖定畫面的時鐘一條專屬滑桿。每一次都是補丁，每一次設計師都要重新確認自己的 App 在新設定下長什麼樣。TIMELINE · LIQUID GLASS 的十五個月2025.06iOS 26 發表Liquid Glass 登場，beta 期間可讀性爭議不斷2025.10iOS 26.1透明／著色二選一，第一次讓使用者選2025.12iOS 26.2鎖定畫面時鐘有了專屬透明度滑桿2026.06WWDC 2026宣布全系統滑桿與底層重修，開發者 beta 同日釋出2026.09iOS 27 正式版滑桿推送到 iPhone 11 以上的所有機型這次不一樣的地方在於，Apple 停止猜測「大家想要多透」，把最後決定權交了出去。而且交出去的範圍包含你的 App。WWDC 2026 的 SwiftUI 場次講得很直接：在 iOS 27 上，Liquid Glass 會自動回應這條新滑桿來調整自己的著色，App 不用改一行程式碼就會得到新外觀。標準的分頁列、工具列、浮層、控制項，還有你用 glassEffect 自己做的玻璃元件，全部跟著使用者的手指走。這句話翻成設計師的語言是：你的 App 從今天起沒有「一個長相」。同一個畫面，在 A 的手機上是一片清透的玻璃，在 B 的手機上接近毛玻璃，在 C 開了減少透明度的手機上根本是實心的。你在 Figma 裡畫的那一張，只是這條光譜上的一個點。聽起來像新問題，其實設計師早就在處理同一類事。Dynamic Type 讓使用者決定字有多大，深色模式讓使用者決定底是黑是白，減少動態效果讓使用者決定動畫要不要播。每一項都是使用者拿走了一部分決定權，設計師的工作從「定一個畫面」變成「定一個範圍的規則」。滑桿只是把「材質」也加進這張清單，差別在它是連續的，沒有兩三個狀態可以窮舉。▲ Apple 用來說明 iOS 27 設計調整的官方圖：玻璃膠囊浮在複雜的金色曲面上，圖示仍然清楚。邊緣那圈深色描邊與更亮的高光，就是這次底層重修的重點。（圖：Apple）CHAPTER 03 · HOW IT WORKS滑桿動的是什麼、不動的是什麼要設計得住，先把變數分清楚。滑桿只管一件事：Liquid Glass 這種材質的著色濃度。凡是用這個材質做的東西都會動，凡是不用這個材質的東西都不會動。分頁列、工具列、sheet、popover、系統控制項，還有你自己套了玻璃效果的自訂元件，屬於前者；你的內容層，也就是圖片、文字、卡片、實心背景，屬於後者。滑桿不會幫你把黑字變白，也不會幫你的圖加對比。滑桿之外還有兩個開關，位置在輔助使用的「螢幕顯示與文字大小」裡。「減少透明度」會把幾乎所有透明效果拿掉，換成平坦的實心底；「增加對比」會把按鈕、文字和底下內容的邊界磨得更銳利。Apple 在官方的 Liquid Glass 採用指南裡寫得很清楚：使用者可以在設定裡選自己偏好的玻璃外觀，也可以開這些輔助設定，它們會移除或修改部分效果；用系統元件的 App 會自動適應，但自訂的元件、顏色、動畫要在不同組合下自己測。元件跟滑桿動嗎你要做的事系統分頁列、工具列、sheet✦ 自動拆掉自訂背景，讓系統決定外觀自訂玻璃元件（glassEffect）✦ 自動只留給最重要的功能元件，兩端各測一次內容層：圖、字、卡片、實心底— 不動對比自己保證，品牌色搬到這一層減少透明度、增加對比— 蓋過滑桿當成獨立狀態，跟滑桿極端值搭配測App 圖示— 走自己的六種模式Icon Composer 分層，六種渲染模式都看過還有一個容易漏掉的細節：鎖定畫面時鐘那條 26.2 加的滑桿，在 iOS 27 裡仍然是獨立的，不跟外觀分頁的滑桿連動。如果你做的是 widget 或鎖定畫面相關的東西，等於要面對兩條滑桿。另外 iPadOS 27 的設定在同一個位置，macOS 27 Golden Gate 在系統設定裡也有一條，watchOS 27 則沒有。CHAPTER 04 · THE TWO LAYERSApple 給的框架：UI 層與內容層WWDC 2026 有一場給設計師的場次叫「Communicate your brand identity on iOS」，它給了一個框架，我認為是理解滑桿最好的工具。Apple 的設計師說，從 iOS 26 開始，他們把一個 App 想成兩層：UI 層是全域導覽，也就是分頁列、工具列、sheet 這些浮在上面的東西；內容層是它們底下捲動的所有東西，是讓你的 App 跟別人不一樣的地方。品牌該住在內容層，UI 層應該用大家已經熟悉的標準元件。最具體的一條建議是關於顏色。過去很多 App 把品牌色實心塗在頂部工具列和分頁列上，Apple 說這些色塊很笨重，把內容區框成一個更小的框。新的做法是把顏色搬進內容區的捲動視圖，玻璃控制項浮在上面時，會自己撿起底下的品牌色。場次裡舉的例子是 Slack：把原本實心的頂部工具列顏色移進內容區，讓它跟著捲動，控制項上的顏色只留給有意義的地方，像是新訊息的區塊、未讀徽章、發文按鈕和分頁列的選取狀態。這個框架跟滑桿的關係在這裡：UI 層本來就是 Apple 的地盤，它會跟著滑桿動。你把品牌押在工具列的顏色上，等於把品牌交給使用者的滑桿決定，拉到最透，你的顏色就跟著透掉。品牌押在內容層，滑桿怎麼拉它都在，玻璃只會用不同的濃度去折射它。這也是為什麼我在iPhone Duo 那篇設計指南裡說，分頁列被 Apple 搬到側邊時，設計師該慶幸自己沒有把品牌綁在上面。同一個道理，在滑桿上再應驗一次。▲ WWDC 2026 場次〈Communicate your brand identity on iOS〉，UI 層與內容層的框架就是在這場提出的。（影片：Apple Developer）“玻璃的濃度現在歸使用者管。設計師能管的，是玻璃底下那一層有沒有立得住。CHAPTER 05 · IN PRACTICE六個該改掉的設計習慣下面這六件事，全部來自 Apple 的採用指南和 WWDC 2026 的場次，我把它們翻成設計師今天就能在稿子上動手的動作。順序是依照「出事機率」排的，第一條最常炸。1拆掉工具列和分頁列的自訂背景Apple 指名要檢查的是 split view、tab bar、toolbar 這幾個地方。你放在上面的實心色塊或漸層，會跟 Liquid Glass 以及內容捲到底下時的 scroll edge effect 疊在一起，滑桿一拉就露餡。能拿掉的全部拿掉，讓系統決定背景長什麼樣。2品牌色下沉到內容層把顏色放進捲動視圖裡的 hero、卡片、分區底，讓玻璃去撿。控制項上的 tint 色只留給三種狀態：主要動作、選取、需要注意的東西。Apple 的原話是顏色要「創造意義」，用來表示層級、分組或互動，而不是拿來鋪滿。配色本身的方法可以回頭看配色法則那篇，這裡改的是顏色住的位置。3自訂顏色一次交三個變體Apple 的採用指南寫得很具體：控制項和導覽上的顏色，優先用系統色；一定要用自訂色，就要同時定義淺色與深色變體，而且每個變體都要再附一個增加對比的版本。也就是一個品牌色至少四個值。設計系統裡的 token 要跟著擴，不然工程師只能自己猜。4自訂玻璃只給最重要的功能元件去年很多人的反應是把每張卡片都做成玻璃，Apple 這次直接說這是反效果：Liquid Glass 的目的是把注意力帶到底下的內容，到處都是玻璃就到處都在搶戲。自訂玻璃留給一兩個關鍵的浮動控制項就好，其餘的卡片用實心底反而更像原生。也不要把玻璃疊在玻璃上，Apple 明列了不要擁擠、不要重疊。5三個極端各測一次，特別是內容捲到控制項底下的時候滑桿最左、滑桿最右、開了減少透明度加增加對比，三種狀態各跑一次你 App 最花的那個畫面。最容易出事的時刻是內容捲到浮動工具列底下：iOS 27 對標準工具列會自動出現一條均勻的頂部工具列來保住可讀性，但自訂的 bar 得自己用 scroll edge effect 的 API 註冊，不要自己畫一層漸層去擋，那層漸層在滑桿另一端會變成一塊髒污。6App 圖示用 Icon Composer 重做分層iOS 27 的圖示渲染變銳利了，也多了可以選擇性加上的折射效果。Icon Composer 現在支援把圖示拆成多層玻璃，可以在圖層上標註折射或內容效果，還能預覽在舊版系統上會長什麼樣。圖示有預設、深色、透明淺色、透明深色、著色淺色、著色深色六種模式，全部都要看過，別只交一張。畫圖示的基本功可以回頭翻Figma 圖標繪製那篇。CHAPTER 06 · THE DELIVERABLE設計稿怎麼交：從一張畫面到一個範圍最後講交付物，因為這是滑桿真正會改變設計師工作方式的地方。一張 Figma 稿只能表達一個滑桿位置，而使用者手上有無限個。我的建議是把主稿對準 Apple 的預設中點，因為多數人不會動那條滑桿；然後另外開兩個畫板，一個是最透、一個是最濃加減少透明度，這兩張不是給客戶看的，是給你自己和工程師驗證用的。Figma 現在有液態玻璃效果可以模擬材質，但真正的判斷還是要進 Xcode 27 的 Live Preview，因為折射和高光在靜態稿裡看不出來。更上一層的改變是心態。以前我們交的是「畫面」，現在交的是「範圍加規則」：哪些東西跟著滑桿動、哪些不動、動的東西在兩端各要守住什麼對比、顏色的四個變體分別是什麼。這跟當年 Dynamic Type 出來時的轉變一模一樣，只是那次很多人拖了好幾年才認真做，這次 Apple 把滑桿放在第一次開機的畫面上，使用者第一天就會動它。你沒有拖的空間。順帶一提，這個思路在 Mac 上一樣適用。macOS 27 Golden Gate 除了滑桿，還把統一的頂部工具列、貼邊的側邊欄、彩色的側邊欄圖示這些老 Mac 使用者熟悉的東西找了回來。Apple 這一年同時在做兩件事：把最激進的材質語言交給使用者調，把最熟悉的桌面元素還給使用者。讀懂這個方向，比記住任何一條 API 都有用。CHAPTER 07 · TAKEAWAYS重點整理TAKEAWAYS→滑桿在設定 → 外觀 → Liquid Glass，從超透明到全著色連續可調，中點是預設，全系統生效，你 App 裡的玻璃元件會自動跟著變。→滑桿只動玻璃材質，不動內容層；減少透明度與增加對比是另外兩個獨立變數，要一起測。→用 Apple 的兩層框架思考：品牌住內容層，UI 層交給系統元件。顏色從工具列搬進捲動區，自訂色補齊深色與高對比變體。→交付物從「一張畫面」變成「一個範圍加規則」：主稿對準預設中點，另外用兩個極端畫板驗證，圖示用 Icon Composer 分層並看過六種模式。很多人把這條滑桿讀成 Apple 認錯。我的讀法相反：一個平台敢把自己最招牌的材質交給使用者調，代表它對底下那套層級系統夠有把握。設計師要做的事情跟 Apple 一樣，把力氣從「玻璃該多透」移到「玻璃底下的東西站不站得住」。前者現在歸使用者，後者一直都歸你。RELATED READS · 延伸閱讀WWDC 2026 發表了什麼？Liquid Glass 大修、Siri AI 登場與設計師重點解析六月那場的完整整理，滑桿第一次亮相的脈絡在這裡。→Apple 秋季發表會設計師該看什麼？iPhone Duo 畫布、可變光圈與 Siri AI 額度iOS 27 推送日與新機時程，設計師版的發表會整理。→iPhone Duo 為什麼把 tab bar 搬到側邊？折疊 iPhone 設計指南size class、保留區與 Figma 畫板尺寸，UI 層歸系統管的另一個例子。→MacBook Neo 設計語言解析：Apple 如何用色彩和材質賣一台平價筆電從硬體看 Apple 的材質與配色策略，跟 Liquid Glass 是同一套思路。→2026 UI/UX 設計趨勢全解析：10 個正在改寫介面的方向Liquid Glass 重新定義材質語言，是十個趨勢裡的其中一條。→Photoshop 水霧玻璃效果怎麼做？兩個濾鏡做出雨天起霧的窗想在視覺稿裡先模擬毛玻璃那一端的質感，從這裡開始。→EXTRA · LINKSApple iOS 27 官方頁面：apple.com/os/iosApple 開發者文件〈Adopting Liquid Glass〉：developer.apple.comWWDC 2026 場次〈Communicate your brand identity on iOS〉：developer.apple.com/videosWWDC 2026 場次〈What's new in SwiftUI〉：developer.apple.com/videosCOURSE100 種 Figma 設計的方法把預設、最透、最濃三個滑桿狀態排成同一組畫板，元件、變數與 token 怎麼建，這門課從頭教起。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →FAQ · 常見問題常見問題Q：iOS 27 的 Liquid Glass 滑桿在哪裡？A：設定 → 外觀 → Liquid Glass。外觀是 iOS 27 新增的分頁，同時收納淺色／深色模式與文字大小。第一次裝完 iOS 27 開機時，系統也會先跳出這條滑桿讓你選。Q：滑桿會影響第三方 App 嗎？A：會。滑桿是全系統設定，App 裡用 Liquid Glass 材質做的分頁列、工具列、浮層與自訂玻璃元件都會自動回應滑桿調整著色，開發者不用改程式碼；用實心背景或自訂材質的部分則不受影響。Q：滑桿拉到底能完全關掉 Liquid Glass 嗎？A：不能。拉到全著色那端仍會保留少量玻璃質感。要幾乎完全拿掉透明效果，得到「輔助使用 → 螢幕顯示與文字大小」開啟減少透明度；增加對比則會強化邊界。這兩個設定跟滑桿互相獨立。Q：設計師最先該改的是什麼？A：先拆掉工具列與分頁列上的自訂背景，把品牌色搬進內容層的捲動區；再把自訂顏色補齊淺色、深色與各自的增加對比版本；最後用滑桿兩端加上減少透明度三個狀態，把主要畫面各測一次。Q：iPad 和 Mac 也有這條滑桿嗎？A：有。iPadOS 27 的設定位置與 iPhone 相同，macOS 27 Golden Gate 在系統設定裡也提供同樣的調整。watchOS 27 目前沒有這條滑桿。Q：iOS 27 什麼時候推出、哪些機型能裝？A：iOS 27 於 2026 年 6 月 8 日在 WWDC 發表，美國時間 9 月 14 日正式推送。支援機型與 iOS 26 相同，iPhone 11 與 iPhone SE 第二代以上都能安裝，滑桿功能不限機型。