出色的图标是如何一步步设计出来的？来学学这些实操方法！

图标是设计中不可或缺的一部分，是引导各种操作的视觉提示，可以赋予产品独特的身份。

文章通过设计实操来帮助大家发现图标设计的更多可能性。

01

谷歌Material Design原则

• 使用简单的几何形状和大胆的颜色

扁平化的设计趋势启发了Material Design，它也是基于基本的扁平形状。仔细选择最能代表图标所描绘的元素的形状。

• 用细微的阴影增加深度

阴影是为设计赋予深度感的好方法，可以激发光线投射到物体上的效果。另外需要注意的是，自然光通常被模拟来自左上角。

• 使用颜色替换阴影

▲ 每种颜色通过多种色调的变化来模拟视觉深度。在上一版的Gmail图标中，可以看到M的形状使用了不同深浅的红色，而信封下面使用了多种灰色阴影。

02

分步进行图标设计实操

了解了基本原则，接下来就到了实操环节，通过下面这些图标的实操演示一步步掌握这种简洁易用的设计风格。

• 闪电图标

▲ 通过在两个形状的相交处创建阴影，实现顶层形状悬浮的效果；使用三种黄色阴影--顶层较浅、底层较深和最深的阴影。

• 聊天图标

▲ 复制顶层聊天气泡，并将副本向右下移动来作为颜色最深的阴影。

• 标记图标

▲ 复制图标，并删除右上角多余的点；复制左侧形状，并移动到右侧形状的顶部；两个形状相交以创建阴影效果。

• 旗帜图标

▲ 将图形导角，提取标志底部的锚点绘制两条相交的线来创建折叠效果。

• 心形图标

▲ 复制心形图标，隔离形状的左半部分；从右上角向下画一条对角线；将生成的形状与心形重叠，然后向右移动以减去阴影形状。

• 山峰图标

▲ 创建两个不同大小的三角形；将较小的图形向右移动，并将得到的重叠部分作为阴影形状；最亮的颜色保持在左侧；最后运用圆角来调整图形。

• 人物图标

▲ 选择并复制左侧人物形状的下半部分；将副本与右边的形状对齐；择三个重叠的形状，使用路径查找器做出阴影形状。

• 浮动图标

▲ 把下方的形状向上移动至中点；复制上面的菱形，并将副本向下移动10-20像素；选择下面的两个形状，使用路径查找器保留阴影形状。

• 信封图标

▲ 使用“直接选择工具（A）”，选择信封形状的第二高的点；使用“钢笔工具”在线段右侧添加一个点；抬起上面的两个点并向左右移动（如图所示），将负空间看着像抽出来的信纸效果。

• 蛋糕图标

▲ 隔离蛋糕底部的形状并复制；缩小宽度并向内移动；将生成的形状移动到原始图标的顶部，并延伸较高的点以与上方的形状重叠。

文章来源：Clip设计夹，版权归原作者所有

原文链接：

https://mp.weixin.qq.com/s/gMB5o7ZPMTZms3d9VgDaBQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源。本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证，仅供读者参考。文内出现的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。如无意侵犯到您的权益，请及时联系我们处理。本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：Meia_99

推荐关注IXDC视频号

点这里，一键进入IXDC2021国际体验设计大会！