Axure原型模板——如何用axure快速制作APP交互原型
1,第页。整个轴左下角的位置就是页面的位置。一般情况下,系统默认为三页。当然,你也可以复制很多页面,双击第一页,然后我们就可以构建一个当前页面的简单原型。
2.在组件库中选中矩形2的这个元素,拖动到画布中,根据自己需要的大小画出相应的大小。这里选择1920*1080的尺寸,这也是苹果手机plus版的分辨率尺寸,在图中所示的位置可以做相应的调整。
3.选择一个占位符。占位符通常代表图片在原型中的位置。这里,占位符用于表示登录页面中经常出现的信息,如徽标。当然,如果你想让它更漂亮,你也可以选择使用图片。
4.选择矩形1和文本框来创建登录位置的显示效果。具体来说,双击元素以编辑矩形元素。这里,我们选择将矩形设置为单词login。
5.单击组件,同时按住Ctrl键以复制组件。具体来说,使用这种方法,可以方便地创建密码的显示效果。
6.创建一个按键按钮,即登录按钮。拖动之后,我们将其命名为Login Now。具体来说,创建完成后,按F5,点击发布,这样我们就可以用网页打开自己的原型来看显示效果了。
任务管理移动端Axure原型设计这是Axure8做的一个高保真的任务管理APP原型模板,包括待办、日程、统计、me四个主要模块。作为一个效率工具的原型,核心功能都得到了体现,整体风格清新简洁,可以作为移动原型的模板。
此外,这部作品还包含了宫廷导航、日历、复读机、表单、动作面板、图表、卡片等多种常用的移动组件。,可以直接复制或拖动到项目中使用。对于初学者来说,也是Axure互动学习的友好模板。
点击这里预览完整的原型。
一些图片
如何快速原型化与Axure的APP交互,创建自己的组件库?
原型制作工具的核心功能无非是通过组件的堆叠和组合来展现产品的目标形态和效果。Axure只附带了一些基本组件,但是在线组件库很复杂。
乱,很难找到符合需求,满意的组件,而且大多是位图格式,无法修改色宽等值。产生的交互如何满足精致的标准要求?
好在Axure提供了“创建零件库”的功能,可以支持我们制作自己的零件库。我们可以通过软件的基本组件来组合我们常用的图标和控件。制作完成后,我们可以在每次应用时根据实际情况调整颜色、大小、线宽的数值,从而实现交互稿的统一完美风格。
例如,一些图标如主页、分享、搜索、消息...都是经常在APP中使用的,或者我们每次遇到喜欢的图标,都可以用Axure画出来,以备不时之需。下面就以图标为例,来说说制作组件库的具体步骤。
首先,创建一个元件库“绿色文件”
打开Axure,在元件库面板的“三条水平线”按钮的下拉选项中找到“创建元件库”的功能。点击它,弹出另存为对话框,需要选择元件库文件的存储位置,输入元件库的名称。
此时,我们可以看到文件的后缀是。rplib,它是组件库的格式,不同于。创建交互式原型时普通Axure文件的rp格式。
输入文件名和存储位置后,点击保存,Axure将重新打开一个新页面来编辑组件。我们可以看到新页面和我们通常创建的页面是一样的。rp普通文件。
页面完全相同,但不要混淆。此时,该页面编辑了我们需要在正常情况下使用的基本组件。rp文件。当我们回到存储组件库的位置时,我们可以看到组件库。rplib文件图。
它被标记为“绿色”,这不同于。rp文件。
创建好构件库的“绿色文件”后,基本的准备工作已经完成,下面是制作流程。
二、组件库分组
通过观察Axure的默认组件库,我们可以看到它的组件库可以按类别分组。比如默认分为:常用、表格、流程等。,这使我们更容易找到目标组件的位置。
同样,当我们制作一个组件库时,我们也可以对其进行分组。规则是:在页面导航面板上,所有文件夹都是分组的,不在文件夹下的所有页面,包括它们的所有子页,都属于以组件库命名的组。
在了解了分组规则之后,我们可以先根据自己对组件库的规划进行合理的分组。比如我们要做一个APP的组件库,可以把它分成图标、控件、框架三个常见的组,然后就可以进入具体组件的制作流程了。
第三,编辑和制作组件
让我们以制作一个“我的”头像图标为例。首先,在图标分组下,添加一个页面,命名为“我的”。双击进入组件编辑页面,编辑操作照常正常。
的。rp文件完全一样。我们可以参考一些app中常用的“我的”图标样式,然后使用Axure默认的基本形状元素,如矩形、水平线、圆形等。,进行组合和拼读。
组成最后理想的样子。
首先要明确的是,Axure没有类似PS中的布尔运算(可以自由编辑多个形状,比如合并、相交、减去顶层等。),所以会给我们做组件,特别是。
是图标带来了一些限制,但好在交互原型并不要求苛刻的细节,只要我们能清晰的表达产品形态,有更整体的风格就可以了。我们使用Axure
自己勾画出基本形状的图标可以很容易地调整颜色大小等。,并且可以适用于不同的交互文件,这就是从网上很难找到现成位图图标的便利。
回到我的图标制作,如图,我用三个基本形状拼凑,最后组合成一个我们经常看到的图标样式,一眼就能明白它的意思。虽然没有更多的细节需要实现,但是对于交互原型稿来说完全够用了。关键是颜色大小可以灵活修改。
按照这个思路,我们可以制作更多的图标,当然也可以制作一些常见的控件比如按钮、appbar、搜索栏、图标占位符等等。下图是我画每日阅读原型时做的一个组件库:
组件库做好之后,那么就到了最后一步。
第四,加载自制的元件库并使用
组件库被制作并保存在其常用的资源文件夹中。开个普通的。rp文件。同样,在库面板“三横线”按钮的下拉选项中找到“加载零件库”的功能,然后找到成品库文件的“绿色图标”进行加载。
加载后,我们可以在“选择组件库”下拉选项中找到并选择新加载的组件库,然后就可以像使用软件自带的组件一样使用我们自制的组件库了。
反正你应该已经学会自己做一个组件库了。我希望你能花时间做一个。当然,除了创建组件库,Axure还有很多技能需要掌握,比如大师的功能。
学会善用大师
在产品设计的过程中,主导航往往会出现在多个页面上,比如app底部的标签栏。当然不仅仅是导航。当我们频繁使用任何一组控件时,希望你不要一直复制粘贴。永远记住,创造一个主人可能是更好的选择。
使用大师的方便之处不仅仅在于你现在可以快速的使用一套控件,尤其是在设计后期,当我们需要修改一些基础控件的时候,大师带来的修改效率一定会让你深深的爱上这个功能。
除了要学会用大师,还要学会用好大师。还有,希望记得不要把太大的组合对象变成主人。因为复合对象越大,就越有可能需要位于母版上的许多位置。
方进行修改。这个时候,一般是将一些母版与另一个母版进行合并,这样母版的修改会更加灵活。比如下图把产品的基本信息和可能的购买状态一分为二。
主,共同组成一个完整的产品页面。
发展你自己的互动风格
我学会了如何创建自己的组件库,如何利用好master,当然还有很多其他使用Axure软件的技巧。快速完成一个交互原型草稿应该是可以的,但是如何保证交付的草稿风格统一,达到更高的目标水平?
首先要熟悉APP的设计规范,符合Android或者iOS的设计理念,对一些常规的控件设计规则有一定的了解。这样设计出来的产品只能用。
结合这个平台的特点,并基于相关平台的一些固有知识,很容易做到* * *知识。这也是交互原型作为一个传播交付品应该达到的目标。
在熟悉APP的设计规范的基础上,在制作过程中,根据使用场景和自己的习惯,制定自己的交互风格。比如可以定义APP原型中采用文本字体。
使用微软雅黑颜色# 333313字号,提示文字为微软雅黑颜色# 99999。
字体大小10,固定appbar行高40px,内容距离屏幕左边缘10px。......
当然,有些规范,比如字体,也可以作为一个字体组件,放入我们自制的组件库中。总之要根据自身情况灵活运用。有了一套风格,再加上创建组件库随意修改颜色大小,相信制作出来的交互原型一定是一个协调的整体。
阅读日报的原型
理论方法的掌握需要实践来更好的吸收和领悟。我参考了iOS版的《每日阅读》,为一些主页面画了一些交互原型。基本过程和思路与本文所述内容一致。
为了有更生动的感觉,我从网上找了一个iPhone边框,创建了自己的组件库,画了一些常用的图标和控件。然后整体风格定下来,制作过程中用几个母版,提高效率。同时,可以使用辅助线来帮助您确保组件的对齐和均匀分布,从而提高布局的美感。
摘要
最后再次抛出我在开头提到的方法论,如何用Axure快速制作一个APP的交互原型:制作自己的组件库并学会善用大师,熟悉APP的设计规范,有自己的一套交互风格。