当“云端算力”遇上“极简未来风”，会碰撞出怎样的火花？

今天分享我们兰亭妙微团队为联想云电脑打造的PC客户端全案设计。面对游戏玩家、设计师和AI创作者这批最挑剔的用户，我们如何用设计语言诠释“速度与激情”？

一、视觉风格：从“一朵云”到“芯”未来

设计初期，我们尝试过柔和的云朵造型和多彩渐变，试图表达“云端”的轻盈。但在深入挖掘联想硬件基因后，我们决定转向更硬核的表达——双层六边形。

1、核心符号：六边形取材于芯片与电路板形态，双层结构象征“本地终端”与“云端算力”的无缝互通。

2、质感营造：通透的灰白磨砂渐变，搭配深紫基底，既保留了科技的神秘感，又平衡了硬件的专业度与云服务的轻盈感。

二、交互亮点：让算力“看得见”

云电脑的配置复杂，如何让用户一眼看懂？我们把信息层级做到了ji致：

1、性能可视化：RTX4070 vs RTX4090D，不仅用文字区分，更通过高亮霓虹发光边框和星级评分，直观展现性能差距。选配置像选装备一样爽！

2、拒绝隐形消费：计费规则透明化！页面底部固定展示实时计费标准，算力点消耗、人民币单价一目了然。消除付费顾虑，才是对用户zui大的尊重。

3、轻量化控件：为了不抢占视觉重心，二级选项采用悬浮侧边栏，不使用时自动收起。界面干净通透，长时间使用也不易视觉疲劳。

三、设计背后的思考

好的B端、工具类产品设计，不仅仅是好看，更是效率的提升。

在这个项目中，我们试图在“极客科技感”与“大众易用性”之间找到平衡。每一个按钮的圆角、每一处光效的呼吸频率，都是为了让用户在点“开机”的那一刻，感受到满满的仪式感。

北京兰亭妙微 / 深耕 B 端 UI / 客户端界面设计/ 小程序界面设计/ APP界面设计

用心做好每一份落地实用的视觉方案。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

做B端或者门户网站设计的宝子们看过来！今天分享一个兰亭妙微原创作品——非常典型的行业门户改版案例。

这种传统垂直行业的网站，容易出现的问题就是“界面老化”和“信息杂乱”。这次改版的核心目标非常明确：在保持权威性的同时，提升视觉美感和交互体验。来看看设计师是怎么化腐朽为神奇的吧！

一、 项目背景：打破沉闷

原网站作为中储棉花信息中心的直属网站，虽然内容权威，但视觉呈现已经跟不上时代，关键信息呈递杂乱，用户阅读体验较差。 改版重点：

重塑形象：契合用户需求与市场期待。

交互升级：实现视觉美感与流畅性的融合。

信息降噪：让专业权威的讯息更易读。

二、方案探索：风格博弈

兰亭妙微设计团队给出了三种截然不同的主页方案，这个思考过程很值得参考：

方案1（蓝色系）：主打国际化，创新的报告布局动效，内容条理更清晰。

方案2（绿色系）：优化资讯层级，布局稳重，强调信息的易读性。

定稿方案：结合了视觉美感与功能性的平衡点。

三、 核心优化亮点（划重点！）

这次改版不仅仅是换个皮，在交互细节上做了很多巧思：

1、资讯层级重构

痛点：旧版内容分类不清晰。

解法：将文字标题分为“置顶/推荐/往期”三个等级。首屏位置就能展示不同重要性的推荐内容，主次分明，用户一眼就能抓取重点。

2、检测报告动效化

痛点：旧版是枯燥的列表，很难快速定位特定报告。

解法：进行了模块分类整理，增加了鼠标移入的动效展示。详情页显示信息与简要描述，通过“往期”可回溯，极大增加了趣味性和互动性。

3、地图可视化交互

亮点：在地图上直观反映供求公司。

功能：支持通过筛选快速获取某地区棉花信息，清晰查看产业总数据与各地占比，把枯燥的数据变成了直观的地理信息。

四、设计感悟

