7个步骤,让你更好完成图标设计-春华教育官网
您所在的位置: 首页

7个步骤,让你更好完成图标设计

2021-12-04 11:57 作者: 来源: 点击量:5

图标在UI设计师的眼中,就像一颗一颗的螺丝钉,用小小的身躯,连接了产品各个功用和界面,得以让整个功用流程顺利进行。

图标在UI设计师的眼中,就像一颗一颗的螺丝钉,用小小的身躯,连接了产品各个功用和界面,得以让整个功用流程顺利进行。这些图标,究竟是怎么发挥它的作用的?咱们又该怎么把它做到漂亮耐看呢?



一、图标是什么

要做好图标,首先咱们要知道图标是什么?在一般认知里,图标可以界说为一种图形化的符号或标识,用于协助咱们了解某些复杂功用或操作,尤其在数字化领域里,可视化的图形符号,更利于高效的展现信息和引导人机操作交互。也有人称之为icon或eikan。


图标的开展史

图标的前史可以上溯到人类文明发源伊始,最早的象形文字,溶洞壁画等都可以算作图标的一种,为咱们后代研讨人类文明产生了宝贵的前史意义。但今天咱们研讨的图标首要以计算机体系发明为分界线,看看这短短几十年间,图标是怎么演化的。

80年代的初期图标仍是是非单色

90年代慢慢多了些色彩,形状也更丰厚

到2000年后,跟着显示技能的开展,图标也越来越形象

图为iOS1-8图标改变

从最早的Xerox Sta体系到最新的Mac os10,再到现在人手一台的移动智能机,每个阶段都拥有其独特的图标风格,2010年现已到了智能移动年代,拿最知名的iOS体系每个阶段晋级,图标的改变来看,也历经了初期的拟物-扁平-微质感的好几个阶段。


二、图标的分类

图标因其杰出的辨识性和无障碍交流特性,在各种场景下被广泛运用,相同,因运用场景的不同,图标所代表的意义也不一样。


1.运用图标

iOS14桌面运用图标

运用图标指的是咱们设备界面上的运用进口,一般具有较强的品牌特性,或许与logo共同或与其核心功用共同, 如instagram 便是一个简化的相机正视图,亚马逊则是一个购物车形象,国内也有不少产品直接运用了可以代表产品的文字,需求注意的是,界面图标有必要遵循对应体系下的尺度标准。

华为EMUI 10运用图标


2.功用图标

与运用图标不同的是,它首要作为界面中的功用进口,一般为简练易辨识的符号,依据不同产品调性,图标风格也可以多种多样,并且不强制有必要为标准形状,异形图标能让界面更为生动,全体风格的发挥也有了更多空间。


3.辅助图标

辅助性图标一般存在于有较多长文字时,调配作为辅助说明,在UI中,或许还具有一定情感化的作用,在提高用户接纳信息功率的同时安抚用户情绪;所以全体或许需求具有更多细节,作为画面弥补的一部分。

如:缺省图标


4.与logo的区别

虽然这两者特性极为相似,都是图形化的符号,但logo是为全体品牌服务的,具有其独一无二的专利特性,乃至可以是IP形象或文字;两者的联系可以了解为父子。

图中的图标就很好继承了logo的特征和风格

但有的也只是普通的界面辅助,风格和样式并不共同



三、图标的制作

可以制作出高质量的图标是每个UI设计师必备的能力,本次咱们以功用图标为例,为咱们展现详细的几个制作过程和要点,期望帮咱们在细节上避开影响图标精致度的一些小细节。


第一步:树立图标网格

功用图标因形状结构各异,不免存在尺度不一的状况,有必要考虑其全体视觉的协调共同,最好的办法便是树立图标网格,也可以称为图标盒子,当图标形状分别为长、方、圆时,有一个合理的比例束缚。

将常见图标形状束缚在图标盒子内

