数据产品小程序MVP版本设计复盘


一、概览

⛳1.1 背景

罗盘策略平台对于无线需求缺口较大，为了实现用户更便捷看自己、看大盘、看竞对基础数据能力， c需要补全各端体验闭环， 提升用户粘性和心智，目前小程序MVP版本已推进落地，通过框架迁移、0-1的设计落地和细节打磨，以及开发过程中发现的小程序设计需要注意的事项进行总结复盘，为二期以及其他平台移动落地打下基础并提供借鉴和经验。

📚1.2 内容

第一部分：【复盘概览】复盘的项目背景和具体文档内容；第二部分：【设计目标】讨论设计目标和策略；
第三部分：【设计动线与用户访谈】结合立项前中期的用户访谈，分析用户动线；
第四部分：【如何从0-1搭建】围绕产品框架从pc到移动的迁移，和设计组件的搭建进行复盘；
第五部分：【打磨细节】分析移动和pc组件使用的注意事项，以及小程序设计和app的差异点；
第六部分：【反思与总结】对产品准备、落地、推动各阶段流程进行反思和总结。

二、设计策略

保障0-1项目设计方向明确，深入探索业务场景，助力业务快跑。0-1项目初期，产品对于整体结构和框架的构想往往会不清晰，又急于得到结果验证，因此更需要设计作为产品和用户的沟通桥梁，一方面通过前期设计储备报告共同定制MVP版本的核心能力，了解市场需求，另一方面通过自发的用户调研接触一线活跃用户，找到用户痛点，综合产品和用户视角，找到最优解法。

   设计前 BEFORE   
   设计中 MID  
   设计后 AFTER   
1.设计储备报告
分析动线，优化卡点
探索竞对能力，明确方向
制定设计策略、设计预研
📖罗盘策略-移动端调研🔗

 2.主导
深入用户访谈
了解用户痛点，明确业务需求📖小程序设计指南🔗
1.深入用户访谈
主导可用性测试，调整方向
2.MVP版本业务拆解
多方共建和迁移基础框架
明确风格
可复用搭建组件沉淀
1.多轮验收机制
多轮验收，打磨细节
设计复盘报告
2.反思与总结沉淀
追踪数据
提升体验 
📖设计复盘(本篇)


三、用户访谈与策略

3.1 分阶段用户访谈

整体分为前期和中期两部分用户访谈，后期访谈会在上线后逐步开展并迭代。

3.11 前期访谈-奠定基调
在前期的15+头部品牌访谈中，大部分用户表示希望有移动端，特别是在非工作日场景或非工位场景下会高频使用，获得的移动体验相关的问题汇总如下(剔除保密信息，仅展示部分内容)：
👩‍🦰“希望能有移动端看板，监控实时、周，月维度品牌下店铺核心经营指标，竞品流量构成&TOP商品。”
👱‍♂️“希望可视化方式：1. 看自己：店铺销售情况，同比/环比趋势，日周月黑马店铺/商品，异常预警；2. 看行业&竞品：同类目下其他品牌竞对；行业大盘数据/上升趋势图，占比直观。”
🧑🏻‍🦰“比较想要无线场景。会看各个店铺的数据，出差/周末/不在座位上，手机看更方便，每个月想去收集报表，手机直接点击自动生成会很方便。”
🧔‍♂️“想在移动端看直播流量问题”

