腾讯项目实战：红包预热HTML5背后的设计过程资料.docxVIP

腾讯项目实战：红包预热HTML 5背后的设计过程 一网学设计? 小编：一个UV高达9700万的HTML 5页面是怎么设计出来的？这篇实战案例让你全方位感受腾讯设计师的流弊！作为元旦和除夕2亿现金红包预热HTML 5的设计师，今天里奥同学把设计过程中的思考和经验都总结分享出来，来学习！ 开始之际 首先祝大家新年快乐～新年新气象，天天猴赛雷！今年除夕，QQ红包2亿现金大家估计都收获不少吧（反正我是刷出了不少，哦呵呵呵呵！），而在大家欢乐刷一刷的背后，我们也是进行了不少的工作。除了全民刷一刷的重要功能体验，元旦和除夕我们都做了预热推广的H5，告知用户这个活动的相关信息和内容并让用户对这个活动感兴趣。预热推广将会影响到用户参与到刷一刷活动的人数和参与体验，因此要打造一个体验不错的预热H5，需要策划、技术、设计的紧密配合，那么设计在其中做了什么工作呢，这个故事让我娓娓道来…… 宝宝心里有点苦 “那个元旦刷一刷红包预热H5，你来做下呗？”“哦…好哒～” 当我接下这个运营活动的时候，根据以往做运营的经验，预计这个需求不会太难弄。很快的，运营策划童鞋过来和我讲解并沟通需求，沟通一开始挺愉快，然后他们和我说这次希望做个告知用户刷红包时间的预热H5活动，并给出以下的一些需求和一些风险点： 这个H5需要教育用户刷一刷的操作方式，需要告诉用户明确的抢红包时间、谁来发红包，需要有明确的时间线。 除了最后一页，只能有下拉这一种交互动作（点击啊，左划右划都不出现）。 画面需要精美（常规都是这么要求的吧）。 整个时间线部分最好3屏之内显示完，其中有一屏希望是完整时间线。 希望有刺激用户分享的内容。 关于活动涉及到的具体明星、企业和总明星、企业数量都很难最终确定，可能会有多次调整。 时间点不到临近上线也都有变动和调整的可能。 …… 卧槽？一听完，我当时整个人就懵逼了。这个需求看来是个不小的挑战啊…. 灵光一闪 懵逼没卵用，实干解决才是硬道理。焦头烂额之际，我脑中灵光一闪！要满足上面所提到的各种条件，那么，只要这样就可以啦！所以出了下面这个东东： 这样简单又好实现，操作明确，时间线完整，中间要修改的话也十分好调整，上面需求似乎都能够满足得到，哈哈哈哈哈哈哈……这样“简单而又完整”的一个方案，当然是～ 首先，作为一个有追求的设计师肿么可以就这样随便呢？再者，这次的需求是一个推广性质的运营活动，它需要达到吸引用户参与并推广出去的宣传目的，所以我个人认为在设计的层面它应该具有以下几点： 需要传达的信息明确 它应该和所需推广的功能相关 主题基调贯穿活动（或者热点或者话题） 视觉风格和感受上具有氛围感，有一定视觉冲击力 整个活动有亮点，具有一些有趣的创意和细节 通过这几点来看，那么上面这个所谓的“方案”其实是完全不符合的。要满足运营的需求，也要在设计上达到要求，所以还是脚踏实地认真思考吧～ 正式开工 主题关键词 首先还是要确定下整个活动的基调，这次运营是关于手Q在元旦进行预热的功能“刷一刷红包”的活动推广，因此，这个H5的主题关键词应该从元旦下手去发散，但元旦自民国后不再是我国传统节日，参考点不多，所以通过大家讨论，结合需求，得出关键词：欢乐。 后面我们通过主题关键词进行了脑暴，我联想到以前曾和朋友在一块玩着大富翁游戏十分快乐的场景，而且大富翁游戏也可以和红包还有钱产生关联，所以我们把大富翁作为关键词所具像化后的载体，并提取元素运用在设计中。至于那个大富翁游戏嘛，大致长下面这个样子： ▲ 截图来源于“大富翁7”游戏 功能与活动的关联性 确定活动基调和载体元素，下一步我们要考虑如何让这次的H5预热与“刷一刷红包”这个功能产生关联，除了要出现红包元素，刷一刷的动作也是需要提前教育用户的，所以策划让H5只有一种下拉的交互操作，通过反复的下拉（这就成了刷），让用户潜移默化。在动作上，我们以一些生活上的常识习惯为依据，把下拉当成启动下一步的方式，给用户即时性反馈（如拉开帘幕、拨动云雾、开灯等等），让用户在这个H5中感受自然而不突兀。最后，通过H5尾后的视频直观告知用户怎么参与到刷一刷的活动中，把功能与活动联系上。 结合上面所说的，我们对分享、调整的问题、细节也进行了探讨并制定出了方案，这些点我们后面会提到，先让大家看看整个方案先吧！如下： ……呃，由于草图太草不太好理解，所以还是直接看视觉稿说吧： 灵活调整 这个H5里面最关键的就是时间线部分，通过上面2点，我们想到用地图为载体，把活动具体的明星和企业信息以及时间点按照一个明确的顺序传达给用户，这样不仅直观而且有趣。但由于时间点和明星、企业信息在上线之前都会有策略调整、招商问题等因素的影响，这会大大增加设计返工的风险，而且运营的设计里往往牵一发动全身，改一个地方会涉及到好几个地方（有的时候会波及整个页面乃至整个流程），为此我利用这个