旅游app产品原型怎么做

Ⅰ 如何快速进行网站/App产品原型设计

原型设计是整个产品面市之前的一个框架设计。以网站注册作为例子,整个前期的交互设计流程图之后,就是原形开发的设计阶段,简单的来说是将页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。
画原型只是一个由想法变成图纸的过程，类似于建房子，在落笔之前更要想清楚建成什么样？
工具方面目前用的比较多的有axure、mockplus、墨刀，还有很多，直接搜索就能找到

Ⅱ 如何快速进行网站/App产品原型设计

方法/步骤
1、对用户需求进行文字描述。
用文字描述这个软件，需要哪些功能。要怎样的结构，开始是怎样，过程是怎样，有哪些要注意的。（这阶段其实就是把重点给挑选出来，以免后续的产品设计过程中，遗漏了重点项目）

2、草图设计阶段。
这个阶段，可以天马行空，不用拘泥于传统。也就是自由创作，将思想，以图形形式表达出来。当然，不拘泥于传统不意味着就要排除传统。传统有传统的优点。在这里建议，创业如果已有很多创新点了，那么设计上面的创新可以部分忽略。遵照传统也被允许。PS:草图设计阶段并不一定就要用到Axure，遇到的画不出来的元素，用文字表达即可。

3、确认主体结构。
这个阶段，是将产品的使用逻辑优化好。配合用户使用习惯，行为特点，将结构弄得简单易用而内容丰富。这个阶段就要用Axure开始进行操作了。而显然，这个阶段我们的Axure如果含有很多方便添加的元素，如Iphone外壳等，进程就可以快很多。所以，最好提前到网上下载相关的axure元素库。

4、美化原型。
这个阶段，首先要确认自己需要哪些地方做美化。然后能搜索到的就搜索，不能搜索到的，就只能用Photoshop或其它绘图软件进行编辑了。当然，有的公司可以出钱请视觉设计师设计，也是很快捷的一个办法。

Ⅲ 如何用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设计规范并要有自己一套交互风格样式。

Ⅳ App 产品原型设计用什么软件

那axure和腾讯cdc的uiddesigner，还有在线的fluidUI也可以考虑。其他好像没有了吧。但除了axure，后两者所谓的交互其实都是不同的界面截图之间的切换，说白了就是多节点式结构的ppt，不是真正的交互。axure的思想更接近实际开发，比如通过master实现界面元素的封装复用，条件判断，函数，变量。这些功能除了开发工具，原型工具还有谁能比得上axure吗？ app原型相比网页，界面结构简单，但交互复杂得多。界面上的div也不是平铺的，为了有效利用空间会用到很多层叠，卡片式之类的展示方式。要做这类高保真可交互原型，我觉得非auxre莫属。比如一个tableview滑动到顶部刷新，底部回弹，不借助开发只有axure能做出来。 我从07年开始用axure，曾经一度认为做网站原型，axure已经不需要再怎么改进了。自从做app之后，觉得axure有点根不上时代，但试了其他工具，还是觉得auxre最合适。仔细做过几个以后，我觉得axure还是完全适合做app原型的。做好以后分享也方便。放到内网，或者axshare上，或者有一个html runtime的app，可以在设备上直接浏览axure输出的html。 当然axure作为一个工具，不可能每个环节都是最好的。比如我希望axure能借鉴一下其他工具和开发思想，把UI和素材分离出来，就像换皮肤一样，一个控件可以随便更换图片素材。这样pm或者交互用最简单的线框设计，确定交互以后，可以把设计师的图贴上去，这样就100%保真了。 axure对app设计不友好或者说最落伍的地方，就是支持的事件类型太少。交互上无法模拟出多点触摸，无法模拟设备运动，无法模拟各类传感器……或许对一个原型工具来说，要求太高了。

Ⅳ App 产品原型设计用什么软件

分享一些我切身体验后的一些原型设计软件，你可以根据自己实际需求来选择~

• Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。

• 墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。

• Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更精细的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）

• Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。

• POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。

• Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

• Moqup：支持线框图，原型，和逻辑流程图。里面组件数量蛮多，像表格这些也有，做web项目比较便利。支持在线预览和分享，支持评论，不支持标注。上手较容易，不过没什么模板，UI有点过时感。

希望对你有帮助~有疑问的地方欢迎追问！

Ⅵ App 产品原型设计用什么软件

现在市场上有很多啊，不同工具特色也不一样。

像我们公司，更看重的是原型制作过程简单快速， 沟通方便，所以，选择的就是最近比较热门的摹客Mockplus.

App原型制作的时候，模板多，移动端的组件、组件库以及图标库也丰富，简单拖拽组件或修改模板，就可以快速制作有灵活交互的原型。 测试、演示、沟通以及反馈收集都可以实现。
整个团队还可以在线同时协作、完成一个原型，同步测试和迭代。

Ⅶ App 产品原型设计用什么软件

很多产品原型设计软件，下面分享一些以及个人对此的看法总结：

• Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。

• 墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。

• Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更精细的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）

• Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。

• POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。

• Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

• UXPin：UXPin是DeSmart团队开发的一个在线可点击原型设计工具该软件，拥有大量用户界面元素（包括web，iOS，Android等），可以共享预览，注解和实时的协同编辑。另外该软件还提供了版本控制和迭代功能。缺点仍然在于国外服务器和价格问题。

这些产品原型设计软件都比较常见，你可以根据你个人需求来选择，反正我使用的是墨刀，它真的省时省力提高了我的工作效率。希望对你有帮助！有疑问的地方欢迎追问~

Ⅷ 如何高效输出移动app产品原型

一、输出以界面为单位的产品流程图
高效输出，首先要保证产品的整体思路要正确，这点可以从产品流程图中体现出来。移动产品需要做到聚焦，因为手机界面的大小，用户的碎片化使用等等，所以一个界面上必然不可能出现太多的内容和行动点，这就保证了我们可以用最简洁的方式来画流程。以界面为单位，定义 “界面标题”和“主要内容”，如下图所示：

如何利用起这样的界面单位来画流程，下面以一个app的登录注册为例：

这样的一个产品流程图，可以快速了解产品有多少界面，检验用户路径是否太长，形式简单，也方便讨论修改。
二、使用可修改的基础原型控件
如何快速产出高保真原型？一套备用的基础原型组控件必不可少。大部分设计师一般使用axure来完成产品原型，所以从协同合作的角度，本文专门在axure里制作了整套最常用的移动产品组控件。设计师只要改文字，改颜色，摆位置就可以完成简单的高保真原型。 基础组控件截图如下：下载地址

以此控件为基础，在之前提到的app登录注册例子，快速组件高保真原型，如下图:

关于设计上很多细节，大家可以参看书籍【方寸指间——移动设计实战手册】，里面涉及到很多最基本的移动设计知识。
三、制作可点击的动态原型
完成高保真原型，根据流程图，可以很方便制作出在手机上可体验的动态效果，让产品人员或则用户真实感受app实际的效果。这里推荐一个特别简单的方法，登录www.flinto.com，完成注册，将高保真原型以图片的方式倒入，通过链接和转场方式选择，就可以很方便在手机上查看。网站提供了比较具体的指导，大家可以直接查看。

看完这篇文章，小编还是要唠叨一句：交互原型，重在把设计思想传达出来，逼真的效果固然很重要，但千万不要沉迷于一些看起来很酷炫的效果，往往一句注释就可以说明清楚的问题，干吗还要花几小时甚至更多的时间去制作很逼真的效果。

Ⅸ 如何用axure画app原型图

多学习，多练手

画好原型后

1.下载Axure

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

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

4.设置说明见下图：（页面大小显示我的这个设置是按320×480的大小，默认不缩放）