图标设计思路与分析经验/观点

每次画完图标找其他资深设计师寻找意见

一套优秀的图标要具备:

一.实用性

二.美观

三.精致

我在这里把实用性放在了第一位,因为作为一名设计师不仅要考虑美观,我们做的图标是服务于用户所以要站在用户的角度考虑,在实用和美观相冲突的时候应该把实用性放在第一位。而且在用户的实际使用场景中只要图标不是做的很丑绝大多数用户他们感知度不是很大的,但是图标做的不够实用是会很明显带给用户很差的体验。

实用性是指什么?

概念:发明或者实用新型申请的主题必须是能够在产业上制造或者使用,并且能够产生积极效果。

如上图所示,即使没有文字信息绝大多数图标也可以看出是什么含义。

有些小伙伴在这里就会产生异议“这里的有些图标并不能一眼看出什么意思啊?”

1)应该怎么才能提高图标的实用性?

1.尊重用户的使用习惯,如果用户都对某个图标形成了共识,就尽量不要修改它的含义或者另辟蹊径画一个比较个性,自己认为比较有设计感的图标。

2.尊重历史,(eg:蓝牙的LOGO来自后弗萨克文的符文组合,Runicletterior.svg(Hagall,)和Runicletterberkanan.svg(Bjarkan,)的组合,也就是HaraldBl?tand的首字母HB的合写,成为了今天大家熟知的蓝色徽标。——百度搜索)有些信息拥有很深的历史渊源,需要深层次的挖掘才能将把图标设计的更有理念更贴合实际。

3.尊重物体形态,举一个夸张的例子:如果设计一个危险的图标,最后画成锁的样子是不是就彻底抛弃了他原有的含义,用户使用起来根本不知所以然,反而背道而驰。众所周知“锁”代表着安全、保密,和危险没有任何关系。如果让设计一个保密的图标,画成锁的的样式,就可以很好的被用户识别。内心还会产生满满的安全感。

4.基因继承,在我们的实际生活中,都是一些尖锐的器具(刀子、叉子、剑...)更容易给我们造成伤害,所以我们经常把这些器具放的更容易触摸不到的地方,就算见到了也会有意识的主动避让开来保证自己的安全。而那些可以护人安全的盾牌是不是看上去就比较圆润、厚重、可靠。

在实际的应用中,马路上危险的标牌几乎都是尖锐的三角形容器再配合警示的黄色(颜色也属于基因的一部分,不同的颜色在不同的场景给人的感受也是不一样的,对颜色精准的把控可以使自己的设计如虎添翼)会让驾驶中的司机在看到的第一眼就会有意识的远远的避开。

因此在设计的时候也要学会提取代表它们可以带给人相应感受的元素和基因,应用到相应的图标上,才会让我们设计的图标拥有灵魂,不至于最后画出的图标虽然很美但是总感觉哪里怪怪的。

2)美观

美观在我看来,是作为设计师最基础的能力!

想要图标看上去好看首先要“眼高”只有多看多学,审美才能在潜移默化中不断的提升,如果眼界都不高那么自身绘制的图标最大的限度也只能达自己目前眼界的高度。

如何设计一组美观的图标

1.保证体量一致:体量不单单指展示面积,最终需要保证的是视觉体量一致。

初级设计师画图标的时候经常在一个限定的范围框内设计,总以为在这个里面画的图标最差也不会差到哪去,可以保持体量一致,设计的图标更加统一,最后容易忽略审查的步骤。图一两个图形都在固定的的限定框内画的图标,但是视觉上正方形比圆形要大的多。这个时候就不能完全的依赖限定框。要以使用者的视觉去审视,主观的去调节保持视觉大小一致。

2.保证相同形状、属性、含义的图标圆角值一致

3.保证相同形状、属性、含义的图标描边粗细一致

重要的事情再次强调一下【相同形状、属性、含义的图标才能保持圆角、描边粗细的一致】。很多设计师在这里有很大的误区,为了尽量的保持图标一致性,有些本来尖锐、方正的图形也画的很圆润,这样真的好吗?

我们下面看两组图标:

是的每组图标都不丑,但是哪组图标的实用性更强呢?

第一组图标很协调很统一,第一眼看上去没有什么问题。但是就是因为太过协调,导致每个图标的相似度太高没有把每个图标的个性、特展展示出来。

