互联网产品开发（AIGC版）课件 .3 高保真原型开发实践.pptxVIP

PRODUCT互联网产品交互设计与开发主讲人：时间：6-3高保真原型开发实践

素质提升技能储备原型流程掌握已熟悉产品需求分析方法，能够独立完成低保真原型的逻辑梳理与绘制。Axure工具基础熟练掌握AxureRP面板操作、动态面板状态切换及基础元件属性设置。项目实战目标以海澜飞马体育公园小程序为例，进阶学习高保真交互设计与开发全流程。素质提升目标响应“体重管理年”号召鼓励大学生积极参与体育锻炼，以健康的体魄支撑学业成长，培养自信心态。增强文化自信，以更好的状态服务社会发展。健康体魄·强国有我

高保真原型核心内容与知识点3类核心页面绘制首页搭建基础容器、导航布局与内容模块填充马术页设计业务展示与详情页布局会员意向页表单设计与信息采集界面4类核心交互效果垂直滑屏动态面板拖动与回弹轮播图多状态循环切换动画跑马灯文字水平循环滚动底部菜单状态选中与页面跳转关键技术点梳理基础元件应用熟练使用图片、文本标签、矩形等基础组件构建高保真UI。事件与触发机制掌握页面加载(OnLoad)、点击(OnClick)、拖动(OnDrag)等核心事件。动态面板逻辑深入理解多状态管理、条件判断(Condition)及状态切换动画。

高保真原型前期准备流程1.低保真原型绘制梳理产品逻辑与功能架构，使用线框图快速构建产品骨架，确定页面布局与交互流向。2.视觉设计输出切图UI设计师依据低保真稿进行视觉设计，输出高精度界面设计稿及对应的切图素材。3.交互设计替换素材交互设计师将切图导入Axure，替换原有线框，添加动态交互效果，生成高保真原型。

小程序首页基础容器搭建背景容器尺寸规范拖入矩形元件作为页面背景，严格设置尺寸为宽330px、高644px，以精确模拟移动端小程序的标准显示区域。Content动态面板配置创建核心Content动态面板并设置多个状态，用于承载首页、分类页等不同功能模块的切换，构建单页应用(SPA)结构。底部导航视觉样式导航背景仅保留顶部线宽，文本标签统一采用#7F7F7F灰色值与12px字号，确保底部菜单视觉层级清晰统一。

首页内容模块填充基础视觉元素填充导入首页背景图作为视觉底层，顶部精确放置“海澜飞马体育公园”Logo，确立应用整体的品牌识别度与视觉基调。导航与轮播布局绘制轮播图边框以界定核心展示区，填充中部导航条的各类图标与说明文本，构建清晰且直观的功能入口结构。动态公告区域预留在导航条下方规划跑马灯位置，使用矩形背景搭配喇叭图标，为后续实现文字循环滚动的动态公告效果预留空间。项目六互联网产品交互设计与开发高保真原型开发实践

首页场地预约与课程布局场地预约区搭建采用左右分栏布局，左侧展示图标，右侧配置多色块运动类型。填充对应的Logo与文本信息，精准设置色彩搭配，确保视觉层次分明。休闲乐园模块布局参考场地预约区的设置规范，保持整体设计风格的统一性。合理规划休闲乐园区域的空间分布，完成基础结构与内容的填充。热门课程展示设计精心布局热门课程列表，优化图文排版。突出课程名称、教练信息及报名状态，提升用户浏览体验与信息获取效率。

垂直滑屏交互效果制作AxureRP9-InteractionEditor转换为动态面板选中首页所有内容转换为动态面板，并确认滑动边界坐标。1设置拖动时跟随添加“拖动时”交互事件，设置动态面板跟随鼠标垂直方向拖动。设置拖动结束复位设置拖动结束到达顶部或底部边界时，面板自动弹性复位。3

首页轮播图交互实现新建动态面板状态将轮播区域转换为动态面板，命名为“轮播图”。编辑面板状态，添加State1、State2、State3三个状态，并分别在每个状态中导入对应的轮播海报素材。配置页面载入交互点击页面空白处，在交互窗格中选择“页面载入时”(PageLoaded)事件。添加“设置面板状态”动作，目标指定为“轮播图”面板。设置循环切换参数将状态选择为Next，勾选“向后循环”。设置进入/退出动画为“向左滑动”，并将循环间隔时间设置为3000ms。

跑马灯循环动画制作转换动态面板将文本标签与背景组合转换为“内容动态面板”，设置初始位置在可视区域右侧，为滚动做准备。1配置循环引擎新建空白“循环面板”并设置2个状态，利用“页面载入时”触发状态循环切换（间隔1000ms）作为计时器。2添加滚动交互在状态改变时添加“移动”动作，设置文本面板沿X轴向左移动（如移至-366），使用线性动画（10000ms）。3实现边界复位当文本移出左侧边界后，设置立即复位至右侧起始点（如坐标328），实现无缝循环播放效果。4Axure交互编辑器-循环逻辑设置图示：设置文本向左滚动的循环效果参数配置

底部菜单交互配置菜单转动态面板配置将