63 lines
3.6 KiB
Markdown
63 lines
3.6 KiB
Markdown
|
# 用户界面
|
|||
|
|
|
|||
|
|
## 区块编辑器
|
|||
|
|
|
|||
|
|
区块编辑器的整体布局采用顶部工具栏+内容区域的设计。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**工具栏**包含文档级操作：编辑/选择模式、保存状态、撤销/重做/插入等全局功能、设置开关以及发布选项。
|
|||
|
|
|
|||
|
|
**内容区域**承载文档主体内容。
|
|||
|
|
|
|||
|
|
**设置侧边栏**包含文档相关设置（标签、分类、发布时间等）以及"区块"标签页中的区块设置。工具栏中的齿轮按钮可隐藏设置侧边栏，让用户获得更专注的写作体验。在小尺寸屏幕上，侧边栏默认处于隐藏状态。
|
|||
|
|
|
|||
|
|
## 区块单元
|
|||
|
|
|
|||
|
|
区块是编辑器最基础的构成单元。广义而言，所有内容都是区块。用户通过区块构建文章与页面，这种模式完美复现了底层HTML标记的垂直流式布局。
|
|||
|
|
|
|||
|
|
通过将文档每个部分呈现为可操作的独立区块，我们实现了区块特定功能的场景化调用。这一设计灵感源自桌面应用惯例，既能支持丰富的高级功能，又不会造成界面臃肿。
|
|||
|
|
|
|||
|
|
被选中的区块会显示多项场景化操作：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
区块界面提供基础操作功能。区块编辑器致力于提供优质通用的默认设置，用户无需依赖设置侧边栏的高级功能即可完成完整文档创作。
|
|||
|
|
|
|||
|
|
**区块工具栏**突出显示常用功能。**区块图标**位于区块工具栏内，包含针对当前选中区块的顶层控制，主要支持用户将区块转换为其他兼容类型。部分区块还会通过区块图标提供替代样式选择。
|
|||
|
|
|
|||
|
|
**区块格式化**选项用于调整区块层级设置，**行内格式化**选项则用于修饰区块内部元素。当区块内容较长时，随着用户向下滚动页面，区块工具栏会自动固定在屏幕顶部。
|
|||
|
|
|
|||
|
|
通过**区块移动器**图标可实现区块的上下移动。点击省略号菜单可唤出附加功能：删除与复制区块，以及"以HTML编辑"、"转换为可复用区块"等**高级操作**。
|
|||
|
|
|
|||
|
|
未选中的区块不会显示区块工具栏或任何场景化控件，此时区块仅呈现内容预览效果：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
请注意选择状态与焦点状态可独立存在。例如图片区块被选中时，焦点可能位于标题输入框。
|
|||
|
|
|
|||
|
|
## 设置侧边栏
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
侧边栏包含"文档"与"区块"两个标签页：
|
|||
|
|
|
|||
|
|
- **文档标签页**显示正在编辑的文章或页面的元数据及设置
|
|||
|
|
- **区块标签页**显示当前选中区块的元数据及设置
|
|||
|
|
|
|||
|
|
每个标签页均包含可展开/折叠的**侧边栏分区**编辑字段组。
|
|||
|
|
|
|||
|
|
若区块需要高级配置，相关设置应置于设置侧边栏中。但请注意：区块基础运行所需的设置不应放在侧边栏区块标签页——用户可能为获得沉浸式写作体验而关闭侧边栏。建议设置合理的默认值，并将重要操作置于区块工具栏。
|
|||
|
|
|
|||
|
|
适合放入侧边栏区块标签页的功能包括：
|
|||
|
|
|
|||
|
|
- 文本区块的首字下沉
|
|||
|
|
- 图库的列数设置
|
|||
|
|
- "最新文章"区块的文章数量或分类筛选
|
|||
|
|
- 所有非基础操作必需的配置项
|
|||
|
|
|
|||
|
|
## 区块库
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
当用户通过工具栏或内容区场景化菜单插入区块时，**区块库**界面将会启动。库内区块按可展开的分组进行组织，搜索栏会随用户输入实时筛选区块列表。用户可通过选择**区块按钮**或**区块名称**来选用特定区块。
|