当前位置: 首页 >文章 > 如何强化图标设计的细节?我总结了12个关键点!
收藏
分享

如何强化图标设计的细节?我总结了12个关键点!

举报Clip设计夹Clip设计夹发布于 2021-10-18790阅读10点赞
图标设计是看着容易,做起来却很难的一类设计,把握这些关键细节能让我们的图标设计水平提升更多。...


大家好,我是Clippp。今天为大家分享的是「图标设计关键点」。图标在页面中的尺寸很小,不怎么起眼,却包含着太多的设计细节。作为通用的视觉化语言,把握住其中的设计关键点至关重要。


之前有分享过关于图标设计的一些文章,介绍过图标的风格:9种醒目的UI图标,带来出色的用户体验;

不同尺寸和风格的图标如何设计:如何选择合适的图标?来看这份图标类型和风格汇总;图标设计实操的方法:出色的图标是如何一步步设计出来的?大家可以快速回看~

这次分享一些更为关键的图标设计细节,确保设计出来的图标能达到像素级完美。
1.清晰

大家先想想图标在APP里的主要作用是什么呢?可以作为功能和信息的提示标识,引导用户的操作。

而且我们通过看图获取信息的速度要比阅读文字获取快得多,图标作为一种通用化的视觉语言,让页面更容易被阅读。

▲ 图标代表的隐喻越准确,就越容易被用户准确识别。


2.简洁

图标本身的尺寸就特别小,如果在里面掺杂着大量没必要的装饰性元素,会让图标的阅读变得很困难。

可以通过使用尽可能简单的设计元素来创建图标,保证形状的简洁易懂。

▲ 如果在设计过程中发现图标变得很复杂,大胆尝试去做减法,删除不必要的细节,只留下最重要的部分。


3.风格统一

在Dribbble中搜索“icons”,会看到很多不同风格的图标样式,但同一个集合中的图标都会保持统一的设计风格。

▲ 不同风格的图标可以在设计中穿插使用。例如在APP底部导航中,使用线形风格的图标作为基本状态,点击选中时可以变换为面性风格,用来区分不同的状态。
4.基础网格

网格有助于我们建立一个明确的尺寸规范,常见的网格尺寸有16x16、24x24、32x32、48x48、64x64、96x96。

▲ 所有的图标都将建立在基础网格之上,图标的每个部分都应该放在像素网格内。

Tips: 在公众号【Clip设计夹】后台回复图标免费获取700+图标合集源文件下载链接

5.安全区域

图标的主体部分应该保持在安全区域内,这种情况适用于大多数的场景。

安全区域可以作为设计建议,而不是一项必须的规则,如果有需要,我们完全可以在安全区域外扩展图标的形状。

6.关键形状

如果想让一组图标放在一起看起来很和谐,那这些图标的视觉权重应该保持一致。

在设计前首先确定图标的基本形状,例如圆形、正方形、矩形等,能有效帮助我们确定图标的比例关系。

可以用数学面积公式来计算一下不同形状图标的权重,找出近似值。

来吧,先从圆形开始:

▲ 在这个例子中,直径d是20px,半径r是10px,圆的面积约等于314px²。

把圆的面积开个根号√,方形的边长a大约为17.7px,四舍五入到整数,那么边长a为18px,接下来算算方形的面积:

▲ 边长a为18px,方形的面积为324px²。

最后算一下矩形的面积:

▲ 边长b为20px,边长c为16px。

最后我们根据这些科学的尺寸设计一组相对和谐的图标:

7.描边宽度

除了保持相同的视觉权重,图标的描线宽度也应该保持一致,达到像素级统一,这里我建议描边使用整数值,这样更便于设计。

▲ 另外,不要忘记元素之间的最小间距,应该大于或等于描边的宽度。
8.圆角

图标的和谐还在于边角的统一。尖角不用说了,保持统一的垂直90度就可以。

这里需要重要说的是圆角,不能所有的形状都使用同一个圆角度数,而是要根据图标形状的不同灵活调节圆角度数。

▲ 例如一个图标有里外两个平行的圆角时,不能里外都使用1px的圆角,这样会让图标看起来不统一。

正确的做法是让外面的圆角更大,设置为3px,里面的圆角为1px,让图标看起来更和谐。

▲ 根据对象大小,设置不同的圆角数,保证视觉统一。

9.角度

同一组图标保持相同的倾角设计,可以让图标看起来更统一。

▲ 图标中所有倾斜的线条都限定为45度角,会让图标看起来更严谨和规范。
10.视觉平衡

在设计图标时,既要利用作图软件把握严格的对称和尺寸标准,也要注意多用眼睛去观察图标的视觉平衡,保证图标看起来很统一。

▲ 最典型的情况就是绘制“播放”图标时,使用软件去调节三角形左右两边的完全对称,图标看起来反而会有点不平衡,看着感觉离左边近,离右边远(右图)。

在这种情况下,我们就要在对称的基础上,将三角形向右移动一点,来保证视觉上的平衡(左图)。
11.透视 (2D/3D)

除了扁平的2D风格图标外,也可以考虑使用3D风格的图标样式,让图标的体积感和空间感更强。

▲ 无论使用哪一种,同一组的图标要保持统一的样式,比如要用3D样式,那么这一组3D图标要使用相同角度的透视。
12.设计常识

上面提到了图标设计的很多规则,在日常设计中建议大家将这些规则作为指导。

但是任何规则都有例外,如果有必要,我们可以打破规则。

▲ 左边的图标使用了不同的圆角和角度,来保证图标像素级的完美;在右边的图标中,右下角的图形虽然超出了安全区域,却保证了整个图标的平衡。

结论
图标设计是看着容易,做起来却很难的一类设计,把握这些关键细节能让我们的图标设计水平提升更多。

参考: Design principles for creating the perfect icon set


本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号:Clip设计夹!


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户102,631人)

【12月】电商海报设计训练营
距离开班仅剩1天62人已报名
【12月】零基础7天入门C4D
距离开班仅剩1天522人已报名
【12月福利】零基础7天入门C4D
距离开班仅剩1天171人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:400-862-9191工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课
积分

恭喜你,领取成功

开课时间:

新人免费领取免费¥99

扫码开通训练营权限

打开微信“扫一扫”功能
扫码上方二维码

免费学习70000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了144,213
并提交了1,792份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
恭喜!签到成功,获得 10 个虎课币
上上签 ·21August.2018
尽管眼下十分艰难,可日后这段经历说不定就会开花结果
— 唐代文学家 韩愈
训练营坚持完成打卡任务 报名费全额返更多>>
直播公开课学员好评率95%以上更多>>
登录虎课网,每天免费学课程全站 70000+ 视频会员教程 | 每日可免费学 1