图标设计刘腾刘燕江32课件.pptxVIP

图/标/设/计教师：刘腾、刘燕江AE2022

项目4应用图标

CONTENTS目录启动图标绘制03.扁平图标绘制01.轻拟物图标绘制02.

学习成果010203掌握金刚区图标绘制掌握轻拟物图标绘制掌握启动图标绘制扁平图标绘制——相机图标制作轻拟物图标绘制——绿叶水珠图标启动图标绘制——哑铃图标制作

01.项目概述AE

设计背景拟物主要应用在关键的图标上也常常应用在一些产品启动图标上，我们追求的那种极其真实、复杂的拟物，优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。

任务三启动图标绘制

01应用图标的作用02应用图标绘制方法及流程03任务实施04总结任务三启动图标绘制内容目录

启动图标绘制1.应用图标的作用在我们手机里安装了许许多多的应用，除了一些我们每天必须使用的应用如微信，其他大多数的应用在没有使用场景时很难想到去打开他们。打开率是一款移动应用的重要数据，应用只有被打开才有它的运营价值。

启动图标绘制1.应用图标的作用因此，这些应用如何在手机屏幕上吸引用户的注意，鼓励用户打开显得非常重要。于是在应用图标上做文章就显得很有必要，常见的设计手法有：

启动图标绘制2.应用图标绘制方法及流程在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；1.1iOS应用图标

启动图标绘制2.应用图标绘制方法及流程把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。2.1iOS应用图标

启动图标绘制2.应用图标绘制方法及流程安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。2.2安卓应用图标

启动图标绘制2.应用图标绘制方法及流程在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。2.3iOS应用图标设计流程

启动图标绘制2.应用图标绘制方法及流程寻找隐喻隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。

启动图标绘制2.应用图标绘制方法及流程竞品分析应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。

启动图标绘制2.应用图标绘制方法及流程提取关键词根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。

启动图标绘制2.应用图标绘制方法及流程抽象图形确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。

启动图标绘制2.应用图标绘制方法及流程图标栅格线使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。

启动图标绘制2.应用图标绘制方法及流程图标栅格线通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。

启动图标绘制2.应用图标绘制方法及流程多场景测试将应用图标设计稿交付开发提交至AppStore上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。注：上图非实际大小，仅表明不同分辨率下的比例关系

启动图标绘制2.应用图标绘制方法及流程多场景测试此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone8plus上需@