「工具」七分钟认识一款思路新颖的设计工具:Phase

Phase 团队认为,目前市面上的设计工具仍处在「Print Design」时代,并不是为「Digital Design」服务的。他们计划在下个月,也就是2018年6月放出 Phase V1。在2017下半年初步宣传了 Phase 后,他们逐步放出了在设计关键功能时的思考,描述了从 Why 到 How,再到 What 的过程。大家可以在了解这款设计工具的同时,也感受一下 Phase 团队清晰的设计思路。

阅读准备

宣传视频

https://www.zhihu.com/video/981681275635122176

工具界面

https://www.zhihu.com/video/981681332719554560


根据笔者对 Phase 的了解,比较革新的功能大概有四个 – 原型工具、自动排版、样式库和代码导出。至于其他功能,没什么亮点,就简单介绍一下。

原型工具 | Prototype

先看一段没有工程师介入,完全由 Phase 原型功能实现的原型。在这个原型中,所有内容均为真实数据、所有元素均可交互。

https://www.zhihu.com/video/981682375012564992

虽然市面上的原型工具很多,比如 Principle、Flinto、InVision,但是原型制作这个环节是目前设计师工作流中最混乱的。根据 Design Tools Survey 的统计:

平均每个设计师会使用2.98种原型工具。既然这样,那么我们认为这个环节仍有产品机会,是各个工具团队的蓝海。

这些原型工具各有特色,有的容易上手,有的适用于移动端的原型制作。平均每年都会有新的原型工具面世,而且这个速度仍在加快。有一些成熟的设计工具会把原型作为一个功能,比如 Sketch 的 Prototype 和 Adobe 的 XD。然而这些原型功能的本质都是遵照duplicate-screens(界面复制) 模式设计出来的。

[1] 复制界面 — [2] 更改 — [3] 设置过渡

这种 duplicate-screens 模式虽然很直观,但是制作耗时,限制也多。所以有的、时候我们会选择直接用代码完成动效设计,虽然慢很多,但没有任何限制,能够限制你的只有你的想象力。

Duplicate-screens 原型工具并没有关注界面元素的 States 和 Interaction,他们的出发点更多是来自 Print Design,呈现静态的、低耦合的交互事件。也许真正的原型工具应该从 Digital Design 出发。

我们在做界面设计的时候,往往会从最小的界面元素着手,比如路径、文字、填充、描边等等,然后再将这些元素进行不同耦合程度的组合,形成 Layer 或 Component。那么,我们在做原型设计的时候,是否也应该从这些最小的原型元素着手?比如选择器、事件和条件?

如果能够理出这些原型元素,并基于他们来设计原型工具,那么相较于基于 Print Design 的 Duplicate-screens 模式。新的设计工具必将提升效率,释放更多的生产力。目前市面上这一块做的最好的是 Framer,但是门槛不低。

即将在六月放出的 Phase V1 中我们可以直接导入 Sketch 文件,并用下列原型元素进行原型设计制作:

  1. Selectors:可视的 Components 都可以成为 Selectors,并且具备继承关系;
  2. Events:真实世界的交互行为都将成为 Phase 中的 Events,比如 Click,Touch,Scroll;
  3. Action:Selector(s) + Event(s) = Action;
  4. Element States:web 端、移动端的 Element 都有很多的 Class(类)和 States(状态),他们并不是静止的。那么 Phase 中的 Element 也会如此。你可以用 Action(s) 让 Element 切换 State;
  5. Triggers:但是,原型设计不仅要考虑 Element States 的转换,还要考虑界面跳转、数值变化、增删元素等情况,那么你需要在 Timeline 上添加 Trigger(s) 来触发 Action。
  6. Conditions:你需要判断条件,也就是 if/else,这样就可以处理判断提交成功和失败的情形。
用 Phase 提供的原型元素为你的界面自由搭建原型

根据 Phase 团队表示,原型工具的测试用户原型输出的效率要比原来提升了很多倍。

自动排版 | Dynamic Layouts

