PhotoshopCCUI设计案例教程电子教案第2章教案.docx

《PhotoshopCCUI设计案例教程电子教案第2章教案.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程电子教案第2章教案.docx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YOUR LOGO原创力独家文档教材配套参考答案 课 题: 第2章 图标设计课 时: 6课时授课类型: 讲授+实训教学目标: 了解图标设计的基础知识 掌握图标设计的规范 认识图标设计的风格教学重点:图标设计的规范、图标设计的风格教学难点:图标设计的风格本章技能点：扁平化风格-单色面性图标的绘制方法本章教学技巧：1.知识讲解2.案例实训教学过程：（一）课前准备1.授课前准备准备好教学用具和教学设备2.板书课题：第2章 图标设计项目目标： 了解图标设计的基础知识 掌握图标设计的规范 认识图标设计的风格3.课程引入通过“绘制扁平化风格-单色面性图标”案例效果展示引入图标设计的概念 （二）课程内容2.

2、1 图标的基础知识本节介绍UI图标设计相关的基础知识，包括图标的概念、图标设计的流程以及图标设计的原则。2.1.1图标的概念图标又称为icon，是具有明确指代含义的计算机图形。从广义上讲，图标是高度浓缩，并能快捷传达信息，便于记忆的图形符号。图标的应用范围很广，包括软件界面、硬件设备及公共场合等，如图所示。 公共场所图标指示（左）和Window10桌面图标（右）从狭义上讲，图标则多应用于计算机软件方面。其中，桌面图标是软件标识，界面中的图标是功能标识，如图所示。 界面中的图标2.1.2图标设计的流程图标设计可以按照分析调研、寻找隐喻、设计图形、建立风格、细节润色、场景测试的流程来进行，如图所示

3、。图标设计流程图1.分析调研图标设计是根据品牌的调性、产品的功能而进行的，不同场景的图标设计方法也会有区别。因此，设计图标之前要先分析需求，确定图标的功能，并进行相关竞品的调研，如图所示，清楚设计方向。音乐类竞品2.寻找隐喻隐喻通常表示从一种事物能联想到另一种事物，如谈到歌曲，会联想到音乐符，如图所示。寻找隐喻是图标设计的常用思路，在明确设计方向后，应根据功能，通过头脑风暴找到相关的物品，进行相关的元素的收集。QQ音乐图标的联想过程3.设计图形图形的设计非常考验图标设计师的基本功。通过隐喻收集相关的元素之后，需要设计师绘制一系列草图，提炼设计出成型的图形，如图所示，并根据图标的规范在计算机上进

4、行微调。设计师EddieLobanovskiy的图标设计草图4.建立风格目前的图标设计风格还是以拟物化和扁平化两种为主，如图所示，其中扁平化为当今的流行趋势。因此我们要结合前期的分析调研，建立符合需求的风格。Vinyl Music and Video Files Manager（左）MusicTube（右）两款音乐应用图标不同的设计风格5.细节润色细节往往是区别于竞品、建立产品气质的关键。细节润色一般会从颜色、质感甚至造型等方面入手，最终完成体现产品特点的图标设计，如图所示。印度尼西亚标志设计师YogaPerdana为图标进行质感调整6.场景测试为了让图标适用于不同场景及不同分辨率的手机，还需

5、要根据规范调整图标的分辨率，具体的规范会在2.2图标的设计规范进行深入剖析。最后在上线前，还要将设计稿在不同的应用场景中进行测试，确保图标的可用性和识别度，如图所示。不同应用场景下的图标2.1.3图标设计的原则图标设计要遵循表意准确、视觉统一、简洁美观、愉悦友好四大原则。1.设计准确图标的设计准确具体表现在表意准确和造型准确两个方面。表意准确是指在使用时，图标能够快速传达准确的信息，被用户理解而不会造成困惑，如图所示。表意准确的音乐类图标为了保证图标的造型准确，在绘图软件中，图标的x和y坐标应设为整数，而不是小数，并且图标的宽度和高度尺寸应设为偶数。2.视觉统一图标设计需要在基本造型、风格表现

