05､投影
阴影作为一个重要的视觉元素，让主元素和其他元素从背景中“弹出”并拥有深度，更好地将信息层级呈现给用户。（当然，我们今天的主要目标并不是教大家如何制作阴影，而是关于弥散阴影如何更好的与开发人员对接，还原给用户更好的体验）
大家做的弥散阴影在与开发人员对接的时候是否遇到过以上痛点：
卡片位置偏移、文案对不齐、错位、弥散投影的颜色过浅或过深等等一系列问题？
面对这些实现的痛点，以及与开发人员沟通时出现的各种问题，我们又该如何解决呢？
结合自己实际的工作经验和与开发人员沟通的心得，实现弥散投影的方法，可以通过两个方法实现：
1. 切图对接开发人员；
2. css代码实现。
1.用切图与开发人员对接
这个时候需要设计师和开发人员都比较细心，因为切图也有一些弊端，因为每个卡片都使用切图的话，会使开发的包变大，可能会出现加载慢，闪退等情况，这些体验也是很糟糕了。所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。
2.前端会首选用css代码实现弥散阴影效果
常规情况下，效果都比较好，但是也会遇到一些遇到异常情况，比如不规则形状，通常用代码也比较复杂，这个时候需要提前与开发人员沟通切图情况，避免后期一些问题。
代码实现教程链接： http://www.gaoquanquan.com/archives/162
总而言之，在做设计的过程中，我们需要更好地理解下游的工作，达到一个高效的沟通。不管是哪一种方法，没有对错之分，关键是要懂得“权衡利弊”，提前与开发人员沟通到位。只要是适合自己公司项目且能够高效还原设计稿的方法，都是值得一用的。
06､总结
为了更好的解决设计还原度问题，需要注意以下几点：
1、元素位置
使用盖楼思维进行设计并模块化标注设计稿，在输出明确清晰的标注的同时单独标注出易引发歧义的元素，以减少还原度误差；
2、组件间距
在设计开始前确定最小单位网格，并使用倍数原则确定常用间距，保证适配时各元素间的准确性，减少开发复杂度；
3、图标
根据图标盒子的尺寸进行切图与标注，以便后期开发；
4、分割线
标注中需要说明分割线在不同机型下始终保持1像素高度；
5、文字
由于开发环境下文字上下是有padding高度的，所以设计时需要手动修改行高为开发环境下的默认行高；适配多行文字时，确定好文字左右页间距，内容部分弹性拉伸即可；
6、投影
常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。
优秀的设计离不开开发人员的落地支持。作为设计师，协同开发人员完成设计落地也是工作中重要的一环。做好以上几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。
最后献上我们团队研究组成员的集体照，不负我们2个月多的辛苦研究。
如果你觉得这篇文章有所帮助
一定记得分享给身边的朋友哈~
哦，对了
别忘了把「不错研究室」公众号设为星标哦
每一篇，都不错。
关于不错研究室
一个能看•直播，能看•干货的组织。一个定期推荐不错的全球设计师•行业大咖进行直播分享的圈子。一个每天分享设计干货的自媒体。每一篇都很不错
