原型設(shè)計-如何用axure實現(xiàn)復雜的tab切換效果

1、軟件界面原型是交互設(shè)計師與需求工程師,產(chǎn)品經(jīng)理，研發(fā)工程師溝通最直觀的工具，在做一個產(chǎn)品成型的框架之前，先做一個簡單的框架， 這個框架包括產(chǎn)品的界面排版和布局，頁面元素，業(yè)務(wù)流程，甚至可以表現(xiàn)最終產(chǎn)品需要實現(xiàn)的各種效果，一個完整的，優(yōu)秀的界面原型能夠幫助設(shè)計師，軟件工程師等更好的了解產(chǎn)品需求，從而最大限度的實現(xiàn)預(yù)期的功能。但是太粗糙，也可以用visio, excel 比如TAB標簽的動態(tài)切換、定 專業(yè)的axure原型設(shè)計工具在axure 6.5 版本能制作原型的工具有很多，一張紙一支筆就可以畫草圖，等，可是實現(xiàn)起一些復雜的交互操作就顯得心有余力不足了， 位頁面錨點、全選效果，登陸框效果、圖片輪

2、播等等，因此， 設(shè)計原型的過程中使用方便，效率高，而且能模擬的效果很多，目前我使用 由于AXURE入門比較簡單，而且互聯(lián)網(wǎng)上有很多基礎(chǔ)教程，在這里，我主要寫一些在日常 工作中使用AXURE設(shè)計產(chǎn)品原型經(jīng)常用到又有一些設(shè)計復雜度的，結(jié)合我的使用經(jīng)歷，介 紹給大家如何實現(xiàn)TAB切換的動態(tài)效果AXURE RP 6.5 軟件一個首先想好一個需要 tab切換效果的主題，這里我選擇學生查看任課教師對他上交的作業(yè)的批 改情況，需要查看的包括老師給自己作業(yè)的分數(shù)和評語，老師對全班作業(yè)的點評以及發(fā)布哪些同學的作業(yè)可以參考，最后能看到自己本次作業(yè)提交了什么內(nèi)容，根據(jù)這個主題，進行三種內(nèi)容的切換。拖拽三個矩形，調(diào)整

3、成高 35,寬110的按鈕樣式，并列排好，在按鈕上分別寫上“作業(yè)批 閱結(jié)果” “作業(yè)總體點評” “我的作業(yè)內(nèi)容”，然后在按鈕的下方再拖拽一個矩形，我們將在 矩形區(qū)域顯示不同的內(nèi)容，如下圖：1. 在矩形區(qū)域添加第一個按鈕要顯示的內(nèi)容，然后選中內(nèi)容和矩形，右鍵轉(zhuǎn)換為動態(tài)面板!注意：為什么不直接拖拽一個動態(tài)面板呢？直接拖拽也是可以的，但是先添加動態(tài)面飯 再往里面寫內(nèi)容的鼠標操作比這么做要麻煩，這里提供一種便捷方法，后面還會陸續(xù)提 到其他的便捷方式來提高原型制作效率。作業(yè)Hi就當單作熾扯點洋密作里內(nèi)宕C43<3本火作業(yè)籽分95分本沃作業(yè)被許為優(yōu)務(wù)rr業(yè)I1、圖信砌:為J在U觀信豹為而上，提必的圈

4、片精度茶眸詢DPLL設(shè)計倒須性明各部分比倒、酸色、尺寸煩公司枷電系列I 以中橋作品請?zhí)峤煌昶?、可用的矢量圈形錚文件:建選腎性粘距goL?G-對洵）TOIQ2. 轉(zhuǎn)換成動態(tài)面板后，雙擊面板，在彈出的動態(tài)面板管理對話框中對面板進行命名“學生查看已批閱作業(yè)”，然后對面板的狀態(tài)1重命名為“作業(yè)批改結(jié)果”，代表這個狀態(tài)里面包含的作業(yè)批改結(jié)果相關(guān)信息3. 接下來，還要在這個面板管理對話框中增加兩個面板狀態(tài)，分別用來顯示作業(yè)總體點評信息和學生的作業(yè)內(nèi)容信息，并按照步驟3進行重命名，如下圖左北主同始累 作工事體點戶I懿JlH棉本次忤船侍分 95分 &次作業(yè)弟評為 伐秀-VF業(yè)4. 接下來給步驟4新添加

5、的兩個狀態(tài)添加顯示內(nèi)容，再 axure界面的右下方有一個動態(tài)面 板管理區(qū)，可以看到我們剛剛做好的動態(tài)面板的名字以及所包含的所有狀態(tài)，雙擊狀態(tài)“作業(yè)總體點評”添加內(nèi)容，然后重復本步驟將所有的內(nèi)容添加好，如下圖：I.四，蚌*海曲1召百上“虹世TH君艮耳為Mn=J.hj-TJL己林點，#少L*r用的關(guān)胃曲版艾1*4快網(wǎng)汀尊虹宜巧用利酌寸推，L 調(diào)U。鳥中部二此it-Hit 漢Him It lE4Ad BttzriFIBHU*究m樣取河菱忖用IC H /加 Acm艾ff，5、投行布岳色F作宙事土ZlilM乍.辛軍E-彳累刨理肖作的呵FT販電5.下面是最關(guān)鍵的設(shè)置了，點擊按鈕顯示對應(yīng)的內(nèi)容首先選擇按鈕“

6、作業(yè)批閱結(jié)果”，在頁面的右側(cè)部件屬性面板中對“onclick（點擊時）”事件添加用例，在彈出的用例面板中選擇“設(shè)置面板狀態(tài)為指定狀態(tài)”，在右側(cè)配置動作下找到剛剛我們添加的“學生查看已批閱作業(yè)”動態(tài)面板，在選擇狀態(tài)中指定顯示第一 個狀態(tài)“作業(yè)批閱結(jié)果”。如下圖：如果你希望點擊后顯示內(nèi)容時有點特效，在進行進行動畫中進行設(shè)置6.接下來設(shè)置第二個按鈕 “作業(yè)總體點評”，按照步驟6設(shè)置顯示動態(tài)面板的狀態(tài) 2 “作業(yè) 總體點評”，然后設(shè)置第三個按鈕，如下圖：,乎IIIoII水皿遍陛濯作居心。& 'tenfcjj：方w §暮旅作y村 95分/對心怦MI-匿既牛部在T覘常的r面上、報

7、如包收誦Kft工iwr-h IblTMmHHW尊，Uh艮寸吐艮甚司剽j巾標宅魅的祈兩倒主1側(cè)11齡#11事杯；：，拓11«甬副用孕肌O箕新?忙"如甘:1隹_ IfcKJ7.生成原型，在瀏覽器中預(yù)覽這個TAB切換效果吧，生成原型時可以選擇瀏覽器，不過有Pi i MCiCl Z" 士J zaotfwim BWBJH iTvWsFTl 1*. *?F 咋些瀏覽器需要一些設(shè)置，如 chrom，這里選擇IE,如下圖在IE中我們點擊三個按鈕，看到內(nèi)容已經(jīng)隨著按鈕變化了，而且還有淡入淡出的效果哦Lfs ai4 邛DtPhs1 作典炸冬評 |l裁的ItiL內(nèi)自* J U3J 1/

