移动App图标的
基本概念及设计方法
本章目标
本章素材下载
完成本章内容以后，您将：
了解移动UI设计的相关概念。
熟悉移动UI三大操作系统。
熟悉移动UI设计的常用软件。
熟悉移动UI常见存储格式。
了解与尺寸相关的术语概念和标准。
掌握图标的概念、分类、规范和设计方法。
请访问课工场UI/UE学院：kgc.cn/uiue
（教材版块）下载本章需要的案例素材。
第1 章
本章简介
本章主要讲解移动UI 设计的相关概念以及 App 图标的基本概念、设计规范和设计方 法等基本知识，从各专业名词剖析开始引导学员逐步步入移动UI 界面设计的殿堂，对移 动UI 界面设计有一个全新的认识，为以后的移动端界面设计工作打下坚实的基础。
本章中的名词讲解比较详细，方便学员快速理解和掌握。
理 论 讲 解
1.1 移动 UI 设计的相关概念
UI 是英文 User 和 Interface 的缩写，其本意是用户界面。UI 设计是指建立在用户体 验、人机交互基础之上对各种软件、电子通信设备、应用及网站等界面的设计。其目的不 仅能够让用户在与界面交流的过程中通过技术功能的实现与视觉、感觉之间找到完美的平 衡点，以适应用户的最终需求，同时还应遵循友好、易用、可识别性等原则让软件变得有 个性、有品味，让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
如今，用户界面无所不在，它已经融入到了人们的生活、工作和学习当中，从移动电 话、平板电脑到工作中必不可少的PC 甚至汽车、家电等。在飞速发展的电子产品中，界 面设计的工作越来越被重视起来，例如图1.1 所示的各类应用的 UI 界面。
图1.1 各类应用的 UI 界面
参考视频 移动端UI 导学
第 1 章
第 2 章
第 4 章
第 6 章
第 8 章
第 9 章 第 3 章
第 5 章
第 7 章
图标的基本概念及设计方法
第 10 章
第 12 章 第 11 章
1.2 移动 UI 三大操作系统
目前应用在手机上的操作系统主要有Symbian（中文译为塞班）、Windows Phone（6.5 之前的版本为Windows Mobile）、Android（中文译为安卓、安致）、iOS（iPhone OS）、
Black Berry（中文译为黑莓）、Bada（仅适用于三星）等。Symbian 逐渐没落，Windows Mobile 退出市场，Android、iOS、Windows Phone 被公认为热门的三大手机操作系统，
它们都有各自的特点，下面就对这三大手机操作系统进行介绍。
1.2.1 Android系统界面
Android 一词的本意是指“机器人”，中文名称为“安卓”或“安致”，是一个基于开 源代码的Linux 平台衍生而来的操作系统。最初由一家小型公司创建，后来被谷歌收购。
该平台由操作系统、中间件、用户界面和应用软件组成，是当下最流行的一款智能手机操 作系统。
Android 的显著特点在于它是一款基于开放源代码的操作系统，Android 平台提供给 第三方一个十分宽泛、自由的环境，不会受到各种条条框框的阻扰 ：厂商、开发者、用户 可以对界面进行美化，可想而知会有多少新颖别致的软件诞生。如图1.2 所示为 Android 操作系统界面。
图1.2 Android 操作系统界面
1.2.2 iOS系统界面
iOS 是由苹果公司开发并应用于 iPhone 手机、iPod touch、iPad 等手持设备的操作
参考视频 移动App 图标入门
系统。相比其他智能手机操作系统，iOS 系统的流畅性、完美的优化及安全等特性是其他 操作系统所无法比拟的，同时配合苹果公司出色的工业设计一直以来都以高端、上档次为 代名词。
iOS 系统的界面从最早的拟物化设计开始到 iOS 7 之后秉承的扁平风格，一直都是 引领界面设计流行趋势的风向标。它的这种扁平风格不仅体现在界面设计上，也同时体 现在产品的交互与用户体验上。简单、容易上手的操作体验更多的是为了方便用户使用，
iPhone 之所以用户群覆盖各个年龄层段，是因为即使没有用过 iPhone 的人也可以很快上 手。iOS 的所有启动图标都位于桌面上，更加便于查找和操作，同时所有图标都采用同样 的尺寸和样式，看起来更加整齐。
但是由于iOS 采用封闭源代码开发、标准化规范严格，所以在拓展性上要略显逊色。
如图1.3 所示为 iOS 操作系统界面。
图1.3 iOS 操作系统界面
1.2.3 Windows Phone系统界面
Windows Phone（简称 WP）是微软发布的一款移动操作系统，由于它是一款十分年 轻的操作系统，所以Windows Phone 相比其他操作系统而言有桌面制定、图标拖拽、滑 动控制等一系列前卫的操作体验。其主屏幕通过提供类似仪表盘的体验来显示新的电子邮 件、短信、未接来电、日历约会等，让人们对重要信息保持时刻更新。它还包括一个增强 的触摸屏界面（更方便手指操作）和一个最新版本的IE Mobile 浏览器。史蒂夫 - 鲍尔默
（微软公司前首席执行官兼总裁）表示 ：“全新的Windows 手机把网络、个人电脑和手机 的优势集于一身，让人们可以随时随地享受到想要的体验。”
iOS 相比，但是正是因为年轻，
第 1 章
第 2 章
第 4 章
第 6 章
第 8 章
第 9 章 第 3 章
第 5 章
第 7 章
图标的基本概念及设计方法
第 10 章
第 12 章 第 11 章
所以此款操作系统有很多新奇的功能和操作，同时也是因为源自微软，所以在与PC 端和 Windows 操作系统的互通性上占有很大优势。
与iOS 和 Android 不同，WP 的桌面图标更加突出信息的展示，桌面上的大方块图标 是它的招牌设计（活动瓷片），它可以动态地显示软件的更新信息，例如人脉（通讯录）
可以滚动显示联系人的头像，FoxNews 如果开启这个特性可以推送最新新闻，如此设计 可以让用户在第一时间了解应用的动态。当然，WP 界面也有其局限性 ：①对文件夹管理 支持不完美；②主界面图标占用空间过大。如图1.4 所示为 Windows Phone 操作系统界面。
图1.4 Windows Phone 操作系统界面
1.3 移动 UI 设计常用软件
UI 界面设计中常用的软件有 Adobe 公司的 Photoshop 和 Illustrator、Corel 公司的 CorelDRAW 等，在这些软件中以 Photoshop 和 Illustrator 最为常用。
1.3.1 Photoshop
Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一。它的应用领域涉及图 像编辑、美术创意、广告设计、出版印刷等各个方面，是集图像扫描、编辑修改、图像制 作、广告创意、图像输入和输出于一体的图形图像处理软件。
如图1.5 所示为 Photoshop 设计的界面效果。
图1.5 Photoshop 设计的界面效果
1.3.2 Illustrator
Illustrator 是 Adobe 公司推出的专业矢量绘图工具，是出版、多媒体和在线图像的 工业标准矢量插画软件。作为一款非常好的图片处理工具，Adobe Illustrator 广泛应用于 印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面制作等，也可以为 线稿提供较高的精度和控制，适合于任何小型设计到大型的复杂项目。如图1.6 所示为 Illustrator 设计的界面效果。
第 1 章
第 2 章
第 4 章
第 6 章
第 8 章
第 9 章 第 3 章
第 5 章
第 7 章
图标的基本概念及设计方法
第 10 章
第 12 章 第 11 章
注意
1.3.3 CorelDRAW
CorelDRAW Graphics Suite 是加拿大 Corel 公司开发的图形图像软件，是集矢量图 形设计、页面设计、网站制作、位图编辑、印刷出版、文字编辑处理和图形高品质输出于 一体的平面设计软件，深受广大平面设计人员的喜爱，目前主要在广告制作、图书出版等 方面得到广泛的应用。
它包含两个绘图应用程序 ：一个用于矢量图及页面设计，一个用于图像编辑。这套绘 图软件组合带给用户强大的交互式工具，使用户可以创作出多种富于动感的特殊效果及 点阵图像即时效果，在简单的操作中就可以得到实现——而不会丢失当前的工作。通过 CorelDRAW 的全方位设计及网页功能可以融合到用户现有的设计方案中，灵活性十足。
该软件提供的智慧型绘图工具以及新的动态向导可以充分降低用户的操作难度，允许用户 更加容易精确地创建物体的尺寸和位置，减少点击步骤，节省设计时间。如图1.7 所示为 CorelDRAW 设计的界面效果。
图1.7 CorelDRAW 设计的界面效果
对于目前流行的UI 界面设计，由于没有具体针对性的专业设计软件，所以大部分设 计师会选择以上三款软件来制作UI 界面。
CorelDRAW因为功能强大和界面友好，一直以来在标志制作、模型绘制、排版 和分色输出等诸多领域都能看到它的身影，但是由于它与Photoshop和Illustrator不是 一家公司的软件，所以在软件的互通性上稍差。
1.4 移动 UI 常见存储格式
在日常生活中存在有多种不同类型的图片文件格式，不同格式的图片文件所呈现出来 的视觉效果不同。在UI 设计过程中，常用的格式主要有以下 3 种 ：JPEG、GIF 和 PNG。
1.4.1 JPEG（.jpg）
JPEG 是一种位图文件格式，支持上百万种颜色，压缩比相当高，而且图像质量受损 不太大，适合于照片。因为此格式的文件尺寸较小、下载速度快，目前各类浏览器均支 持这种图像格式，它成为网络上最受欢迎的图像格式，但是不支持透明背景和分层图像。
分辨率300 像素的 JPEG 图像可以印刷使用，但是经过压缩后（分辨率为 72 像素）的 JPEG 图像一般不适合打印，在备份重要文件时也最好不要使用 JPEG 格式。
1.4.2 GIF（.gif）
GIF 文件的数据是一种基于 LZW 算法的连续色调的无损压缩格式，压缩率一般在 50% 左右，它不属于任何应用程序。因其体积小、成像相对清晰而大受欢迎，几乎所有 相关软件都支持它。它支持背景透明显示 ；可以将单帧的图像组合起来轮流播放每一帧而 成为动画 ；支持图形渐进，可以让浏览者更快地知道图像的概貌 ；支持无损压缩。GIF 格 式的缺点是只有256 种颜色，这对于高质量的图像来说是不够的。
1.4.3 PNG（.png）
PNG，一种新型 Web 图像格式，结合了 GIF 的良好压缩功能和 JPEG 的无限调色板 功能。PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位 ；存储彩色图像时，彩色 图像的深度可多到48 位，并且还存储多到 16 位的 α 通道数据。它是网页中的常用格式，
支持背景透明显示，相同图像相比其他两种格式体积稍大。如图1.8 所示是 3 种不同格式 的显示效果。
第 1 章
第 2 章
第 4 章
第 6 章
第 8 章
第 9 章 第 3 章
第 5 章
第 7 章
图标的基本概念及设计方法
第 10 章
第 12 章 第 11 章
1.5 尺寸相关的术语概念和标准
大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android 系统的移 动 设 备， 你 会 听 到 很 多 种 分 辨 率 ：480×800 像素、480×854 像素、540×960 像素、
720×1280 像素、1080×1920 像素，而且还有传说中的 2K 屏。近年来 iPhone 的碎片化 也加剧了 ：640×960 像素、640×1136 像素、750×1334 像素、1242×2208 像素。
2K分辨率指的是屏幕分辨率达到了一种级别，指屏幕横向像素达到2000以 上，是国内数字影院的主流放映分辨率。2K分辨率有多种类别，最常见的影院2K 是指2048×1152像素。中国品牌vivo智能手机在2013年推出世界上第一款分辨率 达到2K级别的手机，其分辨率为Quad HD的2560×1440像素，高于通常意义上的 2K（2048×1152像素），是HD屏幕分辨率的4倍，是2013年度其他旗舰手机1080P 屏幕的1.8倍。最新一代低温多晶硅工艺的2K屏幕不但具有高分辨率、高色彩饱和 度、成本低廉等特点，还可以降低电力消耗。
HD：通常把物理分辨率达到720p以上的格式称为高清，英文表述为High Definition，简称HD。
Quad HD：一种显示分辨率，分辨率为2560×1440像素，是普通HD
（1280×720像素）宽高的各两倍，面积的4倍。
不要被这些尺寸吓倒。实际上大部分的App 和移动端网页在各种尺寸的屏幕上都能 正常显示，这说明尺寸的适配问题有很好的解决方法，而且有规律可循。
1.5.1 屏幕尺寸
屏幕的物理尺寸是以屏幕的对角线长度作为依据，并且以英寸为单位。现今主流的手 机屏幕尺寸主要有3.5 英寸、4.0 英寸、4.7 英寸、5.0 英寸，更大的有 6.0 英寸、7.0 英寸等，
而平板电脑常见的屏幕尺寸主要有7.0 英寸、8.0 英寸、9.7 英寸、10.1 英寸等。
英寸：是英国标准长度单位，1英寸≈2.54厘米；寸是中国特有的长度单位，3 寸=10厘米，1寸≈3.33厘米。
1.5.2 分辨率
分辨率是指显示器所能显示的像素数量，直接决定了图像的精细程度。像素数量越多 画面越精细，分辨率就越高。
可以将图像想象成一个棋盘，每一个格子就是一个像素，每个像素只能包含一种颜色，
成千上万的不同颜色的格子组合起来，就能表现出色彩过渡细腻、逼真的图像。现在某些 平板电脑的屏幕分辨率已经高达2048×1536 像素，号称已经超出了人类眼睛的观察极限，
这类设备的屏幕相当清晰。如图1.9 所示为分辨率不同的显示效果。
注意
注意
图1.9 分辨率不同的显示效果
1.5.3 屏幕密度
屏幕密度主要分为低密度（Ldpi）、中密度（Mdpi）、高密度（Hdpi）、特高密度（XHdpi）
和超高密度（XXHdpi），如图 1.10 所示。
图1.10 屏幕密度 iOS 的尺寸单位为 pt，Android 的尺寸单位为 dp。
px（Pixels）：对应屏幕上的实际像素点。
dpi（Dots Per Inch）：每英寸所能印刷的网点数。
in（Inches，英寸）：屏幕物理长度单位。
mm（Millimeters，毫米）：屏幕物理长度单位。
pt（Points，磅）：屏幕物理长度单位，1/72in。
dp（与密度无关的像素）：逻辑长度单位，比如在 160dpi 的屏幕上，1dp=1px=1/160in，
随着密度变化，对应的像素数量也变化。
