导航:首页 > 软件资讯 > axure如何制作app原型

axure如何制作app原型

发布时间:2022-01-28 18:33:50

‘壹’ 使用Axure制作App原型怎样设置尺寸

不同设备的尺寸是不一样的,但是通常我们可以用360像素*640像素来做原型,这个尺寸适应于大多数分辨率在1080像素*1920像素,屏幕在5~5.5英寸的移动设备。

不过使用Axure制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。
如果需要原型尺寸适配移动设备,需要在生成HTML文件的页面,勾选“移动设备-包含视口标签

‘贰’ Axure做的APP原型手机怎么预览

目前比较好的解决办法是:

下载Axure

2.如果是给itouch或者iPhone用的,比较好办,直接用320×480的分辨率画好辅助线,然后画原型

3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型

4.设置说明见下图:(页面大小显示我的这个设置是按320×480的大小,默认不缩放)

5.用你的移动设备访问你生成的原型链接(如本地服务器,或Dropbox托管)

6.把该页面创建一个桌面快捷方式7.完成(有icon,有闪屏)另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁。


‘叁’ 如何用Axure快速制作APP交互原型

axure工具的使用比较简单,下载一本电子书,看看基本就能掌握 然后就是做一些案例,进行实战. 当然我这里也有小楼的从入门到精通的视频 《Axure快速原型设计》.rar大小:1.81M所需财富值:1 已经过网络安全检测,放心下载 点击下载下载量:10

‘肆’ Axure 如何制作APP原型

如果你不会做 你可以给我你的原图 我帮你做 因为这个在这里是说不明白的

‘伍’ 使用Axure制作App原型应该怎样设置尺寸

制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。
移动设备分辨率与原型尺寸对照表:

2、axure原型制作时还有几点注意事项:

2.1、页面命名最好都用英文,以防中文在解压时出现乱码;

2.2、APP主页面不要用index来命名,否则打开Index时默认隐藏侧边栏,后续无法复制URL;

2.3、设计尺寸大小取决于选择的演示方式:

a).Web APP模式:屏幕高度-ios设备状态栏高度,eg:设计尺寸=480-20px=460px;

b). APP打开模式:采用设备默认尺寸。

‘陆’ 如何用Axure快速制作APP交互原型

另外,也可以在网络上搜索axure视频教程(我这里有小楼的从入门到精通62集视频教程)来进行学习,上手很快,一些常见用的,大概几个小时就能学会了

‘柒’ 如何用axure画app原型图

多学习,多练手


画好原型后

1.下载Axure

2.如果是给itouch或者iPhone用的,比较好办,直接用320×480的分辨率画好辅助线,然后画原型

3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型

4.设置说明见下图:(页面大小显示我的这个设置是按320×480的大小,默认不缩放)


‘捌’ 如何用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手机的边框,并且创建自己的部件库,绘制了一些常用的图标和控件。然后设定了整体的风格,制作过程中也用到了几个母版提高效率,同时可以使用辅助线帮助自己保证部件的对齐、平均分布等,进而提高布局的美感。

‘玖’ 如何用Axure快速制作APP交互原型

我觉得首先要熟练使用Axure,其次要有清晰的思维,明白自己想要表达什么,想要画什么。然后才能“快速”的制作APP原型。

‘拾’ 如何用Axure制作APP原型

app原型和pc并没有太大区别,主要是预览比例协调好,用成熟案例比如网络app、京东app试一试,就知道门道了
可以看看【Axure视频教程】axure rp7从基础到实战

阅读全文

与axure如何制作app原型相关的资料

热点内容
查看uuid的命令 浏览:48
强光抑制算法 浏览:12
u盘加密后能拷贝吗 浏览:887
asus带命令提示的安全模式 浏览:1002
php截取字符串指定 浏览:246
lxe加密视频怎么设置 浏览:607
php数组删除第一个元素 浏览:167
安卓指示器怎么使用 浏览:572
程序编译c执行方法 浏览:347
如何用python做趋势图 浏览:501
服务器408超时怎么解决 浏览:989
php中数组的写法 浏览:371
ssf33算法 浏览:992
单片机红外编码程序 浏览:378
云服务器如何与本地计算机组局域网 浏览:956
51单片机快捷编程 浏览:465
siriapp建议为什么有的app消不掉 浏览:314
怎么打开vivo手机安装应用加密 浏览:158
加密芯片为什么要随机数 浏览:930
看美剧下载什么app 浏览:516