视觉设计 英文 入门设计的必备条件之一图标应用范围

日常生活和工作中，我们与各类各样的界面打交道。作为设计师，图标是界面视觉组成的关键元素之一。了解图标相关的常识，以及恰当规范的绘制方式，是入门设计的必备条件之一。本文将对界面进行平台的介绍，希望我的这篇文章可以给你们带给一些帮助。

一、什么是图标1.概念

图标，是一种图形化的标志，它有广义和狭义两种概念，广义主要指带有指代含义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特点。一个图标是一个小的照片或对象，代表一个文件、程序、网页或命令。

图标有助于用户迅速执行命令和开启程序文件，单击或双击图标以执行一个命令。图标也用于在浏览器中迅速呈现内容，所有使用同样扩展名的文件具备同样的界面。

随着计算机的发生，图标被带给了新的意义，又有了新的用武之地。在此处图标成了带有明确指代意义的计算机图形，桌面按钮是工具标识，界面中的按钮是用途标识，在计算机硬件中，它是程序标识、数据标志、命令选择、模式信号或切换开关、状态指示。

图标在计算机可视操作平台中扮演着极为重要的角色，它可以代表一个文档、一段程序、一张网页或是一段命令。我们还可以借助图标执行一段命令或开启某类型型的文档，你所要做的也是在界面上点击或双击一下。

图标是带有指代含义的具备标识性质的图形，它除了是一种图形，更是一种标志，它带有高度浓缩并快捷传达信息、便于记忆的特点。

2.范围

图标应用范围很广，软软件网站社交场所公共场合无所不在。例如：商城里的导视系统、男女厕所标志和各类交通标志等。狭义主要指应用于计算机硬件方面，包括：程序标识、数据标志、命令选择、模式信号或切换开关、状态指示等。

二、图标的发展史1.起源

图标不仅历史久远，从上古时代的图腾，到20、21世纪带有更多意义和用途的各类界面，而且应用范围极为广泛，可以说它无所不在。1973年，在施乐公司帕洛阿尔托研究中心发明出来。该手机首次使用了桌面比拟（Desktopmetaphor）和鼠标驱动的图形用户界面（GUI）科技，诞生了最早的拥有图形化界面的电脑，著名的「XeroxAlto」。

然而当年电脑性能不足，董事会也不看好，并未推行商品化，所以这款概念机并没有走进他们的视野，但是它的后续机型施乐之星在1981年诞生，并且作为了计算机史上的里程碑。

1979年乔布斯参观了施乐的PARC研究所发现施乐原型机XeroxAlto，乔布斯决定研发图形客户界面的新手机。1983年小米公司推出了AppleLisa，首次引入GUI的商品化电脑。1985年谷歌公司也应用GUI推出了Windows1.0。

2.历程

80年代，本身是想把图标做的的抽象，却由于当年电脑性能不足难以做到，所以设计师只能在有限的空间上面进行创作，对好的标准是越具象越好。

微软和小米相继启用了新的平台界面，随着1995年计算机内存在分辨率和帧率上的提升，设计师或艺术家有了更大的发挥空间，随之出现了更多色彩的利用或者更多透视效果的或许性。刚起初只能设计彩色的简洁的字体，到当时可以执行各类创意，实现各种效果，一直到目前。

2007年，苹果公布第一代iPhone或者iOS平台，主题界面和以前的macOS系统一致，玻璃质感及拟物化的风格明显，它的发生打破了他们对“传统手机”的定义。这款iPhone的主题图标样式，一直稳定到了iOS7的公布，才发生了改变性的差异。

2013年的WWDC大会中，苹果公司公布的iOS7系统，系统图标开始向扁平化样式转变。这场大会也使拟物风格渐渐步入下坡路，直到扁平风格的全面普及，拟物风格就没有再被广泛应用。

2020年WWDC20苹果公布macOSBigSur，这次的升级把图标采用了“新拟物”。“新拟物”的前身就是拟物图标，这是最早被Apple提出的设计概念，就是在图标中模仿现实物体纹路材质，在特定光照下的效果设计；目的是让他们在使用界面时习惯性地联想到现实物体的使用方法。而“新拟物”是将真实光线用于虚拟对象。

三、产品应用界面