排版是一个界面的骨架,用来承载内容。这些排版规则,将不同的内容分别布置在页面上的指定区域。排版良好虽然不是直观可见的,却可以大大提升用户的浏览效率与体验。所以,排版规则是为动态的内容所服务的。

排版功能设计过程

当我们调整设计稿中某一部分的布局时,往往牵扯到很多模块的相应改变,一个个拉扯,重新布局子元素,真的是很痛苦。目前还没有什么设计工具给出了完美的解决方案。

在 Digital Design 时代,排版应该是动态的、灵活的,而不是 Print Digital 中的僵硬布局。目前市面上的设计工具都是提供 Grid 和 Resizing 来协助布局,以期实现响应式设计。

我们常常看到这样一种设计工具宣传片段:你给界面元素设置好 Resizing 参数,然后拉伸整个界面的一部分,其他部分会响应进行重布局。但是真实情况是,根本没有这么神奇的工具,视频都是为了宣传的美化。

我们可以给元素或元素组设定基本的尺寸和位置,栅格对于视觉上的布局帮助很大。但是这些都没有解决动态布局的问题,因为他们没有考虑到真实的内容,以及界面上的容器之间的关系。

目前,解决 Digital Design 中动态复杂排版的方案就是敲代码实现。因为 Flexbox、Grid、Dynamic Units 这些要素,代码能够提供几乎无尽的可能性。

那可以推断出 Phase 的 Layout 功能设计思路:Constraints + Flexbox + Grid + Dynamic Units = Phase’s Layout Model。

Phase Layout 全貌

那么这些要素在 Phase 里面是怎么配合,组成 Layout 功能的呢?

Units:Phase 会用 Dynamic Units 来表示各个元素之间的相对大小,当你在一行中复制一个 Element,那么这一行所有元素的占比会重新计算,但是单维排版规则不变。

Overflow, Clipping & Scrolling:在 Phase 中,每一个元素都有对于其父元素的相对位置,举个 Sketch 中的例子方便大家理解:Artboard 的父元素就是 Page。这些子元素可能在某一维度超出父元素的尺寸,那你可以设置溢出、截断或是滚动进行排版。另外他们也可以按照中轴或者边选取不同的对齐方式。

Columns & Rows:用户可以在这两种特殊的界面元素中单维度堆栈其他界面元素,并可以设置 Gap Properties 来保证他们之间的间距。

组件和样式库 | Components and Libraries

所有的元素都可以做成 Components

所有的 Components 都会有 States,当然这个在 Flinto 中已经被实现了,Phase 应该是大胆借鉴,大胆创新。

可以在官网体验样式库

现在设计工具中的样式库很难实现 Web 或 App 设计中的设计系统。真正的样式库不应该仅仅支持宏观 Components 或者文字样式。填充色、描边、投影甚至圆角、长、宽,所有的都应该是 Components,可以存储在样式库中。你只需要根据自己的工作流,选择最适合自己的界面元素耦合度即可。

直接导出代码 | Exporting <Code/>

虽然我们在做设计时一切都是可视的,但是仍然需要在导出的时候变成代码。但是事实是,各个团队都有自己的风格,所以 Phase 团队提供了足够多的设置项。用户可以配置出自己团队能够直接拿来使用的代码。笔者对这个功能不抱很大期望~

其他功能 | Other Features

其他功能矩阵

真实数据、实时协作、版本控制、评论,这四个功能在市面上都有足够成熟、好用的方案,不知道 Phase 团队打算怎么革新。位图编辑、矢量编辑这两个完全是滥竽充数,就为了多放两个 Feature 😓。唯一有看点的可能就是跨端了。我在想跨端的解决方案也许是桌面端作为生产力工具,Web 端主要负责展示,再附带一些简单的修改、协作功能。


其他文章

感谢阅读

来源:知乎 www.zhihu.com

作者:徐小马

【知乎日报】千万用户的选择,做朋友圈里的新鲜事分享大牛。
点击下载