【文档说明】移动UI界面设计03扁平化风格图标设计课件.pptx，共(30)页，3.384 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-50588.html

以下为本文档部分文字说明：

扁平化风格图标设计课程回顾iOS系统图标设计规范Android系统图标设计规范双系统下启动图标的设计2/32本章任务掌握长阴影风格图标的设计方法掌握扁平化风格图标的设计方法掌握折纸风格图标的设计方法3/32目录扁平化风格概述扁平化风格设计

原则扁平化风格的特点扁平化风格的分类4/32扁平化风格概述扁平化风格的由来•扁平风格的苹果手机界面5/32扁平化风格概述•Windows8的主要界面显示风格6/32目录扁平化风格概述扁平化风格设计原则扁平化风格的特点扁平化风格的分类7/32扁平化风格设计原

则拒绝特效使用简单的元素注重排版关注色彩极简主义8/32扁平化风格设计原则拒绝特效使用简单的元素注重排版关注色彩极简主义9/32扁平化风格设计原则拒绝特效使用简单的元素注重排版关注色彩极简主义10/32扁平化风格

设计原则拒绝特效使用简单的元素注重排版关注色彩极简主义11/32扁平化风格设计原则拒绝特效使用简单的元素注重排版关注色彩极简主义12/32演示案例演示案例：扁平化风格相机图标设计需求描述绘制扁平化风格相机图标

设计实现思路使用钢笔工具和图形工具勾勒轮廓双击图层缩略图调整形状图层的颜色结合钢笔工具和部分选择工具增加细节13/32课堂练习课堂练习：扁平风格图标设计需求描述绘制扁平风格图标设计实现思路使用圆角矩形工具绘制基础图形，以此为依据进行图标设计抓住图标的特点

进行绘制双击直接改变矢量图层的颜色添加必要的细节14/32目录扁平化风格概述扁平化风格设计原则扁平化风格的特点扁平化风格的分类15/32扁平化风格设计的特点去掉冗余的装饰效果让“信息”本身重新作为核心被凸显出来在设计元素上强调抽象

、极简、符号化信息架构上的扁平，能让用户能更快得到关心的信息需要一定的学习成本，传达的感情不丰富16/32目录扁平化风格概述扁平化风格设计原则扁平化风格的特点扁平化风格的分类17/32扁平化图标的风格分类纯

平面图标轻折叠图标轻质感图标折纸风图标长投影图标立体化和厚度感图标18/32扁平化图标的风格分类纯平面图标特点：纯色、剪影优点：简洁、清新、舒服、视觉识别度较好，色彩明朗，设计感强烈，图形表现高度概括19/32扁平化图标的风格分类轻折叠图标特点：纯色、折痕、轻投

影优点：比纯平面丰富，有轻微视觉空间感，色彩明朗，轻投影，营造出轻盈的感觉，视觉统一性好20/32扁平化图标的风格分类轻质感图标特点：轻渐变、层次简单、轻投影优点：简洁、干净、明朗，有一定的精致感，有简单的层次，轻投影创造轻度立体感而又轻盈清新，内容相对丰富21/32扁平化图标的风格分类

折纸风图标特点：折叠、投影、结构优点：层次丰富，结构明显，易于创造控件立体感，几何感明显，复杂和简洁结合，挑战了扁平化的立体性22/32扁平化图标的风格分类折纸风格图标的艺术特征象征性与识别性立体空间的体现搭建了情感互通的体验平台23/32演示案例演示案例：

折纸风格设置图标设计需求描述：完成折纸风格设置图标设计实现思路对复杂的图形进行拆分，分析图标的各个组成部分对白色圆圈进行对齐和平分使用图层蒙版进行齿轮豁口的处理细节调整、完成制作24/32扁平化图标的风格分类长投影图标特点：投影、层次优点：色彩对比度大，有明显而单纯的投

影，创造鲜明的层次感和空间感，视觉冲击强烈25/32扁平化图标的风格分类长阴影图标的特点阴影往往是干净、独特的，以一定角度来进行投射的或是扁平的、无渐变的，或是有一定明暗变化和衰退的由于长阴影图标

的阴影有时并不符合光影逻辑，造成与iOS启动图标采用顶部光源的设计规范相悖，在设计上需要格外注意26/32演示案例演示案例：Safari长阴影图标设计需求描述绘制Safari长阴影图标设计实现思路在临摹图标之前，首先要对其进行分析，将设计思路和元素之间的关系思考清

晰，并对其进行拆分使用钢笔工具和矢量工具，合理对形状图层进行相交和相减，制作长阴影27/32课堂练习课堂练习：长阴影风格图标设计需求描述绘制Safari长阴影图标设计实现思路使用圆角矩形工具绘制基础图形，以此为依据进行图标设计抓住图标的特点进行绘制双击直接改变矢量图层

的颜色添加必要的细节28/32扁平化图标的风格分类立体化和厚度感图标特点：厚度、细节优点：有明显的厚度，明显的立体感，有厚重感，有一定的细节29/32本章总结什么是扁平化风格设计？扁平化风格设计的优点和缺点是？扁平化风格有哪些分类？30/32