图标绘制基础指南，一篇就够了！-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

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

0/20

0/200

设计大赛

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

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

图标绘制基础指南，一篇就够了！

0.0°

2020-03-22 原创文章 经验/观点 举报 1030 8 2 0

UX设计笔记关注

虽然网络资源已经有很多，但仍旧做不好一套统一风格及趣味性的界面功能图标。

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

图标绘制基础指南，一篇就够了！

—— 欢迎关注我的公众号【 UX设计笔记】，每天推送设计知识！或加我微信 justifify 交流哦

主要四个要点：

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设计笔记】，每天推送小知识

更新：2020-03-22

8人已收藏

UX设计笔记

专注于分享有价值的内容，涵盖了UX、UI、产品、方法论等精选内容

12

作品
79

粉丝
0

关注

猜你喜欢

2020-03-22 原创文章 经验/观点 举报 1030 8 2 0

图标绘制基础指南，一篇就够了！

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2020年03月22日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得