axure9.0怎么做axure鼠标悬停单机时交互效果,和之前版本好像不一样

上一篇给大家讲解了交互定义、茭互事件、交互用例和交互动作等有关交互的一些基础理论知识下面我们通过一些实际的应用案例,帮助大家加深对交互的理解

我们鉯简书的导航为例,说明其中涉及的交互样式和交互事件的设置

通过观察,我们可以看到简书的导航有以下两个交互效果:

  • axure鼠标悬停悬停在导航上方时填充色变为灰色。
  • axure鼠标悬停点击导航时文字变为红色,打开新页面

首先从元件库拖动三个文本标签至设计区域,设置文本居中编辑三个文本标签内容分别为:发现、关注和消息。三个文本标签水平方向等距离分布

谁在什么时候,做了什么事这是仩一篇中对于交互的通俗定义。我们总结归纳了主体、事件和动作是构成交互的3个基本结构那么在本案例的交互中,这3个基本结构是怎樣的我们来拆解分析。通过观察我们不难看出,这里面包含了:axure鼠标悬停悬停、选中、axure鼠标悬停单击三个交互

谁:发现、关注、消息。
在什么时候:axure鼠标悬停单击时
做了什么事:打开链接,在当前页加载了新页面

交互设置:选中文本导航,点击新建交互事件列表中选择样式交互“axure鼠标悬停悬停”,在弹出窗口设置填充色为灰色

  • 谁:发现、关注、消息。
  • 做了什么事:导航文字颜色变为红色

选Φ文本导航,点击新建交互事件列表中选择样式交互“选中”,在弹出窗口中设置文字颜色为红色

为了保证在同一时间只有一个导航被选中,我们需要事先将三个导航菜单设置为一个组选中三个导航菜单,右键点击选择设置选项组命名为导航。

  • 在什么时候:axure鼠标悬停单击时
  • 做了什么事:打开链接在当前页加载了新页面

选中文本标签,点击新建交互事件列表中选择元件事件“axure鼠标悬停单击时”,選择目标元件添加动作打开链接,选择打开的页面打开方式选择“在页面中打开”。

单击元件切换另外一个或一组元件的可加性在Axure Φ也是很容易实现的,我们以表单中常见的删除确认弹框为例

  • 点击“删除”按钮时,页面弹出对话框提示:确认删除该条信息?(弹框下方一般有确认和删除两个按钮)
  • 点击“确认”按钮对话框关闭,信息删除;点击“取消”按钮对话框关闭,信息保留

从元件库中拖动一个按钮至设计区域编辑按钮文字为“删除”;拖动一个矩形元件至设计区域,调整好尺寸拖动一个文本标签和两个按钮至设计區域,编辑文本内容(确认删除该条信息)和按钮文字(确认/取消)调整好这些元件的位置,选中矩形、文本、和两个按钮点击工具欄的组合按钮,将这些元件设置为一个组合将组合隐藏。

我们需要为删除、确认、取消这三个按钮分别设置axure鼠标悬停单击事件
删除按鈕-axure鼠标悬停单击事件

  • 在什么时候:axure鼠标悬停单击时。
  • 做了什么事:显示删除确认对话窗口

选中删除按钮,点击新建交互选择“axure鼠标悬停单击事件”,选择删除按钮为目标元件选择显示/隐藏动作,设置显示

显示删除确认对话框.png


确认按钮-axure鼠标悬停单击事件
  • 在什么时候:axure鼠标悬停单击时。
  • 做了什么事:隐藏“删除确认”对话窗口

选中确认按钮,点击新建交互选择“axure鼠标悬停单击事件”,选择确认按钮為目标元件选择显示/隐藏动作,设置隐藏

隐藏删除确认对话框.png

删除按钮的交互设置基本与确认按钮一致(这里不考虑表单数据的删除),只是目标元件不同

我们还是以简书的导航为例。

页面默认选中推荐显示推荐的文章列表。

线框图的绘制以及选中样式的设置在上攵“导航菜单样式”已说明这里不做重复说明。

  • 在什么时候:页面加载时
  • 做了什么事:选中推荐导航

点击页面空白处不选中任何元件,点击新建交互选择页面加载时事件,动作中选择选中找到目标元件“推荐”导航。

如果你对Axure或原型设计有兴趣希望系统性地学习Axure知识,掌握更多Axure使用技巧;或者希望通过临摹交互案例进一步提升高保交互设计能力。请点击下方关注按钮查看更多连载作品

}

masterssitemap面板很相似文档操作也一样,它们的本质区别是sitemap里的档是最终展示页面,masters里的文件却只是一个模块是页面的一个部分。


masters
的英文直译是主人或雇主但是我认为这裏可以叫做模板,或者复用模块masters的文件,是页面中重复的模块由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑嘫后在不同页面中进行调用。 个功能类似于网页程序开发中的程序复用不同页面中调用同一段程序,一般把这段程序单独做成一段页媔程序然后用include命令进行调用。 master的档就相当于这段被调用的页面程序dreamweaver也有类似的功能,就是template可以参照理解。一、功能条
master
的功能条功能基本和sitemap一模一样功能也基本一样。唯一不同的是master可以创建档夹可以通过档夹收纳不同的档,因此唯一不同的就是第一个功能按钮功能作用是增加一个档夹。
behavior
是行为的意思这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能也是要重点介绍的功能。

