今天要推薦一支比較典型的趣味調查H5《測測你是哪種動物系買買精》,通過該案例,幫助大家理解這類統計H5的主要製作邏輯。

一、案 例 體 驗

測測你是哪種動物系買買精??

m.creatby.com

類型:測試題+統計總結+合成海報

m.creatby.com/v2/manage (二維碼自動識別)

二、案 例 評 析

①簡介:通過一個與好友的旅行場景假設,目標定位不同消費能力的人群,穿插多個消費場景,用戶自行選擇符合自己的消費習慣或生活方式,最終幫每個用戶定義一個動物系,並生成海報,或點擊鏈接申請信用卡。

②風格:卡通風格,製作精良,色彩豐富,大量的序列幀幫助多場景過渡,自然流暢。

③主要邏輯:判斷用戶選擇動物數量的最大值,並獲得該最大值的動物名稱。

④難點:邏輯嵌套。即當滿足條件1的時候再去判斷是否滿足條件2,當滿足條件2時再去判斷是否滿足條件3,以此類推。這個是邏輯判斷嵌套的常規用法。

接下來,小派將根據該案例需求分析下製作思路。

三、需 求 分 析

該案例一共有8種動物系:狐系,松鼠系,企鵝系,獅子系,孔雀系,貓頭鷹系,河馬系,猴系。

一共有6道題目全部為單選題,要選擇6個答案。每個選項對應不同的動物系,根據下方的答案對應動物系,我們可以推斷,會有動物會被重複選擇;也可能會有動物不被選擇;我們需要統計動物被選擇次數最高的即可。

每個答案實際對應到的動物
每個動物可能被選擇最多次數統計

四、制 作 思 路

如果用意派Epub360來做該H5,有以下3種方式供選擇:

(一)資料庫

如果用資料庫來做,門檻相對較高。這裡簡單介紹下思路:

1.用戶每選擇一項答案,都要到後台數據表新建1條對應到指定動物的數據,包括動物名稱跟選擇次數具體值,如1。

2.如果有動物再次被選擇,需要去修改對應動物的數據中的次數,正常是給次數+1。

3.最後用選擇次數欄位,由大到小去排序每個動物被選擇的次數,最大值排在第1行,可以用設置參數值的方式拿到這個最大值及其名稱。

或者各位派友有更佳的統計方式,歡迎在留言區留言哦~

(二)邏輯判斷

1. 所有動物被選擇的次數,用類型為【數值】的參數變數來記錄:共8個參數變數,為方便,分別用8個字母A、B、C、D、E、F、G、H命名。用Nmax記錄每次比較後的較大值。

2.所有動物的名稱,用類型為【文本】的參數變數來記錄,用Mmax表示上面8個變數較大值的名稱。

主要邏輯解析:將數值逐一比較,用Nmax記錄每次比較的較大值;用Mmax記錄每次比較的較大值名稱。如遇到兩個值相等的情況,只能優先賦值前一個為最大值或後一個為最大值,根據個人需求設置(如遇到A=B,我們設置當Nmax≥A時,讓Nmax=變數A,Mmax=「A」;或當Nmax≤B時,讓Nmax=變數B,Mmax=「B」)。

在編輯器里的設置示例:

1.參數及條件判斷設置
2.條件判斷具體設置

案例拷貝學習網址【電腦端谷歌瀏覽器打開】

(三)用戶最終選擇的方式

因為該用戶在設計的時候很清楚用戶選擇的最大值可能是2或3,所以做了一個比較簡單的判斷,這個方式更高效一些。

五、制 作 小 結

1.除了邏輯是難點,序列幀的優化也是關鍵,可以保證用戶體驗。

2.通過這個作品幫助大家理解這種類似統計的H5該怎麼做,遇到同樣的問題,就可以考慮用邏輯嵌套的方式來處理。

推薦閱讀:

相关文章