等等

最近,在和一群设计师小伙伴聊天时,发现了一个很有意思的问题,今天拿出来与大家探讨分享一番。

起因是小A说起近段时间的工作中,发现做完视觉稿直到开发上线这个过程中,设计师没有什么可参与的,导致工作量“不饱和”,而最后上线的界面却又与视觉稿大相径庭,所以老板有些不满。特此来询问大家在这个过程中都是干些什么,如何保证最终的上线具备高还原度。于是大家伙你一言我一语的讨论开了——小B提到了测试阶段的视觉验收,但随后又说到,为了保证项目进度,开发往往优先修改功能性bug,然后才会来考虑样式问题,但最后往往已经没有了时间,只能等下版本再改,如此滚雪球一般,问题越积越多;小C说到,为了减少验收环节的工作,前期在切图和适配标注时就应该尽可能详尽,避免反复修改增加开发的工作量,但这种做法又会导致“外行”觉得设计师效率不行,就几个页面要设计那么久……小D表示自己才是最惨的那个,做完的视觉稿源文件直接丢给了开发测量切图,最后上线有问题却要他来“背锅”。

这里面除了小A刚入行半年,其他几位都是工作了2-3年的设计师。我仔细询问了他们完成视觉稿之后的工作流程,发现都是存在些许问题的。比如小B,在前期的适配标注和切图阶段,都是通过插件自动生成的,才会导致最后验收的环节问题多多;小C在标注切图的时候,花了过多的时间(有些是无效工作,有些可以与开发同步进行),这对于项目进度来说是致命的;小D就更不用说了,完完全全把自己的“孩子”丢给了别人……

以上这个故事是为了说明,从完成视觉稿到最终的上线,作为设计师的我们还有许多工作需要进行,并且这些工作中有不少“坑点”需要我们注意。我按流程将它们分为了5步:适配标注、切图、制作Demo、跟进开发、验收。今天先来简单讲讲适配标注和切图。

 

目录

1、标注(适配)

2、切图

3、小结

 

标注(适配)

相信很多设计师都知道做完视觉稿之后需要标注,但其中有不少仅对他所设计的这个尺寸进行标注,忽略了其他尺寸的机型。他们认为适配到其他机型是程序员的工作,与自己无关。其实这也不能怪他们,毕竟现在的培训班(无论是线下基础班还是线上提高班)对适配这一块的内容实在涉及甚少,导致给大家造成一个错觉——适配不重要。

那么适配到底重不重要呢?你可以决定你设计稿的尺寸,但你无法决定用户的屏幕尺寸,你要给用户看的是在各个不同屏幕尺寸下的界面,而不是你的设计稿。那么你是愿意每种尺寸都做一套图呢,还是愿意用适配去解决这个问题?相信大家都会选择后者。但又有人说了,即使是适配,那也是程序员的工作,为什么要设计师来做?试问,程序员该如何“猜透”设计师的意图呢?猜中还好,如果没猜中,重复工作损失的时间成本远远大于将适配标注清楚的时间成本。因此,与其赌博,不如多花一点时间,寻求更稳定的结果。(关于设计师为什么要懂适配,更详细的内容可以移步海边来的设计师的文章《界面落地效果差,多半因为设计师不作为》,其中腾讯TIM的案例就很好地说明了程序员是如何“猜”设计师意图的。)

说完了适配的重要性,再来简单地讲讲适配原则

首先要明确一点,粗暴的放大比例是行不通的。我们知道,750是2倍率,1242是3倍率,单看倍率,他们之间是1.5倍的关系。但实际上1242/1.5=828,相比于750还多了78px,这多出来的78px该如何安放就是适配需要考虑的问题。

其次,将要适配的尺寸基于同一倍率。750@2x与1242@3x一起做比较的话,难免会混乱。像上文那样换算之后就很好理解了,750和828同样是2倍率,要适配的就是那78px。至于828@2x到1242@3x,无论尺寸还是倍率都正好是1.5倍的关系,直接放大即可。简单总结下,750要适配到1242,是750-828-1242这么个过程(当然750-1125-1242也是行得通的),其他尺寸原理相通,就是——先统一倍率,再进行适配。

紧接着,我们该如何处理那多出来的“78px”呢?主要有以下三种方法:等比缩放、弹性控件、文字流自适应。

简单理解下:等比缩放适用于间距不变,本身大小随屏幕变化而变化的元素;弹性控件适用于本身大小不变,间距随屏幕变化而变化的元素;文字流自适应则是一行所显示的文字个数随屏幕变化而变化。在实际应用中,可能是三种方式组合应用,大家可以逐一拆解至最小单元再运用以上三种方法。

