快好知 kuaihz

Axure 教程:不可见滚动条的页面滚动效果

在设计产品原型的过程中,经常会遇到这样的一种场景——所要展示的内容,超出了当前可视页面范围。遇到这种情况,通常使用Axure动态面板的滚动条设置来解决。

产品原型设计是产品经理每日或周期性必须经历的事情。经过长期的产品沉淀,每位产品经理多少都会有完美主义精神。产品原型的领域,就是其完美主义精神发挥的场所之一。

在设计产品原型的过程中,经常会遇到这样的一种场景——所要展示的内容,超出了当前可视页面范围。遇到这种情况,通常使用Axure动态面板的滚动条设置来解决。

滚动效果

首先,创建动态面板(Panel)

选中当前需要添加滚动条范围内部件,右键选中“创建动态面板(Create Dynamic Panel)”。

其次,设置动态面板滚动效果为“纵向滚动条”

设置为“纵向滚动条”后,具体如下图所示:

展示内容超过当前页面的时候,会自动生成滚动效果

第三,生成Axure原型,查看有滚动效果界面

具体如下:

滚动效果

首先,基于“有滚动效果”,制作无滚动效果

基于“有滚动效果”中第二步骤,在原有的动态面板基础上再创建一层动态面板。点击最外层动态面板,进入操作界面。将内层的动态面板,设置滚动效果。将看到的滚动条,移出外层动态面板框定的区域范围外。

具体如下图所示:

其次,生成Axure原型,查看无滚动效果界面。

具体如下:

滚动条和无滚动条,本质上都能够实现页面滚动查看完整信息效果

什么样的场景应用无滚动条的界面效果

当页面右侧滚动条数量>=2时,建议使用无滚动条界面的效果,提升用户体验。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:滚动  滚动词条  可见  可见词条  效果  效果词条  页面  页面词条  教程  教程词条  
原型

 Axure教程|手把手教你用Ax...

通过使用Axure制作「贪吃蛇」游戏,使自己更加熟练Axure中的各种函数及对一款产品开发时的结构梳理及逻辑分析。本文的受众对象为喜欢Axure或想学Axure...(展开)

原型

 Axure教程:以微信为例,模拟...

无论是APP还是网站,上下纵向浏览或者左右横向浏览是非常常见的,除此之外,大家肯定也都注意到了一种情况一种现象:当内容浏览到底部时,继续下拉页面会出现触底反弹,...(展开)

原型

 Axure 教程:用 Axure...

这次我找了我之前用 Axure 做的一个简历,给大家做一个分享。简历较为简约,可以自行添加内容。这个我之前在面试的时候有用过,对于产品经理、交互设计师……当你用...(展开)