原型设计-如何用axure实现复杂的tab切换效果

1、软件界面原型是交互设计师与需求工程师，产品经理，研发工程师沟通最直观的工具，在做一个产品成型的框架之前，先做一个简单的框架， 这个框架包括产品的界面排版和布局，页面元素，业务流程，甚至可以表现最终产品需要实现的各种效果，一个完整的，优秀的界面原型能够帮助设计师，软件工程师等更好的了解产品需求，从而最大限度的实现预期的功能。但是太粗糙，也可以用visio, excel比如TAB标签的动态切换、定能制作原型的工具有很多， 一张纸一支笔就可以画草图, 等，可是实现起一些复杂的交互操作就显得心有余力不足了,axure原型设计工具在axure 6.5 版本位页面锚点、全选效果，登陆框效果、图片轮播等等，

2、因此，专业的 设计原型的过程中使用方便，效率高，而且能模拟的效果很多，目前我使用 由于AXURE入门比较简单，而且互联网上有很多基础教程，在这里，我主要写一些在日常 工作中使用AXURE设计产品原型经常用到又有一些设计复杂度的，结合我的使用经历，介 绍给大家如何实现TAB切换的动态效果AXURE RP 6.5 软件一个首先想好一个需要tab切换效果的主题，这里我选择学生查看任课教师对他上交的作业的批 改情况，需要查看的包括老师给自己作业的分数和评语，老师对全班作业的点评以及发布哪些同学的作业可以参考，最后能看到自己本次作业提交了什么内容，根据这个主题，进行三种内容的切换。拖拽三个矩形，调整成高

3、 35,宽110的按钮样式，并列排好，在按钮上分别写上“作业批 阅结果” “作业总体点评” “我的作业内容”，然后在按钮的下方再拖拽一个矩形，我们将在 矩形区域显示不同的内容，如下图：在矩形区域添加第一个按钮要显示的内容，然后选中内容和矩形，右键转换为动态面板!注意：为什么不直接拖拽一个动态面板呢？直接拖拽也是可以的，但是先添加动态面饭 再往里面写内容的鼠标操作比这么做要麻烦，这里提供一种便捷方法，后面还会陆续提 到其他的便捷方式来提高原型制作效率。益灾件业侍分95分IK團犒虧斟W隹盟规居対页而上，戦的團片精廈木甬习&DPI，茲设计据郷S晞各詐分比制、鎮色、尺寸艰公司标推电系列h3、电标作品请

4、提交気酗.可用的矢董圈形娜文杵建H(C|*也生一如匸:町L?G-IfF)TOIQ1. 转换成动态面板后，双击面板，在弹出的动态面板管理对话框中对面板进行命名“学生 查看已批阅作业”，然后对面板的状态1重命名为“作业批改结果”，代表这个状态里面 包含的作业批改结果相关信息沁卩血评Ft本决肯业隔 95分 X.11 Jtt時一lit LKn扎園附宰：巩歸伽z和询）评语、:、團福请绘制在甜朋曲恆珥、诗计圉侦注明答部井比倒I 3、电标作品请提交完蛭餉、可本氓作址帙讦兀応号rr.业2. 接下来，还要在这个面板管理对话框中增加两个面板状态，分别用来显示作业总体点评 信息和学生的作业内容信息，并按照步骤3进行

5、重命名，如下图4b赵習q賈弃井 95分丄珂LR -七干TT型下较全洛测牛2.谡计图须注明备部分比例、 口匕中标作韶谙提交芫莖的* ；-对 docx3. 接下来给步骤4新添加的两个状态添加显示内容，再axure界面的右下方有一个动态面板管理区，可以看到我们刚刚做好的动态面板的名字以及所包含的所有状态，双击状态“作业总体点评”添加内容，然后重复本步骤将所有的内容添加好，如下图：# 也庐4附1叽itr-图4狂討各壬方二阿.2、匕-r斤：=*杯上弓韦制x审*貝1!1文世直|、IJfflSW.l由JhHSj債呼th辜i（1严用片尚卡忆 nguW氐中Mt” iE*N IfllVeqaiUVU.5,投庁母吕

