产品经理课程分享-Axure入门课程笔记

产品经理课程分享-Axure入门课程笔记

•2小时极速入门

•基础知识

本节重点

1.为什么要做原型图？

2.原型图的种类与应用

3.常用原型设计工具

4.原型设计的基本流程

•什么是原型图

•描述文档

•大部分研发沟通，沟通工具

•PRO,MRD敏捷开发

•涉及的人群

原型图涉及的人群

•原型图的重要性

•95%的新功能无用的

原型制作的重要性

1.需求的不确定性，95%新功能都是无用的

2.研发成本是互联网公司中最大的成本

3.很多问题只有“亲眼所见，上手体验”才能发现

•E

•线框图

线框图：制作快速,低成本描述方案，给设计更多空间

•高保真图

高保真图：制作耗时，还原度高，保证设计效果・网用匚1米工

•需求文档（PRD、MRD）

•文档的中心策略

•指导研发和运营

需求文档(PRC/MRD)：更多逻辑与业务说明，指导研发

项目》*

埃日目惊

11MLAJMMS<WMIMWMB.aMBMlMv

MMCMeKMVtrit

M(巳A)7・2.做的011皿(8«)

as

i)(M3XWM

2)mam01Ml

•*MKoe»«【耀碇量】阿修・・

JTJOA

2)个WQmw^.QWI个

>)n*rtira®»»mwGn^rraxmiuiw

原型图的种类

1、线框图：制作快速，低成本描述方案，给设计更多空间

2、高保真图：制作耗时，还原度高，保证设计效果

3、需求文档(PRD/MRD)：更多逻辑与业务说明，指导研发

•原型图设计工具(文档通用性和图像编辑较差)

■

常用原型设计工具

XXd

AxureRPAdobeXD墨刀

y国内通用免费在线原型设计

快速毋辑图像设计效果手机孩览

事件模拟插件丰富免费

x付费国内插件无法使用文档通用性差

设计师对接复杂交互模期图像身辑做果差

•原型图设计辅助工具

•图标库

原型设计辅助工具（原型演示PC）

・适用外部分享

•通过HTML->Zip包,在线演示

•国内免费服务器

•多种文件格式托管

•原型演示APP:墨刀

原型设计辅助工具（原型演示APP）

墨刀：wwvy.modao.cc

•APP高保真原型完美演示

・制作伪APP（图标+闪屏）

•国内服务器速度快

・Axure导入图片+事件

•设计的流程

原型图设计的流程

需求分析功能拆分原型设计需求评审原型体验

功能1

功能2

公司最大的成本不是人力，

而是决策失误所带来的无效研发投入。

通过细致的原型设计，可以尽早发现问题,

降低无效研发，提高决策的成功率。

-Song老师的经验之谈

•基《出^｛牛

•安装环境（汉化包）

Axure安装与汉化

官方包:Axure8.0(83.1M),Axure9.0(109M)

汉化：百度搜索Axure汉化包

De<dui1$ettings

Fonts

kotw重启

legpAxure

WocdTempUte%

IBApp

defaultAxDocdll

AxDtx.dllxonfig

Aiim«9eMdgiclLdll

•Axure操作区

■z月工

Axure操作区

-DX

3

快捷操作

样式/属性

站点page

绘制区

元件库

•矩形、圆、线

•按住shift+放大缩小，可以等距变化

•按住左上角△放大缩小，可以改变圆角

•图形内双击直接打字

•页面中正上方可以加阴影

•组件右上方。可以改变图像样式

•组件右上方+ctrlshift,可以旋转

•文字排版（一定要下载思源字体）

•项目一元件样式编辑（默认字体）

•推荐默认思源字体

•偏向更小一些（70）（66-80字体放大会消失,推荐在66以内或80以外）

▼1.r1O

66号字

■

80号字“

•字正上方设置文字阴影

•字间距：回车默认字间距~行间距,缩小一些会比较好看

•思源字体

思源黑体》

思源黑体是Adobe与Google历时三年在2014年7月宣布推出的一款

一款新的供桌面使用的开源Pan-CJK字体家族，有七种字体粗细

LightsNormal、Regular、Medium、BoldKIHeavy）,完全支书

体中文、日文和韩文，这些全部都包含在一种字体中。它还包括另

迎的SourceSans字体家族的拉丁文、希腊文和西里尔文字形。

•下载链接：hi【DS:///fonl-search-

resull.himl?q=%E6%80%9D%E6%BA%90%E5%AD%97%E4%BD%93

•下载压缩包一解压一打开一左上角点击安装一安装完后原文件全部删除也不

影响

•图片的灵活应用

•导入

•直接复制粘贴或拖拽

・调整

•切割

・技巧，两种分割方式

•上下切开，下面置顶

•剪裁图片分割

•组合

•变形

•覆盖（顶层、底层）

•遮挡

图片的活用

导入、调整、切割、组合、变形、覆盖、遮挡

•表单元件

自带事件，尽量用这种按钮

•自带事件

一表单元件

•文本框

•右侧属性十分重要：eg:提示文字

•下拉列表

•B端很多表格

•流程图

•axure流程图（Flow）

Axure是高效的原型设计工具，不是图像处理工具,

它追求的是“效率”而不是“完美”。

-Song老师的经验之谈

•线框图

•重点：

■

本节重点

1.线框图的用处与制作技巧

2.实战：微信发现+朋友圈

3.作业：网易云音乐播放

1・2|■何”

•044IH«aMHHtRAM

•制作技巧：

•参考线，从上往下拖动，可以移动无限数量的参考线，用完删除

•对齐最好对齐底部，无论是文字还是图片

•底部的组件，可以点击正上方的等距分布

线框图的制作技巧

1、基本元件的组合（矩形，圆形，线，文字）

2、填充颜色代替图像，空白形状代替图标

3、尺寸比例保持一致

项目中，线框图可分为两种：

L基础版：确定方案，与客户快速达成一致。

2.混合版：指导研发，简化原型设计。

一Song老师的经验之谈

•高保真图

•例子

•制作原则

高保真图的制作原则

1、形状尺寸：严格按照截图比例，参考线

2、色彩：使用吸取颜色，注意渐变色

3、贴图：寻找参考物，复制图片，截取，覆盖等

・技巧

・

高保真图的制作技巧

1、会截图：选取合适的参照物进行切割，不要重新发明轮子

2、搜索工具：iconfont,百度图片

•栗子

•需求

需求：

假设你是微信团队的PM,某老大突发奇想，想要增加一个功能提升活跃

增加“听一听”功能入口

详情页，借鉴QQ音乐+网易云音乐

•1、切割

•2、填充(iconfront)

•作业

作业：网易云音乐增加“听书”功能•BlI*>197)0

背景：

某产M经理为了提高网易云音乐的使用率，经过

调研可尝试增加听书功能

要求：

1.替标中间人口

2.尺寸、颜色、字体、icon等

3.增加必要的文字指引

•思考题：为什么复制，不是重新画

为什么用这种方法做原型图?

1、高效：单位时间内，尽量保证有效产出，复制永远是最快的

2、经验：新人要多学，而不是多创造

3、好看：最接近真实的感觉，研发喜欢

•一句话，快速做高保真很有必要

■

大家都知道高保真原型图好，但实际工作中往往受

限于“时间”，能够快速输出高保真原型图的PM,

才算是一流的产品经理。

-Song老师的经验之谈

•高手进阶之路

•其他高级元件

•热区

透明正方形，接收"事件"的元件，方便辨识事件区域

热区的介绍

一个透明的正方形，用来接收“事件”的元件，方便辨别事件区域

•母版

一套元件的组合，方便"频繁重复”的内容统一编辑

3v□□

*剪切

□

英制

1粘贴

□粘贴选项

设为隐臧

a组合Ctrl+G

对齐

分布

转换为母心

转换为动态面板

•内联框架

展示外部网页内容，经常用来实现（视频、地图等）

内联框架

展示外部网页内容，经常用来实现（视频、地图等）

内联框架：内联框架：

视频播放页URL地图网页URL

b

http$://playe<bilibih.chups/Zvvww.dmapco

om/)Dlayer.html?aid=m/place/B000A83C36

53058902&bv>d=BVl

84411j7Wi&c»d=928

30344&page=l

•不要显示滚动条

旧⑶麦・性3

D

打开僮・

（崎则当前顼口的挈个页面

an样式

DW8

D映

0

D1尺寸saw

V内

法裨检里目标

Q婶in*

从不■示

匚的欧W

痍限E片

。无

Q博接到5或文忤〈例如：D：ucxx4vi>

'«Wi

C

O自定义

号人12

工事贞・¥Q

•元件库

