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

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

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

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

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

5、合型设计2.4 剪影类图标2.4.2 剪影类图标的制作（抖音APP图标）图2-27 抖音APP图标解析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 扁平化图标（指南针）解

6、析 图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 快速绘制齿轮谢谢观看！