电话:0769-83722192
关闭
您当前的位置:首页 > 职场资讯 > 行业资讯

平面设计:UI设计师必须要学会的图标设计技巧

来源:XS资料网 时间:2021-02-19 作者:天天向阳 浏览量:

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

对于常用的那十几个图标,并不难找,成套的都一抓一大把,就像「设置」和「编辑」的图标,但是,有许多图标对于特定的项目而言,是独一无二的,你想在通用的图标合集中找到一个能用的,可能性并不大。

如果在其他的地方找到了主题匹配的,但是在风格样式上,又无法保持一致,这就很尴尬了。总不能直接拿来用吧?那多容易出戏。

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

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

一、色彩

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

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

如果你真的喜欢你所找到的图标,但是它们的色彩又不一样,可以先自己调整,或者找一位专业的图标设计师来帮你。

值得注意的是,绝大多数素材的分享授权许可证是包含编辑授权的,你可以更改色彩和尺寸。

二、风格

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

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

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

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

不过,在大的风格设定之下,设计师依然有足够多的选择。比如在扁平化的设计风格当中。

iOS 的 Apple Human Guideline 和 Google 所推动的 Material Design 都是非常典型的扁平化设计风格设计规范,两者在细节和风格的把控上都非常的严格,甚至具体到每一条线的粗细:

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

因此,在色彩和风格上保持一致是最重要的。此外,还有一些微妙而值得注意的细节,需要设计师特别上心。

因为这些图标的设计已经趋于经典,而重度用户和经验丰富的设计师,能够一眼就分辨出不够贴合的图标细节。所以,设计师常常能够听到这样的反馈:「我也不知道哪里不对,就是觉得不对。」

三、透视和视角

下面的5个图标,同样都是采用的拟物化的风格,为了统一,我细微调整了一下它们的色彩,看起来更加一致。

但是不管怎么调整,它们看起来就像是5个完全不同的应用程序的图标(事实上它们就是)。

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

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

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

四、阴影

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

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

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

五、视觉重量

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

看看下面两个图标:

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

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

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

六、细节

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

1. 重复的元素

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

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

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

2. 细节的数量

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

结语

正如同我刚开始所说的,想要将不同的图标纳入到一个系统当中来,设计师主要的工作目标就是确保一致性。

经验丰富的设计师会从各个角度和属性上来针对图标进行优化,今天的文章已经将潜在的、需要关注的问题都梳理出来了,图标的设计工作做好了,界面的设计才会更加顺畅。

适合UI新手临摹的一组APP图标

icon设计一直以来都是进入UI设计行业的必学技能课,也是学习UI设计最基础的入门知识要点,学习绘制图标从临摹开始再到自己原创设计。

但是作为一名UI设计师,除了会设计APP视觉界面,还要会设计比较出色的APP icon图标设计,同时也体现出了设计师的高水准和设计技巧。


学智能制造热门技术,就来东莞市横沥潇洒职业培训学校,政府智能制造人才定点培养基地,入学签订推荐就业协议,在校期间双师型教师手把手授课,实训实战练就真技术,毕业时定向企业直接上岗,让你无后顾之忧!

好消息,2021已开启工作模式,开学报名送优惠啦

老学员正月初八正式上课,31日将统一开新班,想学习CNC数控编程、塑胶模具设计,压铸模具设计、冲压模具设计, Solidworks/pro/E产品设计、AutoformR7工艺分析,非标自动化设计、PLC编程、文职、电商、平面设计、新媒体等培训课程的朋友们请抓紧时间抢优惠啦,2021年给自己提升点技术,不要被时代淘汰冷落了自己

学习热线:13018639977(李老师)

学校官网:www.dgxspx.com线上免费试学: xsmj.ke.qq.com

即日起,组团3人以上学习CNC电脑锣实操课程,学费全免,学会为止包就业,工资4000-6000以上



微信扫一扫分享资讯

免责声明:

1、本文由入驻智造人才网资讯专栏的作者撰写或者网上转载,观点仅代表作者本人,不代表智造人才网立场。如有侵权或者其他问题,请联系举报。

2、本网转载并注明自其它来源的作品,目的在于传递更多信息,并不代表本网赞同其观点或证实其内容的真实性,不承担此类作品侵权行为的直接责任及连带责任。其他媒体、网站或个人从本网转载时,必须保留本网注明的作品来源,并自负版权等法律责任。

3、如涉及作品内容、版权等问题,请在作品发布之日起一周内与本网联系,否则视为放弃相关权利。

热门话题
推荐文章
微信公众号
手机浏览

Copyright C 2020 All Rights Reserved 版权所有 智造人才网 粤ICP备16112896号 44190002004849号

地址:东莞市横沥镇兴业路121号 EMAIL:qiufukang2007@163.com

粤公网安备 44190002004849号

Powered by 广东智造

用微信扫一扫