整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
直以来Axure在对移动端原型设计方面的支持都不是十分理想，它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件，但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法，我们同样可以通过Axure制作出非常完美的移动端演示原型。
首先你可以通过以下地址在电脑浏览访问我设计完成的移动端原型模板。
在开始设计原型之前我们需要做的第一步是选择合适的设计分辨率，目前使用Axure设计移动端原型时普遍采用的是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸，这两种尺寸分别是由目前主流的移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比缩放而定义出来的，同时也是Iphone7和Iphone7 PLUS的逻辑分辨率。
有朋友可能会疑惑在设计原型的时候为什么不直接采用移动设备实际的分辨率呢？因为这主要考虑到设计时的便携性，毕竟我们输出的原型主要是用于演示而不是视觉稿，所以不需要达到那么高的精度，另外如果按移动设备实际的分辨率进行设计，在对元件进行编辑和排版的时候会是一件很耗费时间的事情，同时也不方便在电脑浏览器上进行查看。
本人在进行原型设计的时候一般用的是375px*667px这个分辨率尺寸，因为Axure常用的元件默认的字号一般是14px或18px，这两种字号也刚好匹配Iphone7上常用字号的比例，而且这个分辨率尺寸在电脑浏览器上刚好一屏就可以显示完整。
但是如果你采用375px*667px这种分辨率输出的原型在Iphone7 PLUS上进行浏览时，两边会出现部分的空白区域，不过它也已经基本适配各种主流移动端设备了，所以采用这个分辨率尺寸是综合衡量之后的选择。
上面已经介绍了为什么选择375px*667px作为移动端原型设计分辨率尺寸，在开始设计之前我们需要先按照这个尺寸在编辑区域中定义好内容区域。我一般是使用辅助线来定义内容区域的，例如下图是用辅助线定义好内容区域的效果。
事实上我们在设计时其实不用去限制原型的高度，因为在通过移动端设备进行浏览时可以通过滚动页面查看超出高度部分的内容，这跟实际的移动端产品的操作方式是一致的。而在原型设计的时候，我们还是需要拖一条用于标识原型设计高度的辅助线，它的主要作且是为了标识出首屏的区域范围，这对于布局选择是有一定的参考价值的。
辅助线的作用除了用来定义内容区域之外，同时它也能帮助我们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果，对于有对齐强迫症的朋友来说这个特性会感觉无比贴心。辅助线的基本使用方法：鼠标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就可以生成横向或纵向的辅助线，将辅助线拖动到对应的位置即可。
一般除了用辅助线来定义内容区域的之外，我还会新建两条纵向的辅助线用于标识界面左右两侧的留白区域。建议两侧留白区域用10px或者20px，例如本人常用的是20px，因此这两条辅助线的位置分别在X轴的20px和355px的位置。除此之外，我们的元件一般还需要设置左右各20px的填充，用来将文字的显示限定在界面留白区域内。
补充几点辅助线的使用小技巧：
通过以上几点介绍了我们如何使用辅助线来建立了一个基本的布局规范，而以下是我总结的其它关于移动端原型的基础设计规范。通过掌握这些规范或技巧，可以使最终输出的原型效果更美观和标准，而且能让你的设计效率大大的提升。
另外，这些规范或技巧同样基本适用于WEB端的原型设计，不同的主要是设计分辨率和内容区域的定义，以后有机会我会进行整理和分享。
为了方便进行设计我习惯将内容布局向左对齐，而在演示时内容居中显示更符合浏览习惯，所以需要在页面属性设置中将页面排列设置为水平居中,另外，页面的背景色推荐设置为#F9F9F9。
导航栏是移动端APP中最常见的元件之一，它的位置一般是固定在界面最顶部的，所以建议将导航栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“上”，具体设置如下图：
标签栏或工具栏的位置一般是固定在界面最底部的，同样我们也需要将标签栏或工具栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。
通过这样的设置以后在有标签栏或工具栏的页面中，如果你的页面内容已经超出了一屏的高度，我们通常需要在内容正文区域的底部放置一个与标签栏或工具栏高度一致的热区元件当作占位符，它的作用是用来解决原型演示时标签栏或工具栏会挡住页面内容的情况。
模态窗口交互是移动端产品中最常见的交互方式之一，它主要用作显示系统的重要信息，并请求用户进行操作反馈，例如：删除某个重要内容时，弹出对话框进行二次确认。在原型中我们可以通过简单的设置，实现跟移动端APP一致的模态窗口效果。
移动端模态窗口演示效果：
首先同样需要新建一个模态窗口的动态面板，在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。然后再在触发模态窗口的交互事件中按以下方式进行设置，重点是勾选“置于顶层”选项和设置“灯箱效果”，灯箱效果的背景颜色和透明度可以根据需要进行自定义。关于具体的设置和演示效果，可以参照我将在后面推荐的移动端元件库。
到此为止已经介绍了关于移动端原型设计的一些规范和常用元件及交互效果的设置，那么当我们的原型设计完成以后在生成HTML之前我们还需要进行几项简单的设置。
设置位置：发布—生成HTML-移动设备，在界面中勾选“包含视口标签”，设置宽度为：device-width，设置缩放为：no，其它选项为空就可以了。
另外，你还可以设置主屏图标，然后在IOS设备中通过safari浏览器打开原型，就可以直接将它添加到主屏幕中了。通过主屏访问原型时将不会显示浏览器的相关工具界面，最终的演示效果几乎是跟操作实际的APP是一致的，你甚至可以根据需要定义状态栏的颜色。
设置方式：启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。
添加到主屏和最终运行时的效果：
按照上述的设置之后，你将原型生成为HTML文件之后上传到你的服务器或原型托管平台，通过手机访问原型链接演示即可。
如果我们设计的移动端原型不需要考虑在手机上演示的场景，仍然可以参照本文中相关的规范。我一般会在编辑区域放置一个设备模板，新建一个内容框架的动态面板用来放置页面的主要内容，而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外，内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”，这样当框架的内容超出时可以拖动滚动条进行查看。
通过添加设备模板的设计区域效果
通过使用设备模板可以让输出的原型效果更标准和规范，如果我们在编辑界面中放置了设备模板，则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置，你只需要拖动到设备模板对应的位置并置于内容框架上方即可。
如果你需要获取相关设备模板的图片，请通过下面的下载地址获取到。这套素材中包含了iphone、Android、IPAD等各种机型常用模板，而且都已经按标准尺寸定义好，只需要直接下载使用即可。使用方法：在创建Axure原型文件时建立一个模板母版，然后将设备图片导入到母版中，再将母版拖至设计界面区域。
常用移动端设备模板素材
最后分享的是AxureUX交互原型移动端元件库精简版，这套元件库基本是按照本文所介绍的相关规范和标准进行制作的，共由常用组件、信息输入、信息输出、信息反馈、综合系列等五大元件类型组成，其中还包含各类移动端基本元素、动态交互组件，以及各类常用界面模板，能助您快速的输出友好美观的移动端交互原型。
相关截图：
本文由 @windir 原创发布于人人都是产品经理。未经许可，禁止转载。
起点学院】产品经理实战训练营，北京、上海、广州、深圳、成都、杭州同时开课啦！
推荐语：@Akane_Lee ：这篇是最简单的过场设定、最偷吃步骤、不需要技术，只要会写简报 PTT 或是 Keynote 就做的出来，所以连 Planner 和 PM 也保证上手无问题 >>>
动态效果、转场动画对UI的戏份越来越重…其实一直都很重只是大多用在游戏上，功能型 App 运用这种技巧最近越吃越凶，且制作真正能装在手机、拿在手上操作的拟真 Prototype 对不会写 Code 的设计师来说有难度。我找到好用的方式可以解决这个问题：Hype3＋Frameless。
会选 Hype3 的原因在《Note：Prototype 制作软件》有提过，就不多说，直接从范例开始吧。
（好像得搭梯子才可以访问，木有梯子同学可参见：《Sketch神助攻！无代码做动效神器Hype3入门教程》）
示范： iPhone 内建的音乐 App
1.打开 Hype3 ，官网下载的试用版可以用很久，还有简中接口，先抓下来玩看看，喜欢再买。（这套定价也很便宜！）
2. 既然是 iPhone 的 Prototype，来改一下场景尺寸。我用的是 640x1136px，画质比较细。
3. 因为画面是长型的，所以我把时间轴和图层从下方挪到右边去。
4. 手机截图，直接扔进 Hype3 里。
（表示做自己的东西实可以直接拿 Mockup 的 jpg 或 png 图直接上！）
5. 来做「动作触发的范围」，在图上先拉个矩形。
6. 右边选单设定无填色、无笔划。
7. 下方 Tab Bar 第 2 颗的位置就有一块透明的区域，也就是「动作触发的范围」。
8. 设定动作，虽然手机上不会有光标，但我还是喜欢把可触发的区域光标换成手指，在 Browser 预览时可以快速确认自己Link设对了没有。
9. 记得，所有场景、图层什么的，要重新命名成有意义的名字，当页数和组件一多时才不容易出错。
10. 像 Keynote 一样，可以一次做了好几个组件，选起来好拷贝到其他场景贴上。
（图层前后会影响操作和组件显示，如果有时候发现某个地方怎么点都没效果、或是看不到，检查下图层顺序。）
11. 点着个 BTN、播放中的页面是由右往左推进。
12. 所以记得把过场动效改成「推动」（由右往左）。
13. 秒数我习惯设 0.3s，依个人感觉不同，请自己试看看。
14. 这个 Btn 点下去、会由下往上出现歌曲列表页。记得设定「推动」（由下往上）。
15. 点了「完成」后，页面会由上往下。
（当很多页面都有一样的回前页、Tab 的Link要处理时，可以先做完一页，剩下 Copy、Past 就好。）
选 HTML5、活页夹，档名命名好。
会出现一个 HTML 档和一个文件夹。把这两个档传到服务器上，就可以用手机开网址测试了。
如果想预览自己做的如何，工具栏上有个 Chrome 或 Safari 的 icon，按下去就是了。不过它不是实时的，每次修改存盘就要再点一次这 icon 重新产生预览，直接点 Browser 重新整理看到的会是修改前的样子。
这是个连「状态栏」都没有，真正全屏幕的浏览器。免费！
输入你的Prototype网址，就可以像真的 App 一样，用手机做测试了。
祝顺利！
作者： @Akane_Lee
来源：优设网
原文地址：blog.akanelee.me
型工具是十分实用的工具，它可以帮助你完成从粗略的设计概念到产品完全形成的全过程，除了应用简单，成本也比较低廉。
下面我们就为大家介绍几款用于桌面或移动设备构建网站和应用的原型开发工具。这其中有些工具具有很赞的用户体验，包含了设计元素的动画、手势、转换和自定义内容，也有快速原型和模型工具提供各种模板，轻松地将应用程序从理念实现到工作模式。最重要的是，大多数的工具中都有免费的基础版本可供用户使用。
Adobe Experience Design CC
作为Adobe Creative Cloud套件的一部分，Adobe Experience Design是一个用于创建、共享网站和移动应用设计的一体化工具。绘制，重用和重新混合元素以创建线框、视觉设计和原型；添加交互无需离开体验设计，并在桌面和移动设备上实时预览；与团队成员分享互动原型，以获得即时反馈和协作。
价格：对于单个应用程序Adobe Create Cloud每月19.99美元，完整版本的费用是每月49.99美元。
Webflow
Webflow是一个在线原型设计工具，无需编写代码即可设计应用程序。用户可以从头开始设计，也可以从一百多个网页和应用模板中选择应用。Webflow包含一系列用于用户体验设计的触发器、效果和动画，为了帮助用户快速完成设计还包含了许多预构建组件。使用Webflow不仅可以构建店铺，还可以利用第三方电子商务平台处理购物车和付款。另外，Webflow与Zapier集成，可以将网站连接到500多个应用程序，如Slack Drive和Trello，MailChimp还可以自动化构建列表。
价格：两个unhosted项目是免费的，付费服务大约是每月35美元。
InVision
InVision是一个在线原型、协作和工作流平台。支持设计文件上传，并通过添加动画、手势和转换，将静态屏幕转换为可点击的交互式原型。如果确切来说，InVision提供的不是准确的线框图，而是一个快速原型的环境，可以把你的UX/UI草图快速连接起来。数字型的线框图和高保真的设计可以帮你测试app的工作情况，同时该工具还支持协作和分享功能，生成的在线原型可以支持任何人在产品原型的任何地方评论，便于准确的交流。
价格：只创建一个项目，InVision是免费的，升级为高级用户之后，每月15美元。
HotGloo
HotGloo是一款为传统软件以及富互联网应用软件制作产品原型的在线工具，主要用于为Web，移动和可穿戴设备构建线框。HotGloo可以随时随地在任何移动设备上编辑、审查和测试，甚至可以在其间添加笔记和注释。为了便于构建和测试交互，HotGloo中有超过2000个元素、图标和用户界面小部件。另外，HotGloo在设计之初充分考虑了学习曲线的问题，不仅有一大批教程和入门文档，甚至还配有可靠的支持团队。
价格：HotGloo的价格是分梯度的，2个活动项目为每月13美元，6个活动项目为每月27美元，15个活动项目为每月54美元。
Marvel
Marvel是一个app原型图在线制作工具，大家不仅可以借此设计用户界面与图标，同时也能够将来自本地、Dropbox以及Google Drive的屏幕设计添加为“热点”。只需数次点击，大家就能将各屏幕联系起来以构成交互式移动及Web应用。除此之外，用户还可以添加转场效果、添加手势（如滑动或收缩），甚至也可以添加指向其它内容的链接，如视频、音频等等。
价格：基础版是免费的，付费服务是每月12美元起。
JustInMind
JustInMind是一个移动和网络应用程序原型工具，可应用在Windows和Mac OS中。JustInMind中大约有500个小部件可为任何应用程序创建交互式线框；可定义丰富的互动和条件导航体验；在线发布和分享整个线框，并获得用户和客户的即时反馈和评论。
价格：每人每月19美元。
Axure
Axure RP是一个专业的快速原型设计工具，能够高效率制作产品原型，快速绘制线框图、流程图、网站架构图、示意图、HTML模版等。支持从内置或自定义库中拖放元素以创建图表；支持交互样式设置，如字体、线型、填充颜色、阴影等等；注释图表和原型,以便指定功能,跟踪任务,或存储项目信息；支持图表和原型发布到Axure分享的云或内部部署。
价格：每人每月29美元。
PowerMockup
PowerMockup可以直接把PPT文件变成线框图工具，兼容所有的Microsoft office工具，能作为PPT的软件加载项随着ppt启动而加载。Powermockup提供较多丰富的组件，通过这些组件能够较快速度的搭建产品原型图。
价格：59.99美元。
Concept.ly
Concept.ly是一个用于创建交互式应用程序的协作和原型平台。支持从静态图片快速制作成为移动和网络的可点击原型；上传设计文件并将它们集成在一起创建工作应用程序的Web和移动端；支持单击共享，实时协作，能够标记特定区域并提供四种类型的反馈；即时通知，让您了解每个项目的协作以及各种编辑活动；持续跟踪设计的各个版本，除了可以查看设计是如何演变的，还可以恢复到以前的版本。
价格：基础版是免费的，付费服务为每月9.99美元。
Balsamiq
Balsamiq Mockups是一种软件工程中快速原型的建立软件，它的界面再现了在白板上草绘的快速、创造性的流程体验。Balsamiq Mockups用户测试早，在编写代码之前，就可以打印出你的原型或运行在线用户测试。Balsamiq不仅有web app和桌面版本，也可以作为wiki和bug tracker中的插件。
价格：89美元。
*请认真填写需求信息，我们会在24小时内与您取得联系。
