移动UI交互设计02主题图标设计课件.pptx

1、02 主题图标设计移动UI交互设计2.1 图标设计概述2.2 图标设计流程2.3 图标设计规范目录 CONTENTS2.4 图标设计项目实战2.1图标设计概述图标设计概述我们在使用手机、Pad、智能手表等液晶显示设备的时候，会发现其上有大量的图标，如右图所示。这些图标比文字描述更直观、美观，并能提升软件、功能的可用性，极大地提升了视觉效果。苹果用户体验设计师Mike Stern对于UI和应用图标的重要性这样解释：“用户并不会根据你使用了多少技术，或是整合了多少API（Application Program Interface，应用程序接口），或是你使用的代码有多厉害而去对应用做出评价。他们在意

2、的是你的应用能用来做什么，会给他们带来什么感受。用户期待你的应用能为他们带来直观、美妙甚至不可思议的体验。“2.1图标设计概述图标设计概述图标既可以包含图像，也可以是一个文本、一个LOGO，又或是这些元素的组合。所以，准确地描述图标，它应该是一组具有高度浓缩性、能快捷传达信息、便于记忆的图形。在设计图标的时候，要注意它的美观性和实用性，二者互相兼顾，才能得到最好的设计效果。例如，我们要设计一款关于技能明星的图标，右图所示的两个图标都是设计方案，就辨识度来说，第一个图显然比第二个图表示的含义更正确。52.1.1 图标设计分类按照功能分类，图标可以分为启动图标、应用图标和功能图标，如图所示。62.

3、1.1 图标设计分类按照设计风格分类，图标可以分为剪影图标、扁平图标和拟物图标，如图所示。72.1.2 图标设计原则可识别性原则应该是图标设计中首先应该遵循的原则。就是说，设计的图标要能准确地表达相应的操作，让初次使用该产品的用户能够一看就懂，尽量避免误导性、歧义性。图所示的一组图标，其可识别性原则就体现得特别好，形状简单、效果简洁，甚至不需要汉字释义，就能够清楚地知道该图标所代表的操作。1.可识别性原则82.1.2 图标设计原则由Adobe 公司开发的Photoshop 软件，是业界公认最好的图形图像处理软件之一。如果从图标设计的角度来看这款软件，其图标简洁实用、可识别性高的优点也极为突出，

4、每个工具、命令的图标都清晰地表达了其所代表的操作，值得初学者研究、借鉴，如图所示。1.可识别性原则92.1.2 图标设计原则一组图标会出现在同一个手机的主题中、同一个应用程序中，这种同一性要求这组图标有共性。例如，右图所示的图标，它们的外形一致，颜色的亮度、饱和度一致，所以它们被认为具有共性。2.差异性原则102.1.2 图标设计原则但是，强调共性的同时，不能忽略图标之间的差异性。因为每个图标代表的含义和操作是不相同的，如果过于强调共性，就会让差异性弱化，从而分不清每个图标的区别。如图所示，前面两个图标的相似度过高，差别的区域过小，一旦图标缩小，就会很难辨认，后面两个图标也存在同样的问题。因此

5、，在设计图标时，要有合理的规划，既强调共性，又突出个性，这样才能使其成为一套优秀的设计作品。2.差异性原则112.1.2 图标设计原则设计图标时，过于简单或过于复杂，都不是很合适。如图所示的一组关于“设置”的图标中：l A图标过于简单，几乎看不到图形的变化；l B、C、D 图标虽然有颜色、细节表现等方面的区别，但是都属于能够接受的精细程度，可以表示该图标所代表的操作；l E 图标在细节表现上非常细致、逼真，但是应用到图标设计当中，却显得过于累赘，尤其是当图标尺寸变小的时候，更容易看不清其细节。所以，5 个方案中，B、C、D方案是可取的。3.合适的精细度122.1.2 图标设计原则从上面的分析可

