做 App原型设计 ，那么页面切换、进度条、页面滚动、图片轮播，下拉菜单，搜索框这些交互效果必不可少。如何复杂疾速地完成这些效果呢？以下小编依据经历为大家提供了一些复杂的设计办法，以供参考。
1.页面跳转
作为一款App原型设计， 页面跳转 必不可少。如何疾速完成页面间疾速跳转的效果？小编最近在运用Mockplus制造原型设计，以下就以该工具为依托为大家引见一种复杂的设计办法。
设计步骤
Step 1： 点击触发页面跳转的组件。
Step 2： 拖拽（点击后不放手）组件上的链接点，直至右侧项目树中某个页面上。
Step 3： 交互曾经设置完成，即可演示预览页面跳转效果。
2.进度条
做过App原型设计的设计师都晓得，在适当的场景中运用 进度条 可以使产品更“兽性化”，从而增加用户的不确定心思，情愿等候页面加载。但是关于设计师来说，如何应用原型设计工具来制造进度条？设计进程繁琐吗？以下有个设计办法供大家参考。
设计步骤
Step 1：从左侧组件库拖出2个外形组件，1个按钮组件。
Step 2：调整两个外形组件为相反宽度的长方形，程度相连放置，并去掉组件接触面的边框线。
Step 3：将2个外形组件设置为不同的颜色。
Step 4：设置交互。
- a.点击按钮，将链接点拖至右边外形组件做交互。设置触发方式为点击，交互为调整尺寸并坚持高度不变。在交互面板中加宽至左边外形的宽度。
- b.同理设置按钮对左边外形组件的交互，留意左边外形的加宽设置应为负值。
Step5：设置位移。翻开右侧交互面板中，右边外形组件的尺寸调整方式设 为默许，左边外形组件的尺寸调整方式设为向左。
最前沿的中国产品人和设计师
摹客专访
Step 6: 交互设置完成，点击按钮即可预览进度条效果。
3.页面滚动
随着挪动端的疾速开展和日益普及，我置信很多人都享用着它带来的便当。在我们阅读这些挪动端App时，最多的操作是什么？对，就是滚动页面。设计师在停止APP原型设计时，如何完成 页面的滚动效果 ？其实，在一个滚动区里放几个组件就处理了？不信？无妨让我们一同看看如何操作吧！
设计步骤
Step 1：从左侧组件库中拖出滚动区组件放置任务区。
Step 2：双击滚动区进入滚动区编辑形态，点击滚动条右侧的+号可拉长滚动区，放置更多的内容。
Step 3：点击空白区域推出编辑形态。
Step 4：点击演示即可预览页面滚动效果。
PS: 若想完成滚动区外悬浮效果，可以在完毕编辑后将需悬浮的组件放置在滚动区外即可。
4.图片轮播
图片轮播普通用于App原型设计的主页，用来展现网站信息或商品概况的图片集合。如何使这些图片停止轮播呢？在Mockplus这款疾速 原型设计工具 中，它为设计师直接提供了图片轮播组件，可以直接拖放到任务区中停止运用。
a. 自动轮播效果
Step 1：从左侧组件库将图片轮播组件拖至任务区内。
Step 2：双击组件停止图片添加，可选择一或多张。
Step 3：在右侧属性面板中可设置动画效果，播放距离，能否自动播放。
Step 4：设置完成后即可预览轮播效果。
b.手动轮播效果
Step 1：从库中拖出滚动区组件至任务区，设置为横向滚动区双击后开端编辑。
Step 2：从组件库中选择图片或文字组件放至滚动区内，自定义内容排版。
Step 3：编辑时若滚动区放不下所展现内容或编辑区过大时，可点击下方滚动条”+”“-”停止调整。
Step 4：编辑完成后点击滚动区内部加入，依据演示区域调整滚动区所占区域大小。
Step 5：点击演示即可预览图片轮播效果。
5. 下拉菜单
下拉菜单通常适用于在原型设计中陈列一些需求展现的子页面，相当于一个子导航菜单。这种交互效果普通适用于博客内容分类、电商网站商品陈列等状况。下拉菜单的方式多种多样，但最令设计师最头疼的还是手风琴菜单效果。即便是应用功用弱小的Axure，想完成该效果也比拟费事。但是应用Mockplus的“面板”组件，可以疾速地做一个 手风琴菜单 。
设计步骤
Step 1：从左侧组件库中选择面板组件拖放至任务区，详细菜单款式可自定义。
Step 2：设置交互。
- a. 面板1，链接到本人，调整大小。链接到面板2，位移。链接到面板3，位移。
- b. 面板2，链接到本人，调整的大小。链接到面板3，位移。
- c. 面板3，链接到本人，调整大小。
Step 3：交互设置完成，可演示检查手风琴菜单效果。
6.搜索框
无论是Web端还是App原型设计，搜索框都是原型中比拟重要的局部。一个好的搜索框和 搜索形式 可以协助用户疾速找到所需的东西，从而带给用户极棒的体验。如何应用原型设计工具制造一款简约好用的搜索框呢？
搜索框普通分为以下两种效果：
a.惯例搜索
Mockplus直接提供的搜索框组件就可以满足需求，从组件库中拖出组件即可运用。若想设计一个有弹出菜单的搜索框，可以参考以下这种设计办法。
b.即时搜索
过于大多数人都曾因不佳的交通状况而迟过到、叫过苦。经济的快速发展带动的是社会各方面的全面提升，但在此过程中，交通的发展却没跟得上前进的步幅，各类交通难题让交管部门伤透脑筋，如何利用AI来解决相关难题已成当务之急。复杂，建议运用惯例搜索即可完成原型原理演示。
看完以上App原型设计中复杂的交互效果引见及设计办法，即时是老手设计师，也能轻松完成这些 交互设计 效果了吧！心动不如举动，赶忙开端你的原型设计吧！