第2章 图标设计了解图标的类型和设计风格掌握图标的设计规范，能使用网格绘制图标掌握功能型图标和桌面型图标的设计要点掌握制作图标的思路和方法学
习 目 的目录 / CONTENTS初识图标功能型图标桌面型图标本章实训2.1 初识图标2.1.1 图标类型应用于APP界面内
，分为功能图标和分类图标。功能型图标 功能图标常用于页面中的标签栏和导航栏，它们参与用户的交互，是页面不可或缺的组成部
分。 分类图标位于页面的内容区域，是APP 分类页面的入口，尺寸更大，表现形式也更丰富，其目的是吸引用户目光，装饰页面
，引导用户。2.1 初识图标2.1.1 图标类型也称系统图标、启动图标、APP图标，它位于应用商店或移动设备桌面，是APP的门面
。 桌面型图标要具有清晰的可识别性，区分于其他图标的独特性和美观性反映APP特点，能与用户建立情感连接，给用户留下良好的第一印象。
2.1 初识图标2.1.2 图标风格 多为单色渐变，颜色过渡清新自然，是目前的主流设计风格之一， 如下图所示。除用于
图标外，渐变风格可使用的场景非常多，如APP中的背景图、按钮等。渐变风格剪影风格 特点是简约、概括，视觉识别度良好，设
计感强，常被用于 APP 的功能型图标中。剪影图标可分为线性和面性两种，线性为未选中状态，面性为选中状态。如下图所示的QQ功能图标
。2.1 初识图标2.1.2 图标风格 通常会以纯色作为图标主体背景，该风格色彩对比度大，视觉冲击力强，通过长投影突
出主体，从而创造鲜明的层次感和空间感，常用于APP 页面中的分类图标，如下图。 特点是可爱，富有亲和力，设计简洁而精致
，视觉效果突出，但风格小众，使用范围比较局限，常用于女性或二次元（二维，二次元源于日语）APP中。 如下图。长投影风格卡通风格2.
1 初识图标2.1.2 图标风格 层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计。这类图标具有一定的立体感，能
给人轻盈、简洁、精致的感觉，如下图所示。 iOS 7以前，拟物风格是UI 设计的主流，这类图标的特点是通过细节和光影还
原现实物品的造型和质感，能给用户极强的代入感，快速领会图标表达的意图，如下图所示。轻质感风格拟物风格2.1 初识图标2.1.3
尺寸相关概念 移动设备的更新速度很快，市场上的机型越来越多，导致同一页面往往需要适配多个不同尺寸的机型。图标是页面中的
重要元素，因此了解尺寸相关概念对于图标设计来说很有必要。1．屏幕尺寸 屏幕尺寸是以屏幕的对角线长度为依据，以英寸（1英
寸≈2.54 cm）为单位来表示的。 目前市场上的手机屏幕尺寸主要有 3.5 英寸、4.0英寸、4.7英寸、5.0英寸
、5.5 英寸、6.0 英寸和 7.0 英寸等，其中 4.7 英寸（ iPhone 6/7/8）的手机是主流机型。2.1 初识图
标2.1.3 尺寸相关概念2．屏幕分辨率 屏幕分辨率表示显示器所能显示的像素数量，分辨率越高，画面越精细，通常用屏宽像
素×屏高像素来描述屏幕分辨率。 以 iPhone 7 的屏幕尺寸为例，其屏幕宽为 750 像素，高为 1334 像素，
因此其屏幕分辨率为 750×1334 像素， 页面中图标尺寸为120×120 像素，包括标签栏的图标在内，一共可容纳 28 个图标
（7 排 4 列）。2.1 初识图标 2.1.4 图标设计规范 图标的外观取决于其功能、用户和外在环境等多种因素，为
了保证每个图标的视觉大小统一，可以使用网格规范进行制作。在网格规范中：功能型图标设计2.2 功能型图标设计2.2.1 功能型图标
设计要点设计功能型图标时应注意以下 3 点 共性是保证一个APP 风格统一的关键。除了要风格统一外，还可为图标添加相同
的细节，如统一为图标作断线或圆角处理。 识别性是图标设计的关键。选择合适的隐喻，会让图标更容易被用户接受。
原创性是 APP 长远发展的前提。一般的设计者总是热衷于素材网站中的素材 图标，使用它们省时省力，下载即用，但这会涉及到版权问
题，还会使产品自身失去个性。2.2 功能型图标设计2.2.2 案例实战——剪影风格功能图标设计 本案例通过绘制如下图所
示的剪影风格信息图标，学习剪影风格图标的一般绘制流程。剪影风格图标分为线性和面性两类，设计分3 步：作品展示设计思路① 考虑符合文
案内容的形状，找到最为贴切的隐喻。② 绘制参考线背板或使用参考线素材，方便统一视觉尺寸。③ 线面切换类型的图标，应先制作线性图标，
将其复制后再直接由线性修改为面性，以确保图标外观相同。2.2 功能型图标设计2.2.3 案例实战——长投影风格分类图标设计
本案例通过绘制如下图所示的长投影风格相册图标，学习长投影风格图标的一般绘制流程。本案例是一款手机绘图APP 中的分类图标，
该图标简洁大气，采用照片作为隐喻。色彩运用和谐，加上对比强烈的投影，很好地突出了图标含义。制作时主要用到了形状工具、锚点工具、钢笔
工具和剪贴蒙版等相关工具与知识。作品展示设计思路2.2 功能型图标设计2.2.4 案例实战——渐变风格分类图标设计 本
案例通过绘制如下图所示的渐变风格生活服务图标，学习渐变风格图标的一般绘制流程。本例中要绘制的图标是一款医疗健康APP 主页面中的分
类图标。该图标以楼房剪影作为主体，用象征冷静、理性的蓝色渐变作为背景，让用户明确图标意义的同时，产生信赖的心理感觉。该图标在制作时
主要用到了布尔运算和形状工具等相关工具与知识。作品展示设计思路桌面型图标设计2.3 桌面型图标设计 桌面型图标可以
说是APP 的门面，它给用户的第一印象非常重要，用户可以此初步评判 APP 的品质、作用和可靠性等。设计桌面型图标时应注意以下几点
。 2.3.1 桌面型图标设计要点 将照片作为主体直接出现在图标中，会给用户一种敷衍了事的感觉，也会被拒绝上架。
在图标设计中，设计师可以提取照片中的纹理、细节等应用于拟物图标中。 当产品隐喻比较抽象时，可直接使用文字作为图
标的主体， 如右图所示。 注意：图标主体文字不宜超过4个，否则会降低图标识别度。避免使用照片：避免运用大量文字：2.3
桌面型图标设计2.3.1 桌面型图标设计要点 除了要体现 APP 的功能外，还要保证图标是独一无二的。
Pinterest 和 Path 这两款APP 有很多共同点，如主色都为红色，英文首字母相同，图标都用字母“P”作为主体，导致它
们图标极为相似，新用户有时难以分辨。 图标应表意明确，让用户第一眼看到就明白它是干什么的。例如图标中出现耳机、音符，就
会联想这个APP是关于音乐。 每个颜色都有其自身的象征意义，设计师需要根据产品气质和用户 群体选择合适的颜色，不可为
了博人眼球在图标中加入无关杂色。表意明确： 慎重用色： 图形应具有独特性：2.3 桌面型图标设计2.3.2 案例实战——卡通风格
图标设计 本案例通过绘制如下图所示的卡通风格定位图标，学习卡通风格图标的一般绘制流程。该图标是卡通风格手机主题中的“
定位”图标。图标以定位符号为主体，图形结构简 单，造型小巧可爱，通过 MBE 风格进行表现。制作图标时应注意遵守网格系统规则，将主
体图形置于网格中，装饰图形可添加到安全空间内。作品展示设计思路2.3 桌面型图标设计2.3.3 案例实战——轻质感风格音乐图标设
计 本案例通过绘制如下图所示的轻质感风格“音乐”图标，学习轻质感风格图标的一般绘制方法。这是一款轻质感音乐图标，选用黑
胶唱片作为隐喻，通过多个形状叠加，组成唱片图形，直观反映了图标含义。 本案例为一款音乐APP 的桌面图标，因此无需使用网格统一图标
的视觉大小。制作该图标时，主要用到了形状工具、滤镜命令和钢笔工具等相关工具与知识，还多次用到了图层样式。作品展示设计思路本章实训2
.4 本章实训实训1——制作剪影风格图标制作联系人剪影图标，如下图所示。 联系人图标以简洁的人物轮廓为隐喻，能让用户
第一时间明确图标含义。制作时应先从线性图标入手，之后再制作面性图标。需要注意的是，本例中线性图标无法直接转换为面性图标，因此制作面
性图标时，需要重新绘制图标形状。案例分析2.4 本章实训实训2——制作长投影风格图标本实训制作画笔长投影风格图标，效果如下图所示。 画笔图标以钢笔剪影为隐喻，通过钢笔轮廓让用户联想到画笔，从而理解图标的含义。案例分析2.4 本章实训实训3——制作渐变风格图标本实训制作优选好物渐变图标，效果如下图所示。 优选好物图标用花边和对勾图形结合，搭配绿色渐变，使用户产生优质、安全的心理感觉。案例分析 |
|
