“錦城數據實驗室”每一期製作的最終的產出是一份HTML5，用戶在查看HTML5時的整個過程，將決定了這份HTML5到底能得幾分。

希望團隊中的 數據構思和分析小組成員 能夠通過閱讀我的這份H5想法的構思的整理總結，能有所啟發，有所收穫。

這篇文章觀點來自於個人的經驗和認識，如存在偏離實際情況和思維有局限的情況，希望指出。

用戶最關心什麼？

從我個人角度，制定一張HTML5頁面的評分表，我會考慮如下評分項：

評分項權重（Max:10）頁面加載速度6頁面美觀程度5頁面背景音樂3頁面展現內容8頁面呈現數據6頁面動畫效果4

我認為，頁面所呈現的內容是至關重要的，所以賦予它的權重最高。

畢竟，用戶最關心的是 H5中的內容對於“我”而言能產生什麼樣的有用性，而不會是 “如何清洗的數據” 、 ”項目如何架構” 或是 ”某項技術實如何現”。

我們的出發點？

一份好的H5，要讓用戶有所收穫。

我們應先決定好想讓用戶看到和了解到哪一些數據，相應地，用戶才會產生什麼樣的感受，最終對於我們整個產品和項目而言有什麼樣的幫助。

支付寶案例

舉個 支付寶的年度賬單H5 的例子：通過看支付寶的年度賬單，我能有如下收穫：

1. 我每月通過支付寶消費了多少錢
2. 我在支付寶上的消費的類型結構
3. 我的消費的一個大致排名
4. 我在螞蟻金服理財方面的收益情況
5. 通過朋友圈大家分享出的個人賬單信息對朋友的消費情況有個粗略印象

整理來看看是支付寶的出發點：

1. 讓用戶了解去年在支付寶上的資金流動情況，感受到支付寶已經深入其生活的方方面面
2. 讓用戶潛移默化地認為數據的整合處理是互聯網產品的一項基礎附加服務
3. 增強用戶的信任感和用戶黏度
4. 在社交媒體分享自己的年度賬單炒熱話題

望梅止渴，如果我都沒見到“梅子”，那我怎麼能緩解口渴的現狀呢？

本期出發點

立足於我們的第二期——“2017年錦城飯卡年度賬單”HTML5，那我們就可以基本確定我們的一個出發點。

1. 提供關於 個人的飯卡消費數據 、 全校總體消費數據 以及 兩者的對比數據 給用戶
2. 炒話題 吸流量，讓更多人關注錦城數據實驗室正在做的事情
3. 廣覆蓋 增知名，覆蓋校園內更多的人群（飯卡用戶群體比上一期圖書館的用戶群體更多）

我們該如何構思？

有了出發點，下一步，我們來聊一聊如何構思。

Step1：明確樣例數據

巧婦難為無米之炊，無論你有多麼精巧的想法，如果沒有原始材料（數據），也不能把想法實現。

因此，做構思的時候要先明確，我們手上到底有哪些數據，哪些數據可以被公布。

學號姓名交易金額餘額類型日期時間地點XXXX40155唐某某1018.4支付寶轉入2017/12/3019:38:56新食堂1樓

通過如上數據處理小組清理出來的樣本數據我們可以知道我們手上掌握了哪一些數據，一共是八個字段。

我們所有的構思，在不添加其他緯度的數據的情況下，都得圍繞這個八個字段來展開。

Step2：整理構思需求

在構思的過程中要整理出一張名為“H5構思數據需要”的表格出來，如下：

這一張表格作用甚大，起着溝通下游工作組的作用。

Step3：構思H5故事

我要用HTML5構思怎麼樣的一個故事。

這裡以網易雲音樂的年度聽歌回憶錄H5來做案例：

在閱讀完屬於我的網易雲聽歌回憶錄H5的時候，我的感受是 暖心。

我用下面這段文字來描述我的感受：

猶如有一種無形的力量灌注進我原本麻木的身體，激勵着我踏馬負劍去征服星辰大海。 我的身後是過往，我的前方是未來。 為了愛的人，為了理想，前進！ 陽光明媚，一切都好。

請大家不要笑，這便是我讀完這份報告的內心戲。能讓我有這樣的感受，它能不是一份優秀的H5嗎？

這份H5帶給我的感受，很符合網易雲音樂的Slogan：“音樂的力量”！

回到我們的這一期構思上，首先我們要明確一個故事講述的基調，我們的H5主題關鍵字是“年度 飯卡 消費 吃 賬單”。

那麼可以有很多“基調”進行選擇，“吃貨的輕鬆范”、“對食物的敬畏范”、“金錢衡量食物的感慨”……

每個人的寫作風格都不一樣，因此，非常不建議在這一環節進行頭腦風暴或者集體構思。

我建議大家帶上耳機選擇一首音樂慢慢聆聽，同時握着一支筆，有靈感了就寫下來，一氣呵成將數據和故事串聯起來。

Step4：切割故事&繪製原型

有了故事，再來切分故事，把故事切分成小塊。

比如這兩行文字我想講述的是他在這一年中最早一次是什麼時候吃早飯，那麼我們可以設定一個小標題叫做“最早一次吃飯”。

H5頁面的內容，狹義上看是文案，廣義上看是內容+數據+UI+動效的組合體。

做好HTML5構思，在我看來，要把廣義上的東西都考慮進去，從一開始就要想到它最終是什麼樣子。

因此，我們一直推薦團隊成員使用墨刀、mockplus等原型工具把內心的想法“繪”出來。

下圖為墨刀原型設計工具的主界面，我們可以看到我們將故事切割成不同的主題後，就形成了不同的頁面。

我給團隊構思的同學定的原則是：

一頁只講述一個小主題，一頁只展現一類數據，數據長度不超過八頁（不包括授權頁、引導頁、結尾頁和分享頁等事務流程的頁面）。

這裡的原型指的不是高保真的原型，只是最簡單的拼湊和排列。

Step5：評審擇優

每個人都是創作者，每個人都會寫出不同的故事。

最終每個人讀完所有人的故事，再來選擇一份最佳最適合的故事。

選擇除了最佳故事就可以將這一份原型遞交給後續工作組，傳導如下圖：

Step6：文案優化調整

文案好不好，影響用戶閱讀的時候的流暢感和好感。

對於文案優化，我印象最深刻的是小學課本裡面的一個故事。

一個盲人乞丐向詩人雨果乞討，雨果說：“我也很窮，沒有錢給你。” 隨即，他便在乞丐面前的紙牌上寫了一句話：“春天就要來了，可我看不見她！” 於是，被感動的路人紛紛把錢放在乞丐的鐵罐里……“

我們要做的事情，也是雨果要做的事情。

UI設計、HTML5開發後續會在製作過程中，都會有互相妥協的時候：

比如這一塊文字如果兩行頁面上看起來就不好看，這個時候就需要修改或是精簡文案或者修改設計方案。

結語

最近經常和朋友討論，想要做好一份HTML5最難的地方是在哪裡？

是開發嗎？第一次踩過坑總結了經驗搭好了簡易框架，後面做起來就會節省很多時間，隨着時間的推移，HTML5開發起來會越來越得心應手。

想來想去，最難的地方是在構思和策劃！這會耗費大量的時間和精力來構思，但這也最影響最終的效果。

我們因為沒有經驗，所以才去思考，思考好了就動手去做，從0到1積累的過程，痛苦而興奮。

最怕的就是，沒有專業的技能，也不願意付出專註的態度，踏步不前。

我願意花這份塊狀時間，把我的想法和經驗寫下來傳遞給大家，也希望我花費的這份時間是值得的。

與君共勉！