界面组件›徽标

徽标Badge

99+ 是有 99 条,还是只显示到这里?

专业定义

徽标在对象或入口附近提示数量、新内容或需要注意的状态。小红点通常只表示有待关注事项,数字徽标则需要明确统计范围与显示上限;两者不能互相当作精确计数。

大白话

徽标先提醒你这里有事要看。具体多少、是什么、从什么时候算,还要按它的规则解释。

生活类比

信箱亮灯提示有信,不代表只有一封;门口写“十件以上”也不是精确库存。

类比到这里为止:网页计数可能延迟同步或读取失败,没显示徽标不必然意味着没有未读信息。

外贸出海场景

销售入口显示未读询盘数,详细列表说明是当前账号未读,还是整个团队待处理。打开详情不应自动把业务任务标为完成。

把数字背后的规则写出来

对象
是在数消息、询盘还是任务?
范围
当前用户、团队、筛选集合或全部数据?
展示
显示精确数、封顶数还是仅有无提醒?

处理失败时别归零

获取计数失败时可以说明暂时无法更新,不能制造一个确定的零。重新读取后再按同一统计规则呈现。

若数字变化值得通知,给出简短可理解的状态说明;不要把整份消息列表作为持续高优先级提醒。

继续看项目应用与交付检查
先建立专业坐标

徽标 在项目中负责什么

什么时候用
不打断当前任务,但需要提示入口下有新增或待处理内容时。
它解决什么
在少量空间里提供注意线索,把细节留给对应列表。
它不负责什么
零、未知、加载中和封顶显示要区分。频繁无意义地跳动或朗读数字会干扰阅读。
放进真实项目
在“新询盘”菜单旁显示本周尚未处理的 6 条线索。
专业拆解 · 业务场景

徽标在原有对象旁提醒数量或变化,信息必须短且值得注意

导航上的未读询盘数量、客户头像旁的新消息点,都依附于一个已有入口,提醒用户那里发生了变化。

  1. 01

    只给需要及时发现的信息使用。

  2. 02

    数量很大时采用 99+ 等可读规则。

  3. 03

    让辅助技术能读出主体和提醒内容。

一句话记住

红点提醒,数字有范围,封顶不改原始数。

容易混淆的地方

未读不等于未处理,未处理不等于高优先级,徽标也不等于完整业务统计卡。

随堂一练 用一个判断把概念记住

消息入口显示“99+”,后台实际有 117 条未读。详细页应怎样解释这个数字?

你可以这样告诉 AI Agent

“

我在处理这件事:在“新询盘”菜单旁显示本周尚未处理的 6 条线索。请以“徽标”为主线,先说明它在这里负责什么、不负责什么;再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答,不确定的信息标为待确认。

内容依据与延伸

本站用原创中文解释把专业概念映射到外贸独立站;定义和机制继续以官方资料为准,业务例子再回到 外贸独立站询盘优化实战 验证。

本站整理说明:原创整理:Web 开发、产品设计、AI 协作与外贸独立站实践
就地查词 · 关闭后继续阅读