UI中的图标设计教案.docx

《UI中的图标设计教案.docx》由会员分享，可在线阅读，更多相关《UI中的图标设计教案.docx（69页珍藏版）》请在优知文库上搜索。

1、课题：Ul中的图标设计课时：8课时授课类型：讲授+实训项目目标： 掌握线性图标的制作 掌握面性图标的制作 掌握线面图标的制作项目重点： 线性图标的制作 面性图标的制作 线面图标的制作项目难点： 线性图标的制作 面性图标的制作 线面图标的制作项目技能点：线性图标的制作、面性图标的制作、线面图标的制作项目教学技巧：1 .知识讲解2 .案例实训项目过程:（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第2章Ul中的图标设计项目目标： 掌握线性图标的制作 掌握面性图标的制作 掌握线面图标的制作3 .课程引入通过课堂案例效果展示引入Ul图标设计的概念图制作旅游类APP线性图标制作旅

2、游类APP面性图标制作旅游类APP线面图标GO囹首页攻略消息行程我的环境效果图(二)课程内容2.1 线性图标线性图标作为Ul设计中的常用图标之一，有着形象简洁、设计轻盈的特点。下面分别从基本概念、使用场景以及设计要点这三个方面进行线性图标的讲解。2.1.1 基本概念线性图标即通过统一的线条进行绘制，表达图标的功能，如图所示。回四解同线性图标2.1.2 使用场景线性图标常用于导航栏、金刚区、列表流、分类区、局部操作、标签栏，如图所示。2.1.3 设计要点1.描边粗细(1)描边的数值大小一致，尽量采用整数，如果要用小数的话建议使用05递进。VBDS猜你喜欢分类品味购物车我的Hl)阅读A首页目A问答

3、学院招聘我的小米有品App底部标签栏产品经理App底部标签栏QUEL消息课程简历我的前程无忧APP底部标签栏3p:通用大众，如图所示。产会0区微信通讯录发现我微信APP底部标签栏目。分类发现消息票牛App底部标签栏QO网校孩子家长大学一起学App底部标签栏2我的Q我的4px以上：稳重趣味，如图所示。AqA呱首页装修干货o我的好好住APP底部标签栏 D08发现服务视频我宜信财富App底部标签栏 日。2首页头条发现我的众安保险APP底部标签栏(2)描边数值如果是奇数应该使用内或者外描边，因为居中的描边会模糊掉，如图所示。播边为偶故时描边为偶数和奇数时不同对齐描边的示意图(3)在做闭合路径的线性图标

4、时，通常采用内描边的对齐方式，因为外描边的矢量图形视觉上其实是比实际数值要大，不利于控制图标大小，如图所示。对齐描边为内描边和外描边的示意图2.圆角设置圆角的数值大小一致，建议为偶数，不能出现小数。描边2px通常设置2px圆角，如图所示。V三DS猜你喜欢分类品味购物车我的小米有品App底部标签栏描边3px通常设置4px圆角，如图所示。产会0K微信通讯录发现我微信APP底部标签栏描边4px以上通常设置无圆角，如图所示。耳呱首页装修干货我的好好住APP底部标签栏3.效果处理(1)渐变在渐变描边中，要保证渐变的方向和强弱关系是一致的，如图所示。臼Q己回O已逾QQ口回国渐变一致的图标(2)叠加叠加效果

