网站或应用的图标集:如何规划和订购

图标是告诉人们该点哪里的小图形:首页、购物车、配送、客服、个人中心。如果它们来自不同的免费素材包,网站就会显得东拼西凑:粗线条挨着细线条,圆角挨着尖角。一套风格统一的图标能解决这个问题,让一个简单的网站也显得精致完整。下面介绍如何规划一套图标。

先列一份清单
把您的网站或应用从头到尾浏览一遍,写下每一个需要图标的地方:
- 主菜单: 首页、服务目录、搜索、购物车、账户。
- 功能或优势: 快速配送、安全支付、退货、客服。
- 联系方式和操作: 电话、邮箱、位置、分享、下载。
用几个词描述每个图标,例如“配送:一辆小货车”或“退货:一个带箭头的盒子”。清单越清楚,之后的修改就越少。
需要多少个图标
- 约 4 个: 有三四个优势要展示的落地页,或者一份简短的演示文稿。
- 约 8 个: 小型网站的主要板块和功能。
- 约 16 个: 应用或板块较多的大型网站的整套图标。
通常最好比眼下所需多订几个。日后单独下单绘制的图标,很难做到完全一致。
选定一种风格
选一种风格,整套图标都使用它:
- 线性: 细线条,轻盈现代,适合简洁的界面。
- 面性: 实心图形,尺寸很小时也容易辨认。
- 双色: 同一颜色的两种深浅,更有个性。
- 3D: 柔和的立体感和阴影,适合色彩明快的落地页。
如果您已经有几个喜欢的图标,请分享链接,让新图标沿用同样的外观。
颜色
使用您的品牌色,如果有的话,请提供十六进制色值,例如 #1A73E8。一个主色加一个强调色通常就够了。如果您还没有品牌色,中性色调放在任何背景上都合适。
小尺寸决定一切
菜单里的图标往往只有 24 像素宽。在这个尺寸下细节会消失,所以简单的图形更胜一筹:
- 一个图标只表达一个意思。 配送就用一辆货车,而不是货车加道路、时钟和盒子。
- 图标里不放文字。 图标变小后,文字就看不清了。
- 使用常见的符号。 放大镜代表搜索、购物车代表购物,到哪里都能看懂。
您会收到什么,如何使用
一套图标通常以透明背景的单独 PNG 文件交付,每个图标都能放在任何颜色上。PNG 是位图格式:用于网站、应用和幻灯片没有问题,但它不是可以无限放大的矢量文件。如果您需要网站图标(favicon),用免费的在线转换工具一分钟就能把 PNG 转成 ICO 文件。
总结
清晰的清单、合适的数量、统一的风格和您的品牌色:这样一套图标才能在每个屏幕上都显得协调一致。如果您想请人为您绘制,可以订购图标集:您发送图标清单、风格和颜色,即可收到 4、8 或 16 个风格统一的图标,均为透明背景的单独 PNG 文件。只有在您验收后才会放款。