6、、节奏平衡上保持统一。在基本造型上，需要根据规范对图标各部分设计进行统一，如图所示。具体的规范会在2.2图标的设计规范进行深入剖析。 形体造型统一的图标（左）和形体造型未统一的图标（右）在风格表现上，得益于移动互联网的发展，图标的风格非常多样化。设计师可以根据应用场景和产品情况选择合适的风格。需要注意，在进行多色图标的设计时，用色尽量不要超过3种颜色，否则会导致用户视觉混乱，如图所示。具体的风格会在2.3图标的风格类型进行深入剖析。App界面中风格统一的图标在节奏平衡上，由于图标造型的丰富，可以根据规范给出的模版达到节奏协调、视觉统一的效果，如图所示。具体的规范会在2.2图标的设计规范进行深入

7、剖析。 在规范辅助下设计出视觉平衡的图标3.简洁美观图标的设计应尽量保持图形的简洁，去掉多余的装饰。将简洁的图形精细化设计，形成节奏，如图所示。简洁美观的图标4.愉悦友好赋予图标适度的情感，令用户不仅能快速实现目标，更能体验交互的喜悦。其中，为图标添加交互动效就是一种能快速赋予图标情感的表现手法。如图所示，金融App界面中图标被赋予了细腻的动效。波兰设计师Kamil Bachanek创作2.2图标的设计规范图标的设计规范主要是根据App中的iOS和Android两个平台的设计规范而来的。下面从图标尺寸及单位、图标的视觉统一、图标的清晰度3个方面详细讲解图标的设计规范。2.2.1 图标的尺寸及单

8、位1.iOS系统中的图标尺寸及单位在iOS系统中，图标主要分为应用图标和系统图标两种，单位是px和pt。px即“像素”，是按照像素格计算的单位，也就是移动设备的实际像素。pt即“点”， 是根据内容尺寸计算的单位。使用Photoshop软件设计界面的UI设计师使用的单位都是px，使用Sketch软件设计界面的UI设计师使用的单位都是pt。iOS 系统的单位，本书亦在3.2.1 iOS系统设计规范中进行了深入剖析，帮助设计师理解。（1） 应用图标应用图标是应用程序的图标，如图所示。应用图标主要应用于主屏幕、App Store、Spotlight以及设置中。iOS系统中各类应用图标应用图标的设计尺寸

9、可以采用1024px，并根据iOS官方模板进行规范，如图所示。正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。iOS官方模板应用图标会以不同的分辨率出现在主屏幕、App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配，如下所示。iOS中不同设备应用图标的尺寸（2） 系统图标系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标，如图所示。澳大利亚Prospa产品设计负责人AndrewMcKay创作针对iPhone SE /6/6s/7/8/XR导

10、航栏和工具栏上的图标尺寸一般是44px，标签栏上的图标尺寸一般是50px。系统图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配，如下所示。iOS中不同设备系统图标的尺寸2.Android系统中的图标尺寸及单位在Android系统中，图标主要分为应用图标和系统图标两种，单位是dp。dp是安卓设备上的基本单位，等同于苹果设备上的pt。Android开发工程师使用的单位是dp，所以UI设计师进行标注时应将px转化成dp，公式为dp = px160/ppi（ppi为屏幕像素密度）。本书亦在3.2.2 Android系统设计规范对其进行了深入剖析，帮助设计师

11、理解。（1）应用图标应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上，如图2-21所示。Android系统中各类应用图标创建应用图标时，应以320dpi（dpi表示的是安卓设备每英寸所拥有的像素数量）分辨率中的48dp尺寸为基准。应用图标的尺寸应根据不同设备的分辨率进行适配，如图下所示。当应用图标应用于Google Play中时，其尺寸是512 px512px。Android系统中不同设备应用图标的尺寸（2）系统图标系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图标，如图所示，同时设计师也可以根据产品的调性进行自定