产品应用界面，也叫启动按钮，是品牌和产品的核心元素。图标以简洁、大胆、友好的形式传达产品的核心模式和动机。因为产品应用界面的设计师不同，设计能够受到统一，所以苹果官网在ios平台中统一了弧形矩形的大小，在有限的区域内进行设计。而安卓就没有这么规范，处于百家齐放的现象。

1.中文文字图标

常见英文字体又分为单字、多字和字加图形的几种种类。提取产品名称中最具代表性的独立文字，进行字体设计，通过对笔画及整体骨架进行设计调整，以超过符合产品特点和视觉变化化的目的。作为国人对汉字的敏感度，这样的设计方式大大增加了客户对品牌的认知成本。

2.英文字母图标

英文字母字体一般是提取产品名称首字母进行设计，由于中文字母原本造型美观，结合产品种类进行创意加工，很易于达到美感和识别性兼具。

3.数字图标

数字对于我们来说是十分敏感的，利用数字进行设计能给人亲和力。由于数字的辨识性很强，易于品牌传播与用户记忆。

4.特殊符号图标

特殊符号字体在应用界面的设计实例中相对较少，由于符号原本的涵义会对产品属性有一定限制，所以针对性非常强。

5.几何图形图标

几何图形的利用设计给人风格、现代、个性、富有空间感等视觉感觉，从单个意象图形到复杂的空间感营造，几何图形的体现方式十分丰富。

6.动物/单双行剪影图标

动物剪影通常是提取动物整体形象以及局部特点部位作为设计元素，这类应用界面背景为彩色或者渐变色，少量的会辅助一些图形作为背景元素，动物引入彩色填充，以红色填充居多。

单双形是指应用图标只展示单个或两个的剪影图形，生活中可以成为剪影设计的元素太多。如水果、工具、生活用具、学习电器、娱乐道具等等。可以独立产生剪影图形，也可以按照产品种类进行创意加工，最终产生应用界面独有的外形图案。

7.图形重复图标

将同样的图形进行有序的排列，排列方式有梯度差异、等大均排、规律性重复、配色差异、大小错落等。这样的设计方法可以给单调的图形增加层次感和构图细腻，有一定梯度差异和规律性重复的图形组合可以释放一定的韵律感和动感。

8.正负形图标

正负形的设计在LOGO图形设计中是非常常用的体现手法，运用在字体设计中，以正形为底突出负形特点，以负形表达产品属性。利用正负形进行设计，图形设计感较强，正形与负形可以非常充分地表达产品特性与服务。

9.线形图标

线性图标样式给人简单轻盈的觉得，线性设计的方法分闭合式和开放式，可以是一条连续的色块以及几条直线构成。在有色背景底下线条一般反白处理，背景设计可以是彩色、渐变色、其他辅助图形设计等。

10.白色渐变图标

绿色渐变图标是运用蓝色渐变填充，不透明度100%到X%之间修改完成。白色渐变图形具备空间感、质感，视觉效果很好，被广泛采用在应用界面设计中。

11.彩色渐变图形

黑色渐变图标是运用多种色彩进行渐变，比起红色渐变图形，彩色渐变图形的色调体现更加丰富。多种色彩进行渐变衔接的之后要切记色相的对比，营造空间感。

12.动物局部图标

运用动物局部进行图形设计，可以让元素特性非常显著。比起展现整个动物形象，局部特点展示视觉表现力更强。

13.人体局部图形

利用人体局部作为图形设计元素，比较常见的有眼、嘴巴、手掌、头部等。利用人体的元素进行设计，用户对图形的脆弱度更强，易于传播和记忆。

14.卡通形象图标

卡通形象与动物形象容易混淆，因为这些可爱形象都是基于动物设计演化而来。这里单独提取下来是为了归类一些纯粹以植物造型为设计元素的体现手法。卡通形象设计在应用界面的设计中是十分常用的，很易于对用户产生记忆。

15.拟人化图形界面

通过对接近方形以及构图细腻的图形添加眼睛等元素，可以使整个图形拟人化。给当时冰冷的图形赋予其生命，拥有一定的感情表达，让产品非常亲民，更易于被用户所接受和记忆。

16.从功能服务提炼图形

