工作当中遇见过很多奇葩设计师，比如：变更了文档不写记录；设计界面没有任何标注；页面内容到处乱放。
关于设计标注，很多设计师容易被忽略。因为对于一个页面来说，我们作为设计师的首要目的，是对它进行设计与还原；而作为开发来说，他们的首要目的是去实现对应的逻辑业务，需要撰写很多 JS 代码、搬运很多组件库。
这也就导致大家所关注的内容并不相同，所以极难产生一致的目标（比如我前司，上一个专注于界面还原的程序员，因为 OKR 不达标已经被优化掉了）
既然目标不一致，作为设计师就更应该把你的设计讲清楚。那如何在 B 端产品当中页面应该如何标注，效率更高？今天我们通过实际案例来和大家解析。
如果你没有看过第一篇文章，我强烈建议你先看第一篇文章以做到无缝衔接。
比如：程序员、产品经理、测试人员，还有其他关联的人员和设计师。并且在参与的人员当中，大家所关注的内容其实也并不相同。
程序员想要了解页面的整体设计；产品经理想看方案是否完整；测试人员分析页面进行用例梳理。而我们就需要在一个页面当中去呈现：页面布局、信息流转、业务逻辑等内容。因此我们的设计方案，就需要呈现所有的信息。那为什么需要把这些内容聚合？
比如你是一个程序员，现在摆在你面前共有三份文件，分别是：产品文档、交互文档、UI 文档，这三份文档你每一个都会切换查看，理解其设计原因，这样的效率就会大大降低，极大影响开发大大遨游在代码的海洋里。; )
而设计标注是否优质，最好的检验标准就是开发查看完你的方案过后，不会有太多困惑的地方，并且在开发还原上，能够高度还原页面。
因此，在页面中，只有将你的页面信息标注清楚，才能够保证方案能快速理解，提高效率。
提升专业度：很多同学理解专业度的提升，想到办法更多是：开内部会、做月分享。这些都比较务虚，并不务实。想要把自己的影响力传达到研发层面，最好的做法就是通过页面标注让程序员清楚方案的全貌。他能够一眼获取所有信息，在产出上的效率一定会更加的高效。
提升话语权：将信息标注落地到实处，代表着我们会去思考整个方案的全部流程，而不是抓住方案的局部细节。这对于设计师在团队中掌握话语权极为重要，一方面是能够与产品直接对话，另一方面是可以要求研发积极配合。
如果研发没有认真还原我们的设计方案，我们便可以对项目上线拥有一票否决的权利。毕竟我方案都做得如此完整，你不还原总的给我一个理由。
其实这就是设计当中标注信息的不同。关于我们日常设计的标注，我们通常会分为三种不同的形式：“页面标注、状态标注、逻辑标注”
首先，我们需要通过页面标注，将页面当中重要的信息部分进行强调。比如程序员需要关注一些特殊的尺寸、非常规的间距，我们都能够通过页面标注进行获取。
其次，状态标注更多表现在动态的交互上，通过不同的交互状态进行呈现。因为整个B端系统中涉及到的交互状态非常多，所以状态交互逻辑会异常繁琐。
我们便可以通过简单的状态标注，来讲清楚页面中可能存在的设计形式，这样方便开发人员能够有针对性地还原。
最后，因为整个页面中仍然会存在很多业务逻辑，我们可以通过逻辑标注来讲清楚对应的细节规则和业务性问题。逻辑标注更多是对自己方案产出的细节补充，因此也格外重要。
关于这三者之间，它们本身就是相辅相成，但是在顺序上，它们是一个层层递进的关系。首先我们作为设计应该先考虑业务，因为业务走通了，我们才能够将所谓的方案真正落地；其次则是状态的标注，因为状态当中会存在很多交互入口，我们能够通过状态去思考在页面当中的动态交互；而最后所有的内容都已敲定时，这时候我们便可以考虑将所有的页面“注意事项”，标注出来，提示程序员。
所以我们在标注时应该先 逻辑 – 状态 – 页面，当然我们作为文章，在讲解时不能按照此顺序，这样门槛过高，因此采取：页面 – 状态 – 逻辑。
页面标注就是将页面的信息内容，通过标注的形式进行呈现。
而在实际项目当中，页面标注并不是标注页面的所有信息。因为现如今大部分的信息我们可以通过设计交付软件，让前端直接获取，比如常见的 蓝湖、Figma、Zeplin。
并且在每个页面当中，通常都会提供页面模板和设计规范给到开发人员，这些全局的内容意味着在标注时不必过于啰嗦。如果你们还没有模板和规范，那么这部分需要先补齐，以减少在页面中呈现过多的信息。
比如以下方这个页面为例，我们将上面的标注，把对应的基础模版与规范提供给到用户后，就可以标注清楚 细节页面、特殊尺寸。
顶部的空间间距，由于开发可能会还原失误，所以我们需要将其间距标注出来，让其注意。
在页面当中出现的 两个线条，在设计上的样式不同，因此也需要提示开发，这里需要注意。
分页的整体高度与，输入框、按钮的 36px 不一致，所以也会在底部将其标注出来，避免开发忘记。
作为设计师，我们除了需要考虑正常的数据情况之外，还需要去思考不同的特殊极值处理。
比如在下方的表单钟，其中会提示：“最多不超过 200 字”。
这时候我们就会关联思考，假设用户输入了 200 字，那在这个表单页面如何呈现？对应的详情页又该如何处理？
对于文字过长的情况，我们的处理办法主要是使用 文字截断省略。
文字截断省略 即将出现的内容信息以 “…” 的方式呈现。目前在 figma 中，这种处理比较简单，我们可以通过字体属性中的 Resizing 来实现。
同时在页面标注时，需要根据特定情况，标注出内容文字的具体限制字数，比如下方文字限制为 超出 20 个中文字符，则使用 ”…” 进行省略。
比如在下方页面当中，会出现非常多的数据指标，目前数据展示的布局都非常合理，假设在 “投放中内容” 里，数据值变为 3684220 个，这时候页面应该如何呈现？
在去处理类似的情况时，我们可以将数据极值进行简单的呈现优化设计。比如 3684220 个，可以简单省略为 3684K 个、368W 个，至于数据的呈现方式，就需要设计师设计对应规则。
比如，当数据大于 1000000 时，将数据展示单位设置为 100W 个；
当数据大于 100000 时，将数据展示单位设置为 100K 个；
如果只是这样讲解，大家其实还是不太理解页面的具体实战标注。所以我们将页面划分为常规的：表单页，表格页和详情页，再来进行讲解。
因为你会发现在 B 端系统当中 常规的页面会占整个页面的 80%，而特殊定制化页面会占系统的 20%，而所有的页面，都会有一个基础布局，因此我们学习了 80% 的页面标注后，就能理解系统当中如何进行交付。
在表单页面中，整体的标注通常较为简单。因为所有的表单通常都采用统一的对齐方式来呈现，所以并没有太多特殊的情况需要标注。
但是在实际工作中，我会发现一些特定的情况，比如穿梭框、业务组件等。这些内容的宽度加大，导致表单的使用受到空间限制。
因此，如果页面中存在这样的情况，我们就需要对表单进行标注。
比如穿梭框，它会包含横向排列和纵向排列两种情况。如果页面中的空间过少，那么我们可以采用纵向排列的方式来解决。
至于具体多少尺寸需要 横变纵，就根据你自身页面情况进行设定标注即可。
一种是定宽，可以理解为无论何种情况都是固定的宽度；另一种则是按百分比的方式自动适应宽度。
在表格中处理起来最简单的方法是将定宽部分排除，剩下的按照百分比来解决。这样可以保证表格的适应性更强。
同时，在百分比的内容区域中，我们可以为每个内容的宽度添加相应的标注。这样可以保证在开发还原的准确性。
首先，我们要先设定定宽尺寸，即在右侧的 状态、操作，可以给出固定宽度。
剩下宽度则按百分比的方式进行布局，我们可以根据不同字段类型，设定它们的具体尺寸，这样就能保证页面的百分比关系。
对于工作台页面的标注，它的逻辑在上篇文章已经讲过，感兴趣可以先去看看上篇文章，这里就简单总结一下。
首先，左侧导航是固定的尺寸；其次，剩下的部分我们可以按照百分比的方式来进行划分；最后，再限定一个最小的尺寸，也就是当达到多少像素时，我们便不再对其进行适配。
这样便可以设计出几个不同的页面尺寸以及对应页面展示的形式。
状态标注即表达清楚页面当中的 鼠标状态、操作状态。
由于B端产品本身存在鼠标的交互，因此我们可以通过坐标状态来表达每种按钮的特殊情况。当然，并不是所有按钮状态都需要一一表达，我们只需要标注出一些特殊状态下按钮的表达方式，而常规状态在我们的设计规范中已经包含了。
比如我们需要标注下方按钮的状态，想想你会如何标注？
这时候，我们不会考虑标注其按钮的各种状态，比如 默认、悬停、聚焦、激活、禁用，因为这些内容，我们已经在设计规范里有具体的标注。
但是需要将新建按钮当中，点击过后菜单如何展开。会存在哪些操作标注出来，才能让开发人员知道如何还原，呈现对应的方案细节。
关于操作状态，我们举一些实际的案例，比如在下图这个表格当中，我们需要在这个页面当中新增快捷编辑的功能，这时候我们就需要思考方案如何设计，以及这个方案背后会产生哪些交互？
首先，表格当中存在不同的字段，因此在方案呈现上，我们需要针对不同的字段进行分类。通过理解操作过程当中的整理流程，梳理出用户应该如何进行快速编辑，整理出其操作状态。
其次，我们需要考虑表格快捷编辑后，因为每个字段都有固定的校验方式，输入的信息可能会有成功和失败两种状态。
对于成功的状态，我们需要给出 全局提示 让用户知道操作完成。
对于失败的状态，我们需要给出 错误提示 告知用户错误的原因，并且将原来的表格数据进行替换。
作为设计师，我们需要在页面中清楚地标注这些状态，这样程序员就能够理解操作后会存在哪些对应的状态，以及对应的回退机制。
业务逻辑在标注当中最为复杂。因为每一个页面都会有它特定的业务需求，我们在标注的时候需要谨慎的思考其背后的业务逻辑。
因为业务逻辑本身非常的大，没办法将其一概而论，我们只能够通过对应的案例讲解一下标注的具体思路。
以下图为例，是我之前处理的一个需求，先简单介绍一下背景：
在一个活动渠道表单当中，我们通过用户输入的企业名称，可以调用天眼查第三方的 API 进行查询，进而可以将天眼查的数据直接匹配到表单当中，让用户不用再填写下方的：广告媒介、关键词、广告内容 等字段。
因为产品处于初期，通过数据埋点发现点击 查询 的用户非常少。很多用户在输入少量公司名称后，发现查询不到自己想要的公司就选择退出，而我们需要优化此交互。
当时我给出一个方案。首先查询的页面本身不是我们的，而是接入第三方的天眼查，让他们提供对应数据。
这里需要交代一下原因：类似这种查询的方式，所有平台都是需要收费，例如在我们这里，可能每一查询都需要花费 0.1 元，因此查询的次数多了，无异于需要花费企业大量成本。
针对这种业务背景的前提下，我们便将方案进行设计。将输入框与查询入口进行结合，也就是说用户不需要再点击查询，我们能够直接展示对应的企业信息列表，也就是下图中通过下拉菜单，展示对应的企业列表。
但是由于 背景的限制，我们不能够实时查询，也就是用户填写一个字、甚至是打一个字母我们就查询一次，这样所花费的成本过高。因此我们将上诉业务进行整合，随后优化到设计标注当中。
判断时间主要是为了用户在正常录入时，不会受到下拉菜单的影响；
判断长度是大多数企业名称需要超过 4 个字，才有较为准确的结果；
这其实就是根据自身产品的业务特点，我们需要优化方案，并且将方案内容呈现到设计文档当中去。
在产品设计当中，本身就会包含很多逻辑存在，比如标签。作为设计师我们不能只想着标签，而不去考虑这些标签如何判断。
比如在下方页面当中，会出现 “横版短视频、竖版短视频、横版长视频、竖版长视频”，然而这些状态对于其定义其实我们并不了解，因此我们就需要将其进行相应设定。
如果 视频的长度等于高度？它又应该叫什么视频？这都需要你去分析。
其次，短视频和长视频之间的差别可以通过视频长度来判断。平台可以将视频的时长为 5min 以下定义为短视频，大于等于 5min 以上定义为长视频。
而这些状态，我们都需要标注在产品当中，作为你设计的思路的呈现。因此一个小小的标签，我们需要涉及的内容还是非常之多。
本身是不想推荐工具的，因为标注这件事本身就没有捷径，就是一个重复劳动。
但是转念一想，既然是重复劳动，肯定会存在相应的标注工具来为我们进行提效。这里就以 Figma 为例，推荐几个常用的插件，并且讲解一下具体的使用方法。
如果你用过 Sketch ，那肯定知道 Measure 的强大，在设计早期，几乎身边所有人都去使用 Sketch Measure 进行交付。不过 utom 大佬最终停更于 4 年前，主要也是饱受 Sketch 的各种摧残，感兴趣的小伙伴可以去听下 Anyway.FM 的这期音频。
跑题了，说说 Measure。目前这个插件和 utom 没有太多关系，它的主要功能标注，也就是当前页面的具体参数。比如尺寸长宽、内容属性，但对于我们设计标注来说，其实会更为的纯粹，因为简单，之前的这部分页面就是通过 Measure 进行标注。
在 Figma 当中进行流程标注一直以来都是一个难点，它没办法做到像 Prossess on 那样丝滑流畅，很多时候我们需要手动的链接。
Autoflow 就能够解决这个问题，它能够帮助设计师自动创建连线，使得设计流程更加高效。并且你在修改时，它会自动跟随你的关联组件进行跟随，这样在我们后续修改方案的时候，也不用重新修改连接，它能够自动跟随。
俗话说的好，差生文具多。我尽量少去推荐工具，想的更多是让同学们去练习，思考如何进行设计方案当中的标注。
当然如果你觉得难度较大，我们也准备了一个小的案例（会在周三 我的交流群内公布），大家可以通过练习熟练掌握技巧。同时周五晚 6 点，会直播讲解这个案例，带领大家了解标注的小技巧。
现如今的设计方案，标注少了，理论会更多了。我见过很多设计师，一旦有任何回答不出来的问题，统一都会归结为“业务”
看到很多设计师的作品集也是如此，仿佛大家在意的都是组件当中的外形、设计风格的颜色、页面的整体设计，而去处理需求的时候，就会显得一头雾水，这是我们不需要看到的。
现在的 B 端设计师需要你在调研时，足够的理解需求；方案设计时，了解更多设计模式和解法；交付设计时，需要更为负责与认真。
这些内容不应该成为一种“非物质文化”，需要去继承，而更应该是一种方案呈现的常态。
我是 CE，下一篇我们聊聊 交付当中的字体，下周见~
我们第八期的 B 端交互设计训练营的课程现在已经开始预约了，现在预约后续可享受早鸟最低价格。感兴趣可以私聊我获取报名方式~
本篇文章来源于微信公众号: CE青年Youthce
