《UI界面设计》课件 项目二　网页 UI 界面设计-“天天果蔬”网站首页 UI 界面设计

项目二网页UI界面设计——“天天果蔬”网站首页

UI界面设计101102任务1需求分析与设计任务2线框图设计任务3视觉设计任务4交互设计任务5测试与交付需求分析与设计任务11031. 了解网页UI界面设计的概念。2. 了解网页UI界面的构成元素和常见类型。3. 掌握网页UI界面设计的流程。4. 能进行网页UI界面设计的需求分析和设计，并制作网页信息架构图。104UI设计师小李接到了设计“天天果蔬”网站首页UI界面的任务。按照网页UI界面设计流程，需先进行需求分析和设计规划。这一阶段需要对项目需求和用户需求进行分析，了解该网站首页需要实现的功能和特性，以及目标用户的特征、需求和期望，建立精准的用户画像；再梳理出该网站首页的核心信息元素，最后使用XMind思维导图软件完成该网站首页UI界面的信息架构图设计与制作。105“天天果蔬”网站首页UI界面的信息架构图如图所示。106“天天果蔬”网站首页UI界面的信息架构图107一、网页UI界面设计的概念网页UI界面设计（webuserinterfacedesign，简称WUID）是指为网站的各级网页创造直观、易用、吸引人且功能强大的用户界面。UI设计师通过设计网页界面元素的外观、布局和互动效果，最终为每位浏览者提供布局合理、视觉效果佳、功能强大且实用、操作简单便捷的界面。二、网页UI界面的构成元素1.视觉设计元素（1）色彩。色彩是网页设计中极为重要的视觉元素，不仅能吸引用户注意，还能传达特定情感和信息。网页中的色彩主要指文字颜色、背景颜色、按钮颜色和图标颜色等。按应用比例分类，网页色彩通常分为主色、辅助色、点缀色，如图所示，某技师学院网站首页主色采用深蓝色，辅助色采用蓝色，点缀色采用橙色。108109网页中的视觉设计元素110（2）文字。文字是网页中最核心的元素，是传达信息最基本的形式，如上图所示。文字的字体、字号、颜色和排版会直接影响用户的阅读体验和内容理解，合理运用文字可以帮助用户更高效地获取信息，提升用户体验。（3）图标。图标是简洁的视觉符号，用于代表特定功能或者内容类别，如社交媒体分享图标、菜单图标等，如上图所示。它能增强网页的视觉吸引力，帮助用户快速理解信息。111（4）图片。图片是网页的重要组成部分，与文字相比，它能更直观、形象、全面地展示内容，如产品外观、新闻场景、艺术作品等，如上图所示。图片可显著增强网页的吸引力和说服力。（5）空间。空间指网页中的留白与元素间距，对提升页面可读性和美观性至关重要，如上图所示。合理的空间布局能让页面更加清晰有序，避免给用户带来压抑感。2.交互设计元素（1）导航栏。导航栏是网页UI界面中至关重要的元素，如同地图一样，引导用户在网站不同页面间切换，如图所示。用户可通过导航栏快速定位到想要访问的核心内容区域。112网页中的导航栏、超链接、按钮等交互设计元素113（2）超链接。超链接用于在网页内部或不同网页间建立链接，可分为文字超链接和图片超链接。用户点击超链接后，能跳转到相关内容页面，如上图所示。（3）按钮。按钮是触发特定操作的核心元素，如提交表单、跳转页面、进行搜索、显示隐藏内容等，如上图所示。114（4）表单。表单用于收集用户信息，如注册信息、反馈内容、订单数据等，如图所示。通过表单，网站可与用户实现交互，获取所需数据。（5）反馈机制。反馈机制通过动画、声音或视觉提示，向用户反馈操作结果，如加载提示、操作成功或失败提示等，如图所示。网页中的表单、反馈机制等交互设计元素3.多媒体元素（1）音频。音频通常用于提供背景音乐、语音讲解或操作提示等，可增强网页的沉浸感和互动性。（2）视频。视频通常用于展示产品细节、服务流程或品牌故事，能提升用户的参与度和内容理解度，如图所示。115（3）动画。动画通过动态效果吸引用户注意力，可提升页面的趣味性和互动性。116网页中的导航栏、超链接、按钮等交互设计元素三、网页UI界面的常见类型1.首页首页是用户进入网站时最先呈现的页面，通常包括页眉［含站标（logo）］、导航栏、轮播图（banner）、主体内容、页脚等部分，如图所示。设计时需做到简洁明了、美观大方，确保相关信息清晰，方便用户快速了解网站的内容和服务。117118世界技能大赛中国组委会网站首页2.列表页面列表页面主要用于展示多项相关内容，如商品列表、文章列表等，如图所示。设计时需注重内容排列逻辑、信息分类方式和交互功能的便捷性。119世界技能大赛中国组委会网站文章列表页面3.详情页面当用户对列表中的某项内容感兴趣时，会点击进入详情页面进一步了解。详情页面需展示所选内容的完整信息，如商品信息、新闻详情等，如图所示。设计时应确保信息完整呈现，并提供相关操作选项。120世界技能大赛中国组委会网站新闻详情页面四、网页UI界面设计的流程1.需求分析通过此步骤明确用户需求与业务目标，奠定设计基础。核心任务包括用户研究、需求整理、竞品分析等。2.设计规划通过此步骤制定设计策略与整体框架，确保设计方向一致。核心任务包括设计策略制定、页面布局规划、信息架构设计等。1213.线框图设计通过此步骤将抽象规划转化为具体页面结构，验证信息布局的合理性。核心任务包括灰度线框制作、设计评审和迭代优化等。4.视觉设计通过此步骤设计美观且符合用户使用习惯的视觉界面，细化页面设计细节，赋予设计品牌调性和视觉吸引力。核心任务包括视觉元素设计、高保真界面设计等。5.交互设计通过此步骤，根据网站功能和用户操作流程，定义各界面元素的交互行为，适当添加动效以增强用户体验。核心任务包括交互行为定义、动效设计等。1226.测试优化通过此步骤验证设计合理性，通过测试发现并修复问题，持续迭代优化以提升用户体验。核心任务包括验证设计效果、优化与调整等。7.交付验收通过此步骤将设计过程中的相关资料进行整理打包，交付给开发人员或客户，并完成最终验收。核心任务包括整理交付资料、与开发团队交接、客户验收等。123线框图设计任务21241. 了解网页线框图的概念和设计原则。2. 掌握Adobe XD软件的基本操作。3. 掌握使用Adobe XD软件绘制图形的方法。4. 掌握Adobe XD软件“重复网格”功能的使用方法。5. 能使用Adobe XD软件进行网页UI界面线框图设计。125UI设计师小李已经完成了“天天果蔬”网站首页UI界面的需求分析和设计，按照网页UI界面设计流程，接下来将进入线框图设计阶段。这一阶段需要使用AdobeXD软件绘制网站首页UI界面的线框图，构建界面框架结构，并规划核心功能区域布局。在进行线框图设计时，UI设计师通常使用AdobeXD软件进行创作。AdobeXD是一款专业的UI设计工具，UI设计师需要熟练掌握其基础图形绘制、布局工具使用和图层管理等核心功能。最终输出的线框图将清晰地呈现界面框架结构和信息层级，如图所示。126127“天天果蔬”网站首页UI界面的线框图128一、网页线框图的概念和设计原则1.网页线框图的概念网页线框图是UI设计师将客户需求转化为结构化框架的可视化草图，聚焦于定义网页布局、信息层级和核心交互逻辑。作为设计流程的基石，它通过简化的图形明确“内容在哪里”和“用户如何操作”，而非视觉装饰细节，如图所示。网页线框图既可以手工绘制，也可以使用UI设计软件绘制。2.网页线框图的设计原则（1）专注于结构与流程。网页线框图的核心是布局页面的骨架。（2）简洁至上。使用最简单的视觉元素传达结构。（3）建立信息层级。通过视觉手段区分内容的重要程度，以此引导用户视线。129二、AdobeXD的基本操作1.新建文件单击AdobeXD主页界面中的“新文件”按钮，即可新建一个AdobeXD文件。也可以单击AdobeXD主页界面中“画板预设”按钮组的按钮新建文件。AdobeXD的工作区界面如图所示。130131Adobe XD的工作区界面2.创建参考线将鼠标指针悬停在画板的左边框上，等显示

