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

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

2018/07/09 164430评论区

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

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

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

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

一、色彩

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

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

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

二、风格

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

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

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

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

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

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

因此,在色彩和风格上保持一致是最重要的。此外,还有一些微妙而值得注意的细节,需要设计师特别上心。因为这些图标的设计已经趋于经典,而重度用户和经验丰富的设计师,能够一眼就分辨出不够贴合的图标细节。所以,设计师常常能够听到这样的反?。骸肝乙膊恢滥睦锊欢?,就是觉得不对?!?/p>

三、透视和视角

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

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

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

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

四、阴影

在阴影的设计上,图标之间也应该保持这种一致性??纯聪旅娴牧礁鐾急臧桑?/p>

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

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

五、视觉重量

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

看看下面两个图标:

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

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

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

六、细节

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

1. 重复的元素

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

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

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

2. 细节的数量

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

结语

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址://www.35yjw.cn/combine-icons-from-different-sets

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 神器下载 海报设计 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

  • 回复@老老保老张工:那只能证明你的智商不达标!对于计划经济的构想,咱敢说强坛没有一个人比咱考虑得更周全!伪高工排在一个筋斗云之外! 2018-12-12
  • 青藏铁路边的野生动物 2018-12-12
  • 小伙收购12只鹦鹉拿网上卖 不仅被判刑还罚3万元 2018-12-11
  • 你的“普世价值论”呢?[微笑][微笑] 2018-12-11
  • 全民总动员 国家才安全-光明时评 2018-12-10
  • 广州市白云区人民法院公告专栏 2018-12-10
  • 在深入推动长江经济带发展座谈会上的讲话 2018-12-10
  • 那些吃不惯汉堡牛排的中国留学生们,是怎么在美国活下来的? 2018-12-09
  • 第74集团军某陆航旅创新训练方法 新课目扩充飞行员战斗力“内存” 2018-12-09
  • 香港特区政府本周向合资格市民发放额外自助 2018-12-08
  • 以古鉴今,习近平多次提及屈原 2018-12-08
  • “云南导游辱骂威胁游客案”一审宣判:游客消费不达标  导游言语侮辱 2018-12-08
  • 和创金服创始人兼CEO房平获第十二届人民企业社会责任奖年度人物奖 2018-12-07
  • 始终坚持以人民为中心的发展思想不断满足群众日益增长美好生活需要 2018-12-07
  • 《四部医典》入选《世界记忆亚太地区名录》 2018-12-07
  • 242| 133| 303| 8| 791| 362| 637| 888| 887| 327|