6、以看出，图标的可用性随着精细度的变化过程，是一个类似于波峰的曲线，如图所示，该坐标的横轴表示图标的精细度，纵轴表示图标的可用性。从图中可以看出，当图标的精细度为零时，图标几乎没有可用性，随着精细度的逐渐增大，图标的可用性也会逐渐增强；而精细度过大时，反倒会影响图标的可用性。3.合适的精细度132.1.2 图标设计原则所谓图标的风格，表现为对图标题材选择的一贯性和独特性、对图标主题思想的挖掘，也表现为对创作手法的运用、塑造形象的方式、对艺术语言的驾驭等方面的独创性。对于一套图标来说，如果图标的视觉设计协调统一、选用元素的出处统一，我们就说这套图标具有自己的风格。图标的风格有很多种，在设计图标之前

7、，首先要考虑风格的定位，只有先将风格定位做好，才能着手进行图标的设计与制作。4.风格统一142.1.2 图标设计原则如图所示的两套图标，上面的图标取材于糕点，下面的图标取材于中国古典元素，我们就说它们都有自己统一的风格。4.风格统一2.1 图标设计概述2.2 图标设计流程2.3 图标设计规范目录 CONTENTS2.4 图标设计项目实战2.2图标设计流程图标设计流程图标设计流程172.2.1 确定图标风格图标设计的风格没有固定的形式，也没有所谓的对错，甚至流行的设计趋势会反复，有时流行复古风格，过一段时间又流行现代风格。现在我们使用的手机、Pad 中，图标的扁平化设计成为流行趋势，强调图标的简

8、洁性、寓意性，去除冗余、厚重和繁杂的装饰效果，让图标所表述的功能本身作为核心被凸显出来，如图所示的一套小米手机图标就是典型的扁平化设计风格。182.2.1 确定图标风格在开始设计图标之前，考虑好图标的风格非常重要，这样能够保证在设计每个图标时都能遵循这个风格。2016 年，MBE 风格图标风靡一时，红遍追波、站酷等设计平台，如图所示。MBE 风格是从线框型Q 版卡通画演变而来的，相比没有描边效果的扁平化风格插画而言，去除了里面不必要的色块区分，更简洁、通用、易识别。粗线条的描边起到了对界面的绝对隔绝作用，突显内容、表现清晰、化繁为简。192.2.1 确定图标风格MBE 风格图标的统一性表现在设

9、计手法上，可以尝试在图标的外形上寻求统一。如图所示的两套图标，每套图标的外形都是一致的，在统一的外形中再添加元素对图标进行区分。在设计这种类型的图标时，要注意图标的差异性原则，要能够很容易地辨识出每个图标所代表的含义。202.2.1 确定图标风格图标设计风格统一的另一种常用表现手法就是统一图标设计元素的出处，它们可以选自于同一个时代、同一部电影、同一个环境将这些图标设计成拟物化的图形，也能够带来很好的设计效果。如左图所示的一套图标，灵感来源于西方中古时代，是以当时的物品为原型提取其特征并适当加入新的设计元素设计出来的，其设计过程如右图所示。212.2.2 图标草图绘制在确定了图标风格之后，就可

10、以进行草图绘制了。所谓草图绘制，就是指手绘图标的设计草稿。手绘是一切造型艺术的基础，有利于把握好形体、空间、明暗关系，是图标设计不可缺少的部分。如右图所示即上图的手绘图稿，它是后期电脑制图的基础。222.2.2 图标草图绘制对于设计师来说，手绘的重要性是不可替代的，因为手绘是设计师表达情感、表达设计理念、表述方案结果的最直接的“视觉语言”。不论设计什么项目，初期寻找灵感来源、形成具体设计思路之前，都可借助手绘稿来整理思路、进行创意实现，这种方法速度快、效率高、容易修改。如图所示就是一些草图的绘制效果。232.2.2 图标草图绘制相对于游戏原画设计、建筑设计、工业设计等设计行业来说，图标设计对手

11、绘的要求并不高，更多的是对一些构成原理的运用。在进行图标手绘的过程中，素描的表现手法是基础。用素描的方法表现出图标的造型、结构、透视和明暗关系，就基本可以满足图标的手绘要求了，如图所示。因为篇幅有限，素描的相关知识在这里就不介绍了，有兴趣的读者可以参考相关的书籍进行了解。242.2.3 图标电脑制作常用的制作图标的软件是Adobe 公司开发的Photoshop 和Illustrator，如图1所示。Photoshop 软件主要用于处理位图，用它制作的图像色彩丰富细腻、光影变化流畅、羽化过渡自然，其拥有的功能强大的滤镜和图层样式为图像增添了无穷的变化效果。Illustrator 软件主要用于处理

