如何设计图标:原则、工作流与尺寸

如何设计图标:先说结论

学习如何设计图标,归结为一条在每个环节反复出现的纪律:按图标将要占据的最小尺寸去画。图标不是缩小版的插画,而是一个要在 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 辅助套装是一个会话的工作量,含尺寸裁切。三条速度之间不变的是原则,变的只是绘画那一步。