图标时按住鼠标不放，拖动到所需位置后松开鼠标，即可创建一条垂直参考线；将鼠标指针悬停在画板的顶部边框上，等显示

图标时按住鼠标不放，拖动到所需位置后松开鼠标，即可创建一条水平参考线，下图所示为创建一条垂直参考线。132创建一条垂直参考线3.创建新画板选中工具栏中的“画板”工具

，在“属性检查器”面板的画板尺寸列表框中选择任意画板尺寸，即可将该尺寸的画板添加到工作区，如图所示。133选择画板尺寸也可以选中“画板”工具，在工作区空白处按住鼠标不放，向对角线方向拖动鼠标，创建自定义尺寸的画板，如图所示。134创建自定义尺寸的画板4.使用图层AdobeXD中的图层是从AdobePhotoshop中的图层衍生而来，但仅显示与当前使用的画板关联的图层，如图所示。135Adobe XD的图层三、使用AdobeXD绘制图形的方法1.绘制矩形和正方形从工具栏中选择“矩形”工具

（按快捷键【R】），在画板上单击并拖动鼠标即可绘制矩形。在拖动鼠标的同时按住【Shift】键可绘制正方形。在“属性检查器”面板中可以设置矩形的边界大小、边界颜色和填充颜色等，如图所示。136137通过“属性检查器”面板设置矩形的边界和填充颜色2.绘制椭圆形和圆形从工具栏中选择“椭圆”工具

