从视觉到App:网易有钱iOS项目切图与适配实践

引言

在iOS、Android、PC Web产品开发中,有个步骤基础且重要——切图和适配。在有钱项目开发中,我们参考了诸多流行的切图和适配方案,总结了一套自己的流程和规范。下面以网易有钱iOS的开发过程为例,介绍下我们的方法。

切图工具

切图工具五花八门,比较有代表的是Photoshop+ PxCook +Cutterman 等Photoshop配合Photoshop配合标记工具、导出工具的方式;另外一种就是Mac上的Sketch+plugins即Sketch配合标记工具、导出工具。下面以Sketch+Sketch Measure+Sketch Export Generator 为例。

切图需求

传统的切图工作是由视觉设计师来完成的,提供assets(切图文件夹)的同时还提供了measurement(视觉标注 )供开发使用。这种方式在我们以前也有使用,但这种方案是有弊端的:

  1. 项目成员里通常是1个视觉搭配1个iOS开发+1个Android开发+1个PC Web\H5开发,如果是视觉来做切图(多份适配图)+标记,不仅视觉的工作量太大,而且分工饱和度不匹配。如果加上后期需求变更,视觉的工作会暴增,视觉同学不堪重负。

  2. 开发逻辑和视觉逻辑不一致。开发往往会因为切的图和自己实现的思路不一致,而需要进行二次加工或者使用workround的方案,非常别扭。如果开发不会切图,可能需要视觉回炉重新切。在我们过往开发过程中明显地感觉到:如果是从JS转为专职做页面架构的同学,他们提供的html的文件结构层级、切图等让前端开发用起来很舒服——html结构的层级是匹配实现逻辑的;相反如果是个本行就写页面架构的同学提供给前端开发的稿子,很少会有这样的优势。

在有钱项目开始不久,我们决定对传统的方式做以下调整:

  1. 视觉只需要出规范、Sketch源文件、关键标记,不需要切图

  2. 开发自行切图,具体元素具体标记

这样视觉同学只需要修改Sketch源文件,直接传导给开发同学,开发同学拿到源文件,查看标记+切图。以后需求变更,视觉也只需要改Sketch源文件和重要标记(大部分是不需要的),就可以直接传导给开发重新切图——之间衔接比较流畅。能够实施这套方案,也得益于Sketch的完善和视觉与开发之间的交流深入。

  1. Sketch比起Photoshop更适合移动端(Sketch vs Photoshop见文末参考链接)。 PhotoShop在标记方面、导出1x2x3xPDF等方面缺乏支持,还有其臃肿的体积、蜗牛般缓慢的打开速度、贪婪的吃内存等问题非常影响使用体验。让开发在切图、看标记的时候,不得不在PhotoShop、标记工具、插件之间切换,额外消耗精力;相反Sketch内置切图、标记功能,开发人员非常容易上手。

  2. 同时视觉同学也从开发这边得到了一些反馈,了解了一些常用的界面的实现原理和逻辑,反馈到视觉设计阶段,作为设计规范和设计原则并遵守。这让视觉和开发对界面布局逻辑有了些许共识,衔接更加顺畅。

下面按照工作流的方式分别说明每一步的规则和规范、同时列一些有钱中的实例,方便读者理解。

第一步——确定视觉规范和基础约定

