《金城数据实验室》每期的最终输出都是一个HTML5，用户查看HTML5的全过程将决定这个HTML5的评分。

我希望团队中的数据构思和分析团队成员可以通过阅读我对H5理念构思的总结得到启发和收获。

本文的观点来自个人经验和理解。如果有脱离实际情况和思维局限的地方，我想指出。

用户最关心什么？ 从我个人的角度来看，为了制定HTML5页面的评分标准，我会考虑以下评分项目:

评分项目权重(最大值:10)页面加载速度6页面美学5页面背景音乐3页面演示内容8页面演示数据6页面动画效果4

在我看来，页面呈现的内容很重要，所以被赋予了最高的权重。

毕竟，用户最关心的是H5的内容能为“我”带来什么有用性，而不是“如何清理数据”、“如何构建项目”或“如何实现某种技术”。

我们的起点？ 一个好的H5应该让用户有所收获。

我们首先要决定我们希望用户看到和了解哪些数据，相应的，用户会有什么样的感受，最终会给我们整个产品和项目提供什么样的帮助。

支付宝案件 举一个支付宝年度账单的例子H5:通过看支付宝的年度账单，我可以得出以下结论:

我每个月通过支付宝花多少钱 我在支付宝消费的类型结构 我消费的粗略排名 我在蚂蚁金服的收入 朋友圈大家分享的个人计费信息，对朋友的消费情况有一个大概的印象

完成它是支付宝的起点:

让用户了解去年支付宝上的资金流，感觉支付宝已经渗透到了他们生活的方方面面 让用户认为数据的整合是互联网产品的基本附加服务 增强用户信任和用户粘性 在社交媒体上分享你的年度账单

看着梅子解渴，如果没看过梅子，怎么解渴？

这个问题的起点 基于我们的《2017金城饭卡年单》第二期HTML5，基本可以确定我们的一个切入点。

向用户提供饭卡个人消费数据、全校整体消费数据以及两者的对比数据 炒话题吸引流量让更多人关注金城数据实验室在做什么 广覆盖增加人气，覆盖校园更多人(饭卡用户群比之前图书馆的用户群多)

应该怎么怀？ 有了一个起点，接下来就来说说怎么怀。

步骤1:清除样本数据 一个聪明的女人没有米饭很难做饭。你的想法再巧妙，没有原材料(数据)也实现不了你的想法。

所以首先要搞清楚我们有哪些数据，哪些数据可以发表。

学号姓名交易金额余额类型日期时间地点XXXX40155唐某某1018.4支付宝转账至新食堂一楼2017年12月30日:38: 56。

通过以上数据处理团队清理的样本数据，我们可以知道我们手里有哪些数据，由八个字段组成。

我们所有的想法，不加其他纬度的数据，都要围绕这八个领域来发展。

第二步:组织概念需求 在构思过程中，应编制一个名为“H5构思数据需求”的表格，具体如下:

这个表很有用，起到了和下游工作组沟通的作用。

第三步:H5故事的构思 我想用HTML5构思一个故事。

以下是网易云音乐年度聆听回忆录《H5》的案例:

看了我的回忆录《听网易云的歌的H5》，我的感觉是内心温暖。

我用下面这段话来描述我的感受:

仿佛有一股无形的力量涌入我原本麻木的身体，激励我踏马夺剑征服星辰大海。我后面是过去，前面是未来。为了亲人，为了理想，勇往直前！阳光明媚，一切都很好。

请不要笑，这是我看完这篇报道后的内心戏。我能有这种感觉吗，难道不是一个优秀的H5吗？

这个H5带给我的感觉，符合网易云音乐的口号:“音乐的力量”！

回到我们对这个问题的概念，首先，我们需要澄清一个故事的主旨。我们H5的主题关键词是“年卡消费和吃饭账单”。

然后有很多“基调”可以选择，“容易吃”，“对食物的敬畏”，“金钱衡量食物的感受”...

每个人的文笔都不一样。所以这个环节不建议头脑风暴或者集体构思。

建议你戴上耳机，选一段音乐慢慢听。同时拿着笔，有灵感就写下来，一口气把数据和故事连起来。

第四步:剪故事&:画原型 一旦有了故事，就把故事切成小块。

比如这两行，我想告诉他今年最早什么时候吃早饭，所以我们可以设置一个副标题叫“最早吃饭时间”。

H5页面的内容是狭义的文案，广义的内容+数据+UI+动态效果的组合。

要想很好的构思HTML5，在我看来，要把广义上的一切都考虑进去，就要从一开始就想好最后会是什么样子。

所以我们一直推荐团队成员使用墨刀、mockplus等原型工具来“画”出自己内心的想法。

下图是墨刀原型设计工具的主界面。我们可以看到，我们把故事切割成不同的主题后，就形成了不同的页面。

我为组建团队的学生设定的原则是:

一页只讲一个小题目，一页只显示一种数据，数据长度不超过八页(不包括授权页、指南页、结束页、分享页等交易流程页)。

这里的原型不是高保真的原型，而是最简单的拼凑和排列。

第五步:评估和选择

每个人都是创作者，每个人都会写不同的故事。

最后大家看大家的故事，然后选出最好最适合的故事。

如果选择了最好的故事，可以把这个原型提交给后续工作组。变速器如下:

第六步:文案优化调整 文案好不好，会影响用户阅读时的流畅度和好感度。

文案优化给我印象最深的是小学课本上的一个故事。

一个盲人乞丐恳求诗人雨果，雨果说:“我也很穷，没钱给你。”立刻，他在乞丐面前的卡片上写下了一句话:“春天来了，但我看不见她！”结果，感动的路人把钱放进了乞丐的铁罐里..."

我们要做的就是雨果要做的。

UI设计，HTML5开发后续会议，在制作过程中，会有多次相互妥协:

比如这一段文字在两行页面上不好看，此时就需要修改或者精简文案或者修改设计方案。

标签 最近经常和朋友讨论。制作一个HTML5最难的地方是哪里？

是发展吗？第一次踩坑后，我们总结经验，建立了一个简单的框架，以后会节省很多时间。随着时间的推移，HTML5开发起来会越来越得心应手。

想想，最难的是构思和规划！怀孕需要花费大量的时间和精力，但也是最影响最终结果的。

因为我们没有经验，我们只思考，想好了就去做。从0到1的积累过程是痛苦而又刺激的。

我最怕的是自己没有专业技能，不想关注，所以无法前进。

我愿意花大量的时间写下我的想法和经历，并把它们传递给每个人。也希望我花的时间是值得的。

分享给你！