《从零开始做交互》读书笔记
2016年5月11日

UI还原测试及标注思路心得

 

先给大家讲个场景。

年底了,公司开始赶产品上线。

上线时间紧促,导致从产品到设计到开发的时间压缩得可怜,产品改需求,设计开始哧哧改,好不容易画完图,做好标注图后,打个包丢给前端。

前端开发完后,测试小姑娘开始测试,UI拿到前端做好的页面验收还原度——WTF!!?? 这特么是自己画粗来的页面吗?果断验证不合适。前端这边委屈了,我分明是按你的设计图写的代码,为什么最后区别这么大?测试小姑娘夹在设计和前端之间,左右为难。产品要上线,视觉过不了关,怎么办?怎么办?

造成这种现象出现的原因,分析一下大概有以下几点:

从UI设计来说:

1、信马由缰,把界面UI设计当作画布任意挥洒,完全不考虑实现的难度;

2、标注图不全,太信赖前端的理解能力;

3、反复修改设计,故意为难前端。

从前端开发来说:

1、时间紧任务重,没办法一张一张看标注图;

2、没节操,想怎么写就怎么写,反正最后要上线,细不细致都一样;

3、不知道如何解决,内向不肯和UI沟通找到解决方案。

从测试角度来说:

1、测试混乱,测功能时提UIbug;

2、测试页面还原时,提UI不细致,用“请参照UI设计稿”概括一切问题。

暂且当作大家都有百分百的职业操守,这种情况出现的频率依旧很高。如何解决呢?从根本上说,这种现象的出现绝大部分原因是因为工作流程和规范的不遵守。画了一张图,以一名设计师的角度谈一谈怎样在时间紧的情况下,将页面失真降到最低。
A.设计开始前,分析所有页面,将元素归类制作一套UI kit(推荐用AI制作一个模板,方便反复使用)。(撕逼利器)

好处:

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 背景 线框 颜色 间距(详情见图)

(转载请注明)

发表评论

电子邮件地址不会被公开。 必填项已用*标注