diff --git a/docs-dev/SUMMARY.md b/docs-dev/SUMMARY.md
index 5cc7c14b..7005a96f 100644
--- a/docs-dev/SUMMARY.md
+++ b/docs-dev/SUMMARY.md
@@ -8,6 +8,11 @@
     * [场景编辑区](ui/Scene.md)
     * [动画编辑区](ui/AnimationEditor.md)
     * [侧边栏](ui/SideBar.md)
+        * [场景面板](ui/sidebar/Hierarchy.md)
+        * [历史面板](ui/sidebar/History.md)
+        * [属性面板](ui/sidebar/Property.md)
+        * [脚本面板](ui/sidebar/Script.md)
+        * [动画面板](ui/sidebar/Animation.md)
     * [状态栏](ui/StatusBar.md)
 * [脚本](script/Script.md)
 * [更新日志](update/UpdateLog.md)
\ No newline at end of file
diff --git a/docs-dev/images/anim-begin-state.png b/docs-dev/images/anim-begin-state.png
new file mode 100644
index 00000000..2f677a00
Binary files /dev/null and b/docs-dev/images/anim-begin-state.png differ
diff --git a/docs-dev/images/anim-begin-time.png b/docs-dev/images/anim-begin-time.png
new file mode 100644
index 00000000..634003a7
Binary files /dev/null and b/docs-dev/images/anim-begin-time.png differ
diff --git a/docs-dev/images/anim-ease.png b/docs-dev/images/anim-ease.png
new file mode 100644
index 00000000..8afecf08
Binary files /dev/null and b/docs-dev/images/anim-ease.png differ
diff --git a/docs-dev/images/anim-edit-panel.png b/docs-dev/images/anim-edit-panel.png
new file mode 100644
index 00000000..8b987174
Binary files /dev/null and b/docs-dev/images/anim-edit-panel.png differ
diff --git a/docs-dev/images/anim-end-state.png b/docs-dev/images/anim-end-state.png
new file mode 100644
index 00000000..e39f6168
Binary files /dev/null and b/docs-dev/images/anim-end-state.png differ
diff --git a/docs-dev/images/anim-end-time.png b/docs-dev/images/anim-end-time.png
new file mode 100644
index 00000000..54f872f5
Binary files /dev/null and b/docs-dev/images/anim-end-time.png differ
diff --git a/docs-dev/images/anim-name.png b/docs-dev/images/anim-name.png
new file mode 100644
index 00000000..d13fe303
Binary files /dev/null and b/docs-dev/images/anim-name.png differ
diff --git a/docs-dev/images/anim-target.png b/docs-dev/images/anim-target.png
new file mode 100644
index 00000000..e9072440
Binary files /dev/null and b/docs-dev/images/anim-target.png differ
diff --git a/docs-dev/images/anim-type.png b/docs-dev/images/anim-type.png
new file mode 100644
index 00000000..a8291d47
Binary files /dev/null and b/docs-dev/images/anim-type.png differ
diff --git a/docs-dev/images/hierarchy-del.png b/docs-dev/images/hierarchy-del.png
new file mode 100644
index 00000000..dc8a8c8a
Binary files /dev/null and b/docs-dev/images/hierarchy-del.png differ
diff --git a/docs-dev/images/hierarchy-group.png b/docs-dev/images/hierarchy-group.png
new file mode 100644
index 00000000..eccb3536
Binary files /dev/null and b/docs-dev/images/hierarchy-group.png differ
diff --git a/docs-dev/images/hierarchy.png b/docs-dev/images/hierarchy.png
new file mode 100644
index 00000000..404bea10
Binary files /dev/null and b/docs-dev/images/hierarchy.png differ
diff --git a/docs-dev/images/history-clear.png b/docs-dev/images/history-clear.png
new file mode 100644
index 00000000..0dc93d2b
Binary files /dev/null and b/docs-dev/images/history-clear.png differ
diff --git a/docs-dev/images/history-panel.png b/docs-dev/images/history-panel.png
new file mode 100644
index 00000000..5657be77
Binary files /dev/null and b/docs-dev/images/history-panel.png differ
diff --git a/docs-dev/images/history-redo.png b/docs-dev/images/history-redo.png
new file mode 100644
index 00000000..719fd268
Binary files /dev/null and b/docs-dev/images/history-redo.png differ
diff --git a/docs-dev/images/history-undo.png b/docs-dev/images/history-undo.png
new file mode 100644
index 00000000..76b1e0d6
Binary files /dev/null and b/docs-dev/images/history-undo.png differ
diff --git a/docs-dev/images/property-checkbox.png b/docs-dev/images/property-checkbox.png
new file mode 100644
index 00000000..84c44dc2
Binary files /dev/null and b/docs-dev/images/property-checkbox.png differ
diff --git a/docs-dev/images/property-color.png b/docs-dev/images/property-color.png
new file mode 100644
index 00000000..71590c03
Binary files /dev/null and b/docs-dev/images/property-color.png differ
diff --git a/docs-dev/images/property-display.png b/docs-dev/images/property-display.png
new file mode 100644
index 00000000..ea44245d
Binary files /dev/null and b/docs-dev/images/property-display.png differ
diff --git a/docs-dev/images/property-number.png b/docs-dev/images/property-number.png
new file mode 100644
index 00000000..1fb63371
Binary files /dev/null and b/docs-dev/images/property-number.png differ
diff --git a/docs-dev/images/property-panel.png b/docs-dev/images/property-panel.png
new file mode 100644
index 00000000..8dafb780
Binary files /dev/null and b/docs-dev/images/property-panel.png differ
diff --git a/docs-dev/images/property-select.png b/docs-dev/images/property-select.png
new file mode 100644
index 00000000..7491fbde
Binary files /dev/null and b/docs-dev/images/property-select.png differ
diff --git a/docs-dev/images/property-text.png b/docs-dev/images/property-text.png
new file mode 100644
index 00000000..26fff8d6
Binary files /dev/null and b/docs-dev/images/property-text.png differ
diff --git a/docs-dev/images/script-panel.png b/docs-dev/images/script-panel.png
new file mode 100644
index 00000000..f0a9381b
Binary files /dev/null and b/docs-dev/images/script-panel.png differ
diff --git a/docs-dev/ui/SideBar.md b/docs-dev/ui/SideBar.md
index 277d2c68..d95cac9e 100644
--- a/docs-dev/ui/SideBar.md
+++ b/docs-dev/ui/SideBar.md
@@ -2,22 +2,4 @@
 
 由场景面板、历史面板、属性面板、脚本面板、动画面板组成。
 
