易企微拼团详情页 UI 重做：价签式价格、倒计时卡片，成团进度与参与情况一眼看清

一句话结论：拼团活动详情页的信息卡整体重做了一遍：价格区改成价签式（拼团价大字 + 日常价删除线 + 金底「立省 X 元」），倒计时拆成天 / 时 / 分 / 秒四张主题色卡片不再折行，助力名额、成团进度、已参与的人按顾客看信息的顺序重新分区；海报底边改成圆弧过渡，卡片与段落标题之间的留白收紧一半。商家不用改任何设置，老活动打开就是新样式。

更新了什么

改动全部在顾客打开活动后看到的那一屏，不涉及价格、订单、报名名单里的任何数据：

为什么把这一屏重做一遍

一位顾客从打开活动到点按钮，其实只问自己四件事：多少钱、比平时省多少、还有多久结束、别人是不是已经在参与。这四个问题能在三秒里看完，他才会往下点；看不完，页面再漂亮也留不住人。

旧的详情页把这四件事平铺成四行接近同等粗细的内容：价格不突出、倒计时是一串挤在一起的文字、名额和成团进度混在一起、参与人数只是一句话。信息都在，但没有顺序 —— 顾客要自己一块一块找，找的过程就是他犹豫的过程。

这次没有加新功能，只做了一件事：按顾客的视线顺序把这一屏重新排了一遍，并且把每一块的视觉重量拉开 —— 该最大的（价格）最大，该最紧的（倒计时）最紧，该最有温度（参与的人）最有温度。

设计上做了哪几件事

一、价格从「一行字」变成「一块价签」

以前价格是和单位、日常价排在同一行的三个元素，字号差距很小，看起来更像一个数字而不是一个决定。现在把价格单独做成一块价签：

• 左边给身份：一枚「拼团价」角标，说明这个数字是什么价格；
• 中间给分量：价格字号放到全屏最大，单位和数字之间留出间距，读起来是一口气的一个数；
• 右边给对比：日常价打上删除线，下面一枚金底标签写「立省 X 元」——省多少不用顾客自己减。

这三件事放在同一个横向区块里，用户扫一眼就完成了「多少 → 原来多少 → 省了多少」的判断，不需要在页面上下找第二个价格。

二、倒计时从文字串变成卡片

倒计时的作用不是精确报时，是让人有「时间在走」的感觉。原来的写法是一整行文字，字距紧、天和秒挤在一起，屏幕一窄就折行；折行之后它既不像时间，又占了两行高度。

改成卡片后，天、时、分、秒各是一张独立的圆角卡片，白字居中，宽度固定。好处有三个：不折行、能扫读（眼睛落在数字上就知道还剩多久）、有节奏（四张卡片并排，本身就是一种「在倒计时」的视觉语言）。同一行右侧放「仅剩 N 份」，把「时间」和「数量」两个紧迫信号合并成一行，不再各占一块地方。

三、进度分成两块，各说各的事

拼团有两个进度：助力名额（还差几人能达到门槛）和成团进度（这一团已经有几人）。旧版把两者叠在一个区域里，顾客很容易把「已经几个人」误读成「还差几个人」。

现在先讲名额、再讲成团，各自带自己的进度条与数字，颜色深浅也做了区分。用户想问「我这一团还差几人成团」，视线往下走一格就有答案。

四、让「已经有人参与」变成看得见的东西

同一个活动，一个人都没参与和已经有十几个人参与，给人的感觉完全是两件事。一行「已有 12 人参与」是数据，一墙头像才是氛围——看得见具体的人，才会觉得这事正在发生。

所以参与情况从一句话改成了头像墙：按行排列、超过一行自动换行、人数少时也不会被拉成大图。它的位置放在价格与进度之后、按钮之前——正好在顾客准备做决定的那一刻，给他一个「大家都在」的旁证。

五、留白收紧，让一屏多装一点

旧版的白卡与段落标题之间留白偏大，在手机上经常出现「价格看完了，进度和按钮在下一屏」的断裂感。这次把段落之间的留白收紧一半：卡片还是分开的，但不再是隔着一大段空白，价格、进度、按钮、玩法能在一屏里连着看完。

六、海报与卡片之间改成圆弧

海报底边原来是硬直角，直接压在白卡上，两张不同颜色的图中间像被刀切了一刀。改成圆弧过渡之后，海报的颜色顺着弧线收进白卡，视觉上是一体的，卡片圆角也终于露出来了。

对商家意味着什么

