这不是Axure教程！（一）初步认识软件

Axure是每个产品经理的工作利器，或许一个产品经理可以不用，但一定知道它。

我使用Axure已有一段时间，但一直概念零散，未曾形成一份完整体系，到头到尾，这个软件到底能实现什么呢？在什么情况下有什么技巧呢？更好的绘制步骤是什么呢？

因此我根据自身理解写下这个系列文章，于我自身算是总结经验，亦作同行分享交流。

文章的重点不会是某个功能的具体使用，因为基础功能都不难且已有很多教程，我会更倾向于系统性理解和实战技巧。

一、Axure绘图结构和产品结构

设计一款产品之前，产品经理一定都会梳理一份产品结构或大纲，一般对应了产品的一级菜单，例如微博APP的一级结构分为【首页、消息、发现、我】，在【我】的功能页面，又细分多个和个人设置相关的其他二级设置，比如【好友、关注、相册、会员】等。

那么在使用Axure绘图时的页面结构，也建议和产品结构保持一致，这样做一方面有助于自己整理汇总，也有助于你在讲解或演示时让观看者理解。

画图要点

如上图所示，我们画图时除了结构一致，还需要命名一致，而且Axure建议使用英文命名。如果单词不会可使用翻译，但一定要养成好习惯，后期就会越来越熟练。

二、画图界面

整体来讲，Axure是一款入门容易，但精通不易的软件。既然说入门容易，也就是你打开它你就可以开始画图了，不需要任何人教你，不需要看教程。如下图

软件默认界面6区域

打开软件后就自动新建了一个文件，通常可见六个区域，从左到右从上到下，依次功能是

1）页面：可添加页面，形成和产品结构一致的页面结构，类似文档目录

2）元件库：页面所有内容都是元件组成，从元件库选择一个元件，拖入画图区即可。软件已内置高频元件，我们也可以自制元件。

3）母版：类似PPT的母版，可以用于多个页面，提高效率的不二法宝。

4）画图区：任意拖放、对齐、旋转、隐藏。。。选择一个元件或多个元件，你想做什么都可以。

5）检视页面：分为属性、说明、样式。在【样式】里设置每个元件的颜色、对齐、背景色等，和Word的文字处理类似。在【属性】里设置元件的交互，比如鼠标点击时、旋转时、选中时等各种条件下的交互响应。

6）概要页面：此区域显示页面所有元件，可在此处快速选择元件，也可按不同方式查看元件，例如查看已命名元件、查看隐藏元件、按从上到下排序显示灯

三、命名

绘图时我们需要对元件取名字，但一个原型可能有上千个元件，不可能每一个都命名，所以建议的命名规则是：

1、页面必须命名，和产品结构一致

2、有交互的元件必须命名

3、按照元件类型在命名时加上核心词

例如按钮名为【ButtonLogin】表示登陆按钮，【TagKeyWord】表示关键词标签。这样一看名字就能知道元件的主要功能。多个同类型元件，名称也类似，可以在加上序号，例如Button01，Button02。

上面的命名规则还有个好处，我们的前端攻城狮也会涉及到变量或对象的命名，方式也离不开这三种，保持一致，方便大家。

四、原型预览

原型绘制中建议一边画图一边预览，既能让你实时看见最新效果，也能提前检验错误。

预览的三方式

预览分为三种方式，视情况选择适合的方式即可

一）预览：

快捷键，F5或者按菜单提示。本地预览，只能在你的电脑上某个浏览器预览。

二）共享：

利用Axure官方服务器，发布一个在线版本，这种方式会生成一个链接，把链接发给其他人就可以多人观看，适用于更新后。

三）生成HTML文件：

把Axure文件生成html文件，把生成后的文件发给其他人，适用于把文件发给没有安装Axure的人观看。

五、自适应视图

自适应视图，顾名思义它可以避免变形，实现让你的原型自动适应屏幕大小，但在此之前我们有必要先了解两个关于分辨率的概念。

分辨率对照表

● 物理分辨率：决定任何一块屏幕的最高分辨率，并且不可改变。常见各类手机、平板或电视屏幕都有这个值，例如iPhone X的分辨率1125px × 2436px，一个iPhone X的分辨率不会超过这个值。

● 逻辑分辨率：根据算法从物理分辨率得到的理论数值。很早之前，这两个分辨率的数值相等。随着技术发展，物理分辨率达到了逻辑分辨率的3倍。所以我们用物理分辨率除以3可以得到一个屏幕的逻辑分辨率。iPhone X的物理分辨率是375pt × 812pt @3x。

区分这两个概念的重点在于，你想要你的原型适应哪些屏幕，那就在Axure软件菜单【项目-自适应视图】中添加这个屏幕的逻辑分辨率。

接下来生成原型时，还需要在【生成HTML - 移动设备 - 包含视口标签】勾选。因为软件默认生成预览文件时不勾选。

经过以上两个设置，你只需画一份原型，即可让适配过的屏幕正常显示界面，而不会变形。

— — — — 系 列 目 录 — — — —

这不是Axure教程！（一）初步认识

这不是Axure教程！（二）素材获取

这不是Axure教程！（三）流程与标注

这不是Axure教程！（四）元件六要素与用例

这不是Axure教程！（五）变量与函数

这不是Axure教程！（六）动态面板之一:属性和动效

这不是Axure教程！（六）动态面板之二:经典实践

这不是Axure教程！（七）强大的中继器__1

— — — — 目  录  完 — — — —