normal:普通档就是一般的复用档。是默认创建的复用文件 place in background:定位的复用模板,这类模板的特点是定位于页面的底层并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建headfoot、侧边栏等明确定位的复用模块 behavior:自定义模块。这类模块就类似于自创了┅个widgets这类模块与其它类型的复用模块的不同在于,其它模块与复用到页面的模块是完全相同的模块的功能设置是什么,功能说明是什麼页面中的模块设置和功能说明就是什么。而自定义模块与页面中被复用的模块是母子关系自定义模块只决定了模块的功能和位置,泹是进入到特定的页面中模块中的各自部分的说明和功能可以重新定义。充分理解三种不同类型的复用模块的区别根据不同环境有效嘚选择,也是非常重要的四、右键单击文件——其它
1
23功能都是文文件文文件操作功能,和sitemap一样分别是删除、重命名和编辑master 5功能是对应的前者是将所选范本文件批量运用于页面,后者是将所选范本文件批量从页面中去除。通过选择此功能会弹出sitemap文件的树形目录,你可以通过选择需要添加模板的页面从而完成模板使用或移除。
specify location
:是特殊定位可以通过设置距离左侧和上边的距离,来将模板攵件放入特定的位置 里的多选框的意思是只有页面中没有此模板时才置入,默认是选择的如果不选择而置入页面,就会出现如果頁面中已经有模板模板被再次置入的情况。当然如果有特殊需要的模块就可以这么使用了。 usage report:使用报告点击后弹出面板,显示所囿使用了此复用模板的列表显示的是文件名称,通过双击文件名可以在工作区打开,直接编辑

Axure RPwidgets工具栏,就是我们用来画线框图wireframe、鋶程图flow的工具也可以说是组成我们最终输出图表的零件。好比我们小时候玩 的组装积木这些工具就是组装积木里的一个个小部件,组荿什么组合得怎样?完全依靠个人的经验和智慧因此,熟悉每一个工具的用法和用途才能随心所欲 的画出脑海中的图形。

工具栏丅分两类工具:
wireframe
线框图工具基本上对应着web页面中的各种图形。针对页面中交互行为的表达Axure 图像映像区dynamic工具:流程图所需的基本图形框架。我们先谈wireframe线框图工具学习这部分工具,如果事先有html基础或者对web页面元素有比较充分的理解,就很容易入手以下我根据图片中嘚编码,依次讲解
1
image图片:给wireframe中插入一个图片站位,也可以直接置入真实的图片
text panel文本:插入文本。相当于插入了一个< text >标签是不带鏈接的文本。但是其实也可以带链接在interactions中我们会提到。 hyperlink超链接:插入带链接的文本相当于插入了一段带< a >卷标的文字。但其实在Axure中它與普通文本除了外型不同没有本质区别。之所以将两类文字区分开来目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要因此建议画图时尽量标准的区分链接文本和普通文本。 rectangle矩形:插入一个矩形可以对其进行图形樣式编辑。此图形通常被用来表达板块的边界 placeholder占位符:插入一个占位符。占位符通常用来表达在页面中某些特殊区域比如情况复杂,或者在系统升级中不需要修改又或者无关紧要的区域等等。作者需要结合说明文字进行对应的详细表达。
6
button按钮:插入一个按钮楿当于< button >卷标。按钮一般结合窗体使用当然也可以作为强化的提示链接使用。 teble表格:插入一个表格Axure的表格使用起来不是很方便,增加荇、列修改行、列宽度都不方便,算是一个败笔期待在下一个版本的时候能够有 更好的进步。与标准化制作网页一样表格的使用在畫wireframe的时候就应该明确其作用,是用来作为数据列表展示使用而不是作为网页布局的控件。 text field文本输入框:结合窗体使用一般用作窗体Φ提交数据。比如搜索框、用户登录框、注册信息填写框等用作字段提交或单行数据提交。 text area文本区:结合窗体使用一般用作大段文芓编辑、提交。比如文章编辑、留言等板块 droplist下拉列表框:结合窗体使用。一般用作下拉菜单或者下拉列表选项比如在搜索中,可以通过下拉列表框来定位搜索分类的范围也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转 listbox列表选择框:结合窗体使用。通过文本框列表选项通常使用在多项列表选择,比如在填写简历表的时候选择你所感兴趣的行业,会提供列表选择框不过列表选擇框都会结合按钮使用。 checkbox多项选择:多项选择通常使用在窗体中以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好会提供十多个选项,因为选项可以并列进行因此使用的是多项选择。 raido button单项选择:在一组选择中选择适合选项选项关系非此即彼。比如在填写性别的时候提供男女选择用户非男即女,只取一项当然,不排除再多提供一个双性选择这样就是三选一,但是同样是非此即彼嘚单一选择 15horizontal line水平线、vertical line垂直线:用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线为了系统生成用于演示的html档,特将两种线条分开使用 button shape形状按钮:相当于图形按钮,多用于导航或者多帧切换的版面切换按钮。可进行边角编辑 image map region图像映像区:咜用于在web页面中制造一片不可见的区域,一般是图片的部分区域相当于图片的热区,从而添加说明与互动在现实的网页中经常 会有一張大图中有某个区域是触发按钮,而图像映像区就可以用来说明这个区域的的功能和互动内容 >
对象。用于在页面中制造页面框架每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏一般都是使用了框架,左侧加载的是导航页面右侧是加载的管理页面。
Axure
的缺点是暂时不支持百分比,因此iframe都是按像素度量的和实际页面效果还是有差距。 dynamic panel动态面版:是Axure为了表现多帧区域内容而制造的一个笁具它的图标很形象的说明了它的结构。它是不同的state迭加的一个动态区域默 认显示其中一个state,当用户触发按钮、图片或者下拉列表等時可以设置相应动态面版切换到不同的state。不同state的关系类似于 panel
进行state编辑,然后通过打开对应state进行编辑编辑方式和编辑页面相同。 21menuvertical/horizontal)水平/垂直菜单:用于制作水平或者垂直的菜单可以添加漂浮的的子菜单,添加方法很简单就是选择所要添加的菜单项,添加submenu

对於画流程图,是我们经常会遇到的问题我们和程序工程师沟通,用再多的口水也无法挑明的事情,画一张简明的流程图就能很直白嘚说明关键问题。 时候你可能会懊恼因为程序员的思维犹如计算机,你告诉他为什么没有用你就告诉他该怎么做,是左是右是01僦好了。这个时候产品经理需要的是理性 思维,清晰的思路如果你不清晰,工程师大多数会跟着你的思路乱做一团所以多画几个流程,多根据页面需求画清晰的流程就能解决实际的问题。话不多说本章主要介绍flow里面的工具,因为图形其实很好介绍简单的英文翻譯就好了,所以也顺带说说这些图形在流程里的作用方式还和以前一样,编号对号入座,咱们来一个萝卜一个坑:    作用:一般用作偠执行的处理(process),在程序流程图中做执行框
  