8、.也扯點怦iJm ?=國'I、酩謂洲在"規(guī)*£竹而再上一覷的闕片隔國下批干神婀L.ftttS磁W.州、g F十j -心可折盤伊土4中祎作品潸JfEESffl.廠用Cl為眠甲群為*4,洋后用利護序/、4.諂讓作品中標一后.任獸懸有一若由旅仲尋11.君呼頊請*廿宙配合玄宿啊世并2手陟哈完左苣扯必ti.L*吏觸官用*茂州季猝成mr-M忤，技蝸作品應(yīng)訪作右或£瓦骨創(chuàng)岸、未整.表、具有拓正產(chǎn)作司作品，%、皿纏封蛔1附瞄明如何實現(xiàn)TAB切換時按鈕跟著變換樣式？不過，細心做原型的你是不是發(fā)現(xiàn)按鈕沒有什么效果呢，點擊與不點擊都一樣呢？如果 鼠標移入有效果，點擊后也有效果，

9、那么交互就更好了，原型也更接近真實體驗了，那 么下一節(jié)介紹如何在 TAB切換時同時變換按鈕的樣式，如下圖故的仆業(yè)的吝/皿.51. 國稿請嬉制醇堿珞的頁面上，操交的圖片精度不眠于網(wǎng)皿知隊設(shè)計圖績注明各部分比例-微色、尺寸以及公司標準色系列：職中標作帝者般完墊色、再用的矢量彩源文件辟議為psd成m和.聽用到的字體：i. Eft認存品中標之后，逐毒蔓有一定卻降改攜化周期，還請設(shè)計靠楮交演間爬并直至修改完Ji 完淺后為岸.細地人并更付虞用可酎帶光盤茹PC PP汶杵）公投停作品應(yīng)為作者或會司ftfr創(chuàng)作' 未炭表、尋有知識產(chǎn)權(quán)的作品.8*簡復創(chuàng)意闡述請月酎紙說明/蘇考作業(yè)下京皇吊哲色|匚11,現(xiàn)

10、忌茁作北 ，W聿所任業(yè)律Ifi再蝦酌411原型設(shè)計2 如何實現(xiàn)TAB切換時按鈕跟著變換樣式?前言：軟件界面原型是交互設(shè)計師與需求工程師，產(chǎn)品經(jīng)理，研發(fā)工程師溝通最直觀的工具一個完整的，優(yōu)秀的界面原型能夠幫助設(shè)計師，軟件工程師等更好的了解產(chǎn)品需求，從而最大限度的實現(xiàn)預(yù)期的功能。AXURE原型設(shè)計工具能夠?qū)崿F(xiàn)很多復雜的交互效果，比如TAB標簽的動態(tài)切換、定位頁面錨點、全選效果，登陸框效果、圖片輪播等等，由于 AXURE入門比較簡單，而且互聯(lián)網(wǎng)上 有很多基礎(chǔ)教程，在這里，我主要寫一些在日常工作中使用AXURE設(shè)計產(chǎn)品原型經(jīng)常用到又有一些設(shè)計復雜度的，結(jié)合我的使用經(jīng)歷，介紹給大家繼續(xù)上一節(jié)：如何實現(xiàn)T

11、AB®換時按鈕跟著變換樣式？AXURE PR 6.5 版本一個已經(jīng)利用按鈕和動態(tài)面板實現(xiàn)鐵環(huán)效果的原型（或者利用上節(jié)課的原型）今天的設(shè)計目標：當鼠標移動到TAB標簽按鈕時，按鈕樣式發(fā)生改變（紅底白色加粗字體），當點擊按鈕切換顯示內(nèi)容后，按鈕樣式發(fā)生改變（黃底黑色加粗字體）最終顯示如下：本或作業(yè)*有 95分本衩A業(yè)瑚豆為優(yōu)等1下業(yè)X老!B的評語L圖稿請檜制在H規(guī)格的頁面上，提交的圖片精度不4氐于300DPI,2、設(shè)計圖頒注明答郃汾比例、頑色' 尺寸成及公司稀色系列；中標柞扁芳想變完超的、甫用的矢匿圖的?文件I建甘為P刃或?。豪鶎さ降牡堋笨谂鷨柛郊ama附片-COR-*1.編

12、輯鼠標移入按鈕時的樣式選中按鈕“作業(yè)批閱結(jié)果”，右鍵 >>編輯按鈕形狀 >>編輯懸停樣式，在彈出的“設(shè)置懸停樣式”對話框中選擇填充色，字體顏色，加粗等效果，勾選對話框底部的“預(yù)覽”功能，能夠預(yù)覽設(shè)置完時候的樣式（需要設(shè)置成什么樣式可根據(jù)自己的設(shè)計）Pn何PIt棒業(yè)批閱皆.同的時醫(yī)吞匚口於朝DE本仲曲本次作螟正為優(yōu)壽作業(yè)2.造陽海N*/去而fU圖畫 幻 tStbE 3、中標fOMt* Ptth dt皿柄E書H1S=|：G),MP)*柄用罔主尚*glO*EM*用到的字體】林瓦做k任m芭二峰式攔芝田油任昭回與eutr?字可肆a 隹w攻字尊二*立，ff 口忤業(yè)分本況任扣糧討為V

13、C Wn早太樣直5字體Fl豐學12/老師的萍固#翻供Bi點匝叫慘酗i.圈宿請差最nr”艦佶們貝如上,援文為圖片輯金不慎于"ml_4 ： = l致計圖邠i明各郃嚀蜘.瓠色、尺土燧公司幅準色系M1m下別就',-i-vA.-湛女壽尋、W州任甘全-.：沖女得，走寸F:-一: |-.I 球臼彳度捌牛上心擺作# 豐T 二* B114_： docx>M WM擋J sas& J gI IM茂!fiLL板蜘使用格式刷批量設(shè)置樣式word設(shè)置完一個按鈕，還有另外兩個按鈕需要設(shè)置，這時候可以利用格式刷，類似于中格式刷的功能，能夠?qū)⒉考臉邮脚窟M行設(shè)置（注意：不能利用格式刷復制部件的

14、 操作和大?。?。任q.批閱蒞手矽曲購 95分4.次脈明TK 1/琲的甬f1. 朋稽請搖剖在H規(guī)格的曳面上.蛔金啊片精藍不對2. 設(shè)計圖緘拄明楙盼比例、顏色、尺寸it村司榆準q ，、中標作品造粗交精的、可用的矢皿卻女件（這叫q stsm 5裝號部忤3. 設(shè)置按鈕點擊后（被選中）的樣式選中按鈕“作業(yè)批閱結(jié)果”，右鍵 >>編輯按鈕形狀 >>編輯選中樣式，在彈出的對話框中設(shè)置第二種樣式（黃底黑色加粗字體），如下圖：%本;魂作業(yè)鎮(zhèn)分 95«<haIJ-1 i,#1崎茨：二語1、/咨胃船制丘畚現(xiàn)柘部.加百二礙T的司A:、酬t乩匚住調(diào)音胡北擇-幃色-F寸以及2可橋隹也

15、安邛L中妹作品清物交充塑的,可用的式童圈豚更件應(yīng)磁帝IJ藏隋用到國4. 生成原型預(yù)覽在預(yù)覽中我們發(fā)現(xiàn)，當鼠標滑過這三個按鈕時，按鈕變換樣式，但是點擊某一個按鈕進 行內(nèi)容切換時，卻沒有顯示選中的樣式，如何讓按鈕點擊后改變樣式呢？童的作業(yè)內(nèi)吝/電體點評1. 圖稿請益制在.7規(guī)格的頁面上，相交的圖片精度不咐于35DP、八設(shè)計醫(yī)質(zhì)注明與部蘇比惻、踱色尺寸段艮公司將推邑丟列IL中標作品請?zhí)醀蔻的、可用用矢童圖形獐文件建設(shè)為F歸或如和所廳敢的字怕L確認作品中標之后，近需要有一定的修茂軸化同期.還請設(shè)計者配合交箭間霆并直至修改完J6 充感后為最另前認并支懺胃用.可附村也或牝5.投櫬作品應(yīng)為作者由罷氏新創(chuàng)作-

