图标(icon)设计的方法有哪些

图标设计是UI设计中非常重要的环节，因为除了文字和的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标

全文16,834字，阅读时长约35分钟

图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门UI设计的必备条件

本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点

内容比较基础，主要以设计概念和设计思路为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系

过程中也有针对几种典型的图标结构进行实 *** 代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助

1

1图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及 *** 作

它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等

图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等

的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等

如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于App或网站中，用于功能性指示引导或 *** 作

1

2图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质

在不少UI界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性

它有以下几点好处：全球通用：Windows,iOS,etc

中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果在一个图标能够表述清楚含义的时候，比如用一个叉就可以不用写「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了

1

3发展历程如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识

随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路

20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「XeroxAlto」

这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而XeroxAlto对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows对抗Macintosh

当然这都是后话

来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑

1991年，苹果借由Macintosh，首次发布了彩色的图标设计

图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升

从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代

拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」

于是UI设计师开始探索更新的表现形式来设计界面中的图标

如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计，但由于它们的表现形式太过于抽象，缺乏情感的传递，并没有获得用户的青睐

在此之后，越来越多的图标开始借由灵活而强大的数字技术而诞生，并且基于不同的需求而演化出不同的分支和风格

许多 *** 作系统和工具开始预制一些成体系的图标，诞生基于种种需求，越来越多的自制的、重设计的图标，逐步进入了我们的视野

图标类型很多，我们可以用不同的方式来划分它们

扁平化方法如下：

步骤 1:

宽度: 500px, 高度: 400px 背景色#e8d59b

步骤 2:

参考线设置：

垂直：157px,177px,250px,323px, 343px, 378px 水平：72px, 107px, 127px, 200px, 273px, 293px, 328px

步骤 3:

前景色#d14242,，圆角矩形工具，半径40，如下

步骤4:

椭圆工具，颜色#ffffff, 在中心创建圆状物体。

依然在圆形图层，选择减去顶层形状，画出圆环形状如下图。

步骤 5:

自定义形状工具，前景色 #ffffff, 中心创建三角箭头

基本扁平化图标完成图。

希望可以帮到你，望采纳~~

CSS中用字体标签画icon图标方法：

1、先引入字体标签字体；

2、在相关标签内使用（例：如下）。

<link type="text/css" rel="stylesheet" href=";<span class="fa fa-phone"></span>

---