很早之前就听过 UXPin,但是看他们官网上写的「All in one」我以为又是一个噱头大于实际的产品,毕竟最近几年设计工具大爆发,每一个都宣称自己是「All in one」或者「Next generation」。

最近听到有一些人推荐,就想着注册试一下。当我打开 UXPin 官网时,在首页发现了这么一句话时:

其他的设计工具,诸如 Adobe XD、Sketch、Figma、InVision 等,只能帮你用线连一下元素做一些假的交互效果,而我们,能让你设计出真正的交互状态、逻辑和代码组件。

UXPin 首页

果然很狂傲,但这句话却更加激起了我的好奇心。于是,我立即注册并试玩了几天,发现还真不是吹的,UXPin 确实被低估了。那些已有的组件、矢量编辑、在线分享等特性不必多说,UXPin 一个不少,让我惊奇的是它的一些其它特性,让我一一道来。

元素状态

首先最让我惊喜的是 UXPin 引进了状态这一概念。我们都知道,有时候一个元素会有很多种状态,而状态的组合又构造出很多新的状态,最典型的就是按钮了。在一般的设计工具中我们只能一一列出各种状态。

按钮的状态

UXPin 的做法就是引入状态,同一个元素或组件可以设置多组状态。这些状态可以用于交互动画中,也可以作为组件的样式覆盖,你甚至还可以嵌套组合不同的状态,来灵活使用它们。

元素的状态

变量、条件和表达式

UXPin 自带的交互效果本身很丰富,除了常见的元素变化、页面跳转、显示隐藏,它还支持进行 API 请求等高级操作。同时,让它区别于其它设计工具的一点是,它支持变量和条件。

所谓变量,就是你可以将一些值存起来,比如用户填的一个数字。而基于这些变量,你可以进行条件判断,比如将用户填写的年龄保存起来,再根据它是不是大于零的来进行后面的交互。这可以帮助我们做出具有一定复杂度的交互效果。

条件、变量和表达式

变量的值支持表达式,UXPin 内置了一些基本表达式,比如数学中的绝对值、四舍五入,手机、邮箱、日期格式判定,以及设备窗口尺寸等。你可以使用这些表达式来处理变量,实现自己的定制化需求,让你的交互效果进入更高一级的层次。

表达式

无障碍

无障碍在国内是缺失的,但其实在无障碍这块设计师可以做很多事情,比如使用足够对比度的色彩以保证可读性。UXPin 提供了两个无障碍功能:色彩对比分析和色盲模拟

色彩对比分析会基于 WCAG 2.0 标准帮你自动判断文字颜色和背景色之间的对比度是否足够。

色彩对比分析

色盲模拟则可以帮助你模拟不同色盲眼中你的设计稿的样子。

色盲模拟

CSS 样式

在 UXPin 中除了通过右侧属性面板给元素设置样式,你还可以直接编写 CSS 代码。UXPin 在文档中说过,Sketch、Figma 这些设计工具都是基于图形的,而 UXPin 是基于代码的,所以它可以很容易地和代码融合。

CSS 样式

响应式断点

在设计时想做出响应式效果一直是一个难点,一般我们都会针对不同屏幕多做几稿。在 UXPin 中,你可以自己设置断点,并为每一个断点区间做样式调整。在预览时,你也可以通过切换断点来观看不同尺寸下的效果。

响应式断点

迭代

设计文件的版本管理也一直是一个大问题。对于本地文件我们只能存储为一个个副本,但是 UXPin 的设计文件都存储于云端,你的每一次修改都会被记录。与此同时,UXPin 还提供迭代功能,也就是允许你在某一时刻创建一个版本,你可以随时找到它,进行查看或编辑。

迭代

文档

文档可能对产品经理或者交互设计师比较重要。一般我们会在一些文档工具中书写需求或产品文档,会把对应的设计截图贴在里面,这样就需要在多个工具中切换。UXPin 将文档功能融合进来了,你可以直接在里面写文档,并将段落直接关联到某个设计元素。

文档

设计系统

现在比较流行的就是通过设计系统交付,我们把组件和样式提取出来,集中在一个地方展示,方便对接到开发流程中。现在大多数设计工具都需要第三方工具来构建设计系统,而 UXPin 自带这个功能。你可以直接从现有的文件中创建,然后在里面继续添加一些其他的样式或组件。这样,在你的设计文件中就可以直接使用这里面的样式或组件了。

设计系统

Merge(beta)

Merge 是 UXPin 正在测试的一个功能,也是一项革命性的技术。简单地说,就是你可以直接将基于 React 的组件库从 Git 仓库导入到 UXPin 中,并使用这些组件继续设计。这个功能可以说是无缝衔接了设计和开发,可以让交付变得更加简单。如果你感兴趣的话,可以根据他们的教程尝试一下,不过这需要一定的技术基础。

Merge

总得来说,UXPin 确实可以称得上「All in one」的设计工具,某种程度上也可以算「Next generation」。不过因为功能的复杂性,上手可能需要一些时间。

目前 UXPin 没有免费版,但是提供了 14 天的免费试用,你还可以在他们的作品展示中提交自己的作品,如果被选为优秀作品,将有机会获得一年的免费使用资格。