“錦城數(shù)據(jù)實(shí)驗(yàn)室”每一期制作的最終的產(chǎn)出是一份HTML5，用戶在查看HTML5時(shí)的整個(gè)過(guò)程，將決定了這份HTML5到底能得幾分。

希望團(tuán)隊(duì)中的 數(shù)據(jù)構(gòu)思和分析小組成員 能夠通過(guò)閱讀我的這份H5想法的構(gòu)思的整理總結(jié)，能有所啟發(fā)，有所收獲。

這篇文章觀點(diǎn)來(lái)自于個(gè)人的經(jīng)驗(yàn)和認(rèn)識(shí)，如存在偏離實(shí)際情況和思維有局限的情況，希望指出。

用戶最關(guān)心什么?

從我個(gè)人角度，制定一張HTML5頁(yè)面的評(píng)分表，我會(huì)考慮如下評(píng)分項(xiàng)：

 

 

評(píng)分項(xiàng)權(quán)重(Max:10)頁(yè)面加載速度6頁(yè)面美觀程度5頁(yè)面背景音樂(lè)3頁(yè)面展現(xiàn)內(nèi)容8頁(yè)面呈現(xiàn)數(shù)據(jù)6頁(yè)面動(dòng)畫(huà)效果4

我認(rèn)為，頁(yè)面所呈現(xiàn)的內(nèi)容是至關(guān)重要的，所以賦予它的權(quán)重最高。

畢竟，用戶最關(guān)心的是 H5中的內(nèi)容對(duì)于“我”而言能產(chǎn)生什么樣的有用性，而不會(huì)是 “如何清洗的數(shù)據(jù)” 、 ”項(xiàng)目如何架構(gòu)” 或是 ”某項(xiàng)技術(shù)實(shí)如何現(xiàn)”。

我們的出發(fā)點(diǎn)?

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

我們應(yīng)先決定好想讓用戶看到和了解到哪一些數(shù)據(jù)，相應(yīng)地，用戶才會(huì)產(chǎn)生什么樣的感受，最終對(duì)于我們整個(gè)產(chǎn)品和項(xiàng)目而言有什么樣的幫助。

支付寶案例

舉個(gè) 支付寶的年度賬單H5 的例子：通過(guò)看支付寶的年度賬單，我能有如下收獲：

 

 

我每月通過(guò)支付寶消費(fèi)了多少錢(qián)

我在支付寶上的消費(fèi)的類(lèi)型結(jié)構(gòu)

我的消費(fèi)的一個(gè)大致排名

我在螞蟻金服理財(cái)方面的收益情況

通過(guò)朋友圈大家分享出的個(gè)人賬單信息對(duì)朋友的消費(fèi)情況有個(gè)粗略印象

整理來(lái)看看是支付寶的出發(fā)點(diǎn)：

讓用戶了解去年在支付寶上的資金流動(dòng)情況，感受到支付寶已經(jīng)深入其生活的方方面面

讓用戶潛移默化地認(rèn)為數(shù)據(jù)的整合處理是互聯(lián)網(wǎng)產(chǎn)品的一項(xiàng)基礎(chǔ)附加服務(wù)

增強(qiáng)用戶的信任感和用戶黏度

在社交媒體分享自己的年度賬單炒熱話題

望梅止渴，如果我都沒(méi)見(jiàn)到“梅子”，那我怎么能緩解口渴的現(xiàn)狀呢?

本期出發(fā)點(diǎn)

立足于我們的第二期——“2017年錦城飯卡年度賬單”HTML5，那我們就可以基本確定我們的一個(gè)出發(fā)點(diǎn)。

提供關(guān)于 個(gè)人的飯卡消費(fèi)數(shù)據(jù) 、 全?？傮w消費(fèi)數(shù)據(jù) 以及 兩者的對(duì)比數(shù)據(jù) 給用戶

炒話題 吸流量，讓更多人關(guān)注錦城數(shù)據(jù)實(shí)驗(yàn)室正在做的事情

廣覆蓋 增知名，覆蓋校園內(nèi)更多的人群(飯卡用戶群體比上一期圖書(shū)館的用戶群體更多)

我們?cè)撊绾螛?gòu)思?

有了出發(fā)點(diǎn)，下一步，我們來(lái)聊一聊如何構(gòu)思。

Step1：明確樣例數(shù)據(jù)

巧婦難為無(wú)米之炊，無(wú)論你有多么精巧的想法，如果沒(méi)有原始材料(數(shù)據(jù))，也不能把想法實(shí)現(xiàn)。

因此，做構(gòu)思的時(shí)候要先明確，我們手上到底有哪些數(shù)據(jù)，哪些數(shù)據(jù)可以被公布。

學(xué)號(hào)姓名交易金額余額類(lèi)型日期時(shí)間地點(diǎn)XXXX40155唐某某1018.4支付寶轉(zhuǎn)入2017/12/3019:38:56新食堂1樓

通過(guò)如上數(shù)據(jù)處理小組清理出來(lái)的樣本數(shù)據(jù)我們可以知道我們手上掌握了哪一些數(shù)據(jù)，一共是八個(gè)字段。

我們所有的構(gòu)思，在不添加其他緯度的數(shù)據(jù)的情況下，都得圍繞這個(gè)八個(gè)字段來(lái)展開(kāi)。

Step2：整理構(gòu)思需求

在構(gòu)思的過(guò)程中要整理出一張名為“H5構(gòu)思數(shù)據(jù)需要”的表格出來(lái)，如下：

 

 

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

 

 

Step3：構(gòu)思H5故事

我要用HTML5構(gòu)思怎么樣的一個(gè)故事。

這里以網(wǎng)易云音樂(lè)的年度聽(tīng)歌回憶錄H5來(lái)做案例：

 

 

