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

鱼日
0 评论 8535 浏览 6 收藏 4 分钟

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

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

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

有滚动条效果

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

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

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

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

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

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

具体如下:

无滚动条效果

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

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

具体如下图所示:

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

具体如下:

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

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

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

 

作者:鱼日,公众号:issnail

本文由 @鱼日 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
80429人已学习19篇文章
当AI已然成为新的焦点和风口,产品经理该如何抓住这个风口顺势飞起?
专题
12490人已学习11篇文章
怎么做投放是很多运营人和品牌方的一大难题,做好投放不可缺少以下几大步骤。本专题的文章以小红书投放为例,分享了一些策略,一起来看下吧。
专题
16145人已学习13篇文章
在产品工作中,产品的可行性分析就太重要了,这是产品从想法到实施必须经历的。本专题的文章分享了如何做产品可行性分析。
专题
13153人已学习13篇文章
数据可视化需要利用大屏这一工具实现,若想让数据展示变得更加生动,可视化大屏的艺术性设计便不可缺少,而这需要结合许多设计技巧。本专题的文章可视化大屏设计。
专题
35809人已学习14篇文章
原型对于产品经理来说是一门必修课。
专题
13910人已学习13篇文章
用户体验是用户在使用产品过程中建立起来的一种纯主观感受。本专题的文章分享了如何撰写用户体验报告。