对于这种B端门户类项目，设计的难点往往不在于“炫酷”，而在于如何在海量信息中建立秩序。通过层级划分、动效引导和数据可视化，让专业内容变得“平易近人”，这才是高级感的来源。

大家在做类似项目时，也可以多参考一下这种资讯层级的处理方式哦！

近期兰亭妙微团队完成了一个智能制造领域的B端设计项目，今天就来和大家分享一下设计思路和优化过程。

B端产品的设计核心，往往在于如何在复杂的业务逻辑中，理清头绪，让关键信息高效、直观地呈现给用户。这次的优化正是围绕“高效”二字展开。

在确定整体风格时，我们主要遵循了三个原则：

1、品牌感：采用与客户品牌一致的色调和设计语言，确保产品系列的统一性，强化品牌认知。

2、简洁性：页面设计的核心是“化繁为简”。我们将重要的数据和预警信息突出展示，减少不必要的视觉干扰，提升信息的可访问性和可用性。

3、高效性 ：通过精简的界面布局、扁平的层级结构和直观的信息展示方式，力求让用户在短时间内找到所需信息，从而提高工作效率。

核心设计思考与优化

1、导航重塑：聚焦核心内容

【弱化导航】我们弱化了导航栏的背景，打造沉浸式的浏览体验，让用户能将更多注意力聚焦在页面核心内容上。

【横向折叠】侧边导航采用了可横向折叠的设计，在需要时可以收起，为数据展示区释放出更多横向空间，承载更多内容。

2、布局重构：信息分区更清晰

我们将整个驾驶舱页面重新规划为三个核心区域，让信息架构一目了然：

【左侧导航区】相比顶部导航，左侧导航能展示更多条目，且符合用户从上到下的自然浏览习惯。我们增加了收起功能，方便用户在专注处理信息时大化内容区域。同时，菜单背景叠加工厂的作业场景图， subtly 突出了软件的行业主题。

【中间信息展示区】这是页面的“C位”。顶部是主题卡片和可自定义的快捷入口；中部和下部则是核心数据图表展示区，图表颜色严格遵循品牌规范，在传递信息的同时也强化了品牌感。

【右侧个人信息区】将个人信息、待办事项和报警信息整合为卡片形式。

【待办任务】这是新增的模块，根据不同角色的业务人员展示不同的待办内容，非常实用。

【报警信息】将原有的列表形式进行了优化，重点突出报警等级和标题，让异常情况更加清晰明了，便于快速响应。

3、数据可视化：提升管理效率

借助图形化手段，将复杂、抽象的数据条理清晰地传达出去。我们根据每个模块的业务性质，为其选择了合适的图表类型，让数据“自己说话”，有效提升了线上管理的效率。

这次设计优化，不仅是一次视觉上的升级，更是对业务流程和用户体验的深度思考。

希望这个案例能给同样在做B端设计的你带来一些灵感！

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

谁说B端医疗软件只能是枯燥的表格？

今天分享一个把严谨科技做成艺术品的案例——德祥生物全自动血型分析系统。

由兰亭妙微（蓝蓝设计）操刀，这次不仅是UI升级，更是一场关于“效率与美感”的深度重构！

亮点一：色彩心理学的应用 

摒弃传统高亮色，采用冷调蓝+浅灰背景。

目的：降低视觉噪点，缓解检验科医生长时间工作的视觉疲劳，同时保持医疗设备的严谨感。

 亮点二：信息层级重构（左-中-右）

左侧导航：功能分区明确，快速切换；

中间核心区：模拟物理卡盘形态，直观展示运行状态；

右侧数据区：关键指标（样本数、完成率）实时悬浮。

目的：符合人眼扫描习惯，缩短寻找信息的时间，提升操作效率。 

亮点三：异常状态的强提醒 

利用红/绿/蓝三色建立条件反射。

目的：无需阅读文字，余光扫过即可判断设备是“正常”、“进行中”还是“报错”，极大降低事故风险。 

设计师碎碎念： 

好的B端设计，是在克制中找平衡。 既要满足微流控技术的复杂参数展示，又要保证界面的清爽易用。 这套设计做到了“始于颜值，忠于效率”，值得所有医疗SaaS产品经理参考！

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