16、未發(fā)春 具有知識產(chǎn)權(quán)的作品.磯簡要刨意俑述請另附敘說明/券清柞業(yè)T,宇,奉曾任業(yè)馬云的作廿 宰的作化 湯朔克魯街嵌&業(yè)5. 設(shè)置按鈕點擊后改變樣式選中第一個按鈕“作業(yè)批閱結(jié)果”，然后再右側(cè)事件編輯欄中選中“ onclick （點擊時）用 例1”進行編輯（注意：前面已經(jīng)添加了一個事件，點擊時顯示對應(yīng)的內(nèi)容），在彈出的 對話框中選擇“設(shè)置部件為選中狀態(tài)“，在右側(cè)選擇按鈕”作業(yè)批閱結(jié)果“后確定，如下圖6. 預(yù)覽效果完成步驟5后預(yù)覽效果，此時部件點擊后變換了樣式（如下圖1）,不過當再點擊第二個按鈕時卻不能取消掉上一個被選中的樣式（如下圖2）,怎么辦呢？周標移從串式*豐扶作業(yè)總有 95分本權(quán)作業(yè)

17、被評為T*tTT業(yè)/若原的評語L圖稿1青檜制莊H規(guī)格的依面上.提交的圖片精度不噌于300DPI,L設(shè)計圖緘注明答郃汾比例、預(yù)竺-尺寸以及公司標準色系列；八中標作品請?zhí)峤煌暾摹⒛怯玫氖噶繃次募﨩懼為玲響雙I）和所用到的字咻口棺問附件£gfemt PfH牛 r.ftr.y許liJt村最累ITli以陣晝開./總體點砰x點缶耳他晌蝦眄了 ?1囹稿請建制在VI規(guī)格的頁面上，拽交的囹片轉(zhuǎn)度不（職TOODPL'遂圖頒注明各郃濘比例、兩色、尺寸快及會司標準色系列.3、中標作品請?zhí)峤煌暾?、可用的矢量圈形源況件健議為PS讖M）和片用到於字的4隅認作品中標之后，汪需要看是的修曲細化同期，還請

18、設(shè)計看配虐交虢間姬并直至修改削 芫成后為剝期井我付會用，可防¥光世或叩L匹5殳件質(zhì)投杞作品或作者或公司新tl作、天發(fā)蘇 其有抑識產(chǎn)權(quán)削作品.牝前族找意闌刑清捋明抵說明/參考作業(yè)f上矽虧IF吐馬士的作d，需車字作斗 , E盅寺=甲匪作:£7. 指定按鈕組選中本次TAB切換中的三個按鈕，右鍵 編輯按鈕形狀旨定按鈕組，在彈出的對話框 中輸入按鈕組名稱，例如“查看作業(yè)按鈕組“，如下圖：BT- - - o 印f 時偵fEW&iJu=SE古1 L r g 頸口口此?卡業(yè)，落分弓理蛾眄/老伽9坪酒I、尾誦偶七制在U才涓合陋眼o：eh骨蹇，功，中3檢心* flni偵胃牛U ,短*我直P作傾3. 諼計圖須注明各朝 3、9標布品請?zhí)崾飞浔敬巫鳂I(yè)被評為廄*作業(yè)口二閘 3（忡件享;欠作也導分9 5分z容噸非語L圖桐請檢制在朋規(guī)格的頁面L 提交的2、暇出圖須注明各部分比例、疏也 尺寸3、印標作品清提交完摟的、可用的矢雷圖 ftTr ex：?.8. 完結(jié)，預(yù)覽本小結(jié)最終效果作業(yè)hti可值甲 你也門話心評 也曲作業(yè)佝*f、點擊本貌二用榆七第一奪捺槌皿成柵中的醒了！L圖稿請紗制在A項焰削頁面上，提交的圖月羊燮工低于逆岫曰2. 岫9策注明各部分比