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

一份设计稿新鲜出炉，你是不是摩拳擦掌，马上就开工了？

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

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

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

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

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

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

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

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

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

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

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

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

这只是最简单的情况，修改起来也很快，但是如果一开始你就考虑到tab的数量可能未知，从组件的角度考虑直接用flex布局就是极好的，这样无论是一个两个还是三个四个你都不需要再改了，样式的可拓展性就非常强?。

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

从整体角度，作为用户去体验

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

比如：

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

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

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

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

另外完工后也可以自己再对着前期的问题进行检视，毕竟出现过遗漏的话说明这是一个需要关注的问题。

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

转载于:https://juejin.im/post/5c0a46516fb9a049d81ba98d