火星網校
Axure教程:明日之子投票界面交互動效制作
發(fā)布時間：2024-01-18 20:36:07 瀏覽量：238次
本文以明日之子投票界面為例，拆解了其中的交互動效，并具體分析了每一個交互動效的操作步驟。
最近在追明日之子每天瘋狂給妹妹點贊，所以嘗試下投票界面的制作，分享給大家，這是我發(fā)布的第一篇文章，歡迎各位產品前輩批評指正！
預覽效果鏈接：
https://h3i5no.axshare.com
效果展示：
一、分析交互動效
大致分為以下三個步驟：
- 中繼器的制作，綁定數(shù)據(jù)（包括選手的頭像、姓名、排名、點贊數(shù)）。
- 點贊事件的創(chuàng)建，及導致票數(shù)的改變。
- 根據(jù)點贊數(shù)排名，調整數(shù)據(jù)顯示位置。
二、制作交互動效
1. 中繼器的制作及綁定數(shù)據(jù)
（1）創(chuàng)建一個“中繼器”，雙擊進入編輯界面，設計展示選手信息如下：選手頭像、選手姓名、排名、點贊數(shù)（記得設置好名稱，以便后面操作）。
（2）這里我創(chuàng)建了9組數(shù)據(jù)，每行顯示三個，一共三行；點擊index里的中繼器，在樣式中將布局勾選“水平”、“排布網絡”，并設定每row項目數(shù)為3。
（3）設定數(shù)據(jù)庫數(shù)據(jù)并綁定給中繼器：姓名：nam、點贊數(shù)：Num，排名比較特殊，是插入變量里的index，index是直接獲取當前數(shù)據(jù)的行號；這里隨便輸了些假數(shù)據(jù)，我沒有設置頭像，有需要的同學可以再添加一列img并導入圖片。
（4）然后給中繼器-每項加載時添加用例并綁定數(shù)據(jù)庫數(shù)據(jù)。
2. 點贊事件的創(chuàng)建，及導致票數(shù)及排名的改變
（1）進入中繼器的編輯界面，為點贊按鈕設置交互用例，點贊會觸發(fā)三個改變：
- 一是點贊數(shù)：Num
- 二是選手排名的位置
- 三是排名：index，index會根據(jù)排名順序自動更新，這里不需要我們做交互。
（2）為中繼器“添加排序”，按照點贊數(shù)Num的數(shù)量進行降序排列。
（3）為中繼器數(shù)據(jù)集“更新行”，點贊數(shù)：Num=Num+1。
預覽效果鏈接：
https://h3i5no.axshare.com
本文由 @許仙人 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協(xié)議
熱門課程推薦
熱門資訊
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
2. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
6. 史上最全，平面設計UI設計必備的77個國內外素材、設計資源網站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
最新文章
