B端产品分析：飞书企业管理后台中的设计亮点，你发现了吗？

欢迎大家来到IT世界,在知识的湖畔探索吧!

Hi小可爱们，端午安康！大家吃粽子了吗？

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

1. Form的展示及编辑
2. Table内容筛选
3. Table信息展示
4. 后台功能设置

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

Form的展示及编辑

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

在展示状态下，所有输入框都是Finish状态，不可编辑，点击右上角「修改」按钮，可进入编辑模式。

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

Table内容筛选

飞书将筛选区放置在Table上方。在包含时间范围的Table中，基本都是默认展示最近7天的信息：

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

选中某个选项后，Select会增加一个背景色，和未经筛选的Select区分开，告知用户这个筛选条件已做出选择，同时Table自动刷新，刷新速度较快，基本没有遇到延时：

Table信息展示

这里的设计比较有意思，通常我们设计Table时，会把最后一列留出来放置操作按钮。例如编辑、删除查看详情等。然而飞书在这里却把它们默认隐藏了起来，只有当鼠标Hover某一行时，末端才会展示相应的操作按钮，点击“>”，就可以收起，如下图：

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

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

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

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

后台功能设置

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

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

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

1. 把高频操作按钮提取出来，放在便于用户操作的位置，例如“操作离职”
2. 区分普通操作和关键操作的Button颜色，例如“操作离职”按钮为红色
3. Table筛选：选完筛选条件后自动刷新Table，减少用户操作流程（不需要点击“查询”按钮）
4. Table筛选：选完筛选条件后，Select背景颜色改变，清晰地区分出了已选择和未选择的条件

一点不足的地方，都是比较小的细节：

1. 按钮文案没有统一，有些是“修改”，有些是“编辑”
2. Table页面搜索框和Button间距不统一
3. 个别Button内文案没有居中

好啦，以上就是今天的分享，希望大家都能度过一个愉快的假期！如果喜欢这篇文章不要忘记给它一个赞、评论、转发或者收藏哦~我们下期见！拜拜~~