3.12 中期访谈-明确方向根据中期的可用性测试和访谈，走访5家头部品牌商家，筛选的这些商家均保持工作日日均1次以上，周末1次左右使用频率。第一版设计稿，采访了两家品牌，并根据反馈及时调整。
【首页】
👱‍♀️“习惯从店铺里看不同商品，不是SPU汇总的数据。希望是最细粒度的数据，否则没有多大意义。”
👨🏽‍🦱“对图表没有太多倾向，有载体数据就行。”
【市场页面】
👩🏼‍🦳“使用频次低一些，目前没有看不懂的地方。”
△ 第1版设计稿
第二版设计稿，在用户访谈基础上进行迭代。调研中发现，用户普遍对于中期设计较为满意，没有明显的图表选型困惑和体验意见。在收集到全部意见后，对于后续方向和功能体验提升都有所增益。
【首页】
🧔 “数据是否有重合性？全部的数据维度能否更明显？”
👩‍🦱 “希望取数时间段可自定义、对比时间段可自定义。不排斥在移动的下钻能力。”
【市场】
👨‍🦰 “老板看市场-榜单最频繁，品牌榜和店铺榜对商家优先级更重要。”
【预期】
👨‍🦲“如果能看到移动端的报告，对老板来说比较有意义，简单的一周一出，复杂的就月报。”
△ 第2版设计稿


3.2 用户典型动线

通过调研访谈得到的用户动线，还需要在上线后进一步验证和调整。

典型动线
第一步
第二步
动线示意图
[查看GMV]
查看默认实时数据
[查看数据目标进度]
时间筛选-查看目标数据[查看生意整体表现]
周报-推送提醒订阅
[查看整体数据]
查看默认实时数据
[查看直播间数据]
首页直播间数据>直播间详情
[查看直播间违规]
首页-预警bar>直播间预警
[查看整体数据]
查看默认实时数据
[查看引流数据]
首页短视频数据>短视频详情>切换排序条件
[查看整体数据]
查看默认实时数据
[查看商品销量/爆款]
首页商品数据>商品详情
[查看商品/店铺预警]
首页-预警入口>商品/店铺预警

四、如何从0-1快速搭建

4.1 框架的迁移

App主要通过看大盘、看竞对、看自己的维度来拆解PC的场、货、人，双端在用户场景和诉求上略有不同。
本期MVP版本主要实现基础能力，实现用户随时随地、便捷的查看数据的能力，逐渐满足多用户角色需求，从管理层粗粒度的宏观数据维度，下钻到各用户角色(市场销售-运营-店长等角色)的维度。


4.2业务组件的搭建

对于没有基础组件及视觉风格的产品线，在业务组件的搭建上需要从零开始决策风格和搭建。策略小程序业务是基于原有PC风格的多端拓展，因此省略了决策风格和颜色这一步。MVP项目快速从0-1的同时，如果能够配合业务组件的同步落地，会减少后期迭代，替换规范和组件的人力成本，也会提高项目的分阶段迭代的效率。 在明确交互流程和设计初稿以后，就可以对组件进行封装，需要就以下内容进行明确：
4.21 明确栅格和padding
栅格
 使用 4px 软栅格，以4的倍数设定页面元素宽度，不再使用槽的概念。


padding
 以4的倍数设定页面间距（如4、8、12、16、20、24、32、40），页面间距一般为16，卡片默认间距一般为12。

4.22 明确字体和字高在最初创立之前，设定好文字的字号以及行高Line Height，明确各层级使用字号规则（比如一级、二级标题字号等），可以避免后期不必要的重复和替换工作；另外行高会影响padding，在计算间距时候需要注意行高影响页面的视觉体验。


4.23 明确框架和层级逻辑从项目进入设计阶段初始，就确定并沿用一致的页面框架，特别是在项目后期页面和层级过多时，可以避免页面框架和跳转流程不一致的问题。

明确一级导航、二级导航和标题的使用规范， 避免层级混乱。
卡片标题（数量=1）卡片标题（数量>1）
一级(上) & 二级(下)页面标题
4.24 明确其他细节其他细节如圆角，边框、分割线以及阴影，也需要早期明确，否则会影响基础组件的搭建。（仅展示常用规范）
圆角

△4pt 基础元素 较小组件

△8pt 大基础组件
边框&分割线

△1px 适用于分割线和边框场景

阴影

△阴影方向向下（常用，非唯一）

