广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

【技术分享】设计图标的四大步骤
发布日期:2024-10-19 08:49:00 浏览次数: 900 来源:天健世纪科技

设计师在画图时总是要经历各种各样的尝试,画icon也是同样的,都不知道什么是最好的,只能在多次的尝试后得出最优解。

挑选最优解很简单,重要的是哪来那么多的方案/灵感?这篇文章就以绘制四个底部tab的icon——首页、低碳生活、低碳商城、我的,跟大家分享。









整体是四个大步骤:
Part.01
寻找参考:要先脑爆,再找参考
Part.02
细化图形:从小到大将差异化融入
Part.03
细化风格:优先参考app的设计风格
Part.04
整体调整:最关键最基础的设计修养


01
·   寻找参考:要先脑爆,再找参考  ·







以最常见的「首页」icon 为例,想到首页你会想到什么图形?

那一定是「房子」对不对?如果你直接去iconfont上搜首页,也是给你出来一堆房子:

如果你的思路在开头就仅限于此,那后续方向尝试也会受到局限。

这时需要在这一步就发散下思路,脑爆一下,可以从行业角度和自身产品的角度去出发。

比如现在画的这个首页 icon,属于是环保行业内的,那首页 icon 是不是可以是「地球」「树苗」?再从自身产品角度出发,看看app内的LOGO、吉祥物。

那么现在光首页这个icon就能想到5个可设计的方向。

只有联想的关键词越多,可检索的范围就越广。

按照这种思路每个icon都能找到很多参考,再根据参考画出 icon。

此时「首页」这个图标画出了以上六种图标造型,「树苗」「地球」的图标都比较独特,但是目前房子这个图标就太常见、太大众了。

在画图标时不可避免地也会有一些比较常见的、普通的 icon,就可以对这些常见的 icon 进行调整,让它不至于这么大众。



02
·   细化图形:从小到大将差异化融入  ·







可以赋予普通图标一点差异化,让它看起来更不同一些。从小点入手,将它基础形进行微调,从大点入手,可以将行业属性和品牌图形融入图标。

如果从小的调整入手,可以考虑将图标外轮廓做一些微调。将房子的外部造型进行调整,一共微调出5种房子的造型:

小的调整能让这个图标稍微变得不一样一些。而从大方向上可以发生更明显、直观的变化,让图标的差异化特征也更加明显。

如何对图标进行更大的改观?

大家可以从行业属性的融入、品牌图形的融入去尝试。比如这个首页图标你希望他带有环保的行业属性,而环保类icon的参考里常见的元素有树苗、树叶、闪电:

这些元素都可以和房子进行很好地结合:

除了融入行业属性,大家也可以将自己产品的品牌图形融入icon,比如像飞猪、马蜂窝app都有将自己的吉祥物or品牌图形融入其中:



03
·   细化风格:优先参考app设计风格  ·







通过以上两步,把 icon 的外形确定下来后,就可以开始细化图标风格了,如果不知道该采用什么风格,不如先看看自家app的风格或设计语言是什么,可以根据app风格细化图标风格。

如果这款app的页面风格是扁平、渐变、线条:

那么 icon 就可以按照扁平、渐变、带线条的方向去走。以首页这个 icon 举例,就能画出以下几种方向:



04
·   整体调整:最关键基础的设计修养  ·







用上面讲到的三大步骤,补齐剩下三个 icon,最后一步就是对这一组icon进行整体的调整。大致基于三大点去做调整:

1.要保证一套图标起码有2个以上的不同点,个别图标没有过多的想法,可以保持普通。

2.遵循统一性

最后检查一遍整体 icon 统一性,包括视觉大小统一、圆角统一、正负形比例统一、描边粗细统一。

3.视觉平衡。每一个icon在视觉上看起来都要在中央。


总结

以上就是在设计图标时必须经历的几大步骤和获取图标设计灵感的办法。其实无论经验丰富与否,只有反复的尝试才能得出最好的方案,希望大家都越来越牛!


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!