如何設計圖示:原則、工作流與尺寸

如何設計圖示:先說結論

學習如何設計圖示,歸結為一條在每個環節反覆出現的紀律:按圖示將要佔據的最小尺寸去畫。圖示不是縮小版的插畫,而是一個要在 16px 瀏覽器標籤頁、24px 工具欄、48px 主螢幕和 512px 商店列表裡都站得住的訊號,而且通常共用同一份檔案。下面每條規則都源於這個約束。

先說結論:選定一個主體,把它簡化成粗壯的剪影,畫在統一的網格上,讓整套圖示收尾一致,再從一份母版匯出各平臺尺寸。長版本就是這篇指南的其餘部分,包括三條抵達終點的工作流(在 Illustrator 或 Figma 裡的手工向量、模板工具、以及 AI 生成),以及把成品圖示裝上 iPhone、Android 裝置和網站的步驟。

什麼是一個好圖示?

動手之前,先弄清目標。Apple 的 Human Interface Guidelines 和 Google 的 Material Design 指南直接寫明瞭大部分檢驗標準,其餘的靠設計師的職業習慣:

• 剪影優先。眯起眼或模糊化圖示。如果形狀仍然認得出,設計成立;如果糊成一團,再多細節也救不回來。
• 一個主體,一個想法。好圖示只說一件事。把盾牌、對勾和火箭塞進一個字元裡,結果哪個都說不清。
• 一致的圓角與描邊粗細。要麼處處圓角,要麼處處直角;描邊要麼處處同樣粗,要麼乾脆沒有。套裝內部混搭收尾,讀起來像事故。
• 對齊網格。keyline 讓留白可預測,一資料夾圖示才像一家人。Material Design 為此釋出了 24dp keyline 模板。
• 細節經得起縮小。一張臉需要眼睛,也許還要嘴。24px 下不需要睫毛。

favicon 值得單獨點名,因為它處在尺寸區間的極端。什麼是一個好的 favicon?就是同一張清單的更嚴版本:一個字母或一個極簡標記,在淺色和深色瀏覽器邊框上都保持高對比,小於名字首字母的文字一律不要。

做圖示的三條路,以及各自什麼時候用

通往成品圖示集有三條實際路線,最好的做圖示應用就是匹配你的產量、預算和定製程度的那一條。

手工向量(Illustrator、Figma、Inkscape)。這是手藝路線。你在網格上畫形狀、對齊 keyline、控制每一條曲線。比如學習如何在 Illustrator 裡做一個人形圖示,意味著畫一個圓形當頭、一個圓角梯形當肩,並一次性定下整套圖示共用的描邊粗細。向量給你畫素級控制和無限縮放的 SVG,當一套圖示要在數百個字元間保持一致時,這一點很關鍵。代價是時間:一套協調的二十個圖示要花上幾天,技能門檻也實打實。

模板與素材庫(Canva、圖示庫、圖示字型)。Material Symbols、Lucide 或 Font Awesome 這類庫免費提供數千個風格統一的字元,模板工具讓你重新著色和組合。對垃圾桶、齒輪、放大鏡這類標準隱喻,這是最快且正確的答案,毫無羞恥可言:使用者識別標準形態比識別你的定製變體更快。侷限出現在你需要一個沒人畫過的主體,或一種只屬於你品牌的視覺風格時。

AI 生成。AI 圖示生成器介於兩者之間:你用文字描述主體和風格,模型渲染出原創畫稿,你匯出帶透明背景的方形母版。它是唯一能「按描述畫出新圖」的路線,這讓它成為產品吉祥物、罕見主體或風格驅動套裝的實際選擇(emoji 風格套裝、霓虹套裝、黏土套裝),不必逐個手繪。代價是曲線級控制變弱,所以它獎勵清晰的提示詞和重新生成的意願。

如何用 AI 設計圖示:一套可行的工作流

AI 生成壓縮了繪畫步驟,但沒有壓縮設計決策。穩定產出可用圖示的流程是這樣的:

1. 先寫需求,再寫提示詞。一個主體、一種風格、一種情緒、一個背景決定。"打瞌睡的貓,emoji 風格,光澤感,暖黃色,純色背景"是需求;"可愛的貓圖示,也許加點星星月亮和柔和顏色"是許願,許願產出的是糊成一團的候選項。

2. 生成候選項,用剪影評審。渲染多個選項,先在小尺寸下評估,和手工設計一樣做眯眼測試。只有大尺寸才成立的候選項是被否決項,不是起點。

