我们在工作中，总会和开发同学又不少的“友好交流”，实时因为设计稿还原度上的问题，在开发同学一声声“美好的问候”中，夜不能寐，或又因为开发同学觉得你能力很强，过于“依赖”你，交出代码让你来写，表现出手作无错的样子。

今天我们来聊一聊如何和开发成为好朋友。

在前段时间的工作中，听到设计同学和前端同学进行一些“友好的交流”，在了解过程中发现呢，不少设计同学并不怎么了解前端开发的思维，因此我根据自己的经验总结一下运用前端开发布局的思维进行设计稿的输出，并且养成习惯，减少设计同学和开发同学在工作中的“友好交流”。

设计同学一定有一个疑惑，为什么开发后的还原度不高？不是很简单？就按照设计稿像素开发就可以了，事实真的是这样子？接下来我带着大家去了解开发同学是如何看我们设计稿和开发的。

从开发同学视角看设计稿

要想先从开发视角看设计稿呢，我先了解开发的布局思维，
现在在工作中我们大部分时候都是一稿适配，开发同学如果进行布局上的适配的呢，我们借用一张图进行讲解，了解盒子模型的一个概念，想必大家对盒子模型并不陌生，现在不需要 太过深层次的了解，只需要了解布局思维。

盒子模型

如图，我们运用实际的案例来更轻松理解盒子模型，了解开发同学布局思维。

• argin(外边距)
• border(边框)
• padding(内边距)
• content(内容)

开发同学眼中的设计稿

开发同学看待设计稿和我们看设计稿的思维不一样，我们更多是否整齐，是否合理，视觉层级是否正确、信息传达信息是否有序等等
而开发同学看的是如何布局，如何适配、状态...

不光在大模块与大模块之间运用的盒子模型，在内容的填充呢，小元素的布局都会成为一个“物品，整齐放进盒子里”
所以说，为什么设计稿还原度总是感觉差一些，因为开发眼中的设计稿和我们的并不一样。

了解开发同学的布局思维，从开发的角度去看设计稿，在开发同学眼中，每个元素都被统一的归纳和组合成为一个个模块，这也是开发同学布局思维模式。

在工作中，我们应该怎么做

大部分设计同学的设计习惯，并没有前端布局思维进行分模块打组，而交付到开发同学的手里，则需要通过他自己的理解进行打组布局，这就导致了，设计稿和开发的效果有一些出入。

了解开发同学的一个布局思维呢，看看设计师如何去做设计呢

不少同学在打组时候都会一个模块直接打成一组，到开发同学查看标注时，都像是一个个不规则的小元素摆放，并不会感觉到所谓的整齐，所以只能根据他们自己的理解进行打组了，开发为了能更好的进行多机型的一个适配呢（注：特别是安卓），都会使用指令式开发方式。开发同学并不会按照绝对像素进行对齐。

所以设计同学需要运用开发的布局思维对整个页面进行布局。让设计和开发的感情进行升温。

养成前端的布局思维，并习惯运用它

在工作中我们如何去运用布局思维到自己设计稿上，提升后期设计稿的还原度。

在设计过程中，我们要习惯的使用开发的思维逻辑进行布局，将每一个元素归纳和打组。

这里的归类和打组，不是将视觉上在同一水平线的或同一模块内的内容进行直接打组，或方便自己移动或整理来打组，而是我们要考虑每一个元素在可能存在的不同状态和应用场景，我们可以尽可能帮助开发进行前期的布局。

字符的有效显示字数
标签有效显示
它们占位是是多少等等...

我们需要根据开发布局思维，进行有依据有逻辑进行归纳，我们就可以像套娃一样一个一个的累积和叠加出页面的布局。

运营活动h5的开发更应如此，本身页面较为复杂，所以我更应该具备这样子思维模式

注意的是：我们需要对比较复杂的模块都进行比较细致打组，尽量保持与开发同学思维一致。

布局思维的升级（Auto layout)

了解了开发布局思维和我们应该如何应用到设计中，但是我们仍然需要去掌握“Auto Layout”，这样我们能更好的并且运用到设计和交付中去，去应对不同场景开发需求

在安卓生态体系上，并没有统一尺寸，个大厂商也是各有个性也是人尽皆知了，在iphone 14更新之后，设计稿上也出现了两个全新尺寸（393*852，430*932），在虽然现在大部分都还在使用375的一倍稿进行适配，在上线后总有款机型没有办法很好的还原设计稿。

所以我们必须要去做到控制好Auto layout（自动布局），跟开发同学沟通清楚，哪些是自动布局，哪些是固定值，做好组件与组件，组件与屏幕之间的约束规则，输出相对应的文档标注，最终才能保证设计落地灵活性。

交付给开发，我们需要注意的地方

以现在使用比较广泛的figma来做个例子，使用figma设计和交付的同学要格外注意，开发同学账号角色和我们角色定位的问题，figma上的选择操作是相反的。

设计同学是需要按下cammand键（win按下ctrl)是选择最小子级元素，开发则是相反，反之我们不按cammand键，则是最大父级元素依次递进，开发反之，为了能让开发更清楚的了解布局，我们需要去和开发沟通使用。

所以我们需要的是与开发同学沟通figma的使用方法（注意：要耐心），避免出现开发同学自由发挥的情况
ps:有些同学或许是之前从PS,Sketch,转用figma，前两者在之前设计习惯可能是2倍图或者3倍图，交付习惯都是用的第三方，可以自行选择，而figma只能基于你设计的尺寸进行展示。

公司在统一使用figma后呢，有些同学保留了之前的设计习惯，导致被开发集体“批斗“，开发基于最小值，就是1倍图进行开发往上适配，如果你是用的是2倍图或3倍图交付，那...可能并不是很友好。

你需要将原来的设计习惯转换成一倍图设计稿进行设计，开发同学是依据一倍图进行开发。

我们在设计时，有一种情况我们在做好一个布局后，需要把背景色给隐藏掉，同学下意识点击小眼睛隐藏，隐藏是不能被选中，我们此时只能把去调整低块的透明度为0%，透明度调整为0%是可以被选中的。(注：上传第三方也是如此，如：蓝湖、摹客）

最后

以上是是多年和开发同学交流的一些经验，因为在工作中遇到这样的一些问题，给大家做个分享，我们不光把设计稿做好看，体验正确，我们需要向上了解产品，向下了解开发，才能更好协同。
从前端视角出发，了解前端开发的布局方式，更有效的和开发进行沟通，减少因为设计还原度的问题发生的‘友好交流’，希望能增加各位同学和开发同学的优化关系，让工作环境更加和谐，晚上睡觉更加‘安稳’。

同学们给个点赞和关注哦～～～～