最近一直在做GIS监测类的项目，从大气污染到生态资源，从气象预报到城市管网。越做越觉得，GIS监测的设计，真的不只是“画个好看的地图”那么简单。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。

项目背景：

该系统由青海师范大学委托进行重点页改版，旨在参加环保信息化领域的比赛。原系统界面功能区划分明确，但数据堆叠较为拥挤，视觉比重失衡，信息层级模糊，导致用户难以快速聚焦核心内容。

设计策略与优化：

1、风格定位：采用科技感设计语言，以深蓝为基底，通过背景图案增强纵深感，辅以科技感边框与线条点缀，在丰富页面层次的同时突出关键数据。

2、信息重构：面对庞杂数据，去粗取精，提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用，强化主次层级，使用户能够以直观的方式获取信息，有效降低理解难度。

3、视觉优化：以清晰图表替代文字堆砌，适度留白营造呼吸感。关键数据浮于场景之上，形成空间层次，在有扩展性的同时提升阅读体验。

4、场景落地：完成全国页面及山西省临汾市专题页的精细化设计，涵盖治理事件、效果分析及污染浓度趋势等核心模块。

一点感悟：

大屏设计的核心难点从来不是炫技，而是将复杂数据转化为清晰易懂的信息。界面之美，在于让用户"一眼就懂"。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

民宿预订平台的首页设计如何精准捕捉年轻用户？木鸟、途家、美团三大平台通过差异化的首页布局，分别满足了00后的场景化需求、家庭度假的深度体验和95后的低价偏好。本文将深入拆解各家平台的流量分发逻辑，揭示从搜索框到金刚区的每一个设计细节，如何成为影响用户决策的关键因素。

首页作为每个平台的门面，不仅是形象的体现，也是所有业务的入口、用户的必经之路。不同功能的App有着不一样的首页模块，选择一种适合产品本身的首页展示方式非常重要。国内民宿预订平台们，又是如何通过APP首页设置实现增长的？

木鸟、途家、美团用户群体差异

开始进行APP首页对比分析之前，我们先看下木鸟、途家、美团用户的差异。

木鸟民宿近年的年度报告中多次提到，00后用户占比59%。从途家民宿五一客群看，报告中提到：“00后”和“80后”是小城民宿消费的两大主力，预订量占比都达到24%。美团旅行清明报告中提到，“95后”占比达到48%。

三大民宿预订平台纷纷聚焦95后及00后——那些已经不满足于“酒店住宿”逻辑，对住宿体验产生兴趣的年轻用户群。

据马蜂窝数据，年轻用户群基础功能型的“硬性消费”占比从2021年约70%降至2025年约50%，而精神体验型的“弹性消费”则从约28%升至约42%，沉浸式体验年增速超过30%。千人千面的消费需求正在倒逼供给侧从标准化产品转向个性化、场景化供给。

回顾民宿市场十余年发展，一条清晰脉络是“加法逻辑”：从最初的农家乐、日租房，再到网红特色民宿，再到各种“民宿+”的挖掘。用户不再满足于单纯的民宿入住，开始期待有更多住宿功能场景之外的体验。

木鸟的细分场景、途家民宿的度假需求、美团民宿的低价体验，都不是标准化复制，而是根据各自不同的定位、用户、体验需求定制设计。本质上，是回答清楚一个问题：用户在什么场景下住民宿，旅游出片、携宠出游、周末度假、同学聚会，不同场景对应不同需求，最终催生出不一样的产品设计。

从首页设计看流量分发逻辑

研究表明，较少的选择会让用户更愉悦一些。木鸟、途家、美团作为垂类民宿预订平台，核心目标非常直接，省去了多元业务的流量取舍，流量分发和路径非常清晰。

从三家民宿预订平台的首页来看，首页的结构制定逻辑决定了首屏内容是权重最高的，越往下权重越低，这是一种头重脚轻的布局结构。基于这种逻辑，视觉效果的强弱也是由上到下衰减的，而不是下方权重低的模块反而视觉最突出。

