线性图标的设计要点:
图标基础形状一般由外轮廓+内部线条组成。在造型上可以从线条粗细、圆角半径大小、图标复杂程度等方面来考虑。
1、线条粗细
线条粗细不同,图标的力度和重量感也会有差异。
粗线的图标:粗壮、厚重,视觉上看更加突出。
细线的图标:精致、透气。
2、圆角半径大小
圆角越小:视觉上越硬朗和稳重
圆角越大:视觉上越柔美和活泼
3、图标复杂度
过度简洁会导致图标失去该有的识别性,图标太过复杂视觉上会更繁重。
建议在不影响图标识别度的情况下,提升图标的简洁程度同时要表意准确。
4、断点图标
在线形图标基础上面,寻找一个缺口剪断,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数,一般不会超过2个。
5、两种线条粗细
外轮廓线条和内部线条用2种粗细大小,丰富图标细节。
扩展资料:
考虑该模块是否为该功能的核心出入口。如果整个产品此功能70%以上都是通过此模块进入的,那么建议采用面性图标;如果此功能还可以通过其他多个模块进入,就可以采用线性图标。
绘制线性图标是UI工作者的日常工作之一,也是UI工作者需要掌握的基本能力之一。初学UI的人在掌握了基本工具(PS、AI等)之后都会从最常见的线性图标开始画起。花花是名UI自学者,在自学过程中也经历了练习线性图标的阶段,今天就和大家聊聊在绘制线性图标过程中的一些体会吧。
统一性
统一性不是说规规矩矩的每一个图标都一样大,毕竟图标有圆有方。大小统一是说一整套图标至少在视觉上是统一的,不会看起来大大小小,参差不齐。
1.规格统一
图标有不同规格大小,比如:120px*120px、60 px *60 px 、58px*58px、29 px*29 px。
图片来自网络
2.色彩统一
一套图标应该有统一的色彩风格,这样才能体现出这套线性图标所要表达的主题或是传达的思想。当然,这里的色彩统一不是说非要用一种颜色,而是说色彩搭配要合理。
图片来自网络
3.风格统一
一套图标应该是整体,就像哲学上所说整体由部分组成,但绝不是部分的简单相加。
图片来自网络
学会灵活使用钢笔工具
灵活使用钢笔工具绘制出需要的形状,并且用钢笔工具进行调整,熟练掌握钢笔工具中锚点、手柄的使用。
图片来自网络
善于利用布尔运算
在绘制线性图标时,我们经常会遇到一些奇奇怪怪的图形,或者是一些图形没有现成的形状供我们使用,当然我们可以利用钢笔工具进行绘制,但相比于钢笔工具,布尔运算是更好的选择。运用图形或选取的相加相减来绘制图标会使得图标更加标准、规范,而且后续还可以自由调整基础细节,不至于用手动调节而造成不一致。
线的粗细一致以保证图标的统一性
、线条粗细
线条粗细不同,图标的力度和重量感也会有差异。
粗线的图标:粗壮、厚重,视觉上看更加突出。
细线的图标:精致、透气。
2、圆角半径大小
圆角越小:视觉上越硬朗和稳重
圆角越大:视觉上越柔美和活泼
3、图标复杂度
过度简洁会导致图标失去该有的识别性,图标太过复杂视觉上会更繁重。
建议在不影响图标识别度的情况下,提升图标的简洁程度同时要表意准确。
4、断点图标
在线形图标基础上面,寻找一个缺口剪断,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数,一般不会超过2个。
5、两种线条粗细
外轮廓线条和内部线条用2种粗细大小,丰富图标细节。