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


cover_designing-app-icon-for-ios26-and-ios18

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軟體介面說明
Icon Composer軟體介面說明

你可以想像Icon Composer是一個功能陽春、專門為製作iOS icon而生的迷你設計軟體,它透過Blur(背景模糊)、Shadow(陰影)、Specular (邊緣光)、Opacity(透明度)、Translucency(漸變透明度)這五種屬性來模擬玻璃的外觀。因此,在準備素材階段,我們不需要預先套用上述的任何效果,只需將圖案分開至單獨的圖層,並以向量、實體純色的形式匯入即可。

注意每個圖層匯出時都需要以「畫布大小」,即1024x1024px完整地匯出,否則匯入Icon Composer時會發生圖案錯位。另外,Icon Composer本身就能設定純色或線性漸層背景色,所以背景圖層不需要匯出。如果你的Icon設計中包含較為非線性漸層、插畫等複雜的元素,請以PNG格式匯出,大小同樣是畫布大小。

承邑牌設計秘訣 匯出至Icon Composer時的範例說明
匯出至Icon Composer時的範例

匯入圖層,調整Icon各個元素的外觀

首先,請將匯出的所有圖層拖曳進Icon Composer的左側圖層面板中。軟體的選單裡沒有寫著「匯入」的選項,這是比較反直覺的地方,所以可別傻傻地找喔!

在Icon Composer中,「Group」是套用液態玻璃效果的最小單位。如果你希望圖層有不同程度的液態玻璃效果,就需要將這些圖層分別裝入不同的Group中。不過請注意,基於視覺簡潔性的考量,Apple限制最多只能有4個Group。

在深色模式下,黑背景可能會把某些顏色「吃」掉,變得十分不顯眼。這時,你可以針對深色/淺色模式單獨設定對應的顏色,確保兩種模式下都有良好的顯示效果。首先,在右下角切換為深色模式,接著點擊各種屬性的Icon,選擇「Vary for dark」選項,就能針對不同模式做分別設定。其他如圖片、各種玻璃的屬性一樣依此類推。

承邑牌設計秘訣 在Icon Composer中選擇「Vary for dark」選項,就能針對不同模式做分別設定
在Icon Composer中選擇「Vary for dark」選項,就能針對不同模式做分別設定

儲存.icon以及輸出為其他格式

存檔時,Icon Composer會儲存為.icon格式,這個檔案就可以直接交付給工程師,讓他們放進Xcode(編寫iOS App用的軟體)中使用囉!

你也可以利用選單列的 File → Export,將不同顯示模式下的Icon輸出為PNG檔,用作網頁展示等用途。注意,這些輸出的圖片只有展示用途,要交付給工程師的話,還是要用.icon檔。

承邑牌設計秘訣 交付給工程師時一率使用.icon檔案,PNG檔僅能作為展示用途
交付給工程師時一率使用.icon檔案

App Icon的版本相容性

承邑牌設計秘訣 簡而言之,製作iOS 18用的App Icon使用PNG檔案,製作iOS 26用的App Icon使用.icon檔案
簡而言之,製作iOS 18用的App Icon使用PNG檔案,製作iOS 26用的App Icon使用.icon檔案

Xcode project中所包含的.icon檔案只會作用於iOS 26及後續版本的使用者裝置上,iOS 18及先前版本仍會顯示Image Assets中設定的圖片。詳細的顯示效果邏輯如下表。

使用者端的系統版本含有.icon檔案不含.icon檔案
iOS 18App會使用Image Assets中設定的圖片檔案。

如果App Icon設計相對簡單,系統仍會自動去背以支援「深色」「不同色調」模式。

App會使用Image Assets中設定的圖片檔案。

如果App Icon設計相對簡單,系統仍會自動去背以支援「深色」「不同色調」模式。

iOS 26+App會使用.icon檔案。所有的顯示效果會依照檔案內的設定。App會使用Image Assets中設定的圖片檔案。

如果App Icon設計相對簡單,系統仍會自動去背,同時套用些微的透明效果以支援「深色」「透明」「不同色調」模式。

顯示效果備註

承邑牌設計秘訣 iOS 18 App Icon各顯示模式模擬
承邑牌設計秘訣 iOS 26 App Icon各顯示模式模擬
  1. 在iOS 18上,無關App Icon設計複雜與否,系統都會自動計算以支援「深色」模式。設計簡單的Icon主圖會使用亮色模式下的背景色,背景則統一使用黑色。例如:藍底白字會轉換為黑底藍字;設計複雜的Icon則會被套上一層半透明的黑色遮罩。
  2. 在iOS 18上,無關App Icon設計複雜與否,系統都會自動計算以支援「不同色調」模式。設計簡單的Icon主圖會採使用者指定的顏色,背景則統一為黑色;設計複雜的Icon則會被套上一層半透明的遮罩,顏色則由使用者指定。
  3. 在iOS 26及後續版本上,系統會自動針對設計簡單的Icon進行計算以支援「深色」模式。轉換邏輯如同iOS 18,但多了一些邊緣光、透明度的效果。設計複雜的Icon則不受影響。
  4. 在iOS 26及後續版本上,無關App Icon設計複雜與否,系統都會自動計算以支援「透明」模式。純色背景一率會被替換為透明玻璃背景。
  5. 在iOS 26及後續版本上,「不同色調」模式是基於「透明」模式而來,看起來就像是一塊透明的有色玻璃。所以顯示效果就是「透明」模式再加上一點點使用者指定的顏色。

針對iOS 18設計App Icon

iOS 18(2024年推出)起App Icon可隨著淺色/深色模式切換,同時,還加入了名為「不同色調」的顯示模式,讓使用者可自行調整App Icon的顏色。

準備iOS 18用的App Icon相當簡單,只需要針對淺色、深色、不同色調三種模式,各準備一張PNG圖片即可。針對「不同色調」模式用的App Icon,只能使用黑白兩色。白色區域到時候會被系統自動套上一層使用者指定的顏色遮罩,因此建議用於Icon主體上;黑色區域則會被忽略。同時,你可以在白色的區域加入一些透明度變化,來讓最終效果有漸層外觀。

承邑牌設計秘訣 準備iOS 18 App Icon時的匯出範例
準備iOS 18 App Icon時的匯出範例

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

承邑牌設計秘訣 Duolingo和Flighty利用了深淺模式App Icon轉換的特性,創造有趣的圖案變化
Duolingo和Flighty利用了深淺模式App Icon轉換的特性,創造有趣的圖案變化

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

作者介紹

UI/UX 設計師。擅長將設計思維與開發技術融合解決設計問題。 曾開發提升效率的 Figma Plugin,累積 7,000+ 使用者,並長期經營設計部落格,每月穩定吸引 1,000+ 位讀者。

LinkedIn

訂閱電子報

在信箱收到最新文章精華、摘要
    信箱
    想訂閱的主題

    ChengyiのUIデザイン時短ツール

    私が開発したFigmaプラグインは、デザイン作業の面倒をワンクリックで解決します。スペーシング、ユーザーフロー作成、スタイルドキュメントの生成まで、すべて簡単にこなせます。

    詳しく見る

    RECOMMEND