木鸟、途家、美团APP的首页都把最核心的民宿预订按钮放到了首页首屏中心位置，重要属性依次下降。木鸟民宿区别于途家和美团民宿的点在于，木鸟民宿只有首屏，没有下拉界面。这样做的好处有二：一是用户目光更聚焦，核心首屏只保留了必要的预订功能和服务展示，减少用户在首屏阶段的跳出；第二点则是避免了二屏往后的流量衰减，对一个垂类平台来说，后续屏的设置意义不大，用户的核心目的就是为了订民宿。

下面笔者结合各家APP的详细路径来详细拆解。

（木鸟民宿）

木鸟民宿首页，重要的分流模块为：搜索、订民宿、二级导航、金刚区，分发逻辑由明确需求和隐形需求两部分组成。

明确需求：用户有明确目的，通过城市及地标定位直接查找民宿；隐形需求：根据用户兴趣不同，潜在需要的分发逻辑，例如周末出游、人气好房、宠物出游等。

明确需求各家差异不大，核心差异点在隐形需求。首页的又一个关键目标，是为不同风格不同诉求的用户铺设合理的下单路径。

按入住目的来分，有的用户是精准型用户，很清楚自己要住在哪里要哪天出行，这样的结构就方便用户一次筛选入离时间、地标位置等；有的用户是半精准用户，知道自己要去哪个城市但不具体，就可以通过目标推荐给与用户选择。

按出行喜好来分，有的用户是问题导向型，只要有地理位置符合的民宿就可以入住；有的用户是场景指向或特殊需求，比如携宠出行、出片等等。

木鸟民宿的目的分区相对清晰，没有重复的部分。

（途家民宿）

途家民宿的首页功能则相对繁琐，各种需求穿插出现。明确需求部分和木鸟民宿的逻辑相同，不同点在于宫格设置。途家民宿的宫格重点在平台侧的套餐推广和会员，这个区别或许是由于途家民宿营收压力增大，流量下滑导致单纯的订房佣金收入下滑，不足以支撑途家民宿的自造血，从而平台侧变现需求大。

（美团民宿）

美团民宿首页没有平台业务需求的设计，单纯的展示内容资源。首页结构单一，视觉美观，但屏幕效率低。

用户为什么要留在这里？

从三家民宿预订平台的首页结构拆解可以看出，木鸟民宿用户侧和平台侧设计相对平均，途家民宿重平台需求，美团民宿重用户需求。这与各平台的运营现状紧密相关。

木鸟和途家是中国最早的那批民宿平台，在2017年之后进入长时间的木途美三大时期。但在2020年途家民宿关停20城直营房源之后，途家民宿的现金流和营收压力骤然增加，携程商旅流量下滑加之重心转向跨境游，途家民宿可谓雪上加霜，难以独立行走的途家靠自身引流的佣金费用并不足以支撑商业运转，从而平台侧变现需求增加，这也是途家在首页中增加套餐和会员业务的最大因素。

木鸟民宿自2020年实现连续盈利后，尽管是一个独立运营的平台，但80%的自有流量让木鸟实现了良好的“流量-订单-扩张”的循环，网红民宿以及延伸的细分场景成为平台引以为傲的产品力，这也使得木鸟兼具用户体验和营收增长的双端利好条件。

美团民宿在首页舍弃了平台侧内容，主要和美团本地生活的发展息息相关。自外卖大战开始以来，美团确立的就是高频带低频的战略，酒旅的变现压力更多的放在主站美团旅行板块，对独立APP的要求并不大。

首页设计的最终目标还是要围绕让用户多逛逛，多看些民宿，以更少的点击完成转化。除设计外，重要的还是民宿平台的房源和服务。木鸟民宿依托特色民宿体验场景守住核心用户，途家期待通过家庭度假需求弥补商旅流量流失及特色体验短板，美团聚焦绝对低价民宿削弱品质缺失。因此，真正能让用户留下来的，仍在于平台能否在民宿市场的发展更新中，找到不可替代的生态位。

转载自：人人都是产品经理

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

近期和团队一起完成了一个超酷的项目——飞秒激光时域热反射测量系统（TDTR）的软件UI设计。

