前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

「Axure」了解这些事,做交互真的很简单(2)

这里是深夜海盗酒馆,提供互联网产品 | 知识分享 | 生活感悟 | 个人成长,关注我,希望能「与你碰个杯,一起前行」。


上一篇我们介绍了Axure做交互的基础认知,比如交互的承载终端、从线框到demo的认识等。

这一篇主要来讲:怎么理解Axure交互的本质以及认识软件中基础元件的自带特性。



Axure交互的本质


交互,简而言之,就是用户进行操作,系统进行反馈的过程。在axure中,按照上图理解就可以了。


简单举个例子:

用户访问首页,如果是已登录情况,则展示首页,如果是未登录情况,则跳转至登录页面。(只是举例,正常情况下,首页有未登录和已登录两种状态的)


这个例子中,我们按照上图拆解:

操作的主体对象:首页
触发动作:首页载入时
情形/条件:用户是否已登录

  情形一——用户已登录
  反馈的动作:打开链接
  目标对象:首页
  设置:打开位置-当前窗口;链接到当前项目的某个页面-首页
  顺序:无(如果有多个反馈动作,则需要按照静态拆解过程调整顺序)
  
  情形二——用户未登录
  反馈的动作:打开链接
  目标对象:登录页面
  设置:打开位置-当前窗口;链接到当前项目的某个页面-登录页面
  顺序:无(如果有多个反馈动作,则需要按照静态拆解过程调整顺序)



基础元件的自我修养


我们需要了解元件本身自带的一些特性,这些是Axure帮我们预设好的元件特性,可直接使用。



一、通用设置

1.1 交互样式

可以设置元件的鼠标悬停样式、鼠标按下样式、选中与禁用样式。其中鼠标悬停与按下样式一般设置完后在预览时只跟鼠标悬停位置与按下时的操作相关,而选中与禁用样式需要结合交互事件使用。



1.2 元件提示

指的是在浏览器中,鼠标悬停在对应元件上一段时间,会在鼠标位置展示提示气泡,效果如下图



1.3 选项组

有的产品常会问,我拖了多个单选框,怎么这些单选框没有办法实现单选。

有的产品会使用交互事件来解决,比如,单击某一个单选框,设置这个单选框为选中,其他单选框为不选中。虽然实现了效果,但是工作量很大,效率很低。

这时候最好的使用方法是使用Axure自带的选项组功能,选中你要编组的单选框们,把它们设置成选项组就OK了。



注意选项组的命名,也可以下拉选择你已经命名的选项组,这样这些元件都会算作同一个单选选项组。



二、个性设置

2.1 文本框

我们可以直接使用axure给我们的预设类型,如下图:



还有文本框的提示文字、提示文字样式、最大长度,是否隐藏边框等等。

其中如果设置了提交按钮,那么在文本框输完文字,直接敲回车就能触发提交按钮的单击事件。


2.2 内联框架

我们可以预先设置一些东西:比如滚动条设置、边框是否隐藏、预览图片设置(需要注意的是,预览图片设置必须生成html网页:也就是按F8才行,直接预览是没有效果的。)




未完待续


以上内容主要是帮助我们理解交互的本质,以及要活用软件基础元件的自带特性,防止发生缘木求鱼,重复造轮子的情况。

如果对文章内容有什么建议或者疑问欢迎评论或者私信我。

当然如果有其他想看的内容也可以私信我,能写的我也会酌情写的。


今天的内容就先到这里了,如果觉得对你有帮助,动动小手,关注、点赞、评论、收藏,你的认可对我来说真的很重要

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言