易企微砍价详情页 UI 重做：价签式价格、倒计时卡片，砍价进度与能省多少一眼看清

一句话结论：砍价页的第一屏，顾客其实只想弄清四件事：多少钱能拿到、比原价省多少、还差多少砍到底、有多少人在参与。这次把整张信息卡按这个顺序重排了一遍：价格做成一块价签，倒计时拆成四张卡片，进度条和两端数字对齐，参与情况换成头像墙。商家不用改任何设置，老活动打开就是新样式。

更新了什么

改动全部在顾客打开砍价活动后看到的第一屏（那张白色信息卡），不涉及价格、订单、参与名单里的任何数据：

为什么重做这一屏

砍价这个玩法，成败几乎都在第一屏。顾客从朋友圈或群里点进来，先看到的不是你的店、也不是商品详情，而是这一张卡：多少钱、省多少、还要砍多少、有多少人在玩。这四个问题三秒内看不完，他就退出了。

老版本的四个答案都在，但视觉重量几乎一样：价格和日常价差不多大，倒计时是和正文一样的黑字，进度条细到容易被忽略，参与人数只是一句话。读者必须逐行读过去才能拼出结论，而逐行读的过程，就是他犹豫要不要关掉的过程。

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

设计上做了哪几件事

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

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

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

三件事放进同一个横向区块，顾客扫一眼就完成「能拿到多少 → 原来多少 → 省了多少」的判断，不用在页面上下找第二个价格。

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

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

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

三、进度条和两端数字对齐

砍价的核心情绪是「还差一点」。老版的进度条很细，两边数字又离得远，顾客要先把数字读完、再抬头找条、自己在脑子里换算一下进度。

现在进度条加粗、圆角收圆，「已砍多少」贴左边、「还差多少」贴右边，都压在条的下方。眼睛从头扫到尾，等于把「已经走了多远」和「还剩多远」一次看完，不需要算。

四、谁在砍，做成一眼能认的胶囊

砍价是「有人一起在砍」的游戏，所以卡上要有一句「谁在砍什么」。旧写法是一行文字加一个小圆点，读起来更像系统日志。

现在把姓名做成胶囊标签（取活动主题色），后面接活动名。名字是视觉锚点，标签是身份，活动名是上下文，一行就能读完；胶囊的圆角和卡片的圆角也是同一套语言，不会显得突兀。

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

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

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

六、留白收紧，海报改成圆弧

两个细节一起解决了「断裂感」：段落之间的留白收紧一半，价格看完，进度和按钮就在同一屏里；海报底边从硬直角改成圆弧过渡，海报的颜色顺着弧线收进白卡，两张不同颜色的图不再像被刀切开，卡片圆角也终于露出来了。

对商家意味着什么

• 同样的活动，看起来更值：价格是价签式大字号，省多少直接写出来，顾客不用自己算、也不用去和别家比；
• 紧迫感更具体：倒计时卡片和「仅剩 N 份」并成一行，时间与数量两个信号叠在一起，「再想想」的成本被说清楚了；
• 还差多少一眼可见：进度条与两端数字对齐后，顾客更容易产生「就差一点点」的推动感，转发时也说得出口；
• 冷启动不那么冷：参与头像墙让刚上线的活动也有「已经有人在了」的实感，不用靠文案硬撑；
• 零配置、零维护：没有开关、没有要填的字段、没有要传的素材，样式跟着活动主题色自动适配；
• 老活动直接受益：不用重建活动、不用重发二维码，顾客重新打开就是新版式。

怎么用

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

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