Axure基础:元件交互事件

鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以简书的主导航(发现/关注/消息)跳转为例,说明元件的交互过程。

=======================================
Axure 9.0元件交互事件

单击时:当元件被点击时。
双击时:元件被鼠标双击时。
右击时:当元件被鼠标右键单击时。
按下时:当鼠标按下左键没有被释放时。
松开时:当元件被鼠标点击,这个事件由鼠标按键释放触发。
鼠标移动时:当光标在一个元件上移动时。
鼠标移入时:当光标移入元件范围时。
鼠标移出时:当光标移出元件范围时。
鼠标停放时:当光标在元件上方悬停时。
鼠标长按时:当鼠标按下超过2秒没有被释放时。
按键按下时:键盘上的按键被按下时。
按键松开时:当键盘上的按键弹起时。
移动时:当元件移动时,在页面中的坐标位发生了变化。
旋转时:当元件旋转时。
尺寸改变时:当元件宽度或高度发生改变时。
显示时:当元件通过交互动作显示时。
隐藏时:当元件通过交互动作隐藏时。
获取焦点时:当一个输入项获取焦点时。
失去焦点时:当一个输入项失去焦点时。
选中改变时:适用于下拉框,当下拉框被选中的项发生了改变时,通常作为事件的一个逻辑条件。
选中时:当复选框或单选按钮被选中时。
取消选中时:当复选框或单选按钮取消选中时。
载入时:当元件从一个页面的加载中载入时。
文字改变时:当单行文本框或多行文本框中的文字发生改变时。
状态改变时:当动态面板被设置了“设置面板状态”动作时。
拖动开始时:当一个拖动动作开始时。
拖动时:当一个动态面板正在被拖动时。
拖动结束时:当一个拖动动作结束时。
向左拖动结束时:当一个面板向左拖动结束时。
向右拖动结束时:当一个面板向右拖动结束时。
向上拖动结束时:当一个面板向上拖动结束时。
向下拖动结束时:当一个面板向下拖动结束时。
滚动时:当一个有滚动的面板上下滚动时。
向上滚动时:当一个有滚动的面板,向上滚动时。
向下滚动时:当一个有滚动的面板,向下滚动时。

Axure 9.0元件交互样式

鼠标悬停:当鼠标悬停在元件上时,元件的显示样式。
鼠标按下:当鼠标按下元件时,元件的显示样式。
选中:元件被选中时的显示样式。
禁用:元件被停止使用时的显示样式。
获取焦点:当光标聚焦在元件(如文本框)上的显示样式。

=======================================
操作方法

第一步:
添加用例:在设计区域选中元件,在右侧交互面板中点击新建交互,我们会看到该元件可用的事件列表,点击其中的一个事件,点击右侧的用例图标或者直接选择想要添加的动作。
第二步:
插入动作:鼠标点击动作名称,开始添加动作,支持添加多个动作。当我们准备插入第二个动作时,点击用例下方的圆形十字架,开始插入更多动作。
第三步:
配置动作:动作选择完毕后,我们还需要为动作进行一些规则或属性的配置。比如,我们添加的动作是打开链接,在动作配置中,需要添加链接页面并选择页面打开的方式(当前窗口、新窗口/新标签、弹出窗口和父级窗口),最后点击完成。
第四步:
设置交互样式:
选中元件,点击新建交互,可以进行悬停、选择、禁用等相关的交互样式设置;
第五步:
在预览或生成的HTML文件进行查看。

参考:https://www.jianshu.com/p/ae12af2a1f43

=======================================
元件交互示例:

(1)鼠标按下效果:
点击按下按钮置灰这样一个静态效果:就不用设置【交互动作】 ,直接设置【交互样式】即可

(2)鼠标选中效果:
希望 “提交”按钮 选中后, 变蓝色+下划线:
1:选择文本输入框,右边操作区选择【交互】-【新建交互】
2:插入动作:鼠标点击动作名称,开始添加动作 「鼠标点击时」
3:编辑动作:动作选择完毕后,选择「设置选中」,设置选中动作细节
注:如果多个按钮,不同效果
法1)给不同的按钮123起名字,设置按钮1交互动作时设置好对应按钮23的动作
法2)全选按钮-右键-设置「选项的组」名称 --->选项组的所有元素默认只能单选
4:选择交互样式:选择文本输入框,-【新建交互】,选择【选中】设置样式
5:发布,预览看设置的样式

=======================================
配置动作细节


(一)添加条件
有些时候,我们可能会在页面中表达一些判断逻辑,当xxx时,执行xxx动作。
为了做到这一点,我们可以使用axure提供的条件设置功能,来为一个元件设置条件并添加执行动作。
示例:
如果单击先出现弹窗,再单击隐藏弹窗

选择添加情型
添加条件&情形名称
确定条件配置
完成条件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343