上期为大家科普了
UI设计的通用原则
本期来为大家科普一下
UI的图标设计
对设计师来说也是非常重要的一环
感兴趣的请关注我们
一.图标概念设计
1.图标的定义：
图标是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。
图标的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途
图5-1图标设计
优点：
易于被快速识别，便于记忆，直观性产生国际通用性，信息量大，图标具有形、
意、色等多种刺激，传递的信息量大，抗干扰能力强。图标大小可调，表示视觉
和空间概念，便于布局美观
二.图标的设计规范
图标设计的标准：功能寓意的识别性，风格的统一性是一个图标设计好坏的重要
标准。
2.图标的六个一致性：
线宽一致，体积感留白一致，倒角圆角一致，角度一致，色彩一致，复杂度一
致，光影一致。
如果是导航图标，最好是设计剪影和对应的面性的2套对应的图标。
图片示例：图5-2、图标的设计规范
3.图标的常见风格种类：
像素图标、剪影图标，扁平图标，线性图标、MEB风格图标、微质感图标、拟物
图标、2.5D图标、3D图标、手机系统主题图标，运营节气皮肤图标，默认缺省提
示图标，快捷入口图标，运营入口图标、节日装饰性图标等。
图片示例：图5-3 图标的常见风格种类
图5・2图标的设计规范
图5-3图标的常见风格种类
一般来说，页面上空间大，图标少的话，图标可以设计得复杂且尺寸大一些，例
如图一，如全屏导航类，或者缺省提示类反正，如果在一个非常密集的空间里，
如图二，类似于个人中心，侧滑列表等图标网格，一般一类图标的尺寸是一致
的，这样以像素或者自定义尺寸为1个单位的话，可以把图标分成N个格子，为了
让正方，圆，长方，或者不规则图形的体积感相等，我们一般会在留白区域内框
定一个适合于图标表现的区域，尽可能以这个区域为图标的设计主体。
a. 体感面积：为保持一个产品中一套icon的几种样式保持统一体块大小平衡图
b. 制定了：圆形、方形、矩形区域的布置规范。图标区域确保处于上述图形范
图5-4 图标网格
尺规绘图，图形设计尽可能以圆和直线来设计，保持图形的饱满规则性。
图5-5尺规绘图
三.手机系统及APP图标设计规范
手机系统主题图标一套，包括拨号，短信，浏览器，日历，时钟，邮件，计算器,
联系人，音乐，视频，图库，相机，文档，下载，应用中心，设置，天气，个性
化中心,游戏中心，录音，地图，便签，画板，安全中心，阅读，系统升级这些功
图5-7手机系统主题图标一套
图5-7手机系统主题图标一套
因为安卓手机系统有不同的平台，每家平台和型号的图标尺寸不同，所以如果没
确定的平台的话，可以先做尺寸256*256像素的。
图5-8安卓手机系统尺寸
图5-8安卓手机系统尺寸（續）
哪怕是官方的ANDROID扁平风格的图标，每个版本也是会有变化的，从最初的不
规则扁平图标一折痕扁平图标一长投影扁平图标，所以我们即时在设计扁平图标
的时候，也需要考虑到微小的质感变化，和色彩细节尺寸的统一与创新。
1.图标的造型尽量以圆和直线的尺规绘图标准去布尔生成造型，造型以体正饱满识
别性强，体积感一致为佳，随意的不规则的粗细不一的图标设计为差。
2.图标的光影尽量方向一致，风格一致，阴影羽化度一致。
3.图标的角度一致，透视一致
4.图标的配色方案一致
1.I0S系统已经发展了很多代了，目前以苹果APP启动图标设计为主。早期苹果图
标以玻璃效果为主，背板的圆角也从小变大，越圆的圆角越有亲和力。
2. IOS图标有一套栅格系统如下，一共有3个圈，建议主要图形不要超出最外圈，
主要设计在靠外的2个圈中进行设计，核心圈可以做挖空或者核心造型设计。以便
于所有第三方APP放在主菜单中也大小体积感和谐辨识度清晰。
图5-10 IOS图标栅格系统
3.IOS的图标尺寸模板
4.一套启动图标常见有6类视觉配色表现形式，如下
图5-11彩色面性快捷入口图标
图 5-11彩色面性快捷入口图标（续）
图5-12双色线面性快捷入口图标
图5-13线性整体页面图标
今天的内容就到这里，我们下期再见！
更多精彩内容，尽在《UI设计精品必修课》
点击左下角阅读原文可直接购买
