Axure怎么制作一个饼图?

老师 0 91

Axure怎么制作一个饼图?,第1张

Axure怎么制作一个饼图?
导读:饼图、柱状图、条形图等都是在Axure原型设计里面常见到的,很多新手小伙伴可能对于其制作都不大了解!因此,接下来将为大家详细讲解Axure制作一个饼图教程~学Axure,先学基础再学交互最后就是动手实操!在,就可以获取到专业全面的Axure

饼图、柱状图、条形图等都是在Axure原型设计里面常见到的,很多新手小伙伴可能对于其制作都不大了解!因此,接下来将为大家详细讲解Axure制作一个饼图教程~学Axure,先学基础再学交互最后就是动手实操!在,就可以获取到专业全面的Axure自学视频课展开综合学习~专业讲师教学,知识点满满,学会可自主实操设计原型~

Axure制作一个饼图教程:

1材料准备准备n个半圆形填上不同的颜色,放置同一位置如下图所示。2表格制作如下图所示,根据需求做好表格,最大的值一定要发在一个个格子。3设置表格总数表格总数=各值加总4旋转旋转分两种情况:1最大值占总值少于等于50%以鸡尾酒为例,那么第一个图形旋转的角度就是500/总数360,第二个图形旋转的角度为400/总数360+第一个半圆旋转的角度,以此类推。2)最大值占总值大于50%这时,我们要复制一个和第一个半圆一模一样的半圆,影藏掉,当最大值占总值大于50%时,显示出来。然后在旋转第一个半圆。以鸡尾酒为例,那么第一个图形旋转的角度就是500/总数360-180,第二个图形旋转的角度为400/总数360+第一个半圆旋转的角度,以此类推。5标签制作做一个标签,默认隐藏。思路:鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Itemno的值=文本标签2,Itemx的值=文本标签1,以此类推。鼠标移出的时候,隐藏标签即可。最后,制作完成以上就是关于“Axure怎么制作一个饼图?”的全部内容分享了,怎么样?你学到了吗?Axure学习讲究方法与技巧,如果你觉得你的理解学习能力强,不妨继续浏览更多Axure相关文章~当然,如果你需要更加系统精准地学习Axure,那么我建议你选择我们的Axure自学视频课哦~最后点赞、留言+收藏,下次学习更方便哦~

Axure教程|简单但看起来厉害的微信原型能不能画个原型?一个简单的问题就能让很多白人望而却步。Axure这个原型绘制工具,确实有一定的门槛。虽然学起来不难,但是要做好需要很大的努力。今天,作者用最简单的方法,从一个白人的角度,做了一个看似OK的微信互动。简化话题关键词,“小白”“好看”。其实制作工艺也不是很先进,不然也就没啥了。另外,你要想看起来很棒,一方面表现出来不会被鄙视,另一方面自己做出来也会有动力。毕竟眼前的动力有利于学习。试想:如果学习一两个小时就能做出一个很好的原型交互,对你来说哪个更有吸引力?1成就展示。Gif如下:首先,最后的结果会放出来供你参考。请把你的经历捅给我。介绍原型的交互部分,因为是小白内容,所以制作相对简单,复杂的交互自然不存在。1向右滑动鼠标解锁;2点击微信打开;3六个一级门户可以相互切换,分别是微信、通讯录、发现、我、添加、搜索;4对话页面的微信公众平台可以打开;5微信公众平台和搜索中的回车键都可以。除了上面提到的,其他功能都不能用,所以标题看起来很强大,其实是白色的。第二,制造步骤。1截图获取素材。截图是很重要的一步,画图很慢,需要很多技巧,所以只展示,截图最划算。通过截图,可以得到制作简单演示原型所需的全部内容。2制作锁屏效果。锁屏效果是通过动态面板实现的,即以向右拖动动态面板为触发条件,使锁屏页面逐渐隐藏,微信打开页面显示。在这里,为了让转换更自然一点,动画特效使用渐变。3打开微信。在微信图标上做一个热键,然后将热键设置为点击触发。下图显示了触发行为:也就是打开微信开启页面,等待1500毫秒,然后切换到微信开启页面,将微信开启页面上的热键全部放在顶层。其中1500毫秒是模拟加载的过程。没有这个设置,切换只是一闪而过。所有热键都放在顶层,以便使用所有热键。因为锁定屏幕页面上的热键不能被单击,所以默认情况下它们被放置在底层。而这一步之后,你就需要用到这些热键了,就提上面。热键分布如上图:所有可以按下的地方都分布有热键。同时,上一步已经将所有热键设置在顶部,所以可以点击所有的键位。4在页面之间切换。接下来的操作就是重复工作。简单来说就是给热键添加相应的功能。以通讯录为例:写触发效果如上图,剩下的也用同样的方法写。热键那么多,写的过程也差不多。通讯录的设置就是将通讯录设置到最上面从而完成切换,然后设置所有用于准备后续使用的热键。5调整所有组件的排列水平。这一步也很重要,因为错误的层次关系可能导致密钥不可用,或者密钥可能在所有页面上都可用。一个简单的判断原则是:想象每一步页面是什么,这个页面下有哪些键,哪些键不存在。比如在锁屏页面,微信的打开是一个无法实现的功能,所以这一步只涉及到打开锁屏的交互,其他功能要脱离顶层,避免逻辑错误。总结一下。所有生产流程如上图,一般不复杂。虽然操作步骤很多,但实际技术内容是小白。使用的主要功能有:点击触发条件:点击可实现后续步骤;滑动触发条件:后续步骤可以通过滑动实现;动态面板:可安装各种组件的滑动面板;可点击热区:可以设置触发条件的不可见组件。

