工作协同 I 如何确保设计的落地效果更好！（含附件）

一个好的设计作品可以把产品价值翻一番，但想让创意落地，还得靠技术支持。除了协作工具里的样式信息，还有那些隐藏在静态页面中的信息，需要设计跟研发紧密合作，保证一切都能顺利‘着陆’啦！

设计稿还原度的重要性主要体现在以下几个方面：

① 设计工具

随着UI设计的不断发展和普及，越来越多的设计师开始使用专门为UI设计而生的工具，如Sketch、Figma、Adobe XD等。

② 标注工具

为了满足不同的需求和场景，各种标注插件也应运而生。这些插件可以扩展标注工具的功能，如Sketch Measure、MarkMan、PxCook等。

③ 协作工具

为了满足团队内部的各种设计协作需求，提高工作效率和产品质量，近年来已经涌现出许多协作工具，如蓝湖、摹客、Figma等。

即使协作工具能够帮助我们同步和查看设计图，但是在实际工作中，我们仍可能会遇到一些难以避免的问题：

（1）设计还原度低

（2）设计规范不清晰或者缺失问题

（3）忽略用户体验

（4）技术限制
（5）增加沟通时间

（6）时间压力和任务繁重

（7）…

了解研发的基本原理有利于设计师在验收时，对照设计图，确定设计的还原度。

盒模型：在CSS中，每个元素都被视为一个矩形盒子，这个盒子由内容（content）、内边距（padding）、描边（border）和外边距（margin）四个部分组成。

① 外边距（margin）

外边距是盒子之间的空间。通过设置margin属性，可以控制盒子与其他盒子的距离。如：margin: 10px；会将这个盒子与其他盒子的距离设置为10像素。

② 内边距（padding）

内边距是内容与边框之间的空间。通过设置padding属性，可以控制内容（如文字或图片）在盒子中的位置。如：padding: 10px;会将内容与边框的距离设置为10像素。

③ 描边（border）

描边是盒子边缘的线。通过设置border属性，可以给盒子加上描边。如：border: 1px solid black;会给盒子加上一个1像素宽、实线、黑色的边框。

在有协作工具的情况下，设计需要注意文字行高、文字弹性适配两个方面。

① 文字行高

在日常设计时普遍采用1.5/2倍关系来确定文字行高，但这并不是绝对的，行高的倍数也会受到字号大小的影响。因此，在确定行高倍数时，需要根据实际情况进行适当调整。此外，行高的大小还受到字体和排版风格等因素的影响，也需要根据具体情况来确定。

② 文字弹性适配

在标注文字时，需要说明文字的弹性适配策略。协作工具通常无法直接识别和还原文字的弹性适配效果，因此需要在标注中明确说明。可以提供弹性适配的具体规则和建议，以便开发人员能够根据需要进行适配和调整，从而还原设计效果。

由于不同机型的屏幕尺寸和比例不同，同一元素在不同机型中可能会呈现出不同的位置。为了更好地控制元素的位置，我们可以将其分为两种类型：绝对位置、相对位置。

① 绝对位置

绝对位置是指元素相对于屏幕的位置是固定的，不会受到其他元素的影响。也就是说，无论其他元素如何移动或变化，绝对位置的元素都会保持在同一位置。如：导航栏、底部Tab、固定在底部的按钮、悬浮按钮等。

② 相对位置

相对位置是指元素位置不固定，会因页面尺寸或其他元素影响而变化。当页面尺寸或元素位置变化时，相对位置的元素会自动调整位置以适应新情况或保持与其他元素的位置关系。如：页面滚动时，导航栏吸顶；列表有删除时，下方列表上移等。

标注清晰在设计中至关重要，除了使用协作工具，还有什么其他方法可以提高团队对设计意图的理解？根据日常工作经验，下面总结了五个标注方向：

（1）页面布局

（2）适配规则

（3）动态效果
（4）点击热区

（5）特别注意

（6）...

标注页面的布局结构可以帮助团队理解整体设计，标注每个组件的位置、大小和对齐方式，以及标注页面的层次结构，同时设计中的栅格分布也可以同步给研发工程师。

栅格的规则定义了一套底层的、统一的测量单位，当设计团队内对此达成共识时，可以避免因屏幕适配、比例换算产生的像素偏移，适配多种屏幕，提升设计稿件中元素属性的一致性和规范化。

在设计过程中，需要考虑不同设备和屏幕尺寸的适配。可以标注不同设备的尺寸，并明确适配规则。这些信息可以帮助团队成员更好地适配设计，并确保在不同的设备和屏幕尺寸上获得一致的用户体验。

下面列举了一些适配规则需要标注的信息点：

（1）模块排布规则

（2）不同情况下的信息展示

（3）页面元素的展示位置、适配规则

设计师可以通过标注动态效果来提供更详细的设计信息，以便研发工程师能够准确地理解不同状态下的展示效果和交互方式。这对于实现设计意图和提供优质的用户体验至关重要。

下面列举了一些适配规则需要标注的信息点：

（1）有交互操作后，页面信息、状态变化

（2）异常情况信息展示

（3）信息多少，页面展示效果

（4）动效信息标注，实现方式、触发条件、持续时间、动画路径

（5）...

点击热区是指用户在界面上最容易点击的区域。可以标注出点击热区的位置、大小和形状，以便团队成员在实现交互时更好地考虑用户体验和操作习惯。

在设计过程中，即使有了协作工具的帮助，我们也需要对特殊情况、限制和经常出现的协作问题进行标注。这样，团队成员在实际操作时可以更好地考虑这些因素，从而确保设计的整体一致性和可用性。

设计中引入研发工程视角，减少疑难杂症的出现，标注和开发工作如丝般顺滑，降低成本，还原度直线上升！

最后，提供了一个《Web 标注模板》源文件，欢迎大家交流和指正。

链接: https://pan.baidu.com/s/1FVf5H2E8zoAasshh9v6J2g?pwd=5ehh

提取码: 5ehh