Zion无代码近期产品更新的一些设计思路

雨后彩虹

    Zion无代码近期产品更新的一些设计思路

今年7月，是我第一次接触到 Zion 这个工具，当初给我第一眼的感觉就是有点“黄”跟“严苛”，同时作为一个算是专业的互联网产品经理，另外一个直观的感受是按钮有点多，并且不理解排布的规则，导致我不知道该如何一步步使用。我相信这也是大部分用户第一眼的感受，而本次我们对 Zion 的编辑器界面的改动主要也是为了解决这些问题。

本次调整的设计思路

Zion 的目标是为用户提供一个好用的无代码开发工具，本次是聚焦在主界面的调整上，对此我们有三个递进式的设计思考：

基础：界面整洁、干净，符合用户工作流

进阶：通过一些能力的设计增强易用性

追求：整体给人的感觉是优美和温暖的

下面我将会分为这三个部分，来阐述这段时间的更新内容～

基础：如何做到界面干净整洁，符合用户工作流？

干净整洁不等于简单的做减法，而是在保证完整的能力下，将所有功能进行合理的分级排布

第一步：确定用户工作流

用户正常的流程：创建项目-编辑项目（UI和数据）-校验项目-预览项目-发布项目

第二步：梳理所有功能的信息结构

上图是我们对所有功能进行了信息结构的梳理，结合第一步的结论就可以确定哪些功能需要摆放在一起，哪些功能需要收起，放到二级入口。

第三步：确定分区、整合入口

最终将新建项目和个人信息的部分整合到【个人中心】，可以理解为工作台，这个即将上线。

确定顶部最中间区域为项目信息和信息编辑区域，我们内部称之为“灵动村”，整合了所有项目信息的展示和设置。

确定左上角为项目编辑区。

分别页面UI编辑、数据管理、API、工作流四个功能，整合了所有用户对项目的操作

用户默认状态是进入到UI编辑，在这个场景下，我们加强了页面&组件的新增和列表入口，让用户可以不用进行选择和思考，第一步直接开始页面的新增和编辑
组件的编辑和查看是用户进入到页面层才需要做的事情，所以我们将组件的两个功能收到了点开页面之后，而页面/组件出现的情况是互斥的，这也进一步减少了一级入口的数量

确定右上角为项目预览、发布区。

整合了校验、数据库发布、应用预览、应用发布四个能力

因为我们想跟主流设计、应用开发工具类保持统一，将分享放在了预览发布区旁边，也起到了我们想强调协同重要性的作用。同时我们将协同人员的呈现和邀请协同人员整合在了一起，我们觉得这个设计非常棒，也让我们少了一个分享的icon，整体界面更加干净～

确定底部-中间为操作区，目前整合了放大缩小、回退、撤销回退等能力，之后所有跟细节操作有关的都将展现在这个部分。

社区是 Zion 非常重视的部分，在本次更新中，我们将社区、通知（即将上线）、评论（即将上线）和个人信息放在了右下角，在不影响用户沉浸式编辑的情况下，进一步强调了我们的产品取向。

基础部分的总结

以上我们完成了本次设计思路-基础部分，可以想象一个用户进来之后的画面。

首先看到了一个空白页面，取名之后进行页面和组件的编辑，然后在左上角切换进行数据模型、api等内容的编辑，然后到右上角进行校验、预览和发布。

在整个流程中，没有在主界面进行一会儿这里、一会儿那里的点击。

我们希望用户走的路径也在产品上得到了表达。

同时我们界面的一级入口少了非常多，整体看起来整洁、干净。

进阶：如何设计一些能力，提升基础功能的易用性？

这个部分我们先从用户在操作上遇到的一些问题开始：

进来之后，不知道每一步该做什么

页面多了之后，不知道该去哪里找

在聚焦了几次之后，想退回到主页或者进行其它页面路径非常长

在编辑UI的时候想去编辑数据模型之类的，非常麻烦，并且无法保存现场

以上是几个突出的问题，当然并不是全部，那针对这几个问题我们有以下几点设计：

调整了版面，隐性地指导了用户每一步该做什么

上线了页面分组的能力，可以自己新建文件夹来管理所有页面

增加了面包屑能力，让用户在任意一级都可以快速回到某一级

将UI编辑和其他编辑作为同一级别的画板，几个功能之间可以任意切换并且会保留现场

这些基础能力虽然很小，但可以为用户减少非常多的重复操作，关于体验的部分，会一直持续不断地迭代，这是我们会一直努力的方向。

追求：如何让人觉得是美观和温暖的？

Zion低代码开发官网小编表示，这个部分主观的判断较重，一定程度上代表了我们设计者的个人表达。当然我们也认为每一款产品都需要自己的产品性格，而这个性格就是设计者基于自己的理解为产品赋予的。

好的东西大概率会有标准，但美是一些共识 + 个体的独特看法。

本次我们在这个部分的迭代有几点：

去掉了上一版大范围的黄色，让界面看起来更加的稳定和美观

调整了所有文字大小，使得更加和谐

调整了所有 icon 的细节，由描边换成了部分填充，整体看起来更加饱满，

给人的感觉没有那么苛刻

也调整了所有弹窗的设计，使得更加美观

加入了IP形象，让我们的产品不再那么冰冷（即将上线）

最后，说一下我们对温暖的理解。

一个产品的温度体现在两个方面，产品好用就是最大的温暖，其次是产品和用户的身份交流。

Zion无代码系统官网小编表示，这段时间所有的更新就是为了产品可以更加好用，而交流体现在用户和产品设计师在各个渠道的沟通，产品本身是一种介质，社区、社群也是，希望各位用户可以在任意的渠道跟我们产品对话，我们一起来将 Zion 变得更加温暖！

跋山涉水

想不到的把。

long

福州好地方，欢迎你来。

大苏打

来过。