本套原型是一套健身管理类原型设计案例，原型图包含以下几类主要页面：
原型特色
底部弹窗、侧边弹窗、页面交互
案例分类：APP原型
保真度：高保真
如何制作弹窗交互？
**第一步：**在主画板中添加触发源内容；
**第二步：**创建一个辅助画板，在其中添加所需要的弹出内容；
**第三步：**拖动交互触发源的交互链接点到辅助画板上；
**第四步：**设置弹出效果；
**第五步：**调整弹出内容的位置，即可完成弹出设置。
2.可视化监管系统
数据可视化呈现、内容切换、页面交互
案例分类：Web原型
如何制作内容切换？
**第一步：**向主画板中拖入一个选项卡和一个内容面板组件；
第二步：绘制3个辅助画板，并向辅助画板中添加3个图片；
第三步：点击内容面板右上角的圆点，分别连向3个辅助画板；
**第四步：**双击选项卡，将3个选项连向内容面板，命令选择“切换内容”；
第五步：在右侧面板分别选择每个选项对应的页面后，即完成了内容切换的设置。
3.酒店预定APP
如何制作轮播图？
**第一步：**创建内容面板，并调整其宽高为轮播图的尺寸；
第二步：双击内容面板，点击左上角的“添加”按钮，按需创建一定数量的辅助画板；
第三步：在每个辅助画板上分别放置需要参与轮播内容；
第四步：选中主画板，（请注意：选中画板，而非画板中的组件），在右侧交互面板中，点击“添加交互”，并进行交互设置；
第五步：勾选“循环切换”选项，即可完成轮播图的制作。
4.官网通用原型
这是一款可通用的企业官网原型模板，包含8个页面：导航页、首页、关于页、案例页、联系我们页、以及动态页面。
页面交互、内容切换、导航菜单
保真度：低保真
如何制作导航菜单？
**第一步：**在主画板中拖拽添加选项卡组件；
第二步：双击选项卡组件，编辑每个菜单项，并对其进行命名；
第三步：点击添加/删除按钮，以增加/删减菜单项至满足原型设计需求；
第四步：拖拽连接点，将每个菜单项链接到对应的页面；
第五步：设置每个菜单项的触发方式以及交互效果等，即可完成导航菜单的制作。
5.B2B云端ERP系统
B2B云端ERP系统是一套购销ERP原型案例，可以为购销或其它多种后台系统提供参考和借鉴。整个例子包含了13+页面：
功能跳转、弹窗、内容区域切换
第四步：设计样式和布局，自定义输入框、按钮、文本样式和颜色方案等样式；
6.网站页尾Footer-页面合集
本套原型是一套网站页尾模版合集，一共包含十个精美、有设计感的网站页尾页面，该套模板形式美观、风格多样，模版中的信息呈现也为网页设计师提供了思路和灵感。
简洁、有创意，包含深色及浅色模式，复用简单
如何制作网页Footer
**第一步：**使用矩形工具，在页面底部绘制一个矩形，作为Footer容器；
第三步：在属性面板自定义Footer容器、文本样式、链接样式和颜色方案等样式；
第四步：拖拽组件链接点为Footer中的内容创建交互链接，例如，将导航链接链接到对应的页面或操作，将社交媒体链接链接到相应的社交媒体页面；
第五步：可以使用状态面板功能为Footer元素添加一些简单的动画和状态变化，即可完成网页Footer制作。
7.咖啡电商APP
页面丰富、复用简单、APP标签栏
如何制作APP标签栏？
第一步：在组件库中，选择适用于自己设计需求的组件，如图文选项卡，拖拽至画板即可；
第二步：编辑图文选项卡
第三步:设置组件交互
第四步：编辑属性样式
8.家居类官网
页面丰富、Banner轮播图、页面交互、配色干净
如何制作页面跳转交互？
**第一步：**在画板中添加触发元素，例如按钮、链接文本或图像等；
第二步：在页面树创建目标跳转页面，并搭建好目标页面内容；
第三步：选中触发元素，拖拽连接点连接至要跳转的目标页面；
**第四步：**定义交互行为，设置链接交互效果，如添加动画过渡效果、延时触发或条件触发等；
第五步：点击演示即可呈现页面跳转效果。
9.游戏视频平台
本原型案例为Twitch视频游戏的实时流媒体视频平台，具有非常个性的朋克元素设计，使用的组件包括列表、面板、内容面板、选项卡等。
弹窗、顶部固定、滚动区、内容切换
如何制作滚动区？
**第一步：**在主面板中添加容器类组件“面板”；
第二步：在“面板”容器中添加“文字”组件；
第三步：右键点击“文字”组件自动填充；
第四步：调整文字内容与高度，当内容高度超过面板高度，即可纵向滚动。当内容宽度超过面板宽度，即可横向滚动。
第五步：点击演示即可呈现纵向滚动/横向滚动效果。
10.APP线框原型案例
本套原型模板是基于App及Web设备设计的UX套件，一共有42个页面，包含了两个大部分：App端常用的列表、网格排版页面；Web端的简要原型页面。
页面丰富、偏手绘感的原型风格、交互跳转、复用组件
保真度：线框图
如何快速构建APP首页线框？
**第一步：**在原型项目设置中选择适当的设备尺寸，如iPhone的屏幕尺寸；
**第二步：**确定APP基本布局和结构；
第三步：从组件库中拖拽出矩形、文本等组件，搭建出标题栏、底部导航栏、侧边栏等；
第四步：在首页线框中添加更多细节，如图标、占位符图片和示例文本等；
第五步：开启自动布局功能，优化页面布局和结构，即可完成APP首页线框搭建。
11.私人厨师预定APP
如何制作填写手机验证码页面？
**第一步：**从组件库中拖拽出文本组件，添加手机号码输入框和验证码输入框；
第二步：添加按钮组件，设置按钮的文本和样式，并根据设计需求调整其位置和大小；
第四步：在属性面板调整输入框、按钮、文本样式和颜色方案等样式；
第五步：调整布局和对齐方式，以确保页面的一致性和可读性。
页面丰富、进度条、交互跳转、复用组件
第一步：在主画板中添加按钮组件，并设置好其样式；
第二步：从组件库中拖拽出进度条组件至主画板，并调整其属性样式；
第三步：从组件库中拖拽出矩形，调整其位置与进度条匹配对齐；
第四步：点击按钮组件的交互点，拖拽至矩形添加交互；
第五步：设置交互命令，调整线性效果和时长，即可完成进度条的制作。
13.共享民宿管理后台
页面简洁、可视化数据呈现、弹窗交互、开关按钮
**第一步：**在主画板中添加开关按钮；
第二步：在属性面板中点击“默认开启”，设置其开启时的颜色，设置完成后，取消勾选“默认开启”；
第三步：从组件库中拖拽出矩形组件，并为其设置好填充色；
第四步：在状态面板，为组件添加开启状态；
第五步：拖拽开关按钮的链接点至矩形，选择“切换状态”命令，即可实现开关效果。
14.购物商城APP
本套原型模板为商城类APP，主要采用橙色FFB600，其中分为主页、分类、购物车、我的四大板块，分别覆盖了商城类常用的购物、下单、订单、我的等板块。
效果精美、跳转丰富、圆角框、内容切换
如何在原型稿中添加视频？
**第一步：**从组件库中拖拽出视频组件至主画板；
第二步：从三方视频网站选择你想要添加的视频；
第四步：双击视频组件，在输入框中输入视频链接并提交，即可完成添加。
15.网站侧边栏菜单设计
网页的侧边栏菜单可以使其功能和选项易于访问，它简化了用户从一个页面到另一个页面的导航。本案例设计集有10个不同设计的页面，风格各不相同，总有一款适合你！
页面丰富、风格多样
如何制作网页侧边栏？
**第一步：**在画板上绘制一个矩形，作为侧边栏容器,调整矩形的位置、大小和样式，以符合你的设计要求；
第二步：在侧边栏容器中添加菜单项，可以添加多个菜单项，并设置它们的文本和样式。
第三步：为菜单项创建交互链接，将每个菜单项链接到对应的页面或操作，以实现导航功能；
第四步：如果需要，可以使用图标库或添加自定义图标或图像，以增加菜单项的可视效果和识别性；
第五步：设计样式和布局，调整布局和对齐方式，以确保侧边栏的一致性。
16.电影/音乐类应用网页端
这条原型设计案例适用于娱乐行业，专注于电影和音乐行业。它采用单色、低保真风格，合计15个页面，包括:电影首页、列表页面、详情页面、卡通和电视节目页面、各种列表页面，包括音乐、新闻、媒体库、排名、收藏、直播等，个人中心、搜索、404错误页面。
页面丰富、下拉选项框、复用性高
如何快速制作下拉选项框？
**第一步：**从组件库中拖拽出多选下拉框组件至主画板；
第二步：双击多选下拉框组件，为每个下拉选项命名；
第三步：为每次下拉项创建交互链接，将每个下拉项链接到对应的页面或操作；
第四步：设置每个下拉项的触发、命令以及缓动效果等；
第五步：设计样式和布局，调整布局和对齐方式，即可完成下拉选项框的创建。
Web3.0的发展为各种业务实体之间的信息交换创造了一个安全的空间，它使虚拟世界的存在更加强大，并允许NFT的安全交易。本原型案例带有新的未来主义的设计趋势，如彩色渐变、3D元素以及未来空间主题。
页面风格多样、色彩丰富、复用性高
如何快速构建官网首页？
**第一步：**确定官网首页的设计需求，包括品牌风格、色彩、内容布局等；
**第二步：**确定官网首页的整体布局，虑页面的结构、导航、内容区域和各个模块的摆放位置；
**第三步：**逐步添加基本的页面元素，如头部导航栏、Banner区域、特色产品展示、关于公司、服务介绍等；
第四步：添加公司Logo、背景图、图标等来增加页面的视觉吸引力，确保设计与公司品牌形象和目标受众相符；
第五步：填充页面内容和数据，如添加文案、产品介绍、客户评价等，即可完成官网首页界面的搭建。
18.用户画像页面合集
对目标用户的深刻理解是创造卓越产品的基础，好的用户画像可以帮助产品团队找到理想客户的解决方案。本原型案例合集包括10个模板，包括用户基本信息、行为、需求、兴趣和动机。
如何快速构建“用户画像”页面？
第一步：确定界面的整体布局，考虑界面的结构、导航、内容区域和交互元素的摆放位置；
第二步：拖拽添加基本的界面元素，如头部、侧边栏、卡片、表格等；
第三步：填充内容，添加用户头像、姓名、性别、年龄等基本信息；
第四步：在图表或表格中展示用户的兴趣爱好、购买行为等详细数据；
第五步：优化页面布局，即可完成“用户画像”页面的构建。
19.联系我们页面合集
如何快速构建“联系我们”页面？
**第一步：**在画板中添加文字组件，并输入相应的文字信息；
第二步：拖拽出矩形组件，并在属性面板中调整其样式，作为用户输入框；
第三步：等距克隆多个矩形组件，作为用户多重信息输入框；
第四步：拖拽出按钮组件，在属性面板中调整其样式；
第五步：在按钮组件上添加CTA文字，即可完成“联系我们”界面的搭建。
20.食品商店APP
轮播图、日期选择器、输入框、欢迎页面
如何快速构建欢迎页面？
**第一步：**从组件库中拖拽出页面所需组件，如图片、文字、按钮组件等；
第二步：在图片按钮中添加图片；
第三步：在文字组件中添加欢迎语；
第四步：点击按钮组件，在属性面板中调整按钮颜色及其他属性；