画图

画图的工具

axure

作者：林涛涛
链接：
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

14年9月，在网易实习时，写下这个回答。

到现在，已经工作快5年，大部分时间都在和Axure打交道，见过很多其它产品经理画的原型图，也读过一些相关的书。因此，有了一些新的思索，就想着要重新改写下，以免误人子弟。

原答案，因为自己那时也是完全的不懂，叙述和思路都更贴近完全没有接触过Axure的新手们，这是优点，我不会丢掉。

原答案我也没有删除，往下拖就能看到。

结构

1. 基础学习
2. PRD文档中的原型图
3. 更快地输出原型图
4. 一些可能的讨论

基础学习

Axure RP，在19年4月26日已经发布了9.0正式版。

我自己9.0版本用得不多，也不推荐新手们做吃螃蟹的人。

尤其考虑到经由9.0版本编辑保存后，就不能用更低版本软件打开，可能会在协作中出现问题。

所以，这边提到的，默认是Axure 8.1版本。

Axure RP 8.1正式版下载地址 安装和汉化说明​www.axure

授权码可购买，或通过某些不推荐的渠道免费获取。

安装并且汉化完成后，打开Axure。

首先要说明的是：Axure是一款提供了足够多高阶功能，却又极其极其简单的软件。

所以，不必担心说，Axure很难入门。

就我自己的工作经历，可以这么武断地说——

工作中，Axure用到的功能基本上只有：部件的选择，摆放和属性设置。

关于是否有必要用Axure来制作高保真原型，会在下面 一些可能的讨论里提及。

部件的选择

部件用到最多的是common（默认）、Forms（表单）、Flow（流程图）。

可以随意拖到画布上看看。

大部分的部件，都很好理解。不好理解的，类似Dynamic Panel（动态面板），Repeater（中继器）等，无视就好。

这里，再提下Placeholder（占位符）：我个人很少用到占位符，感觉占位符的使用，更接近于，在输出原型图的过程中，因局部还不太确定，临时先占个位置。

部件拖动到画布上，右上角还会出现灰色的圆，点击可以变为一些基本上用不到的图形。

部件的摆放

部件的摆放，在技能上没什么要特别说明的，主要是一些常见布局的输入。

不合理的部件摆放，不仅会影响转化，也会造成用户不好的体验。

我有接触过开发中途转行做产品，原型图最大的问题就是：

一旦不能完全照抄竞品，需要自己设计时，经常会搞出一些非常怪，或明显不合理的界面来。

以下方法，也许会有帮助

• 尝试用Axure临摹一些平时在使用的APP或网页
  • 页面分为几大块，各块又分别有哪些元素
  • 哪些你认为是优先级更高的，在什么位置
• 了解一些ios，或Material Design的设计规范

另，在这里稍微列下，在输出原型图过程中，常见的屏幕尺寸（个人习惯）：

• 移动端：720 × 1280 px
• PC：1366 × 768 px

可参考屏幕尺寸大小

现在，拖一个720 × 1280px的矩形，作为手机屏，然后，去临摹一个自己喜欢的APP界面吧。也许你会在这一步放弃，因为临摹得不如意、丑，觉得没办法继续。只管继续下去！

工作10年，很酷的产品，画的Axure也许也不好看。

你不能期待自己一出手就完美，关键是完整地一次临摹，然后再一次，再一次。

网上一些原型图，我觉得给了很不好的暗示——画的很精致——原型图从不以“美”作为主要追求目标。

如果需要一些建议，可以带上你临摹的原型图私信我，不过，不能保证一定回复。

在临摹的过程中，自然而然，你会接触到部件的属性设置。

部件的属性设置

不同的部件存在不同的属性，可以逐个设置，看画布里的部件发生了什么变化。

这里也稍微提下图层的概念：

有学习过Photoshop，或者做过稍复杂PPT的朋友，应该都比较好理解。

位于上方的图层，会遮挡住下方图层。所以，代表手机屏幕的矩形，要放在最底部。

OK，看到这里的朋友，你已经学会了Axure日常使用功能的绝大部分，是不是很简单？

这里有一个小测试，尝试用Axure画一个红包，有很多方式，你可以试试：

小Tips

PRD文档中的原型图

通过部件的选择、摆放和属性设置，最后在Axure画布上呈现的东西，就是原型图。

原型图，是用来更好传达我们想法的。

和用笔画的草图，你说的长篇累犊的话，本质上没有区别。区别只在于方式，以及方式所代表的好处。

因此，使用原型图所追求的目标，也很明确——

• 怎么更快
• 怎么可以有尽量少的噪音（避免不明确，或歧义）

这里，会涉及两大块的内容，分别对应主题：

• PRD文档中的原型图：原型图应该遵循3个规范，能既快，又好地传达想法。
• 更快地输出原型图：工作中，怎样的工作流可以提升原型图的输出速度，有没有其它小技巧可以提升效率？

重申：下面所谈到的规范，只是基于个人的工作经验，并不是什么必须要遵循的原则，选择你觉得有益的方式来。

不过，目标一定是为了更快，更好。

1. 原型图不能自证其意的部分，需要附上说明。说明包括但不限于：

• 文字
• 参考图/参考链接，还能够帮助视觉同学确定风格
• 流程图，对于较复杂的跳转或交互逻辑，尤有必要；涉及跳转的，一般会先给页面命名，然后在流程图里表述清楚。
• 表格/树状图，对于可能存在的超多种情况。

我惯常的方式，是会在原型图上，标注需详细说明的点，然后在原型图右侧，进行说明。