不得不说，做科研设备设计真的太“上头”了！

这不仅仅是一个软件界面，更是连接科学家与纳米世界的窗口。

分享一下我们的设计思考，希望能给做B端、科研仪器设计的姐妹们一点灵感～

1. 项目背景：让复杂的测量变简单 客户是一家专注于热学测试设备领域的科技企业。 

设备用途： 测量纳米薄膜热导率、界面热阻等。

 核心挑战： 如何把微纳尺度的复杂数据，转化成直观、易操作的视觉语言？ 我们输出了深色和浅色两套方案，客户一眼相中了浅色方案！理由是：干净、通透，长时间盯着屏幕做实验眼睛不累。

2. 设计亮点：严谨中的“小心机” 

配色逻辑：红灰CP太绝了！

灰色背景： 作为基底，最大程度保证了数据图表的清晰度，不抢戏。

 红色点睛： 作为品牌主色和警示色，关键操作按钮和重要数据用红色突出，既符合工业严谨性，又增加了视觉活力。

图标设计：低饱和度的“科研风” 没有用花里胡哨的渐变，而是采用几何图形+数据可视化元素。

线条扁平化，小尺寸下也能看清，降低科研人员的认知成本。

布局：多面板分栏 左侧控制参数，中间展示实时数据，右侧显示拟合分析。

这种布局让科研人员可以“一眼看全”，不用频繁切换页面，大大提升了实验效率。

3. 从设计到落地：高还原度的秘密 让人骄傲的是，我们不仅做了UI设计，还负责了QT前端开发！ 

通过多轮的效果走查，我们实现了设计稿的高还原度落地。看着设计图变成真正能跑代码、能测数据的软件，这种成就感真的爆棚！

4. 设计师碎碎念

做科研仪器设计，“克制”是最大的美德。 我们不需要炫技，只需要让数据更清晰，让操作更流畅。每一个像素的打磨，都是为了致敬科学的严谨。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天分享分析一套名为「APEX」的航天发射与回收控制台 UI 设计系统——它可能是近年来暗黑系数据大屏领域最完整的作品之一。

────────────────────────────────────────

一、品牌系统构建：从 Logo 到物理载体的完整闭环

上图是Logo Construction 页面，包含几何图形构建过程、Key Values 清单、Clear Space 规范、On-Board Panel 金属铭牌效果图、ID Card 工牌效果图。

这套设计的起点不是界面本身，而是一个完整的品牌识别体系。Logo 采用几何化的"M/N"折线图形，通过严格的网格系统和角度标注（A1 60°、A2 60°）完成构建。这种做法传递出一个信号：这不是"画出来的"，而是"工程推导出来"的。

三个值得注意的品牌细节：

• Key Values 清单将 Corner Radius、Stack Ratio、Grid Multiple 等参数量化到小数点后两位——这种"伪工程规范"的呈现方式，本身就是一种视觉叙事手段，让品牌看起来像真实的军工项目

• On-Board Panel 金属铭牌效果图：把 Logo 做成金属蚀刻效果，配合 S/N 序列号和规格参数（AL-142 SPEC: AMS 4027），完成了从数字设计到物理实体的视觉跨越

• ID Card 工牌：Operator / Alex Chen / Launch Director / EXP 12/2026，用真实工牌的格式强化了整个项目的沉浸感

设计启示：B 端/工业级 UI 项目，如果能在界面之外补充品牌载体（铭牌、工牌、实体 Mockup），说服力会呈指数级增长。

────────────────────────────────────────

二、设计叙事：用文档页面讲一个完整的故事

上图是The Brief 文档页 + WHAT BROKE ON B-04 事故报告页。

这套作品最独特的地方在于：它不只是"好看的界面"，而是有故事背景的完整设计系统。

The Brief 页面采用类似军方密件的红头文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息栏，正文用衬线体排版，引用语"We launch the booster every twenty-three days. We recover it every twenty-three days"营造出强烈的任务氛围。

B-04 事故报告页则展示了另一种信息架构能力：

• Mission Timeline：一条时间轴贯穿从 PRE-IGNITION 到 RECOVERY COMPLETE 的全过程，关键节点（T+04:57 TELEMETRY GAP · 30s）用黄色高亮 + 虚线框标注异常区间——这是非常成熟的事件标注模式

• Operator Stress Map：三张并排的折线图分别展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力负荷曲线，黄色渐变填充区域直观标示高压时段

• Operator Testimonials：底部三张引言卡片用双引号图标 + 小字署名，把冷冰冰的数据还原为人的体验——"We were guessing for thirty-eight seconds"

这种"数据 + 人文叙事"的组合，是高端 B 端设计区别于普通仪表盘的关键差异点。

────────────────────────────────────────

三、概念锚定页：一句话建立全局认知

上图是One surface. Four operators. Nine minutes. 概念标题页。

"One surface. Four operators. Nine minutes."

这句话只有六个英文单词，但它完成了三件事：

• 定义了交互范式（One surface = 统一操作界面）

• 定义了用户角色（Four operators = 四个操作岗位）

• 定义了时间约束（Nine minutes = 任务窗口）

下方四张线稿风格的人物侧脸插图（Launch Director / Telemetry Officer / Recovery Captain / Engineer），用极简的轮廓线勾勒出角色身份，每个头像下方标注岗位名称。这种处理方式在视觉上极度克制，却信息量充足。

设计启示：任何复杂系统的 UI 设计，都应该有一个"一句话概括"的概念页。它不仅是封面，更是整个设计系统的"宪法"——后续所有界面的设计决策都要能回溯到这句话。

────────────────────────────────────────

四、主控面板：T-Minus 倒计时作为视觉锤

上图是主控面板总览 + Launch Director 主界面。

这是整套设计的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等宽字体占据左半屏视觉重心，周围是大量留白——和之前分析的车辆仪表盘使用的是同一策略：让数字自己说话。

但这套设计在此基础上做了更极致的延伸：

① System Readiness 点阵网格 右侧用一个 8×8 的方格矩阵表示系统状态，每个子系统（Avionics / Propulsion / Range / Payload 等）对应一个格子。绿色 = GO，橙色 = HOLD，红色 = NO-GO。这种"一目了然"的状态表达方式比文字列表高效得多——用户可以在 1 秒内扫完所有子系统健康状态。

② Auto-Sequence Path 自动序列路径 左侧竖向排列的任务清单（Sensor Calibration → RF Uplink Established → Range Clearance...），每个任务前用三角形图标表示状态：绿色 ▲ = 已完成，橙色 ⚠ = 等待中，灰色 = 未开始。这是一种非常清晰的线性进度可视化方式。

③ 火箭线稿插画 右侧大面积区域放置火箭透明线稿图（Wireframe），内部用绿色渐变填充表示液氧（LOX）储量——84.2%。这种"技术蓝图 × 实时数据"的组合，既提供了设备形态参照，又嵌入了关键运行参数。

④ Secure Audio Channel 音频通道波形图 右上角的小型音频波形条（AES-256 ACTIVE），暗示这是一个实时通讯环境。这类"微细节"的存在感虽然弱，但对营造专业氛围至关重要。

────────────────────────────────────────

五、多角色界面分工：四个视角，四种数据密度

上图是Stage 1 LOX 详情 + 引擎集群温度监控。

上图是Launch Director 与 Telemetry Officer 并排对比。

上图是Recovery Captain 与 Engineer 并排对比。

这套设计最令人印象深刻的架构决策是：为四个不同角色设计了完全不同的数据视图，且每个视图的信息密度和数据类型都精确匹配该角色的职责：

Stage 1 LOX 详情卡片的设计尤其出色：

• 84.2% 用超大的绿色等宽字体显示

• 右侧是一个透明的圆柱形容器 3D 渲染图，内部绿色液体高度与百分比对应——数据可视化与三维插画的完美融合

• 下方列出 TEMP（-183.4°C）和 PRESSURE（4.2 BAR），字体大小层级清晰

• 引擎集群部分用九宫格排布九个引擎喷口，每个喷口上方标注编号，其中 #07 用橙色高亮标记异常温度（1120°C），#03 和 #09 显示正常温度