（按快捷键【E】），在画板上单击并拖动鼠标即可绘制椭圆。在拖动鼠标的同时按住【Shift】键，可绘制正圆形。1383.绘制多边形从工具栏中选择“多边形”工具

（按快捷键【Y】），在画板上单击并拖动鼠标可以绘制所需大小的形状，默认绘制的是三角形。绘制时按住【Shift】键可绘制等边多边形。绘制时按键盘上的左右方向键，可以在多边形和星形之间切换，如图所示。139绘制时按键盘上的左方向键将多边形变为星形在绘制时按键盘上的上下方向键，可增加或减少多边形的边数（也可选中已绘制的多边形，通过“属性检查器”面板更改边数），如图所示。140绘制时按键盘上的上方向键增加多边形边数4.绘制直线从工具栏中选择“直线”工具

（按快捷键【L】），在画板上单击并拖动鼠标即可绘制一条直线。在绘制时按住【Shift】键，可以绘制水平、垂直或45°角方向上的直线。1415.绘制路径（1）绘制直线路径：从工具栏中选择“钢笔”工具（按快捷键【P】），在画板上单击鼠标左键创建第一个锚点，移动鼠标后再次单击鼠标左键创建另一个锚点，两个锚点之间会自动连接为一条直线；继续移动鼠标并单击鼠标左键，可绘制由多个锚点组成的直线路径。若要结束绘制，按下键盘上的【Esc】键即可；若要绘制闭合路径，结束时将鼠标移回第一个锚点并单击鼠标左键即可，如图所示。142143使用“钢笔”工具绘制直线路径a）开放路径b）闭合路径（2）绘制曲线路径：在起点处单击鼠标左键，移动鼠标光标至目标位置后，单击鼠标左键并拖动，即可绘制两个锚点之间的曲线路径。路径锚点两侧会出现控制句柄，拖动控制句柄可调整曲线形状，如图所示。144使用“钢笔”工具绘制曲线路径6.绘制文本从工具栏中选择“文本”工具

（按快捷键【T】），在画板上单击鼠标左键，即可创建单行文本。若选择“文本”工具后，在画板上按住鼠标左键，拖动以定义文本区域，则会创建区域文本，区域文本在输入内容时会自动换行，如图所示。145单行文本和区域文本四、AdobeXD“重复网格”功能的使用1.创建重复网格选中画板中的某个元素，在“属性检查器”面板中单击

