大家好，欢迎来到IT知识分享网。
Hi小可爱们，端午安康！大家吃粽子了吗？
今天我们来分析的产品是飞书企业管理后台，范围主要会围绕以下这4个方面：
- Form的展示及编辑
- Table内容筛选
- Table信息展示
- 后台功能设置
这些都是我们在设计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提示操作成功。
这样的交互方式应该是效率最高的，但也需要谨慎使用，当用户修改敏感程度高、复杂度高的内容时，最好还是能够明确区分展示/编辑状态，再加上合理的二次确认，降低用户误操作的概率。
最后，我简单总结了一下，飞书企业管理后台在体验设计上的优缺点，首先是优点：
- 把高频操作按钮提取出来，放在便于用户操作的位置，例如“操作离职”
- 区分普通操作和关键操作的Button颜色，例如“操作离职”按钮为红色
- Table筛选：选完筛选条件后自动刷新Table，减少用户操作流程（不需要点击“查询”按钮）
- Table筛选：选完筛选条件后，Select背景颜色改变，清晰地区分出了已选择和未选择的条件
一点不足的地方，都是比较小的细节：
- 按钮文案没有统一，有些是“修改”，有些是“编辑”
- Table页面搜索框和Button间距不统一
- 个别Button内文案没有居中
好啦，以上就是今天的分享，希望大家都能度过一个愉快的假期！如果喜欢这篇文章不要忘记给它一个赞、评论、转发或者收藏哦~我们下期见！拜拜~~
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/161303.html
