欢迎访问山东科技大学惟真求新论坛 -> 学习互助 -> Zion无代码近期产品更新的一些设计思路 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

雨后彩虹 2022-12-27 13:41
  Zion无代码近期产品更新的一些设计思路

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

本次调整的设计思路

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

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

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

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

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

基础:如何做到界面干净整洁,符合用户工作流?

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

第一步:确定用户工作流

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

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



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

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

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

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

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

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

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

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

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

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

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

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

基础部分的总结

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

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

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

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

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

进阶:如何设计一些能力,提升基础功能的易用性?

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

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

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

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

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

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

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

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

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

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

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

追求:如何让人觉得是美观和温暖的?

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

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

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

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

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

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

给人的感觉没有那么苛刻

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

加入了IP形象,让我们的产品不再那么冰冷(即将上线)

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

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

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




查看完整版本: [-- Zion无代码近期产品更新的一些设计思路 --] [-- top --]


Powered by PHPWind v5.3 Code © 2003-05 PHPWind
Time 0.008424 second(s),query:3 Gzip disabled

You can contact us