Interface Lab
返回知识库
Design Systems Page Patterns

信息气味与链接标签契约

导航、卡片和正文链接必须让用户在点击前判断目的地、价值和成本;模糊的“了解更多”会削弱查找效率和可访问性。

设计原则

信息气味来自链接文字、周围语境和用户已有经验。设计系统应把链接标签当成信息架构的一部分,而不是按钮文案的最后填空。

大理论

用户在网页上选择路径时,会估算某个入口是否能回答自己的问题,以及获得答案要付出多少成本。链接标签、所在区域、卡片标题、摘要、图标、外链标识、权限提示和 URL/品牌经验都会共同形成信息气味。气味强,用户敢点;气味弱,用户会返回、搜索、犹豫或误点。

小知识点

  1. 链接文字要说明目的地和对象,例如“查看授权元数据模板”比“了解更多”更可检索。
  2. 同一页面不能让多个不同 URL 使用同一个模糊标签;读屏用户常把链接汇总成列表,重复文案会失去区分度。
  3. 卡片整体可点击时,卡片标题应是主链接;次级动作需要清楚分离,不要让整卡点击和内部按钮冲突。
  4. 外链、需要登录、付费墙、下载、打开新标签或离开当前工作流的链接要显性提示。
  5. 搜索结果与资源库卡片要保留标题、分类、摘要、来源和首要行动,让用户能在列表层判断是否值得进入详情。
  6. 中文和英文标签都要独立成立,不能依赖周围长句才能理解。

设计判断

如果把页面所有链接抽成一个列表,用户仍能大致判断每个链接会去哪里、有什么价值、是否有权限/外链成本,这组标签就健康;如果列表里充满“查看”“打开”“更多”,信息架构还没有完成。

实现建议

为 Link/Card/ButtonLink 建立 label contract:visibleLabel、destinationType、objectName、scope、requiresAuth、external、opensNewTab、download、ariaLabel、contextSummary。资源库和知识库卡片优先用标题作为主链接,按钮文案用“打开资源”“查看案例”“进入审核队列”等动词+对象;外链使用图标和可见/aria 说明,不只靠颜色。

反例/风险

卡片标题不可点击而只有“Read more”;同页多个“查看详情”指向不同对象;外部资源没有外链提示;登录后可见内容没有锁/权限说明;标题与实际目标不一致形成 clickbait;链接下划线被移除且仅靠颜色区分。

案例分析

NN/g 的信息气味理论把链接标签、页面语境和用户背景知识视为判断目标价值的线索;USWDS 要求链接文本唯一且有意义,并提示不要只靠颜色或使用重复的 read more;GOV.UK 和公共服务设计系统通常让链接在正文和深色背景上保持可辨识。把这些原则落到 Interface-Lab,知识卡片的标题、分类、摘要和“打开资源/查看原则”应共同给出检索路径,而不是让 agent 生成一组泛化 CTA。

来源链接

NN/g Information Scent: https://www.nngroup.com/articles/information-scent/ USWDS Link: https://designsystem.digital.gov/components/link/ GOV.UK Links: https://design-system.service.gov.uk/styles/links/ Home Office Link Accessibility: https://design.homeoffice.gov.uk/accessibility/page-structure/links

Agent 指令

生成导航或卡片链接前先列出 destinationType、objectName、scope、permission/external cost;禁止多个不同目标共用“更多/查看/了解更多”。