前端开发面对设计稿的相关思考

一份设计稿新鲜出炉，你是否是摩拳擦掌，立刻就开工了？

不不不，这里有坑！产品经理或者交互设计师可能更关注总体交互逻辑，视觉设计师可能更关注页面的总体美观度，而你，是要一点点实现出来的人，你更须要思考的是一些细节问题。

动手前来一波提神醒脑的小思考，让你事半功倍。

从元素角度，检查缺失的样式

视觉稿上常常会缺失一些元素，咋一看不会影响总体交互，作的时候才发现有缺漏，就须要反复沟通这些细节。毕竟设计师也不是随时有空的，因此尽可能在开工以前就把这些交互样式一次性与设计师确认好。

• checkbox/radio是否只有勾选或者未勾选的样式
• 按钮的hover/disabled样式是否缺失
• 菜单的hover样式是否与高亮样式一致
• 表单是否缺乏校验提示
• 结果页（通常是成功/失败/处理中等）是否有缺失
• 请求中或者页面加载中是否须要loading处理
• 页面若无数据应该如何展现
• ...

上面这几点，就是缺失的高频元素。此外，还须要审视的地方：

• 若不一样页面间类似的元素样式不一样，以哪处为准，尽可能保持统一，若须要不一样，与设计师沟通好需求
• 切图是否有遗漏，有时候设计师提供的由sketch导出的html文件内图标没有合并，没法直接切图，能够告知设计师切图或者拿到源文件本身动手
• ...

第一步是一个快速反应的过程，好比看到checkbox就立刻检查各类勾选状态样式是否齐全，看到结果页就核对多种状态是否齐全，这个步骤只须要快速审视页面上的元素便可。

从组件角度，判断样式复用度

拿到一份设计稿时，千万不要打开第一页就急匆匆地开始作，这样等你打开第二页就会发现，啊苍天啊！那么多元素是类似的，可是你前面都作死了，重写一份效率低，要改又很麻烦。

简单举个例子，好比某一页设计稿上顶部有两个tab，你直接width: 50%;。

然鹅，不幸的事情发生了，你打开下一页设计稿，发现这一页的tab是3个。

这只是最简单的状况，修改起来也很快，可是若是一开始你就考虑到tab的数量可能未知，从组件的角度考虑直接用flex布局就是极好的，这样不管是一个两个仍是三个四个你都不须要再改了，样式的可拓展性就很是强👍。

第二步，把前先后后的设计稿都翻阅一遍，内心大概有个底，哪里样式类似能够抽成UI组件，哪里效果复杂须要重点关注。

从总体角度，做为用户去体验

最后就是把本身当成一个挑剔又无聊的用户，来审视整一份设计稿/交互稿，把总体的流程在脑海中过一遍，查看是否在交互上有缺失的地方，提早沟通效率翻倍。

好比：

• 有修改密码的按钮却没有对应点击后的交互和样式？
• 活动页上有不少活动彩带，是否须要添加动画加强交互效果？
• 某个按钮优先级明显较高，就放到很深的层级，是否须要调整？
• ...

这里可能会以为跟第一步检查是否有缺失的元素有重复，而个人理解是，第一步是一个根据工做经验快速反应的过程，而最后这一步，是须要认真理解交互的，把设计稿/交互稿当成一个产品去体验，根据你的重构经验和做为用户的体验，把不合理的地方提出来讨论。

最后一步，不要以为你只须要把页面实现出来，交互有别的专业同事去思考。每一个人考虑的点有所不一样，这个你们共同努力的产品也会在讨论中更加丰富和完整。

思考以上问题的时候快速把问题记下来，交给产品同事或者设计师及时补充，这样就能够边开工边等着补充的内容，不会出现总体作完了却有不少细节被遗漏，须要等待的状况。

另外完工后也能够本身再对着前期的问题进行检视，毕竟出现过遗漏的话说明这是一个须要关注的问题。

其实面对设计稿的思考，无非就是站在重构的角度上，把隐藏的问题提早抛出，提升沟通效率，减小无谓的等待时间和纠结时间，工做效率天然upupup。