28

想整合出一套统一的图标,这些技巧不要错过

 5 years ago
source link: https://www.uisdc.com/combine-icons-from-different-sets?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Rr6BZvE.jpg!web

找图标这个事情,对于设计师而言,其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载,而且设计师自己改和设计都不是什么大事。不过,这当中涉及到一个非常现实的问题。

对于常用的那十几个图标,并不难找,成套的都一抓一大把,就像“设置”和“编辑”的图标,但是,有许多图标对于特定的项目而言,是独一无二的,你想在通用的图标合集中找到一个能用的,可能性并不大。如果在其他的地方找到了主题匹配的,但是在风格样式上,又无法保持一致,这就很尴尬了。总不能直接拿来用吧?那多容易出戏。

fIZBJnj.jpg!web

单独看这些图标的时候,你可能会觉得单独看都还行,但是放在一起就不那么合适了。

那么如何将来自不同的UIKit 的图标汇总整合成为一套,甚至于让网站和APP等不同地方、来源不同的图标,变成一致而令人愉悦的设计?

色彩

图标所传递的诸多信息当中,色彩是最为直观的一种。将不同来源的图标先在色彩上统一起来,比如使用同一种颜色。

fmIJ3qy.jpg!web

虽然说使用单一色彩很便捷,不过你如果能运用现有的配色方案来进行图标的色彩统一,效果就更好了:

nQnyma2.jpg!web

如果你真的喜欢你所找到的图标,但是它们的色彩又不一样,可以先自己调整,或者找一位专业的图标设计师来帮你。值得注意的是,绝大多数的素材的分享授权许可证是包含编辑授权的,你可以更改色彩和尺寸。

Z3uQJ3m.jpg!web

风格

拟物化和扁平化设计之间的斗争已经持续多年了,目前来看扁平化设计是主流,但是我并不知道这种局面还会持续多久,因为如今的扁平化设计当中就包含了不少拟物化的设计技巧和元素。在未来的5到10年会流行什么,就很难说了。时尚和流行就是这样。

euyQRjY.jpg!web

我所知道的是,你必须挑选一种风格。要么扁平,要么拟物。

你看看这套图标,配色是一致的,但是风格并非如此。

iAR3qiv.jpg!web

将扁平化和拟物的设计风格混搭到一起,必然会导致界面的杂乱无章。

不过,在大的风格设定之下,设计师依然有足够多的选择。比如在扁平化的设计风格当中,iOS 的 Apple Human Guideline 和 Google 所推动的 Material Design 都是非常典型的扁平化设计风格设计规范,两者在细节和风格的把控上都非常的严格,甚至具体到每一条线的粗细:

Mv6NzuU.jpg!web

基于那些专门为特定操作系统所定制的、系统化的图标来设计新的图标,其实是最可靠的办法。这些被广大设计师所接受的设计规范,在日常设计中指引着许多设计师的工作。

因此,在色彩和风格上保持一致是最重要的。此外,还有一些微妙而值得注意的细节,需要设计师特别上心。因为这些图标的设计已经趋于经典,而重度用户和经验丰富的设计师,能够一眼就分辨出不够贴合的图标细节。所以,设计师常常能够听到这样的反馈:“我也不知道哪里不对,就是觉得不对。”

透视和视角

下面的5个图标,同样都是采用的拟物化的风格,为了统一,我细微调整了一下它们的色彩,看起来更加一致。但是不管怎么调整,它们看起来就像是5个完全不同的应用程序的图标(事实上它们就是)。

B3MFzuz.jpg!web

如果,按照透视图将这5个图标放置进去,就可以清晰地看到,它们所处的视角和位置是截然不同的。

yIBVfi7.jpg!web

它们分散在透视图的不同位置,明显是不一致的,而这一点则完全违反了图标设计的一致性。

图标应该看起来就是整个界面的一部分,它们之间的关系是平等的,在视觉和感知上应该保持着同等的关系。

eiuYbqY.jpg!web

阴影

在阴影的设计上,图标之间也应该保持这种一致性。看看下面的两个图标吧:

mE3eqmz.jpg!web

这两个图标源自同一套图标,但是看起来却只有只有一个图标被太阳给照到了。光的方向同样很重要。因此,想要让图标保持一致,最好是让图标在光照角度上也保持着一致。

小贴士:虽然阴影多数情况下被认为是拟物化设计中才会用到的,但是实际上,包括 Material Design 在内的扁平化设计风格中也会用到阴影。所以原则上,它是泛用的,设计师需要保持设计上的一致。

视觉重量

图标给人的大小、密度和重量感,就是我们常说的视觉重量。而在同一套图标当中,图标的视觉重量应该保持一个非常接近的程度。

看看下面两个图标:

Z3amEjf.jpg!web

当你眯起眼睛感知这两个图标所形成的色块的时候,就能够更加明显的对比两者的视觉重量了:

YBRNri3.jpg!web

差异确实非常的大。这个例子看起来非常极端,所以我们再继续找点别的案例来进行对比:

iua67jm.jpg!web

就视觉重量而言,上面的一组明显是不平衡的,你只需要眯眼斜视就可以很快判断出来。

细节

魔鬼藏于细节。但是细节中所藏的魔鬼类型还是非常多样的,这个主题我们不妨展开了来说。

重复的元素

有的时候,设计师会加入了一些一致的、重复的元素,来确保图标看起来足够独特。

7vAbii2.jpg!web

看看下面这组图标,会在右下角加入一些像素化的元素,每个图标都有,并且各不相同。而这组用户头像图标也是如此:

r26nEfn.jpg!web

重复的元素,重点在于重复的一致性。

细节的数量

另外一种情况,则是细节数量上的不一致。这种不一致会扰乱整体的一致性,简而言之,就是这组图标应该在复杂度上保持均衡,否则,用户将会因为混乱而难以判断各个图标的属性。

fqAbiuE.jpg!web

结语

正如同我刚开始所说的,想要将不同的图标纳入到一个系统当中来,设计师主要的工作目标就是确保一致性。经验丰富的设计师会从各个角度和属性上来针对图标进行优化,今天的文章已经将潜在的、需要关注的问题都梳理出来了,图标的设计工作做好了,界面的设计才会更加顺畅。

ziayqme.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK