直播回放：【高效搭建页面的技巧，Zion全新画布秘籍大公开！】

记得三连哦～ 👍 👍 👍 👍 👍 👍

--------

为什么要调整？

编辑器的画布一直以来都是我们工具的交互中枢，然而其不管是从交互体验、设计统一性还是性能方面都存在着巨大的提升空间。此次调整旨在让画布更加简洁、条理、强大，在减少不必要的视觉及操作复杂度的同时让用户更好的与产品进行交互，从而提升开发效率。

此次调整包含：

• 新设计规范（ZUI 2）的全面应用，页面更加整洁、美观、易懂
• 操作路径更短的交互方式，使 UI 搭建更加快捷
• 更多快捷键，从此操作不必全靠鼠标点击，操作更便利
• 组件交互调整
• 画布结构调整，配置更合逻辑

更新内容

导航栏

• 发布：原“预发布”入口移入“发布”中，构建整体的网页和小程序发布流程，集中管理和发布相关的操作
• 入口调整样式调整
• 报错：由原来的常驻改为存在报错时出现
• 生产/开发环境：置于导航栏最右侧

左边栏

新增

• 支持组件列表的搜索
• 支持搜索查找组件并可点击进行定位
• 页面支持多选后右键复制/删除
• 页面支持拖动排序
• 多断点模式下支持显示全部断点的内容
• 当页面中有组件配置了弹窗时，左边栏支持选中并编辑弹窗
• 区分定位为“相对”和“绝对/固定”的组件

调整

• 添加组件：添加组件由原来的“切换 Tab ”和“点击 Icon”两个入口合并为一个，置于左边栏最上方
• 选中时显示子级：当选中存在子容器的组件时，左边栏会显示包含关系
• 代码组件入口调整

画布

新增

• 支持切换多/单断点编辑模式
• 支持往目标容器的任意位置拖拽添加组件
• 支持直接选中、编辑指针所在位置最里层的组件
• 选中组件时展示更多信息及快捷操作
• 工具栏（不同组件存在差异）
• 删除
• 选中父级
• 编辑变体（部分组件）
• 组件尺寸
• 距父级的距离（仅支持绝对定位）
• 拖拽位置类型为“绝对”的组件时，支持显示水平、垂直居中及边缘对齐的辅助线

右边栏

新增

• 文字段落缩进、字间距
• 支持单独设置边框

调整

• 标签及内容调整
• “设计”标签下最顶部新增“个性配置”（以当前选中内容的类型命名）
• 原“内容”标签更名为“数据”。该标签下仅支持配置声明数据相关的配置项，其余类型的配置均移入“设计”-“个性配置”下
• 原“交互”标签更名为“行为”。该标签下仅支持配置行为，原“组件”中的内容全部移入“设计”-“个性配置”下
•   *此处以“动画”组件为例
• 动效入口位置调整：动效的入口由原来的“交互”移入“设计”中
• 状态（原变体）入口位置的调整
• “变体”更名为“状态”
• 入口由原“交互”-“动效”-“悬浮”-“效果”移入“设计”-“个性配置”中
• 外/内边距
• 由原来的默认显示改为手动添加或移除
• 支持同时配置左右及上下的边距
• 最大/最小宽度设置：由原来的默认展示改为手动添加或移除
• 布局
• 分布中的“起始”“居中”“尾部”与对齐的配置结合构成一个配置项
• 重新排列结构
• 层叠样式：“层叠样式”更名为“层级”并移入“位置”中
• 背景模糊
• 入口移入“样式”中
• 配置支持手动添加和移除

组件

• 全部组件默认样式的更新
• 条件容器
• 概念调整：父容器变为一个概念，不可选中和编辑
• 子容器配置：支持直接选中子容器，允许单独配置尺寸、样式等属性
• 聚焦模式：支持通过工具栏入口或按快捷键（Cmd/Ctrl + Return/Enter）进入聚焦模式进行配置
• 父/子容器操作区分：拷贝、剪切、复制、删除等区分子容器和父容器
• 添加和切换子容器
• 工具栏
• 右边栏
• 条件弹窗
• 条件配置：支持同时配置全部子容器的条件
• 标签栏
• 工具栏：支持在工具栏中切换标签
• 配置：支持在画布中直接选择、编辑不同标签下的内容。当标签为“自定义”时，则同时支持直接选中、编辑便签的“选中”及“未选中”状态
• 聚焦模式：支持通过工具栏入口或按快捷键（Cmd/Ctrl + Return/Enter）进入聚焦模式进行配置
• 选择视图
• 工具栏：区分配置和预览区域，支持直接选中、编辑 “选中”及“未选中” 状态的标签
• 列表/横向列表
• 配置：区分配置和预览区域，支持直接选中、编辑 “选中”及“未选中” 状态的标签
• 原列表/横向列表合并：列表、横向列表合并为一个组件，增加“滚动方向”配置用来控制列表的滚动方向
• 分割线
• 新增“虚线”样式
• 支持调整方向

快捷键

• 添加组件——Option/Alt+C
• 测算距离——Option/Alt
• 等比例缩放——Shift+拖拽
• 选择子级——Return/Enter；选择父级——Shift+Return/Enter
• 选择同层级的下一个组件——Tab；选择同层级的上一个组件 Shift+Tab（按照左边栏顺序）
• 将组件置于顶层—— ] ；将组件置于底层—— [
• 将组件上移一层 Cmd/Ctrl+]；下移一层 Cmd/Ctrl+[（仅支持同层级移动）
• 将组件往上下左右方向进行移动（相对布局下为按照布局方向调整组件排序）——方向键

更多快捷键可在快捷键弹窗中查看或搜索

后续更新

• 小程序端的适配
• 多选编辑的支持
• 对齐
• 成组/解组
• 批量修改
• 更强大的变体功能
• 更丰富的断点能力