Hangzhou AllSHENG — Gary Gong

章节目录

ALLSHENG / AS232 / VISUAL DESIGN

自动化 NGS 建库工作站

以清晰、克制的视觉，
呈现专业仪器界面。

AS232 是一款面向实验室的自动化 NGS 建库工作站。我基于项目已有的功能结构和低保真方案，完成界面的视觉设计，让大量数据、操作控件与设备状态保持统一的呈现方式。

设计以科技青和浅灰为基础，通过色彩、文字层级、面板与组件状态，建立适合专业仪器的界面语言。

01视觉方向

界面需要承接密集的实验信息。视觉上以大面积浅色保持基底，青色集中用于品牌、选中状态与主要操作，减少装饰，让数据和当前操作成为画面重点。

ALLSHENG 标识与 DNA 主视觉结合，在进入密集的操作界面前先建立产品识别。

02信息层级

沿用已有的页面布局，通过浅灰底色、白色面板、细分隔线与文字灰阶区分信息层次。青色选中项从中突出，次要字段与说明保持安静，让同一屏中的信息有清晰的视觉先后。

内容区与背景使用接近的浅色，通过边界和轻微阴影分开，保留专业界面的整洁感。

标题、字段、数值与辅助说明以字号、字重和灰阶区分，避免每一项信息都占据相同分量。

主要按钮使用青色填充，次要动作使用浅色或描边；选中项延续一致的强调方式。

03色彩与状态

科技青贯穿界面识别与主要操作；绿色、红色和黄色用于不同反馈。普通、选中、禁用与确认状态在同一套控件样式上变化，使复杂页面仍保持一致的视觉语言。

演示稿以科技青与浅色背景概括视觉方向，并标注思源黑体。实际界面以简洁的无衬线文字承接英文标签和数值，配合规则对齐保持统一。

04界面应用

视觉设计覆盖运行、编辑、数据、维护与账户等页面。这里选取不同信息密度和内容形式的界面，展示色彩、面板、文字与控件如何在整套产品中保持一致。

将界面置于设备展示中，呈现整体视觉效果与品牌气质。