John Doe
John Doe
文章5
标签1
分类0
回到首页
文章归档
关于博客
我的朋友
© 2020 John Doe Powered by Hexo & Nexmoe
Axure案例-轮播图

Axure案例-轮播图
2020年07月27日 139 字 大概 1 分钟

案例简介

案例教程

  • 给动态面板创建4个状态

image 1

  • 给动态面板命名为DynamicPanel，并为其添加交互

image 2

  • 添加两个按钮，分别为Left和Right，并设为隐藏

image 3

  • 添加两个热区，分别为SpotLeft和SpotRight，为热区添加如图所示交互，实现鼠标移入显示按钮，鼠标点击切换动态面板状态内容。

image 4

  • 需要注意的是，在热区添加了单击切换动态面板内容之后，还需要添加触发事件，保证轮播图继续轮播。

image 5

Axure案例-引导页

Axure案例-引导页
2020年07月27日 359 字 大概 1 分钟

案例简介

  • APP引导页交互效果，即通过拖动来进行内容切换。
  • 同一个区域的内容切换，需要通过动态面板的多个状态切换实现。
  • 动态面板特有的“拖动触发事件”，可以通过【向左拖动结束时】和【向右拖动结束时】实现动态面板的状态切换。

案例教程

  • 添加动态面板，命名为“GuidePage”，设置大小为“375 * 667”

image 1

  • 为动态面板“GuidePage”创建3个状态，每个状态内容类似，并未每个状态添加背景颜色，最后一个状态添加「立即体验」按钮

image 2

  • 创建3个圆形，填充白色，透明度为30%，设置选中状态透明度为100%

image 3

  • 为3个圆形添加选项组Tab，实现单选效果，设置tab1为默认选中状态

image 4

  • 为动态面板“GuidePage”添加交互【向左拖动结束时】-【设置面板状态】
  • 设置STATE为“下一项”
  • 添加“向左滑动”+“线性”动画效果

image 5

  • 为动态面板“GuidePage”添加交互【向右拖动结束时】-【设置面板状态】
  • 设置STATE为“上一项”
  • 添加“向右滑动”+“线性”动画效果

image 6

  • 当动态面板【状态改变时】，对应tab的【设置选中】也需要改变
  • 动态面板有3个状态，因此需要添加3个情形

image 7

  • 最终效果展示

image 8

参考资料

  • 《Axure RP9：玩转产品原型设计》
Axure学习笔记-动态面板

Axure学习笔记-动态面板
2020年07月21日 575 字 大概 2 分钟

基本使用

  • 动态面板像组合一样，能够实现元件的统一移动、显示、隐藏、选中等操作。
  • 动态面板默认带有一个状态“State1”，状态可以理解为容器的一层。
  • 在画布中放入一个动态面板元件，双击就可以打开默认状态，这就是动态面板的编辑状态。
  • 上下文菜单中选择【自适应内容】，动态面板就能够自动呈现内部所有内容。
  • 上下文菜单中选择【转换为动态面板】，快捷键<Ctrl+Shift+Alt+D>
  • 上下文菜单中选择【从首个状态脱离】，快捷键<Ctrl+Shift+Alt+B>

添加多个状态内容的作用

  • 添加多个状态内容之后，通过交互事件改变动态面板的状态，就能够在同一区域呈现不同的内容。

动态面板与内容框架的区别

  • 使用内联框架嵌入的页面内容，在切换时会有刷新的过程；
  • 动态面板在进行状态切换时不会有刷新的过程；
  • 动态面板在进行状态切换时还可以添加动画效果。

给元件文字中的一部分文字添加交互

  • Axure RP自带的【插入文本链接】交互，可以将默认的【打开链接】动作改变为其他的动作。

固定到浏览器功能

  • 在浏览器中查看原型时，固定的内容不会随着页面内容的滚动或浏览器窗口的尺寸变化改变在浏览器中的位置。

为什么固定在浏览器设置中，左侧和顶部没有边距设置？

  • 浏览器窗口尺寸不是固定的，右侧和底部固定的位置要通过与浏览器边框的距离来确定。而左侧和顶部固定的位置，可以直接通过摆放来确定。

滚动交互

  • 通过滚动设置能够让某个区域的内容可以滚动查看。特别是在移动端原型中，可以通过该功能实现某个区域内容的上下拖到。
  • 画布设置中选择移动设备，或者在移动设备上查看原型，动态面板的滚动条是看不见的。
Axure学习笔记-变量&函数

Axure学习笔记-变量&函数
2020年07月15日 558 字 大概 2 分钟

全局变量

中继器/数据集

元件

页面

窗口

鼠标指针

数字

字符串

  • length
    用途：获取字符串对象的字符长度，每个汉字长度按1计算
    用法：[[字符串对象.length]]
    例一：通过局部变量获取元件文字后，通过[[n.length]]获取的字符长度
    例二：通过[[this.text.length]]即可实现对当前元件文字的字符长度获取（部分元件有效）
  • charAt(index)
    用途：获取字符串对象中索引位置的字符
    参数：大于等于0的整数
    用法：字符串对象.charAt(索引位置)
    示例：设置变量n的值为“ABCDE”，则[[n.charAt(0)]]的返回值为“A”，[[n.charAt(3)]]的返回值为“D”
  • concat(‘string’)
    用途：将字符串对象与另一个字符串连接
    参数：字符串（左右必须添加半角单引号）
    用法：字符串对象.concat(‘字符串’)
    示例：设置变量n的值为“ABC”，则[[n.concat(‘DE’)]]的返回值为“ABCDE”
  • indexOf(‘searchValue’)
    用途：获取查询字符串在目标字符串中首次出现的位置（左至右），若未查询到返回值为-1
    参数：字符串（左右必须添加半角单引号）
    隐藏参数：起始索引位置
    用法：字符串对象.indexOf(‘字符串’，<起始索引位置>)
    示例：设置变量n的值为“ABCDE”，则[[n.indexOf(‘C’)]]的返回值为2，[[str.indexOf(‘E’,3)]]的返回值为4

数学

  • 【+】 加法运算
  • 【-】 减法运算
  • 【*】 乘法运算
  • 【/】 除法运算
  • 【%】 取余运算

日期

  • getDate()
    从Date对象返回一个月中的某一天（1～31）
  • 【getMonth()】
    从Date对象返回月份（1～12）
  • 【getFullYear()】
    从Date对象以四位数字返回年份
  • 【getHours()】
    返回Date对象的小时（0～23）
  • 【getMinutes()】
    返回Date对象的分钟（0～59）
  • 【getSeconds()】
    返回Date对象的秒数（0～59）

案例

案例1： 获取系统当前日期，格式为：yyy-MM-dd
[[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate]]

案例2： 获取系统当前日期，格式为：yyy/MM/dd
[[Now.getFullYear()]]/[[Now.getMonth()]]/[[Now.getDate]]

案例3： 获取系统当前时间，格式为：HH:mm:ss
[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds]]

布尔

  • 【==】 等于
  • 【!=】 不等于
  • 【<】 小于
  • 【<=】 小于等于
  • 【>】 大于
  • 【>=】 大于等于
  • 【&&】 并且
  • 【||】 或者
Hello World

Hello World
2020年07月14日 78 字 大概 1 分钟

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment