1、拟物化风格图标设计课程回顾n 扁平化风格概述n 扁平化风格设计原则n 扁平化风格的特点n 扁平化风格的分类2/33本章任务n 了解拟物化设计的概念n 熟知拟物化启动图标设计的流程n 了解启动图标的设计原则n 能够使用Photoshop进行拟物化图标的设计3/33目录n 拟物化设计的概念n 拟物化启动图标设计的流程n 启动图标的设计原则4/33拟物化设计的概念n 拟物化设计的概念l“拟物化”一词来源于古希腊，意思是只要看到它的外在形态，就能知道它是用来做什么的l“拟物化”设计是一种以保留原始被模仿对象的各种装饰元素为基础、并由此衍生出来的设计风格5/33拟物化设计的概念n 拟物化设计的概念哪一幅
2、运用了拟物化风格?6/33拟物化设计的概念哪一幅运用了拟物化风格?7/33拟物化设计的概念n 拟物化设计的优点l外观完全与现实事物相似，用户认知和学习成本低l交互与现实事物保持一致l动态效果高度统一，给用户以人性化的体贴8/33拟物化设计的概念n 拟物化设计的缺点l花费大量的时间在视觉的阴影和质感效果上l要求设计师有更深厚的设计功底和更熟练的软件使用l在适配方面比较复杂和麻烦9/33拟物化设计的概念n 拟物化设计的核心：提取物体的关键元素：它们的关键元素是？10/33拟物化设计的概念n 拟物化设计的核心：提取物体的关键元素：它们的关键元素是？11/33演示案例n需求描述l完成拟物化风格日历启动
3、图标设计演示案例：拟物化风格日历启动图标设计n实现思路l使用形状工具和钢笔工具绘制整体的结构和布局l给图标上色，将各部分大致的颜色分出来l为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节12/33课堂练习n 需求描述l完成拟物化风格旋钮设计n 实现思路l使用形状工具和钢笔工具绘制整体的结构和布局l给图标上色，将各部分大致的颜色分出来l为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：拟物化风格旋钮设计13/33目录n 拟物化设计的概念n 拟物化启动图标设计的流程n 启动图标的设计原则14/33拟物化启动图标设计的流程n 拟物化启动图标15/3
4、3拟物化启动图标设计的流程n 从实际出发 台球App图标16/33拟物化启动图标设计的流程n 从现有图形系统出发p被人们熟知p被人们认同p避免引起歧义设置图标17/33拟物化启动图标设计的流程n 从竞品出发开始l相同类型l竞争对手l不同平台ppcpwebpphonep18/33演示案例：拟物化风格抽屉邮件图标设计l从实际出发。l根据这个设计的需求找到相关素材主题“抽屉”、“邮件”19/33演示案例：拟物化风格抽屉邮件图标设计l从现有图形系统出发20/33演示案例：拟物化风格抽屉邮件图标设计l从竞品出发开始21/33演示案例演示案例：拟物化风格抽屉邮件图标设计n 需求描述l完成拟物化风格抽屉邮件
5、图标设计n 实现思路l使用钢笔工具和图形工具绘制图标的整体结构l双击图层缩略图，更改形状图层的颜色l为图层增加图层样式，通过添加颜色渐变、内发光、外发光等为图标增加更多的质感和细节l将图标作为一张图片进行修整，在最上面增加一个图层调整整体的光感22/33课堂练习n 需求描述l完成拟物化风格复古磁带图标设计n 实现思路l使用形状工具和钢笔工具绘制整体的结构和布局l给图标上色，将各大部分大致的颜色分出来l为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：拟物化风格复古磁带图标设计23/33目录n 拟物化设计的概念n 拟物化启动图标设计的流程n 启动图标的设计原则24/
6、33启动图标的设计原则n 严格遵守平台下的规范进行设计 iOS系统启动图标尺寸的设计规范25/33启动图标的设计原则n 严格遵守平台下的规范进行设计n 注意lApp启动图标在设计时要考虑后期是否要印刷，设计时的像素大小直接影响后期印刷效果l为了防止图片过大引起的卡机、死机现象，或后期修改带来的被动因素，设计时请尽量使用矢量软件或PS里的矢量工具来设计26/33启动图标的设计原则n 严格遵守平台下的规范进行设计n 考虑在各个平台实际应用中的情景n 必须符合国家相关规定n 考虑受众群体的审美需求27/33演示案例演示案例：拟物化风格相机图标设计n 需求描述l完成拟物化风格相机图标设计n 实现思路l
7、仔细观察现实中的相机的模样，抓取它的关键元素l对相机图标进行拆分l使用圆形工具绘制几个同心圆，然后分别为其增加图层样式l绘制光晕镜头l各个圆形之间的完美对齐28/33课堂练习n 需求描述l完成拟物化风格可爱照相机图标设计n 实现思路l使用形状工具和钢笔工具绘制整体的结构和布局l给图标上色，将各部分大致的颜色分出来l为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：拟物化风格可爱照相机图标设计29/33课堂练习n 需求描述l完成拟物化风格圆角直尺图标设计n 实现思路l使用形状工具和钢笔工具绘制整体的结构和布局l给图标上色，将各大部分大致的颜色分出来l为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：拟物化风格圆角直尺图标设计30/33本章总结n 什么是拟物化风格设计？n 拟物化启动图标设计的流程是什么？n 启动图标的设计原则是什么？n 拟物化和扁平化设计，哪一个更好？31/33
