
iOS 26引入了一款全新材質「Liquid Glass(液態玻璃)」,這種材質在互動上融合了水滴的流動感與玻璃的透亮質感,成為iOS和macOS等平台的嶄新視覺特徵。在這篇文章中,我將帶你深入了解如何透過官方工具「Icon Composer」製作出具備相同質感的icon,同時說明如何兼顧舊版系統的相容性。
如果你正著手設計iOS App的介面,這篇乾貨滿滿的教學絕對不容錯過!
針對iOS 26設計App Icon
iOS 26(2025年推出)的介面設計以「Liquid Glass(液態玻璃)」材質為主軸。在互動時,它就像水滴一樣Q彈;同時,它還具有邊緣亮光、背景物在邊緣會扭曲變形等玻璃的特性。這種材質不僅貫穿了iOS 26的介面,就連官方的App Icon也是以玻璃為靈感,將色塊想像成有色玻璃進行設計。
我們可以利用Apple官方推出的「Icon Composer」工具,輕鬆地替自家App Icon加上一樣的玻璃效果。
準備素材

你可以想像Icon Composer是一個功能陽春、專門為製作iOS icon而生的迷你設計軟體,它透過Blur(背景模糊)、Shadow(陰影)、Specular (邊緣光)、Opacity(透明度)、Translucency(漸變透明度)這五種屬性來模擬玻璃的外觀。因此,在準備素材階段,我們不需要預先套用上述的任何效果,只需將圖案分開至單獨的圖層,並以向量、實體純色的形式匯入即可。
注意每個圖層匯出時都需要以「畫布大小」,即1024x1024px完整地匯出,否則匯入Icon Composer時會發生圖案錯位。另外,Icon Composer本身就能設定純色或線性漸層背景色,所以背景圖層不需要匯出。如果你的Icon設計中包含較為非線性漸層、插畫等複雜的元素,請以PNG格式匯出,大小同樣是畫布大小。

匯入圖層,調整Icon各個元素的外觀
首先,請將匯出的所有圖層拖曳進Icon Composer的左側圖層面板中。軟體的選單裡沒有寫著「匯入」的選項,這是比較反直覺的地方,所以可別傻傻地找喔!
在Icon Composer中,「Group」是套用液態玻璃效果的最小單位。如果你希望圖層有不同程度的液態玻璃效果,就需要將這些圖層分別裝入不同的Group中。不過請注意,基於視覺簡潔性的考量,Apple限制最多只能有4個Group。
在深色模式下,黑背景可能會把某些顏色「吃」掉,變得十分不顯眼。這時,你可以針對深色/淺色模式單獨設定對應的顏色,確保兩種模式下都有良好的顯示效果。首先,在右下角切換為深色模式,接著點擊各種屬性的Icon,選擇「Vary for dark」選項,就能針對不同模式做分別設定。其他如圖片、各種玻璃的屬性一樣依此類推。

儲存.icon以及輸出為其他格式
存檔時,Icon Composer會儲存為.icon
格式,這個檔案就可以直接交付給工程師,讓他們放進Xcode(編寫iOS App用的軟體)中使用囉!
你也可以利用選單列的 File → Export,將不同顯示模式下的Icon輸出為PNG檔,用作網頁展示等用途。注意,這些輸出的圖片只有展示用途,要交付給工程師的話,還是要用.icon
檔。

App Icon的版本相容性

Xcode project中所包含的.icon
檔案只會作用於iOS 26及後續版本的使用者裝置上,iOS 18及先前版本仍會顯示Image Assets中設定的圖片。詳細的顯示效果邏輯如下表。
使用者端的系統版本 | 含有.icon 檔案 | 不含.icon 檔案 |
---|---|---|
iOS 18 | App會使用Image Assets中設定的圖片檔案。
如果App Icon設計相對簡單,系統仍會自動去背以支援「深色」「不同色調」模式。 | App會使用Image Assets中設定的圖片檔案。
如果App Icon設計相對簡單,系統仍會自動去背以支援「深色」「不同色調」模式。 |
iOS 26+ | App會使用.icon 檔案。所有的顯示效果會依照檔案內的設定。 | App會使用Image Assets中設定的圖片檔案。
如果App Icon設計相對簡單,系統仍會自動去背,同時套用些微的透明效果以支援「深色」「透明」「不同色調」模式。 |
顯示效果備註


