最近在做一个运营监管平台大屏。
这类项目通常模块多、信息层级复杂,中间地图既是视觉中心,也是核心业务载体。
如果完全按照传统方式推进,通常会经历这样一个过程:
搭结构 → 调视觉 → 做素材 → 调地图 → 补图标 → 调整体氛围。
很多时间其实都消耗在试错和方案沟通上。
所以这次项目里,我继续尝试把 GPT Image2 放进真实设计流程,用它辅助我完成几个关键节点
验证视觉方向 → 沉淀设计资产→辅助设计判断 → 统一业务资产→ 预演地图方案
先看走 AI 流程产出的最终效果,从原型 → AI效果探索 → 最终落地。
下面按真实流程拆开讲讲。
拿到原型后,我没有直接开始画视觉稿。
第一步先把原型给到 GPT Image2,让它帮我快速拍几轮方向。
直接把原型丢给 AI,让它辅助整理视觉描述,再通过 GPT Image2 出效果图。
这一步的重点是用较低成本快速看到多种可能性,所以会需要进行多轮的调整。
得到一版整体方向相对明确的方案,我们就可以进入下一轮。
对于大屏项目来说,这一步最大的价值是:在真正投入设计之前,先把视觉方向跑出来。
但对于大屏项目来说,装饰元素往往非常多,直接照着整张图还原并不是最优解。
来回生图、改尺寸、抠图产生的工作量不如直接绘制。
所以我们需要整理真正有价值的设计资产,类似于背景、氛围、 icon 等可以采用 image2 直接绘制。
这一步本质上是把 AI 产出从“效果图”转成“设计资产”。
这样后面回到设计工具里组合时,背景可以单独铺底,光效可以叠加到地图后面,装饰元素也可以在其他页面继续复用。
如果遇到素材背景尺寸不够、细节不够,或者和最终页面比例不匹配等问题,可以继续利用 GPT Image2 做补充和扩展。
经过这一步处理以后,素材就不再只是效果图的一部分,而是真正可以进入项目资产库的内容。
小建议
类似头部装饰卡片、半透明元素等这类素材拆出的效果并不好,如果是正式项目交付,建议重新绘制。
GPT Image2 除了生图,在项目推进过程中,用来分析页面也是非常棒的设计搭子。
比如,拿到的原型图表怎么布局更合适?不同等级的告警状态怎么表达?或者该怎么优化?
这些问题属于设计判断的范畴。
有时候自己盯一个页面太久,反而容易看不出来问题。
这时候把页面截图发给 AI,让它从另一个角度分析,往往会有一些新的收获。
这些建议当然不需要全部照做。
但经常能帮助发现之前忽略的问题。
所以在项目推进过程中,我经常会把它当成一个设计搭子来讨论方案。
背景和主视觉方向基本确定后,可以开始处理 icon。
充电运营监管平台里的 icon 通常需要出一整套,如下:
充电场站; 充电桩; 充电枪; 在线; 离线; 故障; 待机; 时间利用率; 功率利用率; 今日营收; 本月营收; 累计营收; 工单; 告警; 地址; 街道归属
如果直接从不同素材库里拼,很容易风格不统一,自己画时间成本太大。
所以我会先让 AI 分析,这套图标适合什么风格?
为了保证 icon 风格的统一性,先通过参考确定一个比较满意的风格,再通过参考图 + 关键词的方式批量扩展。
这一步对页面完成度提升很明显。
尤其是在业务系统和大屏项目里,一套统一的图标资产会让页面看起来完整很多。
小建议
为了后续抠图更干净,建议给图标填充一个高反差背景色。
除了生成图标之外,我还会把整组图标截图给 GPT Image2,让它帮我识别业务含义并生成统一命名。
对于图标数量较多的项目,这一步能节省不少整理时间,而且后续和研发协同的时候会顺畅很多。
尤其是现在研发大量使用 AI 生成代码,规范命名和清晰图层越来越重要。
整个项目里最关键的部分其实是地图。
这个地图属于有数据交互的热力图,意味着它是动态的,最终要承载区域热度、以及各种数据信息的表达。
所以我先把真实 SVG 地图给到 GPT image2,让它基于真实结构做视觉效果预演。
SVG 地图下载地址:地图下载地址
这样做最大的价值是:在真正投入大量时间绘制地图效果之前,先看到几种可能的方向。
因为 SVG 本身保留了真实地图结构,AI 输出的效果图又能快速呈现视觉氛围。
它既保留了真实地图结构,又能快速看到视觉效果,两者结合起来做方案沟通会高效很多。
这里是最重要的一点:AI 输出的效果图并不能直接作为最终交付。
方案确定后,仍然需要回到设计工具里重新还原。
真正落地时,还要处理这些事情:
- 地图需要重新处理 SVG 结构
- 图例需要对应真实数据状态
- 图表需要采用组件化方案
- 卡片需要适配后续扩展
- 页面需要考虑研发实现成本等等
这样后续每个区域才能正常承载数据和交互。
对于这个项目来说,地图预演最大的价值在于:
提前验证视觉方向,降低后续返工成本。
剩下的就非常简单啦,把其他的素材逐个调整优化,融合到页面当中。
拼合到一块就是完整的可交付、可实现版本。
回头看这次需求,我觉得 GPT Image2 真正提效是在几个关键节点帮我往前推进。
从验证方向、沉淀资产,到辅助判断、统一图标,再到地图预演,它几乎参与了整个设计流程。
很多过去需要反复尝试和沟通的环节,现在都可以提前验证和快速推进。
GPT Image2 更像一个贯穿流程的设计搭子,
能帮助设计师更快判断方向、更快沉淀资产、更快完成方案沟通。
最终的业务理解、信息组织、视觉判断和落地实现,依然需要由人来把控完成。
1. AI 效果图为什么比最终交付稿更炫,blingbling 的?
实际上原因很简单,AI 生成的是视觉效果图。
而真实项目最终还要考虑:项目实现成本、上线时间、性能等等,所以最终落地时,大部分图表仍然会采用组件化方案
视觉表达和实际交付之间,本身就存在差异。
2. 中间地图那些发光效果什么时候适合使用?
如果地图只是静态展示,例如:PPT 展示、活动主视觉、展厅大屏、海报等等,这类场景完全可以强化视觉效果。
但如果需要承载数据交互,就要优先考虑信息表达和实现成本。
3. 为什么不建议直接使用 AI 抠出来的透明素材?
目前很多抠出来的透明素材边缘仍然存在毛边、半透明脏边等问题,用于方案展示没有问题,用于正式项目交付会比较粗糙。
所以更推荐作为参考素材,或者重新绘制整理后再使用。
欢迎关注作者微信公众号:「B 端设计情报局」
本文转自:优设网 作者:























