這里我就用一個(gè)主界面和多層的動(dòng)態(tài)面板內(nèi)嵌（只是鉆研和加深交互練習(xí)寝受，平常還是跳轉(zhuǎn)鏈接更方便）。演示一下關(guān)于QQ界面的一些交互效果固惯，也希望和大家一起學(xué)習(xí)和進(jìn)步柑晒。
下面是制作完成后的三大界面（消息、聯(lián)系人囚衔、動(dòng)態(tài)）內(nèi)容挖腰；
下面分享一下制作過程。如有錯(cuò)誤练湿，歡迎指教猴仑；
1、制作部件和構(gòu)建大致框架
（1）啟動(dòng)界面
從部件庫拖入iPhone外殼（網(wǎng)上有分享的該部件庫）肥哎；
從部件庫拖入圖形部件辽俗，通過托拉拽的方式使之與iPhone外殼部件的屏幕大小差不多，并放置于上篡诽，導(dǎo)入啟動(dòng)界面圖片（手機(jī)QQ啟動(dòng)截屏獲取該素材）崖飘；
將圖形部件轉(zhuǎn)換為動(dòng)態(tài)面板，狀態(tài)1命名為screen（啟動(dòng)界面）霞捡，增加狀態(tài)2命名為interface（放置消息坐漏、聯(lián)系人、動(dòng)態(tài)三大界面）碧信；
（2）“消息”/“聯(lián)系人”/”動(dòng)態(tài)“界面
點(diǎn)擊進(jìn)入狀態(tài)2（interface），進(jìn)行三界面共有部件制作街夭，手機(jī)通知欄和手機(jī)QQ底部選項(xiàng)卡砰碴，如“21:00”、“中國聯(lián)通”等皆為標(biāo)簽部件板丽，框框呈枉、圓形等皆為矩形部件（拖入矩形部件，右上角有個(gè)灰色小圓埃碱，單擊即可出現(xiàn)可轉(zhuǎn)換圖形列表）猖辫，圖片在此省略，用占位符代替砚殿；
消息列表用中繼器部件制作啃憎，向其中添加矩形、標(biāo)簽等似炎，與底下的數(shù)據(jù)集命名相同辛萍，分別為“name”悯姊、“neirong”、“time”贩毕、“num”悯许，并在項(xiàng)目交互里的每項(xiàng)加載時(shí)寫用例，在用例編輯對(duì)話框左側(cè)點(diǎn)擊設(shè)置文本辉阶，在右側(cè)的配置動(dòng)作中選擇部件(以name部件為例)先壕，點(diǎn)擊右下側(cè)的設(shè)置文本框后的“fx”字樣，然后點(diǎn)擊"插入變量或函數(shù)..."谆甜，選擇“item.name”启上。其余幾個(gè)部件類似。然后中繼器數(shù)據(jù)就能夠正常顯示店印；
將中間部分（除卻上面的通知欄和底下的選項(xiàng)卡）的所有部件選中冈在，鼠標(biāo)右擊，轉(zhuǎn)換為動(dòng)態(tài)面板（命名為jiemian）按摘，給此面板增加state2,state3包券，state1,2,3分別命名為iMessage、friends炫贤、playing（對(duì)應(yīng)消息溅固、聯(lián)系人、動(dòng)態(tài)三界面）兰珍；
分別進(jìn)入jiemian動(dòng)態(tài)面板的狀態(tài)“friends”和“playing”侍郭，制作部件，多為矩形部件和標(biāo)簽的制作掠河。然后將需要被拖動(dòng)到部件選中亮元，轉(zhuǎn)換為動(dòng)態(tài)面板，分別命名為“friends-tuodong”和“playing-tuodong”唠摹；
另外爆捞，在消息界面，我們可以看到勾拉，點(diǎn)擊上面的”消息“和”電話“又可切換界面煮甥，所以我們進(jìn)入入jiemian動(dòng)態(tài)面板的狀態(tài)”iMessage“，將中繼器和搜索框等選中藕赞，轉(zhuǎn)換為動(dòng)態(tài)面板（命名為”iMessage-tuodong“）成肘，增加狀態(tài)2，state1和state2分別命名為”xiaoxi“和”dianhua“斧蜕；
進(jìn)入狀態(tài)“dianhua”双霍，制作相應(yīng)部件，多為矩形部件變換所得（因?yàn)椴考⒉欢啵赃@里沒有用中繼器）店煞；
至此蟹演，我們的部件制作和大體框架就已經(jīng)全部完成了，接下來就是用例事件的編寫啦~~
2顷蟀、小用例事件
（1）啟動(dòng)界面
打開手機(jī)QQ后酒请，會(huì)從啟動(dòng)界面過渡到消息界面，因此我們?cè)谥鹘缑娴南路巾撁娼换ダ锩觯瑸椤绊撁孑d入時(shí)”添加用例羞反，雙擊打開用例編輯器。單擊用例編輯器左側(cè)的“添加動(dòng)作”-“其他”-“等待”囤萤，設(shè)置等待時(shí)間為2000毫秒昼窗，然后再單擊用例編輯器左側(cè)的“動(dòng)態(tài)面板”-“設(shè)置面板狀態(tài)”，設(shè)置面板狀態(tài)為“interface”涛舍；
（2）“消息界面”
進(jìn)入動(dòng)態(tài)面板狀態(tài)“interface”澄惊，為底部選項(xiàng)卡上的部件，添加選中變色效果富雅。單擊占位符掸驱，點(diǎn)擊右側(cè)"部件屬性與樣式"-”選中“，為其添加選中時(shí)填充顏色為藍(lán)的效果（標(biāo)簽部件中則是字體顏色變藍(lán)效果）没佑，其余五個(gè)類似毕贼。我們?cè)賹⑷齻€(gè)分別帶有”消息“、”聯(lián)系人“蛤奢、”動(dòng)態(tài)“的標(biāo)簽選中鬼癣，然后在右側(cè)的"部件屬性與樣式"，輸入該選項(xiàng)組名稱為”1“啤贩，類似的是待秃，將三個(gè)占位符也選中，設(shè)置選項(xiàng)組名稱為”2“瓜晤；
我們移入三個(gè)圖片熱區(qū)锥余，分別命名為“iMessage”、“friends”痢掠、”playing“。覆蓋在所屬位置的占位符和標(biāo)簽上嘲恍。以“iMessage”為例足画，單擊后，在右側(cè)的”部件交互與說明“面板中佃牛，為”鼠標(biāo)單擊時(shí)“添加用例淹辞，打開用例編輯器。設(shè)置占位符”iMessagejuxing“和標(biāo)簽”iMessage“為選中狀態(tài)俘侠，設(shè)置動(dòng)態(tài)面板”jiemian“狀態(tài)為”iMessage“象缀，移動(dòng)動(dòng)態(tài)面板” iMessage-tuodong“到絕對(duì)位置（5,50）（這個(gè)事件的作用是保證切換選項(xiàng)卡的時(shí)候蔬将，，消息界面的位置是固定的央星，不會(huì)發(fā)生偏移霞怀，如下圖所示）。剩余兩個(gè)圖片熱區(qū)“friends”莉给、”playing“用例類似毙石，如下圖所示；
進(jìn)入“jiemian”動(dòng)態(tài)面板中的狀態(tài)“iMessage”颓遏，對(duì)上面的“xiaoxi”徐矩、“dianhua”部件，我們將其選中叁幢，設(shè)置為選項(xiàng)組“3”滤灯，再編寫用例，以“xiaoxi”為例曼玩。在“部件屬性與樣式”面板中鳞骤，單擊“選中”，設(shè)置選中時(shí)演训，字體顏色為藍(lán)色弟孟，部件填充顏色為白色，在“部件交互與說明”面板中样悟，為“鼠標(biāo)單擊時(shí)”添加用例事件拂募，設(shè)置動(dòng)態(tài)面板“iMessage-tuodong”的狀態(tài)為“xiaoxi”，同時(shí)設(shè)置“xiaoxi”部件為選中狀態(tài)（下圖所示）窟她。另一個(gè)部件“dianhua”類似陈症，下圖所示；
我們?cè)購牟考炖镆迫胍粋€(gè)部件“經(jīng)典菜單-垂直”震糖，填寫相關(guān)文字录肯，命名為“biao”，設(shè)置隱藏吊说。對(duì)上面的加號(hào)部件论咏，添加“鼠標(biāo)單擊時(shí)”用例事件，設(shè)置為切換“biao”部件的隱藏性颁井；
一些簡(jiǎn)單的小用例已經(jīng)寫完了厅贪，剩下的就是大部頭，也就是拖動(dòng)事件了雅宾，為了深入練習(xí)動(dòng)態(tài)面板的嵌套养涮，所以我把三個(gè)面板狀態(tài)的拖動(dòng)事件全部寫在一個(gè)部件上，導(dǎo)致在編寫時(shí)有點(diǎn)卡頓，不建議如此寫哦贯吓，除非是為了學(xué)習(xí)而已（用跳轉(zhuǎn)其實(shí)就可以輕松完成拖動(dòng)事件了Ｐ赴肌）
3、拖動(dòng)事件
我把所有的拖動(dòng)用例放在了“interface”面板下的“jiemian”面板悄谐；在“jiemian”面板里包括了三個(gè)平行的面板介评，也就是被拖動(dòng)的三個(gè)面板，分別是“iMessage-tuodong"尊沸、"friends-tuodong"和“playing-tuodong”三個(gè)面板威沫，下圖所示面板的嵌套關(guān)系；三個(gè)面板的拖動(dòng)用例是差不多的洼专，在此用“iMessage-tuodong"面板的拖動(dòng)事件說明講解棒掠；
（1）設(shè)置滑動(dòng)方向
選中“jiemian”面板，在右側(cè)的“部件交互與說明”面板中屁商，為“拖動(dòng)時(shí)”添加用例事件烟很，打開用例編輯器，添加動(dòng)作“移動(dòng)”蜡镶，在“配置動(dòng)作”選擇“iMessage-tuodong”面板雾袱，選擇“垂直拖動(dòng)”；
(2)拖動(dòng)距離最大值設(shè)定
在使用QQ時(shí)官还，拖動(dòng)一定距離則無法拖動(dòng)芹橡。我們選中“jiemian”面板，在右側(cè)的“部件交互與說明”面板中望伦，為“拖動(dòng)時(shí)”添加用例事件林说，打開用例編輯器，點(diǎn)擊“添加條件”屯伞，條件為“假如被拖動(dòng)的'iMessage-tuodong'的top值大于150腿箩，并且'jiemian'面板的狀態(tài)為'iMessage'“。如果符合上述條件劣摇，我們就移動(dòng)”iMessage-tuodong“面板到最大拖動(dòng)距離位置（5,150）（顯示shuaxin指的是顯示轉(zhuǎn)圈的刷新圖標(biāo)珠移，這里略過）。同樣末融，當(dāng)我們向上拖動(dòng)時(shí)钧惧，我們也有最大距離值。類似的勾习，添加的條件為”假如被拖動(dòng)的'iMessage-tuodong'的bottom值大于404垢乙，并且'jiemian'面板的狀態(tài)為'iMessage'“。那么我們就移動(dòng)”iMessage-tuodong“面板到最大拖動(dòng)距離位置（5,-100）语卤。如下圖所示；
（3）拖動(dòng)延遲效果
在使用QQ時(shí)，刷新動(dòng)作拖動(dòng)頁面粹舵，發(fā)現(xiàn)總有一種延遲的效果钮孵。我們選中“jiemian”面板，在右側(cè)的“部件交互與說明”面板中眼滤，為“拖動(dòng)時(shí)”添加用例事件巴席，打開用例編輯器，點(diǎn)擊“添加條件”诅需，條件為”假如被拖動(dòng)的'iMessage-tuodong'的top值大于50漾唉，并且'jiemian'面板的狀態(tài)為'iMessage'“。那么使得被拖動(dòng)的'iMessage-tuodong'面板移動(dòng)一定的相對(duì)距離堰塌，為鼠標(biāo)在Y軸移動(dòng)的距離（DragY）的一半赵刑，方向?yàn)榉捶较颉Ｍ瑯映⌒蹋蛏贤蟿?dòng)時(shí)般此，也是這樣。只不過條件稍變牵现。如圖所示铐懊；
（4）拖動(dòng)結(jié)束返回用例
我們選中“jiemian”面板，在右側(cè)的“部件交互與說明”面板中瞎疼，為“拖動(dòng)結(jié)束時(shí)“添加用例事件科乎，打開用例編輯器，點(diǎn)擊“添加條件”贼急，條件為”假如被拖動(dòng)的'iMessage-tuodong'的top值大于50茅茂，并且'jiemian'面板的狀態(tài)為'iMessage'“。那么拖動(dòng)結(jié)束時(shí)竿裂，移動(dòng)“iMessage-tuodong”面板到絕對(duì)位置（5,50）玉吁，再增加一個(gè)“線性”動(dòng)畫效果，時(shí)間為500毫秒腻异。類似的进副，向上拖動(dòng)的，條件類似悔常，如圖所示影斑；
那么這里就已經(jīng)完成了所有的講解了。
下面把“jiemian”面板上所有的用例貼上來机打；
小白分享~~~互相進(jìn)步矫户！大神輕噴哦~最近在學(xué)習(xí)相關(guān)需求文檔的編寫，待到有感悟的時(shí)候一同分享~
總結(jié)：
在看過眾多大神見解以后残邀，明白鉆研Axure是不理智的皆辽，日常夠用就好柑蛇，能夠?qū)⑾敕ň唧w化給開發(fā)、UI看明白即可驱闷，這就是一個(gè)好的原型耻台。
高保真原型的制作著實(shí)沒有任何必要，初期頻繁修改需求空另，你又有多少精力去修改你的高保真原型圖呢盆耽？