按钮（或使用组合快捷键【Ctrl+R】）即可创建重复网格。同时，网格的右方和下方会出现绿色的控制句柄，按住右侧的控制句柄拖动鼠标，可在水平方向重复元素；按住下方的控制句柄拖动鼠标，可在垂直方向重复元素，如图所示。146147使用“重复网格”功能创建重复元素2.取消重复网格选中重复网格，单击“属性检查器”面板中的“取消网格编组”按钮，或单击鼠标右键，并在弹出的快捷菜单中选择“取消网格编组”命令（按组合快捷键【Shift+Ctrl+G】），即可取消网格元素的编组。148调整重复元素之间的距离视觉设计任务31491. 了解网页UI界面视觉设计的概念和原则。2. 了解网页UI界面视觉设计规范。3. 掌握Adobe XD软件栅格系统的使用方法。4. 掌握Adobe XD软件字体图标的使用方法。5. 掌握Adobe XD软件图片的使用方法。6. 能使用Adobe XD软件制定网页UI界面的视觉设计规范，并完成网页UI界面视觉设计。150UI设计师小李已经完成“天天果蔬”网站首页UI界面的线框图设计，按照网页UI界面设计流程，接下来将进入视觉设计阶段。这一阶段需要先制定网站首页的视觉设计规范，然后使用AdobeXD软件进行网站首页视觉界面的设计与制作。151在制定视觉设计规范时，UI设计师需要确定网页的色彩搭配、字体选择、图标样式以及界面控件元素等设计规范内容。在视觉界面设计过程中，UI设计师需要使用栅格系统进行页面元素布局，并遵循视觉设计规范，统一网页的尺寸、字体、颜色和间距等视觉要素，从而提升网页UI界面的视觉吸引力和用户体验。“天天果蔬”网站首页UI界面的视觉设计效果如图所示。152“天天果蔬”网站首页UI界面的视觉设计153一、网页UI界面视觉设计的概念和原则1.网页UI界面视觉设计的概念网页UI界面视觉设计通过色彩、字体、版式等视觉元素的系统化组合，构建符合用户认知习惯的视觉语言。其本质是在品牌表达与用户体验之间建立桥梁——既需传递品牌基因，更要通过视觉动线引导用户行为，实现信息的高效触达与完整的交互闭环。2.网页UI界面视觉设计的原则（1）简洁性原则。删除所有非必要元素，聚焦核心内容，提升页面加载速度和用户浏览效率；通过留白和对比来区分信息层级，避免视觉干扰。（2）一致性原则。界面风格（色彩、字体、图标等）需全局统一，降低用户学习成本。通常需要制定设计规范以统一界面风格。（3）对比与视觉层次原则。利用色彩明暗、大小对比等方式突出关键信息，引导用户注意力；通过布局对齐和分组增强界面秩序感。154二、网页UI界面视觉设计规范1.尺寸规范（1）页面宽度。当前最流行的计算机显示器分辨率是1920px×1080px，因此，网页UI界面的页面宽度通常设置为1920px，高度不限。（2）安全宽度。安全宽度通常设置为960～1200px，具体尺寸根据项目、客户要求以及用户群决定。（3）首屏高度。首屏高度为显示分辨率高度减去浏览器状态栏、菜单栏以及系统任务栏的高度，因此，分辨率为1920px×1080px下的首屏高度通常设置为不超过900px。1552.色彩规范色彩规范需确定网页UI界面中色彩的色值和使用范围，包含主色、辅助色、文本色等。主色应与品牌形象相符，辅助色用于突出重要信息或界面元素，文本色需保证文字易于阅读和识别：正文文字通常选用深灰色，次要说明文字通常选用中灰色，注释类、提示类文字通常选用浅灰色。1563.字体规范（1）字体。大多数用户通过Windows或macOS操作系统浏览网页，两种系统均自带预装字体，这些字体应作为网页UI界面设计的首选字体，具体见下表。157网页安全中文字体158网页安全中文字体159网页安全英文字体（2）字号。在UI界面设计中，文字字号直接影响信息层次和视觉权重。12px是网页设计中的主流最小可读字号，常用于注释性内容；14～16px多适用于非突出性普通正文；18px及以上则适用于突出性标题内容（一般遵循偶数原则）。（3）行间距。文本的行间距通常设置为字体大小的1.5～2倍。160三、栅格系统的概念和使用1.栅格系统的概念栅格系统（gridsystems）也称为网格系统，是一种科学的页面布局方法。它通过垂直和水平的参考线将页面划分为若干有规律的列或格子，以此为基准来协调页面元素的对齐和比例关系，如图所示。161华为官网首页的栅格系统在当前多终端、多设备尺寸的背景下，网页设计需要适配各种屏幕尺寸。栅格系统通过建立网格化的布局框架，帮助UI设计师科学地组织页面元素，实现多平台适配（自动适应不同设备的显示需求）、视觉一致性（确保元素间的对齐和比例关系）、效率提升（减少重复调整布局的时间成本）等优势。这种系统化的框架能够帮助UI设计师有序地组织各类设计元素，使页面呈现清晰、整齐的视觉效果，既能保证视觉美感，又能显著提高工作效率。162栅格系统主要由列、水槽、边距、栅格总宽、容器盒子等要素构成，如图所示。163栅格系统的构成要素（1）列。列是指栅格数量，如12栅格有12个列、24栅格有24个列，主要用来对齐内容，网页UI界面设计通常采用12栅格或24栅格。通过栅格的列数用来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版越疏松。（2）水槽。水槽是指列与列之间的距离，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多，其呼吸感就越好；反之留白就越少，内容也会变得较为紧凑。164（3）边距。边距是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以边距中是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。（4）栅格总宽。栅格总宽是指所有列的宽度之和、所有水槽的宽度之和再加上两侧边距的宽度之和，即整个栅格系统的总宽度。（5）容器盒子。容器盒子是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。1652.使用AdobeXD设置布局栅格打开AdobeXD，选中画板，在“属性检查器”面板的“网格”区域中勾选“版面”，画板上就会出现半透明的栅格，如图所示。在“属性检查器”面板中可以设置列数、间隔宽度、列宽、边距等参数，也可以设置栅格的颜色及透明度。166使用Adobe XD设置布局栅格四、字体图标的概念和使用1.字体图标的概念字体图标其实是一种特殊的字体，只不过这个字体显示的并不是具体的文字，而是各种图标（icon），如图所示。在网页UI界面设计中，相比传统的图片图标，字体图标具有三大优势：一是文件体积更小，加载更快；二是支持CSS样式控制，可自由调整颜色、大小等属性；三是作为矢量图形可以无损缩放。这种技术方案完美解决了图片图标在灵活性和性能方面的局限性。167168字体图标2.在AdobeXD中使用字体图标（1）下载和安装FontAwesome。要使用FontAwesome字体图标库，需要先在计算机操作系统中安装FontAwesome字体图标库。（2）使用FontAwesome。在网页浏览器中访问https：//，单击网页导航栏中的“图标库”链接，通过网页上的图标分类导航或者使用搜索框输入关键字搜索，找到所需要的图标，如图所示。169170通过图标分类导航或使用搜索框找到所需图标五、AdobeXD图片的使用1.导入图片（1）使用“导入”命令。单击“文件”→“导入”命令（或按组合快捷键【Shift+Ctrl+I】），打开“导入”对话框，选择目标图片文件完成导入。（2）将图片文件拖动到AdobeXD中导入。打开图片文件所在文件夹，选中图片文件，将其拖动到AdobeXD中即可导入。可直接拖动图片到画板上，也可拖动到已绘制的图形中，如图所示。171172将图片文件拖动到Adobe XD中导入2.创建形状蒙版图像通过创建形状蒙版，可精准裁剪图片特定区域，在设计中有选择性地突出关键视觉元素。（1）在画板中导入目标图片，选择“多边形”工具，在图片上方绘制所需样式的多边形，如图所示。173在图片上方绘制蒙版形状（2）在“图层”面板中，按住【Ctrl】键，同时选中图片图层和形状图层；然后在选中的图层上单击鼠标右键，在弹出的快捷菜单中选择“带有形状的蒙版”命令，如图所示。174选择“带有形状的蒙版”命令（3）单击命令后，图片将仅显示形状范围内的内容，形成多边形形状蒙版效果，如图所示。175形状蒙版效果交互设计任务41761. 了解交互设计的概念和原则。2. 掌握Adobe XD软件可滚动画板的设置。3. 掌握Adobe XD软件原型模式的基本操作。4. 掌握使用Adobe XD软件创建链接交互的方法。5. 掌握使用Adobe XD软件制作动效的方法。6. 掌握Adobe XD软件组件的使用方法。7. 能使用Adobe XD软件进行网页UI界面常见交互的设计和制作。177UI设计师小李已经完成“天天果蔬”网站首页UI界面的视觉设计，按照网页UI界面设计流程，接下来将进入交互设计阶段。这一阶段需要在视觉设计的基础上，模拟用户浏览网页时的操作流程，设计清晰的导航系统和交互反馈机制，以提升网站的可用性和用户体验。178网页UI界面交互设计应以用户为中心，在保证视觉美感的同时，重点考虑用户的行为习惯。UI设计师需要优化用户与界面的互动体验，设计简单易用的交互方式，提供清晰的导航路径和即时反馈，最终打造出既美观又实用的网页UI界面。“天天果蔬”网站首页UI界面交互设计最终效果如图所示。179180“天天果蔬”网站首页UI界面的交互设计181一、交互设计的概念和原则1.交互设计的概念UI设计师通过用户行为研究和认知规律分析，在数字产品中添加一系列交互模式，让产品操作既直观又高效。优秀的交互设计能让人第一次使用产品就能轻松上手，即使没有说明书也能快速掌握产品的核心功能。从交互目的与功能出发，网页UI界面交互可以归纳为导航类交互、内容展示类交互、数据操作类交互、反馈类交互、防御类交互五大核心类型，下图所示为华为官网首页的导航类交互（下拉菜单）效果。182华为官网首页的导航类交互（下拉菜单）效果（1）导航类交互。导航类交互如同产品的“地图指南”，通过导航菜单、锚点跳转、分页按钮、步骤条等，帮助用户快速定位目标内容。（2）内容展示类交互。内容展示类交互可优化信息呈现方式，使用轮播图、折叠面板、选项卡、模态框等组件，使内容展示既丰富又不杂乱。（3）数据操作类交互。数据操作类交互赋予用户数据控制权，支持筛选、排序、批量处理等操作，快速处理复杂信息。183（4）反馈类交互。反馈类交互可建立系统与用户的实时对话，通过加载动画、成功提示、进度条、微交互（按钮悬停动效、表单输入实时校验等细节反馈）等，及时告知操作结果。（5）防御类交互。防御类交互可预防用户误操作，用删除二次确认、输入格式校验等机制，避免用户误操作带来的风险。1842.交互设计的原则（1）即时反馈。用户一点击按钮或提交内容，页面马上有反应，比如按钮变色、出现加载圈，让用户知道操作已生效，不用焦虑。（2）符合直觉。设计要符合大家的日常习惯，像购物车图标一看就知道能放东西，下拉菜单像拉开抽屉一样自然，不用学就能上手。185（3）一致性。整个网页中，同样功能的操作方式和样子都一样。比如所有返回按钮都在左上角，颜色图标都统一，用起来顺手不出错。（4）容错性。给用户“后悔机会”，不小心删错东西、填错信息，能撤回重来；删除重要内容前，会弹出确认框问清楚，不怕误操作。（5）极简路径。将操作步骤减少到最少，比如注册从五步缩减为三步，自动填好能用的信息，让用户快速办完事儿，不浪费时间。186二、AdobeXD可滚动画板的设置可滚动画板需要在设计模式下设置。在AdobeXD设计模式下，选中画板，在“属性检查器”面板的“滚动”选项中选择“垂直”（默认为“无”），开启可滚动画板，同时设置“视口高度”为指定的高度，如图所示。187将画板设置为可滚动画板三、AdobeXD原型模式的基本操作1.切换原型模式启动AdobeXD后，默认进入设计模式，单击工作区左上角的“原型”选项卡，可以切换到原型模式，如图所示。188Adobe XD原型模式2.设置首页首页是项目的第一个页面。在默认情况下，预览或访问项目都从这个页面开始，每个项目只能有一个首页。在原型模式下选中任何一个画板后，在画板左上角会出现一个灰色按钮

