作為一個還沒有出道的新人，在看大家的大咖啡產品的路上更加興奮和謹慎。提筆在于記錄產品路線。也歡迎大家一起交流學習。(大衛(wèi)亞設)。

這里我就用一個主界面和多層的動態(tài)面板內嵌（只是鉆研和加深交互練習，平常還是跳轉鏈接更方便）。演示一下關于QQ界面的一些交互效果，也希望和大家一起學習和進步。

下面是制作完成后的三大界面（消息、聯(lián)系人、動態(tài)）內容；

下面分享一下制作過程。如有錯誤，歡迎指教；

1、制作部件和構建大致框架

（1）啟動界面

從部件庫拖入iPhone外殼（網上有分享的該部件庫）；

從部件庫拖入圖形部件，通過托拉拽的方式使之與iPhone外殼部件的屏幕大小差不多，并放置于上，導入啟動界面圖片（手機QQ啟動截屏獲取該素材）；

將圖形部件轉換為動態(tài)面板，狀態(tài)1命名為screen（啟動界面），增加狀態(tài)2命名為interface（放置消息、聯(lián)系人、動態(tài)三大界面）；

（2）“消息”/“聯(lián)系人”/”動態(tài)“界面

點擊進入狀態(tài)2（interface），進行三界面共有部件制作，手機通知欄和手機QQ底部選項卡，如“21:00”、“中國聯(lián)通”等皆為標簽部件，框框、圓形等皆為矩形部件（拖入矩形部件，右上角有個灰色小圓，單擊即可出現(xiàn)可轉換圖形列表），圖片在此省略，用占位符代替；

消息列表用中繼器部件制作，向其中添加矩形、標簽等，與底下的數(shù)據集命名相同，分別為“name”、“neirong”、“time”、“num”，并在項目交互里的每項加載時寫用例，在用例編輯對話框左側點擊設置文本，在右側的配置動作中選擇部件(以name部件為例)，點擊右下側的設置文本框后的“fx”字樣，然后點擊"插入變量或函數(shù)..."，選擇“i”。其余幾個部件類似。然后中繼器數(shù)據就能夠正常顯示；

將中間部分（除卻上面的通知欄和底下的選項卡）的所有部件選中，鼠標右擊，轉換為動態(tài)面板（命名為jiemian），給此面板增加state2,state3，state1,2,3分別命名為iMessage、friends、playing（對應消息、聯(lián)系人、動態(tài)三界面）；

分別進入jiemian動態(tài)面板的狀態(tài)“friends”和“playing”，制作部件，多為矩形部件和標簽的制作。然后將需要被拖動到部件選中，轉換為動態(tài)面板，分別命名為“friends-tuodong”和“playing-tuodong”；

另外，在消息界面，我們可以看到，點擊上面的”消息“和”電話“又可切換界面，所以我們進入入jiemian動態(tài)面板的狀態(tài)”iMessage“，將中繼器和搜索框等選中，轉換為動態(tài)面板（命名為”iMessage-tuodong“），增加狀態(tài)2，state1和state2分別命名為”xiaoxi“和”dianhua“；

進入狀態(tài)“dianhua”，制作相應部件，多為矩形部件變換所得（因為部件并不多，所以這里沒有用中繼器）；

至此，我們的部件制作和大體框架就已經全部完成了，接下來就是用例事件的編寫啦~~

2、小用例事件

（1）啟動界面

打開手機QQ后，會從啟動界面過渡到消息界面，因此我們在主界面的下方頁面交互里，為“頁面載入時”添加用例，雙擊打開用例編輯器。單擊用例編輯器左側的“添加動作”-“其他”-“等待”，設置等待時間為2000毫秒，然后再單擊用例編輯器左側的“動態(tài)面板”-“設置面板狀態(tài)”，設置面板狀態(tài)為“interface”；

（2）“消息界面”

進入動態(tài)面板狀態(tài)“interface”，為底部選項卡上的部件，添加選中變色效果。單擊占位符，點擊右側"部件屬性與樣式"-”選中“，為其添加選中時填充顏色為藍的效果（標簽部件中則是字體顏色變藍效果），其余五個類似。我們再將三個分別帶有”消息“、”聯(lián)系人“、”動態(tài)“的標簽選中，然后在右側的"部件屬性與樣式"，輸入該選項組名稱為”1“，類似的是，將三個占位符也選中，設置選項組名稱為”2“；

我們移入三個圖片熱區(qū)，分別命名為“iMessage”、“friends”、”playing“。覆蓋在所屬位置的占位符和標簽上。以“iMessage”為例，單擊后，在右側的”部件交互與說明“面板中，為”鼠標單擊時“添加用例，打開用例編輯器。設置占位符”iMessagejuxing“和標簽”iMessage“為選中狀態(tài)，設置動態(tài)面板”jiemian“狀態(tài)為”iMessage“，移動動態(tài)面板” iMessage-tuodong“到絕對位置（5,50）（這個事件的作用是保證切換選項卡的時候，，消息界面的位置是固定的，不會發(fā)生偏移，如下圖所示）。剩余兩個圖片熱區(qū)“friends”、”playing“用例類似，如下圖所示；

