Axure 初学者如何做 App 产品原型？
产品经理的原型图可以不好看，但不能不完整。
一般来说，原型图的设计需要经过三种岗位人员的配合——产品经理、交互设计师、UI。
三种岗位在“画原型”这一工作上，分工如下：
- 产品经理：展现产品的功能点、业务流程、划分内容模块；
- 交互设计师：梳理跳转规则、布局、位置、层次；
- UI：决定产品整体风格、色调，添加其他视觉元素。
所以，对于产品经理而言，功能点、业务流程才是画原型图需要重点考虑的部分。
基于此，本文将问你详细介绍：
一、如何进行功能及原型规划
二、如何快速上手使用原型工具
三、如何画美观、高保真的原型图
一、如何进行功能及原型规划
刚入职的产品新人一般首先会接触偏执行的画原型工作——根据leader阐述的业务、流程、功能点、交互方式，然后用原型工具把leader的想法展示出来。
在原型展示阶段，产品新人通常都会进入这样一个误区：直接上手画原型，后面的页面需要与已经画完的页面产生交互时，才想起来之前页面存在没考虑清楚的细节，造成不断返工。
要走出这个误区，就必须进行功能规划与原型规划。
1.功能规划
在绘制原型图之前需要梳理原型逻辑、判断工作量、安排工作时间与规划。可以通过脑图、流程图等工具来梳理与规划工作。
通常，职景带项目过程中，会要求学员在画原型图之前作出以下规划：
1）画出MVP脑图，明确需要进行迭代的功能模块。
2）将关键的页面流程及用户使用流程梳理清晰，判断每个模块、页面之间流转的逻辑是怎么样的。
在实际的工作场景中，由于每个功能上线后会涉及到运营、市场、客服、财务等各个部门的内部协同工作，也会被买家or卖家、主播or用户等不同用户角色共同使用，所以需要画出泳道图来梳理各角色间的业务流转，形成业务逻辑的闭环。
3）判断工作量，作出时间规划。一共需要画多少页面，并给绘制这些页面排出优先顺序；进行时间预估与规划。
以职景学员规划的阿里健康迭代为例，在开始画原型之前，需要先规划出MVP版本。该同学为阿里健康迭代了会员体系。在MVP脑图中，该同学列出了颗粒度详细到最小功能模块的规划。
并按业务流转，画出了详细的流程图。
2.原型规划
在动手画原型前，需要对原型有个总览。列出哪些属于核心页面，哪些属于边缘页面。
以社区内的文章页面为例，文章的展示页面属于核心页面，而外部卡片（标题、头图）如何展示、入口如何设置、banner放在哪里，这些是属于边缘页面需要考虑的问题。
核心页面的优先级大于边缘页面。应该先规划文章所在的页面有哪些模块，包含多少种展现形式，如：文字、语音、图片、视频。核心页面确定之后才能确定外部页面需要展示哪些内容。
对于有跳转逻辑的页面，应该先画跳转前页面，再画跳转后的页面。
二、如何快速上手使用原型工具
1.常见的原型工具介绍
工欲善其事，必先利其器。
作为产品经理，选择一款趁手的工具是提高工作效率的第一步。下面为大家介绍最常见的三款原型工具：
墨刀
“离你的idea只差一个程序员”。
墨刀是我最早接触的原型工具，属于小白级的原型工具，上手速度很快，熟悉一下墨刀的界面就可以直接开始绘制原型图，对于简单级别的demo很是友好。
墨刀VS Axure，就像美图秀秀VS PS，是轻量级与专业级的对比。
优点：
- 云端操作、网页分享，避免本地维护大量rp及html；
- 对移动页面设计相当友好；
- 组件丰富，拿来即用。
不足：
- 仅能对单一页面进行注释，如需体现页面间的交互则需要升级付费版本；
- 难以实现版本管理。
Axure[MOU1]
Axure是一款专业的产品原型工具，能够快速创建线框图、流程图、原型和规格说明文档，可支持多人协作设计与版本管理。
相对来说，Axure自带的组件库能满足绝大多数用户的需求，提供强大的交互支持，对专业的需求度较高
优点：
- 有很好的目录结构，层级关系。以页面为最小单位进行显示，而不像其他某些工具按图形为最小单位显示，能够让产品经理清晰的掌握产品的信息架构；
- 能够实现较为复杂的交互。
不足：
- 基本应用容易上手，但多数功能为学习曲线陡峭的高级功能；
- 工作流程混杂，对使用者有一定要求。把控不当，输出的文档就较为杂乱；
- 未经过视觉优化的Axure原型美观度较低。
Sketch
Sketch有利于产品与UI的协同工作。对于较小的需求，在白板上画出原型后可以直接进入UI阶段。
优点：
- 方便画出高保真的原型图；
- 在静态界面的展示方面有一定优势；
- 无限画布，可以将各页面放到一个画布上帮助串联思考。
不足：
- 对于初学者，基础功能的学习成本较高；
- Sketch作为一款设计工具，会让使用者陷入“设计者思维”，在细节上耗费较多时间，拖延项目进度。
2.原型工具基础功能
产品经理一般只需要画出产品的线框图。即使是小公司的“全能型”产品经理，在进行产品设计时，也需要将自己拆分成产品、交互、设计三个角色。
所以在线框绘制阶段，只需画出静态的原型图即可。而画静态的原型图，只需理清基础元件的用法即可。以下为表单原型图，由“文字、文本框、单选框、下拉列表”等构成。
以下为某App底栏，由icon（首页、攻略、关注、我的）、基础图形（圆形、矩形）、文字构成。
只需要像上图一样，画出静态的原型图，并添加注释即可。
在实际工作过程中，某些文字注释解释起来较为繁琐而用交互体现更为便捷的部分，可以适当添加交互。但是，过犹不及，如果你的原型带着很多“炫酷”操作，不仅UI和开发不会一一详细查看，对于自己，也是做了很多无意义的工作。
所以，快速使用原型工具，只需要学会以下简单的操作：
1).如何插入文字，调整文字的格式、颜色等；
2).如何插入形状并调整样式；
3).如何插入图标。图标不一定需要自己绘制，可以在矢量图库进行搜索，能够表示含义即可。
3.交互学习
交互不是产品经理的必备技能。但和“产品经理是否需要懂技术”一样，产品经理能够懂交互是一件锦上添花的事情。
有些公司的产品与交互是由不同的人完成的，但在一些小公司，产品经理也要负责交互的设计甚至视觉的设计。产品经理该把交互学习到哪种程度，取决于职责的边界和个人对技能扩充的意愿。
通常，从未刻意学习过交互知识的产品经理，在产品设计过程中能想到的交互，基本都来自于日常生活中使用各种App的体验。所以，最基础的一点，在平时使用各种App的过程中，注意各种交互的积累。
比如，在平时使用App的过程中，将各种交互在自己的笔记应用中分类整理——评论、卡片、登录注册的交互都有哪些常见形式。在自己设计的时候，就能迅速按分类找到各种交互方式，合理复用到自己的产品中去。这是一个积累与应用的过程。
想系统学习交互知识的同学，可以关注职景公众号，回复“1”，可获取资料。
三、如何画美观、高保真的原型图
与交互的分工相似，中大型的公司会有自己的UI团队，部分初创公司可能需要产品经理成为多面手，独立负责原型、交互、设计三个模块。
部分公司会有自己的设计规范，这样就省去了大量试错的时间。产品经理也可以适当了解公司的设计规范，有助于后期与UI同学的沟通与协作。
对于产品经理而言，不需要严格遵守色彩、控件规范，但了解基本的设计原则，会使自己的原型图更为美观，与其他部门协作时也会获得他们的认可与信任。
“基本的设计原则”，可理解为：对比、重复、对齐、亲密性。
- 对比，体现在避免页面元素过于相似；
- 重复，让设计中的视觉要素在整个作品中重复出现，可以重复颜色、形状、线宽、字体、大小和图片等；
- 对齐，每个元素应当与页面上另一种元素有某种视觉联系；
- 亲密性，彼此相关的项应当靠近，归组在一起。
以上就是关于产品新人如何快速上手原型图的一些看法。
“原型图”只是产品经理工作中的一小部分，原型图背后的业务逻辑、部门协同才是真实工作中产品经理更要关注的部分。而这些部分，体现在原型图上，就是梳理清业务条线逻辑，明确自身的产品会与其他业务线产生哪些交集；原型更新后及时变更日志，让与你协作的研发、UI不做无效的工作；注释文字清晰，让协作者一目了然……
输出一份好的原型图，不会使你迅速升值加薪，但长期看来，你能在输出原型图时考虑协同部门的感受，会增强你在同事间的信任感，在排期或设计时能优先考虑你的需求，这对长期工作来看是大有裨益的。一份优质的，逻辑清晰的原型图，也能使你减少受到开发、设计质疑的概率，一定程度上也会减少你向leader求助、共同推进工作的概率，这会让你的leader觉得你是一个靠谱、能解决问题的人。
实践>方法论，要提升画原型的技能，还是得进行实操。许多细化的东西需要自己去实践，才能总结出自己的方法论。
因此，在日常使用App的过程中多留心记录、刻意练习，能够使你的基础工作更加顺畅，为那些能让我们有增值空间的工作打下基础。
如果你在转行产品、校招求职产品时遇到了问题，可以随时找我聊聊，我可以帮你看简历、梳理面试。
我也总结了很多产品求职资料，包括拿大厂offer同学的求职作品资料，大厂原型交互参考，b端c端产品面试问题汇总+解析等，对你产品求职会很有帮助。
关注“职景”公众号，回复“产品”，获取以上资料