《金诚数据实验室》每期的最终输出都是一个HTML5。用户查看HTML5的全过程将决定这个HTML5的分数。
希望团队中的数据构思和分析团队的成员，看了我的《H5思路总结》，能有所启发，有所收获。
本文观点来自个人经验和知识。如有与实际情况有偏差和思维局限之处，望指出。
用户最关心什么？从我个人的角度，我会制定一个HTML5页面的评分尺度，我会考虑以下评分项目：
评分项目权重(Max:10)页面加载速度6页面美学5页面背景音乐3页面演示内容8页面演示数据6页面动画效果4
在我看来，页面呈现的内容至关重要，所以被赋予了最高的权重。
毕竟，用户最关心的是H5的内容对我有多大用处，而不是如何清理数据，项目是如何构建的，或者某项技术是如何实现的。
我们的起点？一个好的H5，让用户有所收获。
我们应该首先决定我们希望用户看到和知道哪些数据，相应地，用户会有什么样的感受，以及它最终会对我们的整个产品和项目有什么样的帮助。
以支付宝年度账单H5为例：通过查看支付宝年度账单，我可以得到以下结果：
我每个月通过支付宝花多少钱？我在支付宝消费的类型和结构？我支出的大致排名？我的蚂蚁金服理财收入？通过朋友圈朋友分享的个人账单信息对朋友消费的大致印象？整理一下是支付宝的出发点：
让用户了解去年支付宝上的资金流向，感受到支付宝已经深入到他们生活的方方面面。让用户潜移默化地认为数据整合处理是互联网产品的一项基础附加服务，增强了用户的信任感和用户粘性。在社交媒体上分享他们的年度账单，以激起热门话题，希望李子能解渴。如果连“梅子”都没看过，怎么解渴？
本期的出发点是基于我们3354《2017年金城饭卡年度账单》第二期HTML5，那么基本可以确定我们的一个出发点了。
提供饭卡个人消费数据，全校整体消费数据，两者对比数据，为用户炒话题，吸引流量，让更多人关注金诚数据实验室在做的事情，让它更广为人知，覆盖更多校园人群(饭卡用户数量比之前图书馆多)。应该怎么构思？有了一个起点，接下来，我们来说说怎么受孕。
第一步：明确样本数据。巧妇难为无米之炊。你的想法再巧妙，没有原始的素材(数据)也无法实现。
所以在做想法的时候，首先要明确自己有哪些数据，哪些数据可以公布。
姓名交易金额余额类型日期时间地点XXXX40155唐某某1018.4支付宝2017年12月12日转账至新食堂1楼/3019:38336056。
通过上面数据处理团队清理出来的样本数据，可以知道自己手里有哪些数据。总共有八个字段。
我们所有的想法，不加其他纬度的数据，都得围绕这八个领域展开。
第二步：整理构思要求。在构思过程中，需要整理出一个名为“H5构思数据需求”的表格，如下：
这个表格很有用。它充当下游工作组之间的沟通。
第三步：构思H5故事。我想用HTML5构思一个什么样的故事？
这里以网易云音乐的年度回忆录H5为案例：
看完我的网易云听歌回忆录H5，我的感觉是温暖的。
我用下面这段话来描述我的感受：
就像一股无形的力量涌入我原本麻木的身体，激励我踏剑征服星辰大海。我的身后是过去，我的面前是未来。为了人民的爱，为了理想，勇往直前！阳光明媚，一切都好。
请不要笑，这是我看完这篇报道的内心戏。我能有这种感觉吗？能成为优秀的H5吗？
这种H5带来的感觉很符合网易云音乐的口号：“音乐的力量”！
回到我们对这个问题的构想，首先我们要明确一个讲故事的基调。我们的H5主题关键词是“年度饭卡消费及账单”。
然后还有很多“钥匙”可以选择，比如“吃货的轻松方式”、“对美食的敬畏”、“金钱衡量美食的感觉”…
每个人的文笔都不一样。所以这个环节的头脑风暴或者集体思考是非常不鼓励的。
建议你带上耳机，选一段音乐慢慢听。同时拿着笔，有灵感就写下来，一气呵成地把数据和故事联系起来。
第四步：裁剪故事画原型。有了故事，再把故事剪成小块。
比如这两行我想讲的是他在一年中最早吃早饭的时间，那么我们可以设置一个副标题叫“最早吃饭的时间”。
H5页面的内容是狭义的文案，广义的内容数据的UI动态效果的组合。
做好HTML5的构思，在我看来，要把广义上的一切都考虑进去，从头开始想最后会是什么样子。
所以我们一直推荐团队成员使用墨刀、mockplus等原型工具来“画”出自己内心的想法。
下图是墨刀原型设计工具的主界面。我们可以看到，我们把故事切割成不同的主题后，就形成了不同的页面。
我的团队为同学们设想的原则是：
一页只讲述一个小话题，一页只展示一种数据，数据长度不超过八页(不包括授权页、前导页、结束页、分享页等交易流程的页面)。
这里的原型不是指高保真的原型，而是最简单的拼凑和排列。
第五步：每个人都是创造者，每个人都会写出不同的故事。
最后大家把每个人的故事都看一遍，然后选出最好最适合的故事。
除了最好的故事，你可以把这个原型提交给后续工作组，传输如下：
第六步：文案优化调整文案好不好，影响用户阅读时的流畅度和好感度。
对于文案优化，我印象最深的是小学课本上的一个故事。
一个瞎眼的乞丐向诗人雨果乞讨，雨果说：“我也很穷，没钱给你。”随即，他当着乞丐的面在卡片上写了一句话：“春天来了，我却看不见她！”于是，感动的路人把钱放进乞丐的铁罐里……”
我们要做的就是雨果要做的。
UI设计和HTML5开发的后续会在制作过程中，会有互相妥协的时候：
比如这段文字放在两行页面上不好看，这时候就需要修改或者精简文案或者修改设计方案。
结论最近经常和朋友讨论。做一个好的HTML5最难的部分是什么？
是发展吗？第一次踩坑，总结了经验，搭建了一个简单的框架，以后会节省很多时间。随着时间的推移，HTML5开发起来会越来越得心应手。
想去，最难的是立意和策划！这样会耗费大量的时间和精力去构思，但也最影响最终的效果。
因为我们没有经验，只有思考。当我们想好了，我们就去做。从0到1的积累过程是痛苦的，也是刺激的。
最怕的是没有专业技能，也不想关注，无法前进。
我愿意利用这段时间，把自己的想法和经历写下来，传递给大家。我也希望我花的时间是值得的。
和你一起鼓励！
暂无讨论，说说你的看法吧
