先给大家讲个场景。
年底了，公司开始赶产品上线。
上线时间紧促，导致从产品到设计到开发的时间压缩得可怜，产品改需求，设计开始哧哧改，好不容易画完图，做好标注图后，打个包丢给前端。
前端开发完后，测试小姑娘开始测试，UI拿到前端做好的页面验收还原度——WTF!!?? 这特么是自己画粗来的页面吗？果断验收不合适。前端这边委屈了，我分明是按你的设计图写的代码，为什么最后区别这么大？测试小姑娘夹在设计和前端之间，左右为难。产品要上线，视觉过不了关，怎么办？怎么办？
造成这种现象出现的原因，分析一下大概有以下几点：
从UI设计来说：
1、信马由缰，把界面UI设计当作画布任意挥洒，完全不考虑实现的难度；
2、标注图不全，太信赖前端的理解能力；
3、反复修改设计，故意为难前端。
从前端开发来说：
1、时间紧任务重，没办法一张一张看标注图；
2、没节操，想怎么写就怎么写，反正最后要上线，细不细致都一样；
3、不知道如何解决，内向不肯和UI沟通找到解决方案。
从测试角度来说：
1、测试混乱，测功能时提UIbug；
2、测试页面还原时，提UI不细致，用“请参照UI设计稿”概括一切问题。
暂且当作大家都有百分百的职业操守，这种情况出现的频率依旧很高。如何解决呢？从根本上说，这种现象的出现绝大部分原因是因为工作流程和规范的不遵守。画了一张图，以一名设计师的角度谈一谈怎样在时间紧的情况下，将页面失真降到最低。
A.设计开始前，分析所有页面，将元素归类制作一套UI kit撕逼利器（推荐用AI或者Sketch制作一个模板，方便反复使用）。
好处：
1、保持设计统一；
2、新加页面可按照已有kit拼起来（活动及专题页另谈）；
3、不必每张效果图重复标注；
4、放一张psd里，ps CC版本切图便捷。
UI kit里包含的内容：
1、出现颜色色值
2、文字样式（一套设计里文字样式最好不要超过3种，文字字号不要超过5种）。
3、控件列表（以及大小标注）
输入框样式
按钮样式（可点击样式，不可点击样式，按下样式）
表单样式
警告框样式
Tab栏样式
提示样式
进度条样式
加载样式等等…（视具体情况而定）
4、icon列表
B.间隔统一，同一页面的不同状态（例如，已留言和未留言的页面，相同区域间隔应该相同）
1、文字块间距
2、图文间距
3、标题与文字间距
4、图片间距
5、icon与文字间距
6、文字与表单间距
7、充分运用栅格系统
综上所述，最后UI设计交付给前端的文件应该包括以下几样，缺一不可
1、设计规范（UI kit）
2、界面效果图
3、标注图
4、与前端沟通后的切图文件。
说完和前端的配合，再说说和UT测试的配合。测试第一轮往往是功能性测试，以及逻辑性测试。这个时候测试和前端往往没有时间和精力去顾及UI还原。
但这个时候，测试可以测试界面布局。如果UI界面布局都有问题（背景颜色差异巨大的，该有的元素丢失），前端的页面基本可以打回重做。
开始测试页面还原应该从哪里入手？
从设计给出的建议是：文字 图片 icon 背景 线框 颜色 间距（详情见图）
UI还原任重而道远啊！
网友评论