已加载全部内容

Badge 设计基础指南

链接
分类
文章设计交互2022-01-30 05:00:00
简介

一篇关于 Badge 设计的文章,探讨了一些基础的样式、技巧、可用性和使用案例。

相似条目

笔记

Beta

文章在结尾资源部分提及Chakra UI组件库,将其Badge/Tag实现作为参考案例链接。体现该库提供了现成的徽章组件,方便开发者直接使用文章讨论的设计模式。

本文核心讨论对象,指一种小型重叠式UI元素,用于在父对象旁显示状态、通知数量或事件。支持数字、文字、图标或纯圆点四种内容形式,常用于消息提醒、分类标签、购物车计数等场景。文章详细分析了其展开行为、颜色优先级、圆角、描边与阴影等样式设计要点,并列举了多种UX使用模式。

本文指出Badge的别名,在Chakra UI中对应Tag组件,用于实现相同的状态指示与分类功能。文章通过链接直接将两者关联,说明Tag是Badge在特定设计系统中的实现形式。

文章多次提及Figma,用于展示Badge设计案例、提供相关UI Kit模板链接,以及作者个人作品集入口。文中列出多个基于Figma的Material You、Appka等徽章实现文件,强调Figma是分享与实践Badge设计的主要工具平台。

文章提及 Material You 的 Figma 文件示例,展示其 Badge 设计规范,同时推广 Setproduct 的 Material You UI kit,支持 Figma 与 React 实现 Material Design 3 风格的徽章。

文章指出 Setproduct 的 Material You UI kit 与 Figma React UI kit 均提供 React 版本的 Badge 实现,方便在 React 项目中快速集成徽章组件。

Material You UI kit 描述中明确支持 Next.js 框架,文章暗示开发者可利用该套件在 Next.js 项目中实现带 Badge 的界面。

文章推广的 Material You UI kit 已适配 Tailwind CSS,方便开发者在 Next.js + Tailwind 技术栈中快速定制 Badge 样式与交互。

在本文的Tooltip相关文章描述中,Popover被提及作为与Tooltip对比的UI组件选项,用于说明何时选用不同浮层提示。

该分类暂无内容

本文作者,在文章署名处展示其头像与姓名,负责撰写Badge UI设计研究内容。文章以其视角系统梳理了徽章的解剖结构、样式主题与实际用例。

文章在讨论Badge圆角样式时引用IBM Carbon Design System,作为采用方形徽章的典型例子。用于说明不同设计系统对Badge形状的差异化选择。

文章末尾列出 MUI 官方文档链接,指出其已内置 Badge 组件,方便开发者直接在 Material Design 体系中实现状态提示与数量标记。

本文相关文章区列出《Empty States UI design》链接,指向另一篇探讨空状态设计的博文,涵盖从新手引导到无搜索结果场景的UX策略。

本文相关文章区展示《Tooltip UI design》链接,提及该指南包含无障碍(ARIA)、显示时机及与Popover的选择建议,作为徽章之外的UI组件参考。

本文Tooltip关联文章简介中提到WAI-ARIA,用于强调工具提示组件的无障碍实现要点,作为设计参考。

本文相关文章区列出《Steps UI design》链接,指向一篇关于步骤流程UI的教程,旨在减少用户流失并提升引导体验。

本文底部资源链接中多次出现Material Design相关UI Kit与组件示例,如Material You与Material Design System,展示徽章在该设计体系下的实现。

本文发布于 Setproduct 博客,作者通过大量视觉示例系统梳理 Badge 组件的设计要点与使用场景,并推广其旗下的多套 UI 套件与设计系统,包含 Figma React UI kit 等产品。