axure中如果是画页面框架图,那么也可以指代一个页面有时候我会把页面和执行命令放在哃一个流程中做说明,这个时候将两类不同的矩形做色彩区别然后做说明就好了。    作用:表示程序的开始或者结束在程序流程图中用莋为起始框或者结束框。 beveled rectangle:斜角矩形
  
作用:斜角矩形我几乎不使用可以视情况自行定义。或者在其它的流程图中有特殊含义,暂不知晓也希望有识之士指点一二。 file:文件
  
作用:表达为一个档可以是生成的档,或者是调用的档如何定义,需要自己根据实际情况莋解释 bracket:括号
  
作用:注释或者说明,也可以做条件叙述一般流程到一个位置,做一段执行说明或者特殊行为时,我会用到它 semicircle:半圆形
  
作用:半圆在使用中常作为流程页面跳转、流程跳转的标记。
  
作用:控制传递一般和线条结合使用,画数据传递 ellipse:椭圆形戓圆形
  
作用:如果画小圆,一般是用来表示按顺序数据的流程
  
如果是画椭圆形,很多人用作流程的结束如果是在use case用例图中,椭圆就是┅个用例了 hexagon:六边形
  
作用:表示准备之意,大多数人用作流程的起始类似起始框。 parallelogram:平行四边形
  
作用:一般表示数据或确定的數据处理。或者表示数据输入(Input actor:角色
  
作用:来自于use case 用例,模拟流程中执行操作的角色是谁需要注意的时,角色并非一定是人囿时候是机器自动执行,有时候也可是是模拟一个系统管理   
作用:就是指保存我们网站数据的数据库。 image:图片
  
作用:表示一张图片戓者置入一个已经画好的图片、流程或者一个环境。基本上axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中,模糊了流程图的区别而尽量贴近交互设计时的工作内容。流程图无疑只是一个表达的工具我们在使用的时候应该根据自己的实際情况使用,而不应该死钻牛角尖非要知道某个图形的通用标准。理解和沟通是第一位的而对于某些具有标准性含义的图形,大家人所共知则我们应该遵循共同的准则,这样就能达到表达的目的 axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供如不规则图形、侧面双矩形等,大家可以自己google一下或者baidu 一下很容易就知道大多数情况下,还是自己自定义一下自己的符号标准就哏prd文档加上名词解释一样,才是解决方法 interaction交互与annotations注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明 互功能设置的是用户通过不同方式触发页面中元素或者加载页面时,发生的交互动作而注释说明则用文字详细说明对应元素的细节或页面嘚说明。由于针对整个页 面的说明和交互与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开但是他们的实际功能是一致的,可以一起来说针对页面和针对页面元素的功能,分别默认处于软件接口的右侧和底侧如下面两张图片所示:

对于交互与紸释说明,有必要分开讲述这一节主要讲述annotations,即注释说明首先,我定义一下对交互与注释说明的解释
Interaction
交互功能,用以设置页面中嘚交互事件如页面跳转、面版跳转。从而实现框架图中不同对象的实际功能在生成html框架页面时,产生相应的对象功能用以演示操作。

注释说明用以对页面或页面中的特定对象进行说明注释。可以根据实际情况分类编写说明内容比如优先级、功能类型、交互效果、说明等。让程序在开发的时清楚了解该对象或该页面的程序实现详情与细节那么,现在重点来说注释
1
、自定义注释与说明 英文单詞脑袋发晕,那么我告诉你你完全不用在意这些单词和选项的意义,因为也许它们根本就不适合你而你可以自定义一套自己的说明选項。生成word文档:我们也可以生成word的文档的说明文件这样的档甚至可以当作PRD文档使用,而说明则会根据label的标签以及编号对应生成table说明文檔。

综上所述运用好了annotations,就可以解决好prd文档中最重要的工作即功能说明。至于设置怎样的注释完全就靠你自己来掌控了。

:页面notes更加简单因为针对页面的说明只能有一段文本,不存在特殊说明字段的编辑

Axure RP Pro5终于发布了,直观操作上最明显的变化之一就是在命令行哆了“share.分享,其次所有窗口可以以浮动形式编辑了为了与时俱进,以后的教程将以Axure RP Pro5为基础来继续写我们来对它添加交互行为。我把茭互分为三个部分的:交互触发、交互条件、交互行为这样的区分,其实是参考程序编程的结构而做的这就把程序构成人性化、语义囮了。这章我着重讲解交互触发与交互行为中的快速链接详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做絀名词解释交互触发:是发生交互的导火索,说明引起交互的触发动作是什么
以此文字链为例,交互的触发原因是点击文字链交互条件:是达成我们目标行为的前提条件如果目标行为只有一个,对触发没有任何条件限制交互条件则可以被忽略。
再以此文字鏈接为例如果对查看文章列表没有任何限制,则不设置交互条件用户点击文字链,直接发生交互行为如果对查看文章列表有权限限淛,只允许作者查看则触发交互行为的条件就是以文章作者hawking的身份登录
PS
有条件本身就必然会有条件的反面。或者有多个条件就会有多个条件之外的例外情况。在写文档的时候必须考虑进去,说明清楚这一点最容易疏漏,而造成程序员在开发的时候想当然或者再回来问你。针对这个例子条件的反面就是登录者不是hawking,或没有登录交互行为:是机器依据触发事件与条件,做出的反应動作或行动

触发主要有两种,一种是页面加载触发一种是axure鼠标悬停行为触发。

暂时仅支持一种页面触发条件就是OnPageLoad当页面载入时。如圖所示针对我们设置的case事件,axure提供了三个功能
Add case
给所选对象增加事件。
Edit case
编辑所选事件(功能前提,选择你索要编辑的事件比如axure鼠标悬停选择case 1)。
Delete case
删除所选事件(功能前提,选择你索要编辑的事件比如axure鼠标悬停选择case 1)。 、axure鼠标悬停行为触发是当用户使用axure鼠标懸停操作接口时引发交互。
Axure
支持的axure鼠标悬停触发行为根据你所选择的对象不同而不同选择图形、文字、链接会出现三种触发行为:
Onclick
當axure鼠标悬停点击目标时,触发交互行为
OnMouseEnter
当axure鼠标悬停移入目标热区时,触发交互行为
OnMouseOut
当axure鼠标悬停从目标热区移出时,触发交互行为如果选择的是输入框、多选框等则会出现对应功能的触发行为:
OnFocus
当axure鼠标悬停选择、聚焦到对象时,触发交互行为
OnLostFocus
当axure鼠标悬停失去對目标对象的选择、聚焦时,触发交互行为特别的,选择下拉列表、列表框会出现:
Onchange
当所选项被更改时触发交互行为。而选择我们所编辑的对象后如果对象之前没有编辑过交互事件,则有两个选项
Add case
给所选对象增加事件
link
快速添加链接。如果曾经编辑过交互事件则有三个功能,和页面加载触发是一样的这里也就不再累述。二、交互行为快速链接选择好交互触发后在对交互没有特定条件设置的前提下,我们可以直接设置此次触发引起的交互行为由于链接跳转是网页中最常用的交互行为,因此axure特意提供了一个快速链接的功能选择对象后,点击快速链接则会弹出如下link

如图所示此面版中有四条可选命令:
1
link to a page in this design链接到这个项目中的某一特定页面。你可以通过axure鼠标悬停点击选择你想要跳转的,树型目录中的相应页面 file
链接到一个外部链接或者文件。你可以通过在hyperlink框中输入链接地址完成链接导向。注意:链接最好是绝对链接地址不然就容易出错。

本章要介绍的是交互条件交互条件是axure的学习中的难点,也是axure高段进阶功能其实我们不设置条件,直接靠文字说明也可以完成我们的思想传达,如果你设计的原型文档能模拟真实的交互环境,当然就非常优秀了

但是,我要强调一点观点传达思想是首要的工作,传达思想也是有成本的如果为了传达思想要耗费更多无意义的劳动,损耗更哆的时间增加更多的沟通难度,不要也罢!我个人觉得我们在做原型设计的时候,有没有必要把页面模拟到和真实情况一模一样这個还值得探讨。

言归正传开始来说设置 交互条件。

一、进入 交互条件设置

当我们选择好了交互触发通过双击选择促发动作,或者点击add case 就会弹出interaction case properties 交互事件属性窗口。

通过这个面板我们要表达我们伟大的交互行为。面板告诉了我们三步策略:

描述描述后的input输入框可以編写事件的名称,或者事件的描述文字以供生成html页面展示时标注此事件,也供生成需求文文件的时候辨识此功能功能

Add condition if necessary)增加条件(洳果需要的话)。这就是这章所要说的重点内容为我们要创建的交互事件,设置前提条件我想,axure在这里添加这么一 句话也许同样是茬提醒我们,我们把交互做到如此之细是否真的必要?思考清楚了目的考虑准确了我们需要投入的精力,再开始做这一步我想会清晰很多。

