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