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

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

图标的历史可以上溯到人类文明发源伊始,最早的象形文字,岩洞壁画等都可以算作图标的一种,为我们后代研究人类文明产生了珍贵的历史意义。但今天我们研究的图标主要以计算机系统发明为分界线,看看这短短几十年间,图标是如何演化的。

●80年代的初期图标还是黑白单色

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

●到2000年后,随着显示技术的发展,图标也越来越形象

●图为iOS1-8图标变化

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

图标因其良好的辨识性和无障碍沟通特性,在各种场景下被广泛应用,同样,因使用场景的不同,图标所代表的意义也不一样。

●iOS14桌面应用图标

应用图标指的是我们设备界面上的应用入口,通常具有较强的品牌特性,可能与logo一致或与其核心功能一致,如instagram就是一个简化的相机正视图,亚马逊则是一个购物车形象,国内也有不少产品直接使用了能够代表产品的文字,需要注意的是,界面图标必须遵循对应系统下的尺寸规范。

●华为EMUI10应用图标

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

辅助性图标通常存在于有较多长文字时,搭配作为辅助说明,在UI中,可能还具备一定情感化的作用,在提升用户接收信息效率的同时安抚用户情绪;所以整体可能需要具备更多细节,作为画面补充的一部分。

●如:缺省图标

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

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

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

能够绘制出高质量的图标是每个UI设计师必备的能力,本次我们以功能图标为例,为大家展示具体的几个绘制步骤和要点,希望帮大家在细节上避开影响图标精致度的一些小细节。

功能图标因形态结构各异,难免存在尺寸不一的情况,必须考虑其整体视觉的协调一致,最好的办法就是建立图标网格,也可以称为图标盒子,当图标形态分别为长、方、圆时,有一个合理的比例限制。

●将常见图标形态约束在图标盒子内

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

这些功能相对比较容易找到现实中的实物,如果是比较抽象的功能呢?就需要我们发散思维,找与之相近含义的事物。如隐私功能,隐私是没有实物的,但是我们可以通过“隐私”这个词延伸:不公开的、隐藏的、锁起来的、被保护的,继续根据这些词延展:就可能是密码、盾、锁、遮眼等等。

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

有了功能的具体形象,下一步就是思考如何让图标变得更简洁易辨识。

●毕加索《公牛》

毕加索创作《公牛》时,从初稿到最终成品历经了11个版本,最后只用寥寥几条线来勾勒,但我们依然能一眼认出牛的形态。绘制图标也一样,需要我们思考如何省略无用细节,化繁为简,提取他们的主要特征。

有了简化的图标形象,我们接下去应该思考如何让图标变得更为规范耐看。

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

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

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

这一步的诀窍就是尽可能使用基础图形去组合拼贴,这样做出来的图标,尤其在适配不同尺寸大小切图时不易拉伸变形。

统一性

●风格:线性、面性统一

●断点细节一致:平角、圆角

●图标气质一致:是圆润还是尖锐硬朗

随着功能界面的不断复杂化,大家早已不满足于同一产品或同个界面中单一的使用面性或线性图标,而是搭配使用便于层级划分,故而这里只考虑在同一层级下图标的统一性。

视觉平衡

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

一致的视角

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

融入品牌DNA

●韩国购物App11street,就很好的融合了品牌logo的箭头符号

功能图标因简洁通俗,比较容易出现市场同质化严重的现象,故而很多App选择在图标中融入品牌基因,不仅做出差异性,还能提升品牌调性。

跟随趋势创新

通过对图标风格质感的创新表达,让人眼前一亮。这种方式更多需要你了解当下的流行趋势和技法,根据产品的风格调性,对图标进行量身打造。

图标微动效

随着5G时代来临,微动效也早就出现在了大众视野,基于图标的微动效表达,能让用户更快注意到某个功能并去点击它,如果你的动效还恰好有趣美观,更能让用户感到愉悦。比较常见的loading和tab切换都让我们有了很充足的发挥空间。

通常一个产品的功能图标会多达几十甚至几百个,如何保证这些图标的统一性需要提前去规划。绘制的最后一步,就是在完成一部分图标后,及时排列比对,确保整体视觉效果的统一;有条件的可以生成图标库,便于后续的团队协作。

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

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

