恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
图标设计思路与分析
0.0°
2022-01-07 原创文章 经验/观点 举报 3157 2 12 0

  • 设计图标的时候经常考虑一件事情,什么是好的图标,如何才能画出好的图标?

寻寻觅觅

寻寻觅觅...

每次画完图标的时候都在思索、总结

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

每次都会翻阅大量文章设计资料,以及各种类型的应用里的图标做对比分析



一套优秀的图标要具备:

一.实用性

二.美观

三.精致

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


实用性是指什么?

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

在图标的设计上:能够一眼或者是在较短的时间内感知到它的含义,实在很难表义的可以配合文字充分解释,相辅相成。(呼应产生积极效果)


dribbble图片

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

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

【如果你不理解一个产品,你就使用不了它的功能--至少不能很好地用。哦,当然,你可以把基本操作步骤记住,不需要反反复复地去记。如果很好地明白了一项操作,你就会说:“啊,我明白了。”此后你便不需要更多解释及提醒了。“只学一次,永不忘怀”应该被奉为设计的箴言。】——来源于唐纳德·诺曼 【设计心理学】



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

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

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

想了解更加全面的信息点击      蓝牙名字和logo的由来

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

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

元素提取、应用(素材源于网上)

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

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



2)美观

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

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

如何设计一组美观的图标

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

图一图二

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

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

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

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


我们下面看两组图标:

来源 dribbble

snapseed 图标

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

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

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


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

来源dribbble-统一颜色,磨砂效果


来源dribbble-统一透视角度


来源dribbble-统一磨砂效果


来源网络-相同的表现手法

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



3)精致

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

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

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

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

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

飞行模式

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

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

图标设计过程

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

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


总结

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

以上内容很少涉及比较基础的概论(eg:圆角不同的大小,线条不同的粗细所代表的不同的含义及情绪;差异化大的图标还有哪些方式去统一;通过什么方式或理论来验证自己设计的如何?后面有时间也会陆续发表相应的文章)。

此内容仅做参考,

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

想要成为更好的自己

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


Powered by Froala Editor

更新:2022-01-07

收藏

2人已收藏

  • 7

    作品

  • 2

    粉丝

  • 5

    关注

  • 响应式设计之全面讲解(上)
  • 一篇文章,带你看懂功能图标!
  • 设计思维带你看透设计!
  • 如何实现用户增长

    猜你喜欢

      2022-01-07 原创文章 经验/观点 举报 3157 2 12 0

      图标设计思路与分析

      0.0°

      你确定要举报图标设计思路与分析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年01月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录