鲁滨逊旅游网

　　每逢大促网上总会流传出一些标题类似《这些宝贝不剁会后悔》的EXCEL表格，里面就是各种商品的链接，机密感很强;电商运营常借用EXCEL绝密文件的形式，激发用户的好奇心，吸引用户观看和分享。此形式因排版比较单一，适合罗列同质性内容(比如单品曝光)。内容排列紧凑，操作区域集中，易操作度较高。这种设计形式的页面通常比较长，视觉样式同质化严重，页面尾部流量不足。当活动信息众多，信息优先级都很高的时候不建议使用此方式。

　　一键预约：是否需要提供一键预约所有优惠功能;这个功能需要慎重考虑，需要考虑各子活动的开始时间，若全部提醒会过度打扰用户，就会面临取消关注，关闭通知权限，拉黑等不良后果。

　　信息承载度：★☆☆☆☆

　　信息设计包括信息分类和可视化设计，可视化设计最终也会落实为界面元素。

　　用户对于交互组件将怎样工作的观点称为概念模型(也称心里模型)，设计者将功能展现给用户的方式称为表现模型，表现模型越接近于用户心理模型，用户就会感觉到产品容易使用和理解。在设计攻略页时，首先要设计个整体的表现模型，比如“攻略播报电台”，“内部泄密文件表格”，“新年醒狮送攻略”等会形成具体认知概念的模型，也可以不选择任何具象的趣味概念，直接以抽象的表现形式承载。但要注意，你选择的具象概念，不论是从视觉上还是从文字语义上，都要符合用户的原有认知。

　　一些比较抽象的描述可以配合原型图来展示，一切都是为了方便沟通的快速表达。基于这样的描述和确定好的表现模型，我们就可以进入框架层阶段了。

　　因本次攻略设计以形式创新为主要目标，所以在范围层阶段就对表现模型进行了确定;功能比较少，也比较简单，所以直接对功能进行交互细化。表现模型为攻略电台，采用短视频配合口播的形式播报促销信息，并配合简版时间轴列表。对促销信息进行主题包装，每个主题一个短视频。这一步，我们将范围层和结构层内容结合成一个文档输出。

　　结语

　　各个分场景的动画感知确定和静态视觉元素感知确定，动画场景脚本编写

　　可以理解为把“幻灯片样式”中的每个页面接起来，直接下滑无需翻页，信息传达效率较高，趣味性较低，若视觉样式同质性较高，也存在尾部流量过低的风险。可以采用将页面内容模块化，各模块做视觉样式的区分，可随机调整模块顺序的机制，保证主要内容的信息优先级。也可以给每个模块配以趣味动画，提高趣味性，吸引用户观看到底。

　　具体数据为敏感消息，这里就不做具体展示。只罗列几条本次数据分析中得出的用户体验方面的结论，希望为大家以后的设计提供帮助。

　　2.3、画交互：

　　3.4、幻灯片：

　　主页面的视觉元素感知确定

　　以上五个步骤完成之后，产品方案阶段就完成了。运营同学根据交互稿编写《开发需求文档》 和《数据需求文档》 ，前端同学根据视觉稿进行前端设计。作为攻略页负责人，运营同学还需要考虑的就是攻略页的入口资源。

　　易操作度： ★☆☆☆☆

　　当用户浏览到正在进行的卖场或活动时，可直接点击进入相应页面

　　易操作度： ★★★★☆

　　 有趣的内容形式能拉长用户停留时间，可间接提高预约量和引流量

　　 来不及仔细看动画中的促销信息，看到了预约按钮也来不及点预约

　　交互设计关注于描述“可能的用户行为”，同时定义“系统如何配合与响应”这些用户行为;

　　以上五个步骤并不是循序依次进行的，实际工作中经常会遇到反复的情况。比如进行到交互设计阶段发现需要加一个新功能才能实现产品目标，这时就要对范围层进行修改，并重新进行功能开发调研。为设计出好的产品这种情况不可避免，好的方法是，让每一个层面的工作在下一个层面可以结束之前完成即可。

　　作者： snowshine321

　　内容方面，需要收集本次大促会场的数量，各个会场各自的促销时间节奏和优惠利益点;各个营销活动的时间节奏，奖品和玩法。通常在攻略页的设计阶段，我们并不能收集到特别详细的信息，只能确定一级活动的开始时间和最给力利益点，有时这种信息也收集不到，这就需要我们选择普适性较高的表现模型，能容纳的下任何类型的信息设计。

　　本文内容为笔者在多次大促攻略页设计经验中总结出来的一套方法，希望能对要设计促销攻略页的运营同学和交互同学有所帮助。

　　易操作度： ★★★☆☆

　　我们要通过这个产品得到什么?

　　3.1、EXCEL表格：

　　信息承载度：★★★★☆

　　导航设计是指引导用户在各种信息节点之间穿梭的方式，并告知用户在信息架构中的位置，最终会落实为界面元素;

　　趣味性： ★★★★★

　　信息承载度：★☆☆☆☆

　　即使是攻略页这样的小型产品，在战略层阶段，也是需要各利益相关者共同得出的，当然最终的目标还是需要本次的产品决策者来确定，那个人应该是本次促销活动整体的大PM，或者你的直属领导。

　　趣味性： ★☆☆☆☆