12、矢量图像，在文字排版、路径造型、路径修改等方面优势突出。如图2所示的两个图标，左侧图标的纹理效果逼真，光影效果变化比较多，用Photoshop 软件来完成就比较合适；右侧图标的效果简单，有一些路径形状的变化，所以可以使用Illustrator 软件来制作。12252.2.3 图标电脑制作我们在作图时，经常会将两个软件结合使用。如图2-22 所示的图标效果，在制作的过程中，整体的形状、大小的变化可以使用Illustrator 软件来实现，渐变、明暗变换则可以使用Photoshop 软件来修饰，两个软件相结合，就可以完成对该图标的制作了。图标的电脑制作部分可以依据前期的手绘草图进行绘制，如果草图绘

13、制得非常精细，可以将手绘图纸扫描或拍照，将照片放到Photoshop 软件中处理后，利用“钢笔”工具勾边、上色、处理效果，则会省去很多时间。262.2.4 主题界面制作手机主题包括整个手机系统的整体风格，它相当于一个程序包，如果更换主题，可能会同时更换个性主题的图标、壁纸、屏保、开关机动画等。在完成图标的设计制作之后，依据不同手机系统的尺寸要求，我们可以进行与图标相配套的主界面、解锁界面、锁屏界面、短信界面、拨号界面等效果图的制作。如图所示就是一套古风主题界面，其整体风格、设计元素、选用的素材都是与图标设计的风格相一致的。2.1 图标设计概述2.2 图标设计流程2.3 图标设计规范目录 CON

14、TENTS2.4 图标设计项目实战282.3.1 系统规范这里所说的图标设计，其实是用于手机和Pad 系统的图标及主题设计。手机系统是指运行在手机上的操作系统。常见的手机系统有iOS、Android、Windows Phone、BlackBerry、Firefox OS 等，对于国内手机用户来说，主要使用iOS 和Android 两种系统，如图所示。苹果公司的手机和数码产品使用的都是iOS 的手机系统，使用Android 手机系统的手机有很多。两个系统的软件开发工具不同、平台不同，其UI 设计的规范也有所区别。就图标而言，iOS 系统和Android 系统的图标大小、命名规范都不相同。292.

15、3.1 系统规范以苹果公司的iPhone 和iPad 为例进行说明，如右图所示。在iOS 系统历来的图标演变过程中，许多看似不明显的变化实际上都在潜移默化中引导着图标设计风格和设计方法的演变。自iOS7开始，苹果图标设计采用扁平化风格并延续至今。1.iOS系统图标制作规范302.3.1 系统规范iOS系统图标的命名与尺寸如下表所示。1.iOS系统图标制作规范后缀后缀适用机型适用机型屏幕密度屏幕密度图标尺寸图标尺寸1xiPhone1-3G320px480px2xiPhone4-8640px960px(iPhone4)640px1136px(iPhone5)750px1334px(iPhone6/

16、7/8)120px120px（APP）1024px1024px（APP Store）3xiPhone Plus/iPad1242px2208px180px180px（APP）10241024px（APP Store）312.3.1 系统规范一般iOS 系统的图标以“Icon1x.png”“Icon2x.png”“Icon3x.png”这样的形式命名，其中1x、2x、3x 可以简单地理解为倍数关系，3x 是1x 的3 倍。例如，我们使用750px1334px（iPhone6/7/8）尺寸做设计稿，那么切图输出就是2x，缩小2倍就是1x，扩大1.5 倍就是3x。最标准的适配方式就是在图标完成后保存

