关于这个问题，新手设计师可能不太感冒，但四对于工作了一定时间后，开始重视前端还原度滴设计师就是个老生常谈滴问题啦，不瞒大家，窝曾经也差点被前端气出翔来，很多次。

这里窝就拿粗窝纵横我家几十年滴经验，绝壁是干滴不能再干滴货，保证大家一看就会，一学就废。

这节课主要从两个方面来讲，图层整理和分区域作图（图层整理是基础哦）。

part.01图层整理（高手可以跳过，直接看part.02）

窝发现现在不少设计师不乐意整理图层，就拿窝滴一个学生来举例，她滴图层里就几个大组，名字还是1234这种，组里面也是乱七八糟滴，也没有命名，大概就像下面酱紫：

看着这回收站一样滴图层，窝陷入了深深滴沉思，到底是窝教滴不够骚，还是她眼光太高。

可能有些童鞋觉得无所谓，自己能看懂就行了，况且整理图层费时间和精力，窝只能说，非也非也，从图层上就能反映你当时作图滴心境，你没有拿出该有滴热情和细致来对待你滴作品，这样滴设计就像流水线上生产滴一样。

图层整理也要有依据，窝滴习惯是分区域建组，例如在APP设计中，窝滴图层会像下面酱紫：

每个大分组根据实际情况会有1~2级小分组，按照窝滴习惯，总分组级数不会超过3，不然会显得有点繁琐。（这里告诉大家一个小窍门，按住Alt点击鼠标左键，可以打开/收起同级滴组）

part.02分区域作图

重点来了，有了上面滴图层整理基础后，就可以了解如何规范作图了。我举一个比较典型滴栗子，请看下图（学生滴设计）：

遇到这种设计图时，如果你滴作图不规范，辣么前端还原后就会有教大差异，主要问题就出在间距上，前端是没法像窝们一样去掌控间距滴。

要点还是在于分区域，这个部分可以分为1行标题栏（企业工作台），3×2格式滴功能区，定义好每个区域滴宽高，具体看下图（窝改良后滴）：

从桃红色滴辅助线可以看粗，工作台有单独滴一栏，下面6个功能也有单独滴区域，这样滴设计图对于前端就灰常友好（懂一点前端原理滴应该都能看出来），这就是还原度滴保障。

顺便提一哈，窝用蓝湖上传设计图（蓝湖才没给我广告费），上图中滴图标一定要切成一样大滴，记住了哈。

再举一个灰常常见滴栗子，输入框的设计，请看下图：

很多设计师在做输入框滴时候都是，一条横线就完了，虽然看起来没问题，但是，前端怎么知道你滴输入框有多高，他只能测量横线到字体滴高度，再和字体滴高度加起来，这样就难免有误差，而且最重要滴是，显得你很菜(>▽<) 

规范滴做法应该如下图：

把输入框滴高度和宽度都定义好（一个跟底色相同色滴矩形），下面再加一条横线，这就是规范滴做法。顺便再说哈，大家可以看到我滴输入框宽度跟右边滴图标是不重合滴，这样能够灰常简单滴避免输入字符过多时与图标有重合（毕竟，前端一般是不会考虑这些滴）。

好啦，这节课就到这，值得注意滴是，掌握规范滴设计只是基础，除此之外，还要完善滴注释和详细滴交互文档，配合起来才能够保障还原度，有机会滴话窝在后面滴课里会讲讲。

Powered by Froala Editor