　　其中第二个问题，产品在线上时我们通过调整每段动画最后一帧停留时长进行了改善。

　　2.1、战略关键词以及验收标准建立

　　信息承载度：★★★★★

　　初步整理：本次设计需要有【loading页】【教导页】【主页】【简版攻略页】4个主要页面，和各种操作反馈弹窗。

　　1.2、范围层—产品功能确定和内容网罗

　　我们的用户要通过这个产品得到什么?

　　易操作度： ★★★☆☆

　　1.4、框架层—界面设计、导航设计和信息设计

　　第三部分：表现模型可用性评价

　　回答了第一个问题，即确定了产品目标;在攻略页的设计中，通常对攻略页定下的产品目标可能有：曝光大促内容，预约回流，为大促会场/自营活动/品牌活动引流，分享传播，发券，成交，品牌识别等。根据每次大促的战略不同，攻略页承担的产品目标也不一样。在确定具体产品目标后，需要对目标优先级进行排序，这决定了接下来的产品具体形态。

　　下面我来讲述一下京东微信购物入口2017年双11攻略页的设计过程，让大家能更好的理解攻略页设计的方法。

　　易操作度： ★☆☆☆☆

　　表现层是用户会首先注意到的地方，这里，内容，功能和美学汇集到一起，完成其他四个层面的所有目标，并同时满足用户的感官感受。攻略页的表现层涉及到视觉感受和听觉感受两个部分。因为是大促整个产品的子产品，在表现层设计时需确定攻略页的感知设计是否要遵循大促整体感知规范，如果遵循，要遵循到什么程度，攻略本身的可设计空间有多大。

　　你可以自由控制这张雷达图的节点数量和网格层数。保证你的关键词都是易懂的，如果简短的关键词一眼看去不能明其要旨，就需要对关键词进行备注性解释，毕竟这张图是为了帮助我们快速的整理需求，准确的沟通需求。

　　在进行视觉设计和音效设计之前，最重要的工作就是搜集资料并做整理，完整的把你思维中的形象落实到资料上并传达给设计师;本次感知设计的工作分为三方面：

　　有些感知比较难用语言表达，直接给图片，视频，或音频参考即可。最终视觉表现如下图，项目已下线，只能提供重构稿体验链接给大家观看。#1

　　类似于支付宝的年终账单，分页查看内容，长度通常控制在4-8屏。此形式没什么不好，适合承载各种类型的信息，就是过于常见，不够新颖;为提高趣味性，可在转场动画上做特殊效果，或在单页内插入趣味GIF图，具体趣味性到底如何，就要看动画和内容的创意啦!

　　信息承载度：★★★★★

　　3.5、时间轴或类别列表：

　　对应的，我们每个阶段输出的文档，都可能要面临很多次修改，每次修改都需要周知流程各相关人员以保证大家对产品进程理解一致。

　　抽奖：发券的形式通常是用户抽奖得券，引导用户分享的机制通常是获得抽奖机会，就需确定抽奖形式，进行奖池搭建和风险控制等

　　总的来说，以视频展示攻略信息的表现模型效果一般。但我们证实了提高界面趣味性和视觉丰富度确实可以提高用户浏览时长的结论，而且是基于数据的准确结论(因为很多人经常认为产品趣味性和优秀的用户体验耗费了大量的资源却没什么明显效果，运营同学在给项目申请资源时经常得不到足够的设计支持，有了这条结论，下次我们就可以理直气壮的申请资源啦!)。综合以上，可以总结出如何提高界面趣味性，保证高效传达信息，方便用户操作，是每次攻略页设计时首要考虑的问题。以上就是本次攻略页设计的全过程。攻略页这样的产品最重要的就是选择合适的表现模型，表现模型选对了，接下来的交互操作和信息可视化设计和趣味性的提高就都很简单了。所以本文的最后一部分，就对各种笔者已经见过的攻略页表现模型做一个可用性评价，希望对以后设计攻略页的小伙伴有帮助，至少，前辈们踩过的坑后辈们可以不要再踩啦~

　　 能够注意到彩蛋红包，并且愿意点击，知道点击可以抽奖

　　趣味性： ★★★☆☆

　　趣味性： ★☆☆☆☆→★★★★☆

　　当你把用户需求和产品目标转变成产品应该提供给用户什么样的内容和功能时，战略就变成了范围。 —–《用户体验要素》Jesse James Garrett

　　举个例子，我们曾经有过一个“攻略售货机”的表现方案，这个表现模型就存在认知冲突：用户对售货机的认知是，一个贩卖多种商品的机器，以此为表现模型，用户会疑惑“攻略售货机”是什么，卖攻略的么?机器里会卖很多攻略么?我要买攻略要什么成本么?……等等造成用户困惑的，对产品没有帮助的疑惑。同时“售货机”这个概念也限制住了视觉样式，要形成售货机的概念，视觉元素就脱离不开售货机本身;即使是选取关键视觉元素进行抽象表达，也不能形成很好的认知概念。

　　“攻略”这一常见的词汇在用户心中已形成一定的认知概念，可以用语言准确的描述为：在活动中向用户传达活动信息，帮助用户更好的参与活动并达到参与目的的指南性说明。所以，曝光促销信息，在页面上给用户提供参与活动的入口(参与方式)，告诉用户怎么买最划算(省钱指导)，即为本次产品的用户需求。