本文摘要：当我们绘制描边图标的填充版本时首先需要思量如何简化线条。理想情况下填充图标类似于阴影而不是直接翻转颜色。 绘制填充图标的描边版本需要确定好线条的粗细以及在保证清晰度的情况下可以添加几多细节。 - 正文内容 - 基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时我们总是希望将工具对齐到每一个像素特别是直线。 因为像素对齐不仅仅可以更好地渲染还能让图标越发整洁、舒服。

当我们绘制描边图标的填充版本时首先需要思量如何简化线条。理想情况下填充图标类似于阴影而不是直接翻转颜色。

绘制填充图标的描边版本需要确定好线条的粗细以及在保证清晰度的情况下可以添加几多细节。

- 正文内容-

基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时我们总是希望将工具对齐到每一个像素特别是直线。

因为像素对齐不仅仅可以更好地渲染还能让图标越发整洁、舒服。

以此同时为了与开发人员更好的对接我们还需要同时借助框架和页面来组织图标的分类页面表现最外层的分组(我喜欢按巨细排序)。

然后框架资助我们缩小内容规模如下面的示例所示。这个图标的命名系统为：巨细>类>文件名。

图标的基本元素

巨细

一致性是设计图标的关键当我们绘制时一定要确保所有的图标都相同巨细。

而且需要知道如何构建网格(好比8px还是10px)所有图标巨细都应该基于此来设计。好比我们有一个基于8px的网格那么我们的图标尺寸最好是 16px、24px 或 32px 等。

5种气势派头的5个产物图标——注意这些细微的差异是如何让每一组看起来一致和完整的。

原文地址：https://www.designsystems.com/iconography-guide/

图标虽小但它却是设计系统和产物体验的关键部门。

不仅可以资助我们快速导航、不受地域语言限制体积也很小。除此之外它还是一个设计系统的基本组成部门对营销宣传很是有资助也是插图的基础构件看似简朴实则很是具有挑战性的。

一般我喜欢从最大的尺寸开始然后依次绘制小一点的。因为删除和简化细节要比添加容易得多也能最大水平的保留图标原始状态。

颜色

图标往往也是一个品牌的视觉出现。所以在开始这项事情前我们需要相识自己品牌的焦点价值以及它们的视觉气势派头。这里可以用一些形容词总结：坚硬/柔软、随意/正式、奢侈/经济、具象/抽象。

或者也可以参考一些插图气势派头。

我喜欢在绘制图标之前就先设置好栅格这是我在Figma中的设置。

栅格

当我们需要在描边图标主元素内部填充另一个元素时（好比在屋子里添加一个窗户）如果没有足够的空间容纳描边形状那么最好使用与描边成比例的填充形状而且一定不要太大。

否则你将看到一个2px描边的图形中放置了一个大于4X4pt的填充形状的奇怪场景。

shield、shield/dollar、shield/euro、shield/pound、shield/yen、shield/plus

角的绘制方式有几种：斜接(方形)、斜角、和圆角。我强烈建议你只使用一种方式处置惩罚图标。

如果可能的话只管制止在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字(例如钱币符号等等)那么请你自己绘制而不是直接使用字体。

像素栅格说完了接下来就是视觉栅格。

视觉栅格可以资助我们找出图标的中心在那里以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个。

本文关键词：ob欧宝体育网址,图标,设计,没,思路,来,看看,这篇,超实,用的

本文来源：ob欧宝体育网址-www.sanjiehome.com