北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
夏日试玩节是 WeGame 平台每年夏季固定推出的季度性运营活动，主要承担着「为生态游戏提供集中曝光、带动用户对新游戏认知与体验」的作用。正因为是年度固定栏目，今年的设计也面临两个必须回答的问题：
一是怎么在延续往期感觉的同时做出一点新意——既不能让老玩家觉得"今年怎么和去年一样"，也不能脱离品牌资产另起炉灶。怎么在"熟悉"和"新鲜"之间找到平衡，让活动每年都有"值得再看一次"的理由，成为本次设计的首要目标。
二是在不绑定具体游戏的前提下，把氛围撑起来——活动不绑定任何具体游戏，需要思考如何靠"夏日"这个主题本身去带出情绪和调性。带着这两个问题，我大致梳理了一下这次项目在设计层面的几个特点：
整个项目从概念发散到最终落地，几乎全程借助三谦 AI 设计平台完成——包括前期的多方向概念探索、主视觉及元素的生成与迭代、Seedance 2 视频能力输出的入场动画和动态入口，以及组件和字体的批量产出。三谦在这个项目中不只是某个环节的"加速器"，而是贯穿了从第一张概念草图到最终上线物料的完整链路。接下来的文章会结合具体设计过程，展开聊聊三谦在各环节中的实际应用和使用体会。
往年的方案大多走的是深色科技调，视觉围绕平台感和数字世界展开——这套风格和 WeGame 的平台调性是一脉相承的。
WeGame往年夏日活动KV
蛋蛋君作为WeGame 的 IP 形象，是平台和玩家之间的一个熟面孔。过往平台视觉大多围绕蛋蛋君、PC 游戏元素、桌面载具这几个固定符号展开，今年我想在这个基础上——以强叙事的方式，让蛋蛋君在试玩节里经历一场（？）的夏日冒险。
WeGame IP蛋蛋君
下面我借助三谦AI 快速探索了两个概念方案。
提到"夏日"，最先冒出来的关键词无非是阳光、海滩、海洋这些。但如果只是把这些元素堆上去，画面会很常规，也很难和"试玩节"本身建立关联。
试玩节的核心是"玩到好游戏"，那能不能把"好游戏"包装成一种值得去争夺的东西？顺着这条线，"游戏宝藏" 这个概念就出现了：玩家通过试玩去赢取宝藏，玩法和叙事就被串到一起了。
在确定主视觉之前，我想先把视觉主题和活动玩法绑在一起——视觉不只是装饰，而是要能撑起活动机制本身。所以我先尝试着推演了两种可能的玩法形式：
玩法一：「从章鱼手中夺宝」
机制：机械章鱼的每条触手代表一个游戏品类（或一款游戏），玩家完成试玩任务→ 逐步"解除"一条触手 → 获取对应奖励。
价值：玩法路径清晰、视觉化强，每一步进度都能在主视觉上"被看见"。
玩法二：「宝藏潮汐」
机制：每天/ 每个时段，章鱼会"丢出"不同的宝藏（限时试玩游戏），像潮汐一样有涨有退，分批次释出游戏资源。
价值：制造稀缺感与紧迫感，驱动用户多次登录，对DAU 有帮助。
这两种玩法都指向了同一个视觉核心：一个握有多份"宝藏"、可以被逐步攻克的角色。也正是这一步让"机械章鱼"这个角色的合理性变得清晰——它不只是一个画面里的反派，更是承载玩法机制的视觉载体。
确定了"宝藏 + 守护者"的结构后，我开始想这个角色具体长什么样。它要能撑起对抗张力，又要符合海洋夏日的设定。
最初尝试过「龙」等几个方向，但要么太常规，要么和夏日氛围不太搭。后来想到克苏鲁文化里的章鱼形象——本身就带有海洋神秘感，更关键的是，章鱼的多条触手刚好可以"抓着"各种游戏元素，天然适配前面玩法里"每条触手对应一个游戏"的设定。
最后再加上机械化的处理，一方面降低恐怖感，更贴近活动的轻松调性；另一方面，机械感也让这个角色和WeGame 的平台调性保持了一致。
早期AI跑图
核心叙事：大海守卫者（机械章鱼）守护着今夏最好玩的游戏宝藏，你和蛋蛋君要从它手中赢取宝藏。
画面调性：皮克斯动画感、明亮夏日、冒险向、有对抗张力。
页面设计语言：藏宝卷轴地图、波纹纹理、海洋夏日元素。
这个方案的优势是有明确的"反派"和冲突，叙事性最强。在刚进入活动页面的开头，我还为它做了一段几秒的剧场幕布形式的叙事动画——由海底的蛋蛋君偷走游戏宝箱，过渡到主KV海面追逐场景。
对我来说，夏天是待在房间里、坐在电脑前，从中午玩到天黑——窗外蝉鸣，屏幕里是另一个世界。我猜很多 WeGame 的年轻用户也是这样：暑假的记忆不在海边，而在桌面前。
所以我想：能不能把这种"足不出户却抵达任何地方"的感受直接画出来？它是一种悠闲明亮的感觉。
我希望整个画面聚焦在一个微缩的桌面场景上——小蛋蛋君× 大桌面幻想场景
小的部分：蛋蛋君是一个被"装"进日常生活里的小小主角；
大的部分：屏幕里的世界正在"溢出来"——海浪、游戏生物、光束、像素粒子从屏幕中涌向四周，整张桌面被一场奇幻的夏日冒险覆盖。
核心叙事：夏日的午后，少年坐在桌前打开WeGame——海洋、生物、光从游戏世界中涌出来，把整张桌面变成了一场奇幻冒险。
画面调性：明亮夏日、奇幻、日常× 幻想奇遇。
画面结构：微缩桌面为视觉中心，幻想元素从屏幕向外扩散，形成"现实 → 幻想"的层次感。
相比方案一，这个方案更偏情感向，想表达的是：你不用出门，打开WeGame 就能抵达任何地方。
最终两个方案都获得了认可。考虑到夏日试玩节作为平台年度大型活动，需要更强的视觉张力和叙事钩子来撑住量级，方案一作为主方案推进上线；方案二的"微缩日常"思路则被保留下来，作为未来日常活动设计可以延展的方向。
确定主方案之后，整个执行过程其实就是不断把"宝藏冒险"这个故事拆解到每一个环节上。下面从开场体验到核心画面再到页面细节，展示最终方案的设计思路和效果。
活动体验链接：https://www.wegame.com.cn/act/wegame/wegame20260525/index.html
主视觉的风格方向定为皮克斯动画感+ 明亮夏日 + 冒险张力——画面要有动画电影海报的质感，色调明亮饱和但不轻浮，整体带有戏剧性的故事张力。
区别于往年深色科技调的处理，这次主动选择了蓝色海洋为主色调、明亮天光为氛围基底，让画面一眼就传达出"夏天"和"冒险"两个信息。风格上追求2D厚涂和 C4D/Blender 风格化渲染的混合质感——圆润、通透、色彩丰富，既有体量感又不沉重。
本次活动产出了两张KV，分别承担不同的场景职责：
KV1用于平台内外的 Banner 推广位，需要在更小的尺寸内快速传达冲击力和故事感。
构图逻辑：采用低视角、鱼眼镜头般的冲击力视角。蛋蛋君驾驶手柄飞行器从画面中心偏下的位置高速冲向观众，身后的机械章鱼正在追赶——整个画面呈现出一种"迎面冲来"的动势，在信息流/Banner 等场景中能快速抓住注意力。
主角关系明确：和首页背景不同，这张的叙事重心在蛋蛋君身上——他是画面的前景焦点，章鱼退到中远景作为"追赶者"。这样的安排让画面有明确的故事方向感：蛋蛋君在逃、章鱼在追、宝藏在抢，一眼就读懂发生了什么。
两侧海浪对冲：巨浪从左右两侧向中心对冲翻涌，蛋蛋君从浪的缺口中冲出——既制造了速度感和紧张感，也在构图上形成对称的视觉框架，把视线锁定在中心人物上。
远景点缀：右上角的小岛、鱼群等元素补充了"夏日海洋"的世界观细节，丰富画面信息但不抢主体。
KV2作为活动首页的背景，需要同时承载氛围感和信息传达。
构图逻辑：章鱼Boss 居中偏上占据 C 位，体量最大、视觉重量最重——它是整个"争夺宝藏"叙事的核心角色。触手向两侧展开，分别抓着游戏机、游戏手柄、游戏奖杯、WeGame logo笔记本电脑等平台相关元素，既撑满了画面宽度，也传达了"它守护着这些游戏相关元素"的信息。
中心留白给标题：章鱼身体下方刻意留出了空间，放置「夏日试玩节」主标题和活动日期信息。标题和章鱼形成上下呼应——章鱼是视觉锤，标题是信息锚，两者各占其位不互相干扰。
海浪包裹感：整个画面被翻涌的蓝色海浪环绕，形成一种向中心汇聚的动势——视线被自然引导到中心的章鱼和标题上。左右两侧的海浪也充当了"画框"的角色，让页面在视觉上有边界感，不会散。
KV设计过程中发现有不合适的地方，借助三谦AI快速进行了调整。实际上原先只做了KV1，放进活动首页作为背景时发现：层次不分明——很难在中心区域稳定地放置标题和功能模块。幸好有三谦AI平台，很快调整迭代了字体和新构图KV。而最先做的追逐构图也没有浪费，直接转为 Banner 广告图使用。
进入活动页后，会先自动播放一段3-4 秒的入场动画——画面从绘本插画风格的"小剧场"场景快速过渡到主视觉KV，用一个短短的镜头把活动的核心叙事（蛋蛋君和机械章鱼争夺游戏宝藏）快速传递给用户，过渡到KV，让人在看到活动内容之前，先感受到"这是一段冒险故事的开场"。
这个设计的目的是：让活动页不是一打开就是一个信息页面，而是有一个"进入故事"的仪式感。 视频结束后画面渐隐过渡到活动长页面，动态到静态的切换不会有突兀的割裂感。
制作上使用了三谦中的Seedance 2 视频生成能力：分别以小剧场画面和主KV 作为首尾帧生成过渡动画，再在 AE 中进行抠像和拼接，最终合成为一段流畅的入场序列。
活动首页已经有了入场动画和GIF 动态入口，但用户在首屏停留时如果只是一张静态图，还是会觉得比较呆板。所以在首图区域加入了视差交互——鼠标在页面上移动时，海浪、章鱼、前景元素以不同速度响应，让用户感受到画面的空间纵深，增加了首屏的可交互性和空间感。
视差效果的实现需要设计同学自己将主视觉拆分为多个透明图层（前景浪花、中景章鱼、远景天空等），并为每层设定不同的景深参数。为了快速验证视觉体验，我用CodeBuddy 做了一个视差效果预览工具——可以直接导入拆好的图层，通过右侧面板实时调整每层的 depth 深度值、位移幅度、模糊平滑等参数，即时预览效果。工具还支持导出可分享的 HTML 和参数 JSON，方便直接给重构同学参考还原。
这样省去了反复切图→写代码→看效果→再调的来回过程，设计侧就能把体验效果调到满意再交付。
Codebuddy快速跑的视差效果调试工具
页面的其他模块（信息展示、游戏榜单、最新资讯等）在之前平台活动【周末免费玩】的框架基础上，进行了主题化的设计包装——整体色调统一为深蓝海洋调，信息容器加入了海浪边框和气泡质感的细节处理，各模块标题做了海滨冒险氛围的主题化设计，让整个长页面从上到下保持在"夏日宝藏冒险"的世界观里。这部分页面设计主要由同事陈诺负责完成。
另外在页面最底部，我藏了一个小彩蛋——一只海绵和一只海星。不影响任何信息传达和功能，但滑到底的用户会发现这个小细节。算是在整体规范之内给自己留的一点小趣味。
页面小组件的设计上我也贴合了整个活动主题的设定，希望让用户沉浸在"宝藏冒险"叙事里的。
本次活动字体设计也是全部由AI生成。考虑到本次活动调性偏活泼冒险，字体设计上我希望：一是块面感要重，能在视觉重量上压得住身后那只巨大的章鱼，不被画面吃掉；二是风格不能太机械生硬，要带有手绘感和冒险气质的趣味，和整体"皮克斯动画+夏日冒险"的调性统一。
第一版字体做出来放进KV 后发现了问题——字形是两行横排的方块结构，章鱼也是横向铺开的，两个横向大体量撞在一起，画面缺少起伏。
于是做了第二版调整：配合画面中海浪涌动的动势，在字体两侧加入浪花做扩张处理，让字组呈现出两边高、中间起伏的轮廓变化；同时拼接椰树等夏日元素作为装饰，让字体气质和画面更加融为一体，而不是"贴上去的一行字"。
Seedance生成的字体设计动效
右侧二级入口这个位置承担「评测赏金令」的入口引导——设计上需要拿捏一个分寸：既要吸引用户注意到并点击，又不能抢了主画面章鱼的视觉主角地位。
我的做法是把蛋蛋君从主KV 中拆出来放在这里。蛋蛋君本身造型细节丰富、辨识度高，天然具有吸引视线的能力，作为独立入口放在右下角刚好合适。同时做成可循环播放的 GIF 动态——在以章鱼为主的大面积静态画面中，这个小范围的动态自然成为视线的第二落点，不需要放大尺寸或加强对比就能引导用户关注。
动态设计上做了一种伪3D 立体 × 2D 贴纸的混合质感处理——介于"真实"和"图形"之间，既有体积感又不会和主 KV 的风格抢戏，保持了整体画面的协调。
「里程碑」这个模块的玩法是用户通过试玩不同数量的游戏来解锁奖励。为了让奖励体系和"夺宝"主题一脉相承，我设计了四级游戏宝箱——木、铜、银、金，对应试玩 1、2、3、5 款游戏的递进成就。
视觉上做了两个状态区分：未领取时宝箱合上锁，已领取时宝箱打开，内部露出金币和游戏机等"宝藏"。同时每一级宝箱的场景加入了对应的海洋元素和光影氛围——从最基础的锚和沙地，到珊瑚、海星，再到最高级别的章鱼触手装饰，越往后越"华丽"，呼应了奖励不断深入的进程感。
整体来看，AI完成了大约80%的”画面生产”工作，剩下的20%主要在于关键的人工创意+降低AI味。
这是目前AI 辅助设计中几乎不可避免的一个环节——AI 生成的画面哪怕完成度已经很高，但拼在一起总有一种说不上来的"不对劲"。可能是太满了、太均匀了、太光滑了，或者缺少某种人为的设计意图感。这种感觉很微妙，但用户能一眼感知到。
识别它、然后针对性地修复它，让画面看起来更自然、更像"有人想过的设计"，是我在这个项目中花时间最多的事情之一。下面分享几个过程中积累的具体做法。
在动手修之前，要先知道"哪里看起来像AI的"：识别出来之后再针对性处理，比盲目调整效率高很多。
Codebuddy给的AI味总结
AI 生成的东西有一种"很平的均匀感"——笔画粗细一致、元素分布均匀、材质质感统一。造型中规中矩、缺乏想象力。
比如蛋蛋君的设计。我的构思是他驾驶着一台游戏手柄形态的飞行器，正从章鱼的包围中冲出来——有速度感、有冒险感。
如果直接用描述性关键词去生成（比如"蛋形机器人驾驶手柄飞行器，正面视角，C4D 风格，干净背景"），出来的结果往往很平，缺乏想象力——造型中规中矩，动态感也不够。
问题在于：幻想性的画面需要幻想性的参考来激发。 纯靠文字描述，AI 容易陷入"最安全的解"。于是我换了个思路——先找到一张氛围开阔、造型有想象力的参考图作为风格锚点，再加入自己的想法引导AI 生成手柄飞行器冲出的画面。出图后再逐步调整比例、打磨细节、统一风格，经过几轮迭代，最终得到了比较满意的设计。
AI 有了"视觉方向"后，出图的风格准确度和想象力会明显提升。
另外还可以"左手倒右手"：把 AI 生成的结果导出，手动做一些微小调整，再喂回三谦让它基于调整后的版本继续优化。几轮来回后，画面就会打破那种"一眼AI"的均匀感，变得更像有设计师意图在里面。
AI蛋蛋君主体设计过程
例如机械章鱼的设计。
AI 最初生成的机械章鱼存在几个明显问题：材质过于复杂、细节堆砌，整体观感偏暗甚至有些"恐怖"，和活动轻松明快的调性不符；触手上抓着的元素存在崩坏（结构错乱、形态不自然），而且和WeGame 平台没有任何关联——这是 AI 生图常见的问题，它会"填满"画面但不理解内容的意义。
处理上分了几步：
第一步：剥离干净的章鱼主体。先用AI 去除画面中的蛋蛋君、标题等干扰元素，只保留单独的机械章鱼，作为后续修改的基底。
第二步：逐步替换触手上的元素。我希望章鱼的触手分别握着和平台相关的物品——键盘冲浪板、带 WeGame logo 的笔记本电脑、游戏奖杯、鼠标、游戏手柄。但一次性通过关键词把所有元素都描述清楚，生成效果往往不理想（AI 很难同时精准控制多个局部细节）。
这里用到了三谦平台自带的参考图标注功能——直接在图片上圈出需要修改的区域，指定替换成什么元素。相比纯文字描述，这种"指哪改哪"的方式准确率高了很多。
想一次性让AI 同时解决"画什么在哪里"和"长什么质感"，往往两头都做不好。
做法：分两轮。第一轮只关注构图和元素位置。确认构图满意后，将出图提取为线稿+色稿，叠加希望的材质风格参考图，用三谦重新生成第二轮——这一轮只负责"穿好皮肤"。先画对位置，再穿好衣服。
比起单纯说"某个环节快了几天"，我觉得更值得聊的是 AI 对整个流程结构的改变。
过去的流程是线性串联的：找参考→ 多人出概念草图→ 草图修改细化确认方案→ 3D建模/渲染/后期修图→ 定稿后才能启动组件、字体、页面……每一步都依赖上一步完成，决策发生在中后期，推翻成本很高。整个周期至少 8-10 周，多人协作。
这次借助三谦，流程上可以前期压缩时间，后期并行推进，变成了：一人 2-3 天产出多套完整度较高的提案方案（含配色、字体、动效演示）→ 基于接近成品的画面直接拍板 → 主KV打磨、组件、字体、动效并行推进。整体包含监修等花费约 4-5 周，1-2 人完成。
整体项目周期缩短约 50%，人力投入减半，前期决策周期从 2-3 周缩短到 3 天。
整体看AI确实为整个项目节省了不少时间，但在流程中花在后期的时间多了。个人的感受是AI 能快速帮你实现大约 60% 的完成度，剩下 40% 往往需要花掉大部分时间。
个人感受是，前期省下来的时间去了四个地方：
2-3 天就能出完整方案，leader 和产品运营可以基于高完成度的画面做判断，不再凭想象决策。决策越早，后期推翻的风险越低。
同时跑多条IF 线快速排除——不确定想要什么的时候，先快速知道不想要什么。过程中发现构图、层次等问题可以即时修正，调整成本从"天"降到了"分钟"。
过去光把主KV 做出来就耗尽了大部分精力，入场动画、视差效果、GIF 动态入口、宝箱递进设计这些"锦上添花"的事很难有余力去做。现在有了余力，这些细节决定了用户体验是"70分的够用"还是"90分的完整"。
AI 出图快但"均匀"——层次扁平、细节堆砌、风格不统一。反复横跳调整，消除"一眼AI"的均匀感，让最终交付看起来是一套有设计意图的完整方案，而不是一堆 AI 拼图。
AI 让"从 0 到 1"变快了，省下来的时间让我有余力把"1 做到 1.0"。 提效的意义不只是快——是让你有时间去把东西做得更好。
这个项目做下来，最大的感受是：AI 改变的是生产环节，但没有改变设计本身需要回答的那些问题——做什么方向、为什么是这个方向、画面层次怎么处理、体验节奏怎么编排。
它把能力分布从"会做"前移到了"会判断"。AI 给得越多越快，越需要清楚自己要什么——人人都能使用AI，但做出来的成果质量存在区别
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
Loanza是面向房产中介、贷款经纪人、金融机构从业者的新一代抵押贷款管理SaaS平台，覆盖三端设备：PC网页端贷款人工作台、手机移动端社区与数据面板、智能手表利率实时终端，配套品牌官网引流页面、社交品牌主页、品牌视觉物料。产品整合实时房贷利率数据、业务销售指标、客户社区论坛、贷款全流程管理，兼顾办公室精细化办公、外出随身查看行情、手表秒速获取利率三大使用场景。
房产贷款CRM四大行业痛点
1. 办公设备场景割裂：办公室PC、外出手机无统一数据同步，缺少手表轻量化快速查看利率入口，获取行情操作链路长；
2. 金融数据视觉厚重压抑：传统贷款后台深色厚重，大量数字图表阅读疲劳，房产相关视觉生硬冰冷；
3. 缺少同行交流载体：利率、购房预算等行业话题无内置社区，从业者无法在线交流市场洞察；
4. 品牌视觉不统一：官网、后台、移动端、社交账号视觉风格割裂，无法形成统一专业品牌认知。
二、产品完整业务闭环
整套产品多端数据互通，形成官网获客→PC精细化业务管理→手机随身运营→手表快速行情查看闭环
1. 品牌官网引流层：首页展示产品核心定位，突出免费试用、APP下载入口，直观预览PC工作台界面吸引机构入驻；
2. PC贷款人工作台层：实时多品类房贷利率图表、月度业务指标、客户线索管理、内置社区入口一站式整合；
3. 手机移动端层：利率实时面板、行业社区论坛，支持发布购房话题、浏览同行市场分析，随时随地维护客户；
4. 智能手表轻量化终端：极简表盘只展示核心房贷利率与短期走势，无需解锁手机快速捕捉市场变动；
5. 品牌形象物料层：统一社交主页、3D品牌方块视觉，对外塑造轻量化专业金融品牌形象。
三、核心页面模块设计拆解
模块1：PC端贷款人工作台
左侧固定导航+右侧多卡片轻量化网格布局，浅白柔和底色弱化金融严肃感
1. 顶部全局导航栏：首页、功能、解决方案、关于我们、联系方式，配套免费试用、下载双转化按钮；
2. 核心利率数据区：固定利率、浮动ARM、大额贷款三类利率超大数字展示，搭配分时波动柱状折线图；
3. 业务指标卡片组：到期线索、当月商机、待办审核、提交量轻量化数据卡片；
4. 内置社区预览模块：手机端社区实时预览，打通办公与同行交流场景；
5. 底部常驻功能导航：数据、客户、社区、消息、个人中心，适配日常高频操作。
模块2：手机移动端两大核心页面
1. 实时利率分析页：复刻PC端简化版利率图表，压缩冗余参数，适配手机竖屏快速浏览当日行情；
2. 行业社区论坛页：分贷款交流、市场洞察两大板块，支持发布图文购房话题，浏览同行分享的预算、户型相关内容，底部快捷发帖输入框降低分享门槛。
模块3：智能手表轻量化表盘
极简单卡片极简布局，去除所有冗余信息，仅保留利率数值、更新时间、短期走势迷你图表，单手抬腕即可读取核心市场数据，适配外出拜访客户碎片化场景。
模块4：品牌官网与社交形象页面
1. 官网首屏：大标题点明新一代抵押贷款CRM定位，柔和淡紫渐变浅底色，直观展示PC工作台样机；
2. 社交品牌主页：简约头像、简介、官网入口，统一淡紫渐变头部视觉，塑造统一线上品牌形象。
四、视觉设计体系：淡紫柔和轻量化商务金融风
1. 色彩系统
- 基底底色：低饱和纯净浅灰白基底，弱化金融产品压抑厚重感，长时间查看图表无视觉疲劳；
- 品牌主色：柔和淡薰衣草紫，用于品牌渐变、高亮按钮、图表趋势标记，温和专业不刺眼；
- 辅助区分色：浅绿代表利率上涨、浅橙代表下跌，直观区分市场变动趋势；
- 功能黑白对比色：纯黑按钮用于下载、试用高权重转化操作，纯白卡片承载全部数据内容。
2. 图形与可视化规范
1. 轻量化极简图表：细线条柱状、折线组合图表，无厚重填充色块，清爽干净；
2. 写实房产家居实拍图：住宅户型实拍图用于社区话题素材，贴近房产贷款行业场景；
3. 极简圆角卡片：极低柔和阴影，大圆角弱化工业冰冷感，适配轻量化商务调性；
4. 简约线性图标：消息、发帖、数据、客户统一纤细线性图标，全平台视觉统一。
3. 文字层级规范
纤细无衬线现代商务字体，三层清晰信息层级：超大加粗利率/业务数字→板块大标题→行情、话题辅助小字，远距离快速抓取核心金融数据。
五、产品商业与用户落地价值
1. 三端设备全覆盖适配全场景：办公室PC深度管理、手机外出运营、手表秒查利率，解决从业者多场景办公需求；
2. 轻量化柔和视觉降低阅读负担：抛弃传统深色金融后台，浅紫浅白基调提升长时间办公舒适度；
3. 内置行业社区提升用户粘性：同行交流板块增加产品使用频次，强化机构用户留存；
4. 全渠道统一品牌视觉：官网、后台、移动端、社交账号一套视觉规范，强化专业抵押贷款品牌记忆；
5. 极简手表终端打造差异化优势，市面同类贷款产品缺少便携穿戴设备行情入口，形成产品独特竞争力。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
以丝网、胶版、凹版、凸版、垫白、印专色、印金、烫金、冷烫、击凸、压凹、压纹、压痕、激光模切、浅雕、刀模、压点线、覆膜、亮膜、哑膜、珠光膜、拉丝膜、触感膜、镭射膜、上光、过油、珠光油、发泡油、替塑油、局部 uv、逆向 uv、磨砂 uv、uv 折光、光刻、猫眼、彩葱、植绒、视高迪、光栅、刮刮银、刷边等等印刷中我们常用但细节比较粗糙的印后加工知识。对于这类知识，我也是边整理边学习，例如烫金，其实之前以为的烫金工艺只有一种，实际上还有冷烫这种性价比更高的方式；覆膜和上光的区别；水性油、油性油和 uv 油的区别；磨砂膜、磨砂 uv 和逆向 uv 的工艺区别和呈现效果都是不一样的；还有谷子经常使用的 uv 折光和光刻的区别，猛一看效果有点类似，但成本和质感天差地别。
以铜版纸、哑粉纸、轻涂纸、胶版纸、超感纸、高阶映画、白卡纸、灰底白板、双灰板、金银卡纸、瓦楞纸、相纸、刚古纸、珠光纸、金葱纸、触感纸、镭射纸、烫透纸、日式和纸、牛皮纸、羊皮纸、无酸纸、宣纸、洒金纸、云龙纸、落水纸、植物纸、绵纸、种子纸、咖啡纸、拉菲纸、蚕丝纸、大地纸、东巴纸、离型纸、淋膜纸、硅油纸、鸡皮纸、蛋壳纸、安格纸、布纹纸、凤尾纸、手揉纸、字典纸、洋葱纸、硫酸纸、拷贝纸、糯米纸、复写纸、热敏纸、美纹纸、水松纸、皱纹纸、杜邦纸、新闻纸、金银箔等等印刷中我们常用但细节比较粗糙的材质知识。其中很多知识也比较刷新我的认知，比如说道林纸其实也有白黄之分；蒙肯纸其实是一种专门的轻型纸，但因为比较早结果成了轻型纸的代称；超感纸、离型纸、淋膜纸都是一类纸的统称，有很多不同类型；布纹纸居然也有那么多种纹路。其中也根据常用的物料给到了纸的选择和克重建议，都是非常实用的。
以印刷、油墨、制版、印前和印刷术语为主，涵盖了很多名词解释，例如丝网、胶版、凹版、凸版、柔性、移印、数码、喷墨、激光、艺术微喷、riso、UV、转印、四色油墨、广色域油墨、专色、潘通、香味、荧光、夜光、热敏、微胶囊、磁性、可食用、大豆、水性、油性、生物基、溶剂、挥发干燥、氧化聚合、热固化、渗透干燥、能量固化、菲林、ps 版、ctp、光聚合柔性版、光聚合树脂版、金属基柔性树脂版等印刷常见知识点，也解释了拼版、纸张开法、单版、自翻版、正反版、天地版、出血、套印、叠印、印刷色、套色顺序、分版、分色、印前检查、完稿、网点角度、莫尔条纹、实地、绝网、加网、咬口、印刷标记、色令等等印刷中我们常用但细节比较粗糙的印刷知识。例如套色顺序和网点角度，居然有这么多学问是我没想到的，网上说的我们学的很多知识都是精简过的，甚至不是最标准的；例如暖色和冷色建议的网点角度就是不一样的；套色顺序也是；还有实地油墨也可能有空隙；绝网很多人都没听过；黑色有些人知道四色黑单色黑，但具体用在哪是不清楚的。可见隔行如隔山，所以我把这些问题总结在一起，在文档中都能找到答案。
部分预览：
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
AEROX是面向F1方程式车队赛事指挥团队的专业实时策略监控大屏系统，专为正赛实时战术调度打造，分为三大可视化模块：赛道全局战术面板、整车机械硬件数字孪生遥测面板、车手脑电波与人体生物体征监测面板。系统实时同步赛道地图、天气雷达、轮胎损耗、动力单元温度、空气动力学下压力、G值负荷、车手心率脑波等上百项核心数据，AI同步推演夺冠概率、安全车时差、轮胎更换窗口期，为赛事策略师提供一站式实时决策可视化平台。
F1赛事车队监控行业痛点
1. 赛事数据维度繁杂割裂：赛道排名、气象、轮胎、动力、车手体征分属多套独立系统，策略师需要切换多块屏幕整合信息，错失战术调整窗口；
2. 机械硬件参数晦涩抽象：发动机、刹车、悬挂、冷却系统纯数字参数无可视化载体，无法直观定位高温、负荷过载故障；
3. 缺少车手人体负荷监测维度：高速过弯G值、脑波专注度、心率脱水状态无法实时同步，难以预判车手体能极限；
4. 气象与赛道路况联动缺失：降雨、路面湿度数据无法和轮胎损耗曲线联动，难以精准预判换胎时机。
二、产品完整赛事战术决策闭环
整套大屏三大页面数据互通，形成赛事观测→硬件诊断→人体负荷评估→AI战术推演完整决策闭环
1. 赛道全局战术监控层：等高线赛道地图可视化全场车手位次，叠加多普勒气象雷达、轮胎温度磨损、分段时差、AI胜率曲线，实时推送赛道突发路况预警；
2. 整车机械数字孪生遥测层：线框全息3D赛车模型可视化气流、动力单元、刹车、悬挂、冷却系统，同步展示温度、压力、下压力、能耗实时曲线，识别硬件过载风险；
3. 车手生物体征监测层：3D人脑、人体骨骼全息模型展示脑电波频谱、侧向纵向G负荷、脊柱压迫、心率体温血氧，实时监控车手体能与专注度；
4. AI策略推演层：基于实时全量数据自动计算夺冠概率、最佳换胎窗口、安全车时差，输出标准化战术日志。
三、三大核心页面模块设计拆解
模块1：银石赛道全局赛事战术总览大屏
中心等高线赛道地图+左右双侧多数据卡片网格深色专业布局
1. 顶部赛事全局状态栏：当前圈数、总圈数、比赛时长、赛道绿旗状态；
2. 中心等高线赛道载体：霓虹分色赛道线路区分高速弯与低速段，车手头像直接标注实时位次；
3. 左侧数据集群：多普勒气象降雨雷达、四轮轮胎温度摩擦矩阵、三种配方轮胎损耗衰减曲线；
4. 右侧数据集群：AI实时夺冠概率曲线、分段安全车时差矩阵、赛事实时战术日志信息流；
设计价值：赛事策略师单屏掌握全场位次、天气、轮胎、胜率全部关键信息，无需切换页面快速制定进站策略。
模块2：整车机械硬件全息数字孪生遥测页面
居中透明线框3D赛车模型，左右对称六组硬件监控卡片
1. 中心气流可视化全息赛车：霓虹流线展示整车空气动力学气流走向，标注DRS、冷却、悬挂工作状态；
2. 左侧硬件分区：ERS混动冷却储能状态、前后翼空气动力负荷图表、整车下压力径向分布环形图；
3. 右侧硬件分区：动力单元缸体温度压力、悬挂行程减震负荷、碳刹车盘温度热力网格；
每一组硬件模块均搭配实时波动折线图表，异常高温、高负荷自动高亮警示。
模块3：车手生物体征脑波监测页面
居中全息人脑3D模型，四周分布人体负荷与生命体征卡片
1. 核心脑电波频谱图表：分层展示阿尔法、贝塔、伽马脑波频率，实时判定车手专注度；
2. G力人体负荷模块：三维G值坐标曲线、脊柱颈部压迫热力人体骨骼图，直观显示高速过弯带来的身体损伤负荷；
3. 右侧生命体征矩阵：实时心率、脱水度、体温、血氧、呼吸频率，全部搭配动态波形可视化。
四、视觉设计体系：深色全息赛博竞速专业大屏风
1. 色彩系统
- 基底底色：极致哑光纯黑基底，赛场昏暗指挥室环境下降低屏幕反光，高亮数据辨识度拉满；
- 竞速主霓虹色：冰蓝、橙金、电光紫三色全息线条，分别对应赛道气流、高温硬件、气象降雨，层次区分清晰；
- 风险警示色：浅红用于刹车高温、脊柱高负荷、硬件过载预警，快速捕捉故障风险点；
- 指标基准色：浅青、浅绿代表硬件正常工况、车手健康平稳体征。
2. 图形与可视化规范
1. 半透明线框全息3D数字孪生：整车赛车、人脑、人体骨骼轻量化线框建模，霓虹流线可视化气流、电路、生物神经信号；
2. 多类型专业竞速图表：等高线赛道地图、径向环形下压力分布图、分层频谱脑波图、热力温度矩阵、分时衰减曲线；
3. 极简无衬线科技卡片：细窄分割线、极低柔和内阴影，不占用视觉焦点，突出核心数值与动态曲线。
3. 文字层级规范
硬朗无衬线工业竞速字体，三层清晰信息层级：超大加粗核心温度/胜率/G值数字→模块功能标题→工况辅助小字，远距离指挥室也能快速读取关键赛事数据。
五、产品商业与赛事落地价值
1. 全维度数据一体化整合：赛道、气象、机械、车手体征四大赛事核心数据统一单屏展示，大幅缩短策略决策反应时间；
2. 全息3D降低专业门槛：线框孪生模型把抽象动力、气流、人体负荷参数具象化，工程师快速定位硬件与体能隐患；
3. 适配赛场暗光环境：纯黑低反光基底，长时间盯屏不易视觉疲劳，不干扰指挥室夜间赛事调度；
4. AI数据联动推演：气象、轮胎、硬件数据自动联动计算换胎与超车战术，辅助车队做出最优赛事决策；
5. 双维度监测保障完赛：同步监控车辆硬件寿命与车手体能极限，提前规避机械故障、车手体能透支导致退赛。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
AURA是面向Web3算力节点运维者的全链路硬件监控管理平台，分为PC网页管理后台与手机移动端APP两大端口，依托硬件3D数字孪生可视化载体，整合实时硬件遥测数据、算力波动曲线、散热温控参数、网络流量、挖矿收益资产、全球节点地图六大核心模块，解决分布式算力机房远程运维需求，支持远程诊断、冷却参数调节、节点重启、资产质押提现等操作，统一整合多设备、多指标分散数据，为节点运营者提供单一可视化管控入口。
Web3算力硬件运维四大行业痛点
1. 硬件数据极度碎片化：温度、风扇转速、算力、带宽、收益分散在多款工具，运维人员需要切换多个系统查看指标，故障预警存在延迟；
2. 专业硬件晦涩难懂：电路板、水冷、算力参数纯数字堆砌，无可视化硬件模型，新手运维无法直观定位故障部件；
3. 缺少随身移动端管控：机房运维依赖固定PC，外出无法实时监控节点状态、接收高温宕机预警；
4. 业务数据割裂：硬件性能监控与代币收益、质押资产管理分属两套系统，无法联动分析算力产出收益效率。
二、产品完整运维业务闭环
整套产品PC+移动端双端打通，形成硬件监控→故障诊断→远程调控→收益管理一体化闭环
1. PC总览仪表盘层：3D拆解式硬件数字孪生作为视觉核心，一站式展示温度、负载、算力、流量、冷却系统全局指标，多图表实时展示24小时波动趋势；
2. 硬件远程诊断层：读取风扇、水冷、芯片负载实时参数，一键执行全设备诊断，识别高温降频、网络卡顿等隐患；
3. 全球节点管理层：点阵地图可视化全球分布节点，统一查看在线数量、网络延迟、总流量；
4. 资产收益管理层：实时统计挖矿产出代币、质押周期收益，支持质押、提取、查看历史收益流水；
5. 移动端随身管控层：复刻PC核心监控功能，户外随时查看硬件状态、接收故障推送、远程调节冷却参数。
三、核心页面模块设计拆解
模块1：PC端硬件总览Dashboard（核心运维页面）
左侧固定功能导航栏+右侧多卡片数据网格布局，平衡科技专业感与数据可读性
1. 侧边完整功能导航：总览、硬件中心、AI任务、全球地图、财务钱包、质押、治理、诊断、设置、支持，覆盖全运维需求；
2. 3D数字孪生主视觉卡片：透明拆解式硬件模型，光纤、水冷管路霓虹线条可视化硬件结构，直接标注温度、风扇转速核心参数；
3. 多维度硬件指标卡片：核心负载、在线节点总数、网络延迟、总流量、水冷冷却效率独立轻量化卡片，超大粗体展示关键数值；
4. 算力趋势分层折线图：区分活跃算力、硬件上限、温控降频三条曲线，直观查看全天算力波动；
5. 水冷系统可视化模块：3D水冷设备搭配流速、进出口温度参数，支持一键增强冷却调节。
设计价值：运维人员打开首页即可完整掌握单台节点全部硬件健康状态，无需逐层翻阅子页面定位故障。
模块2：移动端硬件监控首页
单列垂直轻量化卡片布局，适配手机窄屏单手操作
1. 顶部节点状态栏：设备名称、在线状态、运维用户头像；
2. 缩小版3D硬件数字孪生缩略图，直观展示设备整体；
3. 核心健康指标卡片：设备在线率、芯片温度、风扇转速简洁陈列；
4. 核心行动按钮：一键硬件诊断，快速排查硬件隐患；
5. 底部五宫格常驻导航：硬件、算力、资产、全球地图、个人中心。
模块3：移动端算力&收益专项页面
1. 算力监控页：完整复刻PC端算力折线图表，实时记录算力波动、后台运行任务日志，展示芯片负载、带宽参数；
2. 资产收益页：总代币余额、当日收益、周期奖励进度条，质押、提现两大核心操作按钮，历史挖矿收益流水列表；
3. 全球节点地图页：点阵分布图展示全球节点分布，汇总在线总量、网络延迟、流量数据。
模块4：用户调研推导页面
纯白极简信息卡片，量化行业运维痛点，用调研数据支撑产品设计逻辑，分为用户痛点占比图表、运维人员访谈语录两大板块，清晰展现碎片化数据、高温延迟预警两大核心行业矛盾。
四、视觉设计体系：浅白极简赛博科技算力风
1. 色彩系统
- 基底底色：纯净哑光浅灰白基底，长时间查看大量数据图表无视觉疲劳，适配机房暗光、户外强光多场景；
- 科技主色：电光绿、冰蓝霓虹，用于3D硬件光纤、水冷管路、正向增长数据，代表正常运行、算力收益；
- 警示区分色：浅红线条用于算力上限、温控降频预警曲线，直观提示硬件负荷临界值；
- 行动按钮色：深紫渐变深色按钮，用于诊断、质押、提现等高权重操作，视觉层级突出。
2. 图形与可视化规范
1. 拆解式3D数字孪生硬件模型：半透明电路板、水冷、风扇立体建模，霓虹管线区分电路与冷却回路，将抽象硬件参数可视化；
2. 轻量化分层折线图表：细线条低饱和度配色，多曲线同屏对比无视觉杂乱；
3. 极简圆角功能卡片：低弱柔和阴影，模块分区干净利落，无厚重边框压抑感；
4. 线性极简图标：芯片、风扇、网络、钱包统一线性科技图标，视觉体系高度统一。
3. 文字层级规范
无衬线现代工业字体，三层清晰信息层级：超大粗体核心硬件/收益数值→模块标题→参数辅助小字，远距离快速抓取关键运维数据。
五、产品商业与用户落地价值
1. 数字孪生降低运维门槛：3D拆解硬件模型搭配实时标注参数，零基础运维人员也能看懂硬件故障位置；
2. 双端数据完全同步：PC机房深度管控+手机随身预警，外出实时接收高温、掉线故障提醒，减少算力停机损失；
3. 全业务数据统一整合：硬件监控、算力统计、代币资产三大业务合并一套系统，无需切换多款工具；
4. 量化行业痛点的产品逻辑：基于真实运维人员访谈数据设计页面，精准解决数据碎片化、预警滞后核心痛点；
5. 轻量化界面适配长时间办公：浅白低饱和基底，机房长时间盯屏幕不易视觉疲劳，数据分区清晰降低信息负担。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
在日常工作中我发现，很多刚接触工业 HMI 设计的新手和自动化工程师，在界面布局上很容易陷入误区：按钮、数据、导航随意堆砌，要么界面拥挤信息杂乱，要么元素摆放缺乏逻辑，不仅给一线工人带来操作负担，也难以满足工业场景下的规范性与实用性要求。
今天给大家分享一套工业从业者高频使用的实用布局技巧——三区布局法，一步步拆解每区的实操规范，搭配案例参考和可直接复用的模板，新手也能轻松上手，高效搞定工业HMI布局难题。
工业 HMI 的布局逻辑，和互联网 App、B 端后台有明显区别——它不追求花哨的个性化、情感化设计，核心诉求是“高效、规范、无干扰”，毕竟工业场景中，操作效率和生产安全才是核心。三区布局法能成为工业HMI的主流通用模板，核心原因大致有3个：
三区布局法的核心逻辑是“顶区定状态、中区做核心、底区保便捷”，每一个区域都有明确的功能定位和设计规范，不能随意混淆，下面逐一拆解细节，附可直接套用的实操要点。
1. 顶区：状态/报警区——一眼掌握设备核心状态
顶区是操作员打开界面后第一眼看到的区域，核心功能是展示设备运行状态和报警信息，让操作员快速判断设备是否正常、有无紧急情况，这也是工业场景“安全优先”原则在布局上的直接体现。
「实操规范」：
2. 中区：核心监控/操作区——操作和监控的核心区域
中区是整个 HMI 界面的核心区域，占比最高，核心功能是整合设备监控与核心操作，也是操作员日常操作最频繁的区域，其布局合理性直接决定操作效率，与工业 HMI“极简高效”的核心设计原则高度契合。
「实操规范」：
首页关键参数预览，工艺流程显示
工艺流程及核心参数显示
大家在核心区域设计时，如果无从下手，可以使用栅格系统进行辅助，利用模块化理念进行设计。
快速画面框架搭建
3. 底区：导航/常用操作区——便捷切换，高效操作
底区的核心功能是实现界面快速导航与常用操作便捷调用，方便操作员快速切换不同功能界面，同时放置高频使用但非核心的操作按钮，不占用中区核心空间，兼顾操作便捷性与界面整洁度。
「实操规范」：
需要注意的是“上-中-下”结构是最常见也是最通用的一套布局结构，根据不同触摸屏的尺寸、画面比例、核心区域具体内容等可以对布局结构进行调整。
西门子在《HMI Template Suite》中制定了一套导航设计指南，在指南中一级导航采用了从顶栏中点击汉堡菜单展开的形式，此形式在较小尺寸的触摸屏上，可以通过隐藏导航的形式让核心区域显示更多的内容，但同时提高学习成本和增加交互步骤，所以我们在以往的项目实践中会更偏向直观的将导航区域显示出来。
HMI Template Suite中的多级导航系统
除非项目内容非常复杂，否则不建议使用超过 2 级以上的导航系统，多级的导航系统会导致工人在使用是无法快速定位功能参数所在的页面位置，降低操作效率和增加学习成本。
三区布局法并非“一成不变”，需根据不同工业场景（小屏机床、大屏中控）灵活调整细节，核心逻辑保持不变，适配具体使用需求。
比较遗憾的是，工业 HMI 项目大多应用于工厂内部场景，受保密协议限制，且项目均围绕企业实际工况、工艺流程深度定制开发，因此我负责的实际项目均不便对外展示。目前文章中用到的项目图片，均来自国外专业 HMI 设计公司公开分享的案例。后续我也会选取部分典型工艺流程，重新设计成可公开的演示案例进行分享。
值得庆幸的是，目前海外已有多家专注于 HMI 设计的专业机构，在设计理念、行业痛点解决方案等方面均处于前沿水平，其落地案例与项目实践具备极高的研究与参考价值。不少国内同赛道设计机构，即便仅通过借鉴、整合这些成熟思路，也能实现可观的商业收益。
下面结合几种最常见的工业场景举例，可直接参考。
案例 1：强力空气压缩机 HMI（小屏）
在小尺寸触摸屏上，可以将状态/报警区与导航/操作区合并，并且结合西门子《HMI Template Suite》中的一级导航形式，尽可能的将显示区域留给核心内容。
案例 2：颗粒泡沫生产 HMI（标准屏）
这个项目为典型的三段式布局结构，底部区域的设计非常值得参考，将导航、常用操作按钮这些位置比较固定的内容整合到底部区域。
案例 3：大屏产线中控 HMI（复杂内容）
大屏产线中控 HMI，丰富中区监控内容，展示产线工艺流程可视化界面，同时展示整条产线的整体运行状态、所有设备的报警信息、生产进度，可按模块分区域展示。
三区布局法是工业 HMI 设计的基础，也是最实用、最易落地的布局技巧，无论是新手设计师，还是有一定经验的从业者，都能通过这套方法快速搭建规范、高效的工业 HMI 界面，避开布局混乱的常见误区。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
这款智能出行APP是面向城市通勤人群的综合打车工具，支持即时快车、摩托车代步、长时包车多类出行服务，以3D立体城市地图为核心视觉载体，完整覆盖首页点位预览、起点终点规划、车型比价选择、司机信息对接全流程操作页面，兼顾日常短途通勤、定点长时包车两类使用场景，用轻量化柔和界面降低用户操作学习成本，地图可视化直观展示路线、车辆、取送点位信息。
传统打车出行APP四大行业痛点
1. 平面地图辨识度低：传统2D扁平化地图线条繁杂，新手难以快速分清路线、建筑与上车点位，找取车点耗时久；
2. 车型比价流程繁琐：不同车型价格、时长、载客量分散展示，用户切换多页面才能对比，决策效率低；
3. 界面信息过载拥挤：首页堆砌大量广告、弹窗、冗余功能按钮，路线、价格核心信息被遮挡；
4. 包车与即时打车界面割裂：短时通勤、长时包车两套业务逻辑分开入口，用户需要多次切换页面才能找到对应服务。
二、产品完整出行业务闭环
整套APP围绕点位预览→路线规划→车型选择→司机对接搭建一站式出行闭环
1. 首页点位预览层：首页展示附近热门点位、包车单价、预估接送时长，快速浏览就近出行资源，一键跳转路线规划页；
2. 起止路线规划层：3D立体城市地图可视化展示出发地、目的地、行驶路线，直观呈现沿途建筑与车辆位置；
3. 车型比价选择层：分推荐、更快、更经济三类标签，罗列Mini轿车、摩托、经典家用车三种车型，清晰标注载客数、预估时长、单价；
4. 司机对接详情层：确认订单后展示司机头像、车型、车牌、评分、起止点位，提供一键通话、在线消息沟通入口。
三、四大核心页面模块设计拆解
模块1：首页点位预览页面
轻量化卡片分层布局，优先展示就近出行点位信息
1. 顶部个人中心区：用户头像、专业账号标识、搜索、消息快捷图标；
2. 核心点位卡片：展示周边热门场所名称、距离、小时包车价格，附带室内、24小时营业、新能源配套标签；
3. 时长快捷分区：Pickup即时接送、Express快速快车双卡片，标注各自预估等待时长；
4. 底部常驻导航栏：首页、行程、日历、个人中心四大高频功能，单手即可点击切换。
设计价值：用户打开首页就能快速掌握周边出行资源，无需手动输入地址，短途临时出行一键直达规划页面。
模块2：起止路线3D地图页面
等距3D城市建筑地图作为视觉核心，弱化繁杂线条，强化点位辨识度
1. 全屏立体地图承载层：淡浅蓝简约3D楼宇、道路、车辆插图，彩色定位标记区分起点与终点，蓝色虚线标注行驶路线；
2. 上下分栏信息结构：地图占据页面上半区，下半区承载司机、点位、价格全部文字信息，不遮挡路线视图；
3. 清晰点位信息块：分取车点、目的地两行展示详细地址，搭配互换点位快捷按钮。
模块3：车型比价选择页面
标签分组+单列车型卡片，比价逻辑清晰直观
1. 顶部筛选标签栏：推荐、更快、更便宜三种排序模式，适配用户不同出行需求；
2. 标准化车型列表：每款车型统一包含车辆缩略图、载客人数、预估时长、单价四项信息，横向对比无信息差；
3. 底部固定确认按钮：高饱和度紫色行动按钮，视觉突出，下单操作路径短。
模块4：司机对接详情页面
极简纯白卡片设计，聚焦沟通与行程核心信息
1. 司机信息头部：头像、姓名、车辆型号、车牌、综合评分集中展示；
2. 点位地址分区：独立区块收纳取车、目的地详细地址；
3. 双功能操作按钮：一键通话、在线消息左右分布，方便用户提前和司机沟通上车细节。
四、视觉设计体系：浅蓝柔和轻量化城市出行风
1. 色彩系统
- 基底底色：纯净浅灰白基底，长时间浏览地图不刺眼，适配户外通勤强光环境；
- 主行动色：柔和紫罗兰紫，用于确认下单、导航核心按钮，醒目但不刺眼；
- 地图主题色：低饱和浅冰蓝，用于3D建筑、道路、路线线条，营造干净清爽城市氛围；
- 区分标记色：紫、橙、绿三色定位标点，快速分辨起点、终点、周边点位。
2. 图形与可视化规范
1. 等距3D简约城市插画：低复杂度立体楼宇、车辆，抛弃写实厚重建模，轻量化不占用页面加载资源；
2. 圆角柔和功能卡片：低弱阴影、细分割线，模块分区干净整洁，无厚重边框压抑感；
3. 极简线性图标：汽车、摩托、定位、消息统一线性图标风格，视觉统一协调。
3. 文字层级规范
无衬线简约字体，三层清晰信息层级：大额单价数字→页面模块标题→地址、时长辅助小字，通勤途中远距离也能快速抓取关键出行信息。
五、产品商业与用户落地价值
1. 3D地图降低识别门槛：立体楼宇地图让新手快速定位上车点位，减少用户找路沟通成本；
2. 统一比价页面提升转化：多车型同屏横向对比，用户快速匹配符合预算、时长需求的出行方案；
3. 轻量化界面适配通勤场景：浅色系、简约布局，户外阳光直射下屏幕内容清晰可读；
4. 双业务场景一体化：短时快车、长时包车整合在一套界面，不用切换多个APP满足不同出行需求；
5. 操作链路短，留存更高：首页预览、路线规划、选车、对接四步完成完整下单，减少用户流失节点。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
作为工业 HMI 设计师，我在工业场景界面设计多年，发现很多互联网设计师对这个领域既陌生又好奇——我们每天做的App、网页、B端后台，和工厂里的工控屏、产线中控界面，看似都是“界面设计”，实则是完全不同的逻辑。
不同于互联网设计追求“体验感”“美观度”，工业 HMI 设计的核心是“安全、效率、防错”，一个按钮的位置、一种颜色的选择，都可能影响一条产线的正常运转，甚至关乎操作人员的安全。
今天带大家拆解工业 HMI 设计的核心逻辑，帮互联网设计师打通跨界认知，也让更多人看懂这个“小众但高壁垒”的设计领域。
HMI，全称 Human-Machine Interface（人机界面），通俗来说，就是“工业设备的操作面板”——小到机床的触控屏、流水线的控制终端，大到智能制造工厂的中央控制台、SCADA（组态软件）系统界面，都属于工业HMI的范畴。
HMI 是“连接人、设备与数据的工业大脑”：操作人员通过 HMI 监控设备运行状态、下达操作指令、处理故障报警，它的核心价值不是“好看”，而是“好用、安全、不出错”。
这是最容易被混淆的点，很多设计师以为“会做 B 端后台，就能做 HMI”，其实两者的核心逻辑截然不同。
说 2 个关键差异点，帮大家快速理解：
工业 HMI 设计的核心价值围绕“安全、效率、数据驱动”展开，这也是区别于互联网设计的关键，每一点都有明确的设计落地要求：
1. 安全优先：一切设计为安全让步
工业场景的核心诉求是“安全生产”，HMI 作为操作入口，所有设计都要围绕“避免误操作、及时预警”展开。比如：关键操作必须设置二次确认；报警信息要分级（故障/警告/提示），用明确的颜色和声音区分（行业规范：红=故障、绿=正常、黄=警告）；权限分级，普通操作员无法操作核心参数，避免误改。
报警信息需要非常直观的显示
2. 效率至上：减少操作步骤，降低认知成本
工厂操作员每天要重复大量操作，HMI 设计必须“极简高效”：除了首页核心参数预览，其他一屏只承载一个核心任务，避免信息堆砌；常用操作（如启动、暂停）放在最易触控的位置，触控热区要大于互联网界面（工业场景可能戴手套操作）；流程可视化，让操作员一眼看懂设备运行状态和工艺流程。
工艺流程的表达以及停止与开始按钮在不同设备中的位置相同
3. 数据驱动：让数据成为操作依据
现代 HMI 早已不是“单纯的操作面板”，而是“数据指挥舱”。设计时要将复杂的产线数据、设备参数，转化为直观的可视化图表（如折线图、柱状图、仪表盘），让操作员快速捕捉异常数据、分析生产效率，实现“数据驱动操作”。
随着工业 4.0、智能制造的发展，HMI 设计也在摆脱“传统灰黑界面”的刻板印象，逐渐向“智能化、轻量化、可视化”升级，这也是行业未来的核心发展方向：
可能有 B 端设计师会问：我不做工业设计，了解 HMI 有什么用？其实 HMI 的设计逻辑，能帮我们优化 B 端后台、车机、大屏等场景的设计：
工业 HMI 设计，没有互联网设计的“流量光环”，却有着不可替代的专业壁垒——它需要设计师懂工业场景、懂设备逻辑、懂安全规范，更需要“严谨细致”的设计态度。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
GeneX是面向高净值人群的基因长寿管理综合平台，融合科研研究院、私人医疗中心、营养补剂商城三大业务板块，打造一体化数字化体系：品牌官网用于品牌科普、业务展示、客户引流；PC健康仪表盘供用户查看基因检测、生理指标、衰老评分、诊疗预约；移动端自适应页面实现随时随地查看健康数据、选购定制营养产品、预约专家问诊，依托基因检测、生物年龄测算、靶向抗衰干预，提供循证医学个性化长寿管理方案。
医疗行业四大核心痛点
1. 专业可信度难以传递：市面上大量养生类平台充斥营销化话术，高净值客户难以区分真正有科研背书的专业机构，页面视觉缺少科研严谨氛围；
2. 线上线下业务割裂：科研展示、诊疗预约、营养产品购买分散在不同渠道，没有统一线上载体承接全流程服务；
3. 健康数据可视化缺失：基因、心率、激素、生物年龄等复杂医学指标堆砌纯文字表格，普通人难以读懂自身衰老状态；
4. 客户留存链路断裂：客户完成首次咨询后无持续数字化陪伴，缺少长期健康追踪工具，复购与续单转化率低。
二、产品完整全链路业务闭环
整套设计覆盖公域引流官网、私域个人健康后台、移动端全适配三大端口，形成完整业务闭环
1. 官网公域引流链路：品牌首页科研实力展示→研究院/医疗中心业务介绍→科研数据实力背书→专家团队展示→用户真实案例→营养产品商城→线上预约咨询；
2. PC端健康管理后台链路：用户登录总览仪表盘→生物年龄、长寿评分核心指标查看→心率、压力、基因分项数据可视化→诊疗预约管理→定制补剂方案管理；
3. 移动端轻量化链路：自适应官网浏览、手机端健康数据看板、线上课程/抗衰套餐选购、消息问诊、营养订单管理，适配碎片化随身健康查看场景。
三、核心页面模块设计拆解
模块1：品牌官网PC首页，品牌信任建立核心页面
分层模块化布局，平衡高端简约质感与科研专业氛围
1. 首屏视觉区：深蓝色渐变DNA分子科技背景，超大标题点明长寿研究院定位，搭配统一品牌导航栏，区分研究院、医疗中心、商城、博客等业务入口；
2. 业务分区卡片：左右双卡片清晰拆分Research Institute科研实验室、Medical Center私人医疗两大核心业务，搭配显微镜、DNA生物配图强化行业属性；
3. 科研数据实力区块：用大号数字直观展示服务患者数量、科研年限、合作高校、学术论文数量，用客观数据建立客户信任；
4. 个性化方案板块：图文结合拆解基因抗衰六大核心服务逻辑，搭配医师诊疗实拍图传递医疗专业度；
5. 科研、专家、用户评价板块：科研课题科普、医师团队头像矩阵、真人客户视频评价，多层背书打消客户疑虑；
6. 营养产品商城入口：定制抗衰胶囊产品展示，分层呈现产品功效、科研背书、价格套餐，实现流量转化。
模块2：PC端个人健康数据仪表盘（核心私域工具）
深色侧边导航+浅白主内容区的双栏专业医疗后台布局，兼顾数据专业度与阅读舒适感
1. 顶部用户问候区：绑定用户姓名，直观点明专属长寿管理计划正在运行；
2. 核心健康指标卡片：生物年龄、综合长寿评分两大核心数值优先展示，搭配简约折线趋势图；
3. 多维度数据分区：心率压力实时监测、靶向营养补充进度、近期专家预约列表、长期健康分析曲线；
4. 侧边完整功能导航：总览、健康概览、数据分析、基因报告、检测结果、营养方案、预约、设置，覆盖全维度健康管理需求。
模块3：移动端自适应全套页面
轻量化简约卡片设计，适配手机窄屏浏览，完整复刻官网与后台核心功能
1. 移动端官网：压缩导航为顶部简易栏，区块纵向堆叠，简化大图尺寸，保留数据卡片、业务介绍、产品购买全部转化模块；
2. 移动端健康仪表盘：单列垂直排布各项健康指标，简化复杂图表，优先展示当日关键数据、预约提醒、营养计划；
3. 产品&套餐页面：分层展示基础诊断、完整长寿、VIP高端三档服务套餐，清晰标注适配人群、包含服务、年度定价，一键预约咨询。
四、视觉设计体系：深蓝极简高端生命科学医疗风
1. 色彩系统
- 主品牌色：深海静谧藏蓝，代表科研、基因、生命医学，塑造沉稳、严谨、高端的专业调性，区别普通浅色系养生医美平台；
- 辅助科技色：浅冰蓝、淡渐变紫，用于DNA分子、数据图表、高亮按钮，增添生物科技未来感；
- 基底底色：纯白浅灰页面基底，深色侧边导航形成轻重对比，长时间浏览无视觉疲劳，同时区分公域官网与私域后台视觉层级。
2. 图形与可视化规范
1. 生物科技可视化元素：粒子DNA分子、微观细胞、显微镜器械插图，弱化花哨装饰，仅用作页面氛围点缀，突出医疗科研属性；
2. 极简轻量化数据图表：单线条折线图、简约进度条、圆角指标卡片，无厚重阴影，保证医学数据干净清晰；
3. 实拍写实素材：实验室科研实拍、医师问诊实拍、胶囊产品实物图，替代抽象插画，增强真实专业信任感。
3. 文字层级规范
无衬线现代极简字体，三层清晰信息层级：超大粗体核心数据数字→板块大标题→辅助说明小字，高端克制排版，留白充足，契合高净值用户审美偏好。
五、产品商业与用户落地价值
1. 差异化品牌视觉壁垒：深蓝科研风区分市面上浅粉、浅绿同质化医美养生平台，一眼建立专业基因医学认知；
2. 全渠道业务打通：官网引流、后台留存、移动端随身管理三位一体，完整承接从陌生访客到长期付费客户的全链路；
3. 复杂医学数据通俗化：可视化图表拆解晦涩基因、衰老指标，普通客户能自主看懂自身健康状态，提升产品粘性；
4. 多层信任背书设计：科研数据、学术论文、医师团队、真实客户评价多层模块叠加，大幅降低高净值客户决策顾虑，提升预约转化率；
5. 多端统一品牌识别：PC官网、PC后台、手机自适应页面视觉规范完全统一，强化品牌记忆点。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com