快捷搜索:  汽车  科技

图标设计尺寸:万字长文 终极图标设计指南

图标设计尺寸:万字长文 终极图标设计指南如给 iOS或Android 设计图标 你最好使用它们平台的网格规范。这些网格确保它们在各个平台上保持网格统一 你应该遵循这些规则,确保和平台的风格保持一致。另一个情况是当你要给现有的平台设计图标,而这个平台有自己的图标网格。网格很像遵循的规则,让其他设计师在最开始就明白图标的尺寸、以及设计规范。当然并不是所有时候绘制图标都必须先建立网格。如果你要创建超过50个图标以上的图标集时,网格还是很有必要的。你要使用同一种风格创建很多图标,网格有助于保持视觉网格统一 。

除了正方形跟圆意外,还有菱形,三角形。在绘制这类图形,一定要注意视觉大小。别再让别人说你的图标不统一了。

为了保证图标的视觉统一,通常会借助网格(keyline线)

4. 什么是图标网格

把图标网格当成一种约束,让你的图标集保持规范统一。网格是一个框架,让你的图标保持统一。

图标设计尺寸:万字长文 终极图标设计指南(1)

5. 什么时候使用网格

网格是一个框架结构,会在这个基础上图标会保持一致。如果未来这些图标被其他人维护的时候,网格也可以起到很好的作用。

网格很像遵循的规则,让其他设计师在最开始就明白图标的尺寸、以及设计规范。

当然并不是所有时候绘制图标都必须先建立网格。如果你要创建超过50个图标以上的图标集时,网格还是很有必要的。

你要使用同一种风格创建很多图标,网格有助于保持视觉网格统一 。

另一个情况是当你要给现有的平台设计图标,而这个平台有自己的图标网格。

如给 iOS或Android 设计图标 你最好使用它们平台的网格规范。这些网格确保它们在各个平台上保持网格统一 你应该遵循这些规则,确保和平台的风格保持一致。

九、图标常用尺寸

1. iPhone图标尺寸规范

@2x格式使用机型:iPhone 4,4s,5,5s,5s,s,6,6s,7,8,XR;

@3x格式使用机型:iPhone 6P,6SP,7P,8P,X,XS,XS Max;

图标设计尺寸:万字长文 终极图标设计指南(2)

2. 安卓图标尺寸规范

图标设计尺寸:万字长文 终极图标设计指南(3)

3. iPad图标尺寸规范

图标设计尺寸:万字长文 终极图标设计指南(4)

十、如何统一图标

1. 创建凝聚力的图标集

创建一个图标很容易。创建一些美观的图标也不难。这使它们具有凝聚力,可能会是一个难点。完成一组连贯的图标是一个艰巨的挑战。下面有6个有用的技巧,可以掌握如何创建精美的具备凝聚力的图标集。

2. 为什么图标应该具有凝聚力

图标设计不仅仅是代表真实对象的图形符号。这是一种独特的语言,其中每个图标都是一个具有自己含义的名词。

就像在现实世界中与伴侣聊天一样,可以使用图标与数字世界中的人进行交流。

在一组使用样式不同的图标就像在一个句子中混合使用不同的语言–即使您很好的被人们所理解,人们也不会认真对待您。

1)坚持一种风格

这是要使图标漂亮且一致的关键。在确定图标的样式之前,请勿开始制作任何图标。

有很多样式和样式变体。最常见的是:轮廓图标,字形,平面图标,拟形图标,手绘等。一旦确定了未来图标的样式,请坚持使用该图标集中的每个图标。具有不同样式的图标引人注目,但效果并不理想。它破坏了整个集合的凝聚力,美感和价值。

从决定使用哪种样式的那一刻起,所有设置的图标都应使用相同的样式制作。不要让风格各异的图标杀死场景并破坏其背后的辛苦工作。

2)保持相同的风格

这与保持相同样式略有不同。

每种风格都有其个性。例如,可以制作成千上万种不同的轮廓图标变体。但是选择正确的样式同样重要。

图标是详细的还是简约的?有粗线还是细线更好?还是混合线宽?那角落呢:它们应该是圆的还是尖的?要使用圆形或对接帽吗?

确切知道为什么每个元素都按您的方式进行。考虑一下您未来图标集的所有可能细节,并一直坚持到最后。

3)大小相同

保持集合中每个图标的大小相同。它们不仅应该在相同大小的方形框架中,而且看起来也应该相等!

想象两个相同大小的形状–圆形和正方形。正方形将始终看起来更大,因为它会填充更多空间。应该进行一些更改以使它们在外观上相同。例如,将正方形缩小一点。

4)使用网格

出色的图标集始终使用网格制作。只是不要过度使用它们。如果您发现图标看起来不适合网格,请调整!好的集合有一个网格。

5)在整个集合中使用相同的元素

很简单:如果您在一个图标中使用了20px的圆圈,另一个图标则需要一个类似的圆圈,只需复制它即可。毫无疑问,在整个集合中具有相等大小的对象会使它看起来更具凝聚力!从其他图标复制元素将为您节省大量时间!

6)使用相同的调色板

相同的颜色组合应该保留在集合的所有图标中。选择颜色,将它们添加到色板,然后尝试使用它们。

十一、B端、C端图标的差异

1. 图标内容差异化

C端产品的图标设计需要突出自己的设计理念,还要与其他产品形成个性化、差异化,尤其是竞品。

设计过程中尽可能与产品品牌结合,让用户快速记住你的产品(品牌)。所以C端产品的图标设计更具备独特的视觉风格。

B端产品的图标设计则不需要过于差异化,主要强调图标的表意与实际需求一致。在图标表达上差距不能太大,同质化较为严重。

图标设计尺寸:万字长文 终极图标设计指南(5)

猜您喜欢: