邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用

2019,都在用 iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用

【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多

Mockplus vs Axure 交互原型设计对比—Tab页面切换

Cherry 2018-06-10 12:59:22 阅读:99466

作为一名刚入门的UX/交互设计师,如何做好交互原型设计?这是比较头疼的问题。有经验的前辈们总是告诉你:用Axure就可以实现了! Wait! 建议新手用Axure做Tab页面切换是认真的吗?对于新手来说,Axure的学习曲线还是较高的呢。听闻最近许多设计师对Mockplus这款原型工具的呼声很高,声称比Axure更高效! 到底两者实力如何? 让我们一起来对比一下吧!


什么是Tab页面切换?


从字面上来分析,就是用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层的内容区。Tab属于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。因此,Tab页面切换在交互原型设计中较为常见,也是比较重要的设计技巧之一。


接下来让我们看看如何利用Mockplus和Axure做Tab页面切换效果吧!


步骤概览


Mockplus

1. 选取所需组件

2. 添加内容面板层级与页面相对应

3. 只需拖曳设置交互

4. 保存,预览!


Axure

1.选择控件,转为动态面板

2.扩展动态面板的内容页面,逐个修改名称

3.修改对应页面内容

4.添加菜单点击触发切换事件

5.发布-预览


具体步骤分解:


Mockplus

1.新建项目 (Mockplus支持多种类型的原型设计项目)

mockplus新建项目


2.添加所需组件(状态栏,按钮栏)


PS: 如果觉得按钮的外观不够美观。可在属性中进行调整


mockplus选择组件


3.添加内容面板,并添加两个层级。

mockplus添加内容面板


4.新建三个页面,重命名为“页面一”“页面二”“页面二”,并编辑内容以区分页面。

mockplus新建页面


5.将内容面板三个层链接到对应的三个界面。


PS: 将链接点拖至目标页面即可。


mockplus设置交互


6.保存,预览。


教程地址:http://doc.mockplus.cn/?p=387

效果示例:

《浅唱》-Mokcplus三周年原型设计大赛获奖作品

tab页面切换

Axure

1.建立新项目。


axure新建页面

2.从左侧组件库拖出3个矩形(当然也可以使用其他组件),根据所需实现的Tab页面切换效果放置于工作区内。


 选择组件


3.选中内容区域后,右键并选择“转换为动态面板”。



新建页面


4.将内容区域转换为动态面板后,点击后面的复制图标,添加“页面 2”。

添加面板


5.在右侧的面板状态中选择面板名称,右键“编辑”分别开始设计“页面1””页面 2”的面板内容。


设计页面


6.添加菜单点击触发切换事件,选中菜单,在右侧属性面板中点击“AddCase”开始设置。


设置交互


在最左侧控件下选择“Set Panel State”,然后选择选择交互的页面,如下图所示,设置完后点击OK键即可。按照同样的方式设置“菜单2”,交互页面为“页面2”。


交互设置步骤


7.点击右上角“Publish”, 选择“Preview”即可预览交互原型设计的效果。


预览


效果预览:

tab页面切换-axure

看完Mockplus和Auxre的Tab页面切换的教程,是不是感觉交互原型设计并不是那么困难呢?心动不如行动,赶紧下载心仪的原型工具试一试吧!


【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~


Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019


激活数量:限量150个。


有效期:2019年1月31日。


激活地址:https://www.mockplus.cn/user/upgrade

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:428164223 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