实例原型的定义主要指两个方面,一是单个功能点或功能页面,如鼠标点击输入框即可修改功能点、注册登录功能页面等。二是独立交互效应,可以单独部署,如幻灯片效应、微博效应等。那么,我们新手学Axure制作原型图的时候,一般都需要经过哪些步骤呢?下面就来详细为大家介绍~如果此时你心里众多疑惑:Axure去哪学?怎么学?学多久?那不妨学习体验的Axure自学视频课!资深讲师授课,从基础的Axure软件功能到原型绘制到交互案例,综合全面的带你入门Axure产品原型设计!~

Axure制作原型图基本流程步骤:

1、搞清楚实现原理

每个实例原型都是一个单独的功能或交互效果,因此都会有用AxureRP去实现的原理。其实原理就是要让你自己明白这个东西到底是怎么做出来的,要怎么去做。如果这个都不明白的话,后面就无从下手了。因此做实例原型之前,AxureRP的基础很重要,必须对AxureRP已经有了一定的熟悉和了解,否则对着一个实现要求,没有任何想法,脑子一片空白,这样肯定是做不出东西来的。这个需要一个过程来培养,多看看别人设计的原型,弄清楚人家是怎么做,然后尝试着自己做一遍,最后想想有没有可以改进的地方。实际动手多了,自然而然的就会有感觉了,等到你看到一些简单的功能要求,只要看一下需求,就知道怎么用AxureRP去画原型的时候,基本上就差不多了,当然对于一些复杂的功能,还是要好好理清思路的。说了这么多,就是要说明,在做实例原型之前,一定要想清楚怎么去做,然后才开始动工。我在写一些实例原型设计的AxureRP教程的时候,一般都会在开头时候先介绍一下实现原理,这个对整理自己做设计的思路是很有帮助的,熟能生巧,开始的时候总归是有难度的,想得多了,自然就顺畅了。

2、搭建设计结构

知道了实现原理之后,就知道在整个实例原型设计过程中都需要用到哪些组件,什么组件用来做什么样的功能,都会心里有谱,这个时候就可以搭建设计结构了。这个过程包括:添加组件元素,设置组件排版布局,设置组件属性(命名、大小、方位、颜色、文本等)。这些是为后面的具体设计打基础的,一个功能实例设计出来,布局长相上至少不能太难看,要相对来说看的过去,呵呵,就全都在这个环节去完成了。相对来说这个环节不是很重要,这个布局在后续的详细设计过程当中有可能是需要修改的,但是基本框架式必须要搭的,因此单独抽出来作为一个步骤。

3、进行详细的交互设计

基础工作都做完了之后,就可以开始做交互设计了。这里的设计包括组件的自身可变效果,如鼠标移入、移出、悬停等,交互的事件,如鼠标单击事件等,逻辑的设定,包括判断逻辑,跳转逻辑,反馈逻辑等。这部分是很重要的,实例原型能否做出来,就看这一步的设计了。这些交互效果的设计也取决于个人的AxureRP技能,一级一部分的逻辑思维能力,特别是做比较复杂的交互效果,思路一定要清晰,否则判断的条件一多,就很容易乱掉。这里特别要说明的一点是,慎用变量,不得不用变量的时候,也最好要取一个非常简单易懂的命名,给变量赋值也尽量简单,因为变量会让你的交互设计变得更加复杂。注意,这里只是让大家慎用,不是不推荐大家用,变量还是一个很好很强大的功能,用的好,就能变幻出更多的交互效果。

4、反复的调试

很多交互效果都不是一次性设置之后就能成功的,特别是复杂的交互效果,都需要做多次的效果尝试,反复的进行修改调整,最后才达到最终的效果。这个过程一定要有耐心,慢工出细活,思路是对的,想法也有可行性,那就一定能把效果做出来,哪怕最终真的没有将效果做出来,也可以反过来思考,是自己对AxureRP的特性不了解造成的,还是自己的知识水平局限性。整个调试的过程能让你学到很多东西,所以说要多动手,动手就是为了去学这些个过程。这里说明一点,有些需要重复设置或者类似设置的地方,先调试一个点,这个点调试通过了,你就很清楚了,剩下的点设计起来就很快了,如之前我设计的模拟淘宝评价效果就是这样的,每个星星的设置其实原理是一样的,一个星星调试通过了,五个星星就好做多了,进而四组星星就水到渠成了。

