记一次踩坑

下面这张图有什么交互问题吗(右边的“人员分类”部分最多有20项)?

记一次踩坑_第1张图片

嗯,好像并没有太大问题。然而...

当开发完毕走查的时候发现效果是这样的:在列表无需翻页时,下图红框里的线不存在,所以导致列表的最后一项分割线缺失,整个列表项的宽度不统一。

记一次踩坑_第2张图片

很显然,开发将列表底部的那条线(如下图红框内)看作是“中部全部人员与右部人员分类”的对齐线。在ue图上,机缘巧合下这条线不仅是列表最后一项的落地线,也是中右两部分的对齐线。所以开发小哥哥迷茫了,就按照自己的理解执行了。

记一次踩坑_第3张图片

走查期间ue依然没有发现有问题,请求开发加上下图红框里应有的列表最后一项的落地线。开发说加不了,中部与右部列表的不定性,会在机缘巧合下导致下图红框里的线和中右两部分的对齐线的距离很小很小,或者趋于重合,到时候这里看起来会像bug。

记一次踩坑_第4张图片

反应了半天终于发现这个设计在开发适配上存在问题。

情况1:需要翻页,最后一页项较少时;

记一次踩坑_第5张图片

记一次踩坑_第6张图片

情况2:需要翻页,右边部分高于中间部分时;

记一次踩坑_第7张图片

情况3:(不)需要翻页,中间部分高于右边部分时;

记一次踩坑_第8张图片

......

还有很多其他情况,不一一举例了。图中需不需要预留距离,哪里需要预留距离,预留多少距离,以中部还是右部为标准预留距离...由于ue给稿之前忽略了或者没有想清楚,开发小哥哥表示自己很委屈很迷茫。

为什么会这样呢?为什么可能的情况这么多呢?

1.未考虑清楚中间部分和右边部分的高低关系

2.未考虑极端情况(例如右边部分的极限情况)

3.被巧合假象迷惑

4.翻页逻辑出错

......

记一次踩坑_第9张图片
记一次踩坑_第10张图片

1.修改了中部列表的条数(由10条变成20条,图中不方便展现),不会出现有页码控件且右部列表总高高于中部列表总高的情况

2.调整页码控件逻辑,并起到隔开中部列表最后一项落地线和中右两部分对齐线的作用

3.规定两个距离,以列表总高较高的列表为标准,列表最后一项落地线与中右两部分对齐线为固定距离1

ue重新给了图,较为顺利地完成了再次开发,踩坑结束

罗里吧嗦终于说完了,我估计大家都没看懂,我已经竭尽语言表达所能了

看懂下面这个注意事项就好:

1.作图尽量避免机缘巧合的情况

2.作图时想清楚怎么内容适配,如何开发并使开发逻辑简单,交图之前撸顺

3.考虑各种极端情况和处理方案

4.尽量选择所需考虑情况较少的设计方案

5.避免模棱两可,尽量不要让开发思考

......

欢迎补充和吐槽~~~

记一次踩坑_第11张图片

你可能感兴趣的:(记一次踩坑)