很多人觉得图标设计是设计师的专属技能,其实只要掌握几个基本方法,普通人也能做出干净好看的图标。比如你想给自家小店做个微信菜单图标,或者为孩子做一份趣味学习卡片,都可以从简单的图形开始。
准备工具:用免费软件就能开始
不用非得装 Illustrator 或 Sketch,像 Figma、Pixso 这类在线工具完全免费,打开浏览器就能画。新建一个 48×48 或 64×64 的画布,这就是常见的图标尺寸,够清晰又不会太大。
从基本形状入手:方形、圆形、三角形
试着把想要表达的东西简化成几何图形。比如要做一个“咖啡杯”图标,可以用一个竖立的梯形当杯身,旁边加个半圆当把手。不需要画得像照片,重点是让人一眼认出是什么。
保持简洁:少即是多
手机屏幕上的图标很小,细节太多反而看不清。试着离远两米看看你的设计,如果还能认出来,说明足够清晰。颜色别超过三种,主色+辅助色+描边或阴影就够了。
对齐和间距很重要
图形歪一点、位置偏一点,看起来就会很别扭。大多数设计工具都有“自动对齐”功能,画完后选中所有元素,点一下居中对齐,立马变得整齐舒服。
试试这个小练习:设计一个“灯泡”图标
先画一个正圆作为灯泡主体,再在底部接一个小矩形当灯座。内部加一条曲线表示发光丝,最后用浅黄色填充,加一点白色高光。这样一个简单的灯泡图标就完成了。
<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="20" r="12" fill="#FFD54F" />
<rect x="20" y="32" width="8" height="6" fill="#F57C00" />
<path d="M18 20c2-4 6-6 10 0" stroke="#FFB300" fill="none" />
</svg>
这段代码就是一个简单的 SVG 灯泡图标,可以直接用在网页或小程序里。改改颜色和大小,马上就能用。
多看多模仿:找灵感不丢人
打开手机设置页面,看看那些系统图标是怎么做的。线条粗细一致、圆角统一、视觉重心居中——这些细节决定了图标的质感。可以截图存几张喜欢的风格,照着练几次,慢慢就有感觉了。
图标设计不是一蹴而就的事,但只要每天花十分钟画一个日常物品,坚持一周,你会发现自己的进步比想象中快得多。