「飞书文档」产品体验设计拆解丨22 个优秀体验细节
编辑：[db:作者] 时间：2024-08-25 03:47:10
基于此，这里给大家分享一下飞书文档的产品体验设计拆解。
通过对「飞书文档」的体验设计拆解，为你供应一份文档类产品的解题宝典！
Ps：笔者之前写文章紧张是利用语雀或 Notion，这次为了拆解「飞书文档」，就专门用飞书文档写文章来拆解飞书文档~（套娃警告 ）
1. 事先声明强烈建议利用电脑查看，用户体验更佳；Gif 体积较大，请耐心查看；为了让设计细节更随意马虎被看到，用 Gif 来呈展示。
2. 适宜人群第一类，UI/UX设计师，可以跳出实行层，去思考飞书文档的产品设计谋略，提升产品剖析能力；
第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；
第三类，文档产品从业者，通过全面的产品设计谋略推导、用户需求剖析，获取竞品剖析参考。
二、日常利用场景1. 飞书文档导航栏
进入飞书文档，首先看到的便是这几个一级的导航栏，先来对这几个导航栏做一下梳理
主页：个人的主页，展示快速访问、最近访问的文档；我的空间：你的个人内容空间，你创建、上传的全部云文档、文件等内容都默认存储在我的空间。你可将我的空间中的内容分享给他人；共享空间：在共享空间中显示你与他人共享的云文档、文件及文件夹。为个人文件夹添加协作者后，该文件夹将自动从我的空间移至共享空间 ；知识库：面向组织的知识管理系统 ；百科：云文档主页导航栏新增企业百科入口，你可以直接在云文档主页查看和搜索百科词条；收藏：添加到收藏夹的所有文件 ；回收站：被删除的项目将在回收站储存 30 天，之后自动彻底删除 。2. 权限观点飞书文档是一个可多人实时编辑的在线文档，在利用过程中自然须要对团队协作中的所涉及到的干系权限进行理解
3. 新建知识空间
设计思考：
此处「新建」按钮下拉面板的触发办法是鼠标悬停即触发，用户可以减少一次点击次数，提高操作效率；知识空间模板：点击「新建知识空间」后，会有很多系统内置推举的空间模板，选中模板后可以直接在右侧对空间模板的目录构造进行预览，让用户在利用空间模板之前能够有一个预期；点击下一步，是完善知识空间信息，到这一步会默认聚焦到「名称」，通过默认聚焦的处理办法，便于用户直接变动知识空间的名称。在「完善知识空间信息」这一步可以把稳到两个必填信息并没有在一起，可以理解为名称和简介的干系性是更大的，同时可见范围用的是 Radio 单选控件，会给一个默认的选项，因此「可见范围」这个必填项在此并不会壅塞用户的操作流程。4. 模板联动设计思考：新建空缺文档后，输入文档标题，会自动不才方将已输入的文档标题关键词带入模板库搜索框进行检索，帮助更加便捷地利用推举的模板。这个联动第一次用起来的时候感想熏染非常奥妙，由于没有内部数据，不好推断实际的利用频率，不过单从创意上来讲不得不说飞书文档的产品设计还是下了一番功夫的。
5. 文档模板
飞书文档供应了非常丰富模板，在点击新建文档后，会直接弹出「模板库」弹窗，飞书文档供应了「实用」「专业」「丰富」的文档模板，非常推举用户利用系统推举的模板，进一步加强用户和飞书文档的粘性。
模板很实用。用户画像精准，产品定位清晰：垂直做事互联网人群、高端职场人群、须要方法论模型做写作依据的人群在事情中会用的文档模板。它的紧张受众群体是互联网从业者，但很多方法论模型的模板，实在是通用的，比如：事情周报、会议纪要、年度方案等等，适用于各行各业在事情中可以直接套用。模板很专业。基于风雅化有写作需求的场景，都供应了一套总结好的方法论模型，你可以直接用模板，无脑干事。模板开头每每还会配一张脑图，见告你写作的思路，给事情、开会没有头绪的人很大的帮助，也可以让有准备的人更加全面的思考，提高创作者思考效率和产出质量。模板很丰富。针对互联网人群不同的事情岗位、事情中的每个环节，全部都遍历到，并供应对应的模板，比如：它的分类办法直接面向岗位：产品、研发、设计、运营、市场、发卖、hr等等； 针对岗位的每个环节全部遍历，单拿产品岗说：BRD、竞品剖析/体验报告、各种需求剖析方法、各种流程图脑图模板、PRD 或需求评审模板、项目操持里程碑管理、产品功能 Checklist、上线前解释、业务培训等。覆盖事情全流程，灵巧遍历可能须要文档编辑的事情场景。「实用」「专业」「丰富」的模板还都是免费的。飞书毕竟还在起步期，产品该当已经得到市场验证了，但新产品让其他产品的用户主动迁移的本钱很大，推广期间还须要获客，以是这些模板就成了飞书获客的手段，全部文档模板免费利用。6. 文档编辑（1）没有顶部固定工具栏
大部分同学该当习气了 word 这种工具栏，包括其它很多的在线文档平台，也都保留了这种设计。
而飞书的工具栏默认是隐蔽的，在没有开始第一个字输入之前，进入页面便是一片白色，功能区全部隐蔽，须要点击或选中一些内容才能涌现，看似更麻烦，但实则更高效。
这种工具栏叫做「浮动工具栏」，与传统的工具栏抛给你一堆选择不同，浮动工具栏是环绕内容做事的。
你可以先书写内容，再利用浮动工具栏中的菜单设置格式。让设置就在你的光标阁下，移动间隔更短，日积月累能省下不少韶光。当然，直接记住 Markdown 快捷键是更好的选择。
（2）浮动工具栏
当鼠标选中文档内的已有内容时，界面会自动弹出浮动工具栏。
你可以针对选中的内容进行常规操作，例如改变字体样式或颜色、加粗或者加删除线、添加有序列表或无序列表、插入网站链接等，也可以针对选中内容进行评论点击工具栏中的 ∨ 按钮，有更多内容呈现形式的选择，如调度内容布局、插入引用和代码块功能等（3）区块菜单工具栏（ Block ）
在文档中，我们用块去称呼构造化元素（Notioin 中称之为 Block）。文档里的每一种内容类型都属于块，包括标题、文本段落、列表、表格、图片、多媒体文件、投票、第三方网页等。
例如，下图文档中的每一个蓝色区域，都表示一个单独的块。文档支持插入这些块元素，让你通过大略的鼠标点击，便捷完成一篇高信息量的文档。
（4）/ 快速插入
在文档任意空缺行输入 / ，或正文任意位置输入空格 / 即可触发快速插入，可见工具栏菜单。
（5）+ 工具栏
鼠标悬浮在文档任意空缺处，即浮现+ 工具栏。将鼠标光标悬浮在+工具栏上，可见+工具栏菜单。
（6）⋮⋮ 工具栏
将鼠标悬浮至想要编辑的区块，在区块左侧可以看到 ⋮⋮工具栏。将鼠标光标悬浮在 ⋮⋮工具栏上，可见此工具栏的菜单，你可以进行以下操作：
你可以调度本区块的格式，设置 标题、有序列表、无序列表等，或是剪切、复制、删除本区块的内容。你可以在此区块的下一行添加区块。按住 ⋮⋮ 工具栏，待页面涌现蓝色分栏线 | 或— 后松开鼠标，将当前的区块灵巧拖动到文档中任意位置。7. 文档分享设计思考：
飞书文档支持组织内或互联网，同时支持更高等的权限设置，例如复制文档内容、创建副本、打印、下载、导出等权限。在文档协同便捷性的同时又提升了文档的安全性；鼠标悬停到「分享」按钮上可以创造一个小细节，会通过 Tooltip 直接提示用户目前的分享类型，帮助用户更高效的获取信息；不仅文档可以分享，全体知识空间也可以互联网，给知识空间增长了更多的利用场景，例如企业可以直接用飞书知识空间来做产品的帮助手册。8. 多人协同编辑设计思考：飞书知识库的文档没有区分查看态和编辑态，所有的修正会实时同步给正在预览文档的用户；在多人协作的场景中，会把编辑者的光标实时显示出来，把线上协作的氛围感演绎得淋漓尽致。
三、体验亮点
今年飞书悄悄上线了「新文档」，以下内容拆解均基于「新文档」拆解：
1. Markdown
谈到飞书文档与传统文档最大的不同，我认为是飞书文档编辑器支持 Markdown 措辞，并按 Markdown 的理念打造。Markdown 可以让你在编写文档时一气呵成，省去通过菜单栏手动调度文本构造的繁琐。
飞书文档继续了Markdown 不许可改字号的理念。在这里，只有「一级标题」「二级标题」「三级标题」这些格式，没有「20号」「15号」这些字号的设置。
Markdown 的实质是让我们回归到内容本身，而不是文档的样式。
此外，对付组织来说，让所有文档整洁划一，一级标题都是一样字号的一级标题、二级标题都是一样的二级标题，一定程度上对降落阅读难度有帮助。
这里分享一下 Markdown 的快捷键：
2. N级标题
在飞书的工具栏中，默认只会显示 H1、H2、H3 这三级标题，乍一看彷佛不太够。
然后当文档里如果有利用到 H3 标题，那么 H4 就会自动涌如今工具栏中，以此类推，最多可以有 H9。
这种设计的处理办法非常人性化，既避免了一开始就涌现到 H9 带来的繁芜，毕竟很少有人会用到 H9，但是如果你真的用到了很多级别的标题的时候，又会自动涌现下一集标题，非常奥妙。
3. 列表首字母自动大写
海内很多在线文档，都不会把稳到首字母自动大写，而飞书文档没有遗漏。
飞书文档不但没有遗漏上述细节功能，而且利用蓝色的编号，让列表的存在感更强了， 让用户在写文档时能够更加清晰。
4. 错别字改动
在撰写文档的时候，难免会有一些错别字，飞书文档会自动识别可能是错别字的地方进行高亮，微信"大众年夜众号也有类似的功能，但是"大众号只会见告你哪里错了，不会给出办理方案。
但飞书文档更加人性化的是办法是直接给出了系统认为改动后的结果，而且大部分情形都是和编辑者预期的结果匹配的，用的过程中非常令人惊喜。
5. 百科词条与文档打通
飞书百科是最近新上的功能，不仅仅是做成了企业的「百科全书」，而且能够和文档内部打通。
当文档中有百科中的词汇时，关键词会自动高亮，鼠标悬停会展示这个百科词条的干系阐明。
对付一些大公司内部的黑话大全特殊管用，当新人入职新公司的时候，对付一些企业内特有的名词就能够通过百科词条轻松 Get 到意思。
6. 飞书剪存
飞书剪存是一个兼容于各大浏览器的扩展程序。它可以将自动剥离广告后的网页正文一键保存至飞书云文档。
一键保存网页正文，告别手动复制粘贴：浏览到喜好的网页，点击飞书剪存，即可将网页内容保存至你的飞书云文档中，而且标题格式还能完美保留。
对付用飞书来搭建个人知识库的场景非常方便，再也不须要手动复制然后一个一个调度标题格式了，效率大大提升。
7. 文档点赞动效
当看完一整片文档，不才方会涌现点赞的按钮，这时候会习气性的把鼠标放到按钮上，然后考虑要不要点赞，当我们鼠标悬停的时候，会触发点赞按钮蓄力的动态效果。
而且点赞完成之后还会有撒花的动态效果，用情绪化设计的办法勾引用户给文档点赞。
一定程度长进步了文档的生动度，让文档的编辑者也能够有更好的正向反馈，进而勉励文档的创作。
8. 支持个性化封面
在文档标题上方可以 添加封面，从官方图库选择封面图或从本地上传，让文档看起来更有生气，呈现个性。
官方图库中供应了很多高质量的配图，尤其是前面 3 排的配图还融入了飞书的品牌宣扬元素。
9. 横向图文分栏
在文档中利用分栏功能，让你的文档版面更加紧凑，实现图文、图表等各种功能的混排；还可以通过调度分栏的大小，调度高亮块、流程图等区块大小。
有了分栏功能，可以将飞书文档打造成一个非常大略的个人网页的形式，通过大略的拖沓拽就能形成一篇精美排版的网页。
四、体验槽点1. 图片默认对齐办法
插入图片后，调度图片大小时会创造图片默认是居中对齐的，但是就个人而言，大部分时候多利用习气都会手动再去调度回左对齐，每次都得手动调一边，显得很繁琐。
2. 图片区块手势不符合预期
新文档下，选中图片后鼠标悬停的手势会变成放大镜手势；旧文档下，选中图片后鼠标悬停的手势会变成抓手手势；这两种手势与本身图片支持的两种拖拽和放大的交互行为不太符合预期。有时候会误认为只能进行鼠标手势对应的操作。
3. 工具栏不一致
点击「+」和「/」呼出的工具栏的样式不一致，实在仔细瞧会创造里面内功能内容实在是同等的，看了下 Notion 是同等的，不知道飞书文档是出于什么考虑这里处理成了两种工具栏的样式。
五、总结
在设计方法论中有一个观点叫「希克定律」，即可供选择的刺激越多，用户决定与哪一个进行交互的韶光就越长，受到选择轰炸的用户必须花韶光来理解和决定，这相称于加重了他们不想要的事情。
比较于竞品「腾讯文档」、「石墨文档」、「有道云条记」等，进入文档边界会供应你丰富的文档编辑工具而言，「飞书文档」全体利用上的交互体验便是极简。
在《简约至上:交互设计四策略》一书中提到的四大策略：合理删除、分层组织、应时隐蔽和奥妙转移。
飞书文档可以说是将这四大策略用到了极致。
合理删除：去掉所有不必要的按钮，直至减到不能再减。在没有开始第一个字输入之前，进入页面便是一片白色，功能区全部隐蔽。须要工具栏的时候，导航栏、编辑区通过间距做分割，没有繁芜的色彩、边框、边界，非常极简。分层组织：在删除了那些不必要的、无法实现的的功能之后，须要对保留下来的核心功能和赞助功能进行组织。进入写作时，由于你在不同位置须要的功能不同，飞书已经提前分类整体好，在你须要用的时候恰到好处的供应给你。例如各种「/」「+」「⋮⋮ 」召唤出来的工具栏。应时隐蔽：将不常用的功能隐蔽在常用功能背后。写作过程中，页面也绝对不会涌现你不须要的功能，但当你一旦须要某项功能时，它会急速涌如今你鼠标输入位置交互最方便的地方。例如框选笔墨后，便会立马在上方涌现浮动工具栏，可以对笔墨的样式进行设置。奥妙转移：把得当的功能转移到得当的组件或平台中去。编辑区、编辑工具没有固定的位置，而是根据人机交互规则，须要的时候的时候应时奥妙显示。全体编辑器中的交互设计，比较于传统 Word 类型的工具栏，不须要满屏找想要的功能在哪里。
当用户须要的时候，会急速涌如今间隔鼠标最近的地方，提高文档编辑的效率。整体利用飞书文档的感想熏染会创造很多除了期望型需求外，还知足了用户很多的愉快型需求。
由于韶光和篇幅有限，关于飞书文档的体验设计拆解中存在的疏误之处还望大家给与示正，欢迎大家一起学习和谈论。
参考链接：
https://zhuanlan.zhihu.com/p/532734411
https://www.feishu.cn/hc/zh-CN/categories-detail?category-id=7099738910548312066
作者：波波 Bobby He ；深耕 B端体验设计，持续学习输出中。
本文由 @波波Bobby He 原创发布于大家都是产品经理。未经容许，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。
本站所发布的文字与图片素材为非商业目的改编或整理，版权归原作者所有，如侵权或涉及违法，请联系我们删除，如需转载请保留原文地址：http://www.baanla.com/rqz/106172.html
上一篇：继电器可以用什么代替你一定不知道
下一篇：返回列表