这部分规范和约定对应传统的Spec文件夹的东西。包括但不限于以下:

  1. 约定项目需要的字体字号规范。比如,把普通字符颜色和字号分别定义为MK_COLOR_TEXT_NORMAL和MK_SIZE_FONT_NORMAL,分别对应0x555555,16f。事实上这只是基础规范。如果考虑到对iPhone和iPad的版本适配,我们后面有了编号的设计,这个编号代表了字号和颜色。不同的设备下字号是经过适配的,调用者不需要了解具体数值,如[MKStyleUtil standardLabelStyle:baseInfo withCode:MKFontStyleCode_067];能编号也得益于Sketch的TextStyle功能,在Sketch实现中,叫SharedTextStyle,精确的表达了其作为规范化的工具的用途。

    图1. 视觉规范,图示为编号为67的TextStyle

  2. 约定基础原则。这些原则是开发是否能够在后期快速、准确、高效切图,实现视觉到app转换的关键。如:

    1. 约定Sktech开发以Rendered Pixels的尺寸来做,如750X1334,而不是375X667。缺点是,Sketch在导出的时候,尺寸是偏大一倍的。图2是自动生成的导出选项,偏大,图3是正确的导出选项,需要手动调整。

      图2. 错误的,大一倍的导出选项

      从视觉到App:网易有钱iOS项目切图与适配实践_第1张图片

      图3. 正确的,导出合适图片的选项

    2. 所有元素的尺寸必须为偶数。
      这个约定可以有效避免当元素位置为奇数的时候出现毛边或者锯齿。具体原因是,图片元素在渲染时,元素边界不在物理像素边界上时,该元素会拉伸或者移动到物理像素边界。长宽是奇数X偶数的图片,如果旋转转90度或270度,也容易出现锯齿。

    3. 字符元素不要有padding,他的高宽应该完全是字符本身的字体和字号来自动撑开的。
      这个规范的需求来自于,当需要确定字符和父元素或者兄弟元素间距的时候,使用option+click显示的尺寸数值或者安装measure插件之后ctrl+shift+3出现的尺寸数值,可以直接在代码中使用。

      从视觉到App:网易有钱iOS项目切图与适配实践_第2张图片

      图4. Sketch Measure插件测量元素尺寸和边距的示意

    4. 良好的分组。
      如果视觉的设计是边框+阴影+中间的小树是一个整体,那么视觉应该将这些元素作为一个分组。分组不仅让视觉在设计的时候可以作为一个整体复用,也方便开发快速切图——开发只需要选择边框,就能选择所需的元素。这里还有个特殊情况,如果视觉实现的效果是用自己特殊的字体字号设计的,视觉会使用Sketch的Text on Path技术,将其转化为一个图片。这样开发不需要安装这种字号也可以显示出来,非常棒。良好的分组在使用measure插件的时候,control+shift+3也会生成合适的边距。

    5. 基础约定中的多态变化。 按钮会有normal,disabled,selected,highlighted等状态。视觉和开发约定:文字的disabled是normal的0.5透明;一组元素的disabled是normal的0.2透明。这个0.2透明通常是一个背景颜色为#000000的视图元素覆盖到一组元素的上面,实现disabled效果。
      图5中,如左图是正常状态,右图是在左图的基础上加了一个0.2透明的黑色图层。下图还示例了一个有旋转的图层,切图的时候,有以下原则:如果不涉及到动态旋转,在切图的时候就切出带旋转的图片,目的是避免运行时进行旋转计算,消耗性能。有了disabled的约定,很多按钮和图层的样式都不需要视觉出disabled的效果(实际中还是有例外)。有了基础的约定,减少视觉和开发的沟通时间,在效果上也保持整个App的一致性。切图的第一原则:能不切就不切。

      从视觉到App:网易有钱iOS项目切图与适配实践_第3张图片

      图5. 一组元素的normal和disabled效果对比

    6. 组件之间,一定要有规则的对齐方式。
      左对齐、右对齐、居中、垂直居中、顶部对齐、底部对齐。组件之间的间距可以是任意数值,但组件和屏幕的边距应该是一致的,如30px。

第二步——视觉和开发的协作

在以前的旧项目开发流程中,为了减少沟通的摩擦,我们把视觉、交互、开发等资料都引入了一个叫一览query的工程里,打包为一个web服务,在内网使用。这个工程里包括axure交互稿的html版本、视觉稿PSD文件、开发中使用的第三方接口(txt文件,word文件),还有项目组的项目列表和对应负责人一览。交互将导出的html上传到query服务器,生成一个链接,其他人只需要访问这个链接就可以看到最新的交互稿,而且是实时的,不会出现交互和开发看到两个不同版本的问题。

以前是视觉做出一个效果,分别导出PNG和PSD,PNG作为给产品和QA等的参考,PNG的文件由视觉以iCloud里图片共享的方式,供QA、产品使用,PSD文件以点对点的(邮件或者POPO)方式给开发。后期使用过有道云协作共享PSD。到了Sketch时期,我们又使用了百度网盘共享的方式。百度网盘+Sketch文件,协作起来容易的多,一是百度网盘可设置为自动同步,没必要每次都手动去sync,二是Sketch文件不大,传送速度也很快。

但是,Sketch里一个Page包含了若干的artBoard,这些artBoard分属不同模块,所以是大家一起共享这个文件。这时候一定要关闭Sketch的 autoSave功能,不然一定会出现一个视觉文件的多个backup都在网盘的情况。

所以最佳实践是百度网盘+sketch without Auto Save + iCloud的图片共享。

