【产品经理从0到1】原型及Axure介绍

原型分类

原型的三种分类：

1. 草图原型：⼿绘稿，制作⽅便，修改不⽅便；
2. 低保真原型：简单交互，⽆设计图；
   最好的原型是⿊⽩灰的；
3. ⾼保真原型：复杂交互，有设计图；

草图原型

低保真原型图

高保真原型图

不同类型原型的特点

草图原型：手绘图稿，制作方便，修改不方便，规划的早期使用；
低保真：简单交互，无设计图，无需配色，黑白灰即可，产品经理做产品规划及评审的阶段使用；
高保真：复杂交互，有设计图，需要有图片设计功底，做公开演示时候常用。

Axure简介

功能：用于快速制作原型的软件，它在无需编码的情况下构建低、高保真的原型，只需拖、拉、编辑即可完成；
原型：用线条、图形描绘出的产品框架，也称线框图，是需求和功能的具体化表象；
作用：
1、原型是需求和功能的具体化表象，可以辅助产品经理与领导、UI、和技术进行沟通；
2、原型相对于手稿而言，信息含量更丰富。

Axure功能介绍

1. 选择、置顶、组合
   1. 选择：建议⼤家使⽤“包含选中”，这样可以避免误操作；
   2. 缩⼩/放⼤：⼤家在制作原型的时候，这两个功能要经常使⽤，提升原型制作效率；
   3. 组合：当多个元件需要⼀起进⾏编辑时，可以将他们组合在⼀起；
   4. 对⻬、分布：可以快速实现⻚⾯布局；
2. 预览、颜⾊、隐藏、⻚⾯
   1. 预览、共享、发布：
      1. 预览：通过浏览器打开原型；
      2. 作⽤：给项⽬组成员演示原型时使⽤；
   2. 共享：当我们需要给⾯试官分享作品的时候，可以使⽤；
   3. 发布：当我们需要将原型⽂件分享给项⽬组同事时，先将原型导出为html，再分享；
   4. 在Axure中，所有透明的元件，在预览时，都是不可⻅的；
   5. 当我们需要制作⼀个系列的原型时，建议先在“⻚⾯”区域建⼀个⽂件夹，然后将这个系列的所有原型⻚⾯，都放到这个⽂件夹中；
3. 栅格、边框设置、草图效果
   1. 栅格、辅助线：只是⽤来辅助⼤家画原型的，预览的时候并不会出现；
      1. 栅格和辅助线的设置，以⼤家的个⼈偏好为主；
   2. 边框设置、草图效果：
      1. 边框设置⾮常重要，在“检视” - “样式”中设置即可；
      2. 草图效果：⼤家在做需求评审时，千万不要使⽤；
   3. ⾃动备份：⼤家⼀定要把⾃动备份勾选上，备份间隔时间设置为5分钟；
4. 矩形、图⽚、热区、动态⾯板
   1. 矩形的圆⻆可以设置：圆⻆半径，圆⻆可⻅性；
   2. 图⽚，导⼊图⽚：
      1. 如果需要导⼊的图⽚是原尺⼨，那边框的⼩正⽅形是⻩⾊；
      2. 如果需要导⼊的图⽚根据我们需要的⼤⼩进⾏⾃动缩放，那边框的⼩正⽅形是⽩⾊；
   3. 如果想让元件等⽐例缩放，按住shift，拖动元件边框的⼩正⽅形即可；
   4. 热区元件，最⼤的作⽤：增加元件的点击范围；
   5. 动态⾯板：当我们需要设置各种交互动作的时候，多数情况都需要使⽤动态⾯板，尤其是需要在同⼀个位置切换不同的内容；
      1. 注意给动态⾯板和它⾥⾯的状态命名；
      2. 动态⾯板中的每⼀个状态，都是⼀个独⽴的⻚⾯；
5. ⽂本框、下拉框、单选、复选
   1. ⽂本框：可以设置⽂本框的提示⽂字，设置输⼊内容的格式/类型，可以选择是否隐藏边框；
      （在“检视” - “属性”区域设置）
   2. 下拉框：可以设置下拉框的选项、选项的顺序等；
   3. 单选：⼀定要设置单选按钮组，才能实现单选的效果；
      1. 单选按钮组的效果：组内每⼀次，只能有⼀个元件被选中；
6. 常⽤交互
   1. ⿏标悬停、⿏标按下，设置效果之后，都可以直接实现；
   2. 选中、禁⽤，设置效果之后，必须要设置对应的交互动作才可以实现；
      1. 注意，这四个效果都是在“检视” - “属性”区域设置的；
   3. 交互思想：
      1. 我们在设置⼀个交互动作之前，先考虑好，它是如何触发的；
      2. 然后再考虑，触发之后，有什么样的效果；
      3. 最后，通过交互动作实现出来；
   4. toggle效果，切换元件的选中状态；
   5. 动态⾯板的状态设置：⼀定要注意命名，可以复制或者新增状态；
   6. 元件的说明，在“检视” - “说明”区域设置即可，设置之后，预览状态可以看到内容；
7. ⻚⾯流程图、泳道图
   1. Axure中可以制作⻚⾯流程图、泳道图；可以设置连线和箭头的样式；
8. 元件库
   1. 元件库最⼤的作⽤：能够极⼤的提升原型制作效率；
   2. 最好的元件库，都是⾃⼰做的；
   3. 元件库的常规操作：
      1. 载⼊元件库、创建元件库、刷新、卸载…；
9. ⺟版
   1. ⺟版最⼤的作⽤：提升原型的制作效率；
   2. ⺟版的常规操作：
      1. 脱离模板、编辑模板、拖放⾏为（固定位置）；
10. 常⽤的设计分辨率
    1. 企业中，实际制作原型时，绝⼤多数情况，制作iOS版本；
    2. 原型界⾯⼤⼩：375*667px；
    3. 顶部状态栏⾼度20px；
    4. 状态栏下⽅的导航栏⾼度44px；
    5. 如果有⼆级导航，⾼度40px；
    6. 底部标签栏⾼度49px；图标⼤⼩25*25px，⽂字10号字；
    7. 原因：iPhone5 6 7 8的屏幕分辨率都是750*1334；制作原型时，⻓宽均需要缩⼩⼀半；

元件库

点击下载或者私信获取