产品分析:飞书企业管理后台中暗藏了哪些设计亮点,一起来看看吧

Hi米娜桑，端午安康！大家吃粽子了吗？

今天我们来分析的产品是飞书-企业管理后台，分析范围主要会围绕以下这4个方面：

1、Form的展示及编辑

2、Table内容筛选

3、Table信息展示

4、后台功能设置

这些都是我们在设计B端产品时经常遇到的场景，那话不多说，一起来飞书是如何做的吧！

1. Form的展示及编辑

飞书的展示和编辑是在同一个页面。页面排版及内容样式没有明显差异，只是通过组件状态来区分了两种不同的模式。

在编辑状态下，支持编辑的内容，输入框变为normal状态，不支持编辑的内容，输入框为disable状态：

2. Table内容筛选

选择筛选条件，选项过多时，Picker会固定最大高度，内部滚动展示所有选项，不支持搜索：

选中某个选项后，Select会增加一个背景色，和未经筛选的Select区分开，告知用户这个筛选条件已选好，同时Table自动刷新，不会出现加载延时：

3. Table信息展示

这样做的好处是可以在Table中留出更空间展示内容，但它也可能会遇到一些问题，例如Table需要横向滚动的时候，鼠标大概率会hover在某一列上，这时后面的操作按钮是展示出来的，同时也覆盖了一部分Table中的内容，那么在Table滚动的过程中，操作按钮是否还要继续展示，这种细节还需要和前端讨论一下更严谨的交互方案。

再来看一下超长文字处理，飞书的超长文字，都是用“...”展示，鼠标Hover，Tooltips展示全部内容：

Table展示内容支持自定义，横向滚动时，首列固定：

左侧的List支持展开/收起，操作按钮的尺寸和位置恰到好处，不会占据太大空间，也不会影响页面的视觉效果：

4. 后台功能设置

在B端产品中，设置页面也是比较常使用到的。飞书的设置页面可以直接编辑，不需要切换展示/编辑状态，修改后，内容即时保存，并Toast提示操作成功：

这样的交互方式应该是效率最高的，但也需要谨慎使用，当用户修改敏感程度高、复杂度高的内容时，最好还是能够明确区分展示/编辑状态，再加上合理的二次确认，降低用户误操作的概率。

最后，我简单总结了一下，飞书企业管理后台在体验设计上的优缺点。

优点：

1. 把高频操作按钮提取出来，放在便于用户操作的位置，例如“操作离职”

2. 区分普通操作和关键操作的Button颜色，例如“操作离职”按钮为红色

3. Table筛选：选完筛选条件后自动刷新Table，减少用户操作流程（不需要“查询”按钮）

4. Table筛选：选完筛选条件后，Select背景颜色改变，清晰地区分出了已选择和未选择的条件

小问题：

1. 按钮文案没有统一，有些是“修改”，有些是“编辑”

2. Table页面搜索框和Button间距不统一

3. 个别Button内文案没有居中

那我们下期见啦！拜拜~