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

前言

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

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

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

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

整篇文章分为以下五个部分：

· 位置

· 图标分割线

· 组件间距

· 文字

· 投影

一、位置

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

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

1.1、绝对位置与相对位置

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

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

1.1.1、绝对位置

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

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

1.1.2、相对位置

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

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

1.2 、位置标注的注意点

在做位置标注的时候，要有盖楼思维。什么是盖楼思维呢？

设计并列关系的模块，即相似的“楼层”，元素以模块的形式叠加成一栋楼。

在做标注的时候，通过分析元素与元素之间的相关性作出标注，标注元素位于所在楼层的位置。它能同时适用在整个制作设计稿的过程中。

比如：列表流、多个卡片或多行金刚区，只需标注某一层中元素的位置关系即可。（如下图）

1.3 、绝对位置与相对位置的标注方法

对于位置的标注，并不是把元素的坐标点、上下左右间距都标注出来。而是根据元素与元素之间的关系，决定是否标注为绝对位置或相对位置，并对其进行明确清晰的标注以便开发人员能更好更快的还原。

绝对位置的标注采用百分比标注或固定位置标注。

相对位置采用普通像素标注即可。（如下图）

相关推荐

: 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工程师之分，其实技术多多益善最好，不过小编针对不同重量级的公司进行简单介绍。