图标设计与制作配套教材电子课件（完整版）.ppt

使用圆角矩形工具、椭圆工具、钢笔工具和直线段工具绘制图形，使用路径查找器实现布尔运算，使用描边命令设置描边选项，实现美食类导航栏图标。 7.5 课堂练习-制作美食类导航栏图标 图标原型图 使用椭圆工具、矩形工具和圆角矩形工具绘制图形，使用快捷键变换图形，使用路径选择工具和减去顶层形状命令实现布尔运算，使用渐变叠加命令实现美食类标签栏图标，使用横排文字工具输入文字。 7.6 课后习题-制作美食类标签栏图标 图标原型效果图 ·图标+文字+舵式 标签栏以图标+文字+舵式的方式进行展示，都会具有发布需求。这类展示方式适用于社区型App。 7.2.2 标签栏的类型 58同城App标签栏 1.标签栏的尺寸 ·iOS标签栏宽度：375pt，高度：49pt。 ·Android标签栏宽度：360dp，高度：56dp。 ·通用的图标设计尺寸：24pt。 ·FAB（浮动操作按钮）设计尺寸：56pt。 ·图标下文字设计尺寸：10pt。 7.2.3 标签栏的规范 2.标签栏的布局 标签栏图标数量通常在3～5个。标签栏的布局方法共有屏幕等分、边距删减等分以及图标左右间距相等这三种。屏幕等分的方式最常用，其具体的布局方法是，列宽=屏幕宽度/标签个数。边距删减等分的方式是对屏幕等分方式的一种补充，其具体的布局方法是，减去标签栏中左右两边间距，再将标签进行等分。图标左右间距相等的方式并不常用，其适用于标签数量为3个的时候。 7.2.3 标签栏的规范 3.标签栏的图标 ·标签栏图标尺寸：通用的图标设计尺寸为24pt。不同形状的图标会产生不同的视觉重量，为保持视觉平衡，不同形状的图标设计尺寸可参考下图。 7.2.3 标签栏的规范 方形：宽高18px 圆形:直径20px 垂直矩形：高度20px,宽度16px 水平矩形：高度16px,宽度20px ·图标的切换状态：线性（未选中状态）-面性（选中状态），这种方式下的切换状态反馈最强烈，最常用。 7.2.3 标签栏的规范 支付宝App ·图标的角标设计 角标的概念：角标（badge），又称徽标，通常指出现在图标右上角的红色图形，表示有新内容或者待处理信息。 7.2.3 标签栏的规范 网易严选App标签栏 角标的色彩：绝大多数的角标用色都是红色，部分品牌色为暖色系色彩的App会使用其品牌色作为角标色彩。 7.2.3 标签栏的规范 腾讯视频App标签栏 角标的尺寸 在角标的尺寸中，小红点建议为6～8pt，红色圆形建议为12～16pt（圆角矩形、类圆角矩形的高度），小红点与红色圆形大小关系通常为1:2。 7.2.3 标签栏的规范 角标尺寸示意图 角标的字体 角标的字体应该为非衬线，可以和系统字体进行匹配。当底层的图形为圆形时，字体与底层的比例关系接近1：2。当底层的图形为圆角矩形时，字体与圆角矩形的高度比例同样接近1:2；字体距上下侧距离：字体距左右侧距离=1:1.2。 7.2.3 标签栏的规范 角标的层级 角标出现在面性图标，通常加入白色描边。 7.2.3 标签栏的规范 京东App标签栏 使用矩形工具、钢笔工具和直接选择工具绘制图形，使用描边命令设置描边选项，使用透明度命令实现旅游类标签栏图标。 7.2.4 课堂案例-制作旅游类标签栏图标 图标最终效果图 金刚区的概念 金刚区的类型 金刚区的规范 课堂案例-制作旅游类金刚区图标 7.3 认识金刚区及其图标 金刚区又称为快速功能入口，通常是位于搜索框、banner之下，是页面的核心功能区域，表现形式为多行排列的宫格区图标。具有趣味展示以及业务导流的作用。 7.3.1 金刚区的概念 支付宝App 1.图标+文字 设计形式以图标+文字类型为主的金刚区，有着设计细节丰富，富有创意等优势，但同时容易出现对文字信息依赖性较强的问题。 7.3.2 金刚区的类型 贝壳App金刚区 2.图片+文字 设计形式以图片+文字类型为主的金刚区，有着主题明确，具有感染力等优势，但同时容易产生产品缺乏设计感等现象。 7.3.2 金刚区的类型 盒马鲜生App金刚区 3.图标+图片+文字 设计形式以图标+图片+文字类型为主的金刚区，有着运营目的强等优势，但同时容易导致产品视觉不统一等问题。 7.3.2 金刚区的类型 网易考拉海购App金刚区 1.金刚区的尺寸 7.3.3 金刚区的规范 金刚区尺寸示意图 2.金刚区的布局 ·数量 金刚区图标的数量根据米勒法则的7±2规律而来，通常在一行中不超过5个图标。 7.3.3 金刚区的规范 酷狗音乐App ·方法 金刚区的布局方法共有边距删减法和占位等分法这两种。边距删减法具体的布局方法是，减去左右两边间距，再进行等分。这种布局方式适用于有一行5个图标或带有底板图标的金刚区。占