14 设计文档：研发还原度太差怎么办？
你好，我是汤圆。今天给你分享一个工作中最让体验设计师头大的问题，研发还原度。
产品开发阶段之前，体验设计师通常要与研发工程师们打交道，讲解清楚设计的流程、设计的界面。在了解这些内容的基础上，研发伙伴就要开始进行实际的开发了。开发过程中，体验设计师还有一个最重要的任务，就是保障研发伙伴实现出来的最终效果。
但由于大部分设计师都只关注界面的设计，容易忽略客户在使用过程中发生的各种情况。比如在明厨亮灶项目中，客户的摄像头损坏，或者服务器内存满了这些情况都是非常容易被忽略但又一定会遇到的。
如果你在设计产品的时候没有考虑这些情况，没有把这些情况的体验都设计进去，那么在研发阶段一定会遇到很多重复沟通的问题。你设想一下，开发的伙伴在实现功能的时候非常严谨，每一个情况都需要用代码去做对应的处理，如果没有设计稿件，他们就不知道应该如何处理，只能又反过来问设计师。
这种情况在B端的实际项目里非常多，经常会导致在界面开发的阶段中，设计师每天都花大量的时间在沟通上，很多界面也要自己临时去补充，一不小心质量就很差，显得很不专业。
那么如何在主界面设计完后，把这些状态都考虑全呢？怎么把设计的内容专业地呈现给开发同事，不让自己的时间浪费在一些无效的沟通上呢？
前面和你分享过，B端体验设计中经常会有成百上千个界面，不像C端只有几十个。因为C端行业中的界面数量较少，逻辑相对简单一些，所以不太需要专门去梳理交互的状态与内容，有时候都不需要设计文档，只需要配合流程图输出UI设计内容就可以。所以，这里我给你一个标准的设计文档输出方法，帮你把事情梳理清楚。
设计文档通俗地理解就是描述用户与产品产生交流、互动的说明文档。 它能帮助你解决遗漏问题，提高与研发伙伴的沟通效率，同时也能提升你在B端设计领域中的专业度。
B端设计如何自查？
在设计完了界面之后，就要开始输出每个界面的弹窗、提示等内容了。很多设计师在做这一步的时候都是“拍脑袋”进行的，想到哪里画哪里，这是非常不专业的行为，很容易遗漏状态。
这时候就需要标准的自查逻辑来帮助你排查可能会出现的情况了。大部分设计师都积累过自己的自查流程，但很多都是单点的，比如“点击步骤小于3步”“控件是否符合用户认知”等等，比较空泛，很难帮你真正检查清楚哪些状态被遗漏了。
我给你一个B端自查流程，帮助你搞定这个难关。整个流程分为两大部分，内容的自查流程以及控件的自查流程。
内容的自查流程
内容指的是界面中的文字与控件信息（按钮、开关等）。我们做的B端产品大部分都是基于Web端（网页端）实现的，当客户使用的时候，很多信息都需要加载。这些需要加载的信息就是在做自查的时候第一个要检查的状态内容。
关于这个检查的过程，我也给你一个化繁为简的方法 ： 所有的内容都按照从没有到出现，到过多的情况去检查。
以大家都能接触到的团队项目管理工具Teambition为例，在你使用了一段时间之后，里面的数据（项目的数量）就会变得比较多，这样界面加载就需要一些时间。这个内容从无到有的过程，在做主界面的时候是非常容易忽略的。如果你按照我上面讲的流程梳理，很快就能发现这里需要一些加载的状态。
Teambition的设计团队做了一个巧妙的处理。在进入产品主界面的时候，团队考虑到整个内容需要一定的加载时间，所以针对这个状态设计了一个“加载状态”，并且采用的是“骨架型”的加载形式。
骨架型的加载指的是先把一些非常固定的内容、内存占用较小的内容同步加载出来，比如项目本身的一些字段和界面底色等等。而一些内存占用较大、耗时较久的内容，比如客户自己上传的项目封面、项目名称等等，就使用“占位图”来替代，直到加载出来。
进行从无到有这个阶段的自查，你就能很轻松地发现自己需要做哪些加载状态的补充，也能清楚地知道需要补充哪些视觉占位图，梳理loading状态。
在内容加载出来后，还要对同样的内容进行下一步的自查，去检查内容是否可能出现 “溢出”状态。溢出状态指的就是由于客户填写或其他情况导致信息过多，从而产生的一些特殊情况。比如项目名称的字数太长导致显示不全，或者创建的项目数量过多，需要下滑显示等等。
最后补充两种经常遇到的情况。第一种，就是产品有英文版本。因为英文的字符长度是中文的1.5倍左右，所以文字会突然过长；第二种，是客户使用了一些相对老旧、屏幕较窄的显示器，这个在B端行业中也非常容易遇到。这两种情况下，你就需要特别注意检查溢出状态并设计对应的解决方案了。通常来说，这些都可以通过Hover后显示全部内容来解决。
控件的自查流程
除了内容，也要注意检查控件的交互过程。控件与前面提到的文字信息、图片信息不同，控件通常指的是按钮、开关这些客户控制产品的功能内容，这些内容除了可以查看，还是可以与客户进行点击互动的内容。
所以，对于这部分内容的自查，一定要注意检查互动的过程中是否会触发因为信息加载导致的等待，甚至点击后出现操作失败的情况，都要一一注意并列举出来。
这部分我也给你总结了一个自查流程。因为控件是不需要加载的，所以它是从“有”开始，到客户点击，直到客户取消选中的一个过程。依照这个过程，你就可以检查控件相关的全部情况，保障输出内容的专业性。
以最常见的多选控件为例。大部分设计师都没有注意到按钮其实有非常多的状态。从显示出来的默认状态，到客户去点击它，再到选中它，一直到最后取消选中，里面有很多个过程，并且每个过程都可能会触发某些产品功能，这个过程也会有触发成功或者失败的情况，对应地，它们都需要做具体的提示。
总结一下，在进行设计自查的过程中，要注意两方面的内容，一是对内容的自查，二是对控件的自查。
对于内容，要去检查从无到有，再到内容溢出的情况，特别是在遇到客户屏幕较窄，或者有英文版本的时候最容易遇到这类情况。解决的方法也比较简单，最常用的就是使用Hover显示更多内容的形式来解决。
除此之外，还要检查控件的各类状态。 从控件加载出来的默认状态开始，一直到客户与控件互动之后的情况，都需要考虑进去。要注意，客户点击控件后，可能会触发某些相关的功能，比如你想给某位员工授予某个文件的编辑权限，但由于这个员工的级别不够，所以点击授予权限的开关时，就会显示无法开启权限的提示。这些都需要注意，梳理出来，呈现给开发的同事们。
只有把内容的各类状态与控件的各类状态都梳理完善，你的设计才算考虑得比较完善，而不是只有主界面和主要弹窗的粗略内容。这样，你才能节省掉后面开发过程中大量的、不必要的沟通时间。
如何输出文档
在梳理完了该有的状态之后，就需要做最后一件事：把这些完善的内容清晰地放到一个文档中，形成一个可以清晰阅读的设计说明文档，呈现给开发同事。这样才能保障每一位研发只要阅读了这份文档，就能顺利地进行设计效果的开发，并且不会有太大的理解误差。
那么，怎么才能输出一份优质的B端设计文档呢？这里我再给你分享一下我积累出来的模板，帮助你快速地上手。
B端体验设计的文档与C端类似，但是因为内容较多，所以书写的形式会有所不同。
首先，文档是按照功能模块来分类的 。 如果你的B端产品是一个大平台，功能有十几个，以文件放在Figma上为例，你可以为每个功能模块建立一个文件夹Tab，保障你的产品经理同事与开发同事在阅读的时候都不用等待漫长的加载过程。如果你所设计的产品功能比较少，那么全部放到一个界面中也是完全没有问题的。
其次，在书写的时候要注意，左侧一定放的是界面的设计内容，并且里面的信息要用数据正常的常态去示意。 这样能保证你在向其他同事或者客户讲解的时候有一个不错的案例效果，能节省一些再去重新制作示意图的时间。之后，再在示例界面的右侧，按照从上到下的顺序，按照前面讲的自查方式，把产品涉及的、需要向开发同事描述的内容和状态一一书写出来。
最后，现在很多产品已经有了自己的控件库，没有的也会调用一些市面上成熟组件库的内容。所以，像按钮、开关这类非常基础的空间，只要是控件库中已有的，在书写文档的时候就可以忽略它们的相关状态，你只需要去关注一些产品中基于控件库设计出来的内容就可以。
书写设计文档是一件比较耗费时间的工作，但这一步必须要做，非常重要。通常在整个B端项目的设计过程中，大家在文档上的投入时间可能会占30%左右。
有了这部分说明文档，就不会出现有些内容忘记设计的情况。那么基于梳理出来的状态，我们通常会再与研发、产品经理开几次讨论和讲解会议，讨论并同步一些细节。之后，开发伙伴们就可以自己根据文档顺利地进行开发，而不用设计师再投入更多的沟通时间了。
这里还要补充一点。在Figma出现以前，通常还需要输出一份视觉设计的说明文档，里面包含界面设计的位置标注说明、相关icon的切图等等。现在，Figma通过在线协作的方式解决了这个问题，所以基本都不需要再输出视觉设计相关的文档了，只要在Figma中把视觉设计的内容清楚呈现给开发伙伴，让他们能快速找到就可以了。
总结时刻
在设计完界面之后，设计工作还没有结束，因为马上就会进入研发阶段，这个阶段需要向不同的研发人员清晰地传递出来设计内容并且考虑到各类情况。因为开发过程是一定要基于严密的逻辑的，并且会测试各种特殊情况，所以如果之前的设计环节没有考虑完善、没有提前设计，那么开发过程中就需要投入大量的沟通时间，导致没有办法做更多体验方面的设计。
解决这个问题最好的方式就是书写一份清晰、完善的设计文档，这个文档需要把界面中的内容、控件的各类状态都考虑全面，并且设计对应的内容。然后再把考虑全面的信息，把每个界面都梳理成一个清晰的文档形式，传递给开发伙伴，保障不管哪位开发同事进行最终的效果实现都可以根据文档的内容直接进行开发，而不需要更多的沟通。
只有通过优质的设计文档解决了后续研发大量沟通的问题，B端领域的体验设计师才能从繁杂而无效的工作中解脱出来，把时间留在真正做创造性体验的内容上，实现持续打造卓越B端体验的目标。
解惑ToB体验设计
你有见过最优秀的B端设计文档是什么产品的？你认为它哪里非常值得学习呢？你写设计文档的时候又遇到过哪些问题吗？
欢迎你在留言区和我互动，如果觉得有所收获，也可以把课程分享给更多的朋友一起学习，我们下节课见！