6、liF悄去丽词會対专.+-#. Bfii： .9产|7旳哼品f： H無直百看抑冲采设明5.下面是最关键的设置了，点击按钮显示对应的内容首先选择按钮“作业批阅结果”，在页面的右侧部件属性面板中对件添加用例，在弹出的用例面板中选择“设置面板状态为指定状态”J B屮onclick（点击时）”事，在右侧配置动作下找到刚刚我们添加的“学生查看已批阅作业”动态面板，在选择状态中指定显示第 个状态“作业批阅结果”。如下图：如果你希望点击后显示内容时有点特效，在进行进行动画中进行设置g44TSSTftHO10KWhtna恤耐95分Ml!挣”-g押丄3 iz. 弔沪4此讐J *ua*viv-6.接下来设置第二个

7、按钮 “作业总体点评”，按照步骤6设置显示动态面板的状态 2 “作业 总体点评”，然后设置第三个按钮，如下图：:Jg fMilBhXjr H I谅静iJgi 訂奇耳空菲siffl袖 95分卢 Elne；-I-匡哥乍詁在-规暫的r面匕ffiSWE片*诵孑ft工1阿Fr- 玄Ml畧 尺寸貼总轉拿衲e标方亦塩-宅u的可用刖还隹闽H爭只常戸:滾 编辑按钮形状 编辑悬停样式，在弹出的“设置悬 停样式”对话框中选择填充色，字体颜色，加粗等效果，勾选对话框底部的“预览”功 能，能够预览设置完时候的样式（需要设置成什么样式可根据自己的设计）? iniJLHffifl 劳記m1 Rtu(q边1祜叱i.pjilH

8、帆（T业匠再/老做K ffi二、诒计松:*中标彳 PITI4di步師帀注qfi = (G)r（o）圧斉n|t医主月|fr卡闻恥摂（V）SSsfiTC特版誉佯或准走訓沮Ph丘埒也片三WT7囹呻T定可坯匕壬二-川？心勺二蚕厂注丄宦导j.用亍N的f任匚.r.fi -./ 二不欠作业得盆、 蒔分Z者彌的徉语、1. 扫宿请锂常臣叭规记口事亦二，撞文勻医A帕叟三忸于：tr2. 时颐注阴羟部曲比像、颜色、金0电也聞标准色累羽 中标作岛话擔吏舷乐可用的尖童圈减鮫件建议为FSH口 II勿附杵诵弐,补|Miin丰导開匿Bi卢巨切局叫注m:7* _ Ki- 4 .n下瞬弋祢HI更| 血N 丰 itij -X电旳磋j

9、h w01早：祥性壮繼谢为优肩2.使用格式刷批量设置样式设置完一个按钮，还有另外两个按钮需要设置，这时候可以利用格式刷，类似于 中格式刷的功能，能够将部件的样式批量进行设置（注意：不能利用格式刷复制部件的 操作和大小）。word吒q.批阕吐第不攻件业牛分 95分莊 ftttMMtIJ- j i本汀拒业否分 95#老V的泮语、1、更硝咽矩制血鼎现恰用.丽匕琨壬的再42. 谡计耶壬调左H.出卫一 fife. F寸入和同飯伍色疋外真中标特品林交穗的*可用的矢量同侦野环6脚I】和所用别超 tS_d* 比下歸JI “7r#额的翳K图禎请疇剤在3规格的艮面上柳交希片慵直不対2.谡计图麵锂躬暮祁分比孤帧色、

10、尺寸*&金旬泌6 氛中标悟品苗鴉交宪甦的、可用的矢则瑚I文柞f建创 o imwft 丘養釧*3. 设置按钮点击后（被选中）的样式选中按钮“作业批阅结果”，右键 编辑按钮形状 编辑选中样式，在弹出的对话框中 设置第二种样式（黄底黑色加粗字体），如下图：4. 生成原型预览在预览中我们发现，当鼠标滑过这三个按钮时，按钮变换样式，但是点击某一个按钮进 行内容切换时，却没有显示选中的样式，如何让按钮点击后改变样式呢？才，匕休点评1.枣蓿请经制在衆規裕的氏面上，桐交的图片精度T300DPl!沢设计医须注圳各訓比例、孤色.尺寸庶及公石标准邑奚列：史中标作品请提乂謔的、可用的矢莹图形轉文件l建议为际或乂珀所片

11、到的手体：氛确认作品中标之后还需要有一定的修茂紺佬園聽还请说计肴配合交箭问題并直至懾改完J6 益躺対最密袖认井支忙戏取L可酣带光昌或即加文件5.投标作品应为作看咸盏总新创作、菲岌表、具有知识产权的徉乐队简卷前意瀚述请另附転说明才捋靑作业T药*祁护甘饪业马云的非吐 雷乍的花业汤堀克鲁审怖忙业5. 设置按钮点击后改变样式选中第一个按钮“作业批阅结果”，然后再右侧事件编辑栏中选中“on click （点击时）用例1”进行编辑（注意：前面已经添加了一个事件，点击时显示对应的内容），在弹出的 对话框中选择“设置部件为选中状态“，在右侧选择按钮”作业批阅结果“后确定，如下图IT1MSW * 51 Saof

12、itWwen*2 iai*fti- wm:血#总体点评X电击馳加R不鋼了 ?1国稿请绘制在裁規框的矗面上.揑交的圉片菲瓯不（吁300DP匚人間亠窖庶注明各卸分比洌、颜色、尺寸氏尺呑司标進色坯刮.3、中标作品请理交完禮的、可用的矢董圈Jf件憾跆PSD畝D和商冃刮曲字偽4、購认作品中标之后辻需更有远的修改轴化周期还请设计看配念交流间题并直至修改究 芫成后为宓忤昇*忖脅曲习囲孰楚或ph 口戸疋件氣扛:杆作品商炸者或公司新作、未襄苏 具有却识产収的件弘氣閒叢常意阐呻请闰瞄紙说明#参苯作业卞工汗戸1皿马云的作訂 吾至闫1乍仆 污讯寺吕才洗诈症7. 指定按钮组选中本次TAB切换中的三个按钮，右键 编辑按钮

13、形状 指定按钮组，在弹出的对话框 中输入按钮组名称，例如“查看作业按钮组“，如下图： 99.NC孟眄卡业耳分C门 WfeiRJ讪标评先iX rF.Uty.#上帅抓陆1、稣驱制在詁氛谡计圏须注明备梆爰合iq、,.r电标作品请asm *耨山*斤科讦麻冲Fit?：OJtfeW 4滩 lt)* frit二 chkki： l f.i轡一IH nH*匚 ”0.= -倒儘E用 P口r汩 strm匕社M KI8 .本次作业被评为优并TF业.Z颉抵平番1. 图幅脸制在A4规韬的m面匕握交的E2. 诙图硕注明&部芬比孤颜氐尺刊头中标作品请提交完劇h订用的去雷图O问可附订Tspitrr8. 完结，预览本小结最终效果佯业眦闻1価卑*存业口除点讦北俯低业何盲1点狂梃購二鳴sm,筆一你血複施耒蛊中的状态了!L，圈蹈诸生制在讨规塔削页面上，猱丈的圄戶劭氏粪兀低于。烁：；2. 1&帼頷注明各部分比氷關鱼*尺寸议恳公司标准邑蔡帥氛中标作聶谪掃言宥鑒的、可甲的去韋图刑磁件龍议为丹國D和所甲到的字检4、1ft认怔品中标之后，还磅更有一宝的佛理鉅化周朋*还请设