XD页面交互面向人工智能的UI界面设计71课件讲解.pptxVIP

面向人工智能的UI界面设计UIDesignforArtificialIntelligenceXD页面交互主讲人：张丹丹

AI-orientedUIDesign面向人工智能的UI界面设计

XD页面交互

XD页面交互用XD实现手机“APP或小程序页面中架构布局与交互动效”。

认识AdobeXD基础面板左侧工具栏、右侧图层面板和资源面板。XD页面交互掌握工具栏的绘制、选择、编辑工具，参数调整，图层面板的元素管理，资源面板的资源复用。

深入学习核心工具运用如选择、画板、形状、文本、符号（组件）工具。XD页面交互创建项目APP或小程序的架构底图。明确项目需求后，创建画板，用形状工具和布局技巧绘制页面框架，学习用网格系统和参考线规范元素，运用图层管理技巧为后续设计打基础。

XD页面交互掌握面板与工具操作后，进入实战搭建APP或小程序架构底图。网格系统参考线规范元素

原型设计功能添加页面交互效果页面跳转、微交互

XD页面交互独立完成架构底图搭建，掌握页面交互设计的基本方法与步骤，初步实现界面交互动效为创作优秀作品奠基。

准备多个艺术板（Artboards）在XD中，画板被称为“艺术板”。艺术板A：启动页。XD页面交互需要为流程中的每一个界面都创建一个艺术板。艺术板B：登录首页。艺术板C：输入账号密码页。艺术板D：登录成功后的主页。

XD页面交互神奇的“原型”模式——连接一切的线点击XD左上角，从“设计”模式切换到?“原型”模式。将鼠标悬停在“登录首页”艺术板的“登录”按钮上，你会看到按钮边缘出现一个小箭头。拖拽这个箭头，到“输入账号密码页”艺术板上。

XD页面交互触发：默认是“点击”，也可以是“拖拽”、“悬停”等。01动作：默认是“自动动画”，可以是“过渡”、“叠加”等。02目标：指定要跳转到的艺术板。03Settings缓动：选择动画的节奏，如“匀速”、“渐入”、“渐出”等，让动画更自然。04持续时间：设置动画时长，单位是毫秒（ms），推荐在300-500ms之间，符合人类感知。05

“自动动画”——让元素自己动起来这是XD中最强大、最常用的动效之一。实现同一个元素在不同页面间的平滑变化。场景：从“输入账号密码页”点击登录按钮，跳转到“主页”，并且底部导航栏有一个图标从小变大并高亮，提示用户已登录成功。“自动动画”——让元素自己动起来

实现：XD页面交互在“输入账号密码页”和“主页”两个艺术板上，放置同一个底部导航栏组件，但“主页”艺术板上的“首页”图标更大、颜色更亮。为登录按钮创建链接，动作选择?“自动动画”?，目标指向“主页”艺术板。“自动动画”——让元素自己动起来

实现：XD页面交互XD会自动检测两个艺术板上同名元素的位置、大小、不透明度等差异，并自动生成补间动画。当你点击预览，你会看到图标优雅地放大并变色，完美地吸引了用户的注意力。“自动动画”——让元素自己动起来

“过渡”动画——定义页面的进出方式从下至上滑入：非常适合模拟从底部弹出的菜单或新页面。01从右至左滑入：模拟iOS和Android中最常见的页面推送导航效果。02溶解：一种柔和的不透明度变化，适合非主要页面的切换。03TransitionXD页面交互

高效的工作流程：将PS的视觉产出无缝导入XD。课堂小结逻辑构建能力：通过“原型”模式链接多个艺术板，构建可操作的流程。

动效设计思维：运用“自动动画”和“过渡”让界面交互变得流畅且富有意图。课堂小结