Engine Cluster 温度条形图：底部一根横向的温度分布条，从绿（420°C）过渡到黄再到红（1480°C），ENG-07 区域明显偏黄/橙——一眼就能定位哪个引擎出了问题。

────────────────────────────────────────

六、拓扑结构：从全局理解信息流转

上图是TOPOLOGY 拓扑图。"Four roles. Two locations. One protocol."

这张拓扑图回答了一个核心问题：四个操作员之间是什么关系？数据怎么流动？

画面布局清晰地展示了信息链路：

• Ground Station（地面站卫星天线）→ 通过 Fiber Backbone 连接到 Mission Control（任务控制中心）

• Mission Control 内部有两个席位：Launch Director + Telemetry Officer

• Mission Control 通过 Orbital Uplink 连接到 Satellite GEO-04

• 同时通过 Manual Override/Fallback 链路连接到 DroneShip "North Star"（海上回收船）

• DroneShip 上有另外两个席位：Recovery Captain + Engineer

• 还有一个独立的 Meteorological Mesh / Atlantic 气象数据源

每条连线都用虚线 + 不同颜色区分（绿色 = 正常链路，黄色 = 备用链路，红色 = 应急链路），并标注了延迟时间（Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms）。

设计启示：复杂系统的 UI 设计，如果缺少一张"上帝视角"的拓扑图，用户就很难建立对整体架构的心智模型。这张拓扑图就是整个系统的"地图"。

────────────────────────────────────────

七、轨道与大气层：飞行阶段的动态数据表达

上图是轨道飞行视图 + Ascent 阶段视图。

这是整套设计中最具视觉冲击力的页面之一：

上半部分：地球边缘的太空视角，可以看到城市灯光分布在大陆上，一枚白色箭头轨迹线从地表射入太空，旁边标注 8.42 MACH 和 112.4 KM —— 当前速度和高度。右上角的状态标签显示 MAX-Q CLEARED（已通过最大动压点）。

下半部分分为多个数据模块：

• Aerodynamic G-Force：左侧的 G 力曲线图，红色斜纹填充区域标示危险范围，白线表示当前值（// critical load 6.22G //）

• Aerodynamic Heating：六边形蜂窝热力图，中心亮红色表示最高温区（Peak Nose Core Temp: 1,940°C）

• Flight Event // WECO：事件列表，[ STAGE 1 CUTOFF CONFIRMED ] 用绿色标注已完成事件

• Trajectory Attitude：右侧小型地球仪显示当前姿态角（Pitch: 48.1°, Roll: 0.8°）

特别值得一提的是下图的变体版本——部分区域被黄色/黑色斜纹遮罩覆盖，模拟军事系统中常见的"机密信息遮盖"效果。这种细节处理极大地增强了真实感。

────────────────────────────────────────

八、物理环境融合：从屏幕走进控制室

上图是真实控制室环境中的大屏渲染。

这张图把 UI 从"屏幕截图"提升到了"空间体验"层面：

• 整个控制室笼罩在红色应急灯光下，营造出紧张的事故处置氛围

• 中央大屏显示的是 Telemetry Officer 的雷达界面（红色主题）

• 大屏前方坐着几位操作员的剪影背影，他们面前还有各自的工作站屏幕

• 右上角的数字时钟显示 3:20，暗示这是某个关键时刻的时间戳

为什么这张图重要？

大多数 UI 设计只停留在 Figma/Sketch 的画布上。但这套设计考虑了物理环境中的呈现效果——红色环境光如何影响界面的可读性？大尺寸投影下的字号是否足够？多人协作时的视线方向是否合理？这些"超出像素"的问题才是决定实际落地质量的关键。

────────────────────────────────────────

九、应急模式：颜色反转传达紧急状态

上图是Aborted/Ordnance 中止/引爆界面。

当系统进入中止/紧急模式时，界面发生了显著变化：

• 主色调从绿色切换为红色：正常态的绿色元素全部变为红色或橙红色

• 圆形雷达视图中央显示 KSC LAUNCH-PAD 39A，外围有多层同心圆环（绿色→黄色→红色）代表不同的安全区域边界