edit)编辑动作描述你可以通过点击有下划线的文字,编辑动作的具体参数

第二步与第三步,就是我下一章要说的交互行为或鍺叫交互动作也可以。第二步是选择我们要进行的动作第三步则是为我们的动作设置具体的参数。这些我们稍后再看还是先来了解下,我们可以怎么设置条件

二、条件设置的功能与细节

条件设置窗口也分三个部分:

A、满足条件类型选择与条件清理

选择all,则需要满足我們设置的所有条件;假设你设置了条件abc,则你需要同时满足条件abc才能产生最后的交互。
选择any就是需要满足我们设置的任一條件。假设你设置了条件abc,则你需要满足abc中任何一个条件就能产生最后的交互。

另外如果我们对我们设置的众多条件都不滿意,想全部删除重新设置clear all 就是为了满足我们这一需要的按钮。

a)增加条件与删除条件初始默认我们只有一个条件,通过点击条件末尾嘚“-”“+”按钮我们可以删除、添加新的条件。

注意:在设置条件前需要给条件所涉及的widgets对象设置label名称,因为条件设置需要用label定位widgets

条件设置分五个部分但是其实只需要将其看做三个部分。为什么这么说呢这是我的深刻教训,我在写这篇攻略的时候走了一段比較长的弯路最后才发现自己的错误,所以也非常希望朋友们不走我一样的弯路下面且听我道来。

我最开始把条件设置看做5个部分1是莋为条件类型的设置,则2是设置要比较的对象3是比较方式,然后根据你选择的对象后面45会分别出现不 同的可比较条件或设置条件。這样理解是没有错的但是就绕了一个非常大的弯路,而且表述起来要逐条罗列非常繁琐。所以一开始我根据1可能出现的六种类 型,畫了6个大表格企图把所有的情况囊括,做了很多无用功

现在我们尝试把它理解为三个部分,那么怎么理解呢细心的人可能发现了,3昰设置的比较方式可以是等于,也可以是不等于或者是大于小于。而左右两边是被比较的两个对象

对了,这就是关键12设置的是條件的比较方,我们把它看做a45是条件的被比较方,我们把它看做b3就是比较方式。而我们要做的工作就是设置ab的关系

但是设置仳较关系是有原则的,就是数值可以和数值比较区域选择状态可以和区域选择状态比较。我们不可能设置让一个变量等于一个区域被選择的状态。所以根据a的不同b的可选项也会相应的改变,但是他们的内容基本上是一致的

button)。注意:这里会显示页面上的多项选择、單项选择的label名称所以做页面工作的时候,要保持有效命名label的好习惯以下不再累述。

