快好知 kuaihz

Axure RP8.0教程:APP列表展示页排版技巧及中继器的坑

移动端APP最常见的界面就是列表界面,如58租房小程序的列表页,本教程主要分享如何优化列表页的排版以及过程中遇到的难点解决方法。

效果如下:

界面优化一:隐藏滚动

实现列表的垂直滚动,需要将内容先转化为动态面板,滚动条设置为:自动显示垂直滚动条。

由于软件自身自带的滚动条样式比较丑,因此我们需要将其隐藏。

首先,将此动态面板的宽度变宽,由【375】变为【395】,正好将滚动条的位置移出界面,如下所示:

其次,再将此【动态面板】转化为新的【动态面板】,并将宽度变小为原来的尺寸【375】;切记,将滚动条设置为:无。

这样,即可以实现滚动,还能隐藏滚动条,效果如下:

界面优化二:列表页数据项的鼠标悬浮选择效果

实现列表数据的展示,推荐使用【中继器】,可以实现每一项数据鼠标对应选中的悬浮效果,实现步骤如下:

首先,在【中继器】数据项中,增加一个不填充 的矩形,命名为“悬浮矩形”,图层顺序为最顶层。

其次,给此矩形增加鼠标悬浮的交互样式。设置填充色为#999999,透明度为10,设置如下:

预览效果如下,发现一个明显的问题:无论鼠标移动某一个数据项,所有数据项的背景矩形都被选中。

通过不断的筛查排除,最后找到动态面板的一个属性设置:允许触发鼠标交互。

将其勾选去除后,即能正常显示数据项的鼠标悬浮效果,最终效果如下:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:中继器  中继器词条  排版  排版词条  技巧  技巧词条  展示  展示词条  教程  教程词条  
原型

 PRD之道:活用Axure绘制高...

作为PRD的核心部分,业务流程图对产品研发的各个环节能否跑通,业务是否顺畅至关重要。好的流程图,可以快速让整个团队熟悉理解业务,并优化业务。最近看到一些小伙伴在...(展开)

原型

 原型的第一性原理:讲清楚目标

一个产品需要有一个核心定位,我们的原型也首先要说清楚这个定位所转化过来的目标,这是第一层次,我称为产品目标。在动手进行原型制作之前,还有一个很重要的事情要先梳理...(展开)

原型

 方法论 | 产品经理的原型工作流

交互原型图是产品经理必备的技能,不管是小白,还是大牛;是实习生,还是总监,都是从画原型图开始的。好的交互原型图,可以让开发不问一句,就能看得清清楚楚,开发得明明...(展开)