UI设计项目式教程 课件 第7章 交互设计

UI设计项目式教程课程介绍案例分析设计流程实战练习项目7交互设计UI设计项目式教程课程介绍案例分析设计流程实战练习

交互设计是设计人与产品、系统等互动方式的设计领域。

在AdobeXD软件中体现得很充分。它用于设计网站和移动应用等界面。设计师利用XD可以创建原型，通过设置交互动作，如点击按钮后跳转到新页面、元素的显示和隐藏等，来模拟用户的实际操作流程。这种交互设计让设计师能提前预览用户体验，优化界面布局和操作逻辑，确保最终产品在用户交互方面更友好、高效。项目要求——马尾船政项目交互设计要求UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

具体交互方式包括：

1.左右滑动：对应图中左一手机界面交互示意；

2.滑动点交互：指示点实时反馈当前位置，强化交互反馈；

3.上下滑动：中间右侧手机界面，呈现上下滑动的交互逻辑；

4.左右切换：最右侧手机界面，体现左右切换，如图所示。马尾船政项目交互设计原则UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

在AdobeXD里，当为元素或画板完成定义与链接后，借助在属性面板的交互和操作分组中对参数选项进行设置，能够让移动原型设计或者UI设计更具魅力与吸睛度。

在工作区域给元素或画板添加链接之后，属性面板会呈现出交互和操作分组选项，如图所示。用户可以在这个面板中，针对链接对象设定诸如触发条件、操作类型、操作目标以及操作动画等一系列参数。通过这些细致的参数设定，实现对设计效果的精准把控，从而打造出更符合预期、更具吸引力的移动原型或UI设计作品。马尾船政项目XD中交互参数设置介绍UI设计项目式教程课程介绍案例分析设计流程实战练习点击：这是最基础且常用的触发条件。比如在设计APP的登录页面时，点击“登录”按钮这一操作，就能触发跳转至主界面的交互。悬停：当鼠标指针悬停在特定元素或画板上时，交互就会被触发。例如当鼠标悬停在导航栏的某个菜单项上，会弹出下拉子菜单。长按：用户长按相关元素或画板，触发交互。在移动应用中，长按可以实现一些特殊功能，如在文件管理类APP中，长按文件图标，可弹出操作菜单，进行复制、删除等操作。UI设计项目式教程课程介绍案例分析设计流程实战练习页面加载：当页面或者画板被加载显示时，交互自动触发。常用于展示开场动画、引导提示等场景，比如APP启动时，展示品牌Logo的动画效果。UI设计项目式教程课程介绍案例分析设计流程实战练习

在操作类型的面板中，将鼠标指针移至属性面板中的类型下拉按钮处，单击此按钮，即可打开操作类型的下拉表框，具体状态如图所示。在下拉表框中，可以根据设计需求，从众多操作类型中选择任意一个作为链接对象的操作类型。由于操作类型根据设计APP的需求进行灵活应用，这里不再做过多赘述。根据本章节案例用户选择“过渡”操作类型即可。操作类型UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

在操作时，将鼠标移至属性面板的动画下拉按钮，点击它，便能打开操作动画的下拉列表框，具体样式如图所示。在这个下拉列表框里，用户可依据设计需求，任选一个动画选项。一旦选定，在链接对象与目标画板转换的过程中，就会应用该动画效果，如图所示。

完成动画类型设置后，点击缓动选项后的按钮，随即打开缓动选项的下拉表框，如图所示。在其中选择任意一个选项进行预览时，链接对象与目标画板转换时应用的动画效果，会以所选的缓动方式呈现给使用者。操作动画UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

完成APP高保真原型图或者UI设计后，用户能够借助构建交互方式设计，直观地感受该APP界面的用户体验。

完成APP高保真原型图或者UI设计后，用户能够借助构建交互方式设计，直观地感受该APP界面的用户体验。

在XD工作区域中，从模式栏中选定原型模式，随即就能将工作区域转变为原型模式。

接下来进入XD实操环节。马尾船政项目页面转换添加交互UI设计项目式教程课程介绍案例分析设计流程实战练习

经过对上一小节内容的系统学习，用户已掌握制作页面与页面元素转换动效的基础技能。在本小节的案例实操中，将聚焦于APP引导页滑动点交互的设计与制作，助力用户深度挖掘AdobeXD软件的交互设计潜力，进一步提升设计水平。

接下来进入XD实操环节。马尾船政项目滑动点交互UI设计项目式教程课程介绍案例分析设计流程实战练习

在轮播图交互设计中，用户需要把画板动效与轮播图中的各种元素如图片、指示点、切换按钮等，进行有机结合，这不仅要求精准把握各元素间的联动关系，还需深入理解用户在操作轮播图时的交互逻辑，实现轮播图的流畅切换与动态展示。

接下来进入XD实操环节。马尾船政项目轮播图交互UI设计项目式教程课程介绍案例分析设计流程实战练习

拓展题1：设计《半月里古村》微信小程序交互流程。

为半月里古村落微信小程序设计一个交互流程（如用户从首页进入文化介绍页，再返回