说到视觉和开发的协作衔接问题,不得不称赞Sketch Measure插件提供的Spec export功能。它的理念:视觉面对Sketch源文件,而其它人(iOS,Android,PC Web,产品,QA)直接面对Spec export导出的html文件。既然是html文件,自然可以跨平台,带来的优势是——只有视觉需要购买Sketch软件,其它人都只需要浏览器。开发可以在export的html文件里除了可以查看视觉效果外,还可以看元素的尺寸和间距、元素文字内容、radius、填充色等,还可以导出图片。这意味着什么?一个iOS开发完全可以拿HTML文件代替Sketch,因为开发需要的东西都可以在html文件里找到。又可以引入到我们的query系统,提供在线预览功能,是不是很棒——B/S 模式的精髓!

从视觉到App:网易有钱iOS项目切图与适配实践_第4张图片

>图6 Sketch Measure插件的导出效果图

这是理想状态。

现实中,受限于视觉分组的逻辑和开发逻辑的不一致(分组影响导出的html里可以导出那些图片),大部分的间距标记其实对开发是无用的。当业务功能较多时,视觉的工作量会变得很重,所以目前Measure插件还没用起来。但是如果是简单项目,完全可以达到这种效果——优雅而高效。如果是PCWeb项目,用Sketch的另外一个插件marketch 效果更好。Sketch Measure插件在导出的时候,只能选择当前选中的artBoard,所以如果需要传导给开发全部的artBoard,是很麻烦的。我们在Sketch Measure的基础上增加了导出选项(当前选中、当页、所有),同时优化了导出页面的左侧导航交互,增加了显示文字的StyleName的功能,这就是插件Sketch Measure Plus。

第三步——开发切图需知和技巧

>>   尺寸的确定,0padding+margin。
宁愿写magic number的margin值也要保持0padding。具体体现在文字上,如果是单行文字,设定padding=0,margin可采用居中或者和兄弟组件之间的距离为某个具体值 ;而图片呢,则切不包含空白边缘的图标 。

>>   预处理视觉稿
增加容器。视觉稿中有一些相同的东西并排显示,在视觉设计时,可能不会有容器,但代码实现层面,会用循环来输出这些元素,所以最好的方式是放到一个容器里,这样方便整体定位和更新(如removeAllSubview)等。预先判断各个元素的相对定位关系:如按照父容器定位、和兄弟节点定位、居中对齐等;确定定位关系,除了要考虑各元素之间位置有动态变化的情况外,还需要和视觉设计师沟通不同情况下的显示原则,如高度变高后,是所有元素之间的间距平分还是只是撑高某一个间距。

>>   从开发的角度看视觉元素
基本处理元素为图片、文字、容器。开发在拿到视觉稿时,第一时间关注到元素的设计要点,在编写代码的时候注意处理,这样一次run、build就能高度还原视觉稿,省去大量重复run、build时间。看到图片,关注点:

  1. 是否有圆角,是否需要切图切位圆角(一般切图包含圆角)

  2. 是否有边框,是否要切图切边框(一般切图中包含边框)

  3. 是否半透明

  4. 图片和四周的关系(固定边距或者居中)

而看到文字,关注点:

  1. 字体颜色、字号、字体粗细(font-weight)

  2. 在容器中的对齐方式(居中,居左,居右)

  3. 是否半透明

  4. 图片和四周的关系(固定边距或者居中)

  5. 多行文字还需要注意行距

关于容器,关注点较少:

  1. 是否圆角。

  2. 是否边框

  3. 容器高宽是否自适应。

  4. 背景色

  5. 补白(这个很重要也容易被忽略)

举例说明拿到视觉稿,如何将其分解为一个个小组件,用代码实现。

下图的图分别是理财指南的三种不同情况的视觉稿。当有红包的时候,中间位置被撑开,下半部分向下移;在iPhone5以下中显示,警告文字是两行。

从视觉到App:网易有钱iOS项目切图与适配实践_第5张图片

图7没有红包信息, ‘苹果公司……’的什么没有换行

从视觉到App:网易有钱iOS项目切图与适配实践_第6张图片

图8 有红包信息, ‘苹果公司……’的什么没有换行。

图9 没有红包信息, ‘苹果公司……’的有换行(实际上是iPhone4、5的情况)。

