版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、设计与交互基础教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移动端APP UI02UI图标设计本章依托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)J
3、PEG(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 线性图标的制作(WIF
4、I图标)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 扁平化图标(指南针)解析 图2-46 扁平化图标(文字类)解析2.5 扁平化与长阴影类图标2.5.3 课堂巩固练习(一组扁平化图标)图2-59 扁平化图标一组2.6 拟物类图标的制作2.6.1 知识点概述1拟物拟物指的是通过叠加高光、纹理、材质、阴影等效果对实物进行再现,其设计元素均来自于真实生活接触的物件。2拟物与扁平拟物与扁平是相互对立的设计理念,作为设计师应该多关注信息本身的含义,而对于元素承载信息量的多少则要根据产品的用户角色来综合考量。图2-60 质感细节明显的拟物图标2.6 拟物类图标的制作2.6.2
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 基于机器视觉的先进辅助驾驶系统关键技术研究
- 机场行李输送系统项目可行性报告
- 个人水利工作总结
- 个人售票员年终总结
- 开司米酮项目可行性报告
- 三年级班主任下学期工作计划
- 七年级下学期班主任工作计划
- 教师公开招聘考试(中学历史)模拟试卷35
- 专项化学用品项目可行性报告
- 2024年公路管理与养护服务项目建议书
- 2022年08月北京经济技术开发区招考18名聘任制工作人员笔试参考题库+答案详解
- 电大护理本科临床实习手册内容(原表)
- 入团考试试题及答案
- 2023年软件评测师真题(含答案)
- 5篇班车服务合同范本-1
- CPK控制图-自动生成原始数据计算CPK
- 标准食品经营操作流程图
- 传染病管理工作流程图
- 2022-2023学年江苏省常州市统招专升本数学自考真题(含答案)
- 髋膝关节置换术加速康复围手术期管理
- ArcGIS Engine地理信息系统开发教程 第6章 空间数据编辑
评论
0/150
提交评论