如何有效标注才能高度还原设计稿？（五）

五、投影

阴影作为一个重要的视觉元素，让主元素和其他元素从背景中“弹出”并拥有深度，更好地将信息层级呈现给用户。（当然，我们今天的主要目标并不是教大家如何制作阴影，而是关于弥散阴影如何更好的与开发人员对接，还原给用户更好的体验）

大家做的弥散阴影在与开发人员对接的时候是否遇到过以上痛点：

卡片位置偏移、文案对不齐、错位、弥散投影的颜色过浅或过深等等一系列问题？

面对这些实现的痛点，以及与开发人员沟通时出现的各种问题，我们又该如何解决呢？

结合自己实际的工作经验和与开发人员沟通的心得，实现弥散投影的方法，可以通过两个方法实现：

切图对接开发人员

css代码实现

5.1、用切图与开发人员对接

这个时候需要设计师和开发人员都比较细心，因为切图也有一些弊端，因为每个卡片都使用切图的话，会使开发的包变大，可能会出现加载慢，闪退等情况，这些体验也是很糟糕了。

所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。

5.2、前端会首选用css代码实现弥散阴影效果

常规情况下，效果都比较好，但是也会遇到一些遇到异常情况，比如不规则形状，通常用代码也比较复杂，这个时候需要提前与开发人员沟通切图情况，避免后期一些问题。

弥散阴影教程链接：

代码实现教程链接：

总而言之，在做设计的过程中，我们需要更好地理解下游的工作，达到一个高效的沟通。不管是哪一种方法，没有对错之分，关键是要懂得“权衡利弊”，提前与开发人员沟通到位。只要是适合自己公司项目且能够高效还原设计稿的方法，都是值得一用的。

六、总结

为了更好的解决设计还原度问题，需要注意以下几点：

6.1、元素位置

使用盖楼思维进行设计并模块化标注设计稿，在输出明确清晰的标注的同时单独标注出易引发歧义的元素，以减少还原度误差；

6.2、组件间距

在设计开始前确定最小单位网格，并使用倍数原则确定常用间距，保证适配时各元素间的准确性，减少开发复杂度；

6.3、图标

根据图标盒子的尺寸进行切图与标注，以便后期开发；

6.4、分割线

标注中需要说明分割线在不同机型下始终保持1像素高度；

6.5、文字

由于开发环境下文字上下是有padding高度的，所以设计时需要手动修改行高为开发环境下的默认行高；适配多行文字时，确定好文字左右页间距，内容部分弹性拉伸即可；

6.6、投影

常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。

优秀的设计离不开开发人员的落地支持。作为设计师，协同开发人员完成设计落地也是工作中重要的一环。做好以上几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。

相关推荐

: 2020年Java程序员就业难吗？

2020年Java程序员就业难吗？2020年无论是对于企业还是个人都是比较艰难的一年，在这年因为疫情有些企业扛不住了，倒了下来，有些人呢！失业啦！所以2020年对于大家来说都比较艰难，但是学习Java成为Java工程师就业会好转吗？Java工程师好就业吗？饱和了吗？

: Java工程师是干什么的？

Java工程师是干什么的？我们经常听到Java工程师就业薪资高，都想通过Java培训成为Java工程师，但是具体到Java工程师是做什么的可能在参加Java培训班之前我们并不清楚今天小编汇总一下Java工程师是做什么的。

: Java工程师前途在哪里？

Java工程师前途在哪里？有些小伙伴参加完Java培训成为Java工程师，现在做的还不错，有些小伙伴参加完Java培训班直接转行了，现在Java工程师的前景到底怎么样？还好吗？下面小编分析一下Java工程师的前途如何？

: Java学到什么程度可以就业？

Java学到什么程度可以就业？我们参加Java培训无非就是为了就业，很多零基础学习Java的小伙伴特别想了解自己学习Java技术到什么程度就可以就业啦，其实不同的公司对于Java程序员的要求是不一样的，而且还有初级Java工程师，高级Java工程师之分，其实技术多多益善最好，不过小编针对不同重量级的公司进行简单介绍。