分析一下各个元素的之间的关系。不同的人对各个元素的层次划分,归属关系是不一样的,步骤:

  1. 确定元素个体。分解如下,如果是没有红包则显示编号3‘的文本元素,有红包则显示编号3的文本元素:

    图10 元素分解图,4是自行添加的元素,用来管理3个产品的容器。

  2. 确定元素的范围。
    注意按照上面的原则,每个元素的尺寸都只包含自己,没有padding。其中3个产品外面的绿色框图(即元素4)是为了代码实现时方便定位需要的容器,视觉稿里是没有的。所以有了以下的区域划分:

    图11 各个元素区域划分图

  3. 确定元素的边界之后需要确定元素的定位。
    分析到会有没红包和有红包两种显示效果,差别在于整个cell的高度。元素1、2保持对容器顶部对齐,元素8保持对容器底部对齐;元素9是一类元素,和视觉沟通之后,定位原则是:左右和屏幕之间的距离固定,元素之间的间隔相同(之所以没有说固定的值是因为后面有iPhone5,iPhone6,iPhone6P,iPad等端适配)。而元素5、6、7是9的子元素,其中5顶部和9对齐,6顶部对齐5的底部并偏移,7顶部对齐6的底部并偏移。所以有了以下尺寸标识:

    从视觉到App:网易有钱iOS项目切图与适配实践_第7张图片

    图12  元素定位图,边距。

图示中,没有标识横向约束的,表明横向宽度和父容器等宽,居中对齐或者左对齐。如元素5、6、7是和父容器等宽;8和父容器横向有30px的margin等。

可能其他人会有这样的分组。 将1、2、3作为一组,让他们有一个父容器10,让容器10、4,8作为兄弟节点,并且10、4、8元素依次向下布局。这样带来的问题是,如果有红包信息,需要撑开高度,那么需要修改容器10的高度,同时为了向下移动的部分能够显示完整,还需要修改Cell的高度。而目前图示的分组(没有包装1、2、3为容器10,并且4、8向下对齐),带来的好处是只需要修改cell的高度,就可以实现视觉所示效果。

第四步,适配

有了素材有了尺寸,下一步是代码实现,你必须面对一个问题,适配。

如果你还没有感受到适配是个大问题,那么这个图会让你改变想法。

从视觉到App:网易有钱iOS项目切图与适配实践_第8张图片

图13 iPhone尺寸大全

从视觉稿到一个可拿在手上触摸的APP,需要处理(iOS7+iOS8+iOS9)*(iPhone4/5+iPhone6+iPhone6P+iPad)种情况(虽然真正需要处理并没有这么多)。基本适配方案如下:

  1. 文字字号大小,以iPhone6为准,iPhone5=iPhone6, iPhone6P = iPhone6*1.5,特殊地方特殊处理图片元素。素材,使用1x2x3x作为对应设备使用的图片;尺寸,在不同的设备里有不同的尺寸,图片相应等比缩放。

  2. 对齐和间距。 尽量居中对齐,规范间距(如所有的tableView的cell高度是一致的,只有两种高度),总结起来说,固定不动项,自适应空白。

  3. 不适配。典型的,所有元素和屏幕的边距固定为30px,颜色不适配。

