《UI设计项目教程（AI助创 微课版）》课件 项目八 界面标注、切图与动效设计

项目8界面标注、切图与动效设计UI设计项目教程（AI助创微课版）高等院校艺术设计精品系列教材CONTENTS8.18.2界面切图8.3界面动效设计8.4实践训练界面标注8.1.1界面标注的内容1尺寸标注2间距标注3文字标注4颜色标注5状态标注设计师应标注界面中所有需要注明尺寸的内容，如图标、图片、头像等。间距即图片、图形等之间的垂直距离和水平距离。对于文字，设计师应标注字体、字重、字号、颜色、透明度、行高、字距、对齐方式等。颜色即分隔线、界面背景、图标、按钮等元素的颜色，对这些部分进行标注可便于对颜色的区分，在标注时一般选择十六进制或RGB格式。对于可交互元素，需要明确该元素是否有特殊状态，如选中状态、默认状态、悬停状态、禁用状态、加载状态等，若有，应标注其不同状态下的样式变化。8.1.2界面标注的规范在进行界面标注时，还要注意精准度，如两个按钮之间的距离、内容与界面两侧的距离等要与真实数据完全匹配。在进行界面标注时，要注意标注方式，整齐的标注不但视觉效果更加美观，而且便于开发人员查找标注信息。在进行界面标注时，标注文字所用的颜色应该与所设计的界面颜色区分开，必要时可通过描边的方式进行区分。标注颜色标注方式精准度0302018.1.3界面标注的常用工具01SketchMeasureSketchMeasure是一款能够自动标注、切图的插件，具有智能

识别并标注的功能，能快速识别PSD文件的文字、颜色、距离。02PxCookPxCook是一款兼具智能标注和手动标注的工具，其智能标注功能可以极大

提升标注的效率和准确性。同时该工具具有单位转换、自定义注释文字、手动修改标注的长度、自定义标注颜色等功能。03摹客摹客是一款智能标注和切图工具，具有自动标注和手动标注两种基本标注

功能，为产品经理、设计师、开发工程师提供一站式产品协作设计支持，而且支持上传使用Sketch、Figma、AdobeXD、Photoshop等主流工具设计生成的设计稿。04MarkManMarkMan是一款高效的设计稿标注、测量工具，可方便地对设计稿进行标注，极大地节省了设计师在设计稿上添加和修改标注内容的时间。【案例】标注美食App首页1．案例背景“食刻”美食App界面设计项目正式进入了开发阶段，为确保后期人员能精准、高效地还原设计稿，避免因理解偏差导致反复修改，设计师决定进行一次系统、规范的界面标注，现需以首页为参考对象进行标注，要求标注信息必须清晰易读，同类元素的标注方式保持一致。2．设计思路由于美食App首页中的内容比较复杂，因此本案例将按照界面从上到下的顺序，依次标注其中的尺寸、间距、文字、颜色这四大要素。标注尺寸时可标注出界面核心内容的具体尺寸、可点击区域、矢量图形的圆角半径；标注间距时可标注出所有模块之间的间距；标注文字时可标注出界面中的字体、字号、字重以及文字的颜色和位置；标注颜色时可标注出界面中图标、背景、按钮等元素的颜色。【案例】标注美食App首页3．操作提示（1）新建项目。（2）标注尺寸。（3）标注区域。（4）标注圆角半径。（5）导出尺寸标注。（6）标注间距。（7）标注文字。（8）标注颜色。（9）保存文件。【案例】标注美食App首页CONTENTS8.18.2界面切图8.3界面动效设计8.4实践训练界面标注8.2.1切图的操作要点切图尺寸必须为偶数01尽量压缩图片文件的大小02根据标准尺寸输出03避免切图遗漏。048.2.2切图命名规范为确保设计元素在开发环节中被高效、准确地实现，并最终在多端设备上获得高保真的视觉效果，制定并遵守统一的切图命名规范至关重要。切图的命名多采用小写英文字母，同时避免使用中文和空格，单词间用“_”连接，其格式通常为“功能_类型_名称_状态@倍数”。其中，功能指元素所在的核心功能模块或页面；类型指元素的类型；名称指具体描述该元素作用的名称；状态指元素的交互状态；倍数指指定资源的目标屏幕分辨率倍率。【案例】旅游网站首页切图1．案例背景“漫游者”旅游网站首页的界面设计工作已全部完成，项目正式进入前端开发阶段。为确保设计稿能被精准、高效地转化为网页代码，并保障最终上线的界面在不同设备与浏览器中都具有一致的视觉效果与优良的性能，现需要使用PxCook的切图插件“PS切图工具”对该首页进行系统性的切图和资源输出。2．设计思路切图时，需直接在源文件中系统性地识别并导出所有关键元素，包括功能性图标、图片与品牌标志。针对网站特性，图标类元素可优先导出为带透明通道的PNG格式，以确保清晰度。对于首页Banner等大型图片，在保证视觉质量的前提下，可优先采用JPEG格式，以显著减小文件体积，提升界面加载速度。所有资源都将遵循统一的命名规范，并输出为一个结构清晰、命名规范的切图资源包，为前端开发提供有力支持，确保设计细节的还原性。【案例】旅游网站首页切图3．操作提示（1）启用远程连接。（2）连接PxCook。（3）切旅游网站Logo。（4）切Banner。（5）切导航按钮。（6）切图其他内容。（7）查看切图效果。CONTENTS8.18.2界面切图8.3界面动效设计8.4实践训练界面标注8.3.1动效的类型1．功能性动效功能性动效以明确的实用目的为核心，旨在通过直观的视觉语言，提升界面的可理解性与直观性，其可以细分为以下类型。该动效主要用于显示系统状态、操作结果和进程信息，是建立用户对产品的信任的关键。状态反馈动效该动效主要为界面中的基础组件设计，通过交互操作为用户提供即时、清晰的视觉、听觉及触觉反馈，提示新信息或引导下一步操作，旨在响应用户细微的交互行为，让用户感觉界面是可直接操控的，从而有效提升用户的参与感与交互流程的顺畅度。微交互动效该动效主要用于界面与界面间或元素与元素间的过渡，其核心在于通过视觉手段，解释界面元素之间的逻辑、层级与空间关系，保持视觉连续性，避免用户在界面跳转过程中感到突兀或迷失。转场动效8.3.1动效的类型8.3.1动效的类型2．情感化动效情感化动效的主要目的是提升用户愉悦感、塑造品牌个性，让界面更具吸引力。例如，在列表无内容、搜索无结果等“空状态”页面中，用动效来缓解用户的失落感；在用户达成某个成就后播放奖励性动画，增强用户的正向情绪。8.3.2动效的设计原则0102040305功能性优先原则01响应性与时效性原则02清晰与简洁原则03一致性原则04符合物理规律。058.3.3动效的设计流程明确设计目标主要是分析动效的设计目的，例如提升转化率、降低学习成本、强化品牌记忆等。明确设计目标12设计和优化主要是将构思变为可体验成果的核心环节。在这个阶段，设计师首先需要选择合适的工具，Figma、Sketch等原型设计类工具内置基础的动效设计功能，能很好地与设计稿衔接，适用于制作简单的转场和微交互动效；AfterEffects、Animate等动效设计类工具适用于制作复杂的、用于宣传展示的动效，但无法实现交互。设计和优化34分析与构思主要是将抽象的设计目标转化为具体的视觉创意，设计师可收集能代表产品调性和目标情绪的动效作为参考，确定整体风格，然后可以用简单的草图或线框图画出动效的关键帧，明确元素的起始状态、运动路径和最终状态，最后可为动效中的元素定义属性，如持续时间、缓动曲线、运动路径、运动属性。分析与构思输出动效主要是确保动效能被开发人员完美实现。一般的动效都可以输出为GIF、APNG、SVGA、Lottie、PNG等格式。输出动效【案例】设计水波纹加载动效1．案例背景源鑫公司后台管理系统的聚合页界面包含多个数据模块，为避免静态加载图标带来的等待焦虑，需要将其中的加载效果设计为水波纹加载动效，通过流畅的视觉韵律缓解用户等待多模块数据加载时产生的不确定感，提供舒缓的视觉体验。2．设计思路动效持续时长控制在5秒左右，核心元素可使用多个同心圆作为整体框架，并使用一个圆形边框来限定动效的显示区域，主色采用从浅橙色到深橙色的渐变色，给人一种温暖和充满活力的感觉。在动效制作过程中，可以利用“波形变形”效果模拟真实水面的水波扩散动效，同时利用位置属性制作水面逐渐上升的动效，最后通过倒计时表达式实现时间从0%逐渐递增到100%的效果。最后，需要输出GIF格式的文件给开发人员，便于其在不同场景中查看和运用。【案例】设计水波纹加载动效3．操作提示（1）新建合成。（2）制作波形。（3）制作起伏的波浪效果。（4）绘制圆。（5）制作渐变圆。（6）添加轨道遮罩并调整圆位置。（7）调整波形位置。（8）添加缓动效果。（9）制作圆环动效。（10）链接图层属性。（11）添加并编辑文字。【案例】设计水波纹加载动效（12）添加表达式。（13）制作文字渐显动效。（14）预览动效并导出和保存文件。（15）导出动图。AIGC赋能设计

使用可灵AI生成UI动效可灵AI是快手推出的图片、视频生成大模型，虽然它并非专为生成UI动效设计，但其强大的“图生视频”能力，能让静态的图片变成动态的视频，为设计UI动效提供帮助。利用可灵AI生成UI动效前，需要准备好UI静态图片，然后通过可灵AI的“图生视频”功能，用文字描述动效。UI静态图片可以自己制作，也可以直接使用可灵AI生成，其方法与使用即梦AI生成图像素材的方法基本一致。CONTENTS8.18.2界面切图8.3界面动效设计8.4实践训练界面标注标注音乐软件界面并进行切图1．任务背景“Sona音乐”音乐软件界面的视觉设计已全部完成，项目正式进入前端开发阶段。为确保设计稿能被开发团队精准、高效地实现，避免因沟通歧义导致返工，现需要对该软件界面进行系统、规范的标注与切图工作。2．设计思路标注思路首先在PxCook中规范所有标注的字体样式，包括设置字号和描边，为整个界面建立统一的实现标准，然后依次对网站Logo、搜索框、图标等所有基础元素进行精确的尺寸标注，再根据需要标注界面中的可点击区域、矢量图形颜色、文字样式和元素间距，最后导出图片格式和保存文件。切图思路在切图前可以先在Photoshop中通过图层命名进行切图，然后对于常规图标可以直接使用PxCook的切图插件一键输出切图文件，而对于比较复杂的视觉元素，在Photoshop中合并图层或组合图层后输出切图文件。标注音乐软件界面并进行切图3．任务实施（1）标注音乐软件界面。（2）切图音乐软件界面。设计游戏App中的弹窗动效1．任务背景某公司专注于开发轻量级、易上手的游戏App，拥有庞大的用户基数，现需为其新开发的游戏制作游戏成功和失败弹窗动效，以进一步提升游戏的吸引力和用户体验。要求动效简洁，能够迅速传达游戏结果，同时激发用户再次挑战的欲望。2．设计思路首先确定一个动效的持续时长为4秒左右，并根据提供的素