‘壹’ Axure有哪些鲜为人知的使用技巧
1,把当前的xx转化为图片。这个功能可以解决你原型中文字的字体或者大小或者换行等在浏览器中预览的一系列问题。
2,你也可以用axure代替viso来做流程图。个人觉得更顺手。
3,用axure生成一个多触发的小游戏或者课件。然后发布成网页压缩包。发给别人玩或者浏览。
4,图片热区功能可以很好的解决使用者鼠标经过时光标变化体验的同时,范围性的点击也会让小按钮更好点。特别是当你做触屏手游的时候。
5,良好的习惯,可以使你用得上更多的发布功能,特别是规格说明书。
6,用axure可以找到志同道合的朋友,比如说你给的都是干货时候,(项目经理和产品经理应该是主要读者),给你点赞的人,绝对是个心胸开阔的尊敬他人的人,他身边的人对他评价应该也不错。在文中给予评论的则是尊敬技术的,并乐于分享自己经验看法的人,他们也是有匠心精神的人。
@孙一,互联网
重复比较多的地方请尽量使用母板,最好是非固定位置的母板。
当功能不太好实现的时候(或者一时想不出来的时候),试试用动态面板,也许会有意想不到的方法。
Axure里面的语句执行是有先后顺序的。所以有时候如果你的语句设置都没有问题,但是怎么也出现不了应有的效果,请检查一下你的语句防止是否有问题。
用Axure可以对图片进行裁剪、拼接。
Axure可以对图片进行切图操作。
@小楼,产品人
1.母版自定义触发事。
2.动态面板多层嵌套。
3.自定义格式刷和注释字段。
@Capricornushane,产品经理
用透明矩形框来做页面级交互事件
具体步骤如下:
1.设计完全部原型(不可点击);
2.把需要跳转页面的点击区域,画一个矩形框,设定好交互事件;
3.把矩形框设为透明;
4.复用到其他区域;
好处:
1.全部设计原型后再细化交互细节,可以避免陷入[抠细节]状况,提高了设计效率;
2.用独立矩形框设定交互,可以很快的复用到不同页面,不同区域,简单方便直接;
@冬源,交互设计
1,使用Project。如果你是团队协作,Project无疑会使整个项目效率显着提高且减少出错;如果自己单独使用也是好过Save的,可以方便做版本回溯。
2,更多时候,请把精力聚焦到线框的逻辑与结构,而非交互效果上,尽可能用简洁的文字、分镜、示意图把交互效果描述清楚。很多人追求把交互效果做的跟flash或js编程似的,这完全本末倒置。
@王俊杰,产品人
1.判断
在遇到几乎任何“什么什么时候”,想要“怎么怎么样”的情况,能且只能用UC用例的判断来实现。这几乎是高保真原型的灵魂。
2.智能手机上那种图片滑动效果
需要至少两重动态面板嵌套才能保证滑动(Axure里是Drag拖动)时,不超出范围显示,至于滑动到一定程度返回,则需要结合判断里面“元件范围”的接触另一个控件与否,然后用动作来实现。
能实现iPhone 在iOS 7那种解锁。
3.自适应屏幕
这里说的不是Axure 7自带的那个坑爹的自适应,在显示左侧站点地图或者像素有一点点差别就失效的效果怎么拿得出手呢?而这些其实是可以通过调用屏幕尺寸来强行使原型适应屏幕的。
比如一个banner,宽度=屏幕宽度;比如一个App原型,让iPhone 机身始终处于屏幕水平垂直居中位置;Gmail 进度条也是一样。
4.文本模糊搜索/分词搜索
这些都可以利用中继器实现,只是稍微麻烦点,要从另一列数据中包含搜索,并且那一列数据要写得比较全面在查找部分里可以找到。用sousuo那一列里的关键词都能搜出左边的东西。
5.图片文件上传
自从文本框可以设置为文件类型,支持用户选择电脑文件的时候,我就知道总有一天可以实现图片上传。上传的图片只要是图片,不管什么格式都能正常显示,不用在Axure里一个个后缀名单独设置。我的做法是文件类型文本框选择了一个文件之后,将文本框内的数据通过字符串函数进行一系列处理,在一个内部框架中打开。
6.图片旋转/翻转
把同一张图片放到不同尺寸/转向的“图片”控件里,所有控件以一个动态面板不同的状态的形式保存,然后用一个UC设置动态面板的状态“重复”显示“下一个状态”即可。
7.图片按比例放大缩小
需要把图片当作动态面板背景,并且在面板设置里设置好,才能用UC和变量控制它的比例缩放,此功能能衍生出非常多的效果。
‘贰’ AXURE8.0 怎么让图片或者文字能够从右向左弹出
一、假设页面上有一个按钮与一个图片。
‘叁’ axure如何突出交互元素
通过讨论在网页设计中的视觉元素,描述了作为一种新的设计,采用传统的平面设计和视觉元素构成,以达到视觉上的沟通和审美目的的根本途径网页设计。提出具体的动态网页设计及互动元素是平的视觉元素结合起来的产品。组合构成
方式在平面设计,视觉通信主要依赖于视觉元素及这些元素的二维空间。使用基本视觉元素,网页设计平面设计,实现信息传输和美观的目的。这些视觉元素包括:文字,字体,图形,图像,布局,颜色。视觉元素以及它们的组合相互之间,是一个网页设计和准确的信息传递,并符合视觉审美规律的基本要求。的图案设计,任何元素和其他元素网页设计
直接使用许多视觉元素可以组合构成合理符合布局的要求。例如,一条短信可以传递任何文字内容,字体,也可以组合成一个单独的艺术形式。
‘肆’ axure 如何选取图片某区域进行交互
当使用者对网页进行某些人机接口的操作时,就会对网页触发一个事件(Event)。例如,一个按钮的OnClick 触发事件,打开工具
‘伍’ axure如何实现这种图片的交互,具体一点谢谢!
可以实现。
1,全局变量N默认为0,当鼠标移入区域时,为1。
2,做动态面板6个state,页面载入时,if N=0,等待5s(左右),设置state到next。
1~6的按钮分别设置选中时和鼠标移入时的不同样式。
鼠标移入1时,设置state到state1,并且按钮1为选中状态,其他为非选中状态。
触发事件你可以参考以上这些自己先完成大部分逻辑。有问题再问。
‘陆’ 如何在 axure 流程图的连接线上加文字,比如判断的“是”或“否”
直接选中连接线,然后打字即可。如下图:
‘柒’ 为什么axure添加文字后图片展示不出来
axure添加文字后图片展示不出来是因为该图片过大,不能显示。提示该图片过大,可能导致应用程序运行缓慢,您要优化它吗中选择否,如果你需要上传图片的话,就不要用文本框了,Axure7.0有处理图片的框体。
axure添加文字的方法
打开axure软件,进入到axure界面中,找到左下角元素仓库,向下滑动滚动条,点击选中Paragraph段落元素,这时向编辑区域拖动此元素,然后放下双击选中段落文字进行修改即可,选择左边的一个矩形框,拖到空白面,然后鼠标双击。
首先我们打开软件,在元件库中选择文本框,然后选择文本框后,我们把文本框拖入到画布中,并添加标题然后在属性栏中找到提示文本在提示文本中输入您的提示文件,之后保存并点击预览在浏览器中打开查看制作完成。
‘捌’ 如何用Axure快速制作APP交互原型
一、创建元件库“绿色文件”
打开Axure,在元件库面板“三条横线”按钮下拉选项中找到“创建部件库”功能,点击会弹出一个另存为对话框,这里需要选择元件库文件的存储位置,并需要输入元件库的名称。
此时,我们可以看到,文件的后缀名为 .rplib,这个就是元件库的格式,而不同于创作交互原型时正常Axure文件的.rp格式。
输入文件名称和存储位置之后,点击保存,Axure将重新打开一个新页面进行元件的编辑。并且我们可以看到,新页面跟我们平时创造.rp正常文件的页面一模一样,但不要混淆,此时页面编辑的是我们在正常.rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到,元件库.rplib文件图标为”绿色“,不同于.rp文件的蓝色。
创建好元件库得”绿色文件“后,基本准备工作已经做完,下边就进入到制作过程。
二、元件库分组
通过观察Axure默认的元件库,我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了:common、forms、flow等等,这样能更方便我们找到目标元件的位置。
同样,我们在制作元件库的时候,也可以进行分组,规则为:在页面导航面板上,所有的文件夹都是一个分组,所有没有在文件夹下的页面包括其所有子页面,都隶属与以元件库为名的分组下。
分组的规则弄明白之后,我们可以先按照自己对元件库的规划进行一个合理的分组,比如要做APP的元件库,那么我们可以分成:图标、控件、框架 3个常用分组,接下来就进入到具体元件的制作过程。
三、编辑并制作元件
我们以制作一个”我的“头像图标为例,首先在图标分组下,添加一个页面并命名为”我的“,双击进入到元件编辑页面,编辑操作就跟我们平时制作正常的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式,然后用Axure默认的基本形状元件,比如矩形、横线、圆形等,组合拼凑成最终比较理想的样子。
首先我们要明确,Axure中没有类似PS中的布尔运算(能够自由的对多个形状进行编辑,比如合并、相交、减去顶层等),所以会给我们制作元件,尤其是图标带来一定局限性,但好在交互原型并不要求苛刻的细节实现,只要我们能够很清楚的表示出产品形态,有比较整体的风格就可以了。并且我们用Axure基本形状自己勾画出来的图标,能很方便的调整颜色大小等,可以适用不同的交互文件,这就是从网上找现成的位图图标很难达到的便利性。
回到“我的”图标制作,如图所示,我一共用到了三个基本形状来进行拼凑,最终组合成了我们经常能看到的一个图标样式,并且一眼就能明白它的含义。虽然没有更多的细节实现,但对于交互原型稿来说已经完全够用,关键是颜色大小等可以很灵活的进行修改。
按照这个思路,我们可以制作更多的图标出来,当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图,是我在画“读读日报”原型图时制作的一个元件库:
元件库制作完成之后,然后就进入到最后一个步骤。
四、载入自制元件库并使用
元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件,同样是在元件库面板“三条横线”按钮下拉选项中找到“载入部件库”功能,然后找到制作完成的元件库文件“绿色图标”载入。
载入之后,我们就可以在“选择元件库”下拉选项中,找到刚刚载入的元件库并选中,然后我们就可以像使用软件自带的元件一样使用我们自制的元件库了。
怎么样,看到这里你应该学会了如何自制一个元件库了吧,希望你会花时间动手做一个。当然除了创建部件库,Axure有很多技巧都需要掌握,比如母版的功能。
学会善用母版
在产品的设计过程中,主导航往往出现在多个页面,比如APP的底部tab栏。当然不仅仅是导航,当我们频繁使用任何一组控件的时候,希望你不是一直都在复制和粘贴,永远记住,创建一个母版可能是更好的选择。
使用母版的便利性不单单体现在能够快速的使用一组控件,尤其是在设计后期,当我们需要修改某些基本控件的时候,母版带来的修改效率一定会让你深深的爱上这个功能,欲罢不能。
除了学会使用母版,更要学会善用母版。同样有一点希望能记住,不要把太大的组合对象变成母版。因为越是大的组合对象,越是有可能需要在母版的很多地方做出修改。此时把一些母版和另外一个母版合并起来一般会是更好的办法,这样对母版的修改会更加的灵活,比如下图,将产品基本信息和可能购买状态分开成两个母版,组合在一起成为产品的完整页面
制定一套自己的交互风格
学会了创建自己的元件库,也懂得了善用母版,当然还有其他很多Axure软件的使用技巧。应该就可以很快速的完成一份交互原型稿了吧,可是又该如何保证交付稿有统一的风格,达到较高的目标水准呢?
首先,我们要熟悉APP的设计规范,符合Android或者iOS的设计理念,对于一些常规的控件设计规则有一定的了解。这样设计出来的产品才能符合这个平台的特性,并且基于大家对相关平台的一些固有认知,很容易能够达成共识。这也是交互原型作为一个沟通交付物应该达成的目标。
基于对APP设计规范的熟悉,同时在制作过程中,要根据使用场景以及自己的习惯来制定一套自己的交互风格。比如可以定义好APP原型中,正文字体采用 微软雅黑 颜色#333333 13字号、提示文字为微软雅黑 颜色#999999 10字号、固定的appbar行高为40px,内容据左侧屏幕边缘10px距离......
当然某些规范,比如字体也可以当成一个字体元件,放到我们自制的元件库中,总之要根据自己的情况灵活的运用。有了一套风格之后,加上创建的元件库随意修改颜色大小等,我相信制作出来的交互原型肯定是协调统一的整体。
读读日报原型制作
理论方法掌握了,需要实践的锻炼才能更好的吸收领悟。我参照“读读日报”iOS版,对主要的一些页面画了一些交互原型。基本过程和思路就是按照本文所提到的这些内容。
为了更有形象感,从网上找来一个iPhone手机的边框,并且创建自己的部件库,绘制了一些常用的图标和控件。然后设定了整体的风格,制作过程中也用到了几个母版提高效率,同时可以使用辅助线帮助自己保证部件的对齐、平均分布等,进而提高布局的美感。