了解了适配的重要性,并且也具备了一定的适配能力之后,我们就要开始动手做了。那么我们设计师不可能亲自上阵敲代码,我们要把我们的适配想法传递给程序员只能通过标注,标注时,谨记一点——不要标死。将固定不变的标注出来,随屏幕变化而变化的则不需要标注。这时候又有人说了,我的标注稿程序员根本不看怎么办?比如下图这样的,看起来确实费劲……

那么我们有什么办法可以让标注稿更清晰一点呢?首先,相同的地方不要重复标注,比如左右两边的页边距,标注一次即可;其次,像列表页面,每项内容样式一致,但其中的标注元素又相当之多,我们就可以将一项内容单独拎出来放大标注,避免在大页面上看起来密密麻麻;最后,还可以将适配的标注与普通的标注分两套交与程序员,适配的标注前面已经讲过,就不再赘述,普通的标注就是指元素颜色及文本的大小和颜色,这块内容也占了标注稿上相当大的面积。

标注适配且告一段落,想要了解详细的适配原则及方法,欢迎大家移步橙子的橙子的文章《关于适配这件小事的前世今生》。当然,如果你希望更深入的学习适配,也可以移步海边来的设计师的主页,里面有一系列的适配教程。

 

切图

之所以把切图放在标注之后,正是因为最前面提到的小C的情况,在切图标注上花了过多的时间,而其中切图就是一项可以与开发同步进行的工作。在开发资源紧张的情况下,可以将页面布局先行设计标注完成交与程序员进行开发,随后设计师再将剩下的切图补上。说到这儿可能又有小伙伴要问了,切图不是直接用设计软件就可以导出嘛,为什么会费时间呢?那是因为切得不严谨,或者说是偷懒了。

首先来看一下大小,相同功能模块的图标切图大小要保持一致,比如同是tab栏或者同是金刚区的图标,切图忽大忽小可能对视觉上没什么影响,但对程序员来说就要多写好几行代码了。此外,切图的长宽尺寸必须是偶数,最好是4或者8的倍数,因为要考虑倍率变化后(*1.5)有可能变成奇数,无法居中或等分的情况。

接着来看下命名,有一种命名方式相信大家在很多地方见过,模块_类别_名称_状态.png。但在实际应用中,仅保留名称和状态即可。因为程序员一般是分模块进行开发的,为了便于程序员找到相应模块的切图,我们会把切图按模块放在不同的文件夹中。因此,切图名称中的“模块”就显得多余了。同样,按模块分类后,一个模块下的切图也不会有很多,也就没必要区分“类别”了。

再来看下不同倍率下的切图,这也是最容易疏忽的地方。首先,带圆角的切图在倍率转换时,圆角也要相应增大,软件自动导出的圆角不会变化,所以需要重绘;其次,@2x下如果是奇数像素宽的描边,软件自动导出@3x的时候会出现半像素的虚边,所以也需要重新绘制。综上所述,@2x转@3x并没有什么可行的快捷操作。

最后,如果有不确定是否需要切图的地方,比如渐变、阴影等,可以与程序员进行沟通,确定实现方式之后再行交付。

 

小结

简单小结一下本文的内容:

  • 1、标注(适配):适配标注是为了让程序员更好的理解我们的设计意图;先统一倍率,再进行适配;适配主要有三种方法——等比缩放、弹性控件、文字流自适应;标注稿尽可能保证完整且清晰。
  • 2、切图:同一模块的切图大小保持统一;按模块做好文件夹分类,命名采用“名称_状态.png”的格式;@2x转@3x,部分需要重绘。

本期内容且告一段落,下期内容将继续说说后面的几步(制作Demo、跟进开发、验收),希望感兴趣的小伙伴持续关注我们哦。

 

参考

海边来的设计师——《界面落地效果差,多半因为设计师不作为》

橙子的橙子——《关于适配这件小事的前世今生》

海边来的设计师 UI中国个人主页

 

原文地址:海盐社(公众号)
作者: 海舟

转载请注明:学UI网 » 从完成视觉稿到上线,你还需要做这些(上)

登录收藏
 
你可能喜欢的:
如何做一个有战略的产品经理?如何做一个有战略的产品经理?
产品经理到底是什么?产品经理到底是什么?
案例解析,UI设计中的视觉引导技法!案例解析,UI设计中的视觉引导技法!
设计师除设计外所需要具备的能力设计师除设计外所需要具备的能力
[案例解析] UI设计师如何用产品思维做设计![案例解析] UI设计师如何用产品思维做设计!
交互原型设计基础交互原型设计基础
UI设计师如何从业务需求出发做设计UI设计师如何从业务需求出发做设计
想快速入门UI该怎么做?想快速入门UI该怎么做?
UI进阶产品设计师之交互设计UI进阶产品设计师之交互设计
想提高面试通过率?回答好这10个问题征服面试官想提高面试通过率?回答好这10个问题征服面试官