当前位置:首页 > 技术知识 > 正文内容

Axure RP设计顶部导航冻结,注册模块互切换,滚动条设计的方法

maynowei3周前 (08-02)技术知识16

以下介绍几个常用小教程,还是那句话——内容简单,适合菜鸟查阅,老鸟可飘过,顺便帮忙点个赞哈

一.顶部导航冻结,页面下拉可跟随

例如:下拉网页进行浏览,顶部导航悬停,固定在顶部位置

1.按照自己理解,拖动几个元件,把导航和主体页面设计好;

2.导航处,右键设置“转换为动态面板”,并命名top;

3.页面空白处,选择交互方式(窗口滚动时);

4.添加动作移动→选择导航→移动:绝对位置→X坐标为0,Y坐标插入变量或函数(Window.scrollY)

二.注册模块(手机注册、邮箱注册互切换)

1.拖动元件,先布局好手机注册内容表,所需的内容,包括(手机输入框,点击获取验证按钮,2次输入密码框,注册按钮);

2.手机注册内容表,右键设置“转换为动态面板”;

3.手机注册内容表,右键设置“管理面板状态”,动态面板名称设置为“add”,下面的面板状态修改State1的名称为“iphoneadd”,并添加一个状态,命名为“emailadd”;

4.点击“emailadd”,进入动态页,为邮箱注册内容表添加元件,所需的内容(电子邮箱输入框,2次输入密码框,注册按钮,边框)注意:边框需要去除顶部框线;

5.设置手机注册、邮箱注册互切换,对手机注册框,设置鼠标点击交互→添加动作“设置面板状态”→选择状态“iphoneadd”;

6.设置手机注册、邮箱注册互切换,对邮箱注册框,设置鼠标点击交互→添加动作“设置面板状态”→选择状态“emailadd”;

三.简单滚动条设计

1.拖动2个元件,矩形和动态面板,准备一个滚动条素材,我这里用的是蓝色条状素材;

2.设置矩形长为500,宽为20,(这个看自己爱好),把矩形设置为圆角,个人觉得这样好看些;

3.把动态面板也设置为长为500,宽为20,导入条状素材,覆盖到圆角矩形上;

4.设置动态面板交互属性,载入时→添加动作设置尺寸→当前元件→宽1高20;

5.再添加一次设置尺寸动作→当前元件→宽500高20,→动作为线性,时间为5000毫秒(即5秒)

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

相关文章

成功上岸腾讯运营,教你如何写校招简历?

产品策划/运营的校招简历应该怎么写?作者从自身实际情况出发,总结分享了相关经验,希望对你有用。写在前面红红火火恍恍惚惚,本人是一位2020届本科毕业生,校招意向互联网产品类。此前有过产品相关的项目&a...

事半功倍 轻松制作可交互移动原型

写在前面先讲个场景,看看有多少人躺枪,你在一个没有专职的交互设计师的公司做客户端的产品,基本上产品和交互的活儿你全承包了,当你准备好一切需要向领导和项目团队一起讲新版本的设计:做过WEB产品的老手,或...

Objective C interface(objective什么意思)

在Objective C里面,interface基本可以理解为其他语言里面的class。当然也有些不同。首先我们可以新建一个Objective-C的file。这里我们添加一个MyClass.m和一个M...

IT博物馆之Objective-C诞生(micro博物馆)

1984年,Objective-C诞生。设计者:布莱德·考克斯(Brad Cox)、汤姆·洛夫(Tom Love)Objective-C是面向对象的通用、高级编程语言。它扩展了标准的 ANSI C,将...

有了这份900多页的Android面试指南,你离大厂Offer还远吗?

前言对于大部分程序员来说,一线互联网是的工作经历是毕生的追求,实际上大厂对于学历的要求远远没有我们想象的那么高,近几年来,互联网公司更注重技术,所以提升自身技术水平才是斩获offer的制胜关键。一线互...

webview 渲染机制:硬件加速方式渲染的Android Web

webview 渲染是什么?webview 渲染是用于展现web页面的控件; webview 可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于 webview 模式进行二次开发的w...