Codex + 可视化大屏工作流实践:15 个行业场景的设计产出合集

最近在制作一套大屏设计稿工作流,过程中陆续产出了一些不同场景、不同风格的设计图。

这次把这批设计稿整理出来,集中分享一下。从城市、能源到工业、交通,同样是数据大屏,换一个业务场景,画面的重点和信息组织方式也会跟着变化。

除了常见的深色科技风,我也尝试了浅色界面、绿色配色,以及更突出建筑、设备和地形的三维场景。下面按主题放图,每组简单介绍几句。

🍋01|智慧城市

以城市全景为视觉中心,将交通、市政、环境等信息分布在周围。希望既能看到城市的整体面貌,也能快速找到需要关注的运行指标。

🍋02|数智福建

围绕福建省域地图展开,将区域概况、产业结构和发展趋势放在同一张画面中。这组尝试了不同的地图质感与配色,让地域特色更突出。

🍋03|广东新能源

以广东地形为主体,结合风电、光伏与储能元素,呈现新能源运行态势。深色与浅色版本带来不同观感,也在探索能源主题与地图细节的表达方式。

🍋04|电力运行监控

以全国地图和节点连线表现电力运行的空间关系,两侧配合负荷、能源结构与告警信息。整体采用蓝青色调,突出监控中心的视觉氛围。

🍋05|工业 SCADA

把储罐、泵组和管线作为画面主体,将设备状态与工艺参数放回对应的场景中。这组包含三维场景图与不同风格的界面版本,探索设备关系和工艺信息的呈现方式。

🍋06|智慧厂房

通过厂房剖切与分层展示,把产线、仓储和设备区域放在一张图里,再结合生产、能耗与运行状态信息,形成厂房运营总览。

🍋07|智慧工厂

这组更聚焦车间内部,以三维空间展示不同功能分区,并搭配分区用电、设备状态和环境数据。不同配色下,空间结构与数据之间的关系也有不同的表达。

🍋08|智慧楼宇

以楼宇剖面展示不同楼层,通过高亮区域关联环境指标与告警信息。把能耗、设备和楼层状态放到建筑场景中,方便理解信息对应的位置。

🍋09|智慧机场

以航站楼和机坪为中心,结合航班、机位、旅客流量与运行保障信息。机场场景本身比较丰富,这组也在尝试平衡场景展示与数据阅读的比重。

🍋10|智慧港口

围绕码头、岸桥、船舶和集装箱展开,将设备状态、作业效率与告警信息关联到港口场景中。通过颜色和标注,让重点设备更容易被找到。

🍋11|物流枢纽

以全国地图呈现枢纽分布和运输线路,并尝试用线路专题视图展示运输过程。结合区域业务量、作业变化与运行明细,把分散在不同地区的信息组织成可以整体查看的画面。

🍋12|无人机监控

将无人机任务与城市、地形空间结合,展示飞行路线、机队状态和任务进度。画面既保留区域总览,也为单架无人机的电量、速度和高度留出展示位置。

🍋13|水利工程

以水坝和库区为主体,结合水位、流量、闸门运行及坝体监测信息。希望通过场景与图表的配合,让工程状态和数据变化能够一起被看见。

🍋14|数字农场

以温室大棚和露天种植区为主体,结合种植分布、墒情监测、水肥执行和农事安排,呈现农场生产管理的整体状态。这组包含深色与浅色界面、场景底图,以及配套的农场人物素材,展示工作流中的不同设计产出。

🍋15|数字乡村

围绕村落、田园和河流展开,把人口分布、田园产业、便民服务与人居环境信息融入乡村全景。这组尝试了清爽的浅色山水风格与深色绿色界面,让乡村空间和治理信息形成更直观的联系。

对我来说,比较有意思的是:同一个主题,换一种配色、布局或场景表现方式,就会产生很不一样的观感。大屏可以有科技感,也可以明亮、克制,或者带一点地域气质。

后面继续完善这套工作流,再把新的设计尝试整理出来分享。

你更喜欢哪一组?也欢迎留言聊聊,你想看到什么场景的大屏设计。

如果你需要上面设计稿原图的话,可以来 柳杉前端 公众号 同名文章自取哈。

相关推荐
@#¥&~是乱码鱼啦1 小时前
ArkWeb开发手记05|SPA单页H5适配、自定义历史栈与全局状态同步
前端·harmonyos
peter67681 小时前
vue学习小结
前端·vue.js·学习
七仔啊1 小时前
数字孪生大屏设计器
前端
知野小兔1 小时前
JavaScript 数组方法大全(超详细整理)
开发语言·前端·javascript
火眼金睛记单词1 小时前
零基础成人重拾英语:第一个月的30天行动地图
前端·经验分享·学习·小程序
Summer-Bright1 小时前
深度 | OpenAI 甩出 722 篇数学论文,但黎曼猜想并没有被证明
人工智能·数学·openai
ljt27249606611 小时前
Vue笔记(十二)--mitt
前端·笔记
用户0333074139514 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey14 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端