1、扁平化风格图标设计课程回顾n iOS系统图标设计规范n Android系统图标设计规范n 双系统下启动图标的设计2/32本章任务n 掌握长阴影风格图标的设计方法n 掌握扁平化风格图标的设计方法n 掌握折纸风格图标的设计方法3/32目录n 扁平化风格概述n 扁平化风格设计原则n 扁平化风格的特点n 扁平化风格的分类4/32扁平化风格概述n 扁平化风格的由来 扁平风格的苹果手机界面5/32扁平化风格概述 Windows 8的主要界面显示风格6/32目录n 扁平化风格概述n 扁平化风格设计原则n 扁平化风格的特点n 扁平化风格的分类7/32扁平化风格设计原则n 拒绝特效n 使用简单的元素n 注重排版
2、n 关注色彩n 极简主义8/32扁平化风格设计原则n 拒绝特效n 使用简单的元素n 注重排版n 关注色彩n 极简主义9/32扁平化风格设计原则n 拒绝特效n 使用简单的元素n 注重排版n 关注色彩n 极简主义10/32扁平化风格设计原则n 拒绝特效n 使用简单的元素n 注重排版n 关注色彩n 极简主义11/32扁平化风格设计原则n 拒绝特效n 使用简单的元素n 注重排版n 关注色彩n 极简主义12/32演示案例演示案例：扁平化风格相机图标设计n 需求描述l绘制扁平化风格相机图标设计n 实现思路l使用钢笔工具和图形工具勾勒轮廓l双击图层缩略图调整形状图层的颜色l结合钢笔工具和部分选择工具增加细节
3、13/32课堂练习课堂练习：扁平风格图标设计n 需求描述 l绘制扁平风格图标设计n 实现思路l使用圆角矩形工具绘制基础图形，以此为依据进行图标设计l抓住图标的特点进行绘制l双击直接改变矢量图层的颜色l添加必要的细节14/32目录n 扁平化风格概述n 扁平化风格设计原则n 扁平化风格的特点n 扁平化风格的分类15/32扁平化风格设计的特点l去掉冗余的装饰效果l让“信息”本身重新作为核心被凸显出来l在设计元素上强调抽象、极简、符号化l信息架构上的扁平，能让用户能更快得到关心的信息l需要一定的学习成本，传达的感情不丰富16/32目录n 扁平化风格概述n 扁平化风格设计原则n 扁平化风格的特点n 扁平
4、化风格的分类17/32扁平化图标的风格分类l纯平面图标l轻折叠图标l轻质感图标l折纸风图标l长投影图标l立体化和厚度感图标18/32扁平化图标的风格分类l纯平面图标l特点：纯色、剪影l优点：简洁、清新、舒服、视觉识别度较好，色彩明朗，设计感强烈，图形表现高度概括19/32扁平化图标的风格分类l轻折叠图标l特点：纯色、折痕、轻投影l优点：比纯平面丰富，有轻微视觉空间感，色彩明朗，轻投影，营造出轻盈的感觉，视觉统一性好20/32扁平化图标的风格分类l轻质感图标l特点：轻渐变、层次简单、轻投影l优点：简洁、干净、明朗，有一定的精致感，有简单的层次，轻投影创造轻度立体感而又轻盈清新，内容相对丰富21/
5、32扁平化图标的风格分类l折纸风图标l特点：折叠、投影、结构l优点：层次丰富，结构明显，易于创造控件立体感，几何感明显，复杂和简洁结合，挑战了扁平化的立体性22/32扁平化图标的风格分类l折纸风格图标的艺术特征p象征性与识别性p立体空间的体现p搭建了情感互通的体验平台23/32演示案例演示案例：折纸风格设置图标设计n 需求描述：l完成折纸风格设置图标设计n 实现思路l对复杂的图形进行拆分，分析图标的各个组成部分l对白色圆圈进行对齐和平分l使用图层蒙版进行齿轮豁口的处理l细节调整、完成制作24/32扁平化图标的风格分类l长投影图标l特点：投影、层次l优点：色彩对比度大，有明显而单纯的投影，创造鲜
6、明的层次感和空间感，视觉冲击强烈25/32扁平化图标的风格分类l长阴影图标的特点p阴影往往是干净、独特的，以一定角度来进行投射的或是扁平的、无渐变的，或是有一定明暗变化和衰退的p由于长阴影图标的阴影有时并不符合光影逻辑，造成与iOS启动图标采用顶部光源的设计规范相悖，在设计上需要格外注意26/32演示案例演示案例：Safari长阴影图标设计n 需求描述l绘制Safari长阴影图标设计n 实现思路l在临摹图标之前，首先要对其进行分析，将设计思路和元素之间的关系思考清晰，并对其进行拆分l使用钢笔工具和矢量工具，合理对形状图层进行相交和相减，制作长阴影27/32课堂练习课堂练习：长阴影风格图标设计n 需求描述l绘制Safari长阴影图标设计n 实现思路l使用圆角矩形工具绘制基础图形，以此为依据进行图标设计p抓住图标的特点进行绘制p双击直接改变矢量图层的颜色p添加必要的细节28/32扁平化图标的风格分类l立体化和厚度感图标l特点：厚度、细节l优点：有明显的厚度，明显的立体感，有厚重感，有一定的细节29/32本章总结n 什么是扁平化风格设计？n 扁平化风格设计的优点和缺点是？n 扁平化风格有哪些分类？30/32
