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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
图标风格就分这3类,你知道是哪3类吗?
0.0°
2020-01-01 原创文章 经验/观点 举报 14206 21 32 0

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


作为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/ 



5、启动图标网站:https://www.iosicongallery.com/#



6、图标网站:https://www.iconshock.com/line-icons/  



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


总结:

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

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

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

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


微信公众号:7号设计馆



Powered by Froala Editor

更新:2020-01-01

收藏

21人已收藏

设计师_花音

在设计的道路上永不止步!

  • 1

    作品

  • 4

    粉丝

  • 1

    关注

相关标签
ui分享经验设计

    猜你喜欢

      2020-01-01 原创文章 经验/观点 举报 14206 21 32 0

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

      0.0°

      你确定要举报图标风格就分这3类,你知道是哪3类吗?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年12月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      32
      21
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录