邮箱订阅

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

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

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

开始使用

2019,都在用 iDoc了!

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

免费使用

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

了解更多

Mockplus实操教程:原型设计之长页或长图滚动效果

Thomas 2019-03-20 15:18:22 阅读:3166

我们日常在浏览APP或网页时,长页或长图滚动是随处可见。这种滚动式的APP或网页已经彻底流行起来了,甚至可以说它已经脱离趋势,成为了一种常规的设计。当用户向下滚动页面时,所需的信息和内容就会自然呈现,而无需多余的交互操作。


长页或长图滚动的优势:

1)可以为用户提供更精准的导航;


2)在同一页面可以呈现更多的信息,吸引用户向下滑动;


3)可以更好的与移动设备相兼容;


好了,咱们开始进入正题,既然长页滚动效果已经成为了一种常规的设计,那作为设计师的我们该如何设计长页滚动效果呢?接下来,我将使用Mockplus手把手教大家如何设计常见的长页滚动效果。


在Mockplus中想实现长页滚动效果,目前有2种方式。一种方法是直接拉长页面,另一种方法是使用滚动区组件。下面,我们一起来看看具体操作步骤。


方法一:直接拉长页面

产品原型效果图:


微信长页滚动原型


演示地址:https://run.mockplus.cn/HouPoju55N2kLYS0/index.htm...


操作步骤:

1)打开Mockplus后,首先选择“新建项目”,然后选择项目类型为“手机”(具体的设计尺寸根据自己的需求选定),接着点击“创建”即可。


新建原型项目



2)滑到手机壳底部,长按鼠标左键向下拉长页面。拉长的页面在手机壳右侧顶部及底部会出现尖角按钮图标。


页面拉长设计


3)组件库中搜索组件在拉长页面中做原型设计。


4)设置固定区域:拖动顶部及底部的尖角按钮可设置固定区域。


固定滚动区域


方法二:使用滚动区组件

产品原型效果图:


微信长页滚动原型


演示地址:https://run.mockplus.cn/gCM4QJxUYU5XHdqx/index.htm...


操作步骤:


1)按上面操作方法创建一个手机项目。


2)组件库中搜索组件在需固定的顶部和底部区域进行设计。


3)在中间需要滚动的区域添加滚动区。


4)双击滚动区,点击滚动条的“+”号可增加滚动区域,然后在滚动区域进行原型设计。


滚动区设计


进阶操作-长页滚动停留效果

效果说明:当我们在淘宝网上看中一件商品,点击后会进入商品页面。当我们滚动页面一段距离后,页面中的“宝贝详情”、“累计评论”及“专享服务”这个选项卡会停留在页面最顶端。


产品原型效果图:


长页滚动停留效果原型


演示地址:https://run.mockplus.cn/raYgbWVi4uo2tdTl/index.htm...


实现方法:两个滚动区的嵌套使用


操作步骤:

1)添加一个滚动区(滚动区1),并在滚动区里添加“宝贝详情”、“累计评论”、“专享服务”选项卡及其上面的组件。


2)在滚动区1里面嵌套一个滚动区2,在滚动区2里面添加“宝贝详情”、“累计评论”、“专享服务”选项卡下面的组件。


3)回到滚动区1,点击滚动区1中滚动条“+”号,将高度增加到“宝贝详情”、“累计评论”、“专享服务”选项卡正好在顶部时。


4)将滚动区2的高度调至一定高度(网页项目);或是将滚动区2的高度调至手机满屏高度(移动项目)。


5)退出滚动区编辑状态进入演示界面,就可以看到该效果了,演示时注意鼠标位置,滚动“宝贝详情”、“累计评论”、“专享服务”选项卡上面时,鼠标放在上面区域,滚动下面时,鼠标放在下面区域。


怎么样?是不是感觉长页滚动效果如此简单?有兴趣的朋友赶紧去下载Mockplus动手实操一下吧。

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

_____

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

免费下载
logo

咨询客服

帮助群:809081150 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