AxureRP8实战手册-案例3(图片:变换样式的按钮①)

AxureRP8.0教程 小楼一夜听春语 14812℃ 0评论

案例3.   图片:变换样式的按钮(1)

案例来源:

花瓣网-登录界面

 

案例效果:

  • 初始状态:(图1-12)

1_12

  • 鼠标进入图标时:(图1-13)

1_13

案例描述:

使用第三方账号登录时,鼠标移入图标和在图标上按下时,显示不同状态的图片。

 

元件准备:

  • 页面中:(图1-14)

1_14

思路分析:

元件的属性中包含【鼠标悬停】与【鼠标按下】的交互样式,在用户进行这两个动作时,能够触发显示预先设置好的交互样式。

 

操作步骤:

1、设置每个图标【鼠标悬停】的交互样式,可参考基础23;(图1-15)

2、设置每个图标【鼠标按下】的交互样式,可参考基础23。(图1-15)

1_15

补充说明:

  • 本书电子资料中附带的本案例图片素材,需要进行切割/裁剪;(参考基础25)
  • 预览原型,在浏览器中将各个裁剪后的图标另存到本地,然后导入原型中使用。
  • 本案例中的关闭按钮为矩形元件,元件文字为输入法中的特殊符号“×”。

 特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例3(图片:变换样式的按钮①)

喜欢 (28)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 为什么在交互设置中导入大小一样的图片后预览变形了?
    pera2016-07-07 14:36 回复
    • 需要进行切割/裁剪
      pangtouren2016-09-09 15:17 回复
  2. 没办法保存选中前的图片素材,因为鼠标移上去图片就自动变成选中后的图片素材了..... ➡
    ECHO2016-09-05 18:11 回复
  3. Get!
    pangtouren2016-09-09 15:12 回复
  4. 如何另存裁剪后的图片啊
    Mayday2016-09-21 11:10 回复
    • 光标放在图片上,点击鼠标右键,选择分割图片,然后就像切蛋糕一样,爱咋切咋切
      lemon不酸2016-09-29 10:19 回复
    • 切好图片,再copy到word,点击图片右击另存为即可
      lemon不酸2016-09-29 10:23 回复
  5. 我的Axure 8啊 互交里面根本没有图片啊
    学习学习2016-10-12 15:19 回复
    • 同上。 axure8的交互设置中没有图片的可选项
      Terry2016-11-14 21:47 回复
      • 同上,有解决的么?
        Ian2016-12-09 13:48 回复
        • 选中图片,在属性下面有一个交互样式设置,里面可以选择鼠标悬停时的样式
          bwcq2017-01-13 22:43 回复
  6. 这是每一种交互上传一个图片?
    Lily2017-11-01 18:02 回复