为了变得清晰的释放产品的某项用途与服务，根据产品的用途服务提取元素进行图形设计也有相当常见的体现手法，如计算器、日历、导航等直接提取相关联的图形元素进行设计，一目了然地释放出产品信息。也可以从产品服务内容入手进行提炼，如教育类产品，提取学士帽为元素进行设计。

17.渐变色背景图标

渐变色背景的利用越来越遭到设计师追捧，相对于单色的背景视觉表现力非常丰富，整体色调给人通透的觉得。渐变色可以是双色渐变，也可以是多色渐变，根据产品的个性灵活地利用。

18.文艺风格图标

文艺风格字体设计搭配淡雅、复古、简约，适合具有文艺风格类的产品。设计方向为时尚的图形组合以及文艺风格的字体设计为主，图标整体留白较多，配色风格，白色背景居多。如果是白色背景则选用绿色、复古色为主。

19.活动氛围图标

对应用按钮进行特定的活动氛围包装。会保留原来的图形面貌，进行整体的气氛烘托，以突显购物火爆的画面感。

20.游戏角色图标

游戏类应用界面设计必须设计师具有较强的具象图标设计功底，设计方向主要有：游戏角色、纯文字、道具或标志、明星头像、辅助图形或元素等。设计体现力必须颜色鲜艳、角色表情和动作夸张、设计精巧有复古等。

IOS启动按钮keyline线规范：

苹果官网会给ProductionTemplates文件，我们只应该使用1024px*1024px这个型号进行开启图标的设计，把设计好的的开启图标放在文件里的智能对象的图层里，这个之后你会看到所有的尺寸的图标都会换成我们做好的开启图标。

此处提醒一下，虽然我们看到的iOS的字体是个弧形矩形，但是机上它并不是标准的圆角方形，而是某些连续曲线。但我们很难肉眼地断定区别，因此并不用纠结它的倒角，按照直角梯形的宽度进行绘制就好。

Android启动按钮keyline线规范：

创安卓MaterialDesign要求的基本型号说48dp，但这是1:1的尺寸，也是原始长度，而绘制时要求是基础尺寸的400%，也就是192dp，与之相对应的网格基准由1px变为4px。通过维持此比例，对原始图像所做的任何修改都将按比率放大或缩小，从而在比率值返回到100%（48dp）时保留锐边并恰当对齐。

图标网格为图形元素的一致但灵活的定位建立了确立的规则。关键线颜色基于网格，通过使用这种核心形状成为基线，您可以在整个产品界面中保持一致的视觉比例。这些关键线颜色使用预设标准：圆形、正梯形、矩形、正交线和对角线。它们统一了产品界面，并在网格上保持一致的位置。

四、功能按钮1.单色线性图标

风格简洁、外形简单，具有强烈的辨识性，在听觉感知上轻松、干净。

2.双色线性图标

更具体现力，细节更丰富，结合样式的叠加、对比、互补增强了界面的层次感和丰富度。

3.不透明度线性图标

不透明度的叠加和差异，提升图标的层次感和空间感，降低图标的压迫性。

4.渐变线性图标

渐变线性带出按钮的细腻，结合「不同深度」或「不同饱和度」的差异，让图标更具备细节和层次。

5.单色面+点缀色图标

外形使用统一的色调，结合界面的不同属性感知使用不同的色调进行点缀；或使用不同形状作为主色，黑白作为点缀色。

6.双色图标

通过对比色、邻近色的配色营造整体的图标氛围，提升了界面的层次和丰富度，双色的表达也带来了图标的创意性。

7.渐变图标

微弱的渐变提升图标的撞色，渐变的方向会影响整体界面的视觉效果，因此可以按照不同设计的还要调整。

8.不透明度/灰度/饱和度变化

让单色图标变得非常具有层次感和空间感，设计细节非常丰富，降低了彩色面性图标的厚重感。

9.不透明度/弧度/饱和度变化+渐变

渐变设计强化了面形字体的气质，从形状上带有一定的丰富度，在渐变的基础上，还可以对界面做底色的差别化，让图标更有层次感。这类图标被应用在UI界面的列表中以及底部入口的位置。

10.颜色叠加穿透

图标透明叠加之后形成了交织的负形，叠加起来第三个面，整体设计仍然维持扁平化，但却多了一份层次感，并降低了界面的细节。

11.渐变层次叠加

整体效果与不透明度变化较为接近，通过渐变的厚薄差异，使得颜色的衔接处发生了明暗对比，因此图标也具备了厚度和层次感。

12.毛玻璃图标

利用背景模糊的效果，单从视觉上与透明度变化以及色彩叠加相比都更具备空间感一点，图标具有较强的设计感。

13.轻质感图标

与渐变层次叠加相似，区别在于色彩非常丰富，利用多个线条，多种色彩以及多视角的渐变及阴影，整体色调偏向插画风和渐变质感，视觉上更接近于立体图形，整体色调非常倾向绚丽缤纷的色调风格，质感和细节非常丰富。大多数用在品类区，与常规的单色图标相比，需要更具备吸引力。

14.轻拟物图标

核心基础和拟物设计一致，省略了更多复杂的细节，重点放在光影的表达上，高光和阴影都十分到位。

15.写实图标

零几年一几年的之后，直接体现现实、投射现实，方便用户看一眼就明白设个功能以及这个按钮是干嘛的，后来由于显示器的分辨率跟不上视觉设计 英文，慢慢风格变为扁平化，最近几年又迅速兴起，最典型的就是Apple的Mac平台上的图标。

16.2.5D图标

建立在轴测图的基础上，XYZ轴，具有立体透视的觉得。

17.卡通图标

比较合适固定的用途区/品类区，一般会用在运营位非常多。

18.照片处理图标

常见于生鲜类APP，让食物看起来更真实，更鲜活。

19.装饰形状填充图标

黑白线+品牌色，或者两个相同色。

20.整体填充图标

弱面强线的外形识别度较高，更符合图标的表达。

21.线面错位图标

在双色图标的基础上，线和面按照统一的百分比进行缩放，或使用统一/有规律的形状，进行透视和位移的设计，整体展现一种交错叠加的视觉效果。

22.卡通插画图标

整体感觉非常卡通、可爱、二次元。

五、设计规范

图标是任何设计平台或产品体验的重要构成个别。图标就能帮助我们迅速导航，它们与语言无关，最重要的是：它们十分小，所以他们不占用太多地方。图标是良好设计平台的基本构成个别。因此科学严谨的设计完善能帮助我们设计精巧、风格统一的界面。

1.尺寸

ios的删格式4的倍数，安卓的删格式8的倍数。想要做到两端都适配就得采用8的倍数，又由于ios的最小可点击区域是44px，所以48px是非常适合的规格。不是硬性要求，最好要遵行一下4以及8的倍数。

图标绘制基于4848xx4848px画布绘制的线性图标，线宽默认为4px。

不同画面缩放比例使用：

2.图标的keyline线

图标网格为图形元素的一致但灵活的定位建立了确立的规则，Keyline形状是网格的基础。通过使用这种核心形状成为指导，您可以跨平台图标保持一致的视觉比例。

3.图标关键图形

图标栅格用于界面元素绘制的参考并帮助构建清晰的内容轮廓边界。关键线有助于推动图标统一性，简化设计过程中比重调整成本。绘制小图形必须参照小正圆形的Keyline。

4.图标的拐角

1）直角拐角

当基础图形为满容器正圆形时，建议使用3X圆角。当基础图形为满高（宽）矩形时，建议使用2X圆角。当基础图形为较小（大于1/2宽高）矩形时，建议使用1X圆角。

2）非直角拐角

非直角依据图标场景，通常状况下无论视角，默认均为1X圆角；特殊弧度的曲线“拐角”情况除外，根据界面设计必须进行单独考虑。

5.图标区域–封闭和非封闭

封闭区域，由闭合曲线组成的为封闭区域，可以进行独立颜色填充。

非封闭区域，由非闭合曲线组成的为非封闭区域，原则上是不能进行独立的颜色填充。

封闭区域为曲线图案且有相交直线时，原则上是不能进行独立的颜色填充。

6.图标组成–线段和端点

为确保风格的整体一致性，图标所有直线端点默认均应为与直线同宽的斜角端点；一般状况下线段端点和可编辑节点坐标以整数坐标为佳。

默认基于48dp画布描绘的线性图标，线宽默认为4dp；无论直线和曲线在任何之后均维持一致线宽。

7.图标绘制规则

当直线与曲线相交甚至与直线非平行相交时，线段末端用圆头；当线段与直线平行相交时，线段末端用方头；当圆点的长度与线宽一样时，圆点用图形描绘，不用线段。