THE END
1.logo标准尺寸标准用ps做logo的详细步骤标示在品牌策划中起着十分关键的功效。一个设计方案较好的logo不但能够塑造企业形象,还能够传递丰富多彩的商品信息。从商业服务和经济发展的视角看来,标示是一种视觉效果标示,它将一个知名品牌与类似和类似的设备和公司区别起来。logo的首要功能是让客户第一眼见到就留有https://www.dkewl.com/course/detail8449.html
2.淘宝店铺logo怎么做?制作步骤介绍!你还可以选择淘宝店铺的组合方式,横排、竖排都可以。编缉好后就可以保存下载了。 如果你不知道如何把自己淘宝店铺的logo做好的话,那么按照这个步骤去操作基本上就能完成了,并且也是不需要花钱就能实现的,如果觉得这个技巧好,就赶紧去操作一遍吧!https://www.maijia.com/article/480406
3.抖音店铺logo如何做(分享详细的步骤)(1)抖音店logo是一张图片,相当于店面,可以是文字图片,也可以是纯图片,大小不超过5M即可。 (2)如果你不是品牌店,抖音店logo中没有品牌。 (3)抖音店logo没有政治敏感内容,也没有政治敏感内容没有联系方式广告信息。 (4)抖音店logo不涉及人物,动画肖像,容易侵权 https://www.longtengec.com/news/035210.html
4.Word学完了,一起来学习PS吧!班徽的制作(一)#Ps#教程#学习Word学完了,一起来学习PS吧!班徽的制作(一)#Ps#教程#学习 430播放 03:42 班徽的制作(二) 娜个爱画画的电脑老师 330 0 03:01 设置图层样式 娜个爱画画的电脑老师 42 0 03:57 设置超链接 娜个爱画画的电脑老师 173 0 01:58 图片的插入与调整 娜个爱画画的电脑老师 134 0 08:23 第10https://www.bilibili.com/list/ml3242121995
5.利用PS制作抖音logol(7)按Ctrl键+点击选所有图层→右键→合并图层,得到白色logol图层(图层1副本)。操作的GIF图如下: 图8 (8)点“图层1副本”按“Ctrl+J键”快速复制出2个图层,分别为“图层1副本1”和“图层2副本2”。操作的GIF图如下: 图9 (9)点击“图层1副本1”右键调出“混合模式”→取消勾选“G通道和B通道”,然后利用https://zhuanlan.zhihu.com/p/71651913
6.cv2给图像加logo,plt子图列表cv2图片上放logo文章浏览阅读879次。本文详细介绍了如何使用Python的OpenCV库将LOGO图标叠加到目标图片的右上角,通过图像处理步骤,包括LOGO缩放、二值化处理、ROI提取、图像融合等操作,实现不透明效果。最后通过MATPLOTLIB展示了处理过程的各个阶段图像。https://blog.csdn.net/sdgpcc2000/article/details/121548435
7.八个步骤帮你优化LOGO设计流程“假设你只想要把你的草图画成矢量,请个规划学生吧。他们可以做的极好,并且花不了你几钱。但假设你要雇我来操刀这个项目,咱们就得遵循无缺的Logo规划流程。当然,我会记下你的草图,并且加以研讨。不过暂时我不知道全部的项目细节,我不能保证这即是好的处理方案,我也会构思别的的概念。” https://www.cdcxhl.com/news/168221.html
8.PS设计出比较好看的logo过程详解标志logophotoshop教程平面设计现在做生意的越来越多,好的店铺肯定要有一个好的招牌,也就是一个比较好看的logo,复杂的logo你可以请专业的团队去做,对于一些简单的只有文字的,又不太想花钱让别人去做的,几个简单步骤你也可以设计出来。下面小编就为大家介绍PS设计出比较好看的logo过程,来看看吧 https://www.jb51.net/photoshop/442882.html
9.如何制定logo的标准色解析logo标准色的制作步骤与方法在设计logo时,选择合适的标准色是至关重要的。通过品牌调研、色彩心理学和色彩对比与协调的方法,可以确定符合品牌定位和目标的标准色。标准色的选择和使用可以提升logo的识别度和一致性,帮助用户建立对品牌的印象。 北京vi设计公司特别喜欢该文《logo的标准色怎么做》。 http://www.szarts.com/news/20230826122057.html
10.如何给所有的幻灯片添加logo?做工作汇报或者商业文案时,经常需要在每一页幻灯片上加上自己公司的logo,如何添加logo呢? 方法/步骤 1、点击“视图”--->“幻灯片母版”,接着点击“插入”--->“图片” 2、插入logo后鼠标右击logo,点击“置于顶层” 3、点击“幻灯片母版”--->“关闭”即可https://www.wps.cn/learning/room/d/329648
11.淘宝店铺logo免费制作方法是什么?具体操作步骤!想做一个淘宝店铺logo,那么具体的制作步骤是什么样的?有什么制作? 1.首先我们要下载一个美图秀秀软件,这个软件操作起来非常的简单,非常的适合新手去操作,因为它是一个非常好用的美工软件。然后我们下载安装到自己的电脑上。 2.然后新建一个正方形的图片。长和宽的话我们都设置成120×120像素。一定要设置个正方形https://www.jiulangdianshang.com/quantaojiaocheng/1496.html
12.Logo设计完全教程,按照这7步指南,没有不会做的标志logo的诞生和品牌的成就一样,都不是一蹴而就的。品牌logo是品牌理念的体现,要经过市场调研、设计草稿、设计成品和优化设计这一系列繁琐又漫长的过程。https://www.canva.cn/learn/logo-design-tutorial-7-step-guide/
13.如何通过6个步骤创建自己的标志每个企业都需要一个标志,但并非所有企业都知道如何设计LOGO。为了降低成本或加快速度,许多企业决定简单地创建自己的标志,而不是聘请专业人士。虽然设计自己的标志有很多优点,但所有这些都要求您真正知道如何创建自己的标志。https://www.zeubon.cn/?p=3739
14.如何自己制作logo?制作步骤和使用工具制作步骤和使用工具 在当今竞争激烈的商业环境中,一个独特而专业的logo对于企业的品牌形象至关重要。然而,许多初创企业或个人创业者可能没有足够的预算来雇佣专业设计师来制作logo。那么,如何自己制作一个令人印象深刻的logo呢? 第一步:明确品牌定位和目标受众https://www.ylyxw.com/24255.html
15.设计带有logo的资料封面,可按以下步骤完成资料封面带logo图的设计可以通过以下几个步骤来完成。首先,确定资料封面的整体风格和色彩,以确保与所代表的内容相符。然后,选择合适的logo图案,确保其与资料的主题和目的相一致。 设计带有logo的资料封面,可按以下步骤完成。首先,确定封面整体的风格和色彩以确保符合内容。然后,选择合适的logo,确保与主题相符。接着,根https://www.parabrand.com/biaozhisheji/news_x-2857-14.html