跳到主要内容

学点设计

[TOC]

UI

By：weimenghua
Date：2023.06.25
Description：UI 设计组件

参考资料
ElementUI 组件
AntDesign 组件
primer.style

Figma 设计工具 Figma MCP

UI 组件​

一、基础布局组件​

  • Container / 容器：页面最外层包裹
  • Row / Column：横向 / 纵向排列
  • Grid / 网格：多列布局、卡片流
  • Card / 卡片：信息块容器
  • Divider / 分割线：区分内容区域
  • Space / 间距：控制元素空隙

二、文本与展示​

  • Text / 文本：普通文字
  • Title / 标题：H1–H6 层级
  • Paragraph / 段落：长文本
  • Label / 标签：短文字标记
  • Badge / 角标：小红点、数字提示
  • Tag / 标签：分类、关键词

三、按钮与操作​

  • Button / 按钮：主按钮、次按钮、文字按钮
  • Icon Button / 图标按钮
  • FAB / 悬浮按钮：右下角常用操作
  • Link / 链接：文字跳转

四、输入表单（最常用）​

  • Input / 输入框：文本、密码、手机号
  • Textarea / 多行输入
  • Select / 下拉选择
  • Radio / 单选框
  • Checkbox / 复选框
  • Switch / 开关
  • Slider / 滑块
  • DatePicker / 日期选择器
  • Upload / 上传
  • Form / 表单：整体校验、提交

五、导航类​

  • Navbar / 导航栏：顶部
  • Tabbar / 标签栏：底部
  • Tabs / 选项卡：切换内容
  • Sidebar / 侧边栏
  • Breadcrumb / 面包屑：显示当前位置
  • Pagination / 分页
  • Steps / 步骤条：流程进度

六、弹窗与反馈​

  • Modal / 模态框
  • Drawer / 抽屉：从侧边滑出
  • Toast / 轻提示
  • Alert / 警告提示
  • Popover / 气泡弹窗
  • Tooltip / 文字提示：hover 显示
  • Dialog / 确认对话框
  • Loading / 加载
  • Skeleton / 骨架屏

七、数据展示​

  • List / 列表
  • Table / 表格
  • Collapse / 折叠面板
  • Accordion / 手风琴
  • Carousel / 轮播图
  • Tree / 树形控件
  • Chart / 图表：柱状、折线、饼图

八、交互与状态​

  • Dropdown / 下拉菜单
  • Menu / 菜单
  • Progress / 进度条
  • Empty / 空状态
  • Result / 结果页
  • Refresh / 下拉刷新

UI 设计中有许多不同的组件，每个组件都有其特定的用途和功能。以下是一些常见的 UI 组件：

  1. 按钮（Button）：用于触发事件或进行操作，例如提交表单或打开菜单。
  2. 文本框（Text Field）：用于接收用户输入的文本信息，例如搜索框或登录表单。
  3. 标签（Label）：用于显示静态或动态文本信息，例如标题或描述。
  4. 列表（List）：用于显示一组相关的项目或选项，例如购物车列表或菜单项。
  5. 下拉框（Dropdown）：用于选择一个选项或从多个选项中选择一个，例如选择语言或选择颜色。
  6. 滑块（Slider）：用于在一定范围内选择一个数值或值的区间，例如音量调节或时间选择。
  7. 单选框（Radio Button）：用于从多个选项中选择一个，例如选择性别或选择付款方式。
  8. 复选框（Checkbox）：用于选择多个选项中的一个或多个，例如选择多个电影或选择配料。
  9. 抽屉（Drawer）：用于隐藏和显示导航或菜单选项，例如侧边栏菜单或工具栏选项。
  10. 卡片（Card）：用于分组相关的信息和操作，例如商品信息或新闻文章。
  11. 浮出层（Popover）：是当用户轻点某个控件或页面中的某一区域时浮出的，半透明的临时视图。

组件示例​

1. 登录页（Login）

用到的组件：

  • Container 容器
  • Logo 图片
  • Title / Text 标题、说明文字
  • Form 表单
  • Input 输入框（手机号 / 账号）
  • Input 密码框（密码可见 / 隐藏）
  • Checkbox 复选框（记住我）
  • Button 主按钮（登录）
  • Link 文字链接（忘记密码、去注册）
  • Divider 分割线
  • IconButton 第三方登录（微信 / QQ / 微博图标）

一句话总结：表单 + 输入 + 按钮 + 链接。

2. App 首页（Home）

用到的组件：

  • Navbar 顶部导航栏（标题 + 搜索 + 消息）
  • Search 搜索框
  • Badge 消息角标
  • Carousel 轮播图（Banner）
  • Grid 宫格（功能入口）
  • Tabs 选项卡（推荐 / 关注 / 热榜）
  • Card 卡片（文章、商品、内容）
  • List 列表
  • ScrollList 下拉滚动加载
  • FloatingButton / FAB 悬浮按钮（发布、返回顶部）
  • Tabbar 底部标签栏（首页、分类、我的）

一句话总结：导航 + 轮播 + 宫格 + 卡片列表 + 底部 tab。

3. 表单提交页（Form 提交页，如个人信息 / 报名 / 下单）

用到的组件：

  • Navbar 顶部导航（返回、标题、提交）
  • Form 表单
  • Input 输入框（姓名、电话）
  • Select 下拉选择（城市、分类）
  • Radio 单选（性别、类型）
  • Checkbox 多选（兴趣、协议）
  • Switch 开关（是否公开）
  • DatePicker 日期选择（生日、预约时间）
  • Upload 上传（头像、图片）
  • Textarea 多行文本（备注、详情）
  • Steps 步骤条（多步骤表单）
  • Button 提交按钮
  • Alert 提示（必填项、错误提示）
  • Loading 加载中

一句话总结：各种输入类组件 + 提交 + 反馈。

学习资源​

图标网站​

书籍​

  • 《写给大家看的设计书》
  • 《用户体验要素》
  • 《简约至上》

知识碎片​

参考资料 cheatsheet

  • 弹性布局 Flex — 一维排列，控制主轴对齐、方向、换行与伸缩
  • 栅格 Grid — 二维网格，把横向空间按列(常 12 列)分配，配 gutter 间距与响应式断点。
  • 间距 Space — 在元素之间留出一致、成档位的间隔。
  • 分割线 Divider — 在留白不足以分组时补一道轻分隔

参考 https://www.vibehub.xin/cheatsheet 生成组件示例以及解释说明到学点设计/ui-component-example.html，目的是用于教学