当然,网格不是绝对的,要学会灵活运用,当与个别图标形状无法完美匹配时,也不必拘泥,全部以到达视觉和谐为首要。我一般会在图标网格外围预留一个安全区域,可以规避切图呈现不完整的状况。


第二步:具象功用

有了网格,第二步则需求咱们依据功用,找到与之对应的什物形象;如笔记本是记载,电话是通话,时钟代表时间,日历代表日期等等。

这些功用相对比较简单找到实际中的什物,如果是比较抽象的功用呢?就需求咱们发散思维,找与之附近意义的事物。如隐私功用,隐私是没有什物的,但是咱们可以经过“隐私”这个词延伸:不公开的、躲藏的、锁起来的、被保护的,持续依据这些词延展:就或许是暗码、盾、锁、遮眼等等。

时刻记住一点:用大众都能了解的物体形象去表达。如果用户看到某个图标过于复杂,需求重复考虑它代表的意义,也无法猜测点击后的成果,那这个图标就失去了提效的作用。


第三步:简化结构

有了功用的详细形象,下一步便是考虑怎么让图标变得更简练易辨识。

毕加索《公牛》

毕加索创造《公牛》时,从初稿到最终成品历经了11个版别,最终只用寥寥几条线来勾勒,但咱们依然能一眼认出牛的形状。制作图标也一样,需求咱们考虑怎么省略无用细节,化繁为简,提取他们的首要特征。


第四步:善用布尔运算

有了简化的图标形象,咱们接下去应该考虑怎么让图标变得更为标准耐看。

如桃心图标,便是两个简单圆角矩形组合而成

桃心图标,也可以做的更圆润

不同组合下的布尔运算,图标形状特征也会不一样

这一步的窍门便是尽或许运用基础图形去组合拼贴,这样做出来的图标,尤其在适配不同尺度大小切图时不易拉伸变形。


第五步:处理细节

共同性

风格:线性、面性共同

断点细节共同:平角、圆角

图标气质共同:是圆润仍是尖利硬朗

跟着功用界面的不断复杂化,咱们早已不满足于同一产品或同个界面中单一的运用面性或线性图标,而是调配运用便于层级划分,故而这里只考虑在同一层级下图标的共同性。


视觉平衡

如图,三角形置于中间方位时,视觉分量会偏向左面,在这个基础上,咱们就需求做出适当调整,以到达视觉分量平衡。


共同的视角

当你想让自己的图标变得愈加出彩而采用了区别于正视图的结构,那也一定要保证至少在同等层级下,这些图标视角是共同的。


第六步:做出差异化

融入品牌DNA

韩国购物App 11 street,就很好的融合了品牌logo的箭头符号

功用图标因简练浅显,比较简单呈现市场同质化严峻的现象,故而许多App挑选在图标中融入品牌基因,不仅做出差异性,还能提高品牌调性。


跟随趋势立异

经过对图标风格质感的立异表达,让人眼前一亮。这种方式更多需求你了解当下的盛行趋势和技法,依据产品的风格调性,对图标进行量身打造。


图标微动效

跟着5G年代降临,微动效也早就呈现在了大众视界,根据图标的微动效表达,能让用户更快注意到某个功用并去点击它,如果你的动效还刚好风趣漂亮,更能让用户感到愉悦。比较常见的loading和tab切换都让咱们有了很充足的发挥空间。


第七步:完善图标库

一般一个产品的功用图标会多达几十乃至几百个,怎么保证这些图标的共同性需求提前去规划。制作的最终一步,便是在完成一部分图标后,及时排列比对,保证全体视觉效果的共同;有条件的可以生成图标库,便于后续的团队协作。

Apple发布的SF Symbols中图标,就划分了9种宽度和3个比例尺度

有了图标库后,协作设计师做到共用功用时可以直接调用;极大提高自己和团队的功率,并保持全体标准的共同。


最终

图标制作看似简单,要做好却并不简单;UI处处充溢细节,想要自己的界面愈加精致,就不要忽略每一个可以提高的点。期望今天的这篇文章可以帮到你。


分享到: