• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      Axure RP 9 教程—模擬微信系列1.消息對話效果

      今天給大家簡單演示一個模擬微信教程,接下來會逐步完善模擬微信的更多細節。本次教程我們模擬的內容包括模擬利用中繼器實現消息對話,同時顯示最新一條消息的收到時間或者發送時間。

      框架搭建

      因為接下來會更深層的去做一些內容,因此本次我們先搭建好一些框架,以便后期繼續增加新的交互:我們需要一個動態面板,里面添加五個狀態,分別用來顯示四個一級菜單和對話頁面。我們需要四個中繼器,用于實現消息對話的效果,同時微信的導航菜單放置在動態面板外邊,考慮到有些頁面不會看到微信底部菜單,因此在進入這些頁面的時候需要將底部菜單隱藏或者置底。

      因為是模擬微信,因此我們需要模擬雙方信息交互的效果,所以我們需要兩個微信面板,在這里我們需要注意,因為頁面內放置兩個面板會導致元件數量翻倍,因此我們要對需要設置的元件命名,方便我們管理,同樣,我們需要區分元件歸屬于用戶1還是用戶2,因此個人建議在元件命名的時候,在名稱后邊寫上該元件歸屬于用戶1還是用戶2。

      目前我們采用這種結構,后期再增加更多交互的時候可能會進行調整,不過這都是后話,不著急。

      交互步驟教程

      單選效果
      Axure RP 9 教程—模擬微信系列1.消息對話效果
      如圖所示,我們看到我們點擊一個菜單的時候,該菜單點亮,點擊另外一個菜單的時候,另一個菜單點亮,而之前點亮的菜單取消點亮,這個過程其實叫選中與取消選中,同時,四個菜單同時只能選中一個,因此這四個菜單是作為一個選項組出現的,就像Radio Button(單選框)。
      操作步驟:我們選擇菜單(icon text),新建交互里面設置選中效果,選中時,選擇顏色,我們這里對底部菜單選中時設置了“愛心綠色”。

      Axure RP 9 教程—模擬微信系列1.消息對話效果
      接下來我們選擇一個已經設置好選中效果的icon,按下ctrl c,選擇其他的需要同樣效果的icon,按下ctrl alt v,這就是axure rp 9的格式刷,mac系統也是這幾個按鍵來回嘗試就試出來了(反正小編是被mac系統的axure逼瘋了,各種操作不爽)接下來,我們設置鼠標點擊時,選中當前元件。

      Axure RP 9 教程—模擬微信系列1.消息對話效果
      這樣,就實現了鼠標單擊的時候,菜單變成我們設置好的綠色。但是同樣也有問題,我們點擊多個菜單的時候,大家都會變成綠油油的可愛樣子,這顯然不是正常狀態的,我們要的是每次點擊之后只有一個是綠的。這時候我們只需要選中四個菜單,點擊右鍵,選擇設置為選項組,這樣,這四個菜單就只能同時選中一個了。(不適用選項組也可以,我們可以做點擊一個菜單時,其他菜單取消選中就可以了,當前我就是這樣做的,結果被總監一頓罵,讓我買本Axure教程去看,倔強的選擇了自己寫一本,哈哈哈哈哈哈哈哈哈哈嗝兒)

      消息對話效果

      如文章開頭gif圖所示,我們看到我們發送一條對話的時候,在我們自己的列表內,消息在右邊,在對方的列表內,我的消息就在左邊,因為,我們需要兩個微信頁面來模擬該效果,同樣,我們選擇用中繼器,因為中繼器可以增加新的內容。
      操作步驟:在動態面板的消息內容狀態頁面內設置交互,我們需要添加兩個中繼器,添加消息輸入框和發送btn。

      先講中繼器,我們中繼器內需要三個元件,一個是用戶頭像,一個是消息對話框,一個是用于美化的小箭頭,如圖所示:

      Axure RP 9 教程—模擬微信系列1.消息對話效果
      重點是消息對話框,給消息對話框命名,方便設置的時候選取,我們選中中繼器,將中繼器數據清空,只留下一列text即可,然后為中繼器設置交互,每項加載時,設置文字到消息對話框,內容為[[Item.text]],其中text就是中繼器的內容列text。如圖所示:
      Axure RP 9 教程—模擬微信系列1.消息對話效果
      Axure RP 9 教程—模擬微信系列1.消息對話效果
      這時候,中繼器的數據設置完成,如果我們在中繼器樣式里面增加數據,會發現里面的對話框會新增一個,對話框內容就是我們新增的內容。接下來,我們設置發送消息的交互。我們選中之前做好的元件:發送btn,設置成鼠標點擊時,為中繼器新增行,在text上增加函數,[[A]],A為局部變量,代表的是輸入框的文本,如圖所示:

      Axure RP 9 教程—模擬微信系列1.消息對話效果
      Axure RP 9 教程—模擬微信系列1.消息對話效果
      Axure RP 9 教程—模擬微信系列1.消息對話效果
      對上邊的交互再解釋一下,我為交互過程做了略微的修飾,當輸入框內容,為空時,讓消息發送失敗,因此在發送btn上增加了判斷條件,另外,每次發送完成后,讓已經輸入的消息清空,便于下次發送消息,因此設置了輸入框清空的交互,下邊又添加了設置時間,不過因為設置時間本期做的不夠好,因此這里就先不講了。這個時候,我們中繼器發消息做完了,那么接下來怎么實現微信之間消息互通呢,這里用的方法,很原始,就是發送btn控制多個中繼器的方式,我們點擊發送按鈕,同時控制兩個中繼器,在兩個用戶的微信面板內同時發送消息即可,這個沒法截圖,就不給大家看圖了。

      結語

      下載鏈接:https://pan.baidu.com/s/1e6EnOv-PiNDnJBnLjMwLPg

      密碼:01j1

      微信公眾號:他們已經在路上了

      給TA買糖
      共{{data.count}}人
      人已贊賞
      Axure教程

      Axure RP 9 教程—模擬微信系列1

      2019-9-16 23:25:11

      Axure教程

      Axure教程:利用API制作一個股票查詢小工具

      2020-11-27 12:04:46

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">