以上即是关于“Axure制作原型图基本流程步骤有哪些?”的全部精彩内容分享了,希望能够帮助到你!基本上,经过四个步骤的设计和打磨,一个原型就可以成型了。但你是否完成并不重要,重要的是你从这个过程中学到了什么。建议在学习的过程中,先模仿再自己设计,多看多学多做!学习更多Axure原型技巧,不妨阅读更多Axure相关文章学习?

对Axure RP 9 的基础功能进行一定程度的介绍,一来方便新手迅速了解Axure,二来比对新版Axure与Axure 8的区别,更快了解新版本Axure

界面介绍

剪切,复制, 粘贴很好理解,使用方式和win电脑的快捷键相同,Ctrl X为剪切,Ctrl C为复制,Ctrl V为粘贴,在Axure中,可以选中一段交互进行复制粘贴,值得注意的是,很多朋友找不到Axure RP 9的格式刷,不同于Axure 8 的格式刷,我也是找了好久,后来发现选择某个元件,按下复制按钮或快捷键,然后选中另一个元件按下Ctrl Alt V即可将前一个元件的格式及公共交互部分复制并粘贴到后一个元件上,这就是Axure RP 9的神秘格式刷。

分区1:选择模式

使用过Computer Aided Design(即CAD)软件的同学应该很容易理解这个功能,当界面上画了很多很多方框的时候,很难精确批量的选择我们想要选中的元件,这时候切换不同的选中模式就可以快速的选择我们想要的元件。第一个,一个小虚线框里边装着三个小框的模式是指当我们的鼠标范围选中元件的任意面积,即可选中当前元件;第二个一个小虚线框中间放着一个小方框的模式是指当我们鼠标选取完全覆盖当前元件的所有面积的时候,才能选中元件。图标的样子还是很好理解哒。后边那个一个框连着一个框的是指连接线,Axure可以用于画流程图,画流程图,连接线就必不可少啦。

分区2:插入形状

插入按钮点击后可以选择如图的几个工具,这几个工具从他的名称上就可以轻易的判别工具的用途,这里值得注意的是,在选择矩形、椭圆或直线工具的时候,在绘制的同时按住Shift键,可以绘制正方形、圆形、水平线或垂直线。在Axure RP 9 中,设置了快捷键,如在英文模式下点击P键,会直接选取到钢笔工具(Pen)。插入里面的功能不是很常用,就不过多的做解释。

分区3:点(编辑控点)

这个工具看着有点儿抽象,其实很简单,选中元件,选择点,元件四周会出现菱形的小方块儿,拖动方块就可以任意改变元件的形状,右键元件,选择编辑控点也可以达到同样的效果。

分区4:置顶和置底

