UI 组件状态与变体 / Default
Default
默认状态,组件可被使用但没有额外交互反馈。
Identity · 身份
- 子类型
- 状态或变体
- 父级类目
- Action Group、Toggle Group、Segmented Control、Menubar、Navigation Menu、Service Navigation、Bottom Navigation、App Bar、Callout、Inline Alert、Account / Profile、Changelog Page、Checkout Flow、Community Page、Confirmation Page、Contact / Lead Page、Conversation Page、CRUD Management、Documentation Shell、Email Verification、Error Page、Event Registration Flow、Feed / Stream Page、File Browser、Inbox、Job Listing Page、Master–Detail Workspace、Media Gallery Page、MFA / Verification、Notification Center Page、Password Reset、Pricing & Plan Selection、Product Detail Page、Resource Directory、Search Results Page、Settings Page、Shopping Cart、Alert Dialog、Contextual Help、Toggletip、Confirmation Popover、Action Bar、Speed Dial、Resizable Panel、Splitter、List View、Card Grid、Media Card、Product Card、Testimonial Card、Quote Card、Review Summary、Button、Input、Select、Checkbox、Switch、Back Link、Skip Link、Color Swatch、Color Field、Color Area、Color Slider、Date Field、Time Field、Email Input、Tel Input、URL Input、Currency Input、Quantity Input、File Trigger、Password Visibility Toggle、Meter、Inline Loading、Scrollbar、Resize Handle、Drag Handle
What · 是什么
- 定义
- 默认状态,组件可被使用但没有额外交互反馈。
- 实现表现
- 使用组件基础视觉和清晰边界。
Why · 为什么
- 实现目标
- 保持可操作,不改变语义或布局。
How · 怎么做
- 实现说明
- 默认值明确;状态转换可预测;键盘和触摸路径完整;读屏可感知;高对比和 reduced motion 下仍可用。
Evidence · 证据
- 局限与边界
- 使用语义状态、可见焦点、文本等价和适当的 ARIA 属性表达;不只依赖颜色、动画或声音。
Lifecycle · 生命周期
- 状态
- 启用
适用组件类型与部件
关系来自本地关系表,并包含反向关联。
- AbbreviationAbbreviation反向 · 应用于
提供缩写的完整含义和可访问解释。
- AudioAudio反向 · 应用于
播放或表达音频内容的媒体单元。
- Back LinkBack Link属于
返回上一级或父级页面的导航链接。
- BlockquoteBlockquote反向 · 应用于
标识引用内容、来源或用户话语的语义文本单元。
- ButtonButton属于
触发动作、提交选择或打开流程。
- CheckboxCheckbox属于
Checkbox 如何在界面中被理解、操作或组合?
- Color AreaColor Area属于
在二维色彩空间中选择饱和度、明度或色调。
- Color FieldColor Field属于
输入或编辑颜色值的单一字段。
- Color SliderColor Slider属于
沿一维色带选择色相、透明度或其他颜色通道。
- Color SwatchColor Swatch属于
显示可选择颜色的视觉色块,并暴露颜色名称和数值。
- Currency InputCurrency Input属于
输入金额并显示货币和数值格式的字段。
- Date FieldDate Field属于
由日期分段或单一文本组成的日期输入控件。
- Date SegmentDate Segment反向 · 应用于
日期字段中的年、月、日等可独立编辑的分段。
- Drag HandleDrag Handle属于
表达可拖拽对象起始位置和抓取目标的控件。
- Email InputEmail Input属于
输入并验证电子邮件地址的字段。
- EmojiEmoji反向 · 应用于
以标准化字符或图形表达短文本语义和情绪。
- File TriggerFile Trigger属于
触发系统文件选择器但不承担完整上传流程的控件。
- Focus RingFocus Ring反向 · 应用于
统一表达键盘焦点和当前交互目标的视觉轮廓。
- IllustrationIllustration反向 · 应用于
解释概念、状态或品牌语气的插图内容单元。
- Image PlaceholderImage Placeholder反向 · 应用于
在图片加载、缺失或不可用时提供稳定的占位内容。
- Inline LoadingInline Loading属于
嵌入内容上下文中的轻量加载指示器。
- InputInput属于
接收用户输入,并提供焦点、错误和只读反馈。
- List MarkerList Marker反向 · 应用于
表达有序、无序、任务或自定义列表关系的标记。
- LogoLogo反向 · 应用于
识别组织、产品、合作方或品牌的标志内容单元。
- MapMap反向 · 应用于
以空间坐标或区域关系表达地点信息的内容单元。
- MarkMark反向 · 应用于
在文本中标识需要强调、命中或搜索高亮的片段。
- MentionMention反向 · 应用于
在文本中引用用户、团队、对象或实体的内联标记。
- MeterMeter属于
显示处于范围内但不一定代表完成度的数值。
- Password Visibility TogglePassword Visibility Toggle属于
切换密码字段可见性的单一控制。
- Presence IndicatorPresence Indicator反向 · 应用于
表达用户、设备或协作者在线/离线状态的指示器。
- QR CodeQR Code反向 · 应用于
将 URL、文本或结构化数据编码为可扫描图形。
- Quantity InputQuantity Input属于
输入商品或资源数量的数字字段。
- Resize HandleResize Handle属于
调整面板、列、窗口或媒体尺寸的拖拽手柄。
- ScrollbarScrollbar属于
表达可滚动区域位置和可操作范围的滚动条。
- SelectSelect属于
Select 如何在界面中被理解、操作或组合?
- Skip LinkSkip Link属于
跳过重复导航、直接进入主内容的辅助导航链接。
- Social IconSocial Icon反向 · 应用于
代表社交网络或外部服务的可点击品牌图标。
- Status DotStatus Dot反向 · 应用于
用小型圆点表达在线、警告、成功或其他状态。
- SwitchSwitch属于
Switch 如何在界面中被理解、操作或组合?
- Tel InputTel Input属于
输入电话号码并适配地区、键盘和格式化规则的字段。
- Text FieldText Field反向 · 应用于
提供文本输入、名称、帮助和验证语义的基础字段单元。
- Time FieldTime Field属于
由时间分段或单一文本组成的时间输入控件。
- Time SegmentTime Segment反向 · 应用于
时间字段中的时、分、秒和周期等可独立编辑的分段。
- URL InputURL Input属于
输入并验证 URL 的字段。
- Visually Hidden TextVisually Hidden Text反向 · 应用于
只为辅助技术或上下文提供说明而不显示在视觉布局中的文本。
- Action BarAction Bar属于
在列表、表格或对象上下文中集中呈现批量和主要操作。
- Action GroupAction Group属于
把多个相关操作组合为一致的动作集合。
- Alert DialogAlert Dialog属于
要求用户确认、处理或理解高影响信息的模态警示对话框。
- App BarApp Bar属于
结合品牌、导航、页面标题和全局操作的应用顶部栏。
- Audio PlayerAudio Player反向 · 应用于
组合播放、暂停、进度、音量和媒体信息的音频播放器。
- Bottom NavigationBottom Navigation属于
在移动或窄屏界面中提供固定的一级目的地切换。
- CalloutCallout属于
用显著的视觉容器强调补充信息、解释或行动建议。
- Card GridCard Grid属于
把多个卡片按响应式栅格、列数和间距组织起来。
- CascaderCascader反向 · 应用于
按层级逐步选择国家、分类、目录或其他树状选项。
- Color PickerColor Picker反向 · 应用于
把颜色区域、滑块、预览、输入和最近使用值组合起来。
- Comment ComposerComment Composer反向 · 应用于
提供评论、回复、提及、附件和提交动作的编辑器。
- Comment ThreadComment Thread反向 · 应用于
以层级、作者、时间和回复动作组织评论讨论。
- Confirmation PopoverConfirmation Popover属于
在原地确认危险或不可逆操作,避免完整模态打断。
- Contextual HelpContextual Help属于
在不打断主要流程的情况下提供字段或任务上下文帮助。
- Data ListData List反向 · 应用于
以标签和值的配对结构展示对象属性或摘要数据。
- Date Range CalendarDate Range Calendar反向 · 应用于
在日历视图中选择、预览和修改日期范围。
- Disclosure GroupDisclosure Group反向 · 应用于
把多个可展开的说明、细节或相关内容组织成组。
- Discussion ThreadDiscussion Thread反向 · 应用于
在对象上下文中组织多轮讨论、状态和参与者。
- File Drop AreaFile Drop Area反向 · 应用于
提供拖拽、选择、预览和移除文件的上传入口。
- Filter Chip GroupFilter Chip Group反向 · 应用于
把当前应用中的筛选条件呈现为可删除、可编辑的标签组。
- Image ViewerImage Viewer反向 · 应用于
支持缩放、旋转、平移和替代文本的图片查看器。
- Inline AlertInline Alert属于
在当前内容上下文中报告重要提醒、错误或状态变化。
- LightboxLightbox反向 · 应用于
将图片、视频或媒体放大到聚焦上下文中并支持关闭和导航。
- List ViewList View属于
以可排序、选择、分页或虚拟化方式展示一组对象。
- Live RegionLive Region反向 · 应用于
为异步变化、通知和状态更新提供辅助技术可感知的消息区域。
- Media CardMedia Card属于
结合图片、视频或音频预览、元信息和动作的内容卡片。
- Mention InputMention Input反向 · 应用于
在文本编辑过程中搜索并插入用户、团队或对象提及。
- MenubarMenubar属于
提供桌面应用式的顶层菜单组和键盘导航。
- Navigation MenuNavigation Menu属于
组织站点、产品或应用的主导航及其子级入口。
- Product CardProduct Card属于
呈现产品、价格、规格、库存和购买操作的商业卡片。
- Progress TrackerProgress Tracker反向 · 应用于
用步骤、状态和完成度表达长任务或流程进展。
- Query BuilderQuery Builder反向 · 应用于
用字段、运算符和值构造可保存或复用的结构化查询。
- Quote CardQuote Card属于
以引用文本、来源和上下文强调一条内容或观点。
- Resizable PanelResizable Panel属于
允许用户拖拽调整面板、列或区域尺寸的复合容器。
- Result PanelResult Panel反向 · 应用于
在操作或查询完成后集中呈现结果、解释和后续动作。
- Review SummaryReview Summary属于
聚合评分、分布、评论数量和代表性评论的评价摘要。
- Rich Text FieldRich Text Field反向 · 应用于
提供带格式文本、链接、列表和嵌入内容的编辑字段。
- Segmented ControlSegmented Control属于
在有限的互斥选项中快速切换视图、模式或筛选条件。
- Service NavigationService Navigation属于
在政府、机构或大型服务站点中保持全局服务入口的导航。
- Sort BarSort Bar反向 · 应用于
在结果列表或内容集合上提供排序依据和方向控制。
- Sortable TableSortable Table反向 · 应用于
为数据表增加排序、选择、密度和键盘操作的复合能力。
- Speed DialSpeed Dial属于
将多个次要操作收纳在一个可展开的浮动操作入口中。
- SplitterSplitter属于
把相邻区域分成可拖拽调整大小的面板。
- Summary BoxSummary Box反向 · 应用于
集中呈现任务、页面或对象的关键信息与下一步动作。
- Tag PickerTag Picker反向 · 应用于
搜索、创建和移除多个标签的字段组合。
- Testimonial CardTestimonial Card属于
以头像、引用、姓名和身份呈现一条用户证言。
- Time Range PickerTime Range Picker反向 · 应用于
选择开始与结束时间并处理跨日、时区和步长。
- Toggle GroupToggle Group属于
把多个互斥或可多选的切换项组织为一个选择组。
- ToggletipToggletip属于
通过点击或聚焦触发、可被关闭的短提示浮层。
- Transfer ListTransfer List反向 · 应用于
在两个列表之间移动、搜索和排序可选对象。
- Upload QueueUpload Queue反向 · 应用于
管理多文件上传的队列、进度、错误、重试和取消。
- Video PlayerVideo Player反向 · 应用于
组合播放控制、时间轴、字幕、音量和全屏能力的视频播放器。
- Account / ProfileAccount / Profile属于
查看和管理个人资料、偏好、凭证与账户动作的页面。
- Changelog PageChangelog Page属于
按版本、日期和主题呈现产品更新及影响的页面。
- Checkout FlowCheckout Flow属于
从购物车、地址、支付到确认的交易完成流程。
- Community PageCommunity Page属于
围绕成员、讨论、活动和参与动作构建的社区页面。
- Confirmation PageConfirmation Page属于
在任务、交易或提交完成后总结结果并提供后续动作的页面。
- Contact / Lead PageContact / Lead Page属于
收集联系信息、需求和来源并完成转化的页面。
- Conversation PageConversation Page属于
围绕对话消息、参与者、输入和上下文组织的交流页面。
- CRUD ManagementCRUD Management属于
围绕创建、读取、编辑、删除和批量管理对象的后台页面模式。
- Documentation ShellDocumentation Shell属于
以侧边导航、正文、目录、版本和搜索组成的文档阅读模板。
- Email VerificationEmail Verification属于
确认邮箱地址并处理过期、重发和成功状态的流程。
- Error PageError Page属于
在路由、权限、服务器或内容不可用时提供解释和恢复入口的页面。
- Event Registration FlowEvent Registration Flow属于
从活动信息、报名、支付/确认到提醒的事件参与流程。
- Feed / Stream PageFeed / Stream Page属于
按时间、相关性或状态连续呈现内容、活动或更新的页面。
- File BrowserFile Browser属于
浏览、搜索、排序、选择和管理文件与文件夹的工作区页面。
- InboxInbox属于
以列表、详情、筛选、已读状态和批量操作处理消息或任务的工作区。
- Job Listing PageJob Listing Page属于
按筛选和详情浏览职位并启动申请的招聘页面。
- Master–Detail WorkspaceMaster–Detail Workspace属于
左侧集合/列表与右侧详情/编辑区联动的工作台布局。
- Media Gallery PageMedia Gallery Page属于
以网格、筛选、预览和详情查看媒体资产的页面。
- MFA / VerificationMFA / Verification属于
通过一次性密码、设备或其他因子完成身份确认的流程。
- Notification Center PageNotification Center Page属于
聚合通知、筛选、已读和跳转动作的页面级模式。
- Password ResetPassword Reset属于
帮助用户安全找回或重设凭证的页面流程。
- Pricing & Plan SelectionPricing & Plan Selection属于
比较方案、解释权益并引导选择或开始订阅的页面流程。
- Product Detail PageProduct Detail Page属于
围绕一个产品或对象组织媒体、属性、证明、价格和操作的页面。
- Resource DirectoryResource Directory属于
用筛选、分类和卡片/列表组织资源、案例或下载内容的目录页面。
- Search Results PageSearch Results Page属于
搜索、筛选、排序、分页和结果反馈组成的发现型页面。
- Settings PageSettings Page属于
按领域组织偏好、权限、账户和系统设置的管理页面。
- Shopping CartShopping Cart属于
管理待购买商品、数量、价格、优惠和下一步结算动作的页面。