版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年铁路客运行业企业战略风险管理报告
- 《叶圣陶先生二三事》公开课教学设计(部编人教版七下)
- 《荷叶•母亲》教学课件(部编人教版七年级语文上册)
- 2024年HIPS行业企业战略发展规划及建议
- 2024年LED手电筒项目调研分析报告
- 2024年红细胞溶血素项目投资建议书
- 2024年卫星云图接收设备行业企业战略风险管理报告
- 云南省昆明市晋宁县夕阳民族中学高一英语测试题含解析
- 2024年岸机电产品市场分析及竞争策略报告
- 2024年闸机系统项目创业投资方案
- 机械工程概论知到章节答案智慧树2023年武汉科技大学
- 【基于杜邦分析法的企业盈利能力研究国内外文献综述4000字】
- 常见上市公司名称证券名称中英对照表
- PEP人教版小学英语五年级下册第四单元 《 Unit 4 When is the art show》read and write 教案
- (word完整版)高速公路封道施工标志标牌示意图
- 生理学全部教案
- 组织行为学(山东大学)智慧树知到答案章节测试2023年
- 机械制图套试卷及答案
- 《计算机与网络技术基础》
- 红色记忆PPT-刘伯承元帅
- 英文电影鉴赏智慧树知到答案章节测试2023年
评论
0/150
提交评论