① Axure原型设计:Axure原型加流程图功能的高效结合
大部分PM使用Visio或者Mindmanager来画流程图然后倒入Axure,而很少有人知道Axure自带的流程图功能也很实用。尤其是和原型搭配使用,绝对是双剑合璧,天下无敌。
希望通我使用“原型+流程图”的多年经验,让更多的PM也可以掌握并运用到平常的原型设计工作中。
一、流程图的通病
目前所有流程图软件都存在一个问题,那就是流程图无法关联到原型页面。
无法做到直接点击流程图里面的节点(页面、功能、操作),展示与之相关的更多信息。这样子使用上面会很受限。
页面流程图无法查看指定页面详情
比如我们画页面流程图,展示了所有页面以及页面间的流向关系。UI设计师和开发童鞋,有时候需要查看某个页面的具体内容。
功搜明能流程图无法查看指定功能详情
功能流程图也存在类似的问题,开发童鞋想了解某个功能的具体情况,只能问PM或者自己找对应功能的原型页面。
功能逻辑图无法显示具体控件
画一个功能具体的步骤逻辑的时候,有时候我们需要展示一下其中的控件,比如写高激下单流程的时候可能需要展示一下付款弹窗。
当然也可以使用原始方法,直接复制过来,第一麻烦第二修改了无法同步。
无法对流程图节点做注释
流程图是由一个个节点连接而成,有时候节点需要写几句话注释一下。不是所有的流程图软件都能支持,更主要的是没办法做到默认隐藏,点击展开注释。除非你把流程导出为html格式,但是这样子又不能导入到Axure中了。
二、Axure流程图的介绍
以上这些使用问题,都可以使用Axure的流程图来满足。接下来我会一一的来讲解如何解决。
先简单介绍一下Axure的流程图功能是什么,其实本质上是一个元件库。
含有很多种元件,用途各不相同。大家使用的时候尽量遵循其定义的通用规范。当然如果你有特殊需要,可以单独定义。
三、流程图如何关联页面
Axure提供了两种操作方法,本质上都是设置“引用页面”属性,Flow元件库中的所有元件都具备该属性。Dafault默认元件库中部分元件支持该属性。
“引用页面”除了关联了对应页面,同时集成了对应页面的标题。当你修改页面结构中的页面标题,这里也会同步更新。
拖拽页面到工作区
当你画页面流程图的时候,需要展示某个页面的详情。
那么选中Axure左方的页面结构中的该页面。
然后拖动到右边的工作区即可,效果如下图。
最终的显示效果请查看我之前的文章,以及我绘画的 页面原型图 。
其中右下角带有“蓝色矩形组”图标的矩形,代表戚漏袜可以点击进入该页面的线框图,查看详细的页面布局、控件、逻辑等。
设置引用页面属性
根据上图,你应该可以猜到其实拖曳页面名称到工作区,是创建了一个页面并且设置了属性“引用页面”到该页面。所以你也可以这样做。
拖动Flow元件库中的元件到工作区
设置属性“引用页面”到你所需的页面
生成原型查看效果。
四、流程图如何关联具体功能
方法有2种,大家可以按需参考。
设置“引用页面”属性到具体的功能页面,方法如上。
设置单击链接到具体的功能页面,再简单不过。
五、流程图如何显示具体控件
在画某个功能的具体逻辑时候,我们可以借助Axure的“页面快照”功能来展示一些控件。有助于技术童鞋对功能的理解和实现。
新建页面快照
从左方的Flow元件库,拖动”页面快照”到右方的工作区。
设置引用页面
方法和上面的类似,但是展示效果有点区别哦。所谓页面快照是指将引用页面的具体内容显示到该元件区域范围里。比如我引用了 闪电约首页 这个页面,那么效果如下。
修改快照参数
显示明显有问题,我们可以修改一下参数。
取消适应比例,然后把该页面快照元件的尺寸修改成375 x667,然后填充的相对坐标改成(0,0,0,0)。此时快照效果如下。
配置动作
比如你可以设置该页面隐藏一些控件,或者展示隐藏的弹框,吐司提示。
大概是这样子了,在设计商品详情、购物车、确认订单的时候,该功能特别适用。有需要的童鞋可以试下。
七、流程图如何显示节点的注释
这个其实很简单,但是很多PM没用过。
具体的可以查看我写过的旧文《 产品逻辑的常用表达法 》,《 Axure最正统的产品逻辑表达法 》。
八、总结
以上这些技巧都是Axure自带的流程图功能,只是很少有人系统的总结并分享出来。
希望通过我的文章,大家以后能善用Axure的流程图。而不是盲目的跟风使用第三方脑图软件。
适合产品经理的流程图软件就是Axure,配合强大的原型功能。绝对是双剑合璧,天下无敌。
② 使用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 设计网站原型时,网站宽度和高度怎么设置比较好
【页面尺寸】网页的尺寸受限于两个因素:一个是显示器屏幕(显示器现在种类很多,17寸为主流,正在朝19寸及宽屏的方向发展,但目前也有为数不少的15寸显示器)另一个是浏览器软件(我们常用的IE、遨游、Friefox等)
【页面高度】高度是可以向下延展的,所以一般对高度不限制。对于一屏来说一般没有一个固定值,因为每个人的浏览器的工具栏不同,所以高度没有确切值。
【页面宽度】
1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001
如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。如果是800的分辨率一般都设成770。但也有设成760的。这些需要明白并且牢记,不然很可能做出来不符合浏览器要求。不过一般我们都会设定的再稍微小一点,因为有些浏览器加了插件或者其他的东西宽度会有变化,所以 800的分辨率一般设定760左右,1024的设定990左右。
网页设计标准尺寸参考:
1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间,就不会出现水平滚动条和垂直滚动条。
3、页面长度原则上不超过3屏,宽度不超过1屏,每个标准页面为A4幅面大小,即8.5X11英寸。
4、全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px (另外120*90,120*60也是小图标的标准尺寸 )
5、每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K
【网页广告尺寸】
1、120*120,这种广告规格适用于产品或新闻照片展示。
2、120*60,这种广告规格主要用于做LOGO使用。
3、120*90,主要应用于产品演示或大型LOGO。
4、125*125,这种规格适于表现照片效果的图像广告。
5、234*60,这种规格适用于框架或左右形式主页的广告链接。
6、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。
7、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。
8、88*31,主要用于网页链接,或网站小型LOGO。
【广告形式 像素大小 最大尺寸】
BUTTON 120*60(必须用gif) 7K;215*50(必须用gif) 7K
通栏 760*100 25K 静态图片或减少运动效果;430*50 15K
超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告 336*280 35K;585*120
竖边广告 130*300 25K
全屏广告 800*600 40K 必须为静态图片,FLASH格式
图文混排 各频道不同 15K
弹出窗口 400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮 80*80(必须用gif) 7K
流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)
【网页中的广告尺寸】
1.首页右上,尺寸120*60
2.首页顶部通栏,尺寸468*60
3.首页顶部通栏,尺寸760*60
4.首页中部通栏,尺寸580*60
5.内页顶部通栏,尺寸468*60
6.内页顶部通栏,尺寸760*60
7.内页左上,尺寸150*60或300*300
8.下载地址页面,尺寸560*60或468*60
9.内页底部通栏,尺寸760*60
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*100
④ 如何用Axure规范地画出APP原型的交互
创建属于自己的元件库
原型制作工具的核心功能无非就是通过元件的堆砌组合,来展示产品的目标形态和效果。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原型
原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多,我们公司大多的产品用的都是Axure。用这个软件,高保真或者低保真原型都能做的很好。那么,怎样的原型才适合团队交流?
毕竟绘制出来的原型并不是只给自己看的,还要讲解给团队里的成员,UI/前端/开发。特别是进行小组内评审的时候,通过演示原型,需要向他们讲解产品内部的逻辑、具体的页面、动效等,还要向他们询问设计是否合理,能否实现等,静心倾听他们的意见。这时候,原型就是一个思维传达的工具,将你的想法,翻译并灌输给你的团队成员。同样,原型是也团队的交流工具,针对绘制出来的原型,每个人都可以谈谈自己的看法,交流思想,完善原型不足的地方。
所以原型绘制出来,必须要有基本的交付标准。
一、原型设计的基本交付标准
1.清楚------让他人能明白产品是干什么的,包括什么功能,有哪些页面。
需要清楚地表达页面有哪些内容模块
需要清楚地表达模块内部的构成元素
2.清晰------让队友知道具体有哪些要求,指导他们如何做
【1】功能操作
某一个功能可以进行哪些操作,点击/鼠标悬浮/拖动等操作,以及页面会有什么反应。(方便开发的工作)。
【2】操作路径
有一些操作是要跳转页面,跳转的路径需要标清楚,跳到哪去了,涉及哪些页面,页面之间是如何联系的。防止用户迷失。
【3】点击状态
一些链接,按钮,需要标明它初始的时候是什么样,鼠标悬浮有什么效果(颜色/下划线/提示语等),点击的样式变化,以及点击后的样式。(这些可以为前端的工作提供方便)
【4】信息组合
相关的信息需要组合在一起,比如一些基本信息,姓名/性别/年龄等最好放一块,不要分开。不相关的保持距离。
【5】位置排序
页面的布局应该适应用户的习惯,浏览方式、工作任务。突出强调重点,方便用户的工作。一些数据可以思考一下它们的排列方式,按什么排序,能方便用户查找,仍旧是“以用户为中心”。
3.周全-----产品的各种细节,不颂搭肢能疏忽
【1】交互状态
某些重要的操作,交互样式是怎样的,效果如何,最好单独抽出来做成高保真,演示给他人看,让他们对产品有深入的体验和感受。
【2】数据显示
原型上涉及的相关数据做好有真实的案例,将需要获取的关键数据全部展示出来,比如一篇文章,需要的数据:作者、发布时间、浏览量、喜欢数、收藏数等,方便开发准备必要的数据接口。
【3】异常考虑
需要考虑一些突发情况的应对,比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。
【4】配套页面
产品里的一些功能可能和其他产品有关联,需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。
4.基本审美
【1】对齐
【2】间距
【3】颜色
【4】字体
推荐大家看看《写给大家看的设计书》这类易上手的书籍。
5.基本规范
【1】页面尺寸
web的宽度有960px、1000px、1200px,App有安卓、iphone5、iphone6等,需要与已有的产品保持统一的尺寸。
【2】字体大小
标题可以是18px或者16px,内容可以是14px。既要考虑用户是否看到清,又要考虑美观。
【3】颜色
原型不要有太多的颜色,坚持黑白灰,除非要突出,可以用其他的颜色。
【4】弹窗
弹唱的样式最野世好做统一,弹窗名+内容+操作按钮+关闭
【5】元件
不在原型正文添加过多的截图、图标样式,会对UI的设计造成干扰。
二.Axure的快捷使用技巧
工欲善其事枝悄必先利其器,工具使用的越娴熟,才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷操作:
首先在顶部菜单栏中找到<视图>,把需要的部件显示,就可以设置了。
1.组件库的建立(能提高效率,保证产品层面的统一一致)
2.母版的使用(适用于多页面通用的部分,修改后,集体自动更新)
3.设置页面样式(页面的字体、背景能一次性设置好)
4.元件的交互样式
5.元件组合
把要组合的原件用鼠标框在一起,按住ctrl+G,成为组合后就可方便复制拖动了。许下按住ctrl+shift+G,也可以点击选中后,点击下图的两个图标来组合和取消组合。
6.对齐、居中、平均分布
选中要对其的内容,选择一种分布样式,就能快速得到整齐的原型样式,而不用一个个手动调整。
7.输入框类型的设置(预设好类型)
一些输入框,可能需要设置默认文字,可以直接选中了输入框后,在原件属性里设置提示文字和一些限制。
8.元件的提示语
有些文字需要有鼠标悬浮显示提示语的动作,可以直接在原件的属性里设置“原件提示”,输入要显示的内容,即可。
三、制作原型的过程
1.梳理功能点-------------------将需求转化为功能清单,标出重要等级(前提是需求已经梳理清楚)
2.规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面,每个页面包含哪些元素
3.整理原型目录----------------用Axure添加原型的几个页面,考虑页面之间的跳转关系
4.设计页面的布局(打格子)-----用不同的色块,方框来表示这部分将要表示什么板块,设计好页面的布局
5.填充各模块的细节----------在方框里把具体的信息和数据填充完整
6.增加少量的交互动作--------------体现在一些涉及到任务的操作
7.页面注释-------------完善交互说明
8.审查自检------------------功能是否覆盖完全;页面有没有缺失;流程是否明确;状态是否完备
四、原型应用中的经验
因为我多是负责后台系统的优化,所以是直接和开发打交道,如果涉及前台页面,就需要UI先将原型做成图片,再由前端制作含有动效的demo,开发再按照demo开发。但是不论哪种,绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。
第一次负责项目的时候,我用的是高保真,画完整的原型就花了一星期多,各种动作和交互,恨不得做个虚拟的产品。但是和开发讲了原型后,等来验收项目的时候,才发现,开发大部分都没有按照原型上的动作来,甚至连细节都有遗漏。一个个催着补上后,我开始思考这种方式是不是不太划算,太费事费力,结果又不太好。
后来我看了我上级绘制的原型,都是以静态页面为主,可以说是低保真,但是每一种情况都详细地用图文描述清楚,点击之后是什么样子,将要获取什么数据,失败了会怎么样都有。而且这种方式,完成的特别快。于是我就选取低保真模式的开始画原型,结果发现,开发有时候并不能将一些动作做好。
于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开,将整个产品的逻辑都直接呈现出来,再在某些需要重点描述的地方用高保真描述深入。所以,我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说,低保真模型足够了 。
每个产品绘制原型的习惯和风格都有所不同,但关键还是需要进行小组会议来向队友们讲解原型和逻辑,在开发的过程中,需要多沟通。
另外,分享大家关于AXURE学习的网站,可以在里面找到免费的软件安装包和教学课程。
https://www.axure.com.cn/
如果对文章感兴趣,欢迎评论留言,坚持喜欢的事情,加油~
⑥ 怎么用axure做一个app原型
一、原型默认整体大小为640*960即可,位置为x为0、y为0起始,这样即可 二、下拉效果可以冲尘做,用动态面板来完成,可以上下拖拽。 三、好稿可以友判孝放在web服务器上,就可以通过http的方式来访问。
⑦ axure怎么做web页面高保真
一般来说,axure的原型分成两种,低保真和高保真。低保真就是线框图,主要作用是给研发交付,做开发的参考,只要能能实现讲清楚页面的功能和逻辑就可以了,特点是高效、快速;而高真原型主要是在产品初期给公司领导、用户演示,除了要完成低保真的功能,对于原型的界面风格和交互都有要求,高保真的原型特点是效果好、更接近真实的产品,但是开发起来很费事件。这两种原型适用与不同的需求场景。
对于高保真来说,主要要实现以下几个方面:
1、页面布局尺寸要准确,最好能够实现自动适应屏幕;
2、页面风格,包括颜色、字体、行间距等,都要按照规范设计,这个阶段,往往需要UI的介入;
3、交互要能够实现,至少要实现所有的菜单功能,并且要实现主要细节页面;
按照上面的要求,高保真的原型除了基本的原件之外,一般都要使用到动态面板、中继器、内联框架等元件,需要产品经理能够对这些元件掌握的比较好。
总得来说,实现一个高保真的原型是比较复杂的,对于新手来说,还是比较困难的。
不过也有一些现成的pc端的高保真原型框架,可以下载直接使用。
⑧ 通过axure做原型设计生成的html代码可以让开发直接用吗
不可以,Axure 生成的只是原型,是在产品制定时供大家参考了解项目用的。
Axure输出的HTML文件不能直接用于前端代码开发,Axure为了模拟交互效果,使用了大量的JS,其中有很多是用不着的内容,前端代码需要完全重写。
Axure输出内容不能取代实际开发中的任何部分,只是为了提高沟通效率。
(8)axureweb原型规范扩展阅读:
Axure的特性
1.鼠标及键盘交互功能:
支持更多的新特性包括 OnDoubleClick(双击), OnContextMenu (右击),OnMouseDown(鼠标按键按下), OnMouseUp(鼠标按键松开), OnMouseMove(鼠标指针移动), OnMouseHover(鼠标指针经过), OnLongClick (鼠标长按), OnKeyDown(键盘按键按下), OnKeyUp(键盘按键松开)。
2.演示文档:
支持HTML5新特性,以及更好的支持手机演示特性。
3.新增部件样式控制:
Axure7对于部件修饰功能有较大的改善,包括支持圆角、阴影、描边等设置。
4.更细化的部件属性:
更为丰富的部件属性,可以设置各种形状、样式,较Axure RP 6.5单调的形状而言,也是一种惊喜。
5.更多交互条件:
包括关闭指定窗口、设置锚点以及更为灵活的事件触发条件,对于移动互联网产品原型设计有很大帮助。
⑨ 如何进行web页面原型图设计
最后半天心不在焉拖拖拽拽把各个部分都搭建好了,可是做出来的页面惨不忍睹,自己都没勇气打开。晚上回家后和邻居又讨论了三个小时,最后熬夜把原型图完成。虽然最后原型图也没有被采纳,但是这次原型图居然受到了表扬,领导说我的原型图有了提升。今天就写下这篇文章,为这段时间的工作做一个总结。原型设计前:①�0�2�0�2 重点突出内容:要清楚明了页面需要突出的内容是什么,这个在前期的讨论中一般就已经确定;②�0�2�0�2 第一功能目的:除了内容以外,功能方面需要突出的是什么?如引导注册或像下一级页面引导流量。③�0�2�0�2 如果是改版要考虑改版要解决的问题是什么?对于前一版页面存在什么问题 画原型图要考虑:④�0�2�0�2 内容板块如何划分,页面的内容主要分成几个模块,每个模块内存放的都应该是一些相近的内容;⑤�0�2�0�2 模块与模块之间的关联性:每个模块与其相近的模块之间应该有一些逻辑上的关联性,而不能随意的进行拼接;⑥�0�2�0�2 页面的流程:模块与模块的上下承接关系,模块与模块应该上下存在某些逻辑上的连接性。 页面完成后:完成原型图后一定要进行检查,主要从以下三个方面进行检查:⑦�0�2�0�2 内容是否完整:对比框架中的每一部分内容检查是否完整;⑧�0�2�0�2 第一屏是否把最重要的内容展现出来:页面第一屏以外的内容基本都是辅助内容,如果不能在第一屏就把内容全部展现,基本上就等于内容不完整;⑨�0�2�0�2 功能是否实现:想要表达的功能是否在明显的地方表现出来;⑩�0�2�0�2 流程是否顺畅:把相应的流程走一遍,看是否流畅。 注意tips:①�0�2�0�2 未完成的作品拿出来讨论页面不完整不代表思想不完整,即使是不完整的页面,里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有属于自己的清晰思路,对内容、功能和流程自己要先想明白,可以列举一些具体的问题来辅助理清自己的思路。③�0�2�0�2 坚持自己的想法每一个人都有自己的想法,只要你理清自己的思路,就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑,形成自己的思路。 关于工具和作图:之前花了很多时间去研究axure,是学会了一些作图的技巧,可是渐渐发现这些对页面的提高基本不大,我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法,等到想法成熟之后不妨慢慢的考虑工具的深入弊告御,太多的考虑技巧租岩方面的问题反而会模糊视线。思考的过程和画友链图的时间可以在7:3都无所谓,前期的框架和流程思路想好后,后面的原型图也就水到渠成了。
⑩ AXURE原型需要做到什么程度
AXURE做原型分为低保真、高保真两种,再复杂就是有交互效果的原型。
低保真就是只有线框图。 纯粹的只用线框来表示功能,没有做任何的渲染。 这种低保真我认为适合在公司内部最初梳理功能、流程,并且不需要想客户演示时候使用。
高保真原型。 下面我认为都是高保真原型。 前面的只是简单的很白色渲染,后面是用真正的图片渲染。 这两种可以根据客户类型和项目时间来决定出那种。 前面好处是更接近真实效果,而且不影响美工视觉,出的速度很快。 后面的对美工影响很大。很可能会完全照做。
还有一种就是可以交互的。比如你输入用户名和号码后,点击登录会跳转到首页。只是数据是静态数据。这种原型做出来要花很长时间。但却是搜集客户需求,避免开发成本的最好原型。因为是可以交互的,最大程度还原产品。 另外原型就是拿来不断修改的,并不是做了一次就定下。之所以做原型就是开前确定需求功能,避免因客户需求变动返工。
高保真的原型图的用途有几大方面:
一、开发人员需要参与高保真原型图的设计当中,同时,他需要对这款产品的交付期作一个判断,而产品经理根据开发人员的判断,对于整个产品的周期做一个监控;
二、高保真原型图还需要给你的总监以及老板看,让你的管理层知道真实的产品的样子;
三、用于产品原型测试,把你的产品创意真正的传递到用户眼前。相对于写在纸上的产品设计文档,产品原型更加有效,因为这可以让所有的测试人员以及用户知道你的产品创意所在。 在制作产品高保真原型的时候,你需要密切的与产品交互设计师进行合作,以将产品设计的尽量的简单和易用。产品经理与交互设计师最好能在同一处的办公室办公,因为这样能方便对于产品的交流。
在有些公司,产品的交互设计以及产品高保真原型通常也由产品经理来完成。高保真原型的制作涉及的东西更多,不仅仅只是核心功能的设计,有时候一个按钮是设计和文字的描述就很要命。相信很多产品经理都设计过一些按钮,如果一个按钮既要表达状态也要表达操作,那么这类的按钮是十分费神的。
高保真原型的制作软件目前较为流行的是AXURE,这款软件设计绝大多数的交互内容。并且使用起来也十分方便。笔者也十分喜欢。在完成高保真原型图后,你需要做的就是,可用性测试,也就是确定你的设计方案能满足用户一看就懂的基本需求。
原型的测试有很多方式,如果某些产品已经拥有自己的用户群,可以直接在用户群当中进行测试,如果你的产品没有,那么简单点,公司的同事就是你的测试用户。在公司中,找出你的目标用户,用你的高保真原型图让她们用用。
制作一个高保真原型图很耗时间的。但是用户测试也是必须的,在产品还没有进入开发前做用户测试会让你的产品后续的逻辑更加清晰。无论是客户端产品还是web端的产品,能用高保真原型做用户的可行性测试最好还是用原型进行一次的测试。