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

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

  1. 1、本文档共21页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
设计与交互基础教程移动端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 快速绘制齿轮 谢谢观看!

文档评论(0)

book_zhj + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

版权声明书
用户编号:8002066073000063

1亿VIP精品文档

相关文档