App 圖示設計：什麼讓它一眼可辨

拆解「一眼可辨」從何而來：一個符號、作為結構的留白、與系統分工、色彩的克制——Apple 與 Google 講的其實是同一套。

好圖示有一種共同氣質：不需要你找，它自己跳出來。Apple 與 Google 各自寫了一整本圖示指南，拆開對照，講的其實是同一件事——在一百個圖示同時爭搶的桌面上，憑什麼被一眼認出。本文沿著這個問題拆下去。

一個符號的力量

可辨性的起點是「少」。站得住的圖示幾乎都只有一個主角：一個爪印、一個圓環、一封信。符號一旦多起來，桌面上的圖示互相擠壓，多出來的每一個細節都在稀釋記憶點。先把產品本質壓縮成一個元素，再用盡量少的形狀把它畫出來。

形狀要往大了畫，線條要往粗了畫。圖示最常見的呈現尺寸只有四五十像素，這個尺寸下細線會消失、尖角會糊開、描邊線框會碎成噪點，而實心填色色塊依然輪廓分明。一個實用的檢驗順序：先在 48px 裡看它立不立得住，再放大補細節。繪製盡量用向量（SVG/PDF，文字轉外框），怎麼縮放，輪廓都不會背叛你。

留白是一種結構

圖示的最終形狀不由設計師決定——它會被系統蒙成圓形、圓角方形，甚至廠商自訂的異形。所以留白不是審美偏好，是結構必需。Google 的數值給了最直觀的參照：畫布 108dp，外圈 18dp 本來就留給蒙版與視差動效，主體要收進中央 66dp 的安全區。換算下來，主體大約只占畫布中央 60% 的區域。Apple 的表述不同，要求是同一件事：主體置中，讓任何蒙版都裁不到它。

這也解釋了為什麼幾何感的 logo 不該硬撐滿畫布。形狀本身是品牌資產時，把它放在 keyline 網格裡置中，四周交給背景色，反而更有識別度；插畫類作品是另一個極端，天然適合滿版鋪開。

系統是後半位設計師

現代圖示是一份半成品，交出去之後系統會接著畫：圓角由系統裁切，陰影由系統添加，iOS 的 Liquid Glass 還會疊上鏡面高光和折射。設計師要做的，是給這位「後半位設計師」留好工作面——素材滿版、邊緣乾淨、前景層輪廓清晰不羽化，系統的高光和陰影才有地方落。

深度感也是同一邏輯：不要用特效去模擬，用結構去預留。前景層內部靠不透明度的差異分出前後（Apple 的 Photos 圖示是教科書案例），或者讓實心形狀彼此重疊，縱深自然出現。自己畫上去的高光和投影是靜態的，永遠會跟系統的動態光效打架。

色彩的克與放

背景是圖示的呼吸空間，純色或簡單漸層就夠了，它的工作是襯托主體，不是搶戲。純黑是唯一要小心的例外——它會溶進深色桌布，把黑色調亮一階即可。

色彩真正被考驗的時刻是外觀變體。iOS 提供深色、清色、著色等好幾種桌面形態，各變體之間只應該調整色彩氛圍，不更換元素——使用者切換外觀的瞬間認不出你，先前的設計就全部白費。Android 的主題圖示把這個考驗推到極限：系統會拿走你的顏色，只留單色層按桌布重新上色，所以剪影必須能在沒有色彩的情況下獨自站住。

文字的隱退

文字是圖示裡最容易「想太多」的元素：小尺寸讀不清，無法參與無障礙和本地化，何況應用程式名稱本來就在圖示旁邊。如果品牌確實需要一個字母的 monogram，把它當成圖形來畫，別當成字來排。同樣的道理適用於照片和 UI 截圖——它們的小細節在真實使用尺寸下都會失效；也適用於裝置硬體的輪廓，Apple 明確禁止。

回到那一次注視

從符號到色彩，所有細節服務於同一瞬間：使用者掃過桌面的那一眼。滿版的畫布、置中的主體、清晰的邊緣、克制的色彩、站得住的剪影——做到這些，系統自會把剩下的一半畫完。

參考來源

• Apple Human Interface Guidelines — App icons
• Google Play icon design specifications
• Adaptive icons — Android Developers

核驗於 2026-09-02