说到图片的适配,这里需要说一下PDF格式的assets,据说可以只切一份PDF的图片而不需要3份。从xcode6开始支持以1x的尺寸切出PDF矢量图,xCode在complie的时候,生成对应的1x2x3x的PNG图片。 经过我们测试结果发现,毛刺严重,而且这篇文章Why I don’t use PDFs for iOS assets(https://bjango.com/articles/idontusepdfs/)也印证了目前不适合用pdf来代替1x2x3x的图片的结论。在查阅了一些资料之后,还发现一些其他限制:

  1. pdf的图,不能使用slicing(显而易见)

  2. SVG或PDF矢量格式的资源,这种方式要额外消耗手机的计算资源,特别是在界面跳转时有转场动效的情况下(未验证)

所以我们还在使用sketch export 来导出3份PNG图,如果读者有更好的方案,欢迎和我们分享交流。

代码层面适配是如何实现的呢?

  1. 文字字号在不同的设备下有不同的大小。所以我们为某种类型的字体,设置编号。如图示中的字体被编号为64,这个编号约定了字体和字号(不包含对齐方式)。

    图14 Sketch里的TextStyle,用于编号

    它代表了这个文字字号的编号是64,颜色编号是64。实际上字体编号64不是一个固定的值:可见字体适配,而颜色不适配。

    从视觉到App:网易有钱iOS项目切图与适配实践_第9张图片

    实际编码中,如下所示,就可以完成适配。

  2. 容器的尺寸和边距。下图分别是iPhone5、iPhone6、iPhone6P 视觉提供的适配图, 适用大部分适配的原则,标记只列出了几个关键的地方。注意:每个答案文字元素始终是水平、垂直居中对齐的。

    图15 iPhone4、5的适配效果。图中标出了边距、一个问题行的高度,跳过按钮的尺寸。

    图16 iPhone6的适配效果

    从视觉到App:网易有钱iOS项目切图与适配实践_第10张图片

    图17 iPhone6P的适配,可见问答卡片到屏幕的边距已经不是45px了,而是特殊的102px

看到这么多尺寸,是不是有种要哭的冲动?不过有了masonry和StyleUtil,写起来容易得多。以整个问答卡片的定位为例,关键代码如下:

从视觉到App:网易有钱iOS项目切图与适配实践_第11张图片

适配是个复杂的工程,即使有了所谓的规范,也不能覆盖所有的场景。有些很重要的场景还是需要一个像素一个像素的调整,终究是个体力活。

说完了我们最核心的方法之后,为了保持文章的完整性,列出切图时命名规则:模块名-页面名-图片种类-图片名字状态(如果有)破折号-表示分组,下划线表示状态,最长破折号不要超过5个,如果还有很多子功能,可以使用驼峰模式。

譬如,投资模块-股票列表页面-头部的背景。命名

invest-stock-bg-tableheader

当总体股票是赚钱的时候,是红色的背景,如果亏损则是绿色,命名:

invest-stock-bg-tableheader_green
invest-stock-bg-tableheader_red

买入按钮的图片,正常和disabled状态的命名:

invest-stock-ico-buy
invest-stock-ico-buy_disabled

公共使用的图片,如查看更多,命名:

ico-viewMore

最后一步,走查

如果严格的做好上面的工作,做出100% 和视觉matching的APP已经不是梦。然而,然而,人都是有惰性的。可能你记得量了一个块级元素的上下间距适配,却忘记了左右边距适配。

所以为了克服人性的弱点,我们在项目开发的瀑布图中加了一环——视觉交互走查。大概的形式是视觉和开发一对一坐在一起,视觉一个界面一个界面地看,那里不对那里要改,这时候不仅改开发不符合视觉的地方,也改视觉当时没有考虑好的地方。这个阶段有时候很耗时。如果是传统的native开发,大部分是按照iPhone5走查,改动完毕之后再依次安装到iPhone6、iPhone6P、iPad,看效果。但是后期部分功能采用了react-native的模式,可以做到修改之后,各个设备分别摇一摇就能看效果——做到了多端并行走查,提高了效率。

做完了这些步骤,通过测试之后,一个香喷喷的APP就可以deliver到用户手上了~

结尾

在追求如何优雅高效地切图和适配的探索上,我们才刚刚起步,有些地方还不尽完善。切图时需要手动改导出选项的问题,还在让我们头疼(Sketch export to xcode的change base dentist不能设置0.5);Sketch的measure插件在测量边距时,还是不能正确地寻找到它的兄弟元素(手动option+mouse over是可以的);在开发native代码时,多种设备适配走查,效率还是很低(react-native没有全部替换native);对于iPad端适配,视觉同学苦不堪言——还不如专门为iPad设计一套——怎么适配都很丑(在示例代码中,你可以看到大部分iPad是按照iPhone5来适配的)。

我们希望看到有更好的方案来做适配这种体力活,解放我们的眼睛,解放我们的双手。对于以上内容,如果存在谬误或者有更好的方法,欢迎读者朋友和我们交流。

参考

  1. https://www.designernews.co/stories/46380-sketch-vs-photoshop-for-ui--ux-design 对比才有看头!SKETCH秒杀PS CC 2015新功能的7个地方
  2. https://www.zhihu.com/question/27495264 Sketch 有哪些插件值得推荐?
  3. http://antinomy.me/2014_07_16_186/ 移动APP图标设计建议和技巧
  4. http://www.shejipai.cn/app-cut-plan.html  APP切图的那点事——安卓与iOS平台切图小结
  5. http://www.shejidaren.com/image-slice-for-ios-apps.html  iOS APP UI设计之从效果图到UI切图
  6. http://www.ui.cn/detail/48165.html 進擊腾讯の浩男(二)
  7. https://www.zhihu.com/question/25370620 Xcode 6 可以使用 PDF 格式的矢量图作为图片资源,自动适配?
  8. http://youxiputao.tw/articles/3145 iPhone 6/6 Plus 出現後,如何實現一份設計稿支持多個尺寸?

你可能感兴趣的:(从视觉到App:网易有钱iOS项目切图与适配实践)