Axure教程:微信聊天列表原型制作(二)
本文是微信原型制作練習的第二章,上一篇文章(點擊查看)發出后,很多朋友進行了反饋,提出了一些修改意見,收益匪淺,這也是我分享練習過程的原因,共同進步,如果你想跟著一起操作,首先你需要按照第一章的練習先制作出原型。
首先,在開始今天的練習之,前對第一篇文章,留言提出了不使用“添加邊界”來約束移動范圍,而是設置判斷條件,在范圍內進行拖動,超出范圍則還原到邊界,并通過動畫效果最大限度模擬微信的意見,我進行了原型修改,對比下效果十分更加接近真實產品。
使用條件判斷,模擬邊界限制
在上一章中,對于聊天列表拖動的邊界限制直接使用了交互效果里的“添加邊界”,文章發布后有朋友留言提出,邊界限制不能完全真實模擬微信的動畫效果,應該使用條件判斷來實現。原理是,設置三種狀態,在滑動范圍內正常拖動,超出上下界限后,觸發條件判斷,設置動作,將超出范圍的聊天列表移動到邊界內,并配合“動畫效果”,從而達到更逼真的原型模擬。
1. 選擇窗口動態面板,刪除第一章添加的“拖動時”的交互動作。首先設置第一種條件,在正常拖動范圍內:添加case1–>編輯條件–>選擇值后,單擊fx。這里需要用到消息列表動態面板的top值,通過添加局部變量msglist,等于元件,選擇消息列表動態面板。然后通過msglist得到top值。范圍條件為msglist.top>=0,第一章中進行過說明,消息動態面板的坐標是一窗口動態面板的頂端為0 的。
同樣的方法,得到msglist.bottom。范圍條件為msglist.bottom<=window.bottom-window.top,window是窗口動態面板,設置方法同msglist一樣。
條件設置好以后,添加動作–>移動消息列表動態面板–>垂直移動,無動畫也不需要設置邊界。
2. 設置第二種條件,當聊天列表動態面板的top進入了窗口動態面板的邊界時,觸發動作,將其還原到邊界位置,從而實現邊界約束。同1,設置變量msglist,設置條件msglist.top>0時,移動消息列表動態面板到絕對位置(0,0),動畫為緩慢退出,時間500毫秒。
3. 設置第三種條件,此處直接“else if true”即可,其他設置均與上述步驟相同,設置聊天動態面板移動到邊界位置,并設置動畫效果。此處要稍作說明的是,消息動態面板移動到絕對位置(0,[[window.height-msglist.height]]),當將移動聊天面板的bottom移動到窗口動態面板的下界限時,移動動態面板的top比窗口動態面板的上界限高出距離為msglist.height-window.height,因此絕對位置的y坐標需要移動到[[window.height-msglist.height]]
設置完成后,預覽原型效果,發現比上篇文章使用的”添加邊界”效果,確實稍好一些。
下面開始本章的練習,接著上篇文章的原型,繼續豐富原型功能,本篇要實現導航列表的切換,即能夠切換“微信”“通訊錄”“發現”和“我”四種頁面。
第一步:制作導航菜單欄
1. 制作一個長480,寬65的矩形框,保留下邊框,下邊框顏色為CCCCCC,標簽名設置為menu,四個導航圖標,直接截取微信的原圖即可,沒種導航需要截取選中和未選中兩種狀態。
2. 將四種未選中狀態的圖標均勻分布在menu上,以微信圖標為例,右鍵未選中狀態的微信圖標,選擇轉換為動態面板,然后將動態面板標簽名設置為menu_weixin,雙擊該動態面板,添加state2,將選中狀態的微信圖標拷貝到state2中。其他三種導航圖標同樣,以此設置為menu_tongxunlu、menu_faxian、menu_wo。
第二步:設置導航選中切換
1. 以menu_weixin為例,選擇單擊時添加交互動作?!霸O置面板狀態”–>將menu_weixin、menu_tongxunlu、menu_faxian、menu_wo全部選中,選擇狀態為state1。
2. 再添加“設置面板狀態”→ set當前元件state為state2。
3. 復制menu_weixin的單擊時動作case1,分別粘貼到其他三個導航動態面板。
4. 預覽效果
第三步:根據導航切換,改變窗口動態面板對應內容
1. 為窗口動態面板添加對應導航的狀態。雙擊窗口動態面板,添加三種狀態,分別是窗口動態面板-通訊錄狀態、窗口動態面板-發現狀態、窗口動態面板-我狀態。
2. 每種狀態分別設置一個大小適中的矩形框作為背景
,并輸入文字作為區分。下一章練習再分別實現不同導航狀態的具體原型,本章以文字區分代替。
3. 選擇menu_weixin狀態面板,單擊第二步設置的交互動作case1,添加“設置動態面板狀態”→ set窗口動態面板→ 選擇狀態為“聊天列表狀態”。按照此方法,依次設置menu_tongxunlu、menu_faxian、menu-wo為對應的窗口狀態面板狀態。
全部完成后可預覽效果。
該原型連接為:http://interestingprogrammer.coding.me/yanjingProject/微信聊天2
上篇文章發布后收到了很多朋友的留言和意見,從中也學到更多的知識。本篇文章是微信原型制作學習的第二章,同樣希望能與大家共同探討學習,共同進步。
相關閱讀
本文由 @有趣的程序員 原創發布于人人都是產品經理。未經許可,禁止轉載。
樓主,請問模擬邊界限制時,else if true 要怎么實現
不對??!我設置好了條件了 但是拉動并沒效果
請問下Axure 9第一步的使用條件設置怎么用啊??完全找不到
你好,我做到第三步的時候不知道該如何操作,可能是我前面層級設置的不對,但是不知道如何修改,麻煩樓主詳細說明一下,謝謝!
樓主,是不是漏了在載入時設置case1,menu_weixin未state2,其他3個設置state1吧;害有個,第二步:設置導航選中切換
1. 以menu_weixin為例,選擇單擊時添加交互動作?!霸O置面板狀態”–>將menu_weixin、menu_tongxunlu、menu_faxian、menu_wo全部選中,選擇狀態為state1–這個地方可不可以只設置menu_tongxunlu、menu_faxian、menu_wo這3個為state1,因為好像后面設置了this為state2
每一篇都有看,期待后續