当圆形和矩形在高于16px时建议用图形绘制，不要用线。

8.图标中的倾斜视角

图标中的倾斜视角应为45的倍数，保持与Keyline中的对角线或十字垂直相交线保持平行关系。

若是圆形外框，倾斜视角也可以与圆形的对角线或十字垂直相交线保持平行关系。

角度为45°、30°和60°的对角线比13.7°或81°等不均匀角度的对角线看上去更锐利。

9.图标断口与间距

内部构架与外框的宽度不得大于线宽；外部元素之间的宽度不得大于线宽的2/1px。

外形框的端口尺寸梯度：4px、8px、12px，建议尺寸为4的倍数。

10.图标风格变换

图标的在特定规律下允许不同风格之间的变换，分别为线性风格（默认）、填充风格、混合风格、多色混合风格。

11.命名规则

科学和高效的命名规则才能视觉设计 英文，帮助我们迅速定位到自己制作的图标，并且帮助研发降低命名时间，加快团队协同效益。切图命名可以根据「业务_类型_功能_大小_状态」的格式，最好使用英文。

12.页面或功能中英文对照表

13.UI模块

六、图标设计的判定标准

我们将要了解了图标的基本理论，那我们怎么设计出一个好的图标呢？如何看我们设计的图标是否符合产品呢？以下我们将从4个方面进行认识，什么才是一个好的图标。

1.识别性

设计师们有时会更加侧重形式，忽略了原本的功能，导致界面难以识别，这打破了它最重要的图形意象属性–图标的传达意义功能需要放在首位。

图标是一个对象或动作的视觉表现。如果针对用户而言，这个界面含义不明确，该图标就马上失去它的实用价值，并作为一个视觉干扰。在界面设计中，我们需要确保图形是简单、严谨、清晰、边缘干净清爽的，这是提高产品界面品质感的一个重要并且基础的个别，而不是过度地讲求流行的视觉样式和炫技。

达到基础水平以外，在图标中我们还可以借助融入品牌信息、有趣的细节使图标更有打动力，提升顾客对产品/品牌的好感度。

图标设计模式的本质是减到最简形态–简化界面是出于减轻学习曲线的须要。设计应保证如果图标在小厚度更具备可读性和清晰度，所以精心设计的图标应该无法迅速识别，一目了然。

2.规范性

我们必须确保每位图标的视觉大小的一致性，图标栅格用于界面元素绘制的参考并帮助构建清晰的内容轮廓边界。关键线有助于推动图标统一性，简化设计过程中比重调整成本。

3.统一性

在绘制一整套图标时候，统一性就相当重要，不要在一整套图标中混入不同色调的式样，风格一致性将帮助客户辨识图标并理解他们具备同等重要性或状况。

界面中的按钮通常是成系列的设计，除了视觉样式和特点保持一致以外，在同一产品内，同样的用途和信息图标应也维持一致的形态，避免用户造成疑惑。图标的统一性上可以从线条的厚薄、颜色、圆角、倾斜视角方面进行检查。

4.呼吸感

呼吸感的意思就是适度留白。不管是在做图标还是做界面，适当的留白可以突显主体，让空间更有张力，更具有可看性。图标的相邻元素之间的空间不应太小或在整体中不一致。定义最小间隙并将其保留在任何地方以防止轮廓“粘连”。

七、总结

图标‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍设计是设计师必备的素养，图标绘制看似简单，要做好却并不容易，好的图标设计虽然能帮助客户更高效地缓解问题，还能帮助产品和品类形成差别化，非常考验设计师们的细节，不过UI设计处处充满细节，想要自己的界面非常细腻，就不要忽视每一个可以提高的点。

以上就是分享的图标基础知识的大个别内容了，图标本身是一个非常大的范围，文中常常有众多不深入的内容，欢迎大家总监们的指教。最后感谢你们阅读，希望现在的这篇文章才能帮到你。

附录·参考文献

《MaterialDesign》

《AppleDeveloper》

《Historyoficons》

《Anoralhistoryofthehamburgericon》

《Hopefully,theUltimateGuidetoanInterfaceIconSet》

《设计师必看的图标设计手册》

本文由郝小七指导

本文由@明非原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。