Axure教程:明日之子投票界面交互動效制作
本文以明日之子投票界面為例,拆解了其中的交互動效,并具體分析了每一個交互動效的操作步驟。
最近在追明日之子每天瘋狂給妹妹點贊,所以嘗試下投票界面的制作,分享給大家,這是我發(fā)布的第一篇文章,歡迎各位產(chǎn)品前輩批評指正!
預(yù)覽效果鏈接:https://h3i5no.axshare.com
效果展示:
一、分析交互動效
大致分為以下三個步驟:
- 中繼器的制作,綁定數(shù)據(jù)(包括選手的頭像、姓名、排名、點贊數(shù))。
- 點贊事件的創(chuàng)建,及導(dǎo)致票數(shù)的改變。
- 根據(jù)點贊數(shù)排名,調(diào)整數(shù)據(jù)顯示位置。
二、制作交互動效
1. 中繼器的制作及綁定數(shù)據(jù)
(1)創(chuàng)建一個“中繼器”,雙擊進入編輯界面,設(shè)計展示選手信息如下:選手頭像、選手姓名、排名、點贊數(shù)(記得設(shè)置好名稱,以便后面操作)。
(2)這里我創(chuàng)建了9組數(shù)據(jù),每行顯示三個,一共三行;點擊index里的中繼器,在樣式中將布局勾選“水平”、“排布網(wǎng)絡(luò)”,并設(shè)定每row項目數(shù)為3。
(3)設(shè)定數(shù)據(jù)庫數(shù)據(jù)并綁定給中繼器:姓名:nam、點贊數(shù):Num,排名比較特殊,是插入變量里的index,index是直接獲取當(dāng)前數(shù)據(jù)的行號;這里隨便輸了些假數(shù)據(jù),我沒有設(shè)置頭像,有需要的同學(xué)可以再添加一列img并導(dǎo)入圖片。
(4)然后給中繼器-每項加載時添加用例并綁定數(shù)據(jù)庫數(shù)據(jù)。
2. 點贊事件的創(chuàng)建,及導(dǎo)致票數(shù)及排名的改變
(1)進入中繼器的編輯界面,為點贊按鈕設(shè)置交互用例,點贊會觸發(fā)三個改變:
- 一是點贊數(shù):Num
- 二是選手排名的位置
- 三是排名:index,index會根據(jù)排名順序自動更新,這里不需要我們做交互。
(2)為中繼器“添加排序”,按照點贊數(shù)Num的數(shù)量進行降序排列。
(3)為中繼器數(shù)據(jù)集“更新行”,點贊數(shù):Num=Num+1。
預(yù)覽效果鏈接:https://h3i5no.axshare.com
本文由 @許仙人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
哈,看完還是不太會?你可能需要從Axure基礎(chǔ)開始學(xué)
?? 這里推薦你加Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:原型禮包
領(lǐng)取適合產(chǎn)品新人的原型設(shè)計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!
中繼器在哪里弄啊
左邊的組件面板里有呀
??
源文件可以分享一下嗎?
Axure教程:明日之子交互動效源文件
鏈接:https://pan.baidu.com/s/1XQ3eGLh2h-gotCdgHRNLwQ
提取碼:c924
謝謝大佬 ??
我是小白啦 ??