2. 原型图避免涉及到颜色，只需要黑、白、灰、红。产品经理需要且有必要决定的只有部件的位置，和优先级。

• • 红：最高优先级，最突出强调
  • 灰和白：可用于强调，按钮相互间的优先级

• • 不同程度的灰：可用于展示按钮不可点击。

• • 黑色半透明：浮层，Toast

3. 可以有icon，但没必要在原型图里加入图片。可以用文字描述图片的内容，或者在原型图旁边给出参考示例。

• • icon推荐一个网站：iconfont，可以直接搜索、下载、拖至画布，甚至可以选择icon的颜色。
  • 给出图片的参考，可以用花瓣，或Pinterest

更快地输出原型图

在日常工作中，如何更快地输出原型图，是涉及到有没有福报的事情，大家都要重视。

1. 不要上来就打算输出原型图，可以考虑先用纸、笔画个大概的草图。
   1. 有几个页面（调整的地方有几处）
   2. 页面涉及什么功能
   3. 页面大概的结构是？怎么布局？
2. 之前画过的原型图有留档，可复用的部分能直接粘贴过来
3. 自制部件库，或有网上比较好的部件库。
   自制部件库，可查看问题：如何制作自己的Axure库
4. 母板功能的使用。

一些可能的讨论

高保真原型是否有必要

高保真原型的好处，在《启示录》或《精益创业实战》里，其实都有涉及。

它不单是我在上面提到的，自证其意的最好方式，还是可能的：

以最低成本来验证某产品是否可行的MVP版本

不过，对于90%的互联网从业者，没有必要。原因在于：

• 接触到的项目没那么大，能够直接开发一版作为MVP，而不必拿着高保真模型参与用户调研
• 项目大多能在市场上找到参考，和视觉、开发之间有基本的共识
• 坐得离视觉、开发够近

不过，技多不会压身，想学的同学可以参考看这本书

网站蓝图3.0

声明：我没有看过这本。我5年前看的，是这本书的第1版，那本确实写得不错。

Sketch画原型是否更好

我尝试过用Sketch画原型，也有了解到，一些知名互联网产品团队，都在用Sketch。

不过，我不推荐。

Sketch的好处显而易见

• 好用的插件：包括标注、自动生成内容、icon、批量替换等等
• 和设计、甚至开发之间，更顺畅的工作流

但是，Sketch很有可能会模糊掉一个产品经理的主要职责——

定义要开发的产品，而不是沉迷于某些细节。

原答案

关于Axure实在有太多话可以说，因为我这一周基本就在自学Axure。所以，一些经验，对于类似于我这样本来完全不知道Axure的人，大概会有帮助。

1. 首先，Axure的版本越新越好，我所接触到的最新版本是7.0。要知道，越新的版本，你的学习成本就会越低。
2. 其次，请一定要汉化它。（如果你的英文水平逆天，请无视这条建议，如果不是的话，相信我，做交互的时候，英文一定会把你搞疯的。）

（附带吐槽：因为领导电脑里装的是Axure 6.5这个理由，所以我也只能默默地用6.5。）

开始学习之前，请一定要明白：Axure是个极其极其极其简单的软件。如果你不需要做交互，那么哪怕你不看教程，也只要10分钟就可以大概掌握。因为你所做的就是拖部件，打字，拖部件，打字，最多加个对齐。（附带吐槽：我的同事都不对齐的。占位符，矩形，按钮摆一下，文案加一下，接下来就是：视觉，看你的咯！再接下来就是：前端，我要的是这样的效果，看你咯！）

当然，我需要给你一个高段位的流程，以满足你的需求：

基础：请到Axure的官网去，上面有Axure RP的核心训练，是7.0的（用6.5的我掩面而泣）。
Training | Axure Software

英文不好的话，没关系，有好人帮你翻译了。（真的特别特别感谢这个发帖的人，特把你的ID发出，祝好人一生平安：Juno_M）
Axure官方核心训练（翻译）

顺带推荐一下这个社区（好多人似乎都推荐过了）：
Axure RP 中文社区-WebPPD产品原型设计

事实上，你只要看到前4步就差不多了。甚至对于一些人来说，我觉得第4步都没有用，比如我的同事（我很爱我的同事，么么哒）。然而，我带有轻微的强迫症：一个软件，如果不能用到最高级别的段位，我怎么把我鄙夷的目光投向别人，所以我推荐这本书：

这是亚马逊链接：
《网站蓝图:Axure RP高保真网页原型制作(附光盘)》 吕皓月, 杨长韬【摘要 书评 试读】图书

虽然名字里是网站蓝图，但也包括了手机APP的高保真模型（不过是iphone4的）。这是一本极其极其极其好的书，作者会在一个又一个例子中教你如何使用Axure做出类似于网站这样复杂的交互。此外，作者还自带吐槽技能，并且在书的末尾，不断要求土豪入股一起做网站。

这本书唯一不足的地方在于，他太较真了。

这跟我以前学PPT是一样的困境：明明是简单的Flash就可以搞定的动画，我偏要用PPT做出来，虽然这样很酷，但其实没有必要。

但不管怎样，这是一本很棒的书。尤其是当我看到书的作者竟然是中国人的时候，简直惊呆了。（附带：如果你不想买的话，我是不会告诉你百度网盘上可以搜到这本书，以及光盘里的内容的。支持正版，人人有责。）

最最后，请一定要明白你为什么要学Axure，以此决定你要学到什么程度。我还太年轻，给不了什么建议。刚刚推荐的书里也有花很大的篇幅告诉你：为什么要用如此较真？当然，也有很多人的答案里会告诉你：没必要这么较真。

所以：

我自个儿玩去了。