RPLIB文件

•自己下载好，"载入"元件库

•bootstapforAxure已下载至团队飞书知识库--学习材料产品学习

元件库一

内部元件库，外部元件库

卅0

选择全部

下蜕元件库…RPLIB文件(.rplib)

81人元件库…

□从AxureShacAiA元付序…

JW2

创建元件年…

2

•F)话

工作中，效率永远是最重要的，多花时间寻找成熟

的工具和方法，不要重复发明轮子。

—Song老师的经验之谈

•事件系统入门(Axure9)

•重点

本节重点

1.Axure事件动作的用处与结构

2.事件与用例编辑器

3.变量与条件设定

4.常用事件与动作

5.案例：制作微信APP登录页

•1、事件动作的用处与结构

•Axure事件动作的作用

验证功能

Axure事件动作的用处

对原型图添加“事件”，模拟交互动作（Interactions）验证功能

1.视觉保真

页面跳转

显示动效（移动/旋转/缩放）

2.交互保真数值展示（变量/列表）

•系统结构

•Axure事件动作系统结构

效果：鼠标点击“按钮1”页面跳转“page2”

Button©

按钮取标点击时任何条件下跳转到page2

WidgetEventCaseAction

元件事件情形N动作

鼠标移入时变■var=l时文字变为XXX

变—vaol时

•系统结构口

Axure事件动作系统结构（示例）里

鼠标点击“按钮1”，判断变量var,>1时跳转page2,<1时跳转page3

CaseAction

情形动作

按钮战标点击var〉l时跳转page2

var〈l时跳转page3

双击时

BUTTON

鼠标右由时

JA标按下时

Kte松

依标移动时

nraa

P«9»2

实际Axure9配置完之后的

•2、事件与情形Case编辑器

•实操步骤

■用翳云懦里

——事件添加

1事件选择

2动作选择

添加

CM动作目标选择

交互KWM3

KMFM

““4动作确认

•3

4mm

•事件添加（不同元件事件属性不同）

-事件添加（不同元件）型*

»wi

尺4&E

■R

avwjw

衣痔晒

MAW

U&MW

施研开⑺

•交互编辑器

交互编辑器

♦击时♦・*

G女1

HH«MI嬴

*6,"开•楼IJJVA

当前胸口

aMWI

冗

5gM

添加动作动作记录动作属性

中

设・列中2

awMffi

*功

MR、J

■于肋部加

发・不透明

•3、变量与条件设定

不同条件不同页面

•变量编辑：全局变量（V）

•在动作里面增加设置变・值

-变量编辑（全局）■B-5口WU

fi(V)而目(01布IkA)力布(U)6

)：攵♦爻，动作目标设定值

□]WHT令“WtMZffVW咬・tZWKFSK.

・」■吊■期25个

C•■neMiTwarr.少于冶个RL含KL

•练习：全局变量取值、MB

•读取（按钮+文本框）~对象是“读取"右边的输入框内容（Newvariable）

•①选择"输入文本框”这个元件

・卷回，»IO

M&A

•②右侧属性栏中点击设置为“文本”

•③点击属性栏-交互-值为右边的fx

样式文互・说明

▼单击时

设・文本i||.

目标

T1

sa7)

文本

n

