几何

对于刚接触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设计笔记

 

转载请注明:学UI网 » 图标绘制基础指南,一篇就够了!

登录收藏
 
你可能喜欢的:
UI设计之图标设计UI设计之图标设计
视觉感知:UI中的图标视觉感知:UI中的图标
小元素,大影响。UI图标的类型和功能小元素,大影响。UI图标的类型和功能
这波投票,如何合理地选择图标样式 (下)这波投票,如何合理地选择图标样式 (下)
产品图标体系是如何炼成的?产品图标体系是如何炼成的?
了解图标落地,让前端再爱你一次了解图标落地,让前端再爱你一次
Hello,12.0 接我一标 | 开启图标新的可能Hello,12.0 接我一标 | 开启图标新的可能
宅在家无聊,不如学学按钮规范吧!宅在家无聊,不如学学按钮规范吧!
有图标的设计,体验就一定好吗?有图标的设计,体验就一定好吗?
2020春节图标盘点2020春节图标盘点