# 云文档小组件设计规范

为了保证小组件在不同尺寸屏幕下的体验流畅友好，我们建议开发者根据用户使用设备和场景，自行对此小组件进行适配。

## 基本适配原则

-   **小组件内元素信息展示完整可读**，即在窗口切换成不同尺寸时，小组件元素信息应保证完整可读，不应出现信息形变、缺失等变化。

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3b5325f70075e19db5215430deca2525_AW4SYOaPkn.png?height=2139&lazyload=true&width=3000)
## 适配云文档小组件工具栏

### 云文档顶部/侧边操作菜单

云文档内小组件顶部会有官方统一提供的浮动工具栏，开发者不可以对其位置和样式进行自定义。开发者可根据具体需求修改/添加 开发者定义区域内的操作项。

文档顶部/左侧工具栏操作：

-   点击“评论”出现评论面板；
-   点击左侧 “=” icon 弹出面板操作项；

开发者定义区域与小组件容器内间距建议至少为上下 padding 8px，左右 padding 16px。

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/454c9c595153cac1f3a7d8e62c4398fc_nxsvvWH4Oo.png?height=792&lazyload=true&width=3000)
### **图标**

需要开发者提供线性和面性图标，尺寸：240*240 px

在图形表达上为了避免用户困扰，设计时请注意：各场景的图标需要统一；

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/750a66367bf9bf08f986e44399ecc0e6_B2BOu8BgSw.png?height=768&lazyload=true&width=1280)
## 推荐布局

在信息布局方面，开发者应该注意：

- 可以通过距离控制对象之间的整体关系；
-  需要区分开多个对象之间的归属关系。

接入云文档的开发者在设计界面时请预留出右上角放置操作元素的区域空间，要注意交互事件是否会冲突，操作是否容易被使用。

**小组件内部右上角操作工具栏定义：**

- 尽量不要超过5个 icon，多了可以使用‘更多’按钮来进行折叠收起 ；
- 小组件背景色尽量为白色或者可以预留右上角操作区的同等高度间距留白，不要放置可交互元素覆盖，以确保右上角操作工具栏可读性；

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/95ef7a3ce1a3b0d1f9acd9c066f3ef94_XSBsdRNE4C.png?height=768&lazyload=true&width=1280)