第二组图标舍弃了部分的统一性(但是相同形状、属性、含义的线条以及圆角还是保持一致的),这里面有面性、线性、圆润、尖锐的。但是整体视觉效果还是保持一致的。在保持一致的前提下每个图标的识别度还是非常高。不仅照顾视觉感受还考虑到了实际的使用效率。在混乱中寻找统一,在统一中寻找不一样。当然做这种类型的图标设计师就要考虑的就非常多,面临的挑战也是巨大的!这样绘制的图标才更有深度有意义啊!在过方案的时候才能侃侃而谈,叙述每个图标的故事...

“统一”在我看来不仅仅是指线条粗细、圆角大小更要重要的是表现手法eg:透视角度、磨砂效果、断点、颜色...

著名的图标设计师HemmodeJonge在他的演讲里提到,在他和他的团队为荷兰政府设计图标系统的时候,在每一个图标中都添加了一个「切口」(notch),通过这样的小细节,使得整个图标系统能够整合在一起。同时增了情感化以及设计感,使得简单的图标不在那么单调。

3)精致

何为精致,不妨从漂亮女孩说起。漂亮的的女孩都有一个相同的特性:身材、五官的大小比例协调;眉毛、眼睛、鼻子、嘴巴、耳朵的间距合适;眼线、眼影、口红、弯弯的睫毛这些细节的妆容也恰到好处。

大小、间距、细节,这些标准也可以用到我们图标设计中,来审核图标的精致度是否做到。

1.大小,系统内的图标一般不会太过复杂,而它小小的体量不足以支撑起很大的画面。所以这个时候它的大小定位就尤其重要,太大会显的豪放、粗犷,进而会感觉粗糙。太小就会影响用户识别度点击困难。所以在这种情况只能凭借设计师多年的经验多试错,多对比,选出最合适的那个。

2.间距,画图标的时候间距的设定也会影响到图标的美观以及精致度,之前看到一本设计书写到线性图标元素之间的间距最好大于等于线条粗细的1.3倍,经过多次尝试我建议最好大于等于线条粗细的1.5倍。这里的间距也类似页面设计的留白,目的是保留一定的呼吸空间。当然这里说的数据只是参考,具体的设计也要具体的研究不断的尝试,才能找到比较合适的那个。

3.细节,图标的细节对精致度的影响最为重要。

上面这个图标虽然也可以看出是个飞行模式的图标,但是细看的话没有任何细节只能说基本比例没有什么问题。

那么细节应该怎么设计?参照实物,尊重用户认知!

在设计图标之前就要考虑好这个图标含义,有没有参照的实物,对应的人群,表达什么样的功能,更深一步表达什么样的情绪。

在设计飞行模式的时候就会考虑到什么情况下会用到飞行模式,和什么场景关系最为密切。用什么来表达最为合适,最贴合用户的“心里模型”。按照飞机的模型绘制出它的形态只是第一步,因为在工业设计中,尤其像飞机这种大型的交通工具。设计师更注重的是实用性毕竟能保证乘客的生命安全是至关重要的。而设计图标的时候就要在其基本的形态下继续优化,保留、放大必要的特征,丢弃繁琐没必要的细节,适当调整相应的比例。

总结

绘图不难,难的的是想法。有些内容可说太多反而没有太多的用处,需要设计师不断的去摸索,去尝试。敢于询问自己的内心,打破固有思维。

此内容仅做参考,

相信每个设计师都有自己的意见和技巧。

想要成为更好的自己

就是去尽可能的阅读各种书籍,放低姿态多学习多方面充实自己,让自己变得越来越优秀。

