UI界面设计与制作（全彩慕课版）.pptVIP

3.标签栏的图标（1）标签栏图标尺寸通用的图标设计尺寸为24pt。不同形状的图标会产生不同的视觉重量，为保持视觉平衡，不同形状的图标设计尺寸可参考下图。4.3.3标签栏的规则方形：宽高18px圆形:直径20px垂直矩形：高度20px,宽度16px水平矩形：高度16px,宽度20px（2）图标的切换状态线性（未选中状态）-面性（选中状态），这种方式下的切换状态反馈最强烈，最常用。4.3.3标签栏的规则支付宝App（3）图标的风格样式·线性当标签栏中线性图标描边的为2px时，能够表现出精致时尚的特点。4.3.3标签栏的规则小米有品App底部标签栏·面性标签栏中面性图标，能够表现出稳重扎实的特点，常用于运动类、阅读类App。4.3.3标签栏的规则得到App底部标签栏·线面：标签栏中线面图标，能够表现出活泼趣味的特点，常用于选中状态。4.3.3标签栏的规则爱回收App标签栏在Illustrator软件中，使用矩形工具绘制形状，使用钢笔工具添加锚点，使用直接选择工具调整锚点到适当的位置并制作圆角效果。在Photoshop软件中，使用矩形工具和属性面板确定参考线位置，使用置入嵌入对象命令置入图标，使用横排文字工具输入文字。4.3.4课堂案例-制作旅游类App标签栏设计效果图环境效果图金刚区的概念金刚区的类型金刚区的规则课堂案例-制作旅游类App金刚区4.4金刚区的设计金刚区又称为快速功能入口，通常是位于有哪些信誉好的足球投注网站框、banner之下，是页面的核心功能区域，表现形式为多行排列的宫格区图标，具有展现丰富、设计精美的特点，提供了趣味展示以及业务导流的作用。4.4.1金刚区的概念支付宝App1.图标+文字设计形式以图标+文字类型为主的金刚区，有着设计细节丰富，富有创意等优势，但同时容易出现对文字信息依赖性较强的问题。4.4.2金刚区的类型贝壳App金刚区2.图片+文字设计形式以图片+文字类型为主的金刚区，有着主题明确，具有感染力等优势，但同时容易产生产品缺乏设计感等现象。4.4.2金刚区的类型盒马鲜生App金刚区3.图标+图片+文字设计形式以图标+图片+文字类型为主的金刚区，有着运营目的强等优势，但同时容易导致产品视觉不统一等问题。4.4.2金刚区的类型网易考拉海购App金刚区1.金刚区的尺寸·iOS宽度375pt,高度会根据图标数量变化。·Android宽度360dp,高度会根据图标数量变化。·主图标尺寸约48pt。·幅图标尺寸约30pt。·文字尺寸约11pt。4.4.3金刚区的规则2.金刚区的布局（1）数量金刚区图标的数量根据米勒法则的7±2规律而来，通常在一行中不超过5个图标。4.4.3金刚区的规则酷狗音乐App（2）方法金刚区的布局方法共有边距删减法和占位等分法这两种。边距删减法具体的布局方法是，减去左右两边间距，再进行等分。这种布局方式适用于有一行5个图标或带有底板图标的金刚区。占位等分法具体的布局方法是，列宽=屏幕宽度/标签个数。这种布局方式适用于一行4个图标或无底板图标的金刚区。4.4.3金刚区的规则边距删减法占位等分法3.金刚区的图标（1）金刚区图标尺寸·主图标底板：40～48pt。·内环图标：是底板的0.618（黄金分割比）。·副图标：底板的0.618或0.382（黄金风格比）。4.4.3金刚区的规则金刚区图标尺寸示意图（2）金刚区图标风格·无底板面性图标：无底板的金刚区面性图标，视觉层级感针对有底板金刚区面性图标稍弱。这类图标常用于主金刚区及少数副金刚区。4.4.3金刚区的规则贝壳找房App副金刚区·有底板圆形底板+面性图标：圆形底板+面性为组合的金刚区图标，有着柔和简洁的特点。4.4.3金刚区的规则壹钱包App金刚区（3）金刚区图标配色不同的色彩因为其固有的特点，会产生不同的感受。如红色带给我们热情兴奋的感受，而绿色则带给我们安全舒缓的感受。因此进行图标配色时要考虑色彩情绪，需要让色彩表达的含义和该图标表达的含义一致。4.4.3金刚区的规则色彩情绪示意图使用矩形工具和属性面板确定参考线位置，使用圆角矩形工具和椭圆工具绘制图标，使用直接选择工具调整图标，使用渐变叠加命令添加效果，使用置入嵌入对象命令置入网格系统从而调整图标，使用横排文字工具输入文字。4.4.4课堂案例-制作旅游类App金刚区设计效果图环境展示图瓷片区的概念瓷片区的类型瓷片区的规则课堂案例-制作旅游类App瓷片区4.5瓷片区的设计瓷片区即将图像