5、先将图标拆分成两个部分，然后再调整透明度或调整图层混合模式”来呈现出叠力口效果，如图所示。UA臼Qe;图标的叠加效果2.1.4课堂案例一制作旅游类App线性图标【案例设计要求】1 .运用软件IHUStratOr绘制标签栏中行程，设计效果、环境效果如图所示。2 .图标尺寸：24px,图标布局：20pxo3运用网格系统，符合图标绘制规范。【案例学习目标】学习使用软件IHUStratOr绘制标签栏中行程图标。(三W(三)设计效果图G0。囹首页攻略消息行程我的环境效果图【案例知识要点】使用“X”、“丫、宽和高”工具进行调整使图标符合设计规范，运用Al变化工具进行快速复制，扩展外观变成真实图像。(1)按

6、Ctrl+N组合键，弹出新建文档”对话框，设置宽度为24px,高度为24px,取向为横向，颜色模式为RGB,分辨率为72像素硬寸，单击创建按钮，新建一个文件。(2)选择编辑首选项常规命令，弹出首选项对话框，将“键盘增量”选项设为p,如图所示。选择单位选项，切换到相应面板中进行设置，如图所示。(3)选择参考线和网格选项，切换到相应的面板，将网格线间隔选项设为Ipx,如图所示，单击“确定”按钮。(4)选择”视图显示网格命令，显示网格。选择视图对齐网格命令，对齐网格。选择视图对齐像素命令，对齐像素。(5)选择文件打开命令，弹出“打开”对话框，选择云盘中的ChO2制作旅游类App线性图标素材01文件，

7、单击“打开按钮，如图所示。(6)选择选择工具4,选取网格系统，按Ctrl+C组合键，复制图形。返回到正在编辑的适当的位置,效果如图所示。（7）选择“圆角矩形工具Q,在页面中单击鼠标左键，弹出设置如图所示。爆角矩形:20jx&I焉度0:16px角半径优）:|4KI（一）（二）单击”确定按钮，出现一个圆角矩形。设置描边色为灰色（153设置填充色为无，效果如图所示。H（8）选择窗口描边”命令，弹出描边控制面板,将“粗描边选项设为使描边内侧对齐，其他选项的设置如图所示。XS搔边三组耀0IS*UUU边角I?C。限*10圆角矩形对话框，选项的、153、153）,填充描边，并细”选项设为15pxJ对齐页面,

8、按CtrlV组合键，将其粘贴到制作旅游类App线性图标页面中，并拖曳复制的网格系统到对齐精力隹,6(9)选择窗口变换命令，弹出变换控制面板,将X选项设为12px,将“Y”选项设为12px,其他选项的设置如图所示。按Enter键确定操作，效果如图所示。(10)选择直线段工具,在页面中单击鼠标左键，弹出直线段工具选项对话框,选项的设置如图所示。单击“确定按钮，出现一条竖线，在属性栏中将描边粗细”选项设为L5px,按Enter键确定操作，效果如图所示。单击确定按钮，效果如图所示。选择对象扩展外观命令，扩展图形的外观，效果如图所示。(13)选择直线段工具,在页面中单击鼠标左键，弹出直线段工具选项对话框

9、,选项的设置如图所示。单击“确定按钮，出现一条横线，在属性栏中将描边粗细”选项设为I5px,按Enter键确定操作，效果如图所示。(14)在“变换控制面板中，将X选项设为7.5px,将Y选项设为IOpx,其他选项的设置如图所示。按Enter键确定操作，效果如图所示。(15)保持直线选取状态，选择效果扭曲和变换变换命令，弹出变换效果对话框，在“移动选项组中，将“水平”选项设为4,5px,“副本”选项设为2,其他选项的设置如图单击确定按钮，效果如图所示。(16)保持直线选取状态，选择“效果扭曲和变换变换命令，弹出如图所示对话框。单击应用新效果按钮，弹出变换效果”对话框，在“移动选项组中，将“垂直”

10、选项设为3px,副本”选项设为2,其他选项的设置如图所示。单击“确定按钮，效果如图所示。(17)选择“对象扩展外观命令，扩展图形的外观，效果如图所示。选择选择工具4,用框选的方法将图标同时选取，如图所示。按住Shifl键的同时,单击网格系统将其取消选取,效果如图所示。(18)选择对象路径轮廓化描边命令，创建对象的描边轮廓，效果如图所示。选择窗口路径查找器“命令，弹出路径查找器控制面板，单击联集按钮,如图所示。as三形状Ii式：生成新的对象，效果如图所示。旅游类App线性图标（未选中状态）制作完成。（19）选择“画板工具,按住Alt+Shift组合键的同时，将画板1垂直向下拖曳到适当的位置，如图

11、所示。在文件中生成新的画板“画板2。选择选择工具4,选取画板2中的图标，设置填充色为橘黄色（255、151、1）,效果如图所示。(20)选择圆角矩形”工具在页面中单击鼠标左键，弹出圆角矩形对话框，选项的设置如图所示。单击“确定按钮,出现一个圆角矩形。设置填充色为橘黄色(255、151、1),填充圆角矩形，并设置描边色为无，效果如图所示。(21)在“变换控制面板中，将X”选项设为12px,将Y选项设为38px,其他选项的设置如图所示。按Enter键确定操作，效果如图所示。(22)选择窗口透明度命令，弹出透明度控制面板，将不透明度”选项设为30%,其他选项的设置如图所示。在图形上单击鼠标右键，在弹

12、出的快捷菜单中选择排列后移一层命令，如图所示。将圆角矩形后移一层，效果如图所示。旅游类App线性图标的已选中状态(线面图标)制作完成。2.2面性图标线性图标作为Ui设计中的常用图标之一，有着整体饱满、形象突出的特点。下面分别从基本概念、使用场景以及设计要点这三个方面进行线性图标的讲解。2.2.1 基本概念面性图标即填充图标，如图所示。面性图标2.2.2 使用场景面性图标常用于金刚区、内容装饰、标签栏、列表流，如图所示。面性图标使用场景2.2.3 设计要点1 .挖空比例面性图标挖空比例占20%30%,如图所示。面性图标挖空比例示意图2 .有无底板单独型图标视觉感知更直观，组合型图标具有层次，相对

13、精致，如图所示。越小的图标形体应该越简单，因此建议单独型图标。图标的尺寸足够大时可采用组合型的图标，并卜充图标的细节。图标有无底板对比图3 .细节处理(1)微渐变面性图标的微渐变运用easing插件可以变得更为细腻,如图所示。斯卓变影状确滥用件EasingOadlerx30加率变色点及皿侵港变故方加自然MBillEasingGradient插件(针对SketCh)使用效果(2)透明度面性图标透明度一般设置为60%,如图所示。1便网新变2 用变3 iS9!AO%图标做透明度变化时的设置(3 )弥散投影运用弥散投影可以增加质感，如图所示。 .制作图标的弥散投影2.2.4课堂案例制作旅游类APP面性图标【案例设计要求】1 .运用软件Photosho