今天来聊聊积分商城页面设计的事儿，前阵子老板突然扔个任务过来，说要给APP加个积分商城，当时拍胸脯说简单，结果真动手了才发现全是坑！跟你们唠唠我这一个头两个月的实践过程。

从想当然到懵逼的开始

一开始我想这不就是搞个列表摆点奖品嘛吭哧吭哧照着模板抄了个页面给策划看，直接被怼回来了：“你这谁看得懂积分能干入口藏得跟捉迷藏似的！” 我还不服气，结果自己拿着手机测，好家伙，想找个兑换入口，得翻三四个页面，用户早跑了。这才意识到：用户不是咱肚子里的蛔虫，得把“这玩意儿能换啥”直接怼脸上！

回去就老老实实重来。第一步，把市面上能找的购物APP、银行APP都翻了个遍，一个个截图贴墙上。看人家咋安排兑换入口，咋展示商品。发现做得好的，都在首页最显眼的位置放了个大按钮，写着“积分兑好礼”或者直接挂个礼物图标，点进去贼方便。

动手改！结果问题越改越多

照葫芦画瓢，我也在咱们APP首页底部导航栏加了个金灿灿的“积分商城”图标。心想这下总成了？结果测试的时候，同事又摇头：“你这页面进去，积分余额藏角落，商品摆得跟清仓大甩卖似的乱糟糟，积分够不够换都看不出来！”

得，继续折腾。这回我把页面结构用笔在纸上画了好几版草图。重点盯着几个地方死磕：

• 顶部必须亮出积分余额：跟钱包余额一样，用户一进来就得知道自己“多有钱”；
• 商品分类标签做贼大：什么“热门好物”、“限时秒杀”、“生活日用”，全都清晰分开，像超市分区一样让人一眼扫到想要的；
• 每件商品标清楚“价码”：多大字体显示需要多少积分，再配上醒目的“立即兑换”按钮。同事试用时候说：“这个一下就知道咱这分够不够资格下手。”

以为大功告成？太天真！

页面结构清晰了，运营同事又来踢馆：“活动？促销？你这光秃秃的谁有动力攒分！” 才想起来，搞积分商城是为了让人多用APP！不能光秃秃摆商品。

赶紧在页面顶上抠出位置：轮播活动Banner位！搞积分翻倍活动、新用户礼包、限时爆款...都往上怼。又在商品列表前加了滚动公告条，比如“某某用户刚换了个咖啡机！”这种实时刺激，让人看了心痒痒。

调整视觉，把按钮都加个亮色底色，文字弄大一号，商品图别抠抠搜搜占那么小位置。整个页面鼓捣半天，总算看起来像那么回事了。拿去内部测试，反馈终于从“啥玩意儿”变成“，还能这样！”

这轮折腾下来，我觉得最容易忽略也是最关键的几点就是：入口必须像路灯一样显眼、进来就得明明白白看透自己“财富”和“商品价码”、把东西分门别类摆好、用活动推人一把往前冲、还得让整个页面看起来顺眼好点！缺一个，这页面就得翻车。老板看了最终版终于点头，结果过了会儿补了句：“...就是配色是不是有点土？” 我... 继续改图去了！踩坑不易，大家引以为戒！