惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
U
Unit 42
IT之家
IT之家
Y
Y Combinator Blog
T
Tailwind CSS Blog
B
Blog
大猫的无限游戏
大猫的无限游戏
博客园 - 叶小钗
Jina AI
Jina AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
I
InfoQ
J
Java Code Geeks
F
Fortinet All Blogs
T
The Blog of Author Tim Ferriss
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
H
Hackread – Cybersecurity News, Data Breaches, AI and More
人人都是产品经理
人人都是产品经理
腾讯CDC
Hugging Face - Blog
Hugging Face - Blog
GbyAI
GbyAI
博客园 - 司徒正美
The GitHub Blog
The GitHub Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
L
LangChain Blog

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
为你的产品量身定制一个图标 - 少数派
2021-06-18 · via 少数派

这是一篇绘制图标的简易攻略。

如果你是一名个人开发者,想要为自己的产品制定合适的图标;或是一名创意设计师,想要创造一款属于自己的图标,那么这篇文章会对你有所帮助。

风格化

图标有很多种风格。你可以同时创作多种风格,以便在不同场景下灵活应用。

目前,流行的风格主要有两大类:「扁平风」,以及渐渐兴起的「轻拟物风」,而相同的原型根据不同的需求可细分出许多不同的风格。你需要做的,就是选择一款适合产品的图标风格。

以「少数派」的图标为例,我在尽量不改变原图风味的前提下,绘制了下面两款图标:

你可以很快看出不同风格产生的强烈视觉反响

• 原图的风格便是「扁平风」。扁平风几乎广泛适用于几乎所有特性的产品,但强大的适用也使其无法在众多图标中成为最亮眼的那一个。要突出特性,请在「扁平」的基础上加上一些其他点缀,如渐变色,光晕等。

• 第二个图标的风格便是「轻拟物风」。层次丰富而又简洁明了的特性使其成为2020年的新宠。如果你想让产品的给人的印象是「稳重」而又「鲜活」,请使用轻拟物风。

• 第三个图标是我在「轻拟物风」的基础上延伸的创作。很显然,这款多彩图标影射的产品理念便是「活力四射」与「不拘一格」,很适合与充满创造力,标新立异的产品相搭配。

相信你对选择图标风格已经心中有数,好,让我们开始下一步吧。

侧重点

「风格化」图标能使我们的图标符合产品特性,同时在众多图标中脱颖而出。那,如果我们还想要这个图标「便于记忆」呢?想让用户看一眼便记住,我们要为图标设置「侧重点」。

通常我们使用品牌色作为底色,品牌LOGO作为侧重点将它居中放置,而不是各个元素东分西散,不便记忆:

主要的的东西一目了然,次要的东西靠边站

然后,不妨再试着在侧重点上做文章。这其中大有乾坤。你既不想侧重点过于简洁(以至于失去辨识度),也不想侧重点过于复杂(不便记忆)。下面是一个直观的例子:

中间的图标既凸显了品牌的个性,又便于记忆

再比如:

是不是感觉右边的图标少了点什么?

这就是为什么这些图标能被一眼记住的原因:都具有易于识别的侧重点。

不过,我们不推荐直接将「文字」作为侧重点印成图标。大厂的图标经常这么做,如淘宝,咸鱼等,这是由于不同的需求导致的。可以理解为:这些品牌对「实用」的需求大于「美观」。

你可以说这些图标毫无美感,但这并不妨碍品牌达到目标「实用」或是「便于记忆」。只是作为创意工作者,我们通常不这么做。

层次感

好了,风格确定了,侧重点也有了。让我们再来给图标加一些「点缀」。以App Store图标为例:观察下面两个图标,你是否看出了区别?

App Store的图标,并非简单的三条横杠

「简约而不简单」,是我们在设计任何其他产品时都要考虑的。为图标添加适量的「层次感」,既能使图标更细腻,又能保持简约。

「层次感」并不局限于拟物风,扁平风也能做出「层次感」。巧妙地使用渐变,蒙板与高斯模糊,能为你的扁平图标赋予生命力,甚至能比拟物风更加精美。以下图为例:

我对Luminar AI 图标的练习:扁平化并不意味着设计师更懒了

结语

创作一枚图标并不难,唯一需要的只是你的耐心。多加观察身边中的设计,并对其剖析和练习,你也能创造出优秀的设计。