本文以明日之子投票界面為例，拆解了其中的交互動效，并具體分析了每一個交互動效的操作步驟。

最近在追明日之子每天瘋狂給妹妹點贊，所以嘗試下投票界面的制作，分享給大家，這是我發(fā)布的第一篇文章，歡迎各位產(chǎn)品前輩批評指正！

預(yù)覽效果鏈接：https://h3i5no.axshare.com

效果展示：

一、分析交互動效

大致分為以下三個步驟：

1. 中繼器的制作，綁定數(shù)據(jù)（包括選手的頭像、姓名、排名、點贊數(shù)）。
2. 點贊事件的創(chuàng)建，及導(dǎo)致票數(shù)的改變。
3. 根據(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é)議