交互设计软件Framer X for mac软件测评

Framer X for mac号称是一款突破规则的产品,能够更好地融合设计和开发,Framer X mac破解版没有内置编辑器,只有设计面板,使用React和TypeScript 写UI组件,功能方面很全面,下面为大家带来了详细的Framer X for mac软件测评,有兴趣的朋友可以来了解一下哦!

12114359_d0a77ab762.jpeg

Framer X 更像一个设计工具了,布局、组件、路径这些功能都很完善;但是对于想要实现高保真可交互原型的人来说,却更难了,因为要学会使用 React 构建组件;不过它却更接近一个可以构建设计系统的设计工具了。

一、好用的特性

首先说一下它相比于其它设计工具我觉得更好用的一些特性。

1. Stack

第一个就是 Stack ,Stack 翻译成中文是「堆、栈」,这里的 Stack 其实就是前端里的弹性布局(Flex Box),有点类似于 Sketch 的 Paddy 插件。有了这个功能,你可以很简单地进行多个元素的排列。如下图,先画出一个 Stack ,再把其他元素拖进去就会自动对齐排列,能大大节省时间。

12114416_9e4a80e77b.gif

更方便的是,当你拖动 Stack 中的元素时,他们会自动改变顺序。

12114421_984ed172d5.gif

2. 组件商店

Framer X 支持以两种方式创建组件:从设计区创建和通过代码创建。而通过代码创建的组件更加强大,可以实现各种交互效果(后面详细介绍)。

12114434_c2d3c7028e.jpeg

Framer X 内置了一个组件商店,支持设计师们将自己通过代码创建的组件上传,供其他设计师使用。说到这个我不禁想到了 Sketch 的插件生态,可以说 Sketch 之所以这么受欢迎,其用户社区贡献的大量插件功不可没,但是 Sketch 好像并不特别重视。

12114437_919c2921c5.jpeg

Framer X 内置的组件商店,聚集了用户创建的各种组件,方便其他用户拿来就用,不用重复造轮子。以后组件会逐渐增多,生态慢慢发展起来,这些即开即用的组件可以大大提升我们的工作效率。何况这些组件都是可以交互的,可以组合起来实现一个极其高保真的设计。

二、我最看好的功能

最后详细的介绍一下在 Framer X 中我最看好的功能——使用代码制作组件。

1. 简介

上文提到 Framer X 组件有两种,在设计区创建的组件和 Sketch Symbol 类似,而另外一种就是使用代码创建的组件。

Framer 最开始是没有设计模式的,所有的界面都要使用代码实现。后来比较稳定的版本包含了设计模式和代码模式,通过代码去操作设计模式下的图形。而在 Framer X 中,则没有了代码模式,但是支持通过其他代码编辑器来编写组件,嵌入设计区。

当你要使用代码创建组件时,Framer X 会使用第三方代码编辑器(如果没有安装 VS Code 则会推荐你安装)打开一个 React 模板文件,里面写好了一些基本代码。我们现在创建一个 Button 试试看,下图左边就是这个组件在设计区的样子,右边是其代码。右边的代码看起来有些难懂,后面会简要介绍。

12114444_f0b84f257b.jpeg

2. React 原理

首先回顾一下前端界面实现的传统方式:用 HTML 绘制基本结构,用 CSS 添加样式,用 JS 控制逻辑,即通过 JS 改变 HTML 或者 CSS 来响应用户的操作,从而改变界面状态。

12114629_1799c4f564.gif

在 React 中则是通过数据维护界面状态的。每个 React 组件内都维护了一些数据,这些数据对应界面中的一些内容,想要改变界面状态则需要改变这些数据。

拿官方的 StatusBar 组件举例。这个组件的数据包含了外部属性( Props )和内部状态( State )。所谓外部属性就是通过外部数据来调节它,StatusBar 有三个外部属性: Carrier 、Appearance 、Battery,分别对应着界面的运营商、外观(暗色或亮色)、电量这几个界面状态。其内部维护了一个 State ,即显示时间。而每个组件都有一个生命周期,包含初始化、已经装载、渲染等等。其中 render(渲染)所做的工作就是随时观察 Props 和 State 变化,并跟着重新渲染组件界面。

12114637_7bbd2108b9.jpeg

我们再通过上述最简单的组件的代码来对应一下这些概念。

12114640_ad58a23aed.jpeg

这里只做一个简要介绍,因为React 的概念细节繁多。

3. 为什么看好它?

最后说一说我为什么很看好这个功能。

从上面的文字中可以看出,虽然用代码实现组件能做出更加复杂逼真的效果,但对设计师的门槛也更高了(需要很扎实的 JS 基础,能理解 React 实现方式,还要学会 TypeScript )。那我为什么会看好它呢?

很多设计师认为,像 Framer 这一类要求设计师具有代码能力的设计工具的目标就是导出代码,给工程师复用。在我看来这是错误的,要知道「术业有专攻」,不要以为会用 JS 写几个动效你的代码就能够作为工程代码了,其实还差得远。

12114643_937f30ae24.jpeg

那设计师学编程的意义何在呢?我认为是为了构建「设计系统」,当然,知道技术边界,拥有代码思维是这个过程中额外获得的。

在开发圈有一句话,「懒出效率是工程师的美德」。我们身边的程序员经常会写一些脚本去替代体力工作,但是我们设计师却一直在做很多重复性劳动。要想提高效率,使用代码是很好的一种方式。

最近流行的「设计系统」概念,其实就是为了提高设计效率。回想一下我们现在使用的 Sketch Symbol ,想要制作一套组件库很容易,但是想要做出一套包含丰富可调节属性的组件库却不容易,需要按照命名规范组合,得预先想好各种可能的组合。

12114646_665ccb0d13.jpeg

但是这件事对于代码来说却是非常简单和自然的。在 Framer X 中通过代码做出的组件,可以给它设定各种属性,这些属性可以和一般图层属性一样调节。如下图,StatusBar 组件的属性可以在 Framer X 右侧面板中调节,就像调节一个图层的样式一样简单。

12114648_c75fd0887c.jpeg

现在的 Framer X 代码组件,允许我们自定义组件逻辑,可以在设计区直接调节属性,在预览时还是真实可交互的。这让我们距离构建一个真正的设计系统更近了一步。

小编点评

以上就是关于“交互设计软件Framer X for mac软件测评”的全部内容了,希望能对你有所帮助。

猜你喜欢

转载自blog.51cto.com/14247209/2388521