恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
ICON设计干货来啦~
0.0°
2022-05-07 原创文章 教程 举报 3069 73 28 0

ICON设计是UI设计中非常重要的一个环节,它能够帮助我们美化画面,传递情绪,快速导航,而且不受语言限制,那今天就来给大家分享下ICON的设计干货。

首先图标可以分为3大类:功能性图标 , 应用图标 , 创意图标。

功能性图标

应用图标


创意图标


今天主要分享最常用的功能性图标,功能性图标强调: 功能表达 , 工整 , 有序 , 规范。我把它分为了三部分来展开。



   第一部分 基础造型   


1. 结构准确 

作为设计专业的你,这一点应该不用多说,首先比例,透视,不能出问题。

2. 造型简练

我们做ICON的时候最好按尺寸来做,或者做完以后缩到最小形式,看一下是否清晰, 千万不要画的太复杂,因为大部分功能图标的大小在20到40像素左右,如果很复杂,看起来就像个线团,会降低识别度。

3. 有辨识度

这个非常重要,首先得让用户能看得懂,其次不能让阅读产生歧义。教大家几个方法,我们可以通过查找资料来寻找辨识度高的ICON,来参考它形状和轮廓。

参考实物,通过布尔运算来简化,抓住物体的特点来设计,表达最基本的物体特征。

ICON画完以后,做下可用性测试 ,脱离页面,脱离文字,看能否看出它代表的是什么意思,是否有对下个界面的预见性。

4. 重心要稳

大家看一下上面这两个播放ICON。是不是第二个播放ICON,看起来更舒服一些?但其实第一个才是中心点对齐的,如果是这种情况,我们一定要保证视觉看上去要稳才行。

再来看下 下面的这个组合的图标。组合图标,主次图形比例最好保证,2比1左右的比例。

5. 精致饱满

我们可以在图标下面画一个方块,来看一下隐形区域,看一下留白是否过多,留白多了,不饱满,太饱满了就不透气,导致紧张,运用好留白,需要长期的积累经验,多看多练,时间久了找到那个微妙的平衡点。

再来看下,下面这两个心形,你们觉得哪个更好看?

第一个看起来更舒服吧,第一个是用布尔运算绘制的,第二个是用钢笔工具绘制的,使用 “规则图形”进行加减组合,ICON看起来更精致更专业。

   第二部分 基本规范   


1. 布局

我们基于24*24的画板举例,我们做ICON的时候尽量在20*20的区域里做,有些ICON看起来小,就适当给它放大处理下,留出来的4像素区域,就是给特殊ICON准备的,但是绝对不能超出画板范围。

2. 清晰度

清晰度这个事情,在分辨率高的屏幕上还好,但是在分辨率低的屏幕上,看起来就会虚的不行,所以为了我们的设计,无论在什么样的屏幕上都清晰可见,我们必须要对齐像素,确保X轴和Y轴坐标为整数,千万不能带小数点。

3. 圆角范围一般我们在做圆角ICON的时候,有明显的图形交界处不需要做圆角,图形内部也尽量不要做圆角,不然会导致ICON看起来不简练。

如果是线形ICON,首先,线的粗细要统一,其次,线的端点是直的,就要都统一成直的,端点是圆的就要都统一成圆的。

4. 安全网格

当我们做一整套ICON的时候,会发现,方形的ICON比圆形ICON,视觉上看起来更大些,所以如果我们做18像素方形ICON的时候,圆形ICON就要做到20像素,视觉上看起来才统一。

图中的4个图,就是我们做ICON时候用的安全网格。用这个网格做出的一整套ICON,看起来大小会比较统一。

5. 切图

切图时要注意的是,有些可点击的ICON是需要留热区的,不然触摸区域太小了,会导致体验很差。

切图的名称也需要注意下,命名一般都用英文,或者是拼音,功能+名称+状态,比如视频号中的喜欢,心形ICON,我们可以写成shipinhao_like_normal,注意横杠要用下划线。

最后还有个最重要的事情,如果ICON切的不是矢量图( PDF或者是SVG ),验收的时候一定要注意有没有虚边,尤其是安卓手机,开发们用的控件不同,会导致你的切图发生变化。一但有虚边,品质瞬间下降。验收一定要仔细。


   第三部分 风格定位   


ICON的风格要根据产品风格定义,我们可以通过形状和颜色来定义ICON的风格,形状上从圆角大小,线条的粗细,造型轮廓,表达ICON的性格。颜色上,是否需要颜色辅助,用什么颜色符合产品风格。

举个例子,比如我们做一个针对儿童的产品,那我们的ICON就要设计的可爱些,友好些,我们可以把ICON做的更圆融,运用圆角和圆形端点,突出的部分尽量做的短小,颜色丰富,在做一些小动效,赋予ICON情绪。

到这里功能性图标的基础知识就分享完了,接下来,简单的带过下应用图标和创意图标设计。


首先,应用图标更偏向logo设计,风格有线性图标 ,文字设计图标, 局部提取图标,图形图标, 折叠图形图标 ,渐变图标等等。


下图是应用图标的尺寸


创意图标

大部分用于404,占位符,引导等,更注重设计内涵, 故事性 ,和原创精神。

风格也有很多种,2.5D风,MAB风,炫酷的,拟物的等,更注重视觉表现,光影,质感,氛围等。


最后,不管做什么设计,多看,多练,对设计有了一定的敏感度,就不需要去记那些死板的的理论了。当你还是初级的时候你需要学习别人的方法论,当你有经验了,你就有属于自己的一套方法论了。


今天的分享就到这里喽~关注“小新的芝士绘本”祝大家天天开心~





Powered by Froala Editor

更新:2022-05-07

收藏

73人已收藏

我不是蜡笔

关注“小新的芝士绘本”

  • 18

    作品

  • 102

    粉丝

  • 37

    关注

  • 机器人情感化设计
  • 我们是如何定义颜色的?张艺谋的色彩艺术是否能借鉴到UI设计中
  • 知道啥叫“元宇宙”不?
  • 聊聊那些设计流程、方法及原则

    猜你喜欢

      2022-05-07 原创文章 教程 举报 3069 73 28 0

      ICON设计干货来啦~

      0.0°

      你确定要举报ICON设计干货来啦~

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年01月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      28
      73
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录