从来以来，Axure是产物司理的必备软件之一。
业余的倏地原形打算器材
近几年，产物司理这个岗亭越来越吃香，不少程序员、打算师、以至工程师都转行去当产物司理，但新人产物司理每每由于不熟习Axure，不知晓原形模范，致使原形制做效率低。
在网上也看到不少产物新人的心声：
“头领说甚么性能就怎样画，完备没有了主意”
“原形画得格外粗劣，和开垦疏通相当艰巨”
“曾经改了十几版了，仍旧知足不了甲方爸爸”
也许看出，由于早期项目经验较少，在本质的处事中不免会碰到百般题目。
那产物新人想要更快地做出模范原形，该何照实行呢？卓越的做法是：老练控制原形器材Axure，在打算原形图的流程中按照须要实行打算；擢升产物学识编制，领会何如确实的表白产物打算心思。
说一百遍不照本质做一遍，画原形图的实战案例，数艺君曾经给众人整顿好了，随着教程一同来画一画。
归纳实战案例：靠山经管系统
本案例是制做软件靠山经管系统或企业经管系统，职掌末端为电脑端，直接依据经管系统的通例布局，行使AxureRP自带的元件库本人打算页面，制做交互成效。
页面框架
图为经管系统的干流布局方法，顶部显示系统称号和登录讯息，左边为导航菜单，右边为数据地区。本节体例为搭建好页面框架，制做头像敏捷进口和手风琴导航菜单两部份的交互成效。
头像敏捷进口
案例描绘：
鼠标移入头像地区，显示下拉菜单；鼠标移出面像地区，埋没下拉菜单，如图所示。
案例思绪：
倘使是移入/移出某个文本地区显示/埋没下拉菜单，也许直接行使“程度菜单”元件，特别容易，但头像是一张图片，此法子行不通。
读者或许曾经料到了制做此成效的法子，那便是直接给头像的“鼠标移入局面件”和“鼠标移出局面件”增加显示和埋没的行为。但这个思绪只对了一半，行使这类法子，鼠标移入头像地区显示下拉菜单是没有题目的，但当鼠准则备单击下拉菜单时，鼠标只需刚才移出面像地区，下拉菜单就直接埋没了，底子没法单击。
鼎新上述思绪，行使动态面板的两种形态制做默许时、鼠标移出时的头像地区（惟有头像）和鼠标移入时的头像地区（包罗头像和下拉菜单）。
案例本领：
动态面板、鼠标移入局面件、鼠标移出局面件。
制做环节：
（1）拖入“矩形2”元件至打算地区，尺寸为像素×60像素，地位为（0,0），填充颜色为#1DAAE0，修正其文本为“公司营业经管系统”，在名目面板中修正其文本对齐方法为居左，左边内填充间隔为30，如图所示。
（2）拖入“文本标签”元件至打算地区，地位为（,21），字体颜色为#FFFFFF，修正其文本为“李明”。
（3）拖入“图片”元件至打算地区，导入默许头像，尺寸为30像素×30像素，地位为（,15），圆角半径为15像素，实行右键菜单敕令。
（4）双击该动态面板，翻开“面板形态经管”对话框，复制State1，此时动态面板有State1和State2两个形态，如图所示。
（5）投入动态面板的State2，拖入3个“矩形1”元件至打算地区，尺寸均为像素×35像素，地位离别为（0,40）、（0,75）和（0,），边框颜色均为#CCCCCC，修正文天职别为“团体中央”“暗号修正”“退出系统”。
（6）离别修正“团体中央”矩形和“退出系统”矩形的上圆角半径和下圆角半径为6像素，如图所示。
（7）鼠标移入头像地区时，显示下拉菜单，如图所示。
①敞开动态面板的State2，选中动态面板，双击属性面板中的“鼠标移入时”事情，翻开用例编纂器。
②取舍。
③在右边的摆设行为地区勾选“现时元件”。
④取舍形态为State2。
（8）鼠标移出面像地区时，收起下拉菜单，如图所示。
①选中动态面板，双击属性面板中的“鼠标移出时”事情，翻开用例编纂器。
②取舍。
③在右边的摆设行为地区勾选“现时元件”。
④取舍形态为State1。
（9）摆设实行后，按F5键在欣赏器中预览成效，如图所示。
手风琴导航菜单
案例描绘：
单击甲第菜单，对应的二级菜单向下伸开，再次单击该甲第菜单，对应的二级菜单收起。
案例思绪述
直接行使动态面板纪录甲第菜单的收起形态和甲第菜单伸开后显示二级菜单的形态。切换动态面板形态，来实行收起/伸开的成效切换，并合营推拉元件成效。
案例本领：
动态面板、鼠标单击局面件、前提用例、显示/埋没时的推拉元件成效。
制做环节：
首先布局左边导航菜单。
（1）拖入动态面板至打算地区并摆设为两个形态，State1代表甲第菜单收起时的形态，State2代表甲第菜单伸开并显示二级菜单的形态，在两个形态中离别依据“10.1.2手风琴导航菜单1”中的名目制做“人员经管”“职责经管”“数据统计”3组一、二级菜单，此中“人员经管”的一、二级菜单如图所示。
（2）3组菜单即3个动态面板，离别定名为personnel、task和count。
（3）把3组菜单纵向胪列，每组菜单（动态面板）之间紧要紧贴合，且不要有穿插叠加的部份，如图所示。
接下来制做菜单的伸开和收起成效。
（1）当“人员经管”甲第菜单为收起形态时，单击后变成伸开形态，伸开其二级菜单，如图所示。
①投入personnel的State1，选中“人员经管”的矩形，双击属性面板中的“鼠标单击时”事情，翻开用例编纂器。
②取舍。
③在右边的摆设行为地区勾选personnel。
④取舍形态为State2。
⑤勾选“鞭策/拉动元件”，方位为“下方”。
（2）当“人员经管”甲第菜单为伸开形态时，单击后变成收起形态，收起其二级菜单，如图所示。
①投入personnel的State2，选中“人员经管”的矩形，双击属性面板中的“鼠标单击时”事情，翻开用例编纂器。
②取舍。
③在右边的摆设行为地区勾选personnel。
④取舍形态为State1。
⑤勾选“鞭策/拉动元件”，方位为“下方”。
（3）用一样的法子给“职责经管”和“数据统计”两组菜单制做伸开和收起成效。
（4）摆设实行后，按F5键在欣赏器中预览成效，如图所示。
提醒：不论是手风琴导航菜单1仍旧手风琴导航菜单2，都须要合营行使“内联框架”元件来显示经管系统页面中的数据地区，也便是说当单击左边手风琴菜单后，只须要在“内联框架”中切换页面便可。本节体例为了清楚地注明何如哄骗动态面板制做手风琴菜单，将3组菜单布局名目都制做出来以后才起头制做收起/伸开的交互成效，而且每组菜单（即每个动态面板）中的交互行为都是一个一个循序渐进增加的。在实战项目中，靠山经管系统必要不只是3组菜单，有的菜单数目或许多达十几个，这时倘使仍旧选用这类法子就会有些费时。也许先把一组菜单的布局名目和交互成效（不只包罗收起/伸开成效，还也许包罗诸如二级菜单的选中、鼠标悬停交互名目的摆设等）都制做实行，而后直接复制这组菜单（菜单的交互成效是也许同步复制的），接着修正这些菜单的文字体例和图标名目、修正菜单（动态面板）的定名，如此会容易很多。
推敲：
本小限定做的手风琴导航菜单中，何如做到单击某个甲第导航菜单伸开对应二级导航菜单的同时，收起其余的二级导航菜单呢？读者也许依据上面的思绪试验一下。第1种思绪，单击某个甲第菜单（即鼠标单击局面件），把该动态面板摆设为State2的同时，把其余动态面板摆设为State1。但这类法子在菜单数目不少时职掌起来会很费事，而且可保护性较差。
第2种思绪，把甲第菜单（State1中的矩形）的“选中时”和“做废选中时”代表伸开和收起形态。单击甲第菜单（State1中的矩形）时，摆设现时元件为选中形态。当甲第菜单（State1中的矩形）当选中时，摆设动态面板为State2；做废选中时，摆设动态面板为State1，哄骗“统一选项组内的元件在统一工夫只可有一个当选中”这个属性，就也许做到统一工夫只可有一个动态面板的形态是State2（伸开形态），即伸开某个甲第菜单时，收起其余二级菜单。
数据盘查与编纂页面
经管系统的大大都页面寻常都是对数据列表的盘查与编纂，盘查职掌少不了多个下拉列表的连结盘查（联动下拉菜单）。编纂数据时倘使触及批量职掌，进度条又是必不成少的，本节就来制做这两部份的交互成效。
进度条
案例描绘
单击“上传数据”按钮，显示进度条地区（包罗百分比），进度条渐渐填充完备，百分比显示为0%～%，如图所示。
案例思绪：
进度条的填充物为矩形，初始宽度为1，单击“上传数据”按钮后，摆设矩形的尺寸为逐突变宽便可。进度条百分比的算法为填充物（矩形）的宽度占整体宽度的百分比。
何如从来地革新进度条百分比？由于百分比默许是埋没的，当单击“上传数据”按钮显示出来时，给其“显示局面件”增加“摆设文本”行为，接着把它埋没再显示，构成递归成效。
案例本领：
鼠标单击局面件、显示局面件、部分变量、Math.floor函数、width函数。
制做环节：
（1）行使矩形和程度线制做“导入数据”悬浮框，悬浮框中包罗题目、“上传数据”按钮、进度条和“敞开”按钮，如图所示。图中蓝色部份为填充完备的进度条，定名为fill，尺寸为像素×20像素，即当进度为%时进度条的宽度为像素。灰色部份为进度条的边框底色，定名为border，其效用只是是为了悦目，右边的百分比定名为percent。
（2）调换好名目后，把进度条fill的尺寸修正成1像素×20像素，也便是初始形态，把fill、border和percent摆设为埋没，如图所示。
（3）将悬浮框中的全数元件组合起来，定名为input并摆设为埋没。留神环节
（2）中摆设了3个元件为埋没，此环节再次摆设全面组合为埋没。
（4）拖入“按钮”元件至打算地区，尺寸为70像素×30像素，地位为（,80），填充颜色为#F2F2F2，边框颜色为#CCCCCC，修正其文本为“批量导入”。（5）单击“批量导入”按钮，弹出“导入数据”悬浮框，如图所示。
①选中“批量导入”按钮，双击属性面板中的“鼠标单击时”事情，翻开用例编纂器。
②取舍。③在右边的摆设行为地区勾选input。
④动画为“向下滑动”，工夫为毫秒。
⑤更多选项为“灯箱成效”，配景致为#CCCCCC，不晶莹度为60%。
（6）单击“上传数据”按钮，显示进度条，并渐渐填充完备，如图所示。
①选中“上传数据”按钮，双击属性面板中的“鼠标单击时”事情，翻开用例编纂器。
②增加“显示”行为，显示percent、fill和border。③取舍。
④在右边的摆设行为地区勾选fill。
⑤摆设宽为像素，高为20像素。
⑥取舍锚点为“左边”，动画为“线性”，工夫为毫秒。
（7）进度条渐渐填充完备的同时，百分比动态改变，如图所示。
①选中percent，单击属性面板中的“更多事情显示时”事情，翻开用例编纂器。
②取舍。
③在右边的摆设行为地区勾选“现时元件”。
④摆设文本为“值”，单击fx按钮，翻开“编纂文本”对话框。
⑤增加部分变量为tc、元件和fill。
⑥输入[[Math.floor(tc.width/*)]]%。
⑦增加“等候”行为，等候0毫秒。
⑧增加“埋没”行为，埋没现时元件。
⑨增加“显示”行为，显示现时元件。
（8）为了让页面看起来加倍悦目、完备，也许自行行使中继器制做数据列表，详细环节不再赘述。
（9）摆设实行后，按F5键在欣赏器中预览成效，如图所示。
光看书还感觉不足？
狄睿鑫师长的课程来啦！
购置竹素后可1元购课！
新书保举
延长欣赏
更多体例也许购置《AxureRP8.0产物原形打算与制做实战》详详细欣赏哦！
做座者：狄睿鑫
出书社：群众邮电出书社
出书年：年6月
ISBN：-7---6
长按
转载请注明：http://www.0431gb208.com/sjszyzl/1139.html
