BACK >
结合界面设计及程式开发的工具
作者:吾诺瀚卓    浏览次数:338    日期:2017-08-11

就在今年4月底, Airbnb 在 Github 上发布了全新结合界面设计及程式开发的工具——React.Sketch。

故事起源于 Airbnb 先前热衷于 React.js ,并且也利用 React.js 来建构网页及app的设计系统,而 React Native 能让网页工程师利用 js 的写法来产出iOS系统的app 这点,更是让他们十分敬佩。

有一次晚餐他们就在想:既然现在 Sketch 为界面设计使用工具的最大宗,而 Sketch 档案最终还是得要转成程式码,那我们何不用写程式的方式在 Sketch 上做设计呢?于是这套工具因而诞生。

简单来说,React.Sketch 就是让开发者能利用 javasript ,在 Sketch 上进行界面设计。

但 React.Sketch 不是用 Sketch 里的元件<rect>、 <circle> 或者 <line> 来进行设计,因为这样表示你只是换了个工具来“画圆”、“画线”;取而代之的是,他们利用 React 风格的样式来架构 Sketch 设计,像是 <view> 、<text> 等,这样他们就可以轻易将 DLS 上的已经设计好的各个设计元件用简单的程式码呈现出来放在画布上。

更有趣的事,一般在 Sketch 上只能作纯设计,常常会遇到画面中资料需要模拟真实情境的时候,这时我们只能自己纯手工输入假资料上去(而且输入到后来还会很烦);但 React.Sketch 不仅能在 Sketch 上做到界面设计,更能让设计师「即时」生成数种情境:

无接缝与资料库串接直接套用网路上的资源 API 来生成资料。

结合界面设计及程式开发的工具 />
</p>
<p>
	你可以串联真正的资料库来呈现设计,像是利用 Foursquare API 来寻找场所地点,也可利用 Google maps 来生成即时的地图和详细资料。
</p>
<p>
	自动生成响应式排版
</p>
<p>
	利用 Flexbox 直接使一个画布生成出不同设备屏幕的更多画布。
</p>
<p style=结合界面设计及程式开发的工具

React.Sketch 使用了 Flexbox 来排版。设计师不用再拖拉元件的宽高来适应不同屏幕的大小,只需要输入几行文字,就可以直接且即时在 Sketch 画布上生成画面。

画面文字全语言切换

串 Google Translate API 在 Sketch 上即时更换语言呈现。

结合界面设计及程式开发的工具

前面提到 AirShots 可以让你预览同一个画面在不同语言下呈现的样子,而 React.Sketch,让你能在 Sketch 一边设计画面、一边即时预览任何语言放进设计里的效果,方便设计师调整。再也不怕原本设计好好的中文版画面,在加入德文版本后会撑破版面,而必须重新调整的窘境了。

现在这套工具已经开放在 Github 上供大家使用,而 Airbnb 也持续在优化功能,如果使用上有遇任何问题,欢迎回馈给他们。

Lottie

Airbnb 在今年 2月发布一款造福软件业的应用程式动画工具 Lottie ,提供 iOS 、 Android 和 React Native 框架的动画文件库,帮助开发者更容易在原生应用程式中加上动画。

过去我们在 iOS 、Android 中制作一些复杂的动画时,都无法避免在工程师与设计师来回沟通之间花上大把时间,而且制作上也有一定难度。通常不是放入一堆不同大小的分开图件,就是写出很长一串的Code,还要定义 timing function 才能让动画达到精准,也因为这样,许多 App 都省略许多动画效果。

所以Airbnb团队在一年前决定要在这方面做一次大改变,Lottie 应运而生。

结合界面设计及程式开发的工具

有了 Lottie ,设计师在 After Effects 设计完动画后,只需透过After Effects的扩充套件 Bodymovin 将动画转成 JSON 档,再使用 Lottie 渲染JSON档,不用重写程式、便可以直接将动画套用於应用程式中。

由于输出使用的动画档为 JSON 格式,Lottie大幅降低档案大小,在应用程式中使用更有弹性,还可以解决过去利用 GIF 或PNG 多张序列图档製作动画的缺点,如档案过大、解析度限制无法弹性缩放等,而且还可以支援 iOS 、 Android 及 React Native ,大幅减少工程师及设计师制作动画的时间。

Airbnb 希望透过 Lottie ,让在不同系统的应用程式中套用动画就像用静态图档一样简单。

结合界面设计及程式开发的工具

安装 After Effect 的扩充插件 Bodymovin,可以参考这篇安装教学,想知道怎么应用 Lottie 在 After Effect 上输出成 JSON 档,也可以参考 如何使用Lottie 将完美动画100%呈现在产品上 ,里面有更多详细教学。

另外在 Lottie 动画素材平台 上也有许多设计师所做的现成 Json 及 Aep 动画,可以拿来参考运用。

结语

工具是为了需求而生,不得不说, Airbnb 这几年在公司扩张上遇到的组织运作问题,套用在其他公司也都大同小异,而 Airbnb 在重新建构设计组织流程的努力,不仅让内部设计流程更为有效率,减少设计师、工程师及相关团队之间的合作成本。

随著科技进步,设计师与工程师之间的界线越来越小,协作的重要性也日益提高,界面设计师不再仅侷限在视觉效果工作 — 只要会画画、把画面弄得美美的就好;一个理想的团队里,设计师不仅能够和工程、产品部门一起让整个服务开发流程更加顺畅、有系统,同时还要有高度与他们共同协作的能力。

当然,一个设计开发系统永远不会有完成的一天, Airbnb 也持续在他们的 DLS 和协作工具不断优化。他们不仅订定了严谨且弹性的设计系统,更统一了他们的工作语言,并期望开放给 Airbnb 之外的产业使用。也许在不久的将来, Airbnb 就会像 Google 及 Facebook 这样的巨擘一样,联合起来共同打造一个软件设计产业皆通用的开放资源库呢!