設計一款在 iOS 18/26+ 都完美呈現的 App Icon

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的版本相容性

注意，若使用.icon檔案，相關的玻璃效果外觀會自動套用於iOS18及更早版本上。詳細的顯示效果邏輯如下表。

顯示效果備註

iOS 18

1. 無關App Icon設計複雜與否，系統都會自動計算以支援【深色】【不同色調】模式。
2. 關於【深色】模式
   • 設計簡單的Icon主圖會使用淺色模式下的背景色，背景則統一使用黑色。例如：藍底白字會轉換為黑底藍字；設計複雜的Icon則會被套上一層半透明的黑色遮罩。
3. 關於【不同色調】模式
   • 設計簡單的Icon主圖會採使用者指定的顏色，背景則統一為黑色；設計複雜的Icon則會被套上一層半透明的遮罩，顏色則由使用者指定。

iOS 26

1. 在iOS 26及後續版本上，系統會自動針對設計簡單的Icon進行計算以支援【深色】【透明】【不同色調】模式。
2. 關於【深色】模式
   • 轉換邏輯如同iOS 18，但多了一些邊緣光、透明度的效果。設計複雜的Icon則不受影響。
3. 關於【透明】模式
   • 純色背景一率會被替換為透明玻璃背景。
4. 關於【不同色調】模式
   • 本模式基於【透明】模式而來，看起來就像是一塊透明的有色玻璃。所以顯示效果就是【透明】模式再覆蓋上一點點使用者指定的顏色。
5. 當專案使用.icon檔案時，使用者端iOS 18上的顯示效果會參照iOS 26的【淺色】【深色】模式。【不同色調】模式則會參照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版本寫成。