宇镓 SLM

宇镓 SLM 是一套面向科研机构的实验室全流程管理系统。它需要覆盖的范围很广：项目管理（看板、甘特图、任务追踪、预算）、实验记录（富文本编辑、在线录音、模板系统）、物料管理（拣货、出入库、领用审批）、数据分析（实验对比）、全局搜索（文本、图片、音频、化学结构式），以及企业管理、权限、订阅升级等支撑模块。产品经理提供了完整的功能规格，我的工作是从零建立视觉语言，并独立完成全部界面设计。

这类 B2B 系统面临的设计挑战，不在于单个页面好不好看——而在于十几个模块放在一起时，整套系统是否还能保持清晰。项目看板需要同时呈现风险分布、进度统计和近期截止任务；甘特图要在有限横向空间里塞下任务名称、负责人、时间跨度和依赖关系；物料拣货页面有十几列字段需要同屏展示。每个模块都有自己的信息密度需求，但用户在模块之间切换时，不应该感觉自己进了另一个产品。

我用来统一这些差异的，是一套严格的布局结构：最左侧是固定宽度的图标导航栏，提供模块级跳转；进入任何模块后，展开二级导航列，承载模块内的功能分支；剩余空间留给内容区。这个三栏骨架在每个页面都保持一致——变化的是内容区内部的信息组织方式，而不是页面的整体框架。

这套系统需要在 1280、1600 和 1920 三种屏幕宽度下正常工作。我对同一个页面做了多组栅格比例探索——2:7:3、3:9、2:8:2、3:6:3——不是在找一个"正确答案"，而是在为不同宽度建立各自合理的比例关系。1920 下可以给二级导航和右侧辅助面板更多呼吸空间；到 1280 时，二级导航收起为可弹出的浮层，把横向空间全部让给内容区。

实验编辑页是整套系统中信息密度最高的单一界面，也是科研用户每天停留时间最长的地方。它本质上是一个领域专属的文档编辑器：主体区域是富文本编辑器，顶部是一条密集的工具栏（分为文件操作、模板、写作、审计、数据五组功能），左侧是实验目录和步骤导航，右侧是操作历史时间线。

在线录音是这个编辑器的一个特殊功能。实验过程中，研究人员经常需要一边操作一边口述记录。录音状态用一条醒目的红色横幅覆盖在编辑区上方，确保用户始终意识到"正在录音"——这是一个不能被忽视的状态，因为录音内容会成为实验记录的一部分。

一个实验室管理系统的搜索不只是"输入关键词、返回列表"。研究人员可能搜文字、搜图片、搜音频记录，甚至需要画一个化学结构式来搜索相关实验。每种搜索类型的输入方式和结果呈现逻辑完全不同。

我把搜索结果统一在两种视图模式下——网格视图和列表视图——让用户用自己习惯的方式浏览结果，无论搜索的是什么类型的内容。结构式搜索是最特殊的一个：它内嵌了一个化学结构绘制工具，支持精确搜索、子结构搜索和相似查找三种匹配模式。这个功能的界面处理需要在"专业工具"和"系统内嵌组件"之间找到平衡——它需要足够专业让化学研究人员信任，又不能脱离整套系统的视觉语言。

这套系统于 2022 年完成设计交付。十余个功能模块、三种屏幕宽度适配、三套主题色方案探索——最终交付的不只是一组效果图，而是一套能够自洽运转的视觉体系。

在这个项目里，最重要的工作往往不在单个界面内部，而在界面与界面之间：导航结构如何统一十个模块的入口逻辑，布局骨架如何在不同宽度下维持一致的空间节奏，信息密度如何在看板、编辑器、数据表格这些截然不同的场景里保持克制。