，单击该按钮，使其变为选中状态

，即可将该画板设置为首页，如图所示。189将画板设置为首页四、AdobeXD链接交互的使用1.添加页面跳转链接在原型模式下选中某个元素，该元素右侧会出现一个蓝色小箭头

，选中该蓝色小箭头并将其拖动到另一个画板，即可创建页面跳转链接，如图所示。190拖动蓝色小箭头创建页面跳转链接2.添加锚点链接通过锚点链接可实现单页面内的跳转与滚动，支持跳转到指定图层。在设计长页面时，使用锚点链接能加速导航并提升可用性。在原型模式下选中某个元素，点击其右侧的蓝色小箭头

并拖动到当前页面的另一个图层上，即可创建一个锚点链接，如图所示。创建链接后，预览时点击该元素，页面会滚动到指定位置。191添加单页面锚点链接3.添加外部链接在原型模式下选中某个元素，点击其右侧的蓝色小箭头

，在“属性检查器”的“交互”面板中将“触发”设置为“点击”，将“操作”中的“类型”设置为“超链接”，然后在“目标”选项中选择“URL”文本框并输入外部链接地址，如图所示。创建链接后，预览时点击该元素，即可跳转到对应的外部网页或电子邮箱。192193添加外部链接五、AdobeXD动效的使用1.过渡过渡是指当前页面与目标页面之间的切换动画效果，包括溶解、滑动和推出三种过渡形式。（1）溶解是指当前页面慢慢消失，目标页面慢慢出现。（2）滑动是指目标页面从上、下、左、右任一方向平移进入，并覆盖当前页面。（3）推出是指目标页面从上、下、左、右任一方向平移进入，同时将当前页面挤出画板。1942.叠加叠加不会切换页面，而是直接在当前页面上叠加目标页面。当叠加画板面积小于原画板或存在透明区域时，可同时看到两个画板。叠加动效主要用于制作弹窗、下拉菜单或浮层等效果。3.滚动至滚动至仅可添加在画板中选中的元素对象上。使用该动画可以实现当前页面内容以水平或垂直滚动的形式，滚动到指定内容位置。1954.上一个画板利用该功能可自动返回之前跳转的页面，通常添加在页面的返回按钮上，无须重新定义返回动画。需注意：此动作会根据上一页面的跳转动画，反向执行一次。5.自动制作动画自动制作动画是指AdobeXD自动识别两个画板的差异，并对这些变化进行动画处理。需注意：两个画板上对象的图层名称或组名称需匹配，AdobeXD才能识别并处理属性变化。196六、AdobeXD组件的使用组件是具有极高灵活性的设计元素，可用于创建和维护重复出现的元素。利用AdobeXD组件的多态功能，还能在按钮、单选框、复选框、输入文本框、切换按钮、卡片等对象上创建多种状态效果，从而制作出模拟真实的交互模型。当用户单击这些组件或将鼠标光标悬停在其上方进行交互时，组件的状态会发生相应变化，如图所示。197使用组件模拟按钮交互效果1.创建组件选中画板中的某个对象或对象组，单击“对象”→“制作组件”命令（按组合快捷键【Ctrl+K】），即可将该对象或对象组创建为组件。创建的组件称为主组件，主组件左上角以绿色实心菱形标识。主组件的副本称为组件实例，组件实例左上角以绿色空心菱形标识。对主组件的内容或属性进行编辑修改时，所有组件实例的内容或属性会随之同步变化。如图所示，将圆角矩形和圆形创建为组件，并复制一个组件实例。198199创建主组件并复制组件实例a）主组件b）组件实例2.为组件添加状态组件可添加多种状态并配置交互，用于模拟真实的用户行为。能够随用户交互改变状态的组件，对创建高保真度原型非常重要。创建组件后，在“属性检查器”面板中可看到组件默认包含“默认状态”。单击“属性检查器”面板中组件的“默认状态”旁边的+图标，可添加以下三种状态：新建状态、悬停状态和切换状态，如图所示。200（1）新建状态：一般用于创建自定义交互行为的组件。（2）悬停状态：一般用于创建鼠标悬停时显示不同效果的组件。（3）切换状态：一般用于创建具有切换交互行为的组件，如切换按钮、单选框、复选框等。201组件的状态测试与交付任务52021. 能使用Adobe XD软件预览和测试网页UI界面。2. 能使用Adobe XD软件导出网页UI界面设计资源和效果图。3. 能使用标注软件对网页UI界面进行标注。4. 能将项目文件整理与归档。203UI设计师小李已经完成“天天果蔬”网站首页UI界面的交互设计，按