很多人在暗部选色时，就容易选的很脏，尤其是黄色，比如下面这种：
如果暗部颜色本身就选脏了，拿出来的最终质感就是这样的：
但如果你选择色相本身没那么脏：
这时候出来的效果就是这样的：
你可以对比下，脏不脏，一目了然：
这里选黄色暗部颜色的时候，有个小技巧，如果你实在不知道怎么选，你可以将亮部的颜色直接再叠加一层，把新的一层变成正片叠底模式，出来的新颜色，就可以作为暗部的颜色！
是不是非常简单，这样你就不用自己去选颜色了，在这个颜色基础上，微调就可以了！
可以看下面两个黄色暗部的对比，很明显左侧的就很脏，右侧就很通透：
有时候如果我们增加暗部颜色，加过了，导致整体质感有点脏，这个时候，你只需要加一层边缘光，就会提亮不少，减少脏感。
哪怕是刚才那么脏的暗黄色，增加边缘光之后，都会好很多：
其实原理就是在边缘打了个灯光，你想想，那能不亮堂点吗！
实在案例中，也是非常好用，像这个左侧不加边缘光，就显得很脏，加了之后就清透很多：
再比如下面这个，加了边缘光，包括头部，手指等地方，也会通透很多：
所以，加边缘光真的可以减弱很多脏感！
左侧为什么那么显脏，其实除了颜色用的脏以外，很重要的是右侧除了红色和少量绿色，大部分面积都是黑色！
而左侧的图几乎没有黑白灰，连面部都是肉色。
当然，倒不是说颜色用多种就一定脏，而是容易用脏，所以我们现在会很好的控制黑白灰的面积。
你仔细观察，其实我们做的很多画面，都融入了大量的黑白灰，所以颜色就不容脏：
反倒是刚毕业的时候，不知道这个窍门，不管是做平面海报、吉祥物还是图标，都是各种颜色搭配，完了还用不好，最终显脏：
希望大家现在都能记住这个点！
总结起来，我认为减少颜色脏的技巧有3点：
第一，选色时就不能在颜色中融入过多的黑色，不然你选的颜色就很脏了。
第二，利用边缘光去提亮整体的亮度，减少脏感
第三，多增加黑白灰的面积比例，而不是多彩色去搭配，因为黑白灰比较保险，这样可以减少颜色用脏的风险！
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
Momentum是面向中大型企业团队的一站式AI赋能生产力协同SaaS，覆盖PC网页工作台、手机随身客户端、智能手表轻量化终端三端设备，配套明亮浅白、深色暗调两套完整界面主题。平台整合项目更新总量、迭代次数、会议时长、KPI绩效、任务完成率、周工作量热力看板六大类数据指标，内置团队消息会话、文档素材、待办清单、原生AI助手四大办公模块，适配办公室精细化项目管控、外出移动处理工作、碎片化手表速查数据全场景办公需求。
传统团队协同工具四大行业痛点
1. 多终端视觉割裂：电脑、手机、穿戴设备界面风格、组件规范不统一，团队切换设备学习成本高；
2. 缺少深浅完整双主题：仅提供浅色模式，夜间加班办公强光刺眼，无适配深色主题；
3. 数据指标分散杂乱：迭代、会议、绩效、工作量数据拆分多个页面，管理者无法单屏汇总团队产能；
4. 品牌视觉记忆点薄弱：多数协同后台采用灰蓝常规配色，无高辨识度主色，产品同质化严重。
二、产品完整团队效率管理闭环
三端数据实时同步，形成全局数据总览→项目进度管控→移动端随时处理事务→手表碎片化速查完整办公闭环
1. PC端Dashboard全局总览层：顶部个性化欢迎入口，一站式陈列项目更新、迭代次数、平均会议时长、团队KPI、任务完成率核心数字，搭配条形图表、周工作量热力色块看板，直观展示团队产能负载；
2. 左侧全局导航栏：分层通用功能（仪表盘、模板、产品、文档、消息）、待办清单、AI助手、团队会话联系人，层级清晰高频操作触达便捷；
3. 移动端轻量化精简面板：保留核心数据图表、日历日程、待办消息，底部极简导航栏适配单手触控操作；
4. 智能手表极简表盘：只展示项目更新总量与核心趋势图表，抬手快速读取关键业务数据；
5. 深浅双主题完整体系：同一套组件、图表、卡片分别适配浅白明亮、深色氛围感两套基底，满足昼夜不同办公环境。
三、核心页面模块设计拆解
模块1：PC端全局数据仪表盘（深浅双版本）
左侧固定侧边导航，右侧多卡片网格轻量化布局，以活力暖橙为统一品牌识别色
1. 顶部全局操作栏：搜索框、月度时间筛选、通知、个人头像快捷入口；
2. 顶部欢迎引导区：个性化用户问候，搭配流体渐变橙抽象视觉Banner传递提效产品定位；
3. 六大核心数据卡片：项目更新总量柱状图、迭代次数、周均会议时长、团队KPI得分、任务完成率、周工作量热力色块表，全部采用橙系渐变填充；
4. 右侧日程与预约卡片：当月日历、团队待办日程，一键发起会议预约；
5. 左下角升级专业版醒目橙色行动按钮，清晰引导付费转化。
模块2：移动端轻量化首页
1. 顶部月度筛选、消息通知、个人头像；
2. 精简版核心数据图表，压缩冗余参数适配竖屏；
3. 日历日程模块展示当日团队任务；
4. 底部五图标极简导航：首页、模板、文档、待办、消息，单手即可点击全部高频功能。
模块3：智能手表表盘组件
极简无冗余布局，保留项目更新数字、简化趋势条形图，复用品牌橙色配色，小尺寸屏幕信息不拥挤。
模块4：深浅双主题统一组件体系
进度条、热力色块、数据卡片、按钮、输入框一套设计规范，仅切换基底与文字色值，视觉风格完全统一，降低开发维护成本。
四、视觉设计体系：活力暖橙现代商务生产力风
1. 色彩系统
- 双基底体系：纯净哑光浅灰白（日间办公）、深棕近黑深色基底（夜间加班）；
- 品牌主识别色：高活力暖橙色，用于按钮、图表填充、高亮指标、品牌Logo，辨识度极强，区别于行业常规蓝灰配色；
- 辅助区分色：浅灰用于次要边框、辅助文字，纯白/深灰承载卡片面板；
- 数据状态色：同橙色深浅渐变区分工作量低/中/高/饱和四级负载，直观易懂。
2. 图形与可视化规范
1. 轻量化柔和图表：条形趋势图、色块热力看板统一暖橙渐变，线条柔和无生硬棱角；
2. 大圆角悬浮卡片：极低柔和阴影，大量留白，多卡片同屏排布整洁不拥挤；
3. 流体渐变抽象视觉图形，作为页面装饰强化科技提效氛围感；
4. 纤细线性极简导航图标，三端完全复用，视觉体系统一。
3. 文字层级规范
纤细无衬线现代商务字体，三层清晰信息层级：产能/任务超大加粗数字→模块板块标题→日程、参数辅助小字，远距离快速抓取团队核心绩效数据。
五、产品商业与团队落地价值
1. 电脑/手机/手表三端统一视觉规范：一套设计系统覆盖全设备，降低团队多设备切换学习成本；
2. 完整深浅双主题适配全时段办公：白天浅色舒适、夜间深色护眼，覆盖全天办公场景；
3. 一站式汇总全部团队产能数据：单仪表盘看完迭代、会议、绩效、工作量，管理者高效评估团队负载；
4. 高记忆点暖橙品牌色打造差异化：跳出行业千篇一律蓝灰后台，视觉辨识度高利于产品品牌传播；
5. 轻量化移动端与手表终端：碎片化场景快速查看数据，不用打开电脑也能掌握项目进度，提升团队响应效率。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
BRIX是一站式整合数字营销服务商，官网作为品牌线上获客核心阵地，用乐高积木作为品牌核心视觉隐喻，象征营销策略模块化搭建、层层组合实现增长目标。官网覆盖首页、服务体系、成果数据、案例展示、团队介绍、FAQ咨询、底部转化表单全页面，完成从UX调研、受众定位、低保真原型、视觉设计、动画交互到开发上线的全流程，同时完成1920px桌面端与375px移动端的双端适配。
传统营销 agency 官网四大行业痛点
1. 品牌视觉无统一记忆符号：多数营销官网设计同质化严重，没有专属视觉隐喻，访客看完难以留下品牌印象；
2. 业务展示零散杂乱：营销服务、案例成果、数据背书分散排布，访客无法快速感知机构专业能力；
3. 移动端适配体验粗糙：只重视PC端效果，手机端排版拥挤、交互卡顿，移动端流量转化流失严重；
4. 转化路径不清晰：缺少分环节咨询入口、FAQ打消顾虑模块，访客浏览后很难完成留资动作。
二、完整设计落地闭环
项目遵循标准化六步设计流程，形成前期调研→原型规划→视觉落地→动效优化→开发上线→双端适配完整闭环
1. UX研究阶段：梳理行业商业环境、用户行为与竞品情况，搭建界面设计底层逻辑；
2. 受众定位阶段：锁定企业主、市场管理者、电商扩张品牌三类核心目标客群；
3. 原型搭建阶段：规划首页、服务页、作品集、关于我们、评论区五大核心页面的跳转逻辑与转化场景；
4. UI视觉阶段：确立浅灰白基底+暖橙品牌主色，积木3D模型作为视觉核心，搭建模块化规范设计体系；
5. 动画交互阶段：页面滚动微交互、积木动效、卡片过渡动画提升浏览沉浸感；
6. 开发适配阶段：输出响应式代码，完成桌面与移动端布局优化，保证多设备浏览体验一致。
三、核心页面模块设计拆解
模块1：首屏品牌主场区
顶部简洁导航栏包含首页、服务、作品集、关于我们、评论区，右上角放置「获取咨询」高转化按钮；主视觉用超大标题「FROM STRATEGY TO CUSTOMERS」搭配堆叠透明积木3D模型，右侧陈列已落地项目、营销活动、行业深耕年限三大数据背书，下方设置查看案例入口，首屏就完成品牌定位与实力传递。
模块2：全品类服务板块
用大面积品牌暖橙色块做分区，从上到下依次陈列社媒内容营销、定向广告、效果营销、场景广告、邮件营销、PR传播、创意视频全业务线，每一项服务都配套简介与独立咨询按钮，访客可按需跳转对接对应业务。
模块3：实力背书两大核心板块
1. 数据成果区：用ROI提升、成本下降、落地项目数量三组醒目数据，直观展示过往投放效果，强化专业可信度；
2. 案例展示区：搭配时尚品牌真实营销案例，标注线索涨幅、CPA降幅、ROI倍数具象成果，用真实场景打动潜在客户。
模块4：流程、团队与咨询转化板块
1. 营销执行流程：用拆解的机械积木可视化从需求简报、策略制定、广告投放、优化迭代到数据复盘的全链路步骤；
2. 团队介绍区：展示核心岗位成员形象，传递靠谱的团队配置；
3. FAQ答疑区：针对企业自建团队的常见疑问做折叠解答，打消客户合作顾虑；
4. 底部表单区：复用积木品牌视觉，设置留资表单，完成最终获客转化。
四、视觉设计体系：暖橙模块化商务创意风
1. 色彩系统
- 基底底色：纯净浅灰白基底，弱化营销行业浮夸感，营造专业稳重氛围；
- 品牌主色：温暖活力橙，用于按钮、板块分区、标题高亮，提升品牌活力与识别度；
- 辅助色：深灰用于正文文本、深色背景模块，黑白平衡页面轻重节奏；
- 视觉符号色：半透明黑、暖橙渐变的3D积木，贯穿全站形成强品牌记忆点。
2. 图形与可视化规范
1. 积木模块化视觉隐喻：3D乐高积木、拆解机械积木呼应品牌名BRIX（砖块），完美契合模块化营销策略的业务内核；
2. 规整响应式栅格：桌面端1920px、移动端375px两套栅格规范，保证多端排版对齐整齐；
3. 实景商业素材：品牌门店、时尚客户案例、团队实拍图增强真实信任感；
4. 折叠面板、卡片式布局，让长页面分层清晰，浏览节奏舒适。
3. 文字层级规范
无衬线商务字体，三层清晰层级：大标题品牌slogan→板块二级标题→业务详情、参数辅助小字，重点增长数据放大加粗，访客一眼抓取核心优势。
五、商业落地价值
1. 专属视觉符号打造差异化：积木隐喻把抽象营销策略具象化，和同行形成明显区隔，加深访客品牌记忆；
2. 全链路清晰的转化体系：首屏、服务页、底部多处咨询入口+FAQ前置答疑，大幅提升线索留资率；
3. 双端精细化适配：PC端展示完整品牌气场，移动端优化触控布局，覆盖不同渠道的访客流量；
4. 专业内容分层排布：从品牌定位→业务范围→数据成果→案例→团队→答疑→表单循序渐进，符合客户决策路径；
5. 可拓展模块化设计体系：后续新增业务、案例可沿用现有视觉规范，低成本完成页面迭代更新。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
Omni是面向互联网跨职能团队的一站式AI赋能项目协同Web后台，覆盖两大核心页面：全局数据Dashboard总览、项目看板任务管理页，内置独立AI智能助手对话面板，整合任务完成率、团队生产力、项目进度、工作量负载、会议记录五大类数据模块，支持任务分阶段看板拖拽、AI自动生成迭代计划、团队多维度绩效可视化统计，适配设计、研发、产品团队日常排期、进度追踪、智能辅助办公全场景。
传统团队协同工具四大行业痛点
1. 数据页面割裂分散：任务、绩效、会议、AI辅助功能分属多个页面，管理者无法单屏掌握团队全部工作状态；
2. 无内置AI生产力模块：排期、方案梳理、会议纪要整理需要借助外部工具，协同链路断裂；
3. 任务看板与数据统计分离：只能看任务清单，无可视化图表展示月度完成率、团队负载，难以评估产能；
4. 界面风格厚重压抑：深色硬核后台长期办公视觉疲劳，缺少柔和轻量化渐变视觉提升办公舒适感。
二、产品完整团队协同办公闭环
整套后台页面互通，形成全局数据查看→看板任务管理→AI智能辅助→会议跟进完整办公闭环
1. Dashboard全局总览层：顶部实时展示新增任务、进行中任务、逾期任务核心数字，搭配月度任务柱状图、周项目进度折线图、团队AI生产力环形图表，一站式汇总团队全部绩效数据；
2. 项目看板管理层：四列标准敏捷看板（待办/进行中/评审/已完成），卡片承载任务描述、进度条、负责人、优先级，可视化迭代排期；
3. AI智能助手模块：独立对话面板，支持生成冲刺计划、梳理当日待办、标记紧急工作，内置渐变球形AI视觉符号，轻量化交互输入框；
4. 会议记录模块：独立卡片存放会议主题，一键发起线上会议，自动沉淀评审讨论要点，打通任务落地闭环；
5. 统一复用组件体系：工作量进度条、多层折线图表、渐变环形指标卡片可全局复用，搭建规范可拓展设计系统。
三、核心页面模块设计拆解
模块1：首页全局数据Dashboard
顶部全局导航栏+多卡片网格轻量化布局，浅白哑光基底搭配紫橙渐变科技组件
1. 顶部全局导航：仪表盘、我的任务、项目下拉、收件箱、日历、AI助手六大高频入口；
2. 顶部核心数据指标：当日新增任务、进行中任务、逾期任务超大数字直观展示，附带环比增减标识；
3. 四大核心数据卡片组：月度任务完成柱状图、周项目进度折线图、AI团队生产力环形占比、工作量负载渐变进度条；
4. 配套功能卡片：会议记录快捷入口、悬浮AI助手对话面板，无需切换页面快速唤起智能工具。
模块2：项目看板任务管理页面
1. 顶部二级分类标签：总览、列表、任务看板、里程碑、文档；
2. 四栏敏捷任务看板：待办、进行中、评审、完成，横向拖拽调整任务阶段；
3. 标准化任务卡片：任务标题、拆解子项、负责人头像、优先级标记、渐变进度条、任务配图预览；
4. 底部快捷新建任务按钮，快速补充迭代需求。
模块3：AI智能助手独立面板
居中渐变全息球形AI视觉符号，简洁问候引导文案，底部快捷指令入口（规划冲刺、规划日程、查看紧急事项），下方多功能输入框支持附件、图片、语音、文字提问，柔和紫渐变衬底突出AI模块科技氛围感。
四、视觉设计体系：浅白紫橙渐变轻科技办公风
1. 色彩系统
- 基底底色：纯净低饱和浅灰白基底，长时间浏览大量图表、任务卡片无视觉疲劳；
- 品牌渐变主色：淡紫过渡暖橙柔和渐变，用于图表高亮、进度条、AI球形主视觉，弱化硬核科技冰冷感；
- 辅助区分色：浅灰用于次要边框、背景，黑色用于顶部导航选中、主操作按钮，层级清晰；
- 状态区分色：低饱和浅红标记逾期、高优先级任务，绿色标识完成、增长数据。
2. 图形与可视化规范
1. 柔和渐变多层图表：柱状图、折线图、环形占比图统一采用紫橙渐变填充，搭配虚线趋势线柔和不刺眼；
2. 轻量化圆角卡片：极低柔和阴影、大圆角，大量留白，多卡片同屏排布不拥挤；
3. 渐变全息球形AI主视觉，作为AI模块核心识别符号，提升产品差异化记忆点；
4. 纤细线性极简图标：任务、项目、日历、AI统一轻量线性图标，全页面视觉体系统一。
3. 文字层级规范
纤细无衬线现代办公字体，三层清晰信息层级：任务数量/绩效占比超大加粗数字→模块标题→任务描述、参数辅助小字，远距离快速抓取团队办公核心数据。
五、产品商业与团队落地价值
1. 一站式整合全办公模块：数据看板、任务看板、AI助手、会议记录集成同一后台，减少团队多工具切换成本；
2. AI原生嵌入协同流程：无需跳转第三方大模型工具，后台内直接生成排期、梳理工作，提升团队协作效率；
3. 多维度绩效可视化：月度任务、周项目负载、团队生产力多图表同步展示，管理者直观评估团队产能；
4. 柔和轻量化渐变视觉：抛弃传统厚重深色协同后台，浅白渐变基底适配全天办公，视觉舒适度更高；
5. 标准化可复用组件体系：图表、进度条、任务卡片统一规范，便于后续拓展功能，搭建可拓展企业级设计系统。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
Sightsee Holidays是面向旅行社运营、商旅管家的一站式旅游资源管理Web后台，统一整合酒店预订、多品类交通（出租车/航班/大巴/火车）、旅游套餐三大核心业务板块，配套预订日历、预算环形数据图表、当日特惠房源、目的地推荐、在线AI客服、优惠活动推广模块，依托规整12列栅格系统保证全站视觉统一，兼顾日常房源上架、订单查询、客户出行规划、成本预算核算多重办公场景。
传统旅行社后台行业痛点
1. 页面布局杂乱无规范：多数旅游后台无统一栅格，房源、日历、数据图表排版失衡，视觉割裂，长期办公阅读疲劳；
2. 酒店、交通、旅游套餐多业务分散：需要切换多个系统分别管理房源、车票、线路，无法一站式统筹；
3. 预算与订单数据无可视化图表：成本、支出全为纯文字数字，无法直观看清酒店/交通开销占比；
4. 缺少实时客服沟通渠道：客户咨询预订问题需跳转第三方聊天工具，响应流程繁琐流失客源。
二、产品完整旅游运营业务闭环
整套后台单页面打通资源展示→出行预订→预算核算→客户咨询完整运营闭环
1. 首页总览仪表盘层：一站式聚合当日特惠酒店、热门目的地、预订日历、月度预算环形图表，运营人员打开首页掌握全部核心经营数据；
2. 酒店预订管理页：批量展示带价格、评分的房源卡片，快速查看折扣活动，筛选对应目的地房型；
3. 交通票务预订页：分出租车、航班、大巴、火车标签，统一填写上下车/起降点位、时间、人数完成预约，搭配限时优惠横幅；
4. 预算数据分析模块：环形分层饼图直观展示酒店、交通、其他开销占比，辅助运营控制旅游套餐定价成本；
5. 侧边常驻AI客服窗口：页面右侧悬浮在线机器人，随时响应客户出行、预订相关咨询，提升转化效率。
三、核心页面模块设计拆解
模块1：全站统一12栅格规范体系
采用12列拉伸式栅格，边距30px、模块间距20px，左侧固定侧边导航栏，右侧内容区自适应排布卡片、图表、表单，保证首页、酒店、交通全页面对齐统一，提升专业精致度。
模块2：首页综合总览Dashboard
左侧固定功能导航，右侧多卡片轻量化网格布局，低饱和浅白基底搭配品牌蓝高亮按钮
1. 顶部全局搜索栏、用户头像、消息、收藏快捷入口；
2. 当日特惠房源横向滚动卡片，标注原价折扣、星级评分；
3. 大图旅游宣传Banner，快速跳转套餐预订；
4. 预订日历组件：可视化当月出行预约日期，高亮已锁定订单；
5. 预算环形图表：分层区分酒店、交通、其他开销占比，直观掌握经营成本结构；
6. 底部热门目的地横向推荐卡片，拓展线路销售渠道。
模块3：交通票务预订专项页面
1. 顶部四分类标签：大巴、出租车、航班、火车快速切换；
2. 标准化起止点表单：城市、日期、时间、乘车人数、车型筛选输入框；
3. 限时折扣活动横幅，刺激客户下单；
4. 底部FAQ折叠问答面板，解决常规出行疑问；
5. 右侧常驻AI客服对话卡片，无需切换页面即时沟通。
模块4：左侧全局侧边导航栏
分层两大区域：主业务菜单（首页、交通、旅游套餐、酒店预订）、偏好设置（设置、帮助中心、深色模式切换），选中项使用品牌蓝色填充高亮，层级清晰操作高效。
四、视觉设计体系：清爽浅白轻商务文旅风
1. 色彩系统
- 基底底色：纯净哑光浅灰白基底，长时间浏览大量房源、表单无视觉疲劳；
- 品牌主色：柔和中度商务蓝，用于导航选中、主操作按钮、图表高亮，干净清爽不刺眼；
- 辅助区分色：浅灰用于次要表单、边框，红色小标签标注限时折扣活动，快速抓取优惠信息；
- 深色模式配套深色基底，适配夜间办公场景。
2. 图形与可视化规范
1. 规整12栅格布局体系，所有卡片、图表、表单严格对齐，视觉整洁统一；
2. 环形分层饼图轻量化数据可视化，分层色块区分不同出行开销类目；
3. 圆角房源卡片搭配实景旅游酒店实拍图，贴合文旅行业场景；
4. 极简线性导航图标：酒店、交通、套餐统一纤细线性图标，全站视觉体系统一。
3. 文字层级规范
无衬线简约商务字体，三层清晰信息层级：房源价格/预算占比大数字→板块标题→地址、日期、辅助说明小字，远距离快速抓取经营与预订核心信息。
五、产品商业与旅行社落地价值
1. 标准化栅格打造专业品牌质感：全站布局统一规整，区别于杂乱廉价的传统旅游后台，提升旅行社专业形象；
2. 多旅游业务一站式整合：酒店、交通、线路套餐单后台统一管理，减少运营人员多系统切换成本；
3. 预算可视化辅助定价决策：环形图表直观展现成本结构，方便运营调整套餐售价控制利润；
4. 内置AI客服减少客户流失：页面常驻聊天窗口，即时解答出行预订疑问，提升订单转化率；
5. 浅白柔和轻量化界面适配长时间办公，文旅实景卡片提升页面亲和力，降低后台工具冰冷生硬感。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、全文速览图
大家是不是越来越觉得写 Prompt 就像在做法？
每次写提示词，我们都恨不得写上一篇小作文，生怕它漏掉一丁点细节。结果跑出来的东西依然毫无灵气，甚至让人血压飙升。
这几天，OpenAI 发布了一份官方 Prompt 指南。
作者是 Eric Provencher，熟悉开发圈的朋友可能知道，这位大佬之前打造过口碑极佳的 RepoPrompt，如今在 OpenAI 专门负责 Codex 的开发者体验。
看完之后，我有种醍醐灌顶的感觉，咱们一直以来的焦虑，其实完全找错了方向。
官方给出的结论非常反直觉：AI 表现不好，还真就是因为咱们的提示词写得太长、管得太宽了。
在这份指南背后的内部测试里，OpenAI 发现，把一套原本冗长的提示词精简之后，不仅总 Token 消耗暴降了 41% 到 66%，成本直接砍半。
最离谱的是，模型跑出来的任务评分竟然还提升了 10% 到 15%，少说废话，AI 反而干得更漂亮。
回想一下我们以前是怎么写提示词的。
为了防范模型犯错，总在不断地给 AI 打补丁。
它啰嗦，我们就加上“必须绝对简洁”。
风格不对，我们又补上五条语气要求。
调用工具卡壳，我们就干脆把每一步的操作流程写在里面。
遇到模型升级，我们还习惯性地把旧模型时代的规则原封不动地继承过来。
时间一长，提示词就变成了互相打架的规则垃圾场。
当一段话里包含了几十个互相冲突的指令，别说是模型了，就算是个大活人看了也会当场宕机。
指南明确建议，千万别再像对待没经验的实习生那样，试图控制 AI 的所有操作。
提示词的真正价值，在于让 AI 清晰地看到你要交付的终点。
至于用什么姿势走到终点，请放手让它自己去搜集、比较和决定。
这份新指南抛弃了过去那些玄之又玄的咒语学，回归到一个朴素但杀伤力极强的原则：结果优先。
掌握这四个词，就足以应对绝大多数场景：Goal（目标）、Context（上下文）、Output（输出）、Boundaries（边界）。
第一是 Goal（目标）。你最终要拿到什么东西？比如“我要为一款冥想 App 做一个首页的改版方向”。
第二是 Context（上下文）。有哪些会影响它判断的硬核资料？把真实的用户访谈记录、品牌规范文档直接喂给它，这比你费尽口舌描述半天管用得多。
第三是 Boundaries（边界）。有什么事情是绝对不能碰的？直接划红线，比如“千万别动旧版的 Logo”。
第四是 Output（输出格式）。交稿的时候长什么样？告诉它“给我 3 套视觉方向，每一套都要带上情绪板和配套文案”。
假设你需要优化一个 App 首页的文案和信息架构。
过去我们可能会这么写：
“你是一位资深的用户体验专家和增长黑客，精通消费者心理学。请你严格遵守以下 10 条原则对这个页面进行分析。第一，所有标题必须充满吸引力；第二，所有按钮文案必须具备强烈的行动号召感；第三…第四…第五…第六……同时绝对不要出现拼写错误，请一步一步仔细分析并说明理由。”
在 GPT-5.6 眼里，这简直是一堆充满噪音的废话。
现在，我们可以换成官方推荐的精简版：
“Goal：基于附件里的 PRD 和当前页面的截图，重写首页的区块结构和文案，核心目标是提升新用户的注册转化率。
Context：以 PRD 中的功能描述为唯一事实来源，截图仅供布局参考。
Output：输出一个分区结构文档。每个区块包含：大标题、副标题、主要按钮文案。字数控制在 800 字以内。
Boundaries：必须使用 PRD 里明确提到的产品卖点，遇到缺失的卖点请在文档末尾提示我补充，不要自行虚构任何功能。”
只要把这四点交代清楚，这个提示词就已经很棒了。
大家千万别有一个执念，总觉得第一条提示词必须完美无缺。
一旦 AI 没做好，马上暴躁地推翻重写。
现在优秀的提示词全是聊出来的。
很少有设计师能靠最初的一页 Brief 就产出定稿。大家都是先拉个大方向，看着草图一遍遍磨出来。
写提示词也一样，你完全可以补充新资料、改变关注点、甚至半路调整，根本不需要重新起一个对话从头再来。
这就像你和身边的设计搭档过方案，一步步打磨，出来的东西才会真正契合你的心思。
结合咱们设计师的日常，我发现大家写提示词最容易在3个地方踩坑。
“帮我设计一个高级、简约、有质感、年轻化、符合当下审美的网页。”
听起来很丰满，但 AI 根本不知道这是在说什么，它只能去互联网的海量数据里找个最平庸的平均值敷衍你。
换一种接地气的说法：“为一个面向 25 至 35 岁都市白领的高端香氛品牌，设计官网首屏。目标是让人一打开就有一种‘安静但有辨识度’的第一印象。排版去参考那种高视角的编辑感杂志，避开传统电商满屏促销的套路。最后给我 3 个差异明显的视觉方向。”
感受一下，第二种说法有明确的用户画像，有非常具体的参考方向。
官方也特别强调，从你需要的结果开始写，只补充那些真正会改变产出方向的细节。
老派的写法喜欢手把手教 AI 做事：第一步去分析竞品，第二步去提炼关键词，第三步去做情绪板，第四步再输出配色方案。
但现在是 GPT-5.6 了，它比咱们想象的聪明得多。
过度规定步骤，是在压缩它自主推理的空间。
现在只需要把话撂下：“基于附件里的品牌资料，给我 3 个官网改版方案。必须重点解决‘品牌价值表达模糊’的问题，别单纯去追求视觉上的新鲜感。”
你定义什么是好方案，AI 跑腿填坑，就这么简单。
语言在视觉面前常常是苍白的。
写五百字去描述一个“带点呼吸感的高级布局”，绝对比不上直接甩给它一张带有红框标注的竞品截图。
配合图片的提示词只需要一句话：“参考附件这张截图的排版节奏，保留这种大面积留白和左侧的窄栏导航。避开它的灰褐色配色。结合我们自己的品牌，给出一个首屏方案。”
一张带标注的图，胜过千言万语 。
以前咱们写提示词喜欢像防贼一样，试图堵住每一个可能出错的漏洞。
官方的建议现在更新了：挑出一两个真正致命的边界就行了。
比如“不要动现有的核心信息架构”，或者“涉及开发成本高的地方一定要标记出来”。
把这几根高压线拉好，AI 就能在安全区里尽情释放它的创造力。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
该平台是面向企业品牌营销、内容创意团队的AIGC一站式生产SaaS，分为PC网页端可视化工作流操作台、手机移动端轻量化创意引擎两大端口，打通视觉概念输入、AI模型调度、素材渲染、视频产出、品牌资产存储全链路，支持接入GPT、Gemini多类大模型，通过连线拓扑可视化完整创意生产流程，批量生成广告图文、短视频营销素材，适配办公室批量策划、外出临时调参预览双场景。
营销团队AI创作四大行业痛点
1. 创作流程黑盒不可视：传统AI工具仅提供输入框，完整创意链路无可视化图谱，团队无法追溯提示词、模型、素材之间的关联；
2. 电脑手机数据割裂：办公室搭建完整工作流后，外出无法随时调整提示词、预览生成视频，修改链路繁琐；
3. AI模型配置分散：大模型接入、采样参数、迭代步数、素材风格调参分散在多层子页面，批量调整效率极低；
4. 品牌素材管理混乱：生成广告素材、品牌模板无统一云端素材库，复用、筛选、二次编辑成本高。
## 二、产品完整AI创意生产闭环
PC与移动端数据实时同步，形成流程搭建→AI参数调优→素材生成预览→资产云端归档完整闭环
1. PC可视化工作流层：中心连线拓扑图谱串联视觉概念、AI处理内核、创意图像引擎、输出媒体四大模块，直观展示各节点数据流转，支持拖拽搭建完整营销内容生产线；
2. AI模型配置层：独立面板设置大模型接入API、迭代步数、采样器、画面强度等专业生成参数，精细化控制广告成片质感；
3. 素材生成预览层：短视频播放器实时预览AI产出广告画面，支持放大、 upscale画质、收藏优质素材；
4. 移动端轻量化创意引擎：简化流程图谱，保留提示词输入、模型快速切换、视频预览、素材库浏览核心功能，户外随时微调创意方案；
5. 云端资产库管理层：分类存储项目素材、品牌模板、AI人物设定，一键复用历史视觉概念，缩短二次创作周期。
三、核心页面模块设计拆解
模块1：PC端可视化流程工作台
深色科技基底+节点卡片连线拓扑核心布局，左侧常驻功能导航
1. 顶部全局栏目：总览、营销活动、流程管线、内容、自动化流程、数据洞察六大业务入口；
2. 中心流程拓扑画布：蓝色流线连接所有AI工作节点，每个模块独立悬浮卡片承载参数、预览素材，自由拖拽调整链路顺序；
3. 四大核心功能节点：视觉概念素材库、OpenAI处理内核、创意图像引擎、输出媒体文件夹，互相联动传递提示词与画面素材；
4. 底部全局输入面板：统一输入营销场景提示词，一键同步至整条工作流，快速迭代画面风格；
5. 右侧成品预览卡片：短视频播放器实时展示AI生成广告大片，配套收藏、高清放大功能。
模块2：移动端创意引擎双核心页面
1. 流程调参页：简化拓扑结构，分上下双卡片展示AI处理内核、风格细化模块，底部提示词输入框快速修改创意方向；
2. 素材资产库页面：文件夹分层管理项目、广告素材、人物人设，快速调取历史模板复用，搭配Gemini快捷对话入口。
模块3：AI模型独立配置面板
极简深色卡片分组，区分API连接、模型选择、采样强度、迭代次数专业参数，数值下拉框直观调节生成效果，适配专业创意从业者精细化调参需求。
四、视觉设计体系：深空蓝深色科技AIGC商务风
1. 色彩系统
- 基底底色：纯黑深空深色基底，降低多卡片、多图表强光反射，长时间策划内容不易视觉疲劳；
- 品牌主色：通透科技浅冰蓝，用于流程连线、功能按钮、模块高亮边框，塑造干净前沿科技感；
- 辅助区分色：浅橙、浅灰区分不同AI工作节点，清晰划分概念、模型、渲染、输出模块；
- 素材预览底色：低透渐变深蓝，衬托生成广告视频画面，突出视觉成品。
2. 图形与可视化规范
1. 流线拓扑流程连线：细柔蓝色曲线串联全部AI节点，直观展示内容数据流走向，实现工作流可视化；
2. 极简悬浮圆角卡片：低柔内阴影、窄边框，大量留白弱化拥挤感，适配多模块同屏排布；
3. 写实电影感广告素材：高质感人像、动态短片预览，贴合高端品牌营销广告场景；
4. 纤细线性科技图标：文件夹、AI模型、播放、设置统一轻量线性图标，全端视觉统一。
3. 文字层级规范
硬朗无衬线科技字体，三层清晰信息层级：超大标题提示词/视频时长→模块节点标题→专业参数辅助小字，远距离也能快速识别流程节点功能。
五、产品商业与团队落地价值
1. 流程可视化降低团队沟通成本：拓扑图谱直观展示完整AI创作链路，策划、设计团队快速对齐创意逻辑；
2. PC手机双端同步适配全场景：办公室搭建完整自动化管线，外出随时微调提示词、预览成片，不中断创意工作；
3. 多AI模型统一调度：GPT、Gemini等大模型集成在同一后台，无需切换多个AI工具完成广告创作；
4. 统一云端资产库提升复用效率：品牌广告素材、视觉模板云端归档，大幅缩短新品营销内容产出周期；
5. 深色专业科技视觉精准匹配B端营销团队审美，区别于轻量化C端AI工具，强化专业商用SaaS产品定位。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 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。
蓝蓝设计的小编 http://www.lanlanwork.com