所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

图标绘制基础指南,一篇就够了!

对于刚接触UI相关的同学来说,绘制图标是占界面问题比重较大的一块内容,虽然网络资源已经有很多,但仍旧做不好一套统一风格及趣味性的界面功能图标。

图标绘制基础指南,一篇就够了!

主要分成4个要点:

  • 1、确定风格特征
  • 2、提取共同DNA
  • 3、造型绘制
  • 4、细节技巧

 

 

一、如何确定图标风格?

我们先了解有哪几种风格:

1、面性图标(一)

稳定、安全、分量感、体量较重

使用时需考虑信息层级与其他元素的体量比例

 

2、面性图标(二)

特征鲜明、结构复杂、体量较重

使用搭配需谨慎,不实用于轻盈优雅的页面

 

3、线性图标(1)

轻盈、连贯、优雅、体量轻

常用语整体气质偏有人简洁页面,但不宜大面使用,可能会造成页面的轻浮,没有重心的感觉。

 

4、线性图标(2)

层次感、主次分明、强化品牌色

图标中的核心元素适用品牌色突出

5、线+面图标

个性、年轻化、灵动

较为复杂,适合装饰和强调,适用于个人性化比较强的个人作品集或展览。

 

6、2.5D图标

立体感、表意更清晰、装饰

适用于较大图形、装饰图片、不适用于较小元素和功能图标

 

7、拟物图标

真实、映射生活

模拟真实场景,用以教育智能手机初期用户,目前更多用于游戏

 

二、什么是共同的DNA?

拥有一致的特征

如:表现手法、颜色、粗细、角度…

 

一样的风格

单色扁平线性图标

 

彩色平面图标

同色系深浅叠加

 

一样的圆角角度

圆角传达什么感受

圆润可爱,轻松活泼,热情

 

直角传达什么感受

理性工整,严谨可靠

一样的线条粗细

细线有什么气质

细线条的感受,轻盈,精致,女性化

 

粗线有什么气质

硬朗、敦厚

 

一样的特征

断线

断线的方向、大小、出现的规律

 

双色拼接、色彩叠加

固定搭配、叠加规律透明度、错位留白空间

 

三、造型绘制

几何造型

通用的造型方法,一切不规则形状,都源自于规则形状

象形造型

适用于含义单纯的图标,通过形状相似性或物理对象的引用

表意造型法

含义复合型图标,无法直接使用象形的造型法造型。

 

四、实战技巧,注意细节

多用布尔运算

  • 1、让你的图标更加规范
  • 2、对图形结构理解更加深刻
  • 3、后期更改形状更加方便

视觉重量一致

不能追求物理尺寸的绝对一致,视觉重量会带来错觉

同样尺寸下,方形会比圆形看起来更大,为了达到视觉重量的一致,需要缩小方形,或放大圆形。

规范图形设计大小

1、物理尺寸的一致性

2、视觉重量的一致性/正负空间的比例一致性

网格辅助

图标出血

  • 1、保持图标的透气感
  • 2、容差,为斜角图标留溢出的空间
  • 3、防止图标贴边切,可能会明显的切割痕迹

如下例子:

1、统一风格

2、统一光源

3、统一线条粗细

4、统一正负空间比例

5、统一圆角/直角

6、统一倾斜角度

感谢您耐心的读完,真心希望你能获得新知哦~

 

原文地址:UX设计笔记(公众号)

作者:UX设计笔记

 


 

本页地址:https://www.uime.cn/29194.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?