12、义设计。MaterialDesign官网提供的完整系统图标创建系统图标时，以320点/英寸分辨率中的24dp尺寸为基准。系统图标的尺寸应根据不同设备的分辨率进行适配，如下所示。Android系统中不同设备系统图标的尺寸2.2.2 图标的视觉统一MaterialDesign语言提供了4种不同的图标形状供UI设计师参考，以保持视觉平衡，如图所示。MaterialDesign官网提供的四类图标内部结构线边角半径默认为2dp。内角应该是方形而不要使用圆形，圆角建议使用2dp，如图所示。边角半径为2dp的图标解析图描边：系统图标应使用2dp的描边以保持图标的一致性，如图所示。描边为2dp的图标解析图描边

13、末端：描边末端应该是直线并带有角度，留白区域的描边粗细也应该是2dp。描边如果是倾斜45度，那么末端应该也是倾斜45度为结束，如图所示。描边末端为2dp的图标解析图视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调整以提高其清晰度，如图所示。复杂图标的视觉校正解析图2.2.3 图标的清晰度设计时为保证图标清晰，需将软件中x和y坐标设为整数，而不是小数，将图标“放在像素上”，如图2-30所示。 正确示例（左）和错误示例（右）2.3 图标的风格类型从风格表现上，图标可以分为像素风格、扁平化风格、拟物化风格、微拟物风格以及立体风格。2.3.1像素风格像素风格图标的本质是由多个像素点组成的插

14、图，其本身是位图。在早期的计算机界面、久远的游戏画面中经常使用像素风格图标，因此像素风格图标常会带给用户怀旧复古的体验，如图所示。游戏中的像素图标2.3.2扁平化风格扁平化风格自2013年iOS7的推出而成为了设计的主流趋势，扁平化风格的图标也成为了界面图标的主导风格。扁平化风格的图标简洁美观、功能突出，可以细分为线性图标、面性图标和线面结合图标。1.线性图标线性图标即通过统一的线条进行绘制，表达图标的功能。线性图标经常用于App界面底部的标签栏、导航栏的功能按钮以及界面中的分类，如图所示。线性图标应用于移动界面底部标签栏（左）和线性图标应用于导航栏（右），由Shakuro团队创作线性图标形象

15、简洁、设计轻盈，又可以细分为圆角图标、直角图标、断点图标、高光式图标、不透明度图标、双色图标以及一笔画图标。圆角图标：圆角图标柔和、亲切，一般用于母婴、儿童以及女性等方面内容，如图所示。圆角图标，图片来源于花瓣网直角图标：直角图标明快、果断，一般用于金融以及工具等方面内容，如图所示。 直角图标，图片来源于花瓣网断点图标：断点图标有趣、丰富，一般用于表现年轻、可爱等方面的内容，如图所示。 断点图标，图片来源于追波网，由中国设计师Wilbur Xu创作高光式图标：高光式图标较传统，一般用于银行等方面的内容，如图所示。 高光式图标，由爱沙尼亚设计师MartV创作不透明度图标：不透明度图标有层次，适用

16、范围较广，如图所示。不透明度图标，由印度设计师Sarath Jayaprakash创作双色图标：双色图标由两种不同色彩的线搭配构成，适用于表现可爱、活泼等方面的内容，如图所示。双色图标，由美国设计师Jakob Scott创作一笔画图标：一笔画图标较文艺，同时难度系数比较高，一般用于文化、艺术等方面的内容，如图所示。一笔画图标，图片来源Pinterest2.面性图标面性图标即填充图标，经常用于App界面底部的标签栏、图标的选中状态、以及界面中的金刚区（专指App页面Banner下方的的功能入口导航区域）和界面中的重要分类，如图所示。由印度设计师Abhinav Agrawal创作的面性图标，应用于

17、分类面性图标整体饱满、形象突出，又可以细分为单色面性图标、不透明色块面性图标、微渐变面性图标、光影效果图标、折纸投影图标以及多色面性图标。单色面性图标：单色面性图标是最基本的面性图标，一般用于App界底部的标签栏以及图标的选中状态，如图所示。单色面性图标不透明色块面性图标：不透明色块面性图标有层次，一般用于App界面中的金刚区，如图所示。不透明色块面性图标，由多伦多设计师Dmitri Litvinov创作微渐变面性图标：微渐变面性图标有层次感，但不够分明，一般用于App界面中的金刚区，如图所示。微渐变面性图标，图片来源于花瓣网光影效果图标：光影效果图标带有微拟物效果，一般用于App界面中的金刚