4.25 明确基础组件
 完善基础组件，比如表单相关数据录入组件：选择器、搜索、输入、单选/多选等组件，按钮，数据展示组件：选项卡，头像等，数据反馈组件：标签、浮层、弹窗、提示等规范。（根据每个业务可能有出入）


4.26 搭建基础icon
 如果没有可以使用的图标库，需要自己创建一套图标库。首先明确图标的安全大小，然后明确图标风格。基础辅助图标比如箭头、关闭等需要优先确定，这些图标往往使用频率高，替换成本较高；功能类图标或特殊图标，可以在设计中逐步明确和替换。
安全区域
 蓝色：安全区域
红色：推进绘制区域
基础辅助图标

功能&特殊图标


4.27 缺省情况补全
对于极限情况进行说明，比如无网络/离线、无搜索结果、空白页等情况进行补充。在页面加载状态下，考虑到移动端网络速度不稳定性和后端取数的延迟性，需要完善页面级别至元素级别的loading兜底态。
页面级别兜底👇
△首页加载态(左) / 市场页面加载态(右)

元素级别兜底👇
△以市场页面-商品榜-头像为例(左) / 兜底头像样式(右)


五、打磨细节

5.1移动和PC组件使用注意事项

部分组件在移动和PC的使用上有经验和差别，比如单选和多选的样式表达。
5.11单选
💻PC👇
样式1

📱移动👇

样式1


△滚动式单选，参考ios时间选择器
样式2


△以上两种样式均可，部分平台会使用标签样式作为tabs，需要注意区分。






5.12多选
样式2


△在标签单选组件中，部分产品会选择胶囊式(大圆角)表示单选，矩形式(小圆角)表示多选，但大部分产品未做区分，具体选择符合产品规范即可。
💻PC👇
样式1

📱移动👇

样式1

样式2

△部分产品会区分单选和多选标签样式，如右上角加上角标等
样式2

5.13逻辑
对于复杂内容的展示逻辑，比如更多信息设置等(多指B端产品的增改)，PC多以弹窗/浮层为承载形式，对于较多内容场景较常用抽屉形式；而移动受限于屏幕较小原因，展开逻辑多为浮层+分步骤展开，对于较多内容场景较常用新页面形式。
比如：典型的设置表单页面，用户需要对内容进行关联选择，先选择一级单选，再根据单选内容选择二级多选项，PC上的基本原则是尽量简化步骤保持清晰，但是移动就需要对于关联的一、二级内容进行步骤拆分，在移动上反而是清晰的，移动需要保持每个页面的聚焦性，减少视觉干扰。
💻PC👇

📱移动👇


另一个使用场景是解释说明等轻量的使用场景，PC多以toast形式展现，移动展示多为弹窗，也有将多解释提示信息汇总，作为新页面统一聚合展示的场景。
💻PC👇

📱移动👇


5.2小程序设计的注意事项

在之前的文档中，笔者总结过小程序设计原理机制和设计注意事项，对于设计而言，整体的设计方法和策略是不变的，需要注意的是落地载体在小程序上的设计特殊性，比如可设计区域。 5.21 顶部导航
顶部导航，开发者只能控制除右上角官方小程序胶囊之外的区域。

5.22 底部导航
在开发中还发现底部导航，碍于小程序规范，只有一级页面可设置官方底导，如有需要，二级页面只能添加自定义的其他底部bar。
在二级页面的导航添加非官方底导，可以参考京东、携程、美团等小程序，引导用户进行如购买等操作，如美团小程序：
一级官方导航

二级导航-样式1

二级导航-样式2

⚠️：一级页面也可以使用非官方底导，但开发反馈，非官方底导可能会有性能问题，一级页面建议使用官方导航。

 5.23 吸顶的处理
吸顶的处理需要注意一些细节，但小程序的设计和app没有太多异同。需要注意如果底部有slogan透出，需要和卡片追随，点击切换tabs后需要设置锚点定位到feed第一条。无数据的白卡状态，需要设置自适应一屏高度以考虑各种移动设备屏幕（确保slogn在卡片下方追随）。
△有数据feed流场景(左) / 无数据兜底场景(右)

