UI 组件 L3 · 部件与子结构 / Control
Control
接收字段值的实际控件
Identity · 身份
- 子类型
- 部件
- 父级类目
- Filter Chip Group、Form Field、Segmented Control、Splitter、Toggle Group、Audio Player、Cascader、Color Picker、Comment Composer、Date Range Calendar、File Drop Area、Mention Input、Resizable Panel、Rich Text Field、Sort Bar、Sortable Table、Tag Picker、Time Range Picker、Transfer List、Video Player、Query Builder、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
What · 是什么
- 定义
- 接收字段值的实际控件
- 组成与状态
- 语义容器、可见内容、交互入口、辅助说明和状态反馈(按组件取舍)。
Why · 为什么
- 作用
- 接收字段值的实际控件
Where · 在哪里
- 适用场景
- Web 界面设计
How · 怎么做
- 检查清单
- 命名清晰;与父组件语义关联;覆盖键盘和读屏;处理空、错误、加载和禁用状态;验证响应式行为。
Lifecycle · 生命周期
- 状态
- 启用
所属单一组件、复合组件或页面模式
关系来自本地关系表,并包含反向关联。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Audio PlayerAudio Player属于
组合播放、暂停、进度、音量和媒体信息的音频播放器。
- CascaderCascader属于
按层级逐步选择国家、分类、目录或其他树状选项。
- Color PickerColor Picker属于
把颜色区域、滑块、预览、输入和最近使用值组合起来。
- Comment ComposerComment Composer属于
提供评论、回复、提及、附件和提交动作的编辑器。
- Date Range CalendarDate Range Calendar属于
在日历视图中选择、预览和修改日期范围。
- File Drop AreaFile Drop Area属于
提供拖拽、选择、预览和移除文件的上传入口。
- Filter Chip GroupFilter Chip Group属于
把当前应用中的筛选条件呈现为可删除、可编辑的标签组。
- Form FieldForm Field属于
把 Label、Input、辅助说明和错误反馈组合成可理解的输入单元。
- Mention InputMention Input属于
在文本编辑过程中搜索并插入用户、团队或对象提及。
- Query BuilderQuery Builder属于
用字段、运算符和值构造可保存或复用的结构化查询。
- Resizable PanelResizable Panel属于
允许用户拖拽调整面板、列或区域尺寸的复合容器。
- Rich Text FieldRich Text Field属于
提供带格式文本、链接、列表和嵌入内容的编辑字段。
- Segmented ControlSegmented Control属于
在有限的互斥选项中快速切换视图、模式或筛选条件。
- Sort BarSort Bar属于
在结果列表或内容集合上提供排序依据和方向控制。
- Sortable TableSortable Table属于
为数据表增加排序、选择、密度和键盘操作的复合能力。
- SplitterSplitter属于
把相邻区域分成可拖拽调整大小的面板。
- Tag PickerTag Picker属于
搜索、创建和移除多个标签的字段组合。
- Time Range PickerTime Range Picker属于
选择开始与结束时间并处理跨日、时区和步长。
- Toggle GroupToggle Group属于
把多个互斥或可多选的切换项组织为一个选择组。
- Transfer ListTransfer List属于
在两个列表之间移动、搜索和排序可选对象。
- 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属于
管理待购买商品、数量、价格、优惠和下一步结算动作的页面。