([NewVariablejJ

确定

新建交互

常用交21

鼠标悬停交豆样式

•写入(按钮+文本框)~对象是"读取"右边的输入框内容(Newvariable)

•①添力励作：设置变量

I0I

•②选择变量：新变量

样式交亘・说明

▼单击时

设■变源加目标

新建交互

需用交三

威的停交互样盘一

日

•③设置变量值：写入值

样式交克*说明

，单击时

设■变■值醇加目标

目标

NewVariable

I

确定

不去辎文本框

•写入（按钮+文本框）~对象是“写入"右边的输入框内容

X・・文本

在下方・A文，.9・名府好队式，13〃田『中.M0：

EMWyVEW:

•MMBtt|VMA*Var6U.ft®-V»rA•Vw»WD；

•・MUMflflPiitfvwn.gsonMi

KAtAMa一

—・W"4

在卜方阳・州+0A几R・RI«g・.朔MTT班P*,不允”包含中♦.»

▲Mt，”

witi_•_n_

b1A

局部变量写入文字的设置方法

&

•条件编辑

识别输入的不同文本内容，并设置不同的由辉专页面

•①打开操urn-

条件编辑

<—.

（矩形名称）1

▼单击时启胁I形

打开链接

Page1

♦②配置条件（添加条件）

-条件编辑

•③弹出窗口，情形设置。r条件设置，设置两个条件对比

-条件编辑

逻辑运算

if(A>l&&A=l)

t

条件表达式

•练习：判断变量后聒不同页面

IF……else二二情形1、情形2

•变量班级:局部变・

当某个目标值为其他元件的数据时，需要局部变量，进行中转

•理论

-变量编辑（局部）与数值输出

当动作目标值为其他元件的数据时，需要局部变量，进行中转

把A的值传递给B

变量编辑（局部）与数值输出

X编辑文本X

在下方输入文本.变量名称或表达式要写在"«中.例如:

•播入安茨取变量“MyVar”的当1»值：

•播入表达式[grA+VarfiJ],ttW'VarA+VarB"的和：

•庙入系疏变量HPageName1荻取当前A面名称.

^VARIJI输出数值

在下方创口用打齿入兀件值的同部娈・，局部变・名称必须是字母数字.不允许包含空格.

•练习：两个文本框值传递

选择【被同步的输入元件】

样式交互・说明

（矩形名称）

▼单击时

设・文本添加目标

X4/>DDD

目标

（文本框）

迎百为

文本

BBB

蝇确定

新建交互

章用交互

俄标慧停交互样式

'在下方帕人文本，立・名称屿达式♦写在F『中.««1:

1•SLA壹・UMyV”小我取交・"向3%当M・；

•注入*这iUWA♦VarHA♦VWTBWJ;

•注人郝—『"eNiimML我取劣的页面名叽

0人♦・3b薇

在下方创理用于4人兀样局郎/■名你必须是字«口

演ai■晶变■―老个”

在下面【局部变量】的编辑栏内【被同步的输入元件】

X街羯文本x

在下方输入文本."名梆或表达式要写在"HD"中.例如:

・MAftB（（M/Vac]|,改取安•"MyVa「fi9当前值；

•插入秘式WarA♦VarB]],荻取-VarA+VarBTWtt;

•插入系观变胤[PageName]获取当府页面名梆.

陆入变■或治加.

IILVAR1]）

在下方创建用于0i入元件值的局部交■.局部变■名称必须母字母数字,不允许包含空格.

治mraae#.

IVAR]'j6ffxy,

I痴I

在上面的方框里插入【局部变量：[[LVAR1]]]

O2i«Q■O★■・■*O索—■O**■xQ«n*ixQx0”3"O-■♦+

C01273A132767/tUftJiM«id«w56omap«Wflmi.

寅三Mx"ie-g)

CCC

Iz]

效果就是做到【下面的输入值】，点击按钮后与【上面的输入值】同步

•4、常见事件与动作

常用事件

鼠标操作动态面板

单击时载入时

双击时状态改变时

鼠标右击时拖动开始时

鼠标按下时拖动结束时

拖动时

向上滚动时

向下滚动时

滚动时

♦同福云摞堂

常用动作

,会,交■

/HHWSI

rr»*源序没・虹值

>M纣m口"湾序

MQ>««诲IDM

»金■发・J宾他

・口«*»»

>中国・

M■口0・方筑总示发面

■嬉

0・■贞a日KA

/女30”开“敢»事件

/»■»

内电椎里

■记行

温动*元a・*w-

♦行

•5、案例：制作微信A叩登录页

遮罩，矩形，透明度

aw

挪在顶层

•一句话：

••=

“Designisnotjustwhatitlookslikeandfeelslike.

Designishowitworks.”

-SteveJobs

•中继器（重复器）

・重点

本节重点

1.中继器的原理与用处

2.实战：制作商品列表

3.作业：制作B站视频列表

•介绍

■

中继器（Repeater）的介绍

中继器应该叫“重复器”，用来“展示某些重复数据”的元件

RepeaterWidgets

S

Therepeaterwidgetisanadvancedwidgettypeusedtodisplay

pepeatingtollectionsoftextimages,andotherelements.

Repeatersare可61rmheldAsetofwidgets,called

thethati]repeatedseveraltimes|)nthepage.Each

repetitionoftheitemcanbedifferentfromtheothers,andthe

differencesarecontrolledbydataenteredintotherepeater's

tabular-dataset."

•为什么存在中继器？

为什么存在中继器?

\aoB\

iiil