【界面UI】红点树设计：从道具到系统入口的传递链

实战应用：用在哪里

红点是界面里最有效的引导元件：背包有可领邮件、技能有可升级项、活动有奖励可领，红点沿着界面层级向上传递，主界面入口亮起即知有事可做。红点树的设计质量直接决定这颗小红点是指路明灯还是视觉噪音。

红点树结构

RedotTree = {
    id = "root",
    children = { "mail", "skill", "activity" },
}
RedotNode = {}
function RedotNode.mark(id)
    RedotNode.state[id] = true
    local node = RedotTree[id]
    for _, parent in ipairs(node.parents or {}) do
        RedotNode.mark(parent)
    end
end

红点按树组织，子节点亮起向上冒泡，父节点亮起代表子树内有事可办。mark 递归点亮父链，清除红点则反向回溯，父节点检查子树是否全部干净。

消红与持久化

function RedotNode.clear(id)
    RedotNode.state[id] = false
    for _, child in ipairs(RedotTree[id].children or {}) do
        if RedotNode.state[child] then return end
    end
    for _, parent in ipairs(RedotTree[id].parents or {}) do
        RedotNode.refresh(parent)
    end
end

消红要区分查看与处理：点开算查看可以暂时消红，奖励真正领取才永久消红，两个动作分开处理，否则玩家点开发现没领红点又不亮，反馈混乱。红点状态跨天持久化，离线期间产生的红点在登录时一次性点亮。客户端主界面入口的角标数字直接读红点树，层级间零轮询。

验证与监控

红点误亮率按版本统计，玩家点进去发现无事可做的比例要求低于百分之一。

踩坑记录

早期的红点是各界面自己算自己亮，主界面聚合靠轮询，十个系统十个口径，红点乱亮乱灭的投诉堆了满屏。收敛成树结构统一记账后，此类投诉归零。另一个教训是红点滥用：给商城促销也挂红点，玩家把红点当广告闭眼无视，真正的功能红点跟着遭殃，红点的使用清单随后收紧到纯功能场景。

实施要点

红点的样式分级让重要程度有了视觉语言：圆点、数字、感叹号三级分别对应提示、数量与强引导，玩家扫一眼就能分辨轻重。红点的声音反馈只在强引导级启用，配合震动反馈在移动端形成明确的触达。树结构的配置化让新增红点变成声明式的工作，注册节点、挂接父链、实现条件查询三步完成，接入一个新系统的红点成本从三天降到半天。

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付，内容以官方知识库与真实项目为出处，按版本持续修订。