移动端APP-UI设计与交互基础教程--课件第3章--UI图标设计.pptxVIP

设计与交互基础教程移动端APP UI 03UI图标设计本章依托UI设计中常见图标的制作方法与质感表现，在介绍图标制作规范的基础上，巩固和加强Photoshop软件在UI设计中的核心操作。 3.1 UI图标设计1．系统图标（按属性分类）系统图标指的是系统功能或APP应用程序的启动图标。2．功能图标（按属性分类）功能图标指的是承担着某种功能的图标。3.1.1 图标的分类图3-1 系统图标 图3-2 功能图标 3.2 UI图标设计3．线性图标和剪影图标（按设计风格分类）线性图标的外观由线条组成，而剪影图标由填充轮廓的方式进行表现。4．扁平化图标（按设计风格分类）扁平化图标就是指那些去掉装饰效果（投影、高光、纹理和渐变等）的图标。3.2.1 图标的分类图3-3 线性图标和剪影图标 图3-4 扁平化图标设计 3.2 UI图标设计5．拟物化图标（按设计风格分类）拟物化图标指的是模拟现实物品的造型和质感的图标。3.2.1 图标的分类图3-5 拟物化图标 3.2 UI图标设计1．存储格式（1）JPEG（2）PNG2．图标尺寸（1）iOS系统3.2.2 常见存储格式与图标尺寸 3.2 UI图标设计（2）Android系统3.2.2 常见存储格式与图标尺寸 3.2 UI图标设计1．使用产品名字的首字母或一个字3.2.3 APP启动图标的常见创意设计方法2．使用品牌名字全称 3.2 UI图标设计3．使用产品核心功能的图形3.2.3 APP启动图标的常见创意设计方法4．使用产品形象 3.3 线性图标3.3.1 线性图标概述线性图标也可以称为功能性图标，这是因为线性图标大多数用于APP应用的某些具体功能展示方面。图3-11 线性图标图3-12 多种风格的线性图标 3.3 线性图标2.3.2 线性图标的制作（WIFI图标）2.3.3 课堂巩固练习（Keep图标） 3.3 剪影类图标3.3.1 剪影类图标概述剪影指的是形态明显且没有影调细节的黑影。包含剪影的画面，形象表现力取决于形象动作的鲜明轮廓，这种手法也经常用在图标设计中。图3-25 双色设计图3-26 正负组合型设计 3.3 剪影类图标3.3.2 剪影类图标的制作（抖音APP图标）图3-27 抖音APP图标解析 3.3 剪影类图标3.3.3 课堂巩固练习（微信图标） 图3-41 制作气泡 图3-42 微信图标制作完成 3.4 扁平化与长阴影类图标3.4.1 知识点概述1．扁平化图标扁平化指的是在设计手法上摒弃高光、阴影等造成透视感的制作方法，通过简化和抽象的设计元素直观传递信息内涵。2．长阴影图标长阴影图标指的是以扁平化设计为基础，添加简单投影效果的图标。图3-43 扁平化图标 图3-44 长阴影图标 3.4 扁平化与长阴影类图标3.4.2 扁平化与长阴影图标制作（指南针图标）图3-45 扁平化图标（指南针）解析 图3-46 扁平化图标（文字类）解析 3.4 扁平化与长阴影类图标3.4.3 课堂巩固练习（一组扁平化图标）图3-59 扁平化图标一组 3.5 拟物类图标的制作3.5.1 知识点概述1．拟物拟物指的是通过叠加高光、纹理、材质、阴影等效果对实物进行再现，其设计元素均来自于真实生活接触的物件。2．拟物与扁平拟物与扁平是相互对立的设计理念，作为设计师应该多关注信息本身的含义，而对于元素承载信息量的多少则要根据产品的用户角色来综合考量。图3-60 质感细节明显的拟物图标 3.5 拟物类图标的制作3.5.2 拟物化图标制作（木纹质感翻页日历）图3-61 拟物化图标效果分析 3.5 拟物类图标的制作3.5.3 课堂巩固练习（拟物齿轮）图3-83 齿轮拟物图标 图3-84 快速绘制齿轮 谢谢观看！