当前位置：首页 > news >正文

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

news 来源：原创 2025/7/5 3:02:42

在这里插入图片描述

原型分类

原型的三种分类：

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

草图原型

在这里插入图片描述

低保真原型图

在这里插入图片描述

高保真原型图

在这里插入图片描述

不同类型原型的特点

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

Axure简介

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

Axure功能介绍

在这里插入图片描述

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

元件库

点击下载或者私信获取
在这里插入图片描述

原型分类

草图原型

低保真原型图

高保真原型图

不同类型原型的特点

Axure简介

Axure功能介绍

元件库

相关文章：