守望者

@胡桃子:我们公司这两天进行了产品 1.5 IM 项目的开发,项目的研发还是很顺利的,但让我崩溃的是设计验收环节。开发出视觉问题不在某一方,每个角色都有各种各样的问题。今天就想来客观的陈述一下整个过程,希望在下次进行项目推进的时候可以有所改进。

我们遇到的问题及解决方案

前提:

之前我们是没有设计验收环节的,首先检讨一下我们设计的问题,为了图自己省事,直接用扔进蓝湖就交接给到技术了,对于有适配需要的地方也没有进行单独的标记和说明。

所以技术同学就会按照自己对页面的理解进行布局,到验收的时候设计同学才发现不是自己想要的结果,这个时候要改动的话就会比较困难,因为一开始的框架就不对,技术也没有时间重新写一遍,所以就会有很多问题被搁置。

现在对设计工作规范进行调整,所以就有了这次正式的设计验收环节。

验收处于项目设计阶段的最后一步,之所以不受大家的重视,我觉得主要有两个原因:

  • 一个是对程序员极其自信, 认为对方能Get到自己所有的点, 会完全按照设计稿来,
  • 另一个是设计师自己没有验收的意识, 觉得最后效果不好是开发的锅, 跟自己没有关系。

其实在外人看来, 开发后的效果不好,设计稿做的再完美也是白费,毕竟最后看的还是线上稿。谁也不想自己的稿子拿不出手吧…

 

一、错误的做法

1. 口头说明

在实际工作中,很多小伙伴发现了问题后,只是口头上告知开发哪里有问题需要改,这种方式很容易出现你说了 10 个问题,开发记住了 7 个,但只改了 5 个,效率不高。

还有就是搬个小板凳坐在开发旁边,指一个改一个,很影响开发的速度。

 

2. 让开发去找之前的标注稿

更有胜者,让开发自己去找、去发现问题,对着设计稿改,开发对像素并没有设计师那么敏感,我们每天都是跟像素打交道,间距、字号差个几像素,我们一眼就能看出来,所以我们需要明确的告诉他这里移动几像素,那里字号改大几像素,可以稍微改变一下方式,多站在开发的角度考虑问题。

 

二、正确的做法

1. 截图

验收的时候,我们需要把开发实现后的效果截图,将图纸调整设计稿一样的倍数,然后再去和设计稿做对比。

 

2.和设计稿作对比

我们可以直接把截图放在设计图上方,降低透明度,大致比对下,就会发现哪里不太对,然后再具体标注需求修改地方的参数。

这其中也有几个小技巧,当设计稿做的间距是 48px 时,开发实现后的效果是 30px ,这个时候我们可以直接标明间距缩小 18px ,开发也只需要在原来设置的参数上加或者减 18px ,而不用再去算参数了,当图标切图错误的时候,直接注明该图标需要更换,图片比例不对的时候也一样。

 

三、验收需要注意的问题

1、分割线

间隔线不管在几倍的机型下,都应该保持 1px 的线条高度,但是很多程序员没有注意这个,或者说设计师在开发前没有特别说明,结果就是在 2 倍机型下是显示 2px ,3 倍机型下显示 3px。

这个问题很容易出现也很容易避免,告诉技术同学线条适配规则即可。

 

2、文字截断范围

当文本左右两边有内容的时候,我们需要标注文字可显示的范围,也就是说它最多能显示几个字以及文末的现实方式。

 

3. Android加粗

Android 的系统默认字体是思源,在系统默认的字体库里只有 3 个字重,细体、常规体、和超粗字体(我的安卓同学告知的),导致的结果就是 Android 机型上的加粗字体会显得格外粗重。

有一个网传的解决方案就是 Android 字体加粗的时候减少一个字号,这样页面才能显得平衡。

 

4、行高运用的差异

另外,还有一个常见的问题,就是 iOS 在默认状态下,行高是和字号相同的,但是安卓的行高如 Skecth 一样会大于字号。

所以经常会导致没有定义明确的行高,两个平台使用同一套设计时实现的效果不一致。

这种误差是在可接受范围内的,如果开发时间很紧的情况下,可以忽略不计。

行文本势必要使用大于字号的行高,比如一个字号为 12pt 的文本区域,行高为 20pt,那么它的顶部就有 4pt 的空白,我们需要将它上移 4pt,才能保证文字边缘和其它元素的边界是持平的。

 

5、适配问题

设计师普遍用的设计尺寸都是 750(1x为375),一些板式排版也是基于这个尺寸的,那么对于640的手机来说,某些地方就会出现排不下的情况,这个时候是需要设计师在做设计稿的时候就考虑到这一点,并给出适配规则。在后期验收的时候也需要特别去注意这个问题。

设计师需要懂得适配规则: 《一文彻底看懂UI设计适配与落地(下))》
 

6、沟通不到位导致的问题

有一些页面有很多种实现方式,如果前期没有跟开发沟通清楚,就会导致最终实现的效果存在误差,比如下方这个页面,单给一张静态图,开发根本不知道设计师想要的实现方式是什么,固定间距还是控制左右距离,中间自适应。最后很大可能就会按照自己的理解去做了,导致出现重复返工的现象。

 

7、验收其他问题

设计师还需进行其他测试:流程是否走通、交互状态是否完整、是否存在卡顿情况、是否存在BUG、交互及样式在不同手机机型下显示是否正常,让设计方案能够很好的展示给用户。

 

总结

在后期视觉验收的时候,我们可以换位思考,把自己当做程序员,站在他们的角度去思考问题,怎么样的验收方式会更方便开发修改,减少重复返工的次数,情愿验收标注的时候多花 10 分钟,也要把修改意见写详细,帮开发节省时间,反过来也帮我们自己减少了二次验收的成本。

以上就是个人小小的经验,希望可以给大家一些启发和借鉴,当然如果有更好的解决方式也欢迎留言,非常乐意倾听大家的意见,期待更好的解决方案~~

 

原文地址:胡诌青年(公众号)
作者:胡桃子

转载请注明:学UI网 » 项目总结 | 如何高效地进行设计验收

登录收藏
 
你可能喜欢的:
设计师创业做自己的产品,总结出了这10条经验设计师创业做自己的产品,总结出了这10条经验
设计沉思录 | 如何做好“有人情味的”生活服务型产品设计?设计沉思录 | 如何做好“有人情味的”生活服务型产品设计?
设计沉思录|“下沉市场”设计美学探索:58本地版首页改版设计沉思录|“下沉市场”设计美学探索:58本地版首页改版
设计沉思录|如何做好B2B的Saas化产品?设计沉思录|如何做好B2B的Saas化产品?
【产品体验设计】-产品认知篇【产品体验设计】-产品认知篇
设计沉思录丨神奇矿游戏化探索设计沉思录丨神奇矿游戏化探索
设计沉思录 | 流量魔法师笔记之流量分发设计设计沉思录 | 流量魔法师笔记之流量分发设计
设计普惠,从这里开始 - 阿里云控制台的无障碍设计实践设计普惠,从这里开始 – 阿里云控制台的无障碍设计实践
设计万花筒|进击的盈利模式之会员体系设计万花筒|进击的盈利模式之会员体系
设计沉思录 | 到家精选服务设计实战经验设计沉思录 | 到家精选服务设计实战经验