18、区，如图所示。 光影效果图标，图片来源与追波网，由中国Rian设计师创作折纸投影图标：折纸投影图标带有微拟物效果，一般用于App界面中的金刚区或直接用于工具类图标，如图所示。折纸投影图标，图片来源于追波网，由中国设计师Anna Zhang创作多色面性图标：多色面性图标酷炫、多彩，一般用于生活等方面内容，如图所示。 多色面性图标，图片来源于追波网，由设计师超创作3.线面结合图标线面结合图标是线性图标和面性图标的结合。线面结合图标经常用于趣味性App界面中底部的标签栏、界面中的分类或是引导页与弹框中，如图所示。线面结合图标，图片来源于CreativeMarket线面结合图标充满活力、形象有趣，又可

19、以细分为点缀填充、错位填充、全部填充3种。点缀填充：点缀填充图标，填充的面积约占图标的30%，一般用于App界面中的底部标签栏，如图所示。点缀填充图标，由多伦多设计师Dmitri Litvinov创作错位填充：错位填充图标，面与线进行错位，一般用于App界面中的底部标签栏，如图所示。 错位填充图标，图片来源于追波网，由中国设计师Vic创作全部填充：全部填充图标，充实、饱满，一般用于App界面中的分类或是引导页与弹框中，如图所示。全部填充图标，由立陶宛产品设计师Mantas Suktus创作2.3.3拟物风格拟物风格在iOS6时代达到了流行的巅峰，拟物化风格的图标对于现实的还原度较高，其质感强烈

20、、识别性高，但在功能表现上却不如扁平化图标更直接。拟物风格图标常用于工具类、游戏类应用，如图所示。拟物风格图标，图片来源于Pinterest2.3.4微拟物风格微拟物风格图标减轻了拟物风格的厚重质感，带有基本的投影和阴影效果，介于拟物和扁平化风格之间。微拟物图标常用于工具类应用，如图所示。微拟物风格图标，由泰国产品设计师buatoom创作2.3.5立体风格立体风格图标有别于传统的平面图标，其具备强烈的体积感和空间感。活动专题页、引导页、空状态经常使用立体风格的图标，如图所示。 立体风格图标，由美国设计师Masami Kubo创作，来源追波（左），由NimashaPerera创作（右）立体风格的

21、图标视觉突出、层次分明，可以细分为3D图标和2.5D图标。3D图标：3D图标真实、细致，一般用于游戏以及工具等方面内容，如图所示。3D图标2.5D图标：2.5D图标现代、耐看，一般用于表现现代、有趣及文艺等方面内容，如图所示。2.5D图标，图片来源于花瓣网，由WACHU创作2.4 课堂案例绘制扁平化风格-单色面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用圆角矩形工具绘制床体，使用圆角矩形工具、矩形工具和减去顶层形状命令绘制其他部分，效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch02/效果/绘制扁平化风格-单色面性图标.ps

22、d。 效果 环境展示效果（1）按Ctrl+N组合键，弹出“新建文档”对话框，将宽度设为512像素，高度设为512像素，分辨率设为72像素/英寸，背景内容设为白色，如图所示。单击“创建”按钮，完成文档新建。（2）选择“圆角矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为灰色（158、158、158），“半径”选项设置为15像素。在图像窗口中适当的位置绘制圆角矩形，如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形1”。 （3）选择“窗口 属性”命令，弹出“属性”面板，在面板中进行设置，如图所示，效果如图所示。 （4）选择“圆角矩形”工具，在属性栏中，将“半径”选