此项目只能与选择状态比较或者value of variable变量值比较,不能与其它类型的对象比较这是最特殊的一项,以下不再做强调

下拉菜单条droplist或者list box列表文本框。这里也是显示你所设置的label名称

如果你设置叻其它变量这里会提供选择

这里会提供文本输入框input、文本框text供你选择

box列表文本框的label名称选择

a比较对象是list时,这里是选择状态当a的比較对象是数值时,这个数值由用户自定义设置

此选项根据条件设置情况只出现在b

以上列出了可操作的对象情况大家可以自行研究一丅,写得有点不太形象有机会我再专门做实例来说明。其实很简单朋友们可以自己做一两个例子,把 所有的wigets拖到页面里并根据各自嘚情况命名label,然后一条条的选择操作一下就清楚了,我这里主要提的是一个理解的方法条件含义的说 明。

以上内容大家可以对照着參考学习。

C、自动生成对条件的文字描述

条件的第三部份基本上不需要我们手动设置在进行第二步条件设置的时候,这里会自动生成描述性的英文即便是可以选择的部分,也会提示链接让我们点击链接,手动选择所以这里的重点意义,在于生成prd文档的时候会生成條件的说明文字。

三、综合谈一谈设置合理的条件

好了,交互条件设置基本上说完了可能会有一些不清楚,因为这里的条件设置会涉忣到部分的程序的内容而且条件设置有点绕,有点晕但是大家没有必要那么着急,一方面因为如果你针对我的文字多对应操作一下僦很容易了解,另一方面因为我现在要说的还是条件设置不重要。

为什么条件设置不重要我要提出我的几点理由:

1、设置过于复杂的條件,做成的展示档可能根本没有用途。程序员可能根本不看即便看也容易遗漏细节,仍然需要你与他沟通

2、你需要花费过多的时間。这无形中提高了你的开发成本对于你的项目是不利的。

3、花哨的展示脱离了产品策划的精髓。
  
我相信我们可以想象到的交互效果,要用现在的axure做出来肯定是不可能完全达到的,这也才是我们创造力的价值体现而那些可以达到的效果,也没有 必要我们费劲心机嘚让它在策划阶段就实现作为交互设计师,更多应该关注功能是否满足用户需求提高用户使用效率;作为产品经理应该更多的关注产品的生命 线、竞争力。

由上所以我一再强调,除非必要真的不用研究得太深,表现得太细致这只是个工具。可能你不太同意那也沒关系,我们可以交流提出你的思想,让我们碰出火花

下图是Axure RP 环境与接口中各区块的简单描述

主菜单/工具列: 在主菜单与工具列中,可以执行常用的动作指令例如:开启与储存档案、输出PrototypeSpec档。

Sitemap 窗格Sitemap窗格将您所设计的网页以树状结构的方式呈现您可以在这里新增、移除、重新命名和组织设计的网页。

Widgets窗格: 包含一系列常用的使用者接口对象例如:按钮、图片、Text Panel与矩形,您可以直接透过拖拉的方式来设计网页

Masters窗格:在这里您可以新增、移除、重新命名和组织设计好的MasterMaster是一种可以容纳多项接口元素的集合样板(Temlate)您可以将常用嘚共享区块设计成Master,未来在设计Wireframe时重复使用Master来提高规划的效率。

Wireframe窗格: 您可以在这个窗格中设计网页信息元素编排内容,设计接口設计交互特性等等。未来可以将这些设计好的页面输出成PrototypeSpec档。

交互设计 (Interaction) 窗格:交互的范围很广从最基本的超级链接、pop-ups,一直到动态顯示和隐藏widget您可以在这个窗格中定义Widget的交互。

物件批注(Annotation) 窗格: 您可以为Widget加上批注来指定功能您可以在这个窗格中增加和自订Widget的批注。

網页说明及交互(Pages Notes & Interactions)窗格:您可以在这个窗格中加入网页层级的说明与交互效果到设计中

企划一个网站或Web AP,在动手开始绘制网站页面的示意圖(Wireframe)或流程图之前您应该事先思考网站架构,并决定信息内容与层级当您心中已经有了明确的网站架构,接下来就可以利用Sitemap窗格来定义您所设计的网站页面

 Sitemap窗格是用来管理设计中网页的工具,您可以在Sitemap 窗格中可以新增、删除和调整网页层级

在网页上按axure鼠标悬停右键,嘫后选择「Rename Page」或慢慢的在网页上连续按axure鼠标悬停左键两下可编辑网页名称

想要删除网页的话,请点选想要删除的网页然后按下Sitemap 工具列仩的【Delete Page】钮,或是在网页上按下axure鼠标悬停右键然后选择「Delete Page」。

您可以将网页从Sitemap 中拖曳到目标母网页中来移动网页位置您也可以使用Sitemap 工具列上的箭头按钮来上下移动网页,或改变网页的阶层

Sitemap中的任一网页上连续按axure鼠标悬停左键两下,网页会在Wireframe 窗格中开启

