陌北默

河北11选五开奖结果 www.p49oh.cn 做App原型设计,那么页面切换、进度条、页面滚动、图片轮播,下拉菜单,搜索框这些交互效果必不可少。如何简单快速地实现这些效果呢?以下小编根据经验为大家提供了一些简单的设计方法,以供参考。

 

1.页面跳转

App原型设计-页面跳转效果.gif

作为一款App原型设计,页面跳转必不可少。如何快速实现页面间快速跳转的效果?小编最近在使用Mockplus制作原型设计,以下就以该工具为依托为大家介绍一种简单的设计方法。

 

设计步骤

  • Step 1: 点击触发页面跳转的组件。
  • Step 2: 拖拽(点击后不放手)组件上的链接点,直至右侧项目树中某个页面上。
  • Step 3: 交互已经设置完成,即可演示预览页面跳转效果。

 

2.进度条

App原型设计-进度条效果.gif

做过App原型设计的设计师都知道,在适当的场景中使用进度条可以使产品更“人性化”,从而减少用户的不确定心理,愿意等待页面加载。但是对于设计师来说,如何利用原型设计工具来制作进度条?设计过程繁琐吗?以下有个设计方法供大家参考。

 

设计步骤

  • Step 1:从左侧组件库拖出2个形状组件,1个按钮组件。
  • Step 2:调整两个形状组件为相同宽度的长方形,水平相连放置,并去掉组件接触面的边框线。
  • Step 3:将2个形状组件设置为不同的颜色。
  • Step 4:设置交互。
  • a.点击按钮,将链接点拖至左边形状组件做交互。设置触发方式为点击,交互为调整尺寸并保持高度不变。在交互面板中加宽至右边形状的宽度。
  • b.同理设置按钮对右边形状组件的交互,注意右边形状的加宽设置应为负值。
  • Step5:设置位移。打开右侧交互面板中,左边形状组件的尺寸调整方式设 为默认,右边形状组件的尺寸调整方式设为向左。

 

3.页面滚动

App原型设计-页面滚动效果.gif

随着移动端的快速发展和日益普及,我相信很多人都享受着它带来的便利。在我们浏览这些移动端App时,最多的操作是什么?对,就是滚动页面。设计师在进行APP原型设计时,如何实现页面的滚动效果?其实,在一个滚动区里放几个组件就解决了?不信?不妨让我们一起看看如何操作吧!

 

设计步骤

  • Step 1:从左侧组件库中拖出滚动区组件放置工作区。
  • Step 2:双击滚动区进入滚动区编辑状态,点击滚动条右侧的 号可拉长滚动区,放置更多的内容。
  • Step 3:点击空白区域推出编辑状态。
  • Step 4:点击演示即可预览页面滚动效果。

 

PS:?若想实现滚动区外悬浮效果,可以在结束编辑后将需悬浮的组件放置在滚动区外即可。

App原型设计工具Mockplus的滚动区效果.gif

 

4.图片轮播

App原型交互设计之图片轮播效果.gif

图片轮播一般用于App原型设计的主页,用来展示网站信息或商品详情的图片集合。如何使这些图片进行轮播呢?在Mockplus这款快速原型设计工具中,它为设计师直接提供了图片轮播组件,可以直接拖放到工作区中进行使用。

 

a. 自动轮播效果

  • Step 1:从左侧组件库将图片轮播组件拖至工作区内。
  • Step 2:双击组件进行图片添加,可选择一或多张。
  • Step 3:在右侧属性面板中可设置动画效果,播放间隔,是否自动播放。
  • Step 4:设置完成后即可预览轮播效果。

 

b.手动轮播效果

  • Step 1:从库中拖出滚动区组件至工作区,设置为横向滚动区双击后开始编辑。
  • Step 2:从组件库中选择图片或文字组件放至滚动区内,自定义内容排版。
  • Step 3:编辑时若滚动区放不下所展示内容或编辑区过大时,可点击下方滚动条” ”“-”进行调整。
  • Step 4:编辑完成后点击滚动区外部退出,根据演示区域调整滚动区所占区域大小。
  • Step 5:点击演示即可预览图片轮播效果。

 

5.下拉菜单

App原型交互设计之下拉菜单效果.gif

下拉菜单通常适用于在原型设计中陈列一些需要展示的子页面,相当于一个子导航菜单。这种交互效果一般适用于博客内容分类、电商网站商品陈列等情况。下拉菜单的形式多种多样,但最令设计师最头疼的还是手风琴菜单效果。即使是利用功能强大的Axure,想实现该效果也比较麻烦。但是利用Mockplus的“面板”组件,可以快速地做一个手风琴菜单。

 

设计步骤

Step 1:从左侧组件库中选择面板组件拖放至工作区,具体菜单样式可自定义。

Step 2:设置交互。

  • a. 面板1,链接到自己,调整大小。链接到面板2,位移。链接到面板3,位移。
  • b. 面板2,链接到自己,调整的大小。链接到面板3,位移。
  • c. 面板3,链接到自己,调整大小。

Step 3:交互设置完成,可演示查看手风琴菜单效果。

 

6.搜索框

App交互设计之搜索框效果.gif

无论是Web端还是App原型设计,搜索框都是原型中比较重要的部分。一个好的搜索框和搜索模式可以帮助用户快速找到所需的东西,从而带给用户极棒的体验。如何利用原型设计工具制作一款简洁好用的搜索框呢?

 

搜索框一般分为以下两种效果:

a.常规搜索

Mockplus直接提供的搜索框组件就可以满足需求,从组件库中拖出组件即可使用。若想设计一个有弹出菜单的搜索框,可以参考以下这种设计方法。

 

b.即时搜索

过于复杂,建议使用常规搜索即可实现原型原理演示。

看完以上App原型设计中简单的交互效果介绍及设计方法,即时是新手设计师,也能轻松实现这些交互设计效果了吧!心动不如行动,赶紧开始你的原型设计吧!

 

原文地址:Mockplus

作者:jongde

 

转载请注明:河北11选五开奖结果 » 【新手指南】App原型设计:如何快速实现这6种交互效果?

登录收藏
 
你可能喜欢的:
协作设计: 如何有效提高团队合作的工作效率?协作设计: 如何有效提高团队合作的工作效率?
【拿来就用】20款婚礼婚庆网站模板, 轻松打造幸福满满的网站设计【拿来就用】20款婚礼婚庆网站模板, 轻松打造幸福满满的网站设计
支付宝「银行卡绑定流程」原型资源分享支付宝「银行卡绑定流程」原型资源分享
设计师的日常生活体验对设计到底有多大影响?设计师的日常生活体验对设计到底有多大影响?
设计交付指南:设计师与开发如何才能好好协作?设计交付指南:设计师与开发如何才能好好协作?
UI设计师如何助力PM的原型图UI设计师如何助力PM的原型图
当心理学遇上设计:格式塔原理是如何服务于设计的?当心理学遇上设计:格式塔原理是如何服务于设计的?
小小滑块大大学问,你真的会用滑块了吗?小小滑块大大学问,你真的会用滑块了吗?
大厂设计师手把手教你交互设计大厂设计师手把手教你交互设计
UX设计秘诀之注册表单设计,细节决定成败UX设计秘诀之注册表单设计,细节决定成败
?
  • 网络医疗广告套路太多 消费者讲述就医被坑经历 2019-04-25
  • 【理上网来】以创新为基点,是“过坎”的关键 2019-04-15
  • 军队资源战略管理研究 2019-04-15
  • 新时代建筑的审美需要 2019-04-14
  • “智能农业”在日本有喜有忧 2019-04-14
  • 5G标准出炉 明年有望商用 2019-04-10
  • 本地人自豪 外地人向往 2019-04-01
  • 女性之声——全国妇联 2019-03-30
  • 我省进入毒蘑菇中毒高发季 省疾控中心发布安全警示 2019-03-29
  • 安徽秸秆综合利用引来“金凤凰” 两天签下275亿大单 2019-03-27
  • 不好意思了,忘记还有赌球一说。[哈哈] 2019-03-27
  • 紧盯节点,打赢反“四风”持久战(前沿观察) 2019-03-25
  • 您访问的页面找不回来了 2019-03-25
  • 昆明母婴室地图出炉啦!公众场合喂奶不再羞答答 春城壹网 七彩云南 一网天下 2019-03-24
  • 大学毕业生是不是越来越过剩?当然大学毕业生可以在多种行业就业,比如农村、服务业等等。不过,过剩还是一种极大的浪费。 2019-03-21
  • 400| 903| 261| 260| 876| 136| 942| 87| 918| 770|