# 悬浮按钮
悬浮按钮通常会固定在特定位置，即便屏幕滚动，其位置也始终保持不变。
主要存在两类用途：其一，用于执行最为重要或最为常见的行动操作。其二，快速定位到当前场景的某个特定位置。
常见的场景包括“新建”、“帮助/客服”、“回到顶部”、“跳转 xx 消息/评论”等等。
## 组成要素
1. **表意图标** ： 仅当图标含义易识别时才使用图形，增强按钮的识别性。（悬浮按钮场景中通常必选）
1. **背景容器** ： 用于承载这个按钮的容器背景，容器边框
1. **文本标签** ： 动词或短语描述按钮操作的文本
**注意事项**：## 易混淆变体区分
> 通过表格形式说明主要对象易混淆变体的区分方法（场景/样式），重点是通过这部分能清晰理解和易混变体间的区分方法，避错。
### 悬浮按钮和全圆角
类型 | 说明
---|---
**悬浮按钮**
 | **目标场景：**
固定在页面中某个位置，滚动内容/容器时位置不发生变化。
**样式：**
高程高于常规内容，带有阴影。（圆角和全圆角按钮相同）
**全圆角按钮**
 | **目标场景：**
产品营销点位或仅限官网使用场景。
**样式：**
无阴影，与页面常规内容同一高程，尺寸&交互和 BasicButton 一致
### 主要悬浮和次要悬浮
优先级 | 类型 | 说明
---|---|---
**高** | **主要悬浮按钮**
 | **目标场景：**
着重突显屏幕或模块中最为关键或极度想要吸引用户的操作，使其悬浮于所有其他元素之上，且始终处于模块的右下方。
**常见操作：**
“新建”
**低** | **次要悬浮按钮**
 | **目标场景：**
通常作为快速定位或次级全局型功能（客服等）跳转。
**常见操作：**
“返回顶部”、“跳转 xxx”、“帮助中心”
判断运用主要或次要核心原则在于：在场景中是否具备强烈意愿引起用户注意力。
## 最佳实践
### 组件细节说明
尺寸 | 使用场景
---|---
**Large**
高度：48px | 页面信息及结构较为简易（通常呈 List 形式），通过大尺寸设计来吸引用户的注意力，比如话题群-新建话题、VC 列表滚动等场景。（通常在飞书客户端使用）
**Medium**
高度：40px | >原有尺寸，未收集到该点位具体场景
**Small**
高度：36px | 当信息密度较高或同时存在多个悬浮按钮时，为了防止对信息内容造成干扰，通常会采用小尺寸。（通常出现在文档、aPaaS 等网页场景中）
### 交互/行为
#### 悬浮按钮的菜单模式
以下两种菜单形式可供选择，以展示悬浮按钮并将其作为同类操作的聚合。 由 Hover 触发悬浮按钮的 Tooltips 说明，Click 触发展开菜单。
1.仅有一个悬浮按钮，子项少，且能用图标清晰表达 | 2.有多个按钮，或多个子项、不能用图标清晰表达
---|---
 | 
#### 典型用法：“一键返回顶部/底部”的操作按钮
在长页面浏览或文档与资料阅读等页面详情内容冗长的情况下，一键返回顶部/底部按钮能够显著节省用户的时间和精力，增强导航的便利性。Icon 推荐使用：`icon_down-bottom_outline（推荐）`
 | 
---|---
### 布局
#### 全局型悬浮按钮位置在屏幕右下角
全局型的悬浮按钮位置往往在屏幕右下角，距下方和右侧屏幕边缘间距相同，具体间距根据实际场景定义（符合 4N 规则）。多个悬浮按钮并存时建议采用垂直布局。
### 内容
#### 清晰易懂的图标
悬浮按钮中的图标应清晰易懂，复杂度低，鼠标悬停时应显示对应的文本提示。
 | 
---|---
**正确：**
用户在看到该按钮时能够快速理解其作用，并且能准确地预测点击按钮后的结果 | 
**避免：**
图标表意不明显，且缺失文本提示说明
### 特殊场景
#### 消息样式
部分场景中会借助“悬浮按钮”扩展文案提供功能信息，较为常见的是 IM 消息列表场景。
层级 | 示意 | 使用场景
---|---|---
Secondary |  | 
Primary |  | 同上
#### 官网样式
全局型的悬浮按钮，仅通过图标无法清晰表意时可以使用带有文字说明的扩展形式。为保障文字显示效果，使用圆角矩形式的悬浮按钮。（通常是官网场景）
 | 
---|---
**正确：**
使用圆角矩形展示文字，文字不会被遮挡，且形状稳定 | 
**避免：**
使用圆形带文字的悬浮按钮，文字边缘不均匀，会让用户产生不稳定感。