来源：片点Uidea，已获授权

前言

优秀的设计能够有效地传达产品价值，但也离不开技术的落地支持。随着市场环境变化与行业水平的提升，越来越多设计师开始意识到：设计稿还原的重要性

但是在配合过程中，设计与研发思维的偏差也逐渐体现：“这个需求做不了，那个间距调不好”……设计稿落地后，往往要经过多轮测试和“小板凳”对接，才能达到预期效果。

可以说，在每一位UI设计师的成长过程中，设计稿还原，是一个必定经历 且 难以解决的问题。

如何更好的实现设计还原度，减少重复工作呢？不妨试试换个角度，学习用开发的思维来做设计。

目录：

位置图标分割线组件间距文字投影

一、位置

​

“元素位置”的标注是设计验收时与开发人员的必争之地。

面对它的时候，设计师应站在开发的角度，用动态视角的思维，对界面中元素位置进行合理的动态布局，输出正确的位置标注，减少开发人员多次返工的窘境。

1.1、绝对位置与相对位置

我们常说的“位置”是代表元素在界面内X轴与Y轴的坐标，同一元素会因为在不同的机型中呈现出不同的位置，大致会分为两种：1. 绝对位置；2. 相对位置。

就如初中物理学到的“运动与静止的相对性”，一艘船在海面航行，海岸是参照物，船相对于海岸是相对位置，海上的灯塔是绝对位置。

1.1.1、 绝对位置

绝对位置：屏幕是参照物，元素的位置相对屏幕固定，不会受其他元素的影响。

比如：常见的导航栏、底部Tab栏，吸底按钮和悬浮按钮。

1.1.2、 相对位置

相对位置：元素位置不固定，会随着页面尺寸或其他元素的影响而改变。

比如：支付宝的列表流。列表的间距固定，当删除一个列表时，下面的列表位置自动上移。（如下图）