在閱讀完屬于我的網(wǎng)易云聽(tīng)歌回憶錄H5的時(shí)候，我的感受是 暖心。

我用下面這段文字來(lái)描述我的感受：

猶如有一種無(wú)形的力量灌注進(jìn)我原本麻木的身體，激勵(lì)著我踏馬負(fù)劍去征服星辰大海。 我的身后是過(guò)往，我的前方是未來(lái)。 為了愛(ài)的人，為了理想，前進(jìn)! 陽(yáng)光明媚，一切都好。

請(qǐng)大家不要笑，這便是我讀完這份報(bào)告的內(nèi)心戲。能讓我有這樣的感受，它能不是一份優(yōu)秀的H5嗎?

這份H5帶給我的感受，很符合網(wǎng)易云音樂(lè)的Slogan：“音樂(lè)的力量”!

回到我們的這一期構(gòu)思上，首先我們要明確一個(gè)故事講述的基調(diào)，我們的H5主題關(guān)鍵字是“年度 飯卡 消費(fèi) 吃 賬單”。

那么可以有很多“基調(diào)”進(jìn)行選擇，“吃貨的輕松范”、“對(duì)食物的敬畏范”、“金錢(qián)衡量食物的感慨”……

每個(gè)人的寫(xiě)作風(fēng)格都不一樣，因此，非常不建議在這一環(huán)節(jié)進(jìn)行頭腦風(fēng)暴或者集體構(gòu)思。

我建議大家?guī)隙鷻C(jī)選擇一首音樂(lè)慢慢聆聽(tīng)，同時(shí)握著一支筆，有靈感了就寫(xiě)下來(lái)，一氣呵成將數(shù)據(jù)和故事串聯(lián)起來(lái)。

Step4：切割故事&繪制原型

有了故事，再來(lái)切分故事，把故事切分成小塊。

比如這兩行文字我想講述的是他在這一年中最早一次是什么時(shí)候吃早飯，那么我們可以設(shè)定一個(gè)小標(biāo)題叫做“最早一次吃飯”。

H5頁(yè)面的內(nèi)容，狹義上看是文案，廣義上看是內(nèi)容+數(shù)據(jù)+UI+動(dòng)效的組合體。

做好HTML5構(gòu)思，在我看來(lái)，要把廣義上的東西都考慮進(jìn)去，從一開(kāi)始就要想到它最終是什么樣子。

因此，我們一直推薦團(tuán)隊(duì)成員使用墨刀、mockplus等原型工具把內(nèi)心的想法“繪”出來(lái)。

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

 

 

我給團(tuán)隊(duì)構(gòu)思的同學(xué)定的原則是：

一頁(yè)只講述一個(gè)小主題，一頁(yè)只展現(xiàn)一類(lèi)數(shù)據(jù)，數(shù)據(jù)長(zhǎng)度不超過(guò)八頁(yè)(不包括授權(quán)頁(yè)、引導(dǎo)頁(yè)、結(jié)尾頁(yè)和分享頁(yè)等事務(wù)流程的頁(yè)面)。

這里的原型指的不是高保真的原型，只是最簡(jiǎn)單的拼湊和排列。

Step5：評(píng)審擇優(yōu)

 

 

每個(gè)人都是創(chuàng)作者，每個(gè)人都會(huì)寫(xiě)出不同的故事。

最終每個(gè)人讀完所有人的故事，再來(lái)選擇一份最佳最適合的故事。

選擇除了最佳故事就可以將這一份原型遞交給后續(xù)工作組，傳導(dǎo)如下圖：

 

 

Step6：文案優(yōu)化調(diào)整

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

對(duì)于文案優(yōu)化，我印象最深刻的是小學(xué)課本里面的一個(gè)故事。

一個(gè)盲人乞丐向詩(shī)人雨果乞討，雨果說(shuō)：“我也很窮，沒(méi)有錢(qián)給你。” 隨即，他便在乞丐面前的紙牌上寫(xiě)了一句話：“春天就要來(lái)了，可我看不見(jiàn)她!” 于是，被感動(dòng)的路人紛紛把錢(qián)放在乞丐的鐵罐里……“

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

UI設(shè)計(jì)、HTML5開(kāi)發(fā)后續(xù)會(huì)在制作過(guò)程中，都會(huì)有互相妥協(xié)的時(shí)候：

比如這一塊文字如果兩行頁(yè)面上看起來(lái)就不好看，這個(gè)時(shí)候就需要修改或是精簡(jiǎn)文案或者修改設(shè)計(jì)方案。

結(jié)語(yǔ)

最近經(jīng)常和朋友討論，想要做好一份HTML5最難的地方是在哪里?

是開(kāi)發(fā)嗎?第一次踩過(guò)坑總結(jié)了經(jīng)驗(yàn)搭好了簡(jiǎn)易框架，后面做起來(lái)就會(huì)節(jié)省很多時(shí)間，隨著時(shí)間的推移，HTML5開(kāi)發(fā)起來(lái)會(huì)越來(lái)越得心應(yīng)手。

想來(lái)想去，最難的地方是在構(gòu)思和策劃!這會(huì)耗費(fèi)大量的時(shí)間和精力來(lái)構(gòu)思，但這也最影響最終的效果。

我們因?yàn)闆](méi)有經(jīng)驗(yàn)，所以才去思考，思考好了就動(dòng)手去做，從0到1積累的過(guò)程，痛苦而興奮。

最怕的就是，沒(méi)有專(zhuān)業(yè)的技能，也不愿意付出專(zhuān)注的態(tài)度，踏步不前。

我愿意花這份塊狀時(shí)間，把我的想法和經(jīng)驗(yàn)寫(xiě)下來(lái)傳遞給大家，也希望我花費(fèi)的這份時(shí)間是值得的。

與君共勉!