作為一個尚未出道的新人，在看各位大咖的産品之路，更為興奮和謹慎，提筆在于記錄産品路的點點滴滴，也歡迎一起溝通和學習。

這裡我就用一個主界面和多層的動态面闆内嵌（隻是鑽研和加深交互練習，平常還是跳轉鍊接更方便）。演示一下關于QQ界面的一些交互效果，也希望和大家一起學習和進步。

下面是制作完成後的三大界面（消息、聯系人、動态）内容；

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

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

（1）啟動界面

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

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

将圖形部件轉換為動态面闆，狀态1命名為screen（啟動界面），增加狀态2命名為interface（放置消息、聯系人、動态三大界面）；

（2）“消息”/“聯系人”/”動态“界面

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

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

将中間部分（除卻上面的通知欄和底下的選項卡）的所有部件選中，鼠标右擊，轉換為動态面闆（命名為jiemian），給此面闆增加state2,state3，state1,2,3分别命名為iMessage、friends、playing（對應消息、聯系人、動态三界面）；

分别進入jiemian動态面闆的狀态“friends”和“playing”，制作部件，多為矩形部件和标簽的制作。然後将需要被拖動到部件選中，轉換為動态面闆，分别命名為“friends-tuodong”和“playing-tuodong”；

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

進入狀态“dianhua”，制作相應部件，多為矩形部件變換所得（因為部件并不多，所以這裡沒有用中繼器）；

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

2、小用例事件

（1）啟動界面

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

（2）“消息界面”

進入動态面闆狀态“interface”，為底部選項卡上的部件，添加選中變色效果。單擊占位符，點擊右側"部件屬性與樣式"-”選中“，為其添加選中時填充顔色為藍的效果（标簽部件中則是字體顔色變藍效果），其餘五個類似。我們再将三個分别帶有”消息“、”聯系人“、”動态“的标簽選中，然後在右側的"部件屬性與樣式"，輸入該選項組名稱為”1“，類似的是，将三個占位符也選中，設置選項組名稱為”2“；

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

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

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

一些簡單的小用例已經寫完了，剩下的就是大部頭，也就是拖動事件了，為了深入練習動态面闆的嵌套，所以我把三個面闆狀态的拖動事件全部寫在一個部件上，導緻在編寫時有點卡頓，不建議如此寫哦，除非是為了學習而已（用跳轉其實就可以輕松完成拖動事件了！）

3、拖動事件

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

（1）設置滑動方向

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

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

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

（3）拖動延遲效果

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

（4）拖動結束返回用例

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

那麼這裡就已經完成了所有的講解了。

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

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

總結：

在看過衆多大神見解以後，明白鑽研Axure是不理智的，日常夠用就好，能夠将想法具體化給開發、UI看明白即可，這就是一個好的原型。

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

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

鍊接分享

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

本文由 @MC.boyiter 原創發布于人人都是産品經理。未經許可，禁止轉載。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!