17、3 套图，程序运行会自动选取对应的图片。在设计iOS 系统的图标时，要按照系统对于图标的标准尺寸进行相应的设置和操作。例如iOS 系统中所有图标的圆角效果不是准确的半径值，提交图标时不需要圆角裁剪，而是由系统处理生成的。1.iOS系统图标制作规范322.3.1 系统规范使用Android 系统的设备众多，屏幕的参数多样化，所以进行图标设计时需要考虑屏幕密度和图标大小的问题。同一个图标在高密度的屏幕上要比在低密度的屏幕上看起来小，为了让这两个屏幕上的图片看起来效果差不多，可以采用以下两种方法：一是程序将图片进行缩放；二是为这两个屏幕的手机各提供适应屏幕密度的图片。从效果上比较，前者势必会出现失真

18、、细节缺失等问题，而后者应该是可行的。2.Android系统图标制作规范332.3.1 系统规范为了简化设计且兼容更多的手机屏幕，平台依照屏幕尺寸和屏幕密度进行了区分，如下表所示。2.Android系统图标制作规范屏幕尺寸屏幕尺寸屏幕密度（分辨率）屏幕密度（分辨率）图标尺寸（例）图标尺寸（例）小低（120dpi）36px36px正常中（160dpi）48px48px大高（240dpi）72px72px特大超高（320dpi）96px96px342.3.1 系统规范从表中可以看出，针对不同的屏幕密度需要设计出尺寸有所区别的图标。例如，在1 6 0 d p i 屏幕上的4 8 p x 4 8 p

19、x 的图标，在2 4 0 d p i 屏幕上的大小应调整为4 8 p x（240/160）=72px。也就是说，在设计Android 系统的图标时，可以为表2-2 中的4 种普遍使用的屏幕密度都创造一套独立的图标。然后，把它们储存在特定的资源目录下。当应用程序运行时，Android 平台将会检查设备屏幕的特性，从而加载特定密度资源目录下相应的图标。2.Android系统图标制作规范352.3.2 设计制作规范图标的常用光源有顶光源、面光源和45度角光源3种，如图所示。1.光源方向统一362.3.2 设计制作规范在设计一组图标时，必须保证光源方向是一致的，如图所示。1.光源方向统一372.3.2

20、 设计制作规范将制作的图标上传到系统平台时，会依据平台要求进行裁切。保证图标的主体部分控制在不被裁切的区域，就是所谓的安全区域。例如，小米V5系统主题图标的尺寸要求是136px136px，左图所示的外边深色区域就是图标的裁切区域，而中间浅色的安全区域应该是120px120px。以左图中裁切区域和安全区域的表现方式来观察右图两款图标效果。可以看出，A 图标大小合适，图标的主体都在安全区域内，裁切后不会影响图标的效果；而B 图标显然超出了安全区域的范围，在裁切后就会缺失图标的部分内容，造成图标的不完整，影响整体效果。2.裁切区域和安全区域382.3.2 设计制作规范为了让图标呈现出最优的显示效果，

21、还要避免左图中出现的几种问题，主体过小或过大、主体部分模糊、主体重心偏移等都是不合适的，要根据安全区域调整图标主体所占的比例，效果如右图所示。在图标的设计制作中，还有许多需要注意的细节及表现手法，获得这些实践经验最直接的途径就是大量地临摹与实践。2.裁切区域和安全区域2.1 图标设计概述2.2 图标设计流程2.3 图标设计规范目录 CONTENTS2.4 图标设计项目实战402.4.1 设计风格下面要设计制作一套具有卡通风格的主题图标。设计的元素均来源于右图所示的“小黄人”这一卡通形象，要将这些元素与图标的含义（如电话、相机、短信等）相结合，设计出一款可爱、亲切的手机主题图标。412.4.2

22、手绘图标在确定了主题风格后，进入手绘设计图标阶段，在这个过程中，要发挥想象，挖掘与“小黄人”相关的元素特点，将其与主题图标中各图标的含义联系到一起。例如，“小黄人”最爱吃的香蕉的形状与话筒的外形极为相似，如左图所示，于是我们可以将电话图标设计成香蕉形状，再添加一些元素让其更加形象、生动，如右图所示。422.4.2 手绘图标又如，“小黄人”的眼睛是圆形的，带有金属外框，其形状、特点与收音机的扬声器非常相似，如左图所示，于是我们可以将收音机的扬声器部分用“小黄人”的眼睛来替换，设计出收音机的图标，如右图所示。432.4.3 电脑制作图标的电脑制作是在Photoshop软件中完成的，方法是将手绘的草

