axure商城

Axure8.0實現簡易微信紅包交互教程 附源文件

這是一個Axure8.0的教程,不兼容7.0版本,特此提醒!

本文是轉載,原文地址:點擊查看原文>>?喜歡本文可以關注他們微信號:AxureB

大家新年好,這是猴年第一個教程。紅包大家想必發的已經手軟,那么B哥這里發一個簡易的發紅包教程。

大家結合RP一起看一下,這個教程大致分為5個交互:

1. B哥叫Bonnie發紅包

2. 那么自然Bonnie很聽話的去發紅包啦

3. 輸入錢、留言

4. 紅包發出去啦,B哥很高興,回贈了一個

5. Bonnie打開B哥給的大紅包,哇!這么6,求B哥包養!

交互來說,并不難,初學者都可以用到。里面的部件都是B哥自己做的,想要B哥的material design原創部件庫的,多多轉發公眾號,B哥就送喲~

回過頭來分解一下RP,總體來看,整個RP的面板層級不算復雜


可以看到大部分的交互都在如下圖的面板中

拉開前置的兩個隱藏面板,可以看到下層的觸發按鈕,點擊后切換到交互2

交互2里面進行返回交互1,兩個輸入框用來顯示/隱藏鍵盤(交互3)

confirm用于切換到交互4,case里面是用于顯示切到交互4以后兩人的對話

交互4到交互5的入口,在紅包上哦

點了就切換到最后一個交互場景了

大家打開這個RP時,需要安裝robot字體、Font Awesome字體圖標,安裝前者是因為我在制作material design部件庫時用的是robot字體,不安裝字體會發現你們顯示的字體跟我圖片所示的不一樣;安裝后者,是因為我使用了字體圖標,不安裝則無法顯示圖標,請大家自行度娘。

最后附上本教程的RP源文件:紅包源文件

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

用Axure制作產品需求文檔PRD的一個實例

2015-12-7 14:14:04

高級教程

Axure經驗分享:如何用Axure快速繪制各種icon?

2016-2-26 14:46:23

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo