来自产品经理及设计师的反思：做一个H5活动页面的那些“坑”.pdf

来自产品经理与设计师的反思 ：做一个H5活动页面的那些“坑” 从一个简单的H5预约活动看产品带 程序员、设计宝宝们踩过的坑。 作为一个入门的产品“小司机” ，目前正在“开车带路” ，与几位程序员“老司机”闭眼踩坑 ，在摸索上线 的我们教育产品的第一版当中 ，期间用了两周的时间上线了一款预约H5应用。借用这款简单的产品 ，笔者想和大家简单地分享一下在这短短的两周之内踩过得大大小小的“坑” ！希望在警醒自己的同时 能给各位带来帮助。 不想听我BB的小伙伴总结概述如下 ： 1. 加强沟通确保信息对称 建立需求沟通机制 ，并严格执行 ； 信息透明 ，各团队知悉彼此工作节奏 ； 及时同步需求落实的关键节点 ； 管理好需求方产品预期 ； 2. 文档细致 ，逻辑清晰完整 细致 ！细致 ！细致 ！原型输出采用真实的数据 ； 保证文案精炼、设计风格预期明确 ； 逻辑规则清晰、页面状态无遗漏 ； 3. 多动手 ，少动嘴 ； 4 . 在产品设 时一定要明确触达用户的路径 ，在用户想唤醒产品的时候能够出现在用户预期的行为 路径当中 ； 5. 上线前一定要在实际场景当中多角色体验产品。 下面是这个H5活动页面 坑一 ：沟通 ！沟通 ！沟通 ！ 重要的事情说三遍 ！产品经理的工作就是从纷繁的业务、场景、用户乱象中理出需求 ，然后利用研 发宝宝的技术能力解决问题。网络上流传着各种锁定需求的秘籍宝典 ，笔者就不在这里班门弄斧了 。但是笔者要强调一点就是沟通 ！ 产品经理作为需求方 （Boss 甲方 ）以及实现方的纽带沟通是一项基本且很重要的能力。沟通包含 对内沟通以及对外沟通 ，对外沟通协助需求方理清业务逻辑 ，对内帮助设计、研发、测试宝宝们更 好的理解需求推动产品实现。 1.需求 笔者这次对外沟通对接的业务团队业务能力Max ，在半个小时的需求会议当中敲定了整体的业务 需求。笔者从未遇到如此顺利的需求会议 ，简单地认为需求“So easy” ，然而事实告诉笔者 ，还是太 ！年 ！轻 ！ 为了快速地落实需求在当天晚上全公司内部进行了详细的需求讨论、任务拆解及开发进度评估 ，需 求初稿为提前锁定业务团队冬季销售业绩的预约活动 ，只需承载预约功能即可 ，笔者输出了如下图 的第一版需求 ： 然而在和团队同学脑暴时 ，我们发现用户的购买场景有可能与线下团队的推广场景是分开的。只有 这一页 ，谁会买单呢 ？ 页面一定是会通过各种传播转发的 ，只有这么简洁的说明 ，啥也说明不了啊。所以 ，又需要加一页 预约产品详情介绍…… 2. 视觉 由于需求非常紧急 ，为了节省开发时间 ，让设计同学和研发同学同步启动。设计同学先确定了活动 详情页头图的设计思路及配色 ，选择了紫色作为基本色 ，白色辅助 ，绿色强调 ；然后便开始了预约 等功能型页面的设计 ，而将最花费时间但开发起来相对容易的活动详情页放在最后设计。 输出的样式是酱的 ： 然而和业务团队的同事确认需求时页头部分的进度条文案是酱的 ： 业务团队的同事对于设计稿的预期是酱的 ： 经过一番讨si论bi后 ，我们定稿了初稿的样式。 3.文案 开始时业务方的同学给了两条建议文案 ： 冰雪王国没有黑魔法 ，但我驾驭了雪上“飞行” ； 我会变成巨人 ，踏着雪板 ，踩着风 ； 开始觉得第二句还不错 ，就按这个文案的感觉做出了头图的效果。但这两句文案太过文艺 ，不能很 明确的表达主题 ，不太适合做页面的主标题 ，所以打算用做辅助文案 ，而主标题直接采用“2017万 科梅沙冬令营预约开始”。 根据页面的设计效果 ，需要一句过渡文案引出下面的详情介绍。当时我们的产品同事们给出了众多 的文案备选 ： 最后我们采用的是“让我们再聚冰雪世界 ，体验雪上飞行”这句文案。输出的样式是酱的 ： 4 .图片 大部分用户是看不出页面的设计效果如何 （比如字体设计 ，色彩搭配什么的 ），但是他们能看懂图 片所传达的内容和情绪 ，所以图片的选择一定是至关重要的。由于设计同学本身只关注了其他视觉 效果的设计 ，而忽略了内容与页面整体效果的把控 ，从而忽视了图片选择的重要性。 原来的单板滑雪图片居然用了这张 ，是酱的 （哪里是冬令营啊 ，是老年人在蹒跚吧 ）： （老年人走路 ，改成了酱 ，如下图 ）比原来好一些 ，其实还不满意 ，没办法 ，自己拍的有版权的图 片也就这一张好一点 ，今年冬天 ，要多拍冬令营的滑雪照片啊…… 原来的雪圈 （雪上运动 ）图片是酱的~ （收拾东西回家了 ！改成了酱 ，如下图 ）替换之后画面有木有更High ？ 5.研发 细致 ！细致 ！细致 ！对