-## 场景面板
-
-编辑场景层级结构，单击选择，双击定位。  
-
-## 历史面板
-
-查看场景编辑历史，可以快速回退到某个历史状态。  
-
-## 属性面板
-
-可视化编辑场景元素的属性。  
-
-## 脚本面板
-
-可以创建脚本，使用脚本编辑器编辑脚本。  
-
-## 动画面板
-
-配合动画编辑器可以编辑补间动画。  
\ No newline at end of file
+![image](../images/sidebar.png)
\ No newline at end of file
diff --git a/docs-dev/ui/sidebar/Animation.md b/docs-dev/ui/sidebar/Animation.md
new file mode 100644
index 00000000..15af51c4
--- /dev/null
+++ b/docs-dev/ui/sidebar/Animation.md
@@ -0,0 +1,53 @@
+# 动画面板
+
+配合动画编辑器可以编辑补间动画。 
+
+![image](../../images/anim-edit-panel.png)
+
+## 动画名称
+
+点击名称属性，可以设置动画名称。
+
+![image](../../images/anim-name.png)
+
+## 动画类型
+
+点击动画类型下拉框，可以选择动画类型，目前只支持补间动画。
+
+![image](../../images/anim-type.png)
+
+## 动画目标
+
+选择场景中的物体，点击设置目标按钮，可以将选择的物体设为动画目标。
+
+![image](../../images/anim-target.png)
+
+## 开始时间
+
+设置开始时间，单位是秒。
+
+![image](../../images/anim-begin-time.png)
+
+## 结束时间
+
+设置结束时间，单位是秒。
+
+![image](../../images/anim-end-time.png)
+
+## 开始状态
+
+设置物体开始状态。
+
+![image](../../images/anim-begin-state.png)
+
+## 插值函数
+
+设置补间动画用的插值函数。
+
+![image](../../images/anim-ease.png)
+
+## 结束状态
+
+设置物体结束状态。
+
+![image](../../images/anim-end-state.png)
\ No newline at end of file
diff --git a/docs-dev/ui/sidebar/Hierarchy.md b/docs-dev/ui/sidebar/Hierarchy.md
new file mode 100644
index 00000000..d72283fe
--- /dev/null
+++ b/docs-dev/ui/sidebar/Hierarchy.md
@@ -0,0 +1,35 @@
+# 场景面板
+
+场景面板可以编辑场景层级结构，快速选择、定位、删除场景中的物体。
+
+![image](../../images/hierarchy.png)
+
+## 编辑层次结构
+
+使用鼠标拖动树上的物体可以编辑场景层次结构。支持：
+
+1. 将一个模型作为另一个模型子元素。
+2. 两个模型之间交换一部分子元素。
+3. 将基本几何体或光源放置到模型内部。
+4. 使用`组`将多个模型组合到一起。
+5. 删除模型内部一部分组件。
+
+**如何将多个模型组合在一起？**
+
+基本几何体都支持多层嵌套。可以添加一个`组`（在几何体菜单中），然后在场景树状图上，将多个模型拖动到`组`上。
+
+![image](../../images/hierarchy-group.png)
+
+## 选择物体
+
+点击树节点可以选择物体。
+
+## 定位物体
+
+双击树节点可以快速定位到物体。
+
+## 删除物体
+
+选择物体，点击`Del`键可以删除物体。
+
+![image](../../images/hierarchy-del.png)
\ No newline at end of file
diff --git a/docs-dev/ui/sidebar/History.md b/docs-dev/ui/sidebar/History.md
new file mode 100644
index 00000000..81609c2c
--- /dev/null
+++ b/docs-dev/ui/sidebar/History.md
@@ -0,0 +1,27 @@
+# 历史面板
+
+查看场景编辑历史，可以快速跳转到某个历史状态。
+
+![image](../../images/history-panel.png)
+
+## 撤销
+
+点击编辑菜单撤销按钮。撤销的历史以灰色显示。
+
+![image](../../images/history-undo.png)
+
+## 重做
+
+点击编辑菜单重做按钮。
+
+![image](../../images/history-redo.png)
+
+## 清空历史
+
+点击编辑菜单清空历史记录按钮或历史面板清空按钮。
+
+![image](../../images/history-clear.png)
+
+## 跳转历史
+
+点击历史面板上的历史，可以立刻让场景跳转到某个历史状态。
\ No newline at end of file
diff --git a/docs-dev/ui/sidebar/Property.md b/docs-dev/ui/sidebar/Property.md
new file mode 100644
index 00000000..687e1b0c
--- /dev/null
+++ b/docs-dev/ui/sidebar/Property.md
@@ -0,0 +1,35 @@
+# 属性面板
+
+可视化编辑场景元素的属性。
+
+![image](../../images/property-panel.png)
+
+## 文本属性
+
+点击输入文本。
+
+![image](../../images/property-text.png)
+
+## 展示属性
+
+只能展示，无法编辑。
+
+![image](../../images/property-display.png)
+
+## 数字属性
+
+输入数字，点击右侧三角可以改变数字，滚动滚轮也可以改变数字。有的数字控件只允许输入整数。
+
+![image](../../images/property-number.png)
+
+## 复选框属性
+
+点击勾选和取消勾选。
+
+![image](../../images/property-checkbox.png)
+
+## 颜色属性
+
+点击选择颜色。
+
+![image](../../images/property-color.png)
\ No newline at end of file
diff --git a/docs-dev/ui/sidebar/Script.md b/docs-dev/ui/sidebar/Script.md
new file mode 100644
index 00000000..c90cf434
--- /dev/null
+++ b/docs-dev/ui/sidebar/Script.md
@@ -0,0 +1,19 @@
+# 脚本面板
+
+可以创建脚本，使用脚本编辑器编辑脚本。 
+
+![image](../../images/script-panel.png)
+
+## 创建脚本
+
+点击创建按钮，可以创建脚本。
+
+## 编辑脚本
+
+点击脚本右侧编辑按钮，可以编辑脚本。
+
+![image](../../images/script-editor.png)
+
+## 删除脚本
+
+点击脚本右侧删除按钮，可以删除脚本。