《数据恢复技术与应用》课件-项目八

20202020年立项金课UI创意设计元素图形YUANSUTUXINGCHUANGYISHEJI动态图标的概念动态图标范例-已上线动态图标的类型AE操作入门动态图标项目实战四三二第8章动态图标设计分为5个部分一五一、动态图标的概念“动态图标”的说法最初来源于“动态图形”，动态图形（MotionGraphics）是专业术语，通常指的是“随时间流动而改变形态的图形”，简单的来说动态图形可以解释为会动的图形设计，是影像艺术的一种。动态图形融合了平面设计、动画设计和电影语言，它的表现形式丰富多样，具有极强的包容性，总能和各种表现形式以及艺术风格混搭。主要应用领域集中于节目频道包装、电影电视片头、商业广告、MV、现场舞台屏幕、互动装置等等。将动态图形的表现形式应用于UI、VI等图标设计中，称为“动态图标”。二、动态图标范例-已上线2020年东京奥运会及残奥会，东京奥运组委会公布了运动会项目中使用的73个全新动态图标。这是自1964年首次引入静态图标后，东京再度首次成为引入动态图标的奥运城市。本次发布的73个奥运比赛项目的动态图标，包括50个奥运会图标（包含33个奥运会项目）和22种残奥会运动项目，如图。东京奥运会动态图标二、动态图标范例-已上线图标以简洁的形式巧妙传达出每项运动的特点和运动精神，艺术地强调出了运动员的活力。没有多余的修饰，颜色也只选用了代表日本国家队的蓝色，图标与留白的背景相结合，让人产生意犹未尽之感。东京奥运会动态图标二、动态图标范例-已上线北京冬奥会动态图标北京2022冬奥会和冬残奥会也使用了动态体育图标，如图。图标将篆刻与汉字相互融合，与北京2008年奥运会会徽“中国印”遥相呼应，又一次为奥林匹克运动贡献了“中国文化符号”。二、动态图标范例-已上线北京冬奥会动态图标如果说传统的静态版图标展现了中国古老的书法与篆刻艺术之优雅，那么动起来的图标则展现了冬季运动的速度与动感！30个体育图标以超感动图的形式，在2-3秒的视频动画中，由二维的篆刻转换为三维的冰雪运动，高度同步、快速重复，给观众一种很“燃”的效果。二、动态图标范例-已上线课程思政提升爱国情怀、了解中国传统文化、传承文化精神中国篆刻是以石材为主要材料，以刻刀为工具，以汉字为表象的一门独特的镌刻艺术。它由中国古代的印章制作技艺发展而来，是我国非物质文化遗产，至今已有3000多年的历史。二、动态图标范例-已上线课程思政早在2008年北京奥运会，设计团队就已经把篆刻文化融入到了奥运会logo和图标的设计中，2022年冬奥会，某种意义上是这种文化推广的传承和升华。作为新时代的青年，我们应该有民族自信，在平时多了解中国传统文化和民族元素，用丰富的民族文化历史沉淀、坚定的理想信念和鲜活的时代担当责任意识为我们的设计作品注入灵魂和特色。提升爱国情怀、了解中国传统文化、传承文化精神二、动态图标范例-已上线课程思政提升爱国情怀、了解中国传统文化、传承文化精神中国篆刻是以石材为主要材料，以刻刀为工具，以汉字为表象的一门独特的镌刻艺术。它由中国古代的印章制作技艺发展而来，是我国非物质文化遗产，至今已有3000多年的历史。早在2008年北京奥运会，设计团队就已经把篆刻文化融入到了奥运会logo和图标的设计中，2022年冬奥会，某种意义上是这种文化推广的传承和升华。作为新时代的青年，我们应该有民族自信，在平时多了解中国传统文化和民族元素，用丰富的民族文化历史沉淀、坚定的理想信念和鲜活的时代担当责任意识为我们的设计作品注入灵魂和特色。二、动态图标范例-已上线无印良品动态图标韩国设计师YunjungSeo创作了一组无印良品的icon。如图。自然、简约、质朴的生活方式一直是无印良品所倡导的。虽然极力淡化品牌意识，却遵循统一的设计理念。这组icon包括30个动态图标，极简的线条与无印良品的产品设计风格一致。三、动态图标的类型视觉引导（一）利益点曝光（二）任务引导（三）情感共鸣（四）（一）视觉引导在商业化炽热的环境下，大家都尽可能地将这几秒内的几十帧图形塞的满满当当，尽可能利用它承载更多的商业功能。而单纯的视觉引导图标，最主要的功能是传递出新功能上线的信息。（二）利益点曝光美团买药这个icon属于利益点曝光这个类型，也算是设计难度较高的一类。这一类icon的设计要点是信息的进出节奏，和单帧的信噪比。用户不会为此停留而中断原本任务，所以转场次数不宜超过3次（保证每个分镜有1秒）、人像必须放大（保证不同分辨率设备都能识别）、利益点描述必须精简（1秒内读完可以理解）。（二）利益点曝光就算“买药”这个icon并没有从繁杂的首页中跳脱，而用户的视线划过它只用了0.2秒。在这0.2秒里，哪怕用户只瞥见一个分镜，这个分镜的内容对于“美团买药”功能的营销传播也是有效的。（三）任务引导这一类案例在信息秩序的表达上相对简单，逻辑清晰，设计可以着重发力在视觉创新上，结合品牌符号创造有记忆点的设计。“签到领福利”算是这一类动态icon最典型的体现了。设计要点除了动效好看之外，图标必须附注说明：“签到”字样和利益点元素，保证在最短时间同步用户认知。（四）情感共鸣说到视觉创新和情感共鸣，不得不提这个我们每天都会刷的蚂蚁森林。已经忘了曾几何时，蚂蚁森林待收能量开始通过这个会动的小树苗来提醒用户。我每天收能量之前都会把它完整地看一遍。这的确是一个很轻量但很有记忆点的设计，icon在原本廓形的基础上进行生长动画的叠加，而能量球出现在刚刚好的时间点。不但不会造成视觉干扰，反而加深了“蚂蚁森林”这个品牌标识的留存印象。（四）情感共鸣随申办APP首页的消息提醒元素设计选择了上海的经典美食小笼包作为情感传递的视觉载体，增强用户启动首页后的情感归属和心理认同，赋予一个工具类APP以有趣的性格，拉近与用户的距离。另一方面小笼包本身也发挥了“播报员”的职能：在有新消息的时候会弹出提示红点，引导用户点击查看；没有新消息的时候，也作为一个动态视觉引导元素，实时提供天气预报等日常信息。（四）情感共鸣与此类似的还有考拉海购在首页推出的考拉乐园。考拉乐园是一个类似之前美团“袋鼠快跑”的促活养成型小游戏，通过合并同类项完成升级。视觉元素十分简要，一只考拉抱着装满商品的礼盒，是一个有温度的icon设计。（五）课堂练习1请读者拿出手机或平板电脑，打开常使用的APP，找出里面使用的动态图标，并分析其属于那种类型。分析的过程中锻炼观察力、审美能力和口头表达能力。AdobeAfterEffects简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。四、AE软件操作入门AE软件介绍四、AE软件操作入门AE软件布局四、AE软件操作入门AE工作流程使用AE制作动态效果，主要有如下几个常规的流程：1新建合成打开AE后需要新建一个合成，新建合成的方法有很多。比如，可以直接从素材新建合成，也可以创建一个空合成，然后在其中新建纯色图层、形状图层、摄像机图层、灯光图层等基础视觉元素。时间轴面板是Ae的主要工作空间。时间轴面板上的图层顺序与查看器（合成面板）上的堆叠顺序相对应。四、AE软件操作入门AE工作流程使用AE制作动态效果，主要有如下几个常规的流程：2导入素材AE可以导入各种类型的媒体文件，如图片（静止图像）、视频、音频、动图（GIF）、图像序列和分层图像文件（psd或ai格式文件）等。所有导入的素材都会在项目面板显示，制作动画时，把素材拖动到图层面板即可。四、AE软件操作入门AE工作流程3设置动态效果AE做动态图标主要有三种基本的动态效果，分别是位移、旋转和缩放。基本所有图标的动态效果都是这三种类型的组合。然后通过关键帧、表达式以及关键帧辅助等，让视觉元素的属性随着时间或空间的变化而动态变化。这是最细致、最耗时的一步，同时也是最重要、最富创造性的一步。做好动态效果后，需要预览动画效果，可按空格键进行播放或停止预览，也可使用预览面板。使用AE制作动态效果，主要有如下几个常规的流程：四、AE软件操作入门AE工作流程4渲染输出首先检查工作区域，它决定了渲染导出视频的时间范围，然后审查合成设置。按B键和N键来设置工作区域的开始和结束。检查效果无误后，点击菜单中的合成、添加到渲染队列，快捷键是Ctrl+M。然后在渲染队列中设置渲染格式于路径等。使用AE制作动态效果，主要有如下几个常规的流程：课堂练习2请读者下载并安装AE软件，制作如下动态图标，熟悉AE软件的界面构成与制作流程。五、动态图标项目实战（一）项目实战“weather”是一款天气类APP，如图，现需要对天气图标进行动态化设计，请根据图中已有的天