于 Axure原型工具,很少有产品经过系统学习,一般都是直接上手,边摸索边学习,这直接导致很多快捷操作被忽视。笔者在日常工作中总结出以下小技巧,希望对各位有帮助。
如果系统崩溃后,再次进入时,系统一般会提示恢复最近备份的文件。也可以通过文件→从“备份中恢复”找回最新的版本。
快捷键不需要刻意去记忆,经常使用就熟记于心
(1)重复的元件可以转化成母版
对于多次重复使用的元件,每次修改一个地方,其它也挨个修改,这个时候我们可以使用“母版”。
使用到母版元件一样的元件时,直接在母版区拖进画布使用。
双击母版元件,就会进入到母版编辑窗口,修改后的元件会同步到所有母版元件。
注意:
(2)避免使用多余的控件
一个元件可以实现的效果,不要使用多个元件。
举个例子:两个看起来相同的“确认”按钮,实际上下图①只有一个矩形元件,而②是由文本框+矩形组成。虽然只多余的一个元件,但是之后只要需要对该元件做修改,就一定会出现多余的操作,非常影响效率。
(3)整合多个元件——组合,方便移动与调整尺寸
(4)隐藏的元件,设置交互显示时,最好选中:置于顶层,避免被遮挡
(5)善用锁定——不常移动的元件进行锁定
锁定不常移动的元件,比如背景页,表头。好处:避免误移。
注意:锁定后的元件,不能进行选中要注意哦!
(6)选项组命名——实现单选效果
将多个可选中的元件设置成选项组后,每次只能选中一个元件,其它元件自动取消选中。
注意:
(7)元件提示——鼠标悬浮时会显示提示内容
步骤如下:
(8)文本框大法——共11种类型
拖拽文本框元件后,右侧面板里可选择不同的文本框类型,选择不同的类型可以达到不同的效果。
如:密码格式:输入的内容会被隐藏
数字格式:只能输入数字
文件格式:可以选择文件
日期格式:可以直接选择日期
另外,文本框里的预置文字,可以直接在右侧“提示文字”框输入。
(9)一个元件上添加多个事件
同一个元件会出现多种 case,如点击登录按钮后出现的多种情况。虽然可以通过添加条件判断来做区分,但是一般比较费时。不那么严格的情况下,我们可以将多个事件添加同一个元件上,对事件进行命名来区分。
操作如下:
(10)动态面板——固定到浏览器的某个位置
比如:将弹窗在屏幕中间显示、导航固定在顶部。都可以通过固定到浏览器实现。
步骤如下:
(11)辅助线——快速对齐元件
辅助线分为两种:页面辅助线和全局辅助线。页面辅助线只会在当前页面出现,全局辅助线在每个页面都会出现。
注意:辅助线过多时:布局→栅格和辅助线→取消显示辅助线(或者删除辅助线)。
(12)预览原型时,点击站点导航处的小箭头,可以看到所有带交互的元件
(13)合并多个 axure 文件
步骤:点击文件→从RP文件导入→选择文件→导入。
(14)拖动页面名称
鼠标选择左侧画板里的页面名称,直接拖入画布里,会出现页面名称的按钮框,可以用来做流程图,点击页面名称按钮框,会直接跳转到对应页面。
(15)快速实现页面流程图——页面快照
拖动页面快照到画布里,选择对应的页面,会出现页面预览,点击可进入对应页面。
(16)实现点击时显示,再次点击时隐藏,用切换(Toggle)即可实现
(17)实现鼠标滚动查看的效果
通过动态面板实现:鼠标右键→滚动条→自动显示滚动条
(18)及时命名、规范命名
对要进行交互事件的元件和动态面板要及时命名,在之后的修改里会降低很大成本。另外命名也要规范化,避免出现重复、遗漏、忘记等情况。页面元件过多时,找到元件就是一件很费时的事。自己可以整理出自己的命名法则。
(19)元件过多时选中的方法
1)透过上层元件选择下层元件:多个元件重叠时,想选中下层元件,元件管理窗口直接找到,元件过多的时候可以通过搜索,这是命名的重要性就出现了。
2)选中上层元件,等1秒左右,在点击一次,就会选中下一层元件
3) 使用“查找”功能:Ctrl+F,通过搜索元件里的文字来找到
(20)按住 Ctrl,将鼠标放在元件的边缘,移动鼠标,就可以旋转部件
(21)鼠标放在元件边缘,按住 shift+鼠标左键,可以锁定长宽比来放大缩小元件
(22)建立回收站文件夹
用来存放淘汰的页面。但是生成 html 文件时,不要选择生成回收站内容。
(23)记录修改内容
新建一个空白页面,记录 rp 文件的改动,如改动时间,版本、修改内容、修改人等。
(24)找Icon必备网站:https://www.iconfont.cn/
搜索自己需要的Icon类型,点击复制SVG,粘贴进Axure面板里,点击鼠标右键,选择“转化成矢量图”,就可以对Icon进行颜色的填充与修改了。
(25)灵感来源>>花瓣:https://huaban.com/
(26)原型尺寸大小(不唯一)
web 原型大小:1440×900/1200×900,app 原型尺寸:375×667
(27)建立自己的元件库
前辈们已经整理了很多,我们可以直接使用外部元件,然后根据需要建立自己的元件库。关注公众号xsxh__hahaha,后台发送“元件”即可获得多个元件库。
产品设计原型的目的是为了更好的传达自己的想法。当自己的原型能够满足要求时,就不需要过度关注原型细致度。
本文由 @王帅帅 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
交互是Axure的显著特征
有了Axure这一神器,产品、设计、运营等非开发岗位的同学,不用写一行代码,只需要通过几步简单的配置,就能够实现前端工程师们平日里通过大量代码实现的交互功能。Axure生成的Html文件之所以能够被称作为原型,而不仅仅是一个线框图或者是草图,就是因为其强大的交互基因,决定了它不是一款普通意义的界面设计工具。
交互是Axure中重要的构建模块,用来将静态的线框图转换为可交互的动态HTML文件。在Axure中,通过一个简洁的、带有指导提示的界面指令和逻辑指引就可以创建完整的交互,生成HTML原型时,Axure都会将这些交互转换为浏览器可识别的编码(JavaScript、HTML、CSS)。但是我们需要清楚的是,这些编码并不是产品级别的,不能作为真正的产品使用。它只是实现了前端的视觉交互,但背后需要的后台数据及相关服务,是无法提供给Axure使用的,这也是Axure最大的局限。
交互的定义
什么是交互?简单通俗的讲,就是谁在什么时候做了什么样的事情。这个主体谁其实就是对应原型的元件和页面;什么时候,狭义的理解是时间,在这里我们可以延伸理解为时机,对应原型中的事件;做了什么样的事情,这是一个动态变化的过程,在原型中对应着动作。根据交互的定义,我们可以看出交互是由元件、事件、动作这3个最基本的元素构成。
Axure的事件可以分为自动触发的事件和手动触发的事件。
页面交互
以页面载入时事件为例,向大家简单讲解页面事件的交互。
页面交互说明
Axure 9.0页面交互事件
元件交互
鼠标单击跳转就是最基本的元件交互事件,可以用于鼠标点击时,也可以用于移动设备上的手指点击时。我们以简书的主导航(发现/关注/消息)跳转为例,说明元件的交互过程。
元件交互说明
Axure 9.0元件交互事件
Axure 9.0元件交互样式
用例是用户与应用网站或应用程序之间操作流程的抽象表达,每个用例可以封装成一个独立的路径。每个事件下可以有多个用例,当有多个用例存在时,需要为用例设置一些逻辑条件,执行不同的动作。下面我们以登录为例,讲解说明什么是用例。
通过这个交互案例,我们可以看出不同的条件下(账号错误或密码错误),点击“登录”按钮时,提示信息是不一样的。为了满足这两个不同的条件,我们就需要为“登录”按钮添加两个不同的用例。
用例说明
添加用例
在设计区域选中元件,在右侧交互面板中点击新建交互,我们会看到该元件可用的事件列表,点击其中的一个事件,点击右侧的用例图标或者直接选择想要添加的动作。
编辑用例
1. 用例说明:点击事件名称右侧的用例图标,在事件名称下方可以编辑用例的名称,并添加用例的逻辑条件。事件的第一个用例,默认没有名称,需要我们手动添加名称。
2. 插入动作:鼠标点击动作名称,开始添加动作,支持添加多个动作。当我们准备插入第二个动作时,点击用例下方的圆形十字架,开始插入更多动作。
3. 配置动作:动作选择完毕后,我们还需要为动作进行一些规则或属性的配置。比如,我们添加的动作是打开链接,在动作配置中,需要添加链接页面并选择页面打开的方式(当前窗口、新窗口/新标签、弹出窗口和父级窗口),最后点击完成,动作配置完毕,整个用例添加完毕。
编辑用例
动作是交互事件中最重要的部分,交互效果的外在表象是通过动作反应出来的。因此,了解每个动作的用法与含义,对学习交互来说是十分必要的。下面我们来看一下,Axure 9.0为我们提供了哪些动作,以及这些动作的含义是什么。
链接动作
元件动作
中继器动作
其他动作
文将介绍如何制作Axure高保真数据可视化原型,供大家参考和学习。
高保真数据可视化原型设计,称得上是Axure高阶水平。
数据可视化在原型设计中是一个重要的分支,但是对于Axure使用者具有一定要求。清晰的数据可视化原型可以减少与需求方和研发工程师等的沟通成本,且可具象。
Axure本身具有高级交互的能力,结合数据可视化的方式,以低成本的方式,达到预期的演示的效果,本文介绍如何制作Axure高保真数据可视化原型。
在Axure操作界面中,拖入一个Inline Frame(中文:内联框架)。
Axure本身可生成HTML页面,本质上而言,只要带有实例图的为HTML文件,并可正常访问即可。至于HTML是以何种方式制作生成,不做限制。
点击进入图后,所示页面如下图。左侧为折线图效果对应的代码,右侧是折线图的效果。可以在左侧修改代码,运行后可在右侧查看修改后的效果(此处不做赘述)。
点击页面右下角的“Download”按钮,下载折线图的HTML页面。
使用任意一种代码编辑器(笔者喜欢用komodo),打开html页面,修改html页面代码中自带的api。如果发现运行后html报错api过期时,需要自行创建api,将其进行替换。
创建一个新的文件夹(本文命名其为:axure and excharts),文件夹的位置没有要求。将下载的HTML页面,放置在文件夹中。
双击拖入Axure操作界面的内联框架(Inline Frame),选择“link to an external url or file”(选择一个外部的urd或文件),输入HTML页面所在的位置及名称(如本文:D:\Desktop\axure and echarts\line-simple.html),如下图所示:
点击生成html页面按钮:
将生成html文件的目录,更改为上文创建的文件夹。如下图:
点击确认后,“axure and echarts”文件夹中会存在axure生成的html页面和html页面。同时,会自动打开一个html页面,可查看效果,如下图:
这样,我们就通过一个简单的例子,在Axure中实现了数据可视化效果。
笔者在本文中分享的是实现的方法,但是实际应用过程中,通过一款数据可视化产品的视角去实操,会让你有意想不到的效果,特别是在Axure颜色、布局、交互等能力的加持下。
作者:鱼日,公众号:issnail
本文由 @鱼日 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
*请认真填写需求信息,我们会在24小时内与您取得联系。