如何设计B端图标
一般在我们接到图标设计需求时,需要跟产品也就是需求方(业务方)确认3项基础,「图标大小、图标表意及图标的使用场景」,问清楚的情况下再去设计,这样避免返工率
图标大小:图标的具体尺寸16px还是24px,放在软件的哪个地方
图标表意:这个意符的直接含义,如马路上的右转标识,你一看就知道是右转
使用场景:是指在哪种真实环境下会用到,比如烧水壶上的灯只有在烧水的时候才显示出作用
用这周画的其中一个图标示例下:需求名称:备降点
图标大小:24*24px图标表意:体现出备降使用场景:在飞机无法降落到起飞点时,用户通过点击图标,引导无人机在紧急情况下降落至预设的位置
第一步得到以上信息后,照常去浏览素材,iconfont是主要的,其次是Google。为啥不用百度搜索?因为用了好几次,发现百度的搜索结果不咋地,就是感觉咩有谷歌的精准度与广泛性更好。话说回来,飞机行业就这么几家。所以图标有一家做的不错的,基本都是直接拿过来小改,这样某种程度上跟业内的持一致,用户认知起来也不费力
找图标的时候要带问题找合适的,找可行性的,找灵感:比如现有设计里已经有了起飞点图标,备降点图标要不要与起飞点类似
第二步根据浏览查看的素材开始第一波的尝试绘制,就很挫。这么尝试的原因是想着起飞点是个向上的箭头,那是不是就可以用下方的「H」来做为共性做延展,所以在保持下方不变动的情况下,做了一波小尝试,以及第二排的天马行空版,总之就是试
然后想是不是太局限性了,能不能跳出我开始设定的那个H点,于是又尝试了一波,这波尝试是想着大写字母B,是英文Backup备份的首字母,又有PlanB的意思(后面大佬否定了这个备份的表意)
感觉还差了点意思,接着再查阅搜集了一番,突然看到马路分流的标识,然后又试验了波,用虚实线去表示备用这个词,箭头也与马路上那种弯曲形状类似,后面把弯曲的箭头又优化了下,就保留了红点的那个icon给大佬看
结果:大佬表示也还是差点意思,首先就说不能用Backup首字母,因为备降点应该是Alternate point。然后大佬不知道在哪找的航空公司的那种备降,下图红色圈所示,说按照这个对齐,也是想拉开备降与起飞的差异化,好辨别,于是天赋技能「照葫芦画瓢」发动,按照产品风格做了一版,最终才定下了
总之想表达的是,B端图标在设计时多数是以业务层为主。同时前期查资料的时候多查点,免得让大佬查就很尴尬的做无用功
BC端图标的差异化
1、图标内容不同B端产品要与同类型的图标尽量保持表意一致,在图标表达形式上差距不能太大,所有图标相似性要高C端产品图标的同质化非常严重。要与别的产品形成个性差异的同时。又想突出自己的设计理念,那图标也是必不可少的一环,让用户快速记住你这个品牌。因此设计的时候需要考虑的是怎么样在同样的内容情况下,设计出更独特的图标风格
2、设计难点不同
B端图标的设计难点在于业务名称复杂且多变。在B端图标的设计场景中,会与各种业务名称进行关联,因而需要去思考每个业务所表达的特殊含义,遇到各种生僻字与英文缩写时,图标往往是需要去多维度的探究与思考C端图标更多偏向与趣味性的表达,比如大多数的图标会采用去做图标视觉上的优化,而不会去考虑业务层面的东西,也因此两者的难点也存在不同的差异
3、侧重点不同
由于B端产品使用图标场景较少,但在图标的数量上会比C端图标多上好几倍,同时还需要使用图标去表达不同业务间的关系,因此B端图标更讲究扩展性C端图标虽然图标数量较少,但是使用图标的场景却又十分复杂。比如品类区、我的页面中、各种功能图标以及二级页面图标,因此需要通过整体性的考虑,将多场景的图标进行串联,形成一整套视觉图标体系
B端 Icon网站分享
https://feathericons.com/
https://heroicons.dev/
https://remixicon.com/
最后希望疫情早点淡掉吧,咋还往上走了呢,咋不学股票基金,天天降
附上往期分享
(附带设计规范源文件)以往有期分享了设计规范以及组件参考的网站,补个源文件
一些很有深度的设计规范,值得收藏
去年年底项目总结分享,附带源文件
动效转Lottie神器-AE插件Bodymovin安装与使用
有任何设计问题,欢迎加好友一块交流,反正我也不回答,强烈捍卫社死的自己
希望每次分享的文章对你都有用