- 在iOS 18上,無關App Icon設計複雜與否,系統都會自動計算以支援「深色」模式。設計簡單的Icon主圖會使用亮色模式下的背景色,背景則統一使用黑色。例如:藍底白字會轉換為黑底藍字;設計複雜的Icon則會被套上一層半透明的黑色遮罩。
- 在iOS 18上,無關App Icon設計複雜與否,系統都會自動計算以支援「不同色調」模式。設計簡單的Icon主圖會採使用者指定的顏色,背景則統一為黑色;設計複雜的Icon則會被套上一層半透明的遮罩,顏色則由使用者指定。
- 在iOS 26及後續版本上,系統會自動針對設計簡單的Icon進行計算以支援「深色」模式。轉換邏輯如同iOS 18,但多了一些邊緣光、透明度的效果。設計複雜的Icon則不受影響。
- 在iOS 26及後續版本上,無關App Icon設計複雜與否,系統都會自動計算以支援「透明」模式。純色背景一率會被替換為透明玻璃背景。
- 在iOS 26及後續版本上,「不同色調」模式是基於「透明」模式而來,看起來就像是一塊透明的有色玻璃。所以顯示效果就是「透明」模式再加上一點點使用者指定的顏色。
針對iOS 18設計App Icon
iOS 18(2024年推出)起App Icon可隨著淺色/深色模式切換,同時,還加入了名為「不同色調」的顯示模式,讓使用者可自行調整App Icon的顏色。
準備iOS 18用的App Icon相當簡單,只需要針對淺色、深色、不同色調三種模式,各準備一張PNG圖片即可。針對「不同色調」模式用的App Icon,只能使用黑白兩色。白色區域到時候會被系統自動套上一層使用者指定的顏色遮罩,因此建議用於Icon主體上;黑色區域則會被忽略。同時,你可以在白色的區域加入一些透明度變化,來讓最終效果有漸層外觀。

針對淺色和深色模式的Icon設計,除了進行黑白色反轉等基本操作外,也可以反其道而行,將差異作為設計上的趣味亮點。例如,Duolingo的貓頭鷹Icon在深色模式時會變成拿著手電筒的樣子;Flighty的飛機Icon則在深色模式下亮起指示燈,呼應現實中飛機在夜間飛行時的燈光變化。

本文章所記載之iOS 26特性是基於iOS 26 Public Beta 4版本寫成。

RECOMMEND
-
設計一款在 iOS 18/26+ 都完美呈現的 App Icon
iOS 26引入了一款全新材質「Liquid Glass(液態玻璃)」,這種材質在互動上融合了水滴的流動感與玻璃的透亮質…
2025.09.02 -
設計Email的UI/UX實務技巧:用途、尺寸、精選案例分析
在數位產品體驗中,有一項元素貫穿了帳號註冊、交易流程、行銷推播等各個環節,卻鮮少被人深入討論,那就是——電子郵件。對使用…
2025.09.01 -
如何設計Android平台上的Widget小工具:UI/UX規範、技術要求統整
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促…
2025.08.27 -
如何設計iOS平台上的Widget小工具:UI/UX規範、技術要求統整
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促…
2025.08.26 -
用通行密鑰(Passkey)設計無密碼登入體驗:使用流程、UI/UX設計個案研究、設計資源
無論是登入網站、服務,都需要建立一組帳號密碼。然而,隨著使用的服務越來越多,要記住的帳密也跟著越來越多。為了解決帳號容易…
2025.05.13 -
不再當Figma新手:讓UI設計稿更加專業的必要細節
優秀的UI設計稿,其價值不僅在於華麗的外表,更體現於背後所傳達的一致性、邏輯與縝密決策。透過這篇文章,你將能跳脫一昧聚焦…
2025.04.09
設計Email的UI/UX實務技巧:用途、尺寸、精選案例分析
2025.09.01