進入“jiemian”動態(tài)面板中的狀態(tài)“iMessage”，對上面的“xiaoxi”、“dianhua”部件，我們將其選中，設置為選項組“3”，再編寫用例，以“xiaoxi”為例。在“部件屬性與樣式”面板中，單擊“選中”，設置選中時，字體顏色為藍色，部件填充顏色為白色，在“部件交互與說明”面板中，為“鼠標單擊時”添加用例事件，設置動態(tài)面板“iMessage-tuodong”的狀態(tài)為“xiaoxi”，同時設置“xiaoxi”部件為選中狀態(tài)（下圖所示）。另一個部件“dianhua”類似，下圖所示；

我們再從部件庫里移入一個部件“經典菜單-垂直”，填寫相關文字，命名為“biao”，設置隱藏。對上面的加號部件，添加“鼠標單擊時”用例事件，設置為切換“biao”部件的隱藏性；

一些簡單的小用例已經寫完了，剩下的就是大部頭，也就是拖動事件了，為了深入練習動態(tài)面板的嵌套，所以我把三個面板狀態(tài)的拖動事件全部寫在一個部件上，導致在編寫時有點卡頓，不建議如此寫哦，除非是為了學習而已（用跳轉其實就可以輕松完成拖動事件了?。?/p>

3、拖動事件

我把所有的拖動用例放在了“interface”面板下的“jiemian”面板；在“jiemian”面板里包括了三個平行的面板，也就是被拖動的三個面板，分別是“iMessage-tuodong"、"friends-tuodong"和“playing-tuodong”三個面板，下圖所示面板的嵌套關系；三個面板的拖動用例是差不多的，在此用“iMessage-tuodong"面板的拖動事件說明講解；

（1）設置滑動方向

選中“jiemian”面板，在右側的“部件交互與說明”面板中，為“拖動時”添加用例事件，打開用例編輯器，添加動作“移動”，在“配置動作”選擇“iMessage-tuodong”面板，選擇“垂直拖動”；

(2)拖動距離最大值設定

在使用QQ時，拖動一定距離則無法拖動。我們選中“jiemian”面板，在右側的“部件交互與說明”面板中，為“拖動時”添加用例事件，打開用例編輯器，點擊“添加條件”，條件為“假如被拖動的'iMessage-tuodong'的top值大于150，并且'jiemian'面板的狀態(tài)為'iMessage'“。如果符合上述條件，我們就移動”iMessage-tuodong“面板到最大拖動距離位置（5,150）（顯示shuaxin指的是顯示轉圈的刷新圖標，這里略過）。同樣，當我們向上拖動時，我們也有最大距離值。類似的，添加的條件為”假如被拖動的'iMessage-tuodong'的bottom值大于404，并且'jiemian'面板的狀態(tài)為'iMessage'“。那么我們就移動”iMessage-tuodong“面板到最大拖動距離位置（5,-100）。如下圖所示；

（3）拖動延遲效果

在使用QQ時，刷新動作拖動頁面，發(fā)現(xiàn)總有一種延遲的效果。我們選中“jiemian”面板，在右側的“部件交互與說明”面板中，為“拖動時”添加用例事件，打開用例編輯器，點擊“添加條件”，條件為”假如被拖動的'iMessage-tuodong'的top值大于50，并且'jiemian'面板的狀態(tài)為'iMessage'“。那么使得被拖動的'iMessage-tuodong'面板移動一定的相對距離，為鼠標在Y軸移動的距離（DragY）的一半，方向為反方向。同樣，向上拖動時，也是這樣。只不過條件稍變。如圖所示；

（4）拖動結束返回用例

我們選中“jiemian”面板，在右側的“部件交互與說明”面板中，為“拖動結束時“添加用例事件，打開用例編輯器，點擊“添加條件”，條件為”假如被拖動的'iMessage-tuodong'的top值大于50，并且'jiemian'面板的狀態(tài)為'iMessage'“。那么拖動結束時，移動“iMessage-tuodong”面板到絕對位置（5,50），再增加一個“線性”動畫效果，時間為500毫秒。類似的，向上拖動的，條件類似，如圖所示；

那么這里就已經完成了所有的講解了。

下面把“jiemian”面板上所有的用例貼上來；

小白分享~~~互相進步！大神輕噴哦~最近在學習相關需求文檔的編寫，待到有感悟的時候一同分享~

總結：

在看過眾多大神見解以后，明白鉆研Axure是不理智的，日常夠用就好，能夠將想法具體化給開發(fā)、UI看明白即可，這就是一個好的原型。

高保真原型的制作著實沒有任何必要，初期頻繁修改需求，你又有多少精力去修改你的高保真原型圖呢？

望所有想入門的新人，都可以謹記這一點，也包括我。

鏈接分享

作者：MC.boyiter（微信號cjw811720747），一名在校僧，歡迎交流~求實習~

本文由 @MC.boyiter 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。