![](http://dingyue.ws.126.net/2021/0728/4e1ac294j00qwxuai001ed200u000f1g00g20081.jpg)
图标是设计中不可或缺的一部分,是引导各种操作的视觉提示,可以赋予产品独特的身份。
文章通过设计实操来帮助大家发现图标设计的更多可能性。
01
谷歌Material Design原则
使用简单的几何形状和大胆的颜色
![](http://dingyue.ws.126.net/2021/0728/8cbe1873j00qwxuai000bd200p0008cg00id0064.jpg)
扁平化的设计趋势启发了Material Design,它也是基于基本的扁平形状。仔细选择最能代表图标所描绘的元素的形状。
用细微的阴影增加深度
![](http://dingyue.ws.126.net/2021/0728/9269314fj00qwxuai0009d200u0009zg00id0063.jpg)
阴影是为设计赋予深度感的好方法,可以激发光线投射到物体上的效果。另外需要注意的是,自然光通常被模拟来自左上角。
使用颜色替换阴影
![](http://dingyue.ws.126.net/2021/0728/4c276918j00qwxuai000bd200u0009zg00id0063.jpg)
▲ 每种颜色通过多种色调的变化来模拟视觉深度。在上一版的Gmail图标中,可以看到M的形状使用了不同深浅的红色,而信封下面使用了多种灰色阴影。
02
了解了基本原则,接下来就到了实操环节,通过下面这些图标的实操演示一步步掌握这种简洁易用的设计风格。
闪电图标
![](http://dingyue.ws.126.net/2021/0728/29203e32p00qwxuaj001ud200u000f7g00id009a.png)
▲ 通过在两个形状的相交处创建阴影,实现顶层形状悬浮的效果;使用三种黄色阴影--顶层较浅、底层较深和最深的阴影。
聊天图标
![](http://dingyue.ws.126.net/2021/0728/ce33d08ep00qwxuak0026d200u000f7g00id009a.png)
▲ 复制顶层聊天气泡,并将副本向右下移动来作为颜色最深的阴影。
标记图标
![](http://dingyue.ws.126.net/2021/0728/501e8237p00qwxuak0023d200u000f7g00id009a.png)
▲ 复制图标,并删除右上角多余的点;复制左侧形状,并移动到右侧形状的顶部;两个形状相交以创建阴影效果。
旗帜图标
![](http://dingyue.ws.126.net/2021/0728/798bb677p00qwxual0026d200u000f7g00id009a.png)
▲ 将图形导角,提取标志底部的锚点绘制两条相交的线来创建折叠效果。
心形图标
![](http://dingyue.ws.126.net/2021/0728/e3302876p00qwxuam0021d200u000f7g00id009a.png)
▲ 复制心形图标,隔离形状的左半部分;从右上角向下画一条对角线;将生成的形状与心形重叠,然后向右移动以减去阴影形状。
山峰图标
![](http://dingyue.ws.126.net/2021/0728/2c975e6bp00qwxuan0022d200u000f7g00id009a.png)
▲ 创建两个不同大小的三角形;将较小的图形向右移动,并将得到的重叠部分作为阴影形状;最亮的颜色保持在左侧;最后运用圆角来调整图形。
人物图标
![](http://dingyue.ws.126.net/2021/0728/23e4f972p00qwxuao001wd200u000f7g00id009a.png)
▲ 选择并复制左侧人物形状的下半部分;将副本与右边的形状对齐;择三个重叠的形状,使用路径查找器做出阴影形状。
浮动图标
![](http://dingyue.ws.126.net/2021/0728/348447b6p00qwxuao0023d200u000f7g00id009a.png)
▲ 把下方的形状向上移动至中点;复制上面的菱形,并将副本向下移动10-20像素;选择下面的两个形状,使用路径查找器保留阴影形状。
信封图标
![](http://dingyue.ws.126.net/2021/0728/2fda5e32p00qwxuap0021d200u000f7g00id009a.png)
▲ 使用“直接选择工具(A)”,选择信封形状的第二高的点;使用“钢笔工具”在线段右侧添加一个点;抬起上面的两个点并向左右移动(如图所示),将负空间看着像抽出来的信纸效果。
蛋糕图标
![](http://dingyue.ws.126.net/2021/0728/3c04e6d1p00qwxuaq0033d200u000f7g00id009a.png)
▲ 隔离蛋糕底部的形状并复制;缩小宽度并向内移动;将生成的形状移动到原始图标的顶部,并延伸较高的点以与上方的形状重叠。
文章来源:Clip设计夹,版权归原作者所有
原文链接:
https://mp.weixin.qq.com/s/gMB5o7ZPMTZms3d9VgDaBQ
版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源。本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证,仅供读者参考。文内出现的商标及图像版权属于其合法持有人,只供传递信息之用,非商务用途。如无意侵犯到您的权益,请及时联系我们处理。本公众号不承担任何责任,并拥有对此声明的最终解释权。
联系微信:Meia_99
推荐关注IXDC视频号
![](http://dingyue.ws.126.net/2021/0728/4de1d62dp00qwxuaz00gzd200u002tmg00fm01gv.png)
点这里,一键进入IXDC2021国际体验设计大会!
热门跟贴