• Exclusion Zone [ EXCLUSION ZONE ] 标签用红色菱形图标标记禁区

• 左上角显示 ABORT 状态标识，左侧边栏也变为红色调

• 底部的 Flight Termination System 面板显示 [ ORDNANCE ARMED ] 状态，KEY_ALPHA / CMD 显示 [AUTHORIZED] 或 [PENDING]

这种基于状态的色彩系统反转，是高风险行业 UI 的标准做法——用户不需要阅读文字，仅凭颜色就能判断当前处于"正常"还是"紧急"状态。

────────────────────────────────────────

十、回收作业：海上着陆区的精密监控

上图是DroneShip 回收船甲板监控界面。

Recovery Captain 的主界面展示了海上回收阶段的全貌：

• 顶部状态栏：Vessel 名称 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS

• Sea State & Wind：左上角海况热力图，Speed 14 KTS，Sea State 3 (MODERATE)

• 甲板俯视平面图：中央大型区域显示无人机船甲板布局，三层同心圆环（SAFE ZONE / RISK ZONE / ABORT ZONE），目标落点用绿色菱形标记

• 底部四模块：

• Grid Fins：四个舵面角度滑块（+02° ~ +05°）

• Deck Impact & Legs：着陆冲击热力图 + 四条着陆腿状态（LANDING LEGS: DEPLOYING...）

• Action Zone：机械臂抓取装置的线稿图 + [ DECK SECURE ] 按钮

黄色/黑色警示条纹的使用也是一大亮点——多处区域用斜纹条纹表示"受限/加密/不可用"，既是功能表达也是一种视觉节奏的调节手段。

────────────────────────────────────────

十一、子系统模块化：可组合的数据单元

上图是Module 03/04 和 Module 05/06 子系统详情。

最后两张图展示了子系统的精细化设计：

Module 03 — VECTOR THRUSTERS（矢量推进器）：

• 四个推进器的 3D 线稿图，每个箭头标注推力方向

• 推力数值直接标注在推进器旁：42% / 38% / 89% / 34%

• 底部状态栏：DP MODE: STATION KEEPING [ ACTIVE ]

Module 04 — ALTITUDE TELEMETRY（高度遥测）：

• 一条下降曲线图，横轴为 TIME TO IMPACT（撞击倒计时），纵轴为 ALTITUDE

• 下方两个超大数字：ALT: 1,240m / SINK RATE: 42 m/s

Module 05 — G-FORCE TELEMETRY：

• G 力曲线图，红色区域标示危险范围

• 注释文本：// critical load 6.22G //

Module 06 — STAGE SEPARATION & MECO：

• 事件确认列表 + 多组进度条（Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等）

• 右侧火箭剖面图标注各部件状态（Pneumatic Clamps: RELEASED）

这些模块化的设计使得整个系统具有极强的可扩展性——新增一个子系统只需增加一个 Module 卡片，而不需要重构整个界面。

────────────────────────────────────────

总结：8 条可迁移的设计方法论

这套 APEX 发射控制系统 UI 给我们留下了以下可直接应用的设计原则：

1. 从品牌到界面的全链条设计：Logo → 工牌 → 铭牌 → 界面 → 物理环境，每一个触点都在讲故事

2. 概念先行，一句话定义系统："One surface. Four operators. Nine minutes." 让所有设计决策有据可依

3. 角色驱动的差异化界面：不同岗位看到不同数据，信息密度精确匹配职责需求

4. 状态即颜色，颜色即语义：绿色=正常/GO，黄色=警告/HOLD，红色=紧急/NO-GO/ABORT

5. 点阵网格替代状态列表：System Readiness 的方格矩阵比文字列表快 5 倍完成认知

6. 线稿插画承载工程美感：透明线稿 × 数据填充，比写实渲染更有"控制室"的专业感

7. 拓扑图是复杂系统的必需品：没有"地图"，用户就无法建立全局心智模型

8. 考虑物理环境的影响：屏幕上的好看 ≠ 控制室里好用，环境光、观看距离、多人协作都是设计变量

────────────────────────────────────────

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。