提醒: 熟悉PowerPoint操莋方式的使用者刚开始可能不太习惯,因为Axure RP的操作方式类似Visio选择图形的作法是利用拖放(Drag &

Wireframe中新增对象之后,您可以拖放Widget来移动的位置拖曳Widget四周的控制点来改变Widget的大小。您也可以一次选取多个对象一次改变所有被选取的对象的位置和大小。

编辑对象(Widget)的样式与属性

编辑Widget的樣式与属性有下列3种方式:a. 连续按axure鼠标悬停左键两下:Widget上连续按axure鼠标悬停左键两下可以让您变更一些基本的Widget属性例如:在Image Widget上连续按axure鼠標悬停左键两下可以让您汇入图片;在DroplistList Box Widget上连续按axure鼠标悬停左键两下可以让您编辑菜单项目。

使用工具列可编辑Widget 的样式例如:外框色彩、填满色彩、字型和字体大小。

Widget上按下axure鼠标悬停右键会出现快捷菜单您可以透过菜单中的选项来设定Widget的特殊属性,这些选项也会因Widget的類型而有所不同

想要帮对象加上批注的话,请先选择Wireframe中的对象如图箭头1所示,被选取的对象呈现绿色框线状态然后在对象批注窗格(Annotations & Interactions Pane)Specification字段(箭头2),输入对这个对象的解释内容您也可以在窗格最上方的「Label」字段(箭头3)输入名称来帮对象命名。

一旦在Widget上加上后Widget 右上方会多┅个黄色小方块,里面有一个脚注号码(Footnote number)您可以在Widget上按下axure鼠标悬停右键,使用Footnotes次菜单来增加或减少这个编号数字

网页说明可以用来收集網页层级的描述或需求。

网页说明会被保留在Wireframe下方的窗格内

Axure RP本身预设的网页说明类别是default,您可以透过新增额外的说明类别轻易的区分絀您自己的说明与要输出到Prototype与规格中的说明。

比如您可以新增Test Case操作说明,SD等不同类别的网页说明而当您要输出规格文件时,可以个别指定哪些种类的网页说明要输出到档如此一来,您就可以输出专属于Test Case, 操作说明或SD文件了

Page Notes」,此时会出现Page Notes 对话框利用这个对话框,您鈳以新增、移除、更名或重新排列说明字段

想要切换说明类别的话,请按一下「Page Notes – Default」右方的向下箭头来选择说明类别。

技巧一. 超快速挪动画面:

当您设计的网页画面变大时为了选取不同位置的对象,您必须经常使用垂直与水平的滚动条这会使得选取对象的动作变慢。请试试这招axure鼠标悬停光标focusWireframe,按住键盘的空格键这么一来就会切换成Hand tool,此时axure鼠标悬停光标会切换成手状您可以用来抓着画面任意滑动,而且不会打乱任何对象的位置轻松愉快。

技巧二. 穿透对象(Widget)选取下层的对象:

以axure鼠标悬停右键慢慢的按一下对象当您放开axure鼠标悬停右键时,可以穿透上层对象选取到位于下层的对象 。

(RIA)的复杂行为而且这些交互表现都可以在Prototype中执行。

当使用者对网页进行某些人机接口的操作时就会对网页触发一个事件(Event)

每一个触发事件都可以有一或多个假设条件(Case)例如,一个按钮的OnClick 触发事件可以有两个假设条件:其中一个导引至某个网页另一个则导引至另一个网页 。

目前Axure RP 5支持的人机接口触发事件及相对应的触发事件(Event)名称如下:

  • axure鼠标悬停的指針进入文字输入状态 - OnFocus
  • 网页载入浏览器时,则有 OnPageLoad触发事件(请参考)

您不需要硬背上述的对象及对应的Event,在Axure RP的操作接口上您只要点选对象,僦可以查看Interaction窗格所显示的对应Event

下列步骤说明如何新增一个基本连结到Button Widget

加入基本连结最快的方法就是按一下Interactions窗格中的「Quick Link」弹出Sitemap窗格的網页清单后,你可以为选定的对象(Widget)指定连结到哪一个网页

如果不是透过Quick Link的话,那么请按照下列步骤(对照下图) 进行交互的设定

Properties」对话窗,您可以在此处选择想要执行的动作

除了基本连结之外,Axure RP还提供了许多的动作型态这些动作都可以在任何触发事件的假设条件中被执荇。

你可以同时指定一种/多种动作型态(Action)之后接着定义实际动作(Action Description),这样子才能完成展现在Prototype上的一个/多个实际动作

开启网页在Popup窗口自动彈出窗口

开启网页在Parent窗口

开启网页在上层内嵌框架中

Widgets变成变成不可用状态

动作之前先等候(毫秒)

以文字说明来描述实际动作

一个触发事件(Event)可以加入多个假设条件(Multiple Cases),以进行不同条件判断的差异化流程或交互表现

举例来说,您可以在一个按钮的OnClick触发事件中加入两个假设条件第一个假设条件 Case 1 命名为 “If Yes”,选择这个假设条件时会开启第一页;第二个假设条件 Case 2 命名为 “If No”选择这个假设条件时会开启第二页。

当按纽在Prototype中被按下时会显示出这两个条件的说明(”If Yes””If No”),此时点选其中一个条件的说明就会执行该条件所关连的动作。

使用条件说奣可以有效沟通条件流程但是,如果需要建立一个高亲合力的Prototype则必需在条件中定义条件逻辑,根据在窗体Widget中输入的值或变量值来执行動作这个主题将会在做深入的说明。

选择 Widget 然后按一下Interactions 窗格中的「Quick Link」并选择目标网页,可以快速地在Widget中加入一个基本连结

技巧二. 连结外部实际网址或网页

你可以让prototypehyperlink动作去连结到外部的实际网址或网页。

技巧三. 重复应用类似的交互设计

如果你要进行一连串类似的交互设萣可以在Interaction窗格上,对着某个Case按axure鼠标悬停右键选择”Copy”的动作然后到你想加上交互设定的另一个Case,以axure鼠标悬停右键选”Paste”动作然后再修改这个新的交互设定。如此一来就可以更快速的完成对象的交互设定。

可以被放置在网页或是其它的Master中只要Master做了修改,其它使用到這个Master的地方也会跟着修改

我们也可以从其它的软件/程序技术经验来认识Axure RPMaster

RP的Master就是同样的概念您只要使用Master,其它页面把Master放进来就可鉯产生共享的特性。

若想要提升企划的速度跟效率让Axure RPWeb/AP规画项目的效益展现出来,那么Master肯定是您必须要学会并熟练运用的功能

新增、組织与设计Master

Master】钮,或在窗格中按axure鼠标悬停右键并选择「Add Master

Masters 窗格利用文件夹(Folder)来组织Master,然后透过工具列、快捷菜单或是拖拉的方式重新排列Master

Master上连续按axure鼠标悬停左键两下可以开启Master来进行设计,您可以像网页一样将Widget拖拉到Wireframe中来设计Master

根据Master的特性 Master 对象会有淡红或灰色的屏蔽,想要移除屏蔽的话可以使用主菜单中的「Wireframe->Mask Masters」功能。

Masters的行为说明如下:

Normal: 可以被移动与放置在 Wireframe上的任何地方对Master的变更会立即反映出来。

Axure RP能够快速提高网站策划的效率除了个人在单一网站项目上应用Master的功能,来大量减低重复编辑的工作之外还可以利用MasterCustom Widget自订对象的功能,来建立网站接口元素的接口库(UI Design Pattern Library)这里有一篇Axure RP应用于网站界面库的实际案例 - ,非常值得学习

技巧一.在建立项目的初期就开始定义Master

项目一開始启动,如果可以稍微掌握哪些接口区块未来将是共享区块那么就开始建立Master,比如网站的Header / Footer / 导览菜单(Navigation)或者广告版位等等。越早使用樾可以节省其它页面设计的重复工作。

至于如何判断什么样的接口区块适合放在Master您可以观察自己会经常把哪些区块Copy/Paste到其它页面去使用,那些经常会被Copy/Paste的区块往往就是网站共享的区块,就适合被设计到Master

Pages..”,就可以一次把想要套用Master的许多页面一次加完。反之可以一ロ气把不要的共享区块,从许多页面中快速移除

Master 中建立常用的图片(例如:icon图标)有助于重复使用这些图片,您就不需要反复的复制贴上或不断的汇入图片文件,而且如果您想要更换掉这个图片的话,也只需要在一个地方变更就好了

Axure RPMaster,可以是整页的母片这是一种型态。Axure RPMaster也可以是Header区块或Footer区块,使用在很多页面一起共享的时候这是第二种型态。Axure

因此我们暂时选择把Master翻译成共享区块,同时吔直接将英文”Master”放在教学文章之中

输出网站/应用程序原型

Axure RP网站原型是由HTMLJavascript组成,可以在IE 6(或以上的版本)MozillaFirefox中浏览换句话说,观看网站原型的人仅需要一般浏览器不需要安装Axure RP。如下图范例所示

警告讯息,想要暂时解除IE中的警告讯息请点选IE浏览器出现的Active X警示讯息,接着选择允许被封锁的内容这样子就可以在IE浏览器上看到自己计算机里头的HTML Prototype了。想要永久解除Active X警告讯息请参考技巧一。

2. 输出网站原型/格式设定

或是按下工具列中的「Prototype」钮系统会开启「Configure HTML Prototype」对话框,并显示预设的原型输出格式设定您可透过这个对话框来设定输出原型的格式。

格式设定中的选项可分成下面几区:

RP的网站原型包含许多档案最好指定一个windows档案系统内的档案夹来存放。

Notes(
网页说明):选择和排序想要显示在网站原型中的网页层级说明

Annotations(
物件批注):选择和排序想要显示在网站原型中的批注字段。

Interactions (
交互):指定交互的行为例如:指定是否需要预设显示条件描述(case),或是只在多个条件存在的情形才显示

Panel转成图片,这是一个旧版本的功能现在很少有需要这样处理。初次输出原型您可以直接使用预设的设定值,除了指定输出的档案夹之外不用费心去调整。或者当您完成网站原型输出格式的设定呮要按一下【Generate】钮就可将这个Prototype输出了。

如果您越来越熟练您可以两个动作就完成网站原型的输出了,第一个动作是按下【F5】接着再按丅【Generate】。

3.展示与操作网站原型

左侧: Sitemap 框架您可以按Sitemap中的网页列表循序展示网站原型中的任何一个网页。如果您不需要显示左侧的Sitemap那么就應该

底部: 网页说明(Page Notes)框架这个框架显示该网页的文字说明,这些文字说明来自于您写在网页批注(Page Notes)的文字
中间: 主框架主框架包含了Wireframe和流程图,Wireframe是可以交互的举例来说,按一下设定有网页连结的按钮那么就会连结到所设定的网页。

您也可以按一下加有附注的Widget旁边的黄色便利貼小Icon图示来检视批注

4. 分享原型档案给其它人

RP或任何播放器就可以直接检视Prototype

发布Prototype的方式有很多种以下是三种不同的分享方式的介绍。

苐一种方式是发布网站原型的HTML PrototypeWeb Server上您只要将网址给客户或工作伙伴其它人,他们在他们的浏览器上浏览Prototype

第二种方式是将包含Prototype档案的档案夹压缩成Zip档,然后将Zip档寄给相关的人收到档案的人,将Zip档解压缩后便可以直接在自己的计算机浏览HTML Prototype通常是开启 index.html或从

第三种方式是產生包含PrototypeCHM档就像zip档一样,这种方式让您可以档案的方式发布Prototype而且不需要安装任何软件来检视。CHMMicrosoft HTML Help档的格式所以大多数的Windows计算机已經安装了浏览器,使用者只要在档案上连续按两下axure鼠标悬停左键就可以检视它

如果您目前已经安装的Microsoft系统中没有HTML Help Workshop的话,就必须安装它才能产生CHM档您可从这里免费下载,一旦完成安装以后所安装的文件夹中将会出现一个hhc.exe的档案,按一下「Locate hhc.exe」来告诉Axure RP这个程序在计算机中的位置

一旦Prototype.chm档产生之后,您将会在存放Prototype的文件夹中找到一个 .chm档您现在就可以将 .chm档发布出去,让接收者在HTML Help检视器中检视

技巧一. 只更新現在开启的页面到网站原型:

当您设计网站原型的技巧越纯熟,网站项目会越来越大导致输出网站原型的时间会随着项目而变大。万一您只是调整其中的某一页却得等待整个网站重新全部输出,那就太浪费时间了

当您选择这个动作,或者直接按下热键CTRL+F5Axure RP不会产生任何對话窗口,您只会感觉到axure鼠标悬停指针闪了一下此时,再回到网站原型(HTML Prototype)上去reload这一页或click这一页网页名称,就会看到已经更新的页面了

技巧二. 关闭IE中的Active X 警告讯息:使用IE浏览器在自己的计算机上开启存放于档案夹中的HTML Prototype时,浏览器中可能会出现Active X 警告讯息想要解除IE中的警告讯息,请点选「工具」菜单中的「因特网选项」切换到「进阶」标签页中,找到「安全性」的设定中勾选第二项「允许主动式内容在我嘚计算机上的档案中执行*」选项即可

Widget上连续axure鼠标悬停左键两下就可以让您指定想要加载到框架的网页,如果您要建立一个包含Flash对象的HTML 文件您可以将档案嵌入到Inline Frame中,这样他就可以在Prototype中呈现了

技巧四. 快速绘制网站架构图:

RP会自动帮您汇整文字数据以及画面,并且按照网页顺序整理在Word档案里头(如下图)

您可以下载下列网站策划书范例,很快就可以了解Axure RP输出的规格书大概是长成什么型态:

2. 输出规格文件/格式设定

Specification」對话框并显示预设的规格文件输出格式,您可透过这个对话框来设定其它格式

如同输出网站原型(HTML Prototype)一样,需求书或规格书也可依不同的鼡途进行设定比如设定一种格式专门给客户确认需求及规格,设定另一种格式专门产生测试计划与测试步骤再另外设定一种格式用来介绍操作步骤。

(Word档样板)相关套用Word档样板可以客制化您输出的规格文件,让文件的呈现更专业您也可以事先设定好前言以及附录档,比洳封面附录或签名页。您可以修改Word模板来配置规格中的文字样式变更文件的排版或加入页首或页尾。一但您设定好规格文件格式请按一下【Generate】钮来产生这份规格。

技巧一. 只要把必要的项目输出到规格文件中

规格文件输出时如果选择输出的项目太细很有可能会产出一份好几百页的Word档案,而难以阅读因此,输出之前最好透过格式的设定将不需要的项目取消勾选,保留有意义的部份

技巧二. 预设规格攵件标题改成中文

Section Header名称”User Interface” 改成 网页画面。如此一来输出成规格文件时会更方便阅读这些段落标题。

axure鼠标悬停移入移出及图像变换嘚互动设计

在先前一章中介绍多种Axure RP支持的人机接口互动效果。这里我们要介绍其中两个常见的触发事件(Event)

最常见的运用方式则是合并Dynamic Panel來控制比较复杂的功能时,例如:浮动菜单、滑过特效和自订tooltips

以左图的互动效果来当例子:当axure鼠标悬停移到图片上方时,会自动弹出說明文字框(Dynamic Panel)当axure鼠标悬停移出图片时,说明文字框就会消失这个互动设计就可透过OnMouseEnterOnMouseOut触发事件结合Dynamic Panel的控制来达成,设计方式如下图所示 

想要建立变换图片的话,请在Image Widget上按右键选择「Edit Image->Import Rollover Image」,然后选择一个图片当作变换图片一旦图片选定后,您可以在Wireframe中利用axure鼠标悬停滑过图片上的黑白色方块来预览变换图片。

此时会开启「Set Rollover Style」对话框您可以在这里选择变换样式,勾选「Preview」复选框来预览设定在Button Shape的变换样式 

套用了变换样式之后,您可以选择 Preview提早预览效果也可以在Wireframe中,利用axure鼠标悬停滑过Widget左上角的黑白色方块来预览变换状态

将你所需偠的菜单对象从Widgets窗格中拖曳到Wireframe就可轻松建立新的菜单会先设置3个菜单选项(Menu Item)

下图展示的动画则是已经完成设定的多层菜单

编辑菜单和菜单项目的文字与格式的方法就像编辑其它Widget一样,您可以在菜单项目上连续按axure鼠标悬停左键两下编辑文字也可以利用工具列来编辑菜单囷菜单项目的色彩、字型和其它样式。

菜单对象的编辑功能有这些项目:

Menu Widget的选项上按axure鼠标悬停右键会出现如下图功能菜单:

增加或移除菜单项及子菜单

想要增加或移除菜单项目的话,请在菜单项目上按axure鼠标悬停右键选择「Add Menu Item」和「Delete Menu Item」指令。

想要在菜单项目下加入子菜单嘚话请在菜单项目上按axure鼠标悬停右键,选择「Add Submenu」在Axure RP的画布区域,通常Submenu会自动缩回要去点一下上层菜单,才能再看到前新增的Submenu如下動画: 

若是想要编辑菜单项目之间的间距(Padding),请在菜单或菜单项目上按axure鼠标悬停右键选择「Edit Menu Padding」。

想要编辑菜单的变换样式请在菜单或菜单项目上按axure鼠标悬停右键,选择「Edit Rollover Style」此时会开启「Set Rollover Style」对话框,您可以在这里选择单一菜单项目、菜单上的所有菜单项目或是菜单和孓菜单上的所有菜单项目的变换样式。

勾选「Preview」复选框来预览套用在菜单上的变换样式

套用了变换样式之后,您可以在Wireframe中利用axure鼠标悬停滑过菜单项目左上角的黑白色方块来预览变换样式。

当子菜单(Submenu)建立了以后会自动套用母菜单(Root Menu)的样式,您可以在建立子菜单之前先将母菜单样式设好以节省时间。

另为e文好的朋友附上自学Axure RP的几个途径:
1
打开软件,按F1调取帮助文档对照文档学习。
2
登录 查看flash视频学習
3
登录 Axure 博客 ,了解软件最新信息
4
登录讨论组,参与讨论

}
axure问题可以做点击a显示b,再次点击a隱藏b的功能交互吗?做出的效果不需要选择casea和b的那种... axure问题
可以做点击a显示b,再次点击a隐藏b的功能交互吗?
做出的效果不需要选择case a和b的那种

伱对这个回答的评价是

可以的,你需要b的显示或隐藏为自动切换

你对这个回答的评价是

}

我要回帖

更多关于 axure鼠标悬停 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信