23、图拍成照片，再利用Photoshop软件进行描边、上色等操作。442.4.3 电脑制作合理原则（1）打开Photoshop 软件，新建文件，文件的大小为400 px400 px，分辨率为72ppi。（2）打开拍摄的电话图标手绘草图照片，将其拖曳到新建的文件中，电脑制作在此基础上完成，如右图所示。452.4.3 电脑制作合理原则（3）使用“钢笔”工具对草图进行描边，并填充颜色（R：255，G：244，B：92），如图2-40 所示。462.4.3 电脑制作合理原则（4）为增强立体效果，添加“斜面和浮雕”“内阴影”图层样式。“斜面和浮雕”的高光、阴影颜色都选用与香蕉颜色接近的浅黄色和深黄色，目的是

24、不让效果太突兀，具体参数如中图所示，效果如右图所示。472.4.3 电脑制作合理原则（5）依照此方法，制作另一半的香蕉效果，因为方向和角度不同，“斜面和浮雕”“内阴影”的参数可以适当调整，同时添加了“投影”图层样式，投影的颜色也设置为深黄色，具体参数如左图所示，效果如右图所示。482.4.3 电脑制作合理原则（6）再使用“钢笔”工具将香蕉的果柄处填充“黑色黄色”的线性渐变，如左图所示。同时为了增加立体效果，也为其添加了“斜面和浮雕”图层样式，具体参数如中图所示，效果如右图所示。492.4.3 电脑制作合理原则（7）再处理一下左图所示的剩余部分，就可以完成该图标的绘制了。我们将手绘的草图图层隐藏

25、，将图标存储为“png”格式，如右图所示。为了便于以后的修改，建议再存储一个“psd”格式的文件备用。502.4.3 电脑制作合理原则上述即电脑制作图标的方法，在制作的过程中，每个图标因其形状的不同，在处理手法上会稍有不同，但是基本方法是一致的。我们制作了手绘稿中所有的图标效果，并分别进行保存，右图所示为其中一部分图标。512.4.4 主题界面制作（1）桌面壁纸尺寸为1440px1280px，分辨率为72ppi。为了与图标风格一致，在制作壁纸时，选用的设计元素也是与“小黄人”相关的，如左图所示。（2）状态栏的高度为30px，我们在其中填上状态栏中的各个控件，包括时间、信号、电池等信息，如右图所

26、示。1.主题界面制作522.4.4 主题界面制作（3）主界面上的图标大小为136px136px，每个图标下方都会有文字说明，文字的字体可以设置为方正兰亭黑体，文字的大小可以设置为21px 或27px。为了使主界面的搭建标准、规范，建议使用参考线来进行对齐，如图所示。1.主题界面制作532.4.4 主题界面制作下面，我们就结合整体的设计风格，设计一个合理、有趣的解锁方 式。将 锁 屏 的 大 小 设 定 为720px1280px，解锁前的效果如图左图所示。解锁方式是帮助“小黄人”把香蕉拿下来就可以顺利解锁，如右图所示。2.锁屏、解锁界面制作542.4.5 其他界面制作在前面设计制作的基础上，我们

27、还制作了音乐锁屏、短信界面、联系人界面等，如图所示。课后习题课后习题请运用本章所学的知识点，设计一套主题图标，要求如下。（1）至少设计24 个主题图标。（2）图标的设计风格一致，符合图标设计的原则。（3）完成图标手绘稿、电脑制作稿及主题界面的设计制作。课后习题样例：本样例是写实风格的主题图标设计，灵感来源于汽车相关元素，如图所示。课后习题图标设计案例欣赏案例1：“民族风情”图标设计欣赏图标设计案例欣赏图标设计案例欣赏案例2：“中古印象”图标设计欣赏图标设计案例欣赏图标设计案例欣赏案例3：“古韵”图标设计欣赏图标设计案例欣赏图标设计案例欣赏案例4：“城市星空”图标设计欣赏图标设计案例欣赏图标设计案例欣赏案例5：“小白系列”图标设计欣赏图标设计案例欣赏 学 习 进 步！移动UI交互设计