Skip to content

Latest commit

 

History

History
48 lines (34 loc) · 1.47 KB

File metadata and controls

48 lines (34 loc) · 1.47 KB

MDEase UI 参考文档

本目录存放 UI 设计参考截图,用于对齐设计与实现。图片不纳入版本控制。

参考图索引

01-sidebar-filetree.png — 侧边栏文件树

来源: 飞书文档阅读器 用途: 侧边栏整体布局参考

设计要点:

  • 左侧侧边栏显示当前文件夹下的所有 .md 文件列表
  • 当前打开的文件以蓝色背景高亮
  • 顶部有分段控件切换「文件树」和「大纲」两种视图
  • 文件列表可滚动

02-tab-files-active.png — 分段控件:文件树 Tab

来源: 飞书文档阅读器 用途: 分段控件交互设计

设计要点:

  • 两个 tab 按钮:文件夹图标(文件树)+ 三条横杠图标(大纲)
  • 当前激活的 tab 以蓝色背景 + 白色图标高亮
  • 非激活 tab 为灰色图标
  • 圆角分段控件样式,贴合侧边栏顶部

03-tab-outline-active.png — 分段控件:大纲 Tab

来源: 飞书文档阅读器 用途: 大纲/TOC 视图设计

设计要点:

  • 切换到大纲视图后,三条横杠 tab 蓝色高亮
  • 下方显示文档标题/章节列表
  • 当前阅读位置的标题有视觉区分

04-toc-filter-expanded.png — 大纲搜索框:展开状态

来源: 飞书文档阅读器 用途: TOC 搜索过滤交互

设计要点:

  • 大纲视图顶部有搜索输入框 + 放大镜图标
  • 输入框为白色背景、圆角、全宽
  • 放大镜图标在输入框右侧
  • 输入关键词实时过滤标题列表