5.24 tabs的左右切换
基础的卡片有tabs，切换tab的操作，在小程序实现会影响性能（页面节点过多，如需实现滑动切换，需要每个榜单都常驻），在调研中发现，其他主流小程序很少有实现这个功能。如果想要加入tabs滑动切换能力，可能需要开发着重研究如何提升性能。


5.25 键盘与确认btn
因为小程序不支持键盘上方操作的跟随情况，比如搜索跟随的的语音按钮（如下图-左）或者输入对话跟随的输入框这类场景，会出现键盘弹起内容被盖住的问题。解决的方法有两个，如果非明确需要跟随情况需要的场景，可以依靠修改键盘文案达成，比如“搜索”、“确认”、“跳转”等；也可以考虑在搜索框旁边增加“搜索”btn，以提高场景普适性和通用性，以防用户使用非官方的自定义键盘无法完成操作的可能性。
🙅❌小程序不支持
解决方案1:修改键盘文案以适应具体场景



解决方案2:在上方搜索框旁边增加“搜索”btn，提高键盘的的通用能力。如下图京东小程序的做法：

六、反思与总结反思

6.1小程序审核

另一个需要注意的是小程序官方的审核时间，一个可行性经验是将开发分为两个阶段，第一个阶段提交审核版本（提供大框架，每个tabs均有部分可用内容即可），审核通常需要15-30天左右，为了不影响排期，在审核同时还可以继续进行最终版开发，审核通过以后，替换为最终版，审核时间会缩短至3-5天，再进行最终发布以免影响上线规划。

6.2验收

0-1的项目验收环节更加重要，不仅是打磨细节品质也是自查的机会。本次MVP上线共计走查了4大轮，其中涉及不下100+体验点（不含性能和QA问题），加上后期吐槽群里通过也收集到产运和设计侧各类问题，需要和产品侧开发侧共同耐心打磨。很多问题是边开发走查边发现解决的，比如5.2提到的底部导航和吸顶问题。

6.3设计反思

像小程序这种设计和开发经验较少的项目，前期调研就显得异常重要，以免投入精力产出无法落地。另外，0-1的项目难免在上线前反复迭代推敲，小程序有组件库的基础，可以将主要精力多投入到设计体验中，前期设计框架的敲定和一-二-三级组件使用的明确(比如一级tab和二级tab，一级标题和二级标题的使用)可能会反复确定，为了避免重复替换组件，可以根据4.1提到的顺序进行协作。在设计基本完成后，通过4.2提到的框架路径多次自查也非常重要。

6.4总结

从0-1的项目需要跨团队多线程跟进，其产出落地的过程也一定是较为反复和曲折的。对内来说，如何高效建立、使用组件，平衡团队内部产品一致性同时，奠定新产品基调需要明确的方向判断力和准确的执行力；对外来说，如何和产运、开发侧及时沟通前期想法，推进设计方案的落地需要更多的决策力和影响力。
🔵 设计经验
  • 立项时早介入早准备，设计先行储备
  • 提前筹备风格、组件，避免重复工作
  • 建立多轮、小迭代，快速试错机制
🔴设计教训
  • 及时跟进业务方进展，避免信息异步
  • 及时了解底层依托平台能力，避免因技术问题导致方案无法落地
  • 建立跨团队合作方多沟通，多反馈机制
目前，策略无线平台尚在MVP阶段，仍在进行“开荒”的基建阶段中，无论是设计细节，还是产品功能丰富度，都需要持续跟进优化。想要提升商家的留存和活跃度，仍需要设计与业务侧、技术侧更耐心的打磨，同时阶段性的参与的用户调研，根据用户实操和数据反馈，补全产品全方面的体验，提升产品满意度。 2023.03 FIN

原创禁止转载