IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      UI设计中图标的类型那么多,到底该怎么准确运用?

      • 发布时间:
        2019-08-02
      • 版权所有:
        云和教育
      • 分享:

      如今的用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。

      合理的运用与设计图标,是UI设计师必备的技能。今天我们就来归纳一下常见的UI设计图标类型

      1、图标的类别

      广义来说,图标可以分为以下两个类别。

      应用图标

      配图1 UI设计中图标怎么准确运用.jpg

      应用图标是各种应用程序的识别标志,我们在应用商店里下载的一些应用程序的标志。应用图标的设计风格也有很多种,这里不做延伸。

      功能图标

      配图2 UI设计中图标怎么准确运用.jpg

      功能图标可理解为界面上表示指代意义的图形。今天我们主要讲的就是这类图标分类。

      2、图标风格分类

      图标的风格有很多种,设计的技法也是千千万,总的来说常用的图标可以分为三大类:

      配图3 UI设计中图标怎么准确运用.jpg

      2.1、面性图标

      面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。

      技法分析

      配图4 UI设计中图标怎么准确运用.jpg

      配图5 UI设计中图标怎么准确运用.jpg

      风格延伸

      极简风格

      配图6 UI设计中图标怎么准确运用.jpg

      整体风格极为简约,没有多余的线条,通过线条还原图形的本质,在视觉感知上轻松、干净。

      双色

      配图7 UI设计中图标怎么准确运用.jpg

      相较于“纯色的图标”更具表现力,细节上也会更加丰富,形态感知上多了一层变化。

      透明度变化

      配图8 UI设计中图标怎么准确运用.jpg

      通过透明度的叠加和变化,提升图标的层次感和空间感,降低图标的压迫性。

      渐变层次叠加

      配图9 UI设计中图标怎么准确运用.jpg

      渐变带出了图标的质感,结合“不同深度”或“不同饱和度”的变化,让图标更具有细节和层次。

      黑白+品牌色

      配图10 UI设计中图标怎么准确运用.jpg

      黑白色作为主色调,结合品牌色作为点缀色。

      线性渐变

      配图11 UI设计中图标怎么准确运用.jpg

      结合渐变的颜色,丰富了整个图标的视觉表达,并提升了图标的视觉冲击力和设计感。

      一笔成形

      配图12 UI设计中图标怎么准确运用.jpg

      此类图标在视觉表达上具有较高的线性流畅度和设计感,关注点在于整组图标的“开口起始点”设定上需保持一致。

      断点图标

      配图13 UI设计中图标怎么准确运用.jpg

      在线形图标基础上面,寻找一个缺口来打破“全包边图标”的沉闷感,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数避免过多导致图标外形过于零碎。

      2.2面性图标

      面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。

      配图14 UI设计中图标怎么准确运用.jpg

      配图15 UI设计中图标怎么准确运用.jpg

      风格延伸

      单色面+点缀色

      配图16 UI设计中图标怎么准确运用.jpg

      整体的外形使用统一的颜色,结合图标的属性感知使用不同的颜色进行点缀,提亮图标的视觉效果,达到既统一又具有差异化。

      多彩双色

      配图22 UI设计中图标怎么准确运用.jpg

      通过对比色、邻近色的搭配来营造整体的图标氛围,提升了图标的层次和丰富度,双色的表达也增添了图形的趣味性。

      微质感渐变

      配图18 UI设计中图标怎么准确运用.jpg

      微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果,因此可以根据不同设计的需要进行调整。

      透明度/灰度变化

      配图19 UI设计中图标怎么准确运用.jpg

      透明度/灰度的变化,让原来单色的图标变得更加具有层次感和空间感,设计细节更加丰富,降低了单色面性图标的厚重感。

      透明度变化+渐变

      配图20 UI设计中图标怎么准确运用.jpg

      在渐变的基础上对组合型做透明度差异化,使得图标具有了层次感。

      透明叠加的图标+渐变的背景

      配图21 UI设计中图标怎么准确运用.jpg

      此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。

      颜色叠加穿透

      配图22 UI设计中图标怎么准确运用.jpg

      图标透明叠加之后产生了交错的负形,叠加出第三个面。

      渐变层次叠加

      配图23 UI设计中图标怎么准确运用.jpg

      通过渐变的深浅变化,使得形状的衔接处出现了明暗对比,因此图标也具有了厚度感和层次感。

      高斯模糊

      配图24 UI设计中图标怎么准确运用.jpg

      更具层次感和空间感,同时图标也具有较强的设计感。

      2.3、线面结合

      结合了线性和面性的优点,既保持了面性的重量感,同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控,不同比例可以呈现出不同的视觉感知。

      技法分析

      配图25 UI设计中图标怎么准确运用.jpg

      风格延伸

      黑白线+面性品牌色

      配图26 UI设计中图标怎么准确运用.jpg

      统一的线性颜色叠加品牌色的透出。

      线面双色

      配图27 UI设计中图标怎么准确运用.jpg

      在线和面的颜色上做差异。具体做法与线性或面性的双色接近。

      线面结合-阴阳

      配图28 UI设计中图标怎么准确运用.jpg

      线和面的结合按 50% 的比例进行设计,整体图标的视觉效果较为跳跃,非常规。

      线面双色+错位

      配图29 UI设计中图标怎么准确运用.jpg

      在双色图标的基础上,线和面按照统一的“百分比” 进行缩放,并进行透视和位移的设计,呈现出一种交错叠加的视觉效果。

      线面错位+渐变

      配图30 UI设计中图标怎么准确运用.jpg

      基于上一种风格,对面或者线的颜色进行渐变设计,丰富了图标的质感和颜色更加细腻。

      线面透明度变化

      配图31 UI设计中图标怎么准确运用.jpg

      如下图案例,“弱线强面”的第一识别度较弱,而“弱面强线” 的外形识别度较高,也更符合图标的表达。

      基于三种基础的类型表达,可以拓展出多种多样的风格。这里再展示一些,希望能激发你的灵感,在图标设计上有更多思路。

      插画

      配图32 UI设计中图标怎么准确运用.jpg

      配图33 UI设计中图标怎么准确运用.jpg

      配图34 UI设计中图标怎么准确运用.jpg

      配图35 UI设计中图标怎么准确运用.jpg

      图标的分类远不止如此,但是万变不离其宗,都是“线性、面性、线面结合”再结合透明度、渐变、颜色叠加、质感、多维空间等表达方式设计出来的。我们除了需要掌握这些内容之外,更需要日积月累的练习和思考,从量到质的变化。