移动端APPUI设计与交互基础教程-第2章--UI图标设计.pptx

1、设计与交互基础教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移动端APPUI02UI图标设计本章依托UI设计中常见图标的制作方法与质感表现，在介绍图标制作规范的基础上，巩固和加强Photoshop软件在UI设计中的核心操作。2.1初识移动设备尺寸及其相关概念1px2pt3分辨率（1）物理分辨率（2）逻辑分辨率4缩放倍率5ppi6dpi2.1.1px、pt和ppi等相关概念2.1初识移动设备尺寸及其相关概念2.1.2iPhone机型屏幕尺寸规格2.2UI图标设计1系统图标（按属性分类）系统图标指的是系统功能或APP应用程序的启动图标。2功

2、能图标（按属性分类）功能图标指的是承担着某种功能的图标。2.2.1图标的分类图2-1系统图标图2-2功能图标2.2UI图标设计3线性图标和剪影图标（按设计风格分类）线性图标的外观由线条组成，而剪影图标由填充轮廓的方式进行表现。4扁平化图标（按设计风格分类）扁平化图标就是指那些去掉装饰效果（投影、高光、纹理和渐变等）的图标。2.2.1图标的分类图2-3线性图标和剪影图标图2-4扁平化图标设计2.2UI图标设计5拟物化图标（按设计风格分类）拟物化图标指的是模拟现实物品的造型和质感的图标。2.2.1图标的分类图2-5拟物化图标2.2UI图标设计1存储格式（1）JPEG（2）PNG2图标尺寸（1）iO

3、S系统2.2.2常见存储格式与图标尺寸2.2UI图标设计（2）Android系统2.2.2常见存储格式与图标尺寸2.2UI图标设计1使用产品名字的首字母或一个字2.2.3APP启动图标的常见创意设计方法2使用品牌名字全称2.2UI图标设计3使用产品核心功能的图形2.2.3APP启动图标的常见创意设计方法4使用产品形象2.3线性图标2.3.1线性图标概述线性图标也可以称为功能性图标，这是因为线性图标大多数用于APP应用的某些具体功能展示方面。图2-11线性图标图2-12多种风格的线性图标2.3线性图标2.3.2线性图标的制作（WIFI图标）2.3.3课堂巩固练习（Keep图标）1.1UI设计行业

4、的发展前景2ID（InteractionDesign）交互设计交互指的是人和机器互动的过程，交互设计通过了解人的心理、目标和期望，使用有效的交互方式来让整个过程可用、易用。3UE（UserExperience）用户体验UE是指用户使用一个产品时的全部体验，这种体验主要来自用户和人机界面的交互过程。1.1.1认识相关概念2.4剪影类图标2.4.1剪影类图标概述剪影指的是形态明显且没有影调细节的黑影。包含剪影的画面，形象表现力取决于形象动作的鲜明轮廓，这种手法也经常用在图标设计中。图2-25双色设计图2-26正负组合型设计2.4剪影类图标2.4.2剪影类图标的制作（抖音APP图标）图2-27抖音A

5、PP图标解析2.4剪影类图标2.4.3课堂巩固练习（微信图标）图2-41制作气泡图2-42微信图标制作完成2.5扁平化与长阴影类图标2.5.1知识点概述1扁平化图标扁平化指的是在设计手法上摒弃高光、阴影等造成透视感的制作方法，通过简化和抽象的设计元素直观传递信息内涵。2长阴影图标长阴影图标指的是以扁平化设计为基础，添加简单投影效果的图标。图2-43扁平化图标图2-44长阴影图标2.5扁平化与长阴影类图标2.5.2扁平化与长阴影图标制作（指南针图标）图2-45扁平化图标（指南针）解析图2-46扁平化图标（文字类）解析2.5扁平化与长阴影类图标2.5.3课堂巩固练习（一组扁平化图标）图2-59扁平化图标一组2.6拟物类图标的制作2.6.1知识点概述1拟物拟物指的是通过叠加高光、纹理、材质、阴影等效果对实物进行再现，其设计元素均来自于真实生活接触的物件。2拟物与扁平拟物与扁平是相互对立的设计理念，作为设计师应该多关注信息本身的含义，而对于元素承载信息量的多少则要根据产品的用户角色来综合考量。图2-60质感细节明显的拟物图标2.6拟物类图标的制作2.6.2拟物化图标制作（木纹质感翻页日历）图2-61拟物化图标效果分析2.6拟物类图标的制作2.6.3课堂巩固练习（拟物齿轮）图2-83齿轮拟物图标图2-84快速绘制齿轮谢谢观看！