北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、全文速览图
二、项目概述
夏日试玩节是 WeGame 平台每年夏季固定推出的季度性运营活动，主要承担着「为生态游戏提供集中曝光、带动用户对新游戏认知与体验」的作用。正因为是年度固定栏目，今年的设计也面临两个必须回答的问题：
一是怎么在延续往期感觉的同时做出一点新意——既不能让老玩家觉得"今年怎么和去年一样"，也不能脱离品牌资产另起炉灶。怎么在"熟悉"和"新鲜"之间找到平衡，让活动每年都有"值得再看一次"的理由，成为本次设计的首要目标。
二是在不绑定具体游戏的前提下，把氛围撑起来——活动不绑定任何具体游戏，需要思考如何靠"夏日"这个主题本身去带出情绪和调性。带着这两个问题，我大致梳理了一下这次项目在设计层面的几个特点：
- 主题驱动，弱化游戏 IP：以"夏日"作为唯一的情绪锚点，用季节氛围去替代具体的游戏美术做视觉牵引
- 产出链路比较完整：从主视觉、叙事动画、活动长页面，到组件设计、奖励资产，是一次从概念到落地的全流程练习
- 整体偏轻松明快：区别于平台日常的深色科技调，需要做出更有季节温度感的设计语言
整个项目从概念发散到最终落地，几乎全程借助三谦 AI 设计平台完成——包括前期的多方向概念探索、主视觉及元素的生成与迭代、Seedance 2 视频能力输出的入场动画和动态入口，以及组件和字体的批量产出。三谦在这个项目中不只是某个环节的"加速器"，而是贯穿了从第一张概念草图到最终上线物料的完整链路。接下来的文章会结合具体设计过程，展开聊聊三谦在各环节中的实际应用和使用体会。
三、AI 助力下的概念提案——2天2个完整概念
往年的方案大多走的是深色科技调，视觉围绕平台感和数字世界展开——这套风格和 WeGame 的平台调性是一脉相承的。
WeGame往年夏日活动KV
蛋蛋君作为WeGame 的 IP 形象，是平台和玩家之间的一个熟面孔。过往平台视觉大多围绕蛋蛋君、PC 游戏元素、桌面载具这几个固定符号展开，今年我想在这个基础上——以强叙事的方式，让蛋蛋君在试玩节里经历一场（？）的夏日冒险。
WeGame IP蛋蛋君
下面我借助三谦AI 快速探索了两个概念方案。
提案1：这个夏日，发现你的游戏宝藏
提到"夏日"，最先冒出来的关键词无非是阳光、海滩、海洋这些。但如果只是把这些元素堆上去，画面会很常规，也很难和"试玩节"本身建立关联。
试玩节的核心是"玩到好游戏"，那能不能把"好游戏"包装成一种值得去争夺的东西？顺着这条线，"游戏宝藏" 这个概念就出现了：玩家通过试玩去赢取宝藏，玩法和叙事就被串到一起了。
1. 让视觉主题为玩法服务：先想清楚"这个故事怎么玩"
在确定主视觉之前，我想先把视觉主题和活动玩法绑在一起——视觉不只是装饰，而是要能撑起活动机制本身。所以我先尝试着推演了两种可能的玩法形式：
玩法一：「从章鱼手中夺宝」
机制：机械章鱼的每条触手代表一个游戏品类（或一款游戏），玩家完成试玩任务→ 逐步"解除"一条触手 → 获取对应奖励。
价值：玩法路径清晰、视觉化强，每一步进度都能在主视觉上"被看见"。
玩法二：「宝藏潮汐」
机制：每天/ 每个时段，章鱼会"丢出"不同的宝藏（限时试玩游戏），像潮汐一样有涨有退，分批次释出游戏资源。
价值：制造稀缺感与紧迫感，驱动用户多次登录，对DAU 有帮助。
这两种玩法都指向了同一个视觉核心：一个握有多份"宝藏"、可以被逐步攻克的角色。也正是这一步让"机械章鱼"这个角色的合理性变得清晰——它不只是一个画面里的反派，更是承载玩法机制的视觉载体。
2. 为什么是机械章鱼？一个"大海守卫者"的选型过程
确定了"宝藏 + 守护者"的结构后，我开始想这个角色具体长什么样。它要能撑起对抗张力，又要符合海洋夏日的设定。
最初尝试过「龙」等几个方向，但要么太常规，要么和夏日氛围不太搭。后来想到克苏鲁文化里的章鱼形象——本身就带有海洋神秘感，更关键的是，章鱼的多条触手刚好可以"抓着"各种游戏元素，天然适配前面玩法里"每条触手对应一个游戏"的设定。
最后再加上机械化的处理，一方面降低恐怖感，更贴近活动的轻松调性；另一方面，机械感也让这个角色和WeGame 的平台调性保持了一致。
早期AI跑图
3. 确定下来的方案
核心叙事：大海守卫者（机械章鱼）守护着今夏最好玩的游戏宝藏，你和蛋蛋君要从它手中赢取宝藏。
画面调性：皮克斯动画感、明亮夏日、冒险向、有对抗张力。
页面设计语言：藏宝卷轴地图、波纹纹理、海洋夏日元素。
这个方案的优势是有明确的"反派"和冲突，叙事性最强。在刚进入活动页面的开头，我还为它做了一段几秒的剧场幕布形式的叙事动画——由海底的蛋蛋君偷走游戏宝箱，过渡到主KV海面追逐场景。
提案2：一键入夏！桌面上的夏日大冒险
1. 小角色× 大桌面幻想场景的反差
对我来说，夏天是待在房间里、坐在电脑前，从中午玩到天黑——窗外蝉鸣，屏幕里是另一个世界。我猜很多 WeGame 的年轻用户也是这样：暑假的记忆不在海边，而在桌面前。
所以我想：能不能把这种"足不出户却抵达任何地方"的感受直接画出来？它是一种悠闲明亮的感觉。
我希望整个画面聚焦在一个微缩的桌面场景上——小蛋蛋君× 大桌面幻想场景
小的部分：蛋蛋君是一个被"装"进日常生活里的小小主角；
大的部分：屏幕里的世界正在"溢出来"——海浪、游戏生物、光束、像素粒子从屏幕中涌向四周，整张桌面被一场奇幻的夏日冒险覆盖。
2. 确定下来的方案
核心叙事：夏日的午后，少年坐在桌前打开WeGame——海洋、生物、光从游戏世界中涌出来，把整张桌面变成了一场奇幻冒险。
画面调性：明亮夏日、奇幻、日常× 幻想奇遇。
画面结构：微缩桌面为视觉中心，幻想元素从屏幕向外扩散，形成"现实 → 幻想"的层次感。
相比方案一，这个方案更偏情感向，想表达的是：你不用出门，打开WeGame 就能抵达任何地方。
3. 两个方案的取舍
最终两个方案都获得了认可。考虑到夏日试玩节作为平台年度大型活动，需要更强的视觉张力和叙事钩子来撑住量级，方案一作为主方案推进上线；方案二的"微缩日常"思路则被保留下来，作为未来日常活动设计可以延展的方向。
四、设计执行
确定主方案之后，整个执行过程其实就是不断把"宝藏冒险"这个故事拆解到每一个环节上。下面从开场体验到核心画面再到页面细节，展示最终方案的设计思路和效果。
活动体验链接：https://www.wegame.com.cn/act/wegame/wegame20260525/index.html
1.主KV设计
主视觉的风格方向定为皮克斯动画感+ 明亮夏日 + 冒险张力——画面要有动画电影海报的质感，色调明亮饱和但不轻浮，整体带有戏剧性的故事张力。
区别于往年深色科技调的处理，这次主动选择了蓝色海洋为主色调、明亮天光为氛围基底，让画面一眼就传达出"夏天"和"冒险"两个信息。风格上追求2D厚涂和 C4D/Blender 风格化渲染的混合质感——圆润、通透、色彩丰富，既有体量感又不沉重。
本次活动产出了两张KV，分别承担不同的场景职责：
KV1用于平台内外的 Banner 推广位，需要在更小的尺寸内快速传达冲击力和故事感。
构图逻辑：采用低视角、鱼眼镜头般的冲击力视角。蛋蛋君驾驶手柄飞行器从画面中心偏下的位置高速冲向观众，身后的机械章鱼正在追赶——整个画面呈现出一种"迎面冲来"的动势，在信息流/Banner 等场景中能快速抓住注意力。
主角关系明确：和首页背景不同，这张的叙事重心在蛋蛋君身上——他是画面的前景焦点，章鱼退到中远景作为"追赶者"。这样的安排让画面有明确的故事方向感：蛋蛋君在逃、章鱼在追、宝藏在抢，一眼就读懂发生了什么。
两侧海浪对冲：巨浪从左右两侧向中心对冲翻涌，蛋蛋君从浪的缺口中冲出——既制造了速度感和紧张感，也在构图上形成对称的视觉框架，把视线锁定在中心人物上。
远景点缀：右上角的小岛、鱼群等元素补充了"夏日海洋"的世界观细节，丰富画面信息但不抢主体。
KV2作为活动首页的背景，需要同时承载氛围感和信息传达。
构图逻辑：章鱼Boss 居中偏上占据 C 位，体量最大、视觉重量最重——它是整个"争夺宝藏"叙事的核心角色。触手向两侧展开，分别抓着游戏机、游戏手柄、游戏奖杯、WeGame logo笔记本电脑等平台相关元素，既撑满了画面宽度，也传达了"它守护着这些游戏相关元素"的信息。
中心留白给标题：章鱼身体下方刻意留出了空间，放置「夏日试玩节」主标题和活动日期信息。标题和章鱼形成上下呼应——章鱼是视觉锤，标题是信息锚，两者各占其位不互相干扰。
海浪包裹感：整个画面被翻涌的蓝色海浪环绕，形成一种向中心汇聚的动势——视线被自然引导到中心的章鱼和标题上。左右两侧的海浪也充当了"画框"的角色，让页面在视觉上有边界感，不会散。
KV设计过程中发现有不合适的地方，借助三谦AI快速进行了调整。实际上原先只做了KV1，放进活动首页作为背景时发现：层次不分明——很难在中心区域稳定地放置标题和功能模块。幸好有三谦AI平台，很快调整迭代了字体和新构图KV。而最先做的追逐构图也没有浪费，直接转为 Banner 广告图使用。
2.页面体验
开场叙事动画
进入活动页后，会先自动播放一段3-4 秒的入场动画——画面从绘本插画风格的"小剧场"场景快速过渡到主视觉KV，用一个短短的镜头把活动的核心叙事（蛋蛋君和机械章鱼争夺游戏宝藏）快速传递给用户，过渡到KV，让人在看到活动内容之前，先感受到"这是一段冒险故事的开场"。
这个设计的目的是：让活动页不是一打开就是一个信息页面，而是有一个"进入故事"的仪式感。 视频结束后画面渐隐过渡到活动长页面，动态到静态的切换不会有突兀的割裂感。
制作上使用了三谦中的Seedance 2 视频生成能力：分别以小剧场画面和主KV 作为首尾帧生成过渡动画，再在 AE 中进行抠像和拼接，最终合成为一段流畅的入场序列。
首图视差效果
活动首页已经有了入场动画和GIF 动态入口，但用户在首屏停留时如果只是一张静态图，还是会觉得比较呆板。所以在首图区域加入了视差交互——鼠标在页面上移动时，海浪、章鱼、前景元素以不同速度响应，让用户感受到画面的空间纵深，增加了首屏的可交互性和空间感。
视差效果的实现需要设计同学自己将主视觉拆分为多个透明图层（前景浪花、中景章鱼、远景天空等），并为每层设定不同的景深参数。为了快速验证视觉体验，我用CodeBuddy 做了一个视差效果预览工具——可以直接导入拆好的图层，通过右侧面板实时调整每层的 depth 深度值、位移幅度、模糊平滑等参数，即时预览效果。工具还支持导出可分享的 HTML 和参数 JSON，方便直接给重构同学参考还原。
这样省去了反复切图→写代码→看效果→再调的来回过程，设计侧就能把体验效果调到满意再交付。
Codebuddy快速跑的视差效果调试工具
页面模块设计
页面的其他模块（信息展示、游戏榜单、最新资讯等）在之前平台活动【周末免费玩】的框架基础上，进行了主题化的设计包装——整体色调统一为深蓝海洋调，信息容器加入了海浪边框和气泡质感的细节处理，各模块标题做了海滨冒险氛围的主题化设计，让整个长页面从上到下保持在"夏日宝藏冒险"的世界观里。这部分页面设计主要由同事陈诺负责完成。
另外在页面最底部，我藏了一个小彩蛋——一只海绵和一只海星。不影响任何信息传达和功能，但滑到底的用户会发现这个小细节。算是在整体规范之内给自己留的一点小趣味。
3.组件设计
页面小组件的设计上我也贴合了整个活动主题的设定，希望让用户沉浸在"宝藏冒险"叙事里的。
主标题设计
本次活动字体设计也是全部由AI生成。考虑到本次活动调性偏活泼冒险，字体设计上我希望：一是块面感要重，能在视觉重量上压得住身后那只巨大的章鱼，不被画面吃掉；二是风格不能太机械生硬，要带有手绘感和冒险气质的趣味，和整体"皮克斯动画+夏日冒险"的调性统一。
第一版字体做出来放进KV 后发现了问题——字形是两行横排的方块结构，章鱼也是横向铺开的，两个横向大体量撞在一起，画面缺少起伏。
于是做了第二版调整：配合画面中海浪涌动的动势，在字体两侧加入浪花做扩张处理，让字组呈现出两边高、中间起伏的轮廓变化；同时拼接椰树等夏日元素作为装饰，让字体气质和画面更加融为一体，而不是"贴上去的一行字"。
Seedance生成的字体设计动效
二级页入口设计
右侧二级入口这个位置承担「评测赏金令」的入口引导——设计上需要拿捏一个分寸：既要吸引用户注意到并点击，又不能抢了主画面章鱼的视觉主角地位。
我的做法是把蛋蛋君从主KV 中拆出来放在这里。蛋蛋君本身造型细节丰富、辨识度高，天然具有吸引视线的能力，作为独立入口放在右下角刚好合适。同时做成可循环播放的 GIF 动态——在以章鱼为主的大面积静态画面中，这个小范围的动态自然成为视线的第二落点，不需要放大尺寸或加强对比就能引导用户关注。
动态设计上做了一种伪3D 立体 × 2D 贴纸的混合质感处理——介于"真实"和"图形"之间，既有体积感又不会和主 KV 的风格抢戏，保持了整体画面的协调。
里程碑宝箱设计
「里程碑」这个模块的玩法是用户通过试玩不同数量的游戏来解锁奖励。为了让奖励体系和"夺宝"主题一脉相承，我设计了四级游戏宝箱——木、铜、银、金，对应试玩 1、2、3、5 款游戏的递进成就。
视觉上做了两个状态区分：未领取时宝箱合上锁，已领取时宝箱打开，内部露出金币和游戏机等"宝藏"。同时每一级宝箱的场景加入了对应的海洋元素和光影氛围——从最基础的锚和沙地，到珊瑚、海星，再到最高级别的章鱼触手装饰，越往后越"华丽"，呼应了奖励不断深入的进程感。
五、识别与降低"AI味"
整体来看，AI完成了大约80%的”画面生产”工作，剩下的20%主要在于关键的人工创意+降低AI味。
这是目前AI 辅助设计中几乎不可避免的一个环节——AI 生成的画面哪怕完成度已经很高，但拼在一起总有一种说不上来的"不对劲"。可能是太满了、太均匀了、太光滑了，或者缺少某种人为的设计意图感。这种感觉很微妙，但用户能一眼感知到。
识别它、然后针对性地修复它，让画面看起来更自然、更像"有人想过的设计"，是我在这个项目中花时间最多的事情之一。下面分享几个过程中积累的具体做法。
1. 先识别：AI味从哪来？
在动手修之前，要先知道"哪里看起来像AI的"：识别出来之后再针对性处理，比盲目调整效率高很多。
Codebuddy给的AI味总结
2.参考图驱动，"左手倒右手"消除均匀感
AI 生成的东西有一种"很平的均匀感"——笔画粗细一致、元素分布均匀、材质质感统一。造型中规中矩、缺乏想象力。
比如蛋蛋君的设计。我的构思是他驾驶着一台游戏手柄形态的飞行器，正从章鱼的包围中冲出来——有速度感、有冒险感。
如果直接用描述性关键词去生成（比如"蛋形机器人驾驶手柄飞行器，正面视角，C4D 风格，干净背景"），出来的结果往往很平，缺乏想象力——造型中规中矩，动态感也不够。
问题在于：幻想性的画面需要幻想性的参考来激发。 纯靠文字描述，AI 容易陷入"最安全的解"。于是我换了个思路——先找到一张氛围开阔、造型有想象力的参考图作为风格锚点，再加入自己的想法引导AI 生成手柄飞行器冲出的画面。出图后再逐步调整比例、打磨细节、统一风格，经过几轮迭代，最终得到了比较满意的设计。
AI 有了"视觉方向"后，出图的风格准确度和想象力会明显提升。
另外还可以"左手倒右手"：把 AI 生成的结果导出，手动做一些微小调整，再喂回三谦让它基于调整后的版本继续优化。几轮来回后，画面就会打破那种"一眼AI"的均匀感，变得更像有设计师意图在里面。
AI蛋蛋君主体设计过程
3. 局部标注"指哪改哪"，比全局重新描述精准
例如机械章鱼的设计。
AI 最初生成的机械章鱼存在几个明显问题：材质过于复杂、细节堆砌，整体观感偏暗甚至有些"恐怖"，和活动轻松明快的调性不符；触手上抓着的元素存在崩坏（结构错乱、形态不自然），而且和WeGame 平台没有任何关联——这是 AI 生图常见的问题，它会"填满"画面但不理解内容的意义。
处理上分了几步：
第一步：剥离干净的章鱼主体。先用AI 去除画面中的蛋蛋君、标题等干扰元素，只保留单独的机械章鱼，作为后续修改的基底。
第二步：逐步替换触手上的元素。我希望章鱼的触手分别握着和平台相关的物品——键盘冲浪板、带 WeGame logo 的笔记本电脑、游戏奖杯、鼠标、游戏手柄。但一次性通过关键词把所有元素都描述清楚，生成效果往往不理想（AI 很难同时精准控制多个局部细节）。
这里用到了三谦平台自带的参考图标注功能——直接在图片上圈出需要修改的区域，指定替换成什么元素。相比纯文字描述，这种"指哪改哪"的方式准确率高了很多。
4. 构图和质感分两轮做
想一次性让AI 同时解决"画什么在哪里"和"长什么质感"，往往两头都做不好。
做法：分两轮。第一轮只关注构图和元素位置。确认构图满意后，将出图提取为线稿+色稿，叠加希望的材质风格参考图，用三谦重新生成第二轮——这一轮只负责"穿好皮肤"。先画对位置，再穿好衣服。
六、AI提效提质
1.流程结构的变化
比起单纯说"某个环节快了几天"，我觉得更值得聊的是 AI 对整个流程结构的改变。
过去的流程是线性串联的：找参考→ 多人出概念草图→ 草图修改细化确认方案→ 3D建模/渲染/后期修图→ 定稿后才能启动组件、字体、页面……每一步都依赖上一步完成，决策发生在中后期，推翻成本很高。整个周期至少 8-10 周，多人协作。
这次借助三谦，流程上可以前期压缩时间，后期并行推进，变成了：一人 2-3 天产出多套完整度较高的提案方案（含配色、字体、动效演示）→ 基于接近成品的画面直接拍板 → 主KV打磨、组件、字体、动效并行推进。整体包含监修等花费约 4-5 周，1-2 人完成。
整体项目周期缩短约 50%，人力投入减半，前期决策周期从 2-3 周缩短到 3 天。
2.省下来的时间，花在了哪？
整体看AI确实为整个项目节省了不少时间，但在流程中花在后期的时间多了。个人的感受是AI 能快速帮你实现大约 60% 的完成度，剩下 40% 往往需要花掉大部分时间。
个人感受是，前期省下来的时间去了四个地方：
让决策更早发生
2-3 天就能出完整方案，leader 和产品运营可以基于高完成度的画面做判断，不再凭想象决策。决策越早，后期推翻的风险越低。
多方向充分试错
同时跑多条IF 线快速排除——不确定想要什么的时候，先快速知道不想要什么。过程中发现构图、层次等问题可以即时修正，调整成本从"天"降到了"分钟"。
打磨体验细节
过去光把主KV 做出来就耗尽了大部分精力，入场动画、视差效果、GIF 动态入口、宝箱递进设计这些"锦上添花"的事很难有余力去做。现在有了余力，这些细节决定了用户体验是"70分的够用"还是"90分的完整"。
降低 AI 感、统一品质
AI 出图快但"均匀"——层次扁平、细节堆砌、风格不统一。反复横跳调整，消除"一眼AI"的均匀感，让最终交付看起来是一套有设计意图的完整方案，而不是一堆 AI 拼图。
AI 让"从 0 到 1"变快了，省下来的时间让我有余力把"1 做到 1.0"。 提效的意义不只是快——是让你有时间去把东西做得更好。
七、结语
这个项目做下来，最大的感受是：AI 改变的是生产环节，但没有改变设计本身需要回答的那些问题——做什么方向、为什么是这个方向、画面层次怎么处理、体验节奏怎么编排。
它把能力分布从"会做"前移到了"会判断"。AI 给得越多越快，越需要清楚自己要什么——人人都能使用AI，但做出来的成果质量存在区别
456
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
