Enhance Viewer UI Redesign · round 9

下一版回到“报告阅读面板”

本轮在 Demo16 基础上继续细化:dock 新增一键隐藏/显示所有辅助面板;设置面板支持浏览器本地持久化默认面板策略;未设置时大屏默认显示全部辅助面板;正文段落支持桌面双击、移动端长按复制原文路径行号引用。

Round 9 current candidate

Main · Demo 17

面板偏好与段落引用

新增辅助面板一键全隐/全显;默认面板策略写入浏览器 localStorage;设置可选全部显示、全部隐藏或自定义面板;段落可复制原文行号引用。

查看 Demo 17 →

Round 8 baseline

Main · Demo 16

自适应面板控制工作台

小面板右上角按钮改成横向四字;大屏 dock 面板按钮直接显隐对应侧栏;小屏 dock 面板按钮在 dock 上方弹出、二次点击关闭、点击其他按钮切换。

查看 Demo 16 →

Round 7 baseline

Main · Demo 15

设置驱动工作台

设置面板仅写入浏览器 localStorage;可指定移动端面板底部/侧边展开;dock 去密度和常驻搜索长条;搜索弹层化;按钮固定同尺寸且四字保持 2×2。

查看 Demo 15 →

Round 6 optimization candidates

Main · Demo 12

底部抽屉移动版

参考 Demo01:移动端点击“面板”从底部展开侧栏内容;dock 去标题,按钮可文字/图标切换,状态元数据可复制。

查看 Demo 12 →
Variant · Demo 13

左右边栏抽屉版

移动端保留方位感:左侧时间线/报告从左滑出,右侧目录/状态从右滑出。

查看 Demo 13 →
Variant · Demo 14

面板总览切换版

移动端用一个统一工作台弹层切换时间线、报告、目录、状态,更像命令面板但内容是真实辅助信息。

查看 Demo 14 →

Round 5 baseline

Main · Demo 11

固定暖色报告工作台

结合 Demo07 布局与 Demo08 配色:无顶部栏、页面不整体滚动、左右面板固定且可收缩、底部 dock 集成搜索和功能按钮。

查看 Demo 11 →

Round 3/4 references

Reference · Demo 07

三栏阅读工作台

本轮主要吸收布局结构,但旧版顶部栏和 demo 化文案不再作为正式界面元素。

查看 Demo 07 →
Keep · Demo 01

移动底部控制台原版

原版保留,不覆盖。作为手机竖屏底部 dock 的基础参考。

查看 Demo 01 →
Variant · Demo 08

单文档阅读版

视觉结构:正文居中、侧栏收成顶部横向辅助条、暖色纸张感、底部胶囊 dock。适合“打开一篇报告认真读”。

查看 Demo 08 →
Variant · Demo 09

紧凑信息密度版

视觉结构:更宽、更密、双栏正文、小卡片、小按钮。适合大屏同时扫报告列表和正文。

查看 Demo 09 →
Variant · Demo 10

桌面辅助导航版

视觉结构:桌面左侧固定 app rail,无底部 dock;移动端才恢复 dock。适合桌面长期阅读。

查看 Demo 10 →

Previous round references

Reference · Demo 04

Bento 报告中心

仅保留亮暗主题切换能力作为参考,不再把 Bento 大卡片作为主方向。

查看 Demo 04 →
Reference · Demo 05

专注阅读 + 命令面板

保留专注正文和命令面板思路,但避免缩到只剩图标。

查看 Demo 05 →
Reference · Demo 06

时间线地图

本轮只吸收左侧上下文面板,不保留夸张的大留白展示形式。

查看 Demo 06 →