转载：站酷
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：在学习 UI 初期，除了学会软件要还要了解我们设计界面时都在设计什么，而 UI 控件就是首当其冲的设计对象。
UI 控件是一个统称，在下级还包含不同的控件类型，而这些控件类型是今天实现界面展示和交互的必要元素。虽然控件的外观在不同项目中样式各异，但控件本身的类型却是非常固定的。
学习控件最佳方式，就是先从 iOS 官方组件库中提供的控件开始学起，然后再拓展到一些特殊的样式和类型中。
所以下面，我们会以 iOS26 规范的组件库为标准，来对 UI 的控件类型做一个详尽的说明，帮助大家快速理解行业对控件的最新定义。
转载：优设
兰亭妙微（蓝蓝设计）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 视觉体系中，色彩、字体长期占据设计师核心注意力，形状却常常被视作简单的容器轮廓，遭到忽视。但兰亭妙微在多年政企、消费端、B 端系统落地项目中发现：形状是界面传递情绪、区分层级、塑造品牌辨识度的底层视觉语言。统一且有创意的形状规范，既能降低用户识别成本，又能建立专属产品视觉记忆点。本文结合团队实战案例，拆解形状设计底层逻辑、组件落地规范与前沿设计趋势。
在兰亭妙微日常 UI 项目交付中，色差是设计师与前端对接最高频的矛盾点：同一张设计稿，Mac 显示鲜亮通透，Windows 电脑、安卓手机却饱和度溢出、色值偏移；导出图片和软件内预览完全两个色调，反复改色也无法统一。深究根源，大多是团队对色域认知模糊、色彩配置不规范导致。今天结合数百款移动端、网页项目落地经验，拆解色域底层逻辑与标准化工作流程，彻底解决跨设备色差难题。
在 UI 设计体系搭建中，色彩、字体、图形常被视作视觉核心，多数团队会优先完善配色与字体规范，却极易忽略间距系统这一决定界面秩序感的底层要素。作为深耕多端 UI 设计的团队，兰亭妙微在数百个商业项目落地中，依托 8pt 网格体系沉淀出标准化间距统一方案，解决多设计师协作、设计还原失真、页面视觉割裂等行业通病，今天结合落地经验拆解完整搭建逻辑。
北京兰亭妙微 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。
转载：站酷
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com