Axure交互|QQ三大界面的交互效果演示

這里我就用一個主界面和多層的動態面板內嵌(只是鉆研和加深交互練習,平常還是跳轉鏈接更方便)。演示一下關于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看明白即可,這就是一個好的原型。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容