置顶和置底很好理解,就是将选中的元件置于最下层或最上层,这里只需要提醒大家快捷键即可,Ctrl Shift ] 是置顶,Ctrl ] 是上移一层;Ctrl Shift [ 是置底,Ctrl [ 是下移一层。

分区5:组合和取消组合

组合和取消组合是方便管理大量元件或页面的方式,PS、PR、AE、PPT等等的软件中都有用到,选中多个元件点击组合就可以将元件打组,windows系统之,大部分软件打组的快捷键是Ctrl G,取消组合是Ctrl Shift G。

分区6:调整大小

这个操作比较鸡肋,正常情况下按住Ctrl键,滑动鼠标滚轮就可以实现放大和缩小屏幕,不同的是该按钮下边有Fit All和Fit Selection,分别代表屏幕大小调整为适合全部元件和适合所选元件,效果大家自行体会即可。

分区7:对齐 

对齐操作在很多的软件中都有,对于像我这样的强迫症患者或者追求更完美效果的人来说简直是福利。Axure里提供了8种对齐方式,分别是左对齐、居中对齐、右对齐、顶部对齐、居中、底部对齐、横向均与分布、垂直均匀分布。这里需要注意的是,每一种对齐方式都是用相同的规则,选中多个元件,以选中的第一个元件为参考元件,将后边选中的元件与首个选中的元件对齐。大家自行体会。

分区8:预览和共享

预览就是预览原型,分享中包含很多选项,很多设置,本期不做详解,大家知道简单的预览和发布到HTML就可以了。

分区9:元件样式

选择不同的样式有不同的效果,比如标题、文本等,不做详细介绍,在使用的过程中可以很明显的体验到不同。

分区10:文本设置

分区11:元件样式 文本设置是绝大部分软件必备的功能,调整字体、大小、对齐方式等。

元件样式包括填充颜色、边框颜色、边框大小、边框线性及元件坐标。

分区12:左侧面板

左侧面板中默认的有页面、大纲、库和母版。页面就像PPT的张数一样,有几张幻灯片、有几个页面,很好理解。大纲是用来显示当前页面内有多少的元件,元件的名称及归属的,Axure8中,大纲默认在页面的右下角,属于右侧面板的部分。库是指元件库,里面包含我们使用的矩形框、文本框、下拉列表、多行文本、中继器、动态面板等,只要拖动元件到页面内,就算是将元件添加进入了我们的工作面板。同时,我们还可以添加元件到我们的库内。Axure自带的元件库可以满足大多时候的需求。

母版可以理解为模板,当我们多个页面需要复用一个元件组件的时候,可以选中这个元件或元件组,右键添加为母版,这样,在以后需要复用的时候,将母版内的项拖动到页面内就可以把元件带到新的页面内。

分区13:右侧面板

右侧面板包括交互、样式和注释。注释就是注释喽,我们在绘制原型的时候把我们的文案写在注释内,方便程序员或UI查看相关信息。样式就是用来设置元件的,包括元件的名称、大小、坐标、边框、颜色、阴影、圆角及边距等等的信息,非常强大。交互是Axure中最核心的地方之一,在这里,我们为元件或页面添加交互,交互部分本篇不做详细描述,未来基础教程篇会深入讲解,期待吧。

Axure RP 8中想要设计按钮图形是很方便的,因为有按钮元件,可以直接使用,然后添加一些效果,下面我们就来看看详细的教程。

1、双击打开Axure RP设计软件工具,在基本元件中拖曳一个按钮到空白页,修改默认的文字内容,如下图所示:

2、将按钮的宽度和高度分别调成20060,调整坐标位置,如下图所示:

3、选中按钮元件,设置填充的颜色为蓝色,并保存原型图,如下图所示:

4、调整按钮上显示内容字体大小,将按钮角度半径调成10,如下图所示:

5、设置按钮的阴影模糊角色、颜色和范围,不透明度调成80%,如下图所示:

6、选中按钮元件,去掉按钮元件的边框;再次保存之后,预览该页面模型,如下图所示:

图标是我们在制作产品原型时经常使用的一种素材,在日常的原型制作过程中,图标通常以插入的形式添加到Axure中。很多新手小伙伴可能就不大明白Axure怎么插入图标,因此接下来将分享4种插入图标的方法!学会Axure,人人都是产品经理!这句话,想必对于准备自学Axure或者正在自学Axure的小伙伴们来说并不陌生!而想要完全掌握Axure成为产品经理,可能也并非容易,入门简单,但是交互原理可并不简单!因此提供了系列的Axure自学视频课,可以全面的学习Axure软件基础以及交互原型案例实操~

Axure插入图标的4种办法:

方法一:直接使用内置Icons

这种办法是最简单也是最快速的,直接从内置的元件中拖拽出来,可以调整大小和颜色,而且清晰度等也很不错。

但是缺点也很明显,那就是内置的Icons内容太少了,很多图标是上古时期的,压根就和现在的主流图标风格不搭。所以就连一个普通的关闭按钮,都搭配不上,更不用谈一些很有语义性的图标了。

方法二:粘贴大法

这种办法是最快速也是最简单的,例如刚刚我要画一个Element-UI的关闭按钮,但是我从Axure内置原件库找不到,也不想花太多时间去找,那么我直接从网页上截图一个白底的就好了,然后粘贴覆盖在相应的位置即可。

截图的优点是快速,简单。缺点是调整大小的时候不是那么精准,同时截图之后是不能改颜色和粗细的。

这意味着如果我要一个蓝底白字的图标,那就得再去网页上找,或者自己F12调试相应的样式,然后再截图下来。一套操作下来,还是有点麻烦。

方法三:Fontawesome大法

Fontawesome是一套绝佳的图标字体库和CSS框架,下图是官网的一些介绍。对于不太懂技术的朋友,可以把它理解成是一套集成式的字体库图标,意味着每一个图标其实是拥有字体一样的属性,例如字体大小,粗细,颜色等。

有很多Axure的培训都会推荐使用Fontawesome的方式在Axure中插入图标,例如Axure培训大佬「小楼一夜听春雨」就写过类似的教程指导怎么使用Fontawesome,AxureUX的大梨老师也写了很详细的教程来指导怎么使用。

首先本机需要安装相应的字体库,然后从Fontawesome的官网或者AxureUX的专门页,复制相应的内容,然后再粘贴到Axure中,最后再选择对应的字体即可。

这种方法可以适用于绝大多数场景,基本上算是一个比较可以接受的解决方案,但是直到我装好字体画好图标,打开预览之后,我发现了一个很操蛋的事情:预览状态下,图标没有生效!!!

有朋友肯定会说,那肯定是你自己哪里设置有问题了。

是的,刚开始我也是这样想的,直到我花了半个多小时在网上找各种解决方案,我还是没能解决这个问题的时候,我才意识到,这样搞可能是个无底洞。

因为产品相关问题不像技术问题,会有很多论坛或者交流群,所以一些产品方面的技术手段出问题了,要定位问题其实很难。采用Fontawesome引入图标的一些案例和讨论,在网上都找不到很多,即使我千辛万苦解决了这个问题,可能后面还会有其他问题,这并不是我的本意。

于是我就开始审视这件事的本质,我本来就是想画一个大概的图标来表示这个地方用了什么样的图标,而我选择用Fontawesome之后。一方面我要下载字体,其次我要在发布的时候链接CSS地址防止别人的电脑上看原型的时候丢失字体,而且我找到的字体其实也并不是和前端框架百分百一样的内容,最后我还在自己本地电脑上还预览不成功,我丢,那我还用这玩意干啥?

Fontawesome确实很强,但是也确实有点点麻烦,麻烦的并不是一开始装字体和发布的时候配置好CSS链接,而是这一顿操作之后我要让其他协作的同事也装这么多东西,最后一旦某个人的电脑出了问题,又要花一堆时间去重新定位问题,找到解决方案。

所以,我决定直接抛弃Fontawesome,毕竟时间比较金贵,不能都荒废在这上面了。

方法四:SVG大法

这个方法是我最推荐的也是最认可的,虽然它也有弊端,但是胜在简单,普适性而且还不会出错。

SVG是什么?定义是什么,我直接从百科上摘下来:

_SVG是一种图像文件格式,它的英文全称为ScalableVectorGraphics,意思为可缩放的矢量图形。它是基于XML(ExtensibleMarkupLanguage),由WorldWideWebConsortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

这些描述看不懂没关系,但是只需要看到这句话就可以了。

「可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能」

Axure肯定也是文字处理工具,而且还有一个很常用到SVG的文字处理工具就是:PPT。

做PPT的时候,找一些图标,形状等,都可以插入SVG。直接把SVG下载到本地,然后拖拽进入PPT,最后再做两次取消分组就可以了。

话题回到Axure中,Axure也可以使用这种办法,而且Axure的SVG处理能力比PPT还更好,它支持你自己复制SVG的代码然后粘贴到Axure中,就可以自动识别。

复制SVG代码之后,粘贴在Axure中,然后右键将SVG转为形状,然后就可以自由的编辑(调色,改大小等)。

恰巧的是,我们团队中的项目的一些icon都是来源一个网站,而且这个网站也正好支持复制SVG代码的功能,它就是:阿里巴巴矢量图标库。

选择你想要的的图标库,然后点击下载,在弹窗页面选择「复制SVG」,然后再粘贴到Axure中,最后再转SVG成形状,就可以自由编辑啦。

以上就是关于“Axure怎么插入图标Axure插入图标的4种办法”的全部内容精彩分享了,希望能够帮助到你!更多Axure精彩分享,尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话,那我不妨建议你直接学习体验一下我们的Axure自学自学课,专业讲师授课,可以从基础的知识点开始学起,逐步深入掌握哦~

元件是线框图绘制过程中必不可少的基础元素,线框图是由一些列元件组合而成。因此认识和熟练了解每一个元件的特征,对绘制线框图或者原型来说是非常重要的,本章节就详细讲解每个元件的用途和应用特征。

方框、椭圆、占位符、按钮、标题、标签和文本,这几个元件本质上都属于形状元件。选中元件,可以通过右侧对应的样式面板对元件进行编辑。

添加文本:选中元件,双击元件或右击在弹出菜单中选择“编辑文字”,即可对元件执行添加文本、编辑文本的操作。

选择形状:形状元件可以改变各种形状,包括矩形、三角形、圆形、弧形、五角星、爱心、水滴等。选中元件,右键单击在弹出菜单中选择“选择形状”。

转换为:形状元件转换为后,可以保留形状元件上添加的交互和注释。选中元件,右键单击在弹出菜单中选择“转换为”。

填充:形状元件支持颜色填充和填充。颜色填充可通过顶部的工具栏或右侧的样式面板,进行配色。通过形状元件导入的,大小和位置固定在形状内部,不同于常规的导入。选中形状元件,右键单击下拉菜单中选择“导入图像”或在右侧样式面板选择本地,完成导入。

边框:形状元件可以设置边框的颜色、边框线的粗细(厚度)、线条的样式(直线、虚线)以及每条边框线(隐藏部分线框)的可见性。通过顶部工具栏或右侧样式面板均可以设置。

编辑控点:通过拖动控点的位置,可以将元件改变成任何你想要的形状,一般元件有4个控点。选中形状元件,右键单击下拉菜单中选择“编辑控点”或点击顶部工具栏中的点,拖拽元件边框上的小菱形位置,可以改变元件现状。

变换形状:可以对形状元件进行水平和垂直翻转,对多个形状元件进行布尔运算,改变点的连接方式(直线连接或曲线连接)。选中形状元件、右键单击下拉菜单中选择“变换形状”,弹出的右侧菜单中选择变换方式。

指定选择组:与单选按钮组效果类似,当组中有一个元件被选中后,其他组元件自动切换为未选中状态,常用语于Table切换或标签导航。若将元件添加到指定的组,首先选中形状元件,右键单击下拉菜单中选择“指定选择组”,编辑选择组名称。

工具提示:常用于一些操作提示,如Axure工具栏、页面与大纲、库与母版等相关的操作按钮,鼠标悬停在按钮上方,显示提示信息。选中形状元件,右键单击下拉菜单中选择“工具提示”,编辑提示信息。

圆角效果:形状元件可以将直角转换为圆角。选中元件,拖动左上角的倒三角手柄来控制圆角的半径,也可以通过右侧样式面板输入角度来调整圆角效果。在样式面板中,还可以设置各圆角的可见性,可以做到部分顶点显示为圆角,部分顶点显示为直角。

阴影:可以为形状添加外部阴影、内部阴影和文字阴影,增加原型的保真程度。选中元件,通过顶部的工具栏或右侧的样式面板为形状元件添加各种阴影,可以自由设置阴影的投影位置、大小、颜色以及模糊程度。

不透明度:通过拖动右侧样式面板中的滑块,可以灵活设置形状元件的不透明度。

边距:控制形状元件内的文字与上下左右四个边框线的距离。选中形状元件后,通过右侧的样式面板调整文字与四个方向边框线的距离。

自适应宽高:根据形状元件内的文字内容,可以自适应宽度和高度,减少了手动调整元件尺寸和文字换行的操作。选中元件,点击右侧样式面板的适合文本宽度或适合文本高度。选择适合文本宽度,则所有文本在一行显示,形状元件的宽度跟着文字的宽度而自动调整(略大于文本宽度);选择适合文本高度,则形状元件的高度随着文字的高度而自动调整(略高于文本高度)。

交互样式:形状元件支持添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时的交互样式。选中形状元件,点击右侧交互面板,点击新建交互,为元件设置样式效果。

元件可以用来添加和插图,以表达你的设计理念、产品创新、照片等更多内容。

导入图像:拖拽一个元件到设计区域,双击或右键单击菜单中选择“导入图像”,导入。Axure支持的格式包含:JPG、GIF、PNG和BMP。

粘贴:从任意处复制一张均可以粘贴到Axure中,当我们复制的较大时,系统会提示“该图像过大,可能导致应用程序运行缓慢,您要优化它吗?”,建议点击是,系统将会无损压缩大小。一般从excel或CSV复制内容时,建议点击右键,选择“选择性粘贴,粘贴为”,直接Ctrl+V通常会粘贴为文本格式。

添加/编辑文字:导入后,右击选择“编辑文字”,上的文字还可以进行样式编辑,如颜色、大小、字体等。

水平和垂直翻转:导入后,选中,右键弹出菜单中选择“水平翻转”或“垂直翻转”,可以对进行水平和垂直翻转。

分割图像:分割与裁剪在设计领域俗称切图。两者的区别在于是否保持了的完整性,前者完整保留内容,后者默认保留选定部分内容。选中,右键单击菜单或在右侧样式面板中选择分割图像,出现十字架虚线,十字架交叉处即为切点,点击设计区域右上角的+、—和|选择切割线,—代表了横线切割,+代表了竖线切割。

裁剪图像:分为裁剪、复制和剪切三种方式。裁剪只保留选定区域,复制不对原图像有任何影响,剪切从原中切除选定区域。选中,右键单击菜单或在右侧样式面板中选择剪裁图像,通过拖拽虚线矩形框四个顶点的位置来调整裁剪范围大小,移动矩形框确定裁剪的区域。点击设计区域右上角的裁剪、复制和剪切可以选择剪裁的方式,默认为剪裁。

边框和圆角:通过工具栏和样式面板可以给添加边框。设置边框的颜色、边框线的厚度(粗细)、边框线的样式(直线、虚线)。拖动左上角的倒三角或直接在样式面板设置圆角半径,来达到设置圆角的目的。(设置界面与形状元件类似,不在重复截图)

不透明度和阴影:通过拖动样式面板中的滑块可以设置的不透明度。元件仅能设置外部阴影,设计方法与形状元件类似。(设置界面与形状元件类似,不在重复截图)

优化:使用通过功能,在保证基本不影响浏览质量的前提下(降低的像素密度,但一般肉眼无法察觉,基本可以忽略),使得占用的存储空间更小,同时也可以提升原型的加载速度,提升浏览体验。通常在导入大图时,Axure会自动提示是否需要优化,也可以手动优化。选中,右键点击菜单选择“优化图像”。

等比例缩放:按住shift键盘,同时拖动边角的顶点,可以按比例缩放。选中,通过工具栏或样式面板中锁定宽高比例,更改宽或高的值也可以做到等比例缩放。

交互样式:也可以像形状元件一样添加交互样式,可以添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时样式效果。(设置界面与形状元件类似,不在重复截图)

在原型设计时,通常需要将原型的几个版块或内容进行区隔,这个时候利用水平线和垂直线就会比较方便。

箭头:通过工具栏或样式面板可以为横线或垂直线设置箭头样式。选中线条,在工具栏或样式面板中点击箭头样式,在下拉列表中任意选中想要的箭头样式。

颜色、厚度和样式:可以为线条添加颜色、设置厚度和样式(直线、虚线),在工具栏和样式面板中均可以设置。按住shift键,拖动线条,可以改变线条的长短。

旋转线条:Windows按住Ctrl,Mac按住cmd,同时将鼠标悬停在线的末尾进行拖拽,或者在样式面板中直接输入旋转角度。注意这里的旋转角度均按照顺时针方向旋转。

热区是一个浮在最顶层的透明图层,热区可以放置在任意元件的上方,为热区设置交互其实也等同于为热区下方的元件设置交互。

多个元件设置同一交互:如资讯列表页,需要同时为和文章标题设置一个鼠标单击跳转事件,这个时候可以直接在和标题上覆盖一层热区,为热区设置鼠标单击事件。

单个元件中的某一区域设置交互:利用热区覆盖在元件上的局部区域,为热区设置鼠标单击事件,即可起到元件的局部区域可点击效果。

热区的可见性:预览原型效果时,热区是透明不可见的,但在Axure源文件中默认会显示为一个透明的遮罩层,通过菜单栏中的视图>遮罩>热点,可以隐藏掉遮罩,与预览时的效果是一样的。

动态面板可以创建多个状态,每个状态下面都可以装有若干个元件,每个状态可以当做是一个全新的页面,在这里可以任意摆放元件,设置元件的样式甚至是交互,因此它更像是一个巨大的容器。动态面板是在原型制作中使用最多的高级元件,很多交互效果都依赖于动态面板来实现。

动态面板状态:动态面板是由一个或多个状态组成的,每一个状态里面都可以包含多个元件。同一时间,动态面板只能显示一个状态,使用交互设置可以显示或隐藏动态面板以及各状态的可见性。添加动态面板有两种方法,第一种,直接从元件库拖拽动态面板至设计区域;第二种,将要设置为动态面板的元件右键单击选择“转换为动态面板”。其中第二种方法,可以直接调整动态面板的大小至合适尺寸。第一种方法,如果状态中元件的尺寸大于动态面板时,则超出部分在动态面板中将不可见。在样式面板中可设置“调整大小以适合内容”,以保证状态中元件的可见性。

编辑动态面板状态:双击动态面板选择一个状态进行编辑,进入状态中,我们会看到中间有一个白色矩形区域,矩形区域为动态面板的画布,超出部分,则在动态面板中不可见,如果看不到白色矩形,则一定是在样式面板中为动态面板勾选了“调整大小以适应内容”,取消勾选,则可以在状态中看到白色矩形。在状态中编辑元件,就和我们平常在页面中编辑元件一样操作。设计区域的右上角可以切换隔离状态,默认为隔离。隔离状态是指是否将动态面板以外的元件纳入进来。点击设计区域右上角的关闭按钮,则为退出动态面板状态,回到页面。

管理动态面板状态:双击动态面板进入编辑状态,点击设计区域左上角可以管理动态面板的状态,在这里可以增加状态、复制状态、删除状态。

动态面板专有样式

滚动条:当动态面板尺寸小于状态内容尺寸时,需要为动态面板设置滚动条以查看状态中的更多内容。滚动条有四种样式:不需要、根据需要滚动、纵向滚动、横向滚动。选中动态面板,在右侧样式面板中设置滚动条样式。

100%宽度:勾选后动态面板各状态在浏览器中打开后,可用显示完整的宽度,而不受动态面板自身宽度影响。

固定到浏览器:始终固定在页面的某个特定位置,如App的底部导航,资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板,点击右侧样式面板的“固定到浏览器”,勾选固定到浏览器窗口,选择固定位置的方向,设置边距,勾选保持在前面(将动态面板图层置顶)。

其他通用样式

动态面板的位置和尺寸、填充、边框、阴影和圆角等这些公共样式的属性设置同形状元件一致,请参考上文说明 。

设置动态面板状态(交互动作)

面板切换:对于有多个状态的动态面板,可以使用设置动态面板状态这一动作切换到指定的状态,这也是动态面板最常用的交互动作。在用例的交互动作中选择“设置动态面板状态”,在状态项中下拉选择切换的状态。下拉选择的切换状态包含以下四种切换方式:指定状态(state1/state2)、上一个状态(previous)、下一个状态(next)、停止切换(stop)、值(value)。

上一个/下一个:选择上一个状态、下一个状态时可以进行状态的重复循环(状态是有限的),设置中自动勾选“从最后一个到第一个自动循环”,在更多选项中还可以设置首次循环的时间间隔。这样动态面板就可以按照规律无限循环下去,循环切换常用于轮播图的自动播放。

停止切换:当我们需要停止动态面板无限循环时,如停止轮播或内容广播,可以在状态列表中选择停止切换。

值(value):使用值来设置动态面板状态时,需要注意值必须与动态面板的状态名称一致时,才能生效。当需要基于某一个页面存储的全局变量值在本页面中使用“页面加载时”事件来设置动态面板到指定状态。此时,只需要设置一个简单的交互用例即可实现。

动态面板切换动画:进入与退出都可以设置过渡动画,在设置用例时的动作配置中选择动画效果。进入与退出支持设定的动画效果包含:逐渐、向上滑动、向下滑动、向左滑动、向右滑动、向上翻转、向下翻转、向左翻转、向右翻转。设定动画效果后,我们需要为每个过渡动画设置时间,注意这里的时间单位是毫秒。

更多选项:如果原来动态面板为隐藏,在这里可以勾选为显示,还可以设置展开和收起的状态。

当我们需要引用页面或页面中某个部分的内容时,可以使用内部框架达到引用的效果。内部框架既可以引用Axure文件中的页面,也可以引用外部的页面。

从元件库中拖动内部框架至设计区域,双击内部框架,在弹出的窗口中选择链接的内部页面,或填写外部页面的URL地址,点击确定,完成引用页面的设置。右侧的样式面板可以设置隐藏边框,下拉选择滚动条的显示方式和预览类型。滚动条的显示方式包含:根据需要滚动、总是滚动和从不滚动,这里的滚动条设置包含了垂直滚动和水平滚动。预览类型包含:无、视频、地图和自定义预览,自定义预览支持从本地导入。这里的预览设置仅为Axure内部预览,在浏览器预览看不到设置效果。

中继器元件由中继器数据集和中继器项两部分构成。中继器可以用于需要重复设置的元件,如商品列表页、资讯列表页、联系人列表、表格等。

编辑中继器:从元件库拖动中继器至设计区域,双击中继器进入中继器编辑页面,中间的白色区域为中继器的画布,中继器的画布大小既可以手动调整,也可以根据页面内容自动调,在设计时无需手动拖动顶点来控制画布大小。画布外的元件,将会同步至中继器的左侧或上方。中继器画布右上角有一个隔离开关和关闭按钮,隔离开关的作用同动态面板一致,默认为关闭(隔离),点击开启后,会将中继器周围的其他元件均纳入进来,像是一个容量超大的乾坤袋。中继器编辑页面可以任意放置元件,如同在一个全新页面进行线框图设计。

中继器数据集:中继器元件是由中继器数据集的数据项填充,填充的数据项可以是文本、甚至是链接。Axure 90中,在中继器内部和外部均可以编辑数据集。右侧的样式面板中,我们可以看到类似于表格形状的即为数据集,在单元格里可以任意填充数据。数据集中的行与列的数据可以任意编辑,值得注意的是数据集列的命名需要为英文,否则在中继器项载入数据时将无法关联数据集内容。

中继器的项:中继器中重复布局的元件这里称之为项,双击中继器元件,进入中继器进行编辑,中继器页面中的元件会被重复加载多次(中继器有几行信息,就被重复加载几次)。

加载项:利用交互事件每项加载时将数据集中的数据填充到设计区域。

插入文本:双击交互事件每项加载时,添加设置文本动作,设置value值时,点击右侧的fx,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量ItemPhone,点击确定完成文本(手机号码)的加载。完成此设置后,当中继器每项加载时,就会将数据集中列(Phone)的内容自动插入到刚刚设置的文本元件中。

导入:导入图像到数据集中并使用“设置图像”动作将插入到中继器的项中。在做这项交互设置前,需要提前在中继器中准备一个图像元件,用来关联显示中继器数据集的图像。在数据集中右击想要插入的项,选择“导入图像”,选择插入本地图像。右侧交互面板中点击“每项加载时”事件。添加“设置图像”动作,选择目标元件(中继器数据集事先设置元件的那一列内容)。设置图像时(SET DEFAULT IMAGE),选择值,点击右侧的fx,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量ItemHead portrait,点击确定完成图像(手机号码)的加载。完成此设置后,当中继器每项加载时,就会将数据集中列(Head portrait)的内容自动插入到刚刚设置的图像元件中。

插入页面链接:中继器数据集中的项可以添加引用页(跳转链接),当用户点击某个指定的元件时,触发链接跳转。数据集中右键点击空白项并选择“引用页”,选择本地页面。在中继器中选择一个触发跳转动作的元件,为其添加单击事件,添加“在当前页打开”动作,然后选择链接到外部网址或本地页面,点击fx,在弹出的编辑窗口中,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Itemlink(添加链接的数据项),点击确定完成链接跳转的设置。

中继器内部元件的交互:中继器的数据项可以添加任意交互,如同正常元件一样。

中继器专有样式

布局:中继器的内容支持按垂直、横向样式展示内容。垂直布局时,可以设定每一列数据有几项;横向布局时,可以设定每一行有几项。选中中继器,布局样式中选择垂直或横向,勾选换行,填写每一列或每一行项的数量。如果不勾选换行,则所有的项将全部垂直展示成一列或横向展示成一排。

项的背景:项的背景既可以设置单一颜色,也可以设置两种不同的颜色交替显示。勾选样式面板中的交替颜色,设置背景色和交替色。默认情况下,中继器内容没有背景色,页面看上去是白色,是因为整个页面背景默认显示白色,并非中继器项背景为白色。

分页:中继器为我们提供了分页功能,当中继器项较多时,可以设置分页。选中中继器,在样式面板中,勾选多页,设置每页项的数量和开始页。

本篇结语 :下一节将重点讲解文本输入框、下拉列表框、列表选择框、复选框和单选按钮的使用说明及使用技巧。后续每一篇章节尽量控制篇幅,这一篇基础元件的说明有点长,基础性的东西才是最重要的,所以值得详细讲解,也希望大家能够有更深刻的理解。