23、项设置为40像素，在图像窗口中适当的位置绘制圆角矩形，在“图层”控制面板中生成新的形状图层 “圆角矩形2”。在“属性”面板中进行其他设置，如图所示，效果如图所示。 （5）选择“矩形”工具，按住Alt键的同时，在图像窗口中适当的位置绘制矩形，如图2-64所示。在“属性”面板中进行设置，如图所示，效果如图所示。 （6）选择“圆角矩形”工具，在属性栏中，将“半径”选项设置为24像素。按住Alt键的同时，在图像窗口中适当的位置绘制圆角矩形，效果如图2-67所示。在“属性”面板中进行其他设置，如图所示，效果如图所示。（7）选择“路径选择”工具，按住Alt+Shift组合键的同时，选中圆角矩形，在图像窗口

24、中将其向右拖曳，进行复制，如图所示。在“属性”面板中进行设置，如图所示，效果如图所示。（8）选择“圆角矩形”工具，在属性栏中将“半径”选项设置为25像素，在图像窗口中适当的位置绘制圆角矩形，如图所示，在“图层”控制面板中生成新的形状图层 “圆角矩形3”。在“属性”面板中进行其他设置，如图所示，效果如图所示。（9）选择“矩形”工具，按住Alt键的同时，在图像窗口中适当的位置绘制矩形，效果如图所示。在“属性”面板中进行设置，如图所示，效果如图所示。（10）将“圆角矩形3”图层拖曳到“图层”控制面板下方的“创建新图层”按钮上进行复制，生成新的图层“圆角矩形 3 拷贝”，如图所示。选择“移动”工具，拖

25、曳复制的图形到适当的位置，效果如图所示。（11）选择“圆角矩形”工具，在“属性栏”中将“半径”选项设置为6像素，在图像窗口中适当的位置绘制圆角矩形，效果如图所示，在“图层”控制面板中生成新的形状图层 “圆角矩形4”。在“属性”面板中进行其他设置，如图所示，效果如图所示。 （12）按Ctrl+T组合键，在图形周围出现变换框，将指针放在变换框的控制手柄右下角，指针变为旋转图标。按住Shift键的同时，拖曳鼠标将图形旋转到15度，按Enter键确认操作，效果如图所示。（13）将“圆角矩形4”图层拖曳到“图层”控制面板下方的“创建新图层”按钮上进行复制，生成新的图层“圆角矩形 4 拷贝”，如图所示。选

26、择“移动”工具，拖曳复制的图形到适当的位置。选择“编辑 变换 水平翻转”命令，效果如图所示。 （14）在“图层”控制面板中，单击“圆角矩形 1”图层，将其拖曳到“圆角矩形4”图层的下方，调整图层顺序，如图所示。单击“圆角矩形 4 拷贝”图层，按住Shift键的同时，单击“圆角矩形2”图层，将需要的图层同时选取，按Ctrl+E组合键合并图层，如图所示。（15）单击“背景”图层左侧的眼睛图标，将图层隐藏，效果如图所示，扁平化风格-单色面性图标制作完成。2.5课堂练习2.5.1课堂练习绘制扁平化风格-不透明色块面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用椭圆形工具绘制

27、灯泡主体，使用圆角矩形工具和多边形工具绘制其他部分，效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch02/效果/绘制扁平化风格-不透明色块面性图标.psd。 效果 环境展示效果2.5.2课堂练习绘制扁平化风格-微渐变面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用多边形工具、圆角矩形工具、矩形工具、椭圆形工具和合并形状命令、减去顶层形状命令绘制其他部分。使用添加图层蒙版命令和画笔工具擦除不需要的部分。效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch02/效果/绘

28、制扁平化风格-微渐变面性图标.psd。 效果 环境展示效果2.6 课后习题2.6.1课后习题绘制扁平化风格-光影效果图标图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用圆角矩形工具、矩形工具、椭圆形工具和合并形状命令、减去顶层形状命令绘制其他部分。使用剪切蒙版命令置入渐变效果，如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch02/效果/绘制扁平化风格-光影效果图标图标.psd。 效果 环境展示效果2.6.2课后习题绘制扁平化风格-折纸投影图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用圆角矩形工具、矩形工具、椭圆形工具和减去顶层形状命令绘制其他部分，使用剪切蒙版命令置入渐变效果。效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch02/效果/绘制扁平化风格-折纸投影图标.psd。 效果 环境展示效果教案编号: 2