当前位置:首页 > 新闻动态 > 网站文章

图标风格就分这3类,你知道是哪3类吗?

来源: 浏览:114 时间:2023-08-22


作为UI设计师,你是否清楚当下流行的的图标分为哪些风格呢?


目前,主流的图标设计风格分为3大类,了解这3大类,你就可以解决掉工作中的烦恼啦!


它们分别是:【线性风格、面性风格、线面结合性风格】。一个好的图标,能够清晰的传递给用户想要表达的意思,下面我们来了解下吧。


线性风格


1、线性图标:由线条组成,比较简洁,轻量。通常使用粗细统一的线条构成。不同的线条可以表达不同的视觉感受,直线硬朗,曲线柔和。大家可以根据产品本身的特质来选用符合产品特色的形式。颜色可以是单色,也可以在单色上改变透明度增加层次感。

(有弧度的圆角图标)

(没有弧度的直角图标)


(改变透明的图标)


2、描边缺口图标:同一组图标中,采用相同的断开线条的方式。断开的缺口是考验设计师能力的,在构思图标时就要想好哪些地方可以断开。


3、双色图标:用两种颜色搭配组成的图标。需要定义一个主色调,另外一个颜色作为辅助色点缀,颜色需要有主次区分。


4、黑白色+品牌色图标:用黑色或白色+品牌色点缀组成的图标。


5、渐变色线条图标:通过渐变色来设计的图标样式


面性风格


1、单色面性图标:由单个颜色组成的图标。

2、渐变色图标:通过渐变色背景+白色透明度组合的图标,这类图标通常作为在UI中做为主要入口出现。

(弱渐变+白色透明)
(弱渐变+白色透明+图标主色弱投影)



3、透明叠加图标:通过图层颜色的叠加做出交叉图形,将颜色调整为邻近色,让图标更具层次感



4、微质感图标:通过弱渐变体现图标立体效果,让图标更为形象。


线面结合风格


1、单色混合:通过黑白色+品牌色组合。通常用品牌色作为点缀,做到和品牌的一致性。

2、色块偏移:线条+错位,在线面结合的情况下,将色块进行错位设计,让图标更为丰富,让视觉更为有特点

3、 线面结合:线条+填充色,在面的基础上直接保留线的部分,通常在底部栏主icon中使用



总体来说,图标分类是线,面,线面结合的3大类别,在日常使用中,需要我们通过综合的思考来判断哪些地方适合什么样的图标。

通过产品的需求,用户的体验,来选择适合的图标类型。


设计图标时我们可以注意以下基础规则:


同组图标中:

1、视觉大小统一

2、粗细统一(除设计时有需要特殊处理的线条)

3、颜色不宜超过3种

4、图标有弧度的弧度统一

5、识别度要高(能从图标中看懂要表达的意思)

6、不宜过度复杂


给大家推荐7个优秀的图标网站:


1、超3000+图标下载网站:https://app.streamlineicons.com/  



2、免费各种格式图标下载网站:https://www.flaticon.com/



3、国内常用图标网站:https://www.iconfont.cn  



4、各类图标网站 :https://icons8.com/ 







7、 免费与付费图标网站:https://iconscout.com/


总结:

本文主要整理了在日常UI设计中常用的几种图标类型:线性图标、面性图标、线面结合图标。

通过这篇文章可以为大家提供一个设计图标时的选用图标类型的思路。

图标类型在不同的思考角度下,可以分为不同的类型,但最终都需要结合产品本身,找到适合产品类型的方案。

设计的成长是点滴积累的,希望大家能掌握图标的这些小知识,大家一起成长,共同进步哦! 


微信公众号:7号设计馆



地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图