Design with iPhone 6

LP 是设计师,除了工作,经常会写书法,绘画..。这种东西是我一辈子学不来的。但有点也觉得有那么一点点觉得不够科技范。

于是借着iPhone 6的机会让她多用用像Sketch 这样的工具,提高下工作效率。顺带将这些学习整理了出来:

iPhone 6 后时代设计

iPhone 6 的发布带来了很多新的东西,更大的屏幕意味着更多的可能性。设计时也会有更多的方式和挑战。

产品在设计上只是重要的一步,还有开发,运营等配合,所以设计原则上要求:先求正确无误,再考虑创意美观。

对于 iOS 界面,简单分为2种,一种是常规界面,就是用的都是一些简单元素进行的重复排列,另一种是定制页面,无法进行直接的放大处理。

常规界面

像系统的Mail,微博的流页面,都属于常规界面,这种比较容易处理,只用做任意一种屏幕尺寸的设计稿,开发通过AutoLayout,在其它屏幕上进行自适应。

定制界面

对于一些定制的界面我们应该根据不同屏幕重新适配,像一些全页面显示的 Profile,自动适配到大屏幕的效果挺糟糕的。
设计师应该为大屏幕单独调整设计。

iPhone 6 Plus 诡异的分辨率

iPhone 6 和 6+ 虽然是大小差不多,但在意义上却有点不尽相同,感觉 6+ 更接近一个 iPad Mini。

6 在参数上和 5S 是保持一致的,像 PPI,依然是 326,也就是经典的 @2x 素材,只是 Point 增大为 375 × 667

6+ 就不同了,在渲染时用的是 3x,理论上,PPI 应该是 163*3=489Points736x414,对应3x分辨率应为 2208x1242,但实际上却是 x2.46,换算下来,PPI414;分辨率上也是打了个折扣,为 1920x1080

在实际渲染时,6+ 也是先按照 @3x 2208x1242 来渲染,然后整体缩放 1.15 倍,到 1920*1080,二次渲染是一件很费资源的一种行为,为什么要这么做?

猜想,苹果可能是因为成本,功耗等原因,才降低 PPI 的,也就是说将来还是有可能出 PPI 489,分辨率 2208x1242 的iPhone的。

新的设计基准

6 前时代,我们设计以 5S 做适配,在 3.5' 机型上偏向于用 ScrollView来解决适配问题,最后用工具统一生成一倍图,为3GS及之前设备适应(后来只支持 iOS 6,也就抛弃了 3GS 的设备,1倍图不再需要单独导出)。

这种情况下只要保证字体大小、元素大小… 最后一位是偶数就可以了,毕竟开发时用到的大小、尺寸还是以 1x 来计算的。

6 后时代,在做新的 App 设计图时,有了3种尺寸,就比较麻烦,于是动手之前做了很多Research:

✓. 以6为Base,做小放大

做图还是和之前一样,保证尺寸最后一位是偶数,最后以 x1.5 来导出 @3x 的图片用来适配 6+。

这就要求所有的元素都是矢量图,用户生成内容除外。

Q: 2x 如何导出1倍的PDF?好像Sketch不支持。

✗. 以5S的Points为Base,做一倍图

Xcode 5 中支持了新的图片集成,PDF矢量图,也就是说,可以将1x图片导出矢量图,然后自由适配各种手机。同时标识的尺寸也就是开发时用到的尺寸,比较好认。

这种方式看起来很完美,但用的不多,据说单个图片的矢量PDF比两张图片加起来还要大。

看了手机淘宝的说法,觉得很有道理,一直以小屏为设计会影响设计师的大屏观,不利于创新。

✗. 以 6+ 为Base

这是比较不赞成的方案,毕竟字体大小,元素位置及宽高以偶数结尾比较好认,但要想知道元素大小是否为3的整数倍,还是个挑战的。做大放小还有可能会因虚?忘记什么原因了。

同时做图时,推荐用矢量,所以不存在放大失真的问题,3x 为基准看起来更没有什么好处了,坏处倒是有,大图对电脑的要求更高。

Sketch

即然要推荐Sketch给设计师,肚子里没点墨水是肯定不行的。于是,自己搜集了很多的资料,文档,总结了下优缺:

优点

  • 软件小:启动快,敏捷,PS 每次启动,渲染都要等待
  • 专注:Sketch 有自己的明确定位,就是处理网页,App。这也注定了它的简便和高效,比如说为 iOS 而设置的导出和Icon模板。
  • 扩展友好:Sketch ToolBox中有很多的插件,像有名的 renameitSketch Measure 则是很友好的自动标注工具。

缺点

  • Bug多:毕竟公司比较小
  • 素材少:相对于PS, AI,还是小众。
  • 不支持PS, AI导入:好在AI里的路径都可以方便的导入。
  • 运营策略:总感觉互联网时代的产品,就应该免费,占领用户,建社区,导流量。但这个小公司却是将费用一升再升,而且更新也比较慢,为他们着急。

资源

切图

切图是一件很烦的事情,不过随着工具的提升和设计师的努力,也开始变得容易起来了。

- Sketch

在Sketch中,导出图片不再是一件很费力的事情,合适的命名+任意尺寸的导出。

当初推荐Sketch 给LP时,见她和另一个设计师的讨论,大意就是这东西因为对开发者友好,所以更讨他们推荐。可见Sketch在这方面的友好度。

- Slicy

搜索Slicy时,到处都是言美之词,但真正想用它时,却发现它根本不支持 @3x,而且也很久不再更新,创作者把责任推向Adobe。搞了很久才明白,原来 Photoshop 中也集成了类似功能。叫 Generate。

Slicy 用法就是在需要导出的Layer或 Group 上命名,命名以文件后缀结束,像user_avatar.png。然后把PSD拖入Slicy中,就可以导出1x, 2x的相应图片了。

- Photoshop Generate

Generate 是 Photoshop CC 2014中新加的功能,在 14.2.2 中进行了一次更新。加入了Extract Assets的设置。

这方面的教程特别的少,尝试了很多次。如下:

以文件名形式,为需要导出的Layer或Group进行命名,如user_avatar.png

然后在Extract Assets中对需要导出的图片进行设置,如几种大小尺寸?

第一次生成需要手工点击 File > Generate > Image Assets。会在PSD文件同目录下生成新的导出图片目录。之后每次修改都会自动导出。非常方便。

关于矢量图

矢量图的好处就是无论怎么放大或缩小都不会失真。不必再为基准烦恼,也不用头疼被几整除。

有时,6+ 中不能简单的应用 3x,而是需要根据大小单独调整,矢量图的优势再次显现,都不需要单独设计,开发者自己可以调整。

最后,摘抄了一段很有道理的话:手机屏幕毕竟还是像素位图,像细线图标即使是矢量的在缩放后仍可能会出现虚化模糊的现象(类似 HTML 里的 icon font),理论上并非所有情况都适合用矢量切图。但是,iPhone 6 Plus 屏幕本身又是 downscale 的,导致原本 pixel perfect 的切图也会在缩放后发虚,完全没有 pixel perfect 而言,究竟是不是 iPhone 6 Plus 屏幕已经优化的看不出像素点了,要等看到实机才能确定。

REF::