# 游戏活动界面设计：主题热闹，状态要准确

原网页：https://www.jvds.cn/share/ui-design/brawl-stars-event-rewards-skills-u137
语言：zh-CN
发布：2026-10-22
作者：界达设计工作室（JVDS）

这组游戏活动界面设计用深灰、蓝色、金黄书页和高饱和卡包营造强烈主题。活动、技能配置与商店并不共用一张大网格，而是按任务换容器。最值得借鉴的是视觉容器的分工，同时让可参与、可装备和已领取有清楚文字。

## 核心结论

- 活动技能商店按任务使用不同容器，主动作容易定位。
- 装备和领取状态要文字与图标一致，热闹主题仍能有准确条件。

## 黄色PLAY留出主玩法的位置

活动页左侧深色区域放标题和黄色PLAY，右侧蓝底容纳多张特殊活动卡。左疏右密，让直接开始与比较活动同时存在，主按钮不用挤进卡片堆里。

时间、难度和信息图标靠近活动卡，底部栏目也以黄色标出当前位置。这样的活动入口设计适合既有主要模式又有周期内容的页面。主题图案很多，条件仍有专门位置。

界达设计会继续检查结束、不可参与与正常入口是否不同。海报仍然鲜亮不等于可以进入，剩余时间也应属于当前活动。图中的倒计时不作为现行活动通知。

![信息卡片](https://www.jvds.cn/upload/2026/1008/d187-tp/u137-i1.webp)

活动选择页｜深色主玩法与蓝色特殊活动分区，时间和难度跟着对应卡片。

## 书本左右页把拥有与配置分开

技能页用金黄色展开书本做容器，左页ANGELIC SKILLS排列图标，右页SKILL SLOTS围成三个位置。书本不只是背景装饰，真正划分了“有哪些”和“放哪里”，主题与结构很贴近。

右页位置显示加号与EQUIP SKILL，下方又写需要打开物品解锁槽位。两种线索会让当前可操作性不够直观。进一步完善时，可逐槽区分未解锁、可装备和已装备，锁住位置先说明条件，[能操作的位置](https://www.jvds.cn/share/ui-design/ui-component-states-design-system)再给加号。

进度数字与NEW SKIN还应交代对应阶段。界达设计喜欢容器的角色，但决定操作的几句话应更准确，不能让装饰和闪亮图标替代状态。

![界面图标](https://www.jvds.cn/upload/2026/1008/d187-tp/u137-i2.webp)

技能书｜左右页区分能力列表与装入位置，EQUIP SKILL和解锁条件仍需逐一对应。

## 商店把领取状态写成文字

卡包商店用蓝紫底承托绿色、橙色和黄色包装，价格在卡底，数量徽标贴在包装边。左侧已领取卡有勾与Claimed，和其余可购卡形成区别，这比[只改变包装颜色](https://www.jvds.cn/share/ui-design/semantic-color-tokens-design)更直接。

不同卡包还需要稳定展示数量、币种与内容，才能比较。图中x5与价格不宜自动解释为折扣，因为包装和内容不一定相同。获取前的确认应说明所得与消耗，活动剩余与下次供给也要分别命名。

界达设计会沿取得内容、回技能页、选可用槽位检查结果是否连续。返回和主页在边角保持位置，主题可以转换，方向感与状态语言应一致。领取后直接显示获得的对象和可用状态，比只出现奖励动效更便于继续配置。

![信息声明核对](https://www.jvds.cn/upload/2026/1008/d187-tp/u137-i3.webp)

卡包商店｜领取文字、数量徽标与价格行分开表达，包装颜色不独自承担状态。

## 常见问题

### 主题游戏UI怎样避免状态混乱？

为未解锁、可操作和已完成提供不同文字与控件，不只改变颜色。装饰可以共享，动作含义必须明确。

## 设计检查清单

- 逐槽检查解锁和装备提示是否一致。
- 让商品数量币种内容位于稳定位置。

## 让主题视觉和游戏任务配合

如果你的游戏或活动产品需要整理入口、配置与领取界面，可带着状态和任务清单来讨论。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)