THE END
1.层级思维解构图标分类体系设计每日一贴无底板图标 单层级 单色扁平 整体风格简洁大方。由于没有其他质感元素的加入,所以对图形要求更加需要简约而精致 双色扁平 主副图形对比色搭配,整体风格既简约又具备颜色丰富度 微质感 ·渐变方向从上到下,这种渐变方向较为传统,呈现轻轻鼓起的圆润形态 ·渐变方向从下到上,为图标赋予了轻盈而灵动的视觉感受 ...http://www.lanlanwork.com/blog/?post=11226
2.漂泊小南全技能文字版分析,昼夜两种形态,两段奥义切换加终结技...目前只是看到了漂泊小南的普攻爆料,而且还是一个默认形态的攻击效果,虽然技能图标和奥义图标没有任何遮挡,但最终的技能表现形式仍然是一个未知数。不过在游戏内推送了更新包以后,实际上这个忍者的技能描述也已经更新了,通过拆包的形式也可以提前看到漂泊小南的全技能文字描述,下面我们可以来提前分析一下。 https://game.xiaomi.com/viewpoint/1426406644_1713536501478_100
3.(转)这可能是最全面的图标设计类型和风格总结!面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。 1. 面型图标基础分析及想法 轮廓对比 轮廓的差异会体现出不同的气质,如下图的左边和右边的区别,一个...https://www.jianshu.com/p/0c5b97cd8414
4.帖子详情(AI阅读导航条常驻形态) (AI阅读导航条刘海屏形态) 不同的使用场景,360AI浏览器的“AI阅读导航条”的功能不一样。 比如,在长文本场景,360AI阅读导航条会提供“原文、简介、脑图、重点、分析、追问、生成PPT”功能; 在视频阅读场景,360AI阅读导航条会提供“原文、简介、脑图、重点、全文、字幕、分析、追问、生成...https://m.bbs.360.cn/detail.html?id=16131599
5.数据图表数据分析 游戏规则 专家荐号 更多快乐8走势图表> 双色球图表 号码走势: 综合分布图红球三分区分布图红球四分区分布图红球七分区分布图红球十一分区分布图 蓝球走势: 蓝球综合走势图蓝球三分区分布图蓝球四八分区分布图蓝球奇偶质合分布图蓝球振幅走势图 形态走势: ...https://www.zhcw.com/sjtb/
6.一旦出现“双针探底”形态,砸锅卖铁火速满仓,拉伸即将开启双针探底形态分析: 双针探底形态,可以划分为以下的组成部分: (1)、双针探底形态发生之前,市场处于下降趋势中,有一天,出现了一根带长下影线的K线,向下试探市场支撑的力度。 (2)、第一日试探市场支撑力度之后,市场收出了同样带一长下影线的K线,那就表明了市场空头已经丧失抵抗力。多头已经逐渐掌握了市场主动权,...http://mp.cnfol.com/9615/article/1524449831-1468560.html
1.轻拟物风格图标如何设计?跟随教程轻松掌握!1、轻拟物风格图标的分析拆解 轻拟物设计是一种使用简化形态的拟物设计。它在保留拟物设计中的核心要素,如光影、结构和透视的同时,对图标的轮廓、肌理和层级进行了精简,使得图标的形态更加概念化、理想化,易于辨识。轻拟物设计的目的是为了减少对用户的认知负荷,使界面更加直观和易用。 https://js.design/special/article/dummy-style-icon-design.html
2.活动分析再战逐鹿,全新首款双形态英雄级免费送!【核心奖励分析】 首先是本次活动的核心奖励永久版的QBB95-再战涿鹿,该款武器也是首款双形态武器,即QBB95-再战逐鹿拥有双阵营外形和属性,在爆破模式中,不同阵营将触发不同武器外形和属性加成。 保卫者形态下的QBB95-再战涿鹿整体以青碧色为主,上面的龙腾图案栩栩如生,仿佛诉说着炎黄二帝的故事。装备该武器,蹲下后...https://cfm.17173.com/content/09262024/165825683.shtml
3.UI图标设计从入门到精通同时色彩对于人来说是重要的,它可以实现人对世界的认识与改造。色彩对于图标意境的形成有着重要的影响,在UI图标设计过程中,要将色彩与材质、形态等进行有机地结合,在此基础上,产品的生命力将更加顽强,产品的形象也将更加凸显。 材质设计 “材质设计”是构成产品的基本要素。材质,是被消费者直接视及和触及的对象,...https://www.epubit.com/bookDetails?id=N3190
4.医学院体视学和图像分析.ppt人肝细胞性肝癌CD34免疫组化标记 将血管图片分为“肿瘤”和“正常”两组, 每组9张图片 拟合直线的作图(逐个去点) k, g, b, c, m, y, k, b 总结 体视学概述 病理学与图像分析 倍体分析 三维重建 分形的应用 思考题 1、什么是体视学? 2、什么是生物体视学? 3、什么是形态计量学? 4、图像分析仪...https://max.book118.com/html/2018/0521/167732183.shtm
5.一个Tip让你的icon更讨喜:流行icon分析总结与运用元素只有一个完全相同的花瓣,重复使用,创造出简洁又丰富的形态 三、如何运用饱满性去指导图标设计改版 hello U 是鹿也工作中的一个APP项目,现已在北美地区上线。 APP的主要内容是Motorola原创内容+用户喜好内容的新闻流。 初版上线时使用的 system icon 都是 Material design 的原生icon。 1. 任务分析 前面提到过...https://www.imspm.com/index.php/jiaohutiyan/104392.html
6.浅析图标的微观世界――从符号学说起共同经验+符号存在+博客Scott McCloud在《Understanding Comics》一书中对动画形象的分析,卡通形象的普适性说明了卡通程度越高,能代表的人群就越多。因此图标的形态简洁程度与细节的取舍决定了图形所能指涉的对象的范围。如图图标的高识别性区间落于写实性纬度的中间,也充分说明了图标过于简单或复杂,会扩散或减小指涉范围,必须平衡好这个度...https://blog.csdn.net/shengxiaweizhi/article/details/46137631
7.《下雨啦》美术教案(精选15篇)一、背景分析 《下雨了》是一年级美术人美版新教材中的一课。按照新的课程标准的划分,本课当属于“造型?表现”领域里的一课内容。具体地讲,在这个时期中...难点:能用泡沫条表现出各种形态的'“雨滴”。 活动准备: 1、教师示范画(事先用蓝灰色调的水彩涂满整个画纸) 2、每人一份泡沫条(包装水果的外泡沫套剪...https://www.jy135.com/jiaoan/612928.html
8.管理学:管理学的形成与发展考点巩固(考试必看)考试题库32、单项选择题 在“管理科学理论”中,首先提出“系统分析”概念的是() A.日本松下电器公司 B.德国西门子公司 C.美国兰德公司 D.美国通用公司...35、多项选择题 韦伯认为权利的形态有() A、权威的权力 B、传统的权力 C、超凡的权力 D、世俗的权力 E、理性—合法的权力...http://wap.91exam.org/exam/87-3743/3743506.html
9.求助Matrigel血管生成实验的结果如何进行数据分析?点击Image J应用程序即可打开程序,之后File---open---打开要分析的图像不多说。 点击图中红色箭头指向的这个按钮》就会出现很多的隐藏功能包括我们的血管生成插件。如下图 点击angiogenesis analyze即可。软件会自动变成如下的图形。请点击箭头所指的网格状图标。 点击网状图标后点击analyze HUVEC phase contrast选项。https://3g.dxy.cn/bbs/topic/40048968
10.幼儿园大班艺术活动教案(通用15篇)①出示节奏型×××|(节奏谱用爱心表示,以爱心的大小区分音的长短),引导幼儿根据节奏说一句爸爸爱自己的话(如:天天陪我看书),教师以图标方式记录创编内容。 ②出示节奏型×××—|(节奏谱用爱心表示,以爱心的大小区分音的长短),引导幼儿根据节奏说一句妈妈爱自己的话(如:帮我梳头发),教师以图标方式记录创编内容...https://www.yuwenmi.com/jiaoan/youeryuan/3668100.html
11.实用的舞蹈教案(通用14篇)2、通过芭蕾组合的学习,对人体的腿、头和头基本形态的初步练习,训练各动作的基本协调能力。使人体摆脱自然状态,逐步培养一种流畅、舒展的舞姿和舞蹈者所具备的基本素质。 二、教学分析 基训是指舞蹈基本能力(基本功)的训练。通过对身体各部位肌肉的能力,有关关节的柔软性,身体的控制和灵活性、稳定性及跳、转、翻...https://teacher.ruiwen.com/jiaoxueziliao/jiaoan/311291.html
12.游念东讲述:波浪理论详解2借助图标形态的特点进行涨跌目标测量主要两类:一是以转势图形为背景做目标测量、二是以调整图形为背景做目标测量。其基本方法大致是这样: 对于“头肩底/顶”形态,在颈线被有效突破后的上升/下跌目标位头部至颈线的垂直距离的一倍。 上升三角形/下跌三角形在颈线被有效突破后的上升/下跌目标为三角形底/顶部至颈线的...https://www.360doc.cn/article/31326041_807155501.html
13.加密货币基础技术分析指标和方法区块链技术区块链总的来说,只要了解了上面的这些基础形态,基本就可以看懂 K 线图表了。 3.常见指标解读 除了图标中 K 线的各种形态外,另外还有不少辅助的指标,这些指标对于交易中分析趋势、识别进入点和退出点以及市场情绪也非常有帮助。因为它们能够提供客观的数据,以减少我们情绪化的交易,并提高价格预测的准确性。如下图所示。 https://www.jb51.net/blockchain/946997.html
14.FranklinFTSESaudiArabia(FLSA)ETF走势K线图K线形态分析K线图又称蜡烛图,英文candlestick,是一种实用的技术分析图表工具。K线围绕开盘价、最高价、最低价、收盘价四个数据展开,反映趋势的状况和价格信息。这款强大的Franklin FTSE Saudi Arabia(FLSA)ETF走势K线图,展现历史和最新Franklin FTSE Saudi ArabiaETF净值,并有专业的K线形态分析,您可用其预测ETF市场走势。这些K线...https://cn.investing.com/etfs/flsa-nyse-candlestick