3. 讓家族保持一致。如果套裝不止一個圖示,跨提示詞複用同樣的風格與收尾詞,並在一次會話裡生成。風格預設在這裡幫得上忙:固定風格意味著候選項之間只差主體,不差渲染。圖示設計頁就是這樣服務通用風格的,而 emoji 圖示生成器為俏皮套裝固定了光澤 emoji 配方。

4. 匯出一份母版,再裁尺寸。以 1024px 透明背景工作,再按平臺縮小。簡單形狀經得起縮小,照片式渲染經不起。

5. 對照參照集比較。把你的圖示和成熟圖示庫放在同一尺寸旁。任何因為錯誤原因搶眼的項,一條色帶或一處破剪影,都送回去再跑一輪。

真正要緊的圖示尺寸與格式

最常見的實操問題是什麼是圖示的最佳格式,誠實的答案是每個平臺要的不一樣。一份 1024px 的 PNG 或 WEBP 母版覆蓋這張表的每一行,你只需要按槽位裁切。

兩條規則覆蓋大部分錯誤。第一,永遠不要放大:16px favicon 從 1024px 母版裁下來沒問題,而 512px 商店圖從 128px 放大就是明顯的破碎。第二,注意透明規則:iOS 會按 Apple 圖示指南自己裁圓角遮罩並拒絕透明畫素,聊天平臺則拒絕一切不帶透明的檔案。

網站圖示去哪裡搞

對網站來說,來源和任何專案一樣有三類:素材庫、設計師、生成。素材庫對標準 UI 字元最快;設計師適合承載特定含義的品牌標記;生成填補中間地帶:以你產品風格繪製的定製主體,幾秒鐘出圖。就站點圖示而言,工作流的終點是 favicon:1024px 母版裁成 ICO 和 PNG 套裝,這正是 站點圖示生成器和 favicon 生成器自動完成的事,包括在最重要的 16px 下做檢查。

如何在 iPhone 和 Android 上更換應用圖示設計

設計圖示是半個工作;把它送上裝置螢幕是另外半個,答案因平臺而異。

iPhone(開發者)。iOS 不允許應用隨意替換自己的圖示。你把 1024px 母版打進應用包,App Store Connect 從那裡接手;系統自動套圓角遮罩。你還可以提供alternate app icons(備用圖示),一組固定的圖示讓使用者在應用設定裡切換,在資產目錄裡宣告。

iPhone(普通使用者)。沒有開發者許可權時,快捷指令(Shortcuts)應用是標準做法:新建一個開啟目標應用的快捷指令,進入詳情,選"新增到主螢幕",再指定任意圖片作為圖示。它有效,但有兩個代價:啟動時會先閃過快捷指令橫幅,原始應用圖示仍存在於應用資源庫裡。

Android。怎麼把應用圖示加到 Android 主螢幕?在抽屜裡長按應用拖出來,或長按主螢幕空白處,用小元件和快捷方式選單。部分啟動器支援圖示包和逐快捷方式換圖:長按快捷方式,點編輯,換掉圖片。為什麼應用不在主螢幕上?通常它只是待在應用抽屜裡。Android 預設只固定少數圖示,讓圖示顯示在 Android 上只是把它拖到你想放的位置。

三星。One UI 遵循 Android 的模式,編輯選項藏在長按快捷方式後的選單裡。想要整體重設計又不逐個碰快捷方式,Galaxy 商店的圖示包能一次更換所有圖示。

快速 FAQ

為什麼我的應用圖示是白色或空白?在 Android 上,這通常意味著應用宣告的圖示資源當前啟動器渲染不出來,更新後缺少自適應圖示圖層是經典案例。清啟動器快取或重灌應用即可修復。在網頁上,標籤頁圖示空白意味著 favicon link 標籤指向了一個不存在的檔案。

為什麼我的應用根本沒有圖示?側載 APK 和開發構建常常完全跳過圖示資源。商店分發的應用一定宣告圖示;如果商店列表顯示無圖,缺的是商店列表素材,要去開發者控制檯補。

什麼應用用 P 圖示、T 圖示、S 圖示?這類搜尋通常是有人在對著一屏圖示做逆向。單個字母最常見於 iOS 的自定義快捷指令圖示或 Android 的圖示包替換。字母是設計者的替身,不是平臺標準,唯一可靠的答案是點開看。

一套好圖示要花多久?拉一個素材庫只要幾分鐘;二十個手工繪製的協調圖示要幾天;固定風格的 AI 輔助套裝是一個會話的工作量,含尺寸裁切。三條速度之間不變的是原則,變的只是繪畫那一步。