• 同样的活动，看起来更「值」：价格是价签式大字号，省多少直接写出来，顾客不需要自己算，也不需要和别人比较；
• 紧迫感更具体：倒计时卡片 + 仅剩份数同一行，时间与数量两个信号叠在一起，「再想想」的成本被说清楚了；
• 成团门槛更清楚：名额和成团分开显示，顾客知道自己还差几人，转发时也说得出一句「还差 2 人」；
• 冷启动不那么冷：参与头像墙让刚开始的活动也有「已经有人在了」的实感，不用靠文案硬撑；
• 零配置、零维护：没有开关、没有要填的字段、没有要传的图，所有样式跟着活动主题色自动适配；
• 老活动直接受益：不用重建活动，也不用重新发二维码，顾客重新打开就是新版式。

怎么用

这次是纯展示层的改版，不需要任何设置。想把新版式的效果用足，按下面的顺序自查一遍就够：

1. 打开拼团小程序，进活动管理，选中要检查的活动点「编辑」；
2. 留意图文与价格两块的配置即可，界面样式不在这里调，保存后自动生效；
3. 用手机打开这个拼团活动的详情页，看第一屏能不能同时看到价格、倒计时、进度和按钮；
4. 检查日常价与拼团价是否都填了——「立省 X 元」按两者差额自动计算，两个价相同就不会出现这枚标签；
5. 如果活动有助力门槛，确认助力名额填的是你想要的数字，名额与成团进度会分别显示；
6. 在编辑页换一次主题色或模板，价格、胶囊标签、倒计时卡片、按钮会一起换色，确认与海报协调；
7. 把活动链接或二维码发到群里，用别人的手机打开看一眼——不登录、不报名的情况下，这一屏的信息是否依然读得懂；
8. 活动已经上线且不想改配置，直接跳过以上 4-6 步，重新打开详情页就是新版式。

适合什么场景

• 到店类团购（口腔、美业、餐饮、洗护）：顾客对价格敏感，价签式价格 + 立省标签能直接缩短比价时间；
• 教培招生与亲子活动：家长关心「还差几人成团」，名额与成团分区显示后，群里转发时更好开口；
• 限时专场：倒计时卡片与仅剩份数放在同一行，紧迫感落在具体数字上；
• 刚上线、参与人数还少的新活动：参与头像墙是最轻的氛围来源，不用额外做素材。

几点说明

• 本次是界面排版与视觉层级的调整，价格、阶梯、订单、报名名单、分销统计的任何数据都没有变。
• 「立省 X 元」由日常价减拼团价自动计算，商家不用填；两者相同或按比例返利的活动不显示这枚标签。
• 倒计时卡片、价格角标、进度条、按钮都取活动主题色，换模板不需要单独配色。
• 参与头像墙按参与人数自动换行，人数少时不会拉伸变形，也不会遮挡商品图与价格。
• 海报与卡片之间的圆弧过渡是前端绘制的，不需要重传海报，原有的图照样用。
• 旧活动不需要重建；已经发出去的链接、二维码继续有效。
• 手机上重开一次小程序即可看到新版式，不涉及小程序版本更新。

常见问题

Q: 活动需要重新创建一次吗？

A: 不需要。改的是详情页的展示样式，活动配置和报名数据都没动，重新打开就是新版式。

Q: 「立省 X 元」是我自己填，还是系统算的？

A: 系统按日常价减拼团价自动算。你把两个价格填对，顾客看到的立省金额就和你自己算的一致，不用额外维护一个字段。

Q: 为什么我的活动没有立省标签？

A: 两种情况不显示：日常价与拼团价相同（没有差额），或者活动是按比例返利（价格以百分比呈现，没有固定金额可省）。

Q: 倒计时为什么改成了一张张卡片？看着会不会太花？

A: 卡片取的是活动主题色，和按钮、标签同一族颜色，不会跳出来。改成卡片是为了解决原来一行文字在窄屏折行的问题——折行之后整块信息高低不齐，反而更乱。

Q: 参与头像墙会不会让页面显得拥挤？

A: 它占的是卡片自己的一块高度，按行排列、自动换行，人数多到一定数量就收住，不会无限拉长页面。放在价格与按钮之间，是为了让顾客在决定前看到「已经有人在了」。

Q: 换主题色以后，价格和倒计时会一起换吗？

A: 会。价格、胶囊标签、倒计时卡片、进度条、按钮都取活动主题色，换模板后整张卡一起换，不会出现某一块还是旧色。

完整功能说明见拼团功能介绍，更多更新见拼团更新日志。