如何用Axure快速制作APP交互原型
对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能。其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位。但就要PS一样,虽然足够专业,但同样也会存在使用灵活性的一些问题。
今天我们就谈谈,如何用Axure快速制作APP交互原型,不对,更准确的说法应该是:如何用Axure快速制作一份有水准的APP交互原型。作为一名优秀的产品人不仅要保证效率,也要保证质量才行。
首先抛出我的方法论:制作属于自己的元件库并要学会善用母版,熟悉APP设计规范并要有自己一套交互风格样式。我会以仿照「读读日报」IOS版做的一个交互原型稿为实例,表述整个制作过程的思路,希望能对你有所帮助。
创建属于自己的元件库
原型制作工具的核心功能无非就是通过元件的堆砌组合,来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件,而网上的元件库庞杂混乱,很难找到满足需求并且称心的元件,并且大部分都是位图格式,根本无法修改颜色宽度等数值,制作出来的交互又怎么能达到精美的水准要求呢?
还好Axure提供了「创建部件库」的功能,能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件,制作完成后,每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值,从而才能实现交互稿统一完美的风格。
比如,APP中经常会用到一些主页、分享、搜索、消息….各种图标,或者我们每次遇到喜欢的图标,都可以用Axure画出来,以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。
一、创建元件库“绿色文件”
打开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交互原型的方法论:制作属于自己的元件库并要学会善用母版,熟悉APP设计规范并要有自己一套交互风格样式。
希望,我的这点总结思考能给走在产品经理路上的新人一点启示。,我相信其中有很多地方都可以实现的更加完美,也欢迎能够一起交流进步。并且除了Axure,有很多工具也能很好地支持APP原型的制作,也需要我进一步去探索学习。
转载自:http://www.woshipm.com/rp/223634.html
如何用Axure快速制作APP交互原型的更多相关文章
- 音乐类产品——“网易云音乐”app交互原型模板(免费使用)
网易云音乐虽是一款音乐app,但有人说它也是社交界的一股清流以及一匹黑马.音乐带给人的感染,激发着很多人在这里表达着他们的情绪和心声.网易云音乐上的真实用户点评,不仅被印在地铁的广告牌上,还在朋友圈频 ...
- Mockplus教程:分分钟搞定APP首页原型设计
Mockplus是一款快速原型设计工具,支持包括APP原型在内的多种原型与线框图设计.除了快速,Mockplus广受欢迎更因为它极低的上手门槛.今天小编就为大家展示如何用Mockplus在3分钟内完成 ...
- AndroidStudio如何快速制作.so
之前写过一篇Eclipse制作.so的文章,http://blog.csdn.net/baiyuliang2013/article/details/44306921使用的是GNUstep模拟Linux ...
- 转——使用Axure制作App原型应该怎样设置尺寸?
想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科.这里金乌直接给大家提供一个常用的移动设备尺寸列表, ...
- 【转载】使用Axure制作App原型怎样设置尺寸?
使用Axure制作App原型怎样设置尺寸? 原文地址:http://www.axure.us/2172/ 本文由原型库网站投稿,转载请注明出处. 最近有几位小伙伴儿都提出同样一个疑问:想用Axure设 ...
- Axure快速原型教程02--创建页面和设置界面
目录 Axure快速原型教程02--创建页面和设置界面 Axure快速原型教程01--原型说明下载和安装 首先,在左侧的面板中,我们发现有一个叫sitemap的面板,这个面板就是我们的一个个的页面了, ...
- 如何用PS快速的批量制作连续号码数字编号图解
如何用PS快速的批量制作连续号码数字编号图解 大家好,今天太原博飞设计培训小编就告诉大家如用PS快速的制作连续数字编号,在工作中尤其是大型活动的有时候制作连续的号码牌,少还好,如果上百上千个,那就辛苦 ...
- 15款优秀移动APP产品原型设计工具
一新来小盆友问:“移动产品原型设计都用啥工具?” 答:“@#¥……&%*” 又问:“能详细说下各个工具吗?我比较一下” “……” 好吧,谁让我那么的爱分享而你又是小美女呢 ———————正文开 ...
- 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此,如今的原型设计工具格局也发生了很大的变化. Sketch对于 ...
随机推荐
- C# web IIS服务器 DateTime 带中文解决
C# Web应用在某些电脑IIS上部署运行,读取当前时间带有中文,比如2018-5-1 星期一 上午 12:00:00,虽然使用Format转换可以解决,但代码量较大难免遗漏,会引发问题,为了解决该问 ...
- IDApython教程(五)
我们继续IDAPython让生活更美好序列,这一部分我们解决逆向工程师日常遇到的问题:提取执行的内嵌代码. 恶意软件会用各种方式存储内嵌可执行代码,有些恶意软件将内嵌代码加到文件附加段,包括PE资源区 ...
- 【bzoj 2049】Cave 洞穴勘测
Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好 ...
- sql leetcode -Duplicate Emails
第一种解法: select distinct p1.Email as Email from Person p1, Person p2 where p1.Email=p2.Email and p1.Id ...
- ubuntu 中文变成小方框 口
今天打开ubuntu所有原来是中文的地方都变成口口口口 ,下面是解决办法,其实很简单,更新一下字体库就可以了 1. 进入到字体的目录下 /usr/share/fonts/ ,输入下面的命令 c ...
- matplotlib-区域填充
import numpy as np import matplotlib.pyplot as plt import matplotlib as mpl import datetime #解决能显示中文 ...
- 腾讯云服务器ubuntu16.04系统下安装Python版本管理工具pyenv
一. 系统环境 腾讯云提供的系统是ubuntu 16.04 LTS,系统默认的Python版本是2.7.12,我想要安装3.6和其他的版本. 比较方便的是腾讯云已经默认安装好了git和curl ...
- django设置并获取cookie/session,文件上传,ajax接收文件,post/get请求及跨域请求等的方法
django设置并获取cookie/session,文件上传,ajax接收文件等的方法: views.py文件: from django.shortcuts import render,HttpRes ...
- Eclipse 自动生成 Ant的Build.xml 配置文件
Eclipse 自动生成 Ant的Build.xml 配置文件,生成的方法很隐蔽 选择你要生成Build.xml文件的项目,右键. Export-> General -> Ant Buil ...
- Microsoft SQL - 学习总目录
Microsoft SQL - 数据库管理系统 Microsoft SQL - 数据类型 Microsoft SQL - 查询与更新 Microsoft SQL - 操作语句 Microsoft SQ ...