北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
Transix是面向全球货运运营商、企业物流团队的一站式供应链数字化SaaS平台，分为两大板块：对外品牌营销官网、对内运营管理后台。官网承载品牌介绍、功能展示、套餐定价、演示预约获客；PC仪表盘统一管控订单、车队运力、物流轨迹、营收数据；移动端完整适配官网浏览、轻量化数据查看、运单跟踪，支持海运、空运、陆运多渠道货运统一管理，实时追踪货物位置、核算营收、监控车队全年运输绩效。
传统物流数字化工具四大行业痛点
1. 官网与后台视觉完全割裂：获客官网、内部管理后台两套设计语言，品牌识别不统一，开发维护成本高；
2. 多运输渠道数据分散：海运、空运、货车订单拆分多个页面，管理者无法单屏汇总整体运力与营收；
3. 移动端适配简陋：仅PC端完整功能，手机只能简单查单，无法浏览完整数据、查看套餐方案；
4. 行业界面厚重沉闷：传统物流系统多深蓝、深灰硬核配色，缺少柔和轻量化视觉，长时间办公视觉压抑。
## 二、完整物流数字化业务闭环
一套视觉体系打通公域获客→企业转化→内部运营→移动随身查看完整业务闭环
1. 品牌营销官网层：顶部导航（功能/定价/产品/企业/服务），首屏品牌价值slogan、平台核心数据、转化行动按钮；依次展示产品后台演示、核心功能模块、阶梯付费套餐、底部品牌导航，完成线索收集与客户转化；
2. PC端运营Dashboard层：左侧固定物流分类导航，首页聚合总订单、已交付、待退货、在途运单核心指标，搭配车队年度绩效散点图、月度运单柱状图、实时运单轨迹卡片，一站式掌握全渠道物流经营数据；
3. 移动端自适应层：完整复刻官网宣传、定价页面，同时轻量化展示运单跟踪、运力数据，竖屏触控优化适配外勤物流人员随身查看；
4. 统一视觉组件体系：按钮、卡片、数据图表、表单一套规范，同步适配官网与后台，降低迭代成本。
三、核心页面模块设计拆解
模块1：PC品牌官网首页
纯净浅灰白基底，淡紫渐变流体图形作为视觉装饰，暖橙文字突出核心关键词
1. 顶部全局导航栏+右上角预约演示黑色行动按钮；
2. 首屏品牌价值区：活跃用户标签、大号主标题、产品简介，两大转化按钮（免费试用、立即启用）；
3. 右侧环形信息模块：全球用户总量、交易总额、平台评分三大核心背书数据，环绕运输方式线性图标；
4. 下方嵌入后台仪表盘预览图，直观展示产品核心能力；
5. 全页面柔和淡紫渐变背景色块，弱化工业物流厚重感。
模块2：PC物流运营Dashboard
左侧多级侧边导航（仪表盘、配送、物流、线索、客户、任务），右侧多卡片网格数据面板
1. 顶部搜索、个人消息、用户头像快捷入口；
2. 四大核心数字指标卡片：总订单金额、已交付单数、退货占比、在途运单量，附带环比增减标识；
3. 两大可视化图表：车队全年运力散点分布图、月度运单统计柱状图，淡紫渐变填充区分数据层级；
4. 实时运单列表卡片：展示海运/空运货物编号、起止港口、客户信息、运输状态（已送达/延误），附带轨迹可视化短线；
5. 辅助数据板块：车队总吨位、各国访问量统计，完整覆盖物流经营维度。
模块3：移动端响应式页面
1. 移动端官网：压缩导航适配竖屏，保留首屏品牌、功能介绍、定价套餐全模块；
2. 移动端轻量化数据页：精简图表尺寸，适配单手滑动查看运单与运力信息；
3. 统一渐变品牌色、圆角卡片、线性图标，与PC端视觉完全统一。
模块4：定价套餐页面
双卡片阶梯套餐布局，区分初创个人版、企业商用版，清晰罗列功能权益，底部紫色订阅按钮引导付费转化。
四、视觉设计体系：淡紫暖橙渐变轻量化物流商务风
1. 色彩系统
- 基底底色：低饱和哑光浅灰白，全天浏览柔和不刺眼；
- 品牌渐变主色：淡薰衣草紫为主操作色，搭配暖橙作为标题强调色，柔和渐变流体图形贯穿全站；
- 状态区分色：浅绿标识已送达运单、浅红标记延误订单，柔和低饱和不突兀；
- 辅助色：浅灰次要文字、纯白卡片面板，层级干净清爽。
2. 图形与可视化规范
1. 柔和渐变流体环形装饰图形，弱化物流行业工业硬核气质，提升现代柔和质感；
2. 轻量化散点、柱状数据图表，淡紫渐变填充，线条圆润无生硬棱角；
3. 大圆角悬浮卡片，极低柔和阴影，页面大量留白，多模块排布不拥挤；
4. 极简线性运输图标（飞机/货车/轮船），统一复用官网与后台。
3. 文字层级规范
纤细无衬线现代商务字体，三层清晰信息层级：订单金额、用户总量超大加粗数字→板块二级标题→运单地址、时间辅助小字，远距离快速抓取物流核心经营数据。
五、产品商业与物流企业落地价值
1. 官网+后台统一品牌视觉：一套设计规范覆盖获客与内部运营，强化品牌记忆，大幅降低前后端开发迭代成本；
2. 全渠道物流数据一站式聚合：单仪表盘同步海运/空运/陆运订单、车队运力、营收，管理者高效评估供应链经营状况；
3. PC/手机完整双端适配：内勤电脑精细化管控，外勤手机随身查运单、看套餐，覆盖全办公场景；
4. 柔和渐变轻量化配色差异化：跳出物流行业传统深蓝厚重界面，视觉清爽舒适，长时间运营办公不易疲劳；
5. 清晰分层转化链路：官网从宣传到定价预约、后台从数据查看至运单管理，完整承接获客、运营、付费全商业流程。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
1. 给素材进行预处理（加一个素材没有的颜色作为背景），这里进行预处理是为后期在AE中进行抠像处理做准备
2.把首尾帧的参考图给 AI，生成适配的动态提示词。因为要做 “从无到有” 的动效，推荐用首尾帧生成，在提示词里写清楚首尾帧的画面和运动过程即可
这是AI给到我的提示词
1. 选择「首尾帧生成」模式，首帧上传纯蓝色图片，尾帧上传花朵碰到一起，花瓣爆开的图片。
首帧：
尾帧：
2. 查看生成的视频
现在生成的视频，在碰撞后有很多杂线飞出，整体太乱了，我们修改提示词，让他不要有杂线飞出。
我们直接描述问题发给AI，让AI给我们修改提示词。
这是AI给到我的提示词：
3. 把新的提示词给到AI，让AI重新生成视频。
4. 现在生成的动画是没有杂线飞出了，但是节奏不对，两朵花碰到一起后，延迟了一会花瓣才爆发出来，我希望他是两朵花碰到一起后花瓣就直接爆发出来，那我们就继续描述问题，让AI给我们修改提示词。
https://image.uisdc.com/wp-content/uploads/2026/07/cf7774965441bbe94e0bbe8dd1bf35ba.webp
1. 素材导入AE，通过颜色范围，快速获取透明底视频（这里可以使用颜色范围一键吸取背景色是因为我们在最开始进行了预处理，添加了一个素材没有的颜色做背景）
2. 把透明背景的素材放到界面里面看一下效果：
https://image.uisdc.com/wp-content/uploads/2026/07/d4294b34e241951ec3215266d234cb91.webp
3. 现在看起来边缘有点生硬，我们给他加一个边缘虚化的效果，让边缘柔和一点。这里我们添加一个蒙版，调整蒙版的蒙版羽化就可以啦，这是调整好的效果：
https://image.uisdc.com/wp-content/uploads/2026/07/fb6a63beef359221e470b3592bf16158.webp
最后，来看下这个动效在其他页面的效果：
https://image.uisdc.com/wp-content/uploads/2026/07/d6078bbcf165cd0b62ce884c03ac1488.webp
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
对于一些视觉海报，有了创意，但效果不太处理得好，借助AI的力量，让你轻松拿捏！
首先是创意设定，草图这一块，我们运用夸张（大小对比）的创意技法，搭建好构图。
这也是我们在做海报会经常用到的创意技法，冲击力以及效果都嘎嘎好使。
像另一张番茄与猫的海报，同样是大小对比的上下结构构图：
技法其实没什么难度，结合好了那就是一张优秀的海报作品。
那我们再回到第一张的草图。
我们预想的是做逆光的光影氛围效果，但不明确光应该怎样打，于是找了如左图的参考，让背景类似于在室内，有道门溜了一条缝，光从室外通过门缝，照射到主体物上面，按此思路，铺个大效果，确认光源方向，明确受光面和投影方向。
接下来把图交给AI生成，写关键词要明确表达出：
细看生成的图，小猫不太精致，主要集中在头部的BUG，手动修正脸部五官的扭曲，以及明确头顶耳朵的结构。
用黑白画面来看下视觉重心，当前是巨大的主体物让画面的视觉重心集中到了右侧。
所以我们需要在画面的左上方加入元素来把视觉重心往回拉一些。
我们将文字标题放在了那个位置，并加入排版，让标题叠压在番茄的下面，做出层次，并选择深色字体，用于与小猫身上重色进行颜色平衡。
纯黑的标题与亮色背景对比太强，过于突出吸睛，于是将其变灰一些，减少对主体物的干扰。
将标题文字调整为深棕色，符合画面的暖色调，并加入一点背景的暖黄色，让其能融入进背景而不至于脱离于环境导致太割裂，然后加入一层杂色效果，增加整体画面质感细节。
以上就是我们出设定，用AI辅助结合局部手动调
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
QuestMobile 的数据显示，国内 AI 原生 App 月活已经到 4.99 亿，同比涨了 85.4%。
支付宝「碰一下」的用户规模过了 4 亿，千问的月活涨幅接近 58 倍。
这些数字这半年被反复引用，几乎成了「AI 产品在爆发」的标准论据。
这类报道通常只披露一件事，规模涨了多少。使用时长、复访比例、有没有留存下来，这些同样能拿到的数据，很少被放进同一篇报道里，也很少被追问。
但很少有报道会往下多问一句，这些涨起来的用户，有多少留下来了，有多少只是来试了一次就走。用户规模和用户是不是被真正留住，是两件事，前一件被讲了太多次，后一件几乎没人认真拆过。
这半年被反复引用的规模数字，也让「要不要跟进做一个 AI 功能」这类决策，变得比以前更容易被数字本身带偏。
产品经理判断一个产品好不好，习惯性地看一条链路，获客、转化、留存。
这条链路背后有个默认假设，用户只要进来了、用起来了，价值就会自然沉淀，剩下的事交给时间。
这套假设在传统互联网产品上大体成立。做一个能用的产品需要门槛，门槛本身筛掉了一批凑热闹的用户，留下来的大多是真有需求的人。
AI 产品把这套逻辑打乱了。
调一个大模型 API，套一个现成的 RAG 框架，几天就能拼出一个看起来很能打的 Demo。门槛被拉到了历史最低，注册转化率、首页访问这些前端数字，因此也变得很容易做得好看。
举个例子，一个做 AI 写作工具的团队，两周就能上线一个输入主题就能生成一篇公众号文章的功能。用户点一下几乎零成本，注册转化率做得很漂亮并不难。真正难的是，用户拿到生成结果之后，愿不愿意把这篇文章真的发出去，这一步在老地图上是找不到的。
这套低门槛甚至体现在产品经理自己的判断习惯上。过去评估一个新功能值不值得做，往往先看它能不能带来注册量和访问量的短期上涨。AI 功能几乎都能满足这个标准，因为新鲜感本身就会带来一波点击，这也是为什么很多团队会在错误的方向上，做出一个看起来很成功的判断。
问题出在更深的地方。用户进来了，产品是不是真的把事情办成了，这件事和用户进来了完全是两回事。
传统产品里，进来和办成之间的距离很短。AI 产品里，这段距离被拉长了，而且大部分产品经理还在用老地图找这段新路。
这就是为什么同一套仪表盘，同一批产品经理，会在 AI 产品上判断失误。不是数据造假，是看的地方错了。
看的地方错在哪，QuestMobile 的另一组数据说得比较清楚。
AI 原生应用用户的月均使用次数是 92.7 次，同类预装应用只有 51.4 次，接近两倍的差距。
豆包、DeepSeek、Kimi 三家，单次使用超过 10 分钟的重度用户占比都在 26%到 30%之间，而且这个比例还在往上涨。
这组数据指向同一件事，入口流量在 AI 产品里正在退位，使用深度顶了上来。使用深度不是一个笼统的说法，拆开看至少是三件事，用户来得勤不勤（使用频次）、每次待得久不久（单次时长）、一次任务有没有走完（任务完整度）。
这三个维度也不是随便拆的。使用频次要看的是一个固定周期内（比如 7 天或 30 天）用户主动打开产品的次数，不是被推送唤醒的次数。单次时长要排除挂机、开着不操作这类噪音，只算真正产生交互的时间。任务完整度要求先给「一次任务」下一个清晰的定义，一次面试、一次报告、一次生成，都算作一次完整任务，半途退出的不算。这三个维度定义不清楚，后面所有的判断都会跟着走偏。
传统产品看的是有多少人打开了 App。AI 产品要看的是打开之后，用户有没有真的把一次任务完整地做完，做完了愿不愿意再来一次。
北极星指标这个概念，本来就是用来提醒产品经理别盯着虚荣指标的。但现实是，很多团队在 AI 产品上依然把北极星定在注册量或者 DAU 这类入口指标上，等于用旧地图找新路的同一个错误又犯了一遍。
这背后还有一层现实原因。增长团队的考核指标、投资人熟悉的汇报框架，很多时候还是围着注册量和 DAU 转，这两个指标改起来最快，也最容易在一页 PPT 里讲出一个漂亮的故事。使用深度这类指标需要更长的观察窗口，也更难被一眼看懂，团队天然有动力去优化那个更容易被看见、也更容易被误读的数字。
市面上不少「套壳」AI 应用就是这么起来的，借一波热点把注册量做得很好看，用户进来点两下就再没回来，团队却还在为注册曲线开庆功会。
反过来看，一款真正解决问题的 AI 工具，早期注册量涨得可能没那么快，因为它依赖的是用户遇到具体问题时的搜索和推荐，不是一次性的流量爆发。但一旦有人开始用，复访和深度使用会持续爬升，这条曲线不好看，却更值钱。
我自己在做一款 AI 面试产品，叫 Lollipop。它后台的北极星指标定的不是注册量，是面试完成率，就是用户有没有走完一整轮模拟面试、拿到报告。
最近一个周期，首页访问、新增注册、开始面试这几个前端数字全都在大幅下滑，跌幅都在四成到七成之间。只看这几个数字，很容易得出产品在快速失血的结论。
但面试完成率这个北极星指标，同一个周期反而是往上走的。前端数字砸下去了，真正衡量产品有没有把事办成的指标却在变好，这组反差比任何单一数字都更能说明，入口流量不该排在第一位。
选面试完成率做北极星，也是因为这类产品的一次任务相对好定义。一场模拟面试有明确的起点和终点，用户走完全程、拿到一份报告，就算完整地体验了一次产品的核心价值。不是所有 AI 产品都有这么清晰的任务边界，判断使用深度之前，先想清楚自己的产品里，一次完整任务到底指的是什么，是能不能套用这套框架的前提。
权重排对了，接下来是怎么防止被数字骗。
第一个常见陷阱，是漏斗里某个环节的转化率超过了 100%，人数不减反增。
这种情况通常有三个来源。
统计口径没对齐，上一步按自然日去重统计新增用户，这一步却按一个更长的活跃窗口统计所有触发过这个动作的账号，两边的分母来自不同的时间尺度，下一步的人数比上一步多，是算法层面的必然，不是产品层面的奇迹。
采集标准不一致，前端埋点和后端日志各算各的，同一个动作在两套系统里可能被记成不同的数字，尤其是涉及 App、小程序、网页多端的产品，这种错位更常见。
用户行为本身有跳跃，用户离开又回来重新走了一遍这个环节，系统把这当成了两次独立事件，凭空多算了一次。这在允许用户中途退出再进入的 AI 产品里尤其常见，因为一次任务本身可能拆成好几轮交互。
遇到这种数字，正确的排查顺序是这样的。
先确认两个环节的统计窗口是不是完全对齐，再看这批用户里有没有掺进本不该算的老用户或回流用户，最后确认埋点逻辑会不会把同一个人的多次动作，算成了多次新增。三步查完，大概率能找到问题出在哪一环。
更具体一点，多数 BI 工具或者后台数据库里，可以直接把两个环节的用户 ID 拉出来做交叉比对，看下一环节里有多少用户 ID 没有出现在上一环节的名单里。如果这个数字不是零，说明确实有凭空出现的用户，顺着这批用户的行为记录往回查，通常能直接定位到问题出在统计口径、埋点还是回流。
这三步排查，靠翻埋点文档和拉后台原始数据就能做，不需要额外的工具。需要的是遇到反常数字时，先怀疑统计本身，再相信这是个好消息的习惯。
Lollipop 的后台就出现过更夸张的情况，注册转化的一个子环节里，「成功注册」的人数是「进入注册页」的十倍还多，转化率算出来超过了 1000%。
查下来是两个环节的统计时间窗口没对齐，「进入注册页」只挑了当日严格路径进来的用户，「成功注册」却把更宽时间窗口里所有完成注册的账号都算了进去，两边的分母压根不是同一批人。这类异常如果不查，很容易被当成一个值得庆祝的好消息，写进周报里。
第二个陷阱更隐蔽，一个 AI 功能上线了，不代表用户真的在用它。
微软自己披露的数据是一个很有分量的参照。
Microsoft 365 Copilot 上线三年后，付费企业里的实际采纳率不到 4.5%，每周还在用的用户比例只有 1%。
财富 500 强企业里七成拿到了 license，但每周真正被使用的付费席位只有两到三成。
一个全球最大的企业软件公司，尚且交出这样的采纳数据。说明这不是某个小团队的执行问题，是 AI 功能从上线到被真正采纳，中间天然有一道很宽的沟。
这道沟通常来自三个原因。
用户不信任 AI 给出的结果，宁可自己重做一遍，尤其是涉及需要担责的场景，比如财务数字、合同条款，用户会本能地想再核对一遍，AI 帮着做的这一步，等于白做。
功能藏得太深，不在用户原有的操作路径上。一个 AI 摘要功能如果放在三级菜单里，大多数用户根本不知道它存在，更不会主动去找。
功能确实存在，但比用户熟悉的手动方式并没有明显更好，缺乏切换的理由。如果 AI 自动填表的出错率比用户自己手动填还高，用户试过一次就会放弃，回到熟悉的老办法。
判断一个 AI 功能有没有真被采纳，可以拆成两层来算。第一层是尝试率，能接触到这个功能的用户里，有多大比例点开用过至少一次。第二层是复用率，用过一次的人里，有多少比例会用第二次、第三次。
尝试率高、复用率低，说明用户对这个功能有好奇心，但没有形成依赖，这正是大多数 AI 功能卡住的地方。用过一次约等于好奇，用过不止一次才约等于这个功能真的解决了问题。
微软的数据也印证了这一点。超过 1 亿月度 Copilot 用户，说明尝试的门槛已经很低，财富 500 强七成拿到 license，说明分发也做到位了，真正卡住的，是复用这一层。
我们 Lollipop 的简历漏斗里也有类似情况。用户确定简历之后，走到「Agent 对话」这一步的转化率只有个位数。功能是上线了的，但绝大多数用户走到这一步就停住了，没有再往前一步。
前两个陷阱都还只是排查具体数字，第三个陷阱要看的是一整条曲线，留存曲线的形状。
a16z 在一份关于 AI 消费应用的报告里提到一个说法，很多 AI 应用早期都会经历一波「AI 游客」。这批用户被新鲜感或者一次刷屏式的传播吸引进来，用几次就走，本身对产品没有真实需求。
AI 游客通常是被两种力量带进来的。一种是免费试用或者限时活动，用户抱着反正不要钱的心态点进来看一眼；另一种是社交媒体上的一次刷屏式安利，用户被大家都在讨论这件事本身吸引，而不是被产品要解决的问题吸引。这两类用户对产品本身没有真实需求，留存曲线注定要往下掉。
真正的分水岭在第三个月前后。如果留存曲线过了这个点还在持续往下掉，说明用户最初的新鲜感没有转化成长期愿意用的理由。具体到怎么看这条曲线的形状，可以连续观察三个月的环比降幅，如果降幅一个月比一个月收窄，说明曲线在走平，用户群体逐渐稳定下来；如果降幅稳定甚至扩大，说明流失还在加速，这是曲线持续下探的信号。
报告里也提到一个有意思的反例，头部产品比如 ChatGPT 呈现出一种回升式的留存曲线，用户在中途流失后，会因为产品能力持续提升、能处理的场景变多，重新回来使用。
回升式曲线不是靠运气出现的。头部产品做对的事情，通常是持续扩展产品能处理的场景，让一个因为某个具体需求流失的用户，后来因为另一个新场景被解决，重新想起这个产品，再加上恰当的触达（比如提醒、周报这类唤回机制），才能把回升曲线做出来。
看留存，不能只看前几天的数字，要看到第三个月这个节点之后曲线是往下探、走平，还是回升。前几天留存好看，只能说明第一次体验没让人失望，不能说明产品被真正需要。
Lollipop 的 30 日留存数字趋近于零，首页访问的流量并不小。
入口流量还在，但30天之后几乎查不到人回来，这组对比比任何一条好看的增长曲线都更能说明问题。
前面这三个陷阱，说的都是老指标怎么骗人。有一个容易被忽略的地方是，使用深度、功能采纳率这类新指标，同样可以被做出虚假的好看。
刷时长、机器人循环调用、把一个简单任务硬拆成好几轮交互凑次数，都能在不产生真实价值的情况下，把这几个新指标堆上去。看使用深度、看功能采纳率、看留存曲线，解决的是入口指标不够用的问题，不是给了一张可以不用再怀疑的新地图。遇到反常的深度数据，同样要用前面几节的排查方法再过一遍。
把前面几节收拢成一份清单。
先看使用深度，用户打开之后有没有走完一次完整任务，来得勤不勤，待得久不久。
再看功能采纳率，新功能有没有被反复使用，不是浅尝辄止用一次就再没打开过。
最后看长期留存曲线的形状，第三个月之后是探底、走平，还是回升，不要只盯着首周数字。
入口流量、首日转化率这类老指标不是不看，是不能再排在最前面。
如果这三项同时不达标，修复的优先级也有讲究。
先修留存，留存趋近于零，说明产品可能根本没有解决用户的真实问题，这时候去优化功能采纳率或者入口转化率，投入产出比很低，方向可能就错了。
再修功能采纳率，留存还过得去，但某个 AI 功能没人用，通常是设计或者信任问题，不是产品根本没用，值得针对性优化。
最后才轮到入口转化率，这一层最容易优化，也最容易带来虚假的安全感，前两层没达标之前，把力气花在这里性价比最低。
这套优先级说起来容易，落地时最大的阻力往往不是数据本身，是团队内部的认知。如果汇报框架、老板的直觉判断都还锚定在注册量和 DAU 上，突然把留存曲线摆到第一位，很容易被当成在唱反调。更现实的做法，是把这几个新指标和老指标并排放进同一张报表里，让入口流量继续涨，同时用具体数字展示留存和采纳率的差距，用事实说话，比正面辩论更容易推动认知转变。
拿这份清单去看一个陌生的 AI 产品，可以这样用。
先找它公开披露过的使用时长或使用频次，没有的话看应用商店评论里有没有人提到「用了一次就没再打开」这类反馈。
再看它有没有单独披露过某个核心功能的复用数据，一次性使用和反复使用是两回事。
最后如果能查到第三方的留存报告，重点看第三个月前后的曲线走向，而不是首周数字。
举个具体的应用场景。假设在看一款新出的 AI 笔记应用，官方通稿里只写了用户破千万。这时候先翻一下应用商店评论区，如果高频出现用了一次觉得挺新奇、后来就没再打开这类留言，基本可以判断留存是个问题。如果通稿里进一步披露了周活跃或者人均使用时长，可以拿来和同类产品做个粗略对比，时长明显偏短，说明用户可能只是把它当成一次性的新鲜工具，没有形成使用习惯。
三步做完，基本能判断出这个产品的增长，有多少是真的。
增长曲线好看，这件事本身不需要否定。
真正决定一个 AI 产品能走多远的，是曲线背后那些不那么好看、但更接近真实的数字，有多少人真的把一次任务办成了，办成之后，愿不愿意再来一次。
这三层判断标准不需要复杂的工具，大多数时候翻一下后台数据、看一眼应用商店评论，就能做完第一轮判断。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
软件开发与数字设计领域，眼下正在经历着一场深刻的重构。这场重构由 AI 和各大厂商的大模型所驱动，而 Figma 正好处于这个风暴中心，从 2024 年到现在，它正在经历一场彻底的颠覆，从一个云端协作设计工具，蜕变为「产品创建操作系统」。
转型的起点，源于 2023 年 12 月的监管干预。在英国 CMA 和欧盟委员会的重压之下，Adobe 斥资 200 亿美元收购 Figma 的世纪并购案宣告终止。凭借 10 亿美元的天价解约金，Figma CEO Dylan Field 开启了激进的技术与人才扩张。在这期间，Figma 员工人数翻倍，突破了 1500 人。同时，Figma 连续收购了 Diagram、Weavy、Modyfi 以及无头内容管理系统（Headless CMS）Payload 等关键初创企业 ，为接下来的 AI 战争做好储备。
Dylan 这一系列战略布局在 2025 年 7 月 31 日迎来了高潮。Figma 在纽交所成功敲钟上市（IPO，股票代码：FIG），发行价 33 美元，估值高达 150 亿美元 。Figma 交出的 2025 年答卷堪称惊艳：营业收入达 10.6 亿美元，同比增长 41%。
但是在 AI 加速的世界里，变革都是按月算的。尽管营收大涨，Figma 在 2025 年的净亏损却也显著扩大至 1.25 亿美元。进入 2026 年 4 月，市场格局再遭强烈冲击。Google 让对标 Figma 的 AI 设计工具 Google Stitch 免费。这导致 Figma 股价在短短数日内连续暴跌。目前，其股价较 IPO 后的最高点（142.92 美元）已狂泻近 80%。
在这个伴随高速扩张、生态重塑与突发危机的动荡期，Figma 的核心管理层、内部开发者、一线设计师及庞大的社区生态纷纷发声。针对 AI 如何重塑设计流程、设计方法及产业未来，他们提出了大量极具颠覆性与前瞻性的见解。本报告系统梳理了 2024 年至 2026 年间 Figma 生态内部的言论、产品发布、工程博客及行业数据。我们将深入解析 AI 时代设计工作流的底层逻辑演变，并全面提炼 Figma 团队对整个设计产业未来的终极预测。
面对 AI 浪潮，Figma 领导层并未采取传统的防御姿态。相反，他们主动拥抱破坏性创新，并从哲学与战略高度，重新定义了设计在现代软件工程生命周期中的核心坐标。
2026 年 2 月 17 日，Figma 首席执行官 Dylan Field 接受了 CNBC 专访。他在采访中抛出了一个震动行业的核心概念：「软件大清算」 。他指出，随着 Claude Code、Cursor 等智能体编程工具（Agentic Coding Tools）日益成熟，软件开发的门槛正经历断崖式下跌。过去将想法转化为代码需要耗费昂贵的开发资源，如今寥寥几句自然语言提示词，就能生成生产级别的 APP。
在这种高度自动化的语境下，业内普遍弥漫着「设计师即将消亡」的恐慌。但 Field 的论断却截然相反：
「当任何人都能轻易构建软件时，软件的执行和代码本身将彻底商品化；而深思熟虑的设计以及对人类真实需求的理解，将成为区分伟大产品与平庸数字垃圾的唯一护城河。」
他将生成式 AI 定位为设计师的「副驾驶」，专门用来处理调整组件大小、填充原型数据等枯燥的「设计苦差事」。
Field 极度强调「品味」和「文化同理心」不可替代。他以 2024 年风靡全球的「Brat summer」文化现象为例，犀利地指出：
「即使是再强大的超级人工智能（ASI），也无法凭空设计出与当下微妙流行文化、隐喻产生共鸣的视觉产品，因为 AI 缺乏在人类社会中生存的『灵魂』与文化感知力。」
2026 年 1 月，他在一次公开演讲中将这一哲学量化：
「在未来，一个事物完全由 AI 生成的概率，将与其预期的生命周期成反比。」
简言之，用完即废的瞬时产物交由 AI 处理，而具备长久生命力的核心产品系统，将永远离不开人类设计师的打磨。
Figma 产品副总裁 Sho Kuwamoto 从组织架构的角度，剖析了 AI 的深远影响。Kuwamoto 断言：
「孤立设计师的时代已经结束，设计正在跨越专业壁垒，成为每个人的业务。」
AI 工具打破了职能孤岛。如今，产品经理、营销人员甚至后端开发者，都能利用 AI 工具进行早期的视觉探索。
在这场权力去中心化的变革中，Kuwamoto 认为设计师的战略价值发生了转移：从「把东西做对」（偏重执行），转向了「做正确的东西」（偏重战略方向的把控） 。他特别强调要培养「产品感」。这是一种根植于深刻理解用户痛点、从而解决问题的能力 。在 Figma 内部，团队通过高强度的「吃狗粮」（Dogfooding，即重度使用自家开发的产品）来不断磨砺产品感。这确保了他们在极高速度的 AI 迭代中，依然能与用户保持共情 。
Figma 设计副总裁 Noah Levin 将 AI 对设计行业的冲击，提炼为一个双向动态模型。他认为，AI 同时在「抬高天花板」和「降低门槛」 。
抬高天花板与「更好的设计」：AI 打破了传统工具在复杂计算上的桎梏。这使得顶尖专业设计师能够放手探索以往因成本过高而望而却步的复杂系统与动态交互 。
降低门槛与「脆弱的设计」：AI 让未经严格训练的普通人也能迅速生成 UI 。然而，业界资深专家 Buzz Usborne 结合最新的交互研究发出了警告：「完全依赖自然语言生成界面，往往会导致脆弱的设计。」 绝大多数普通用户并不具备高超的「提示词能力」以及掌控力。
这也意味着未来的设计工具必须做出改变，不能再仅仅提供一个空白的输入框，而是要转向提供结构化的语境建议和约束条件。
2024 至 2026 年间，Figma 最大的技术突破在于彻底终结了陈旧的「线性设计交付」模式。过去，设计师在画板上绘制静态的 UI 界面，然后丢给前端开发。这个过程往往伴随着设计语境的丢失和妥协。而现在，以 MCP 协议为核心的双向工作流彻底颠覆了这一切。
在 Schema 2025 大会上，Figma 宣布其 MCP 服务器正式全面可用，Figma 将内部复杂的画布结构彻底开放。这包括组件库、设计令牌（Design Tokens）、变量层级，甚至是自动布局逻辑，这些结构被全部暴露给 Claude Code、Cursor 等智能体编程平台。
这意味着，当用户向 AI 下达开发指令时，AI 不再基于互联网数据胡乱猜测。相反，它会严格遵守企业的专属设计规范来输出代码。业界资深人士 Tommy Geoco 对此给出了极高评价，称这种结合了 Figma MCP 与 Claude Code 的底层基建，是目前「唯一能在生产环境中使用的 AI 工作流」 。
当然，2026 年此刻，Figma 早就不是唯一的选择了。
2026 年 2 月 17 日，Figma 与 Anthropic 强强联手，发布了震撼行业的「Code to Canvas」（代码到画布）功能。这补齐了设计与开发闭环的最后一块拼图 。它的核心操作流程如下：
1. AI 辅助构建：开发者利用 Claude Code 结合 MCP，快速生成前端 UI 代码，并在浏览器中运行验证 。
2. 状态捕捉：只需在 Claude Code 终端输入「Send this to Figma」指令，工具便会直接抓取浏览器中运行的真实 DOM 状态，并将其自动转换为 Figma JSON 结构。
3. 画布重构：被捕获的 UI 会瞬间在画布上重构。值得注意的是，这绝不是一张屏幕截图，而是一个真实的设计框架，包含可自由编辑的文本、独立分离的按钮图层，以及完整的 Auto Layout 响应式约束。
4. 视觉探索与决策：设计团队无需触碰任何代码，就能直接在这些由代码逆向生成的真实界面上进行批注，并对比各种极端状态。
这种全新的「状态评审」（State Review）的工作方式，将会彻底取代了传统的「设计评审」。值得注意的是，根据 2026 年初的独立测试数据显示，AI 从设计图到代码的「还原度」目前普遍徘徊在 65% 到 80% 之间 。这也印证了业内的精准评价：
「代码负责收敛逻辑，画布负责发散探索。在生成 UI 变得轻而易举的世界里，核心工作已经发生了转移——我们需要在无限的可能性空间中，去决定究竟应该交付哪一个版本。」
在继续审视 Figma 未来发展之前，我们先审视一下最近2年 Figma 的变化，从 Config 2024 到 Config 2025，Figma 的产品矩阵经历了大幅度的延展和重构：
Figma Make：这是搭载了 Claude 3.7 Sonnet 模型的「提示词到APP」的 AI 生成引擎。你可以用自然语言下达指令（例如「让XX元素响应滚动」），为静态框架注入动态交互。更强大的是，它能完美保留原文件的组件层级和元数据 。
Figma Sites：这是一个全栈式无代码可视化建站平台 。它引入了 CSS 级的网格系统。配合收购的 Payload CMS，实现了前端响应式 UI 与后端数据集合的无缝对接，彻底打破了设计与最终发布之间的壁垒 。
Figma Buzz：这是一个面向营销和销售团队的大规模内容共创平台。通过集成 OpenAI 的 gpt-image-1 和 Gemini 模型，支持从电子表格 批量导入数据，并自动生成多尺寸广告图。这标志着 Figma 正式向非设计岗位的企业级用户进行渗透 。
Figma Draw：这是一个内嵌的专业级矢量插画工具集。它引入了动态笔刷、可变宽度路径以及拟真噪点纹理，让插画师们彻底告别来回切换 Adobe Illustrator 的繁琐操作。
2024 年 7 月，Figma 发布了早期的「Make Designs」 AI 工具。由于引入了未经严格人工审查的第三方组件库，当用户输入「天气应用」时，系统直接生成了一个与苹果 iOS 原生天气应用近乎一模一样的界面 。此事件瞬间引爆了关于 AI 抄袭和数据伦理的巨大风暴 。
CEO Dylan Field 亲自出面澄清，强调模型并未在用户的私有文件上进行训练，并果断将该功能下线回炉重造 。这一惨痛的教训让 Figma 深刻意识到：泛用型的 AI 生成工具暗藏巨大的法律风险。AI 必须与企业自身的设计系统进行深度绑定。
在 2025 年的 Schema 设计系统大会上，Figma 的核心议题迎来了全面升维：重点探讨「如何为人工智能构建基础设施」 。会上，Figma 正式宣布了「智能体设计系统」的一系列底层基建更新：
在这次大会当中，系统设计专家 Cristian Morales Achiardi 分享过一个发人深省的案例。
他敏锐地察觉到警告色的对比度存在异常这件事情。在传统流程中，这往往会导致部门间互相推诿，或是开发者干脆写死色值。但在智能体生态中，开发者调用了「Token 审计智能体」（Token-auditor skill）来排查链路。最终，系统精准追溯到了源头：正是 Cristian 本人在底层定义的原始色阶出了错 。
Cristian 为此感慨道：
「开发者对系统产生了绝对信任。当错误发生时，环境机制能够精确追溯到决策层。」
在这套体系中，设计系统架构师扮演了「法律制定者」的角色。正如一位负责人发出的严重警告：
「如果开发者利用 AI 将产出效率提升了 3 到 4 倍，而你只是盲目增加开发者，那么你扩张的根本不是产出，而是技术债务。因为设计决策、实施审查、质量保证这些外围支撑，必将成为致命的瓶颈。」
2026 年初，Figma 发布了重量级的《State of the Designer 2026》报告。该报告对全球逾 900 名专业设计师进行了深度调研，勾勒出了一幅机遇与危机并存的产业图景。
数据呈现出压倒性的拥抱姿态：72% 的设计师正在使用生成式 AI，其中 98% 的人增加了使用频率。
在拥抱 AI 的群体中，91% 认为工作质量得到了提升，89% 认为工作速度明显加快，80% 认为协作得到了增强 。
更关键的数据在于：积极使用 AI 的设计师，其工作满意度比拒绝使用 AI 的同行高出了 25%。反之，在 AI 使用量停滞的群体中，有 40% 的人觉得自己的工作变得更糟 。
然而，认知的巨大裂谷依然存在。当被问及「AI 是否实质性地改善了最终产品质量」时，68% 的开发人员表示肯定，但只有 40% 的设计师认同 。Figma 尖锐地指出了设计师「手艺危机」的存在：由于互联网上高达 81% 的主页存在低对比度等体验缺陷，依赖这些海量平庸数据训练出的 AI，在自动化生成中必然会延续这种系统性的偏差与缺陷 。
在这个充满不确定性的变革期，结构感成了定心丸：高达 91% 的设计师坦言，「清晰的目标和期望」能帮助他们更好地完成工作 。此外，87% 的设计师表示拥有「决策权」能够显著提升他们的表现。这证明了一个观点：
「精确的设计愿景，才是区分专业设计师与随便使用 Figma 的产品经理的关键。」
报告揭示了一个残酷的真相：目前 Figma 中 60% 的新文件是由非设计师创建的 。纯 UI 岗位的生存空间受到了严重挤压。行业内催生出了两种新型职业路径：
对此，Wert & Co. 首席执行官 Daniel Wert 警告各大企业：
「不要陷入寻找全能创始设计师（Founding Designer Unicorn）的陷阱，而应利用魔球理论（Moneyball approach）来建立多元化团队。」
他同时指出，大幅削减初级人才招聘，正在严重损害行业的长远建设 。
预测1：对「设计产品」本身的预测——全领域覆盖的设计工具
设计工具将不再是一个绘图的画布，以 MCP 为代表的通信协议将成为底层标配，设计工具将全面演变为「双向连通的沙盒」，它既能向下直接生成生产级代码，更能向上解析和渲染实时运行的复杂代码架构 。平台将无缝集成战略规划、开发框架与下游 CMS，最终实现「全领域互联」的目标 。
预测2：对「设计产业」格局的预测——基于 Agent 的系统性治理
随着 2026 年 4 月 Google Stitch 走向免费，基础 UI 生成的边际成本已彻底归零。当绝大多数数字资产都由非技术人员通过提示词快速生成时，产业对「中介型」执行劳动的需求将彻底枯竭。设计组织的核心任务将发生不可逆转的转移，转向「质量控制与支撑层」。未来，企业需要构建严密的「智能体设计系统」，以类似于立法与司法机构的方式，来确保海量 AI 产物的合规性与品牌独特性 。
预测3：对「设计本身」的终极预测——品味成为护城河，「设计即代码」
「设计即代码」时代已全面降临。当你能在画布上直接渲染/编辑 React 代码的框架时，「设计」这一动作本身就是在进行系统架构决策。当技术手段变得无限充裕且极度廉价时，方向性决策就会变得最为昂贵。正如 Dylan Field 所言：
「AI 算法可以穷尽千万种视觉组合，但无法体会痛楚，也无法理解人类微妙的文化共鸣。」
因此，人类对卓越技艺的极致追求，以及在纷繁复杂中懂得取舍的高级「品味」，将成为永远无法被算法计算出的终极护城河。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
如果你用AI生成的图有一股AI味，那今天你有福了，我来给大家介绍几个方法，去掉你图片的AI感。
很多同学用AI生的图，质感过于平，尤其是白色，比如下面这个晴天娃娃的创意形象，白色就非常平：
主要原因就是缺少暗部重色，这个时候你只需要和AI说，加强质感，加重暗部：
然后你就可以得到一个质感饱满的效果
你可以对比下效果：
一下子就从一个纸片变成了饱满的立体效果！
有时候用AI生出来的图泛黄，导致AI感特别重，比如一片叶子：
这时候我们可以给他加一点色彩平衡，然后把颜色往蓝色调整，黄绿就会变成蓝绿色：
这样质感就舒服很多。
还有AI生出来的白色，也容易泛黄，我们也可以加入蓝色，比如下面这个图标，绿色和白色都进行加入蓝色的处理：
质感就舒服很多！
这一个点是最最最致命的，也是80%AI感的来源。
我们都知道，一个画面里有暗部和亮部，按照正常逻辑来讲，应该凸显亮部，弱化暗部，如果暗部过于抢眼，那这个画面就会非常的扎眼、油腻。
比如下面这个杯子，很明显，他的杯子暗部饱和度就有点高：
如果你觉得没看出来，那你再仔细看下杯子的投影部分，那个地方饱和度就更加的高，整个视觉焦点都被投影的高饱和给吸引了：
所以这个时候，我们就需要去给暗部加入灰色，比如杯子的暗面，以及杯子的投影部分，使其暗部颜色没有那么浓烈，这样你再对比下：
是不是AI感就消失了很多！
我总结下来，造成AI感的三个主要点就是：平、黄、油！
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
当我们设计网页面对 G/B 端的用户时，经常我们不知道该如何设计，没有设计思路。首先我们要了解网页设计排版布局，以及了解当前的设计流行趋势和风格，如何让客户眼前一亮，需要设计师深入客户沟通需求，并发掘客户想要的网页版式，接下来我们就一起探讨下，我们首先需要考虑的就是合理的布局框架，为将来高效、精准的表达和流畅的体验做好基础。
在浏览器空间里，按着一定的视觉表达内容的需要和审美的规律，结合各种平面设计的具体特点，将信息内容和页面视觉元素加以组合编排，就是网页排版了。如果对平面设计来说，长宽比例是固定的。那么对网页设计来说，则没有所谓固定的长宽比例，设计者可以自行确定作品的尺寸，可以根据页面的需求来设计排版，整个网页设计还是比较自由，开放的。
根据信息的需求，网页排版主要划分为两种基础结构，一种是栏式结构，另一种是区域结构。
在网页设计中，栏式结构是一种常见的页面布局方式，它主要通过竖分的方式将页面信息分成几列，以适应不同内容和功能的需求。以下是关于网页设计中栏式结构的详细解释：
① 栏式结构的分类
二栏式：页面被分为两列，通常左边为主内容区，右边为辅助内容区或广告位。这种结构简洁明了，适用于信息较少或需要突出主要内容的页面。
三栏式：页面被分为三列，中间通常为主内容区，宽度较大，用于展示主要信息；左右两侧为辅助内容区或导航栏，宽度较窄。三栏式布局能容纳更多的内容，提高信息的密集度，常用于信息量大、更新速度快的网站。在这种布局中，用户默认中间为重点信息，两边的内容为次要信息或广告。
四栏式及五栏式：虽然这两种布局方式在某些特定场景下也会被使用，但相对较少见。因为过多的分栏会使页面显得拥挤，不利于用户浏览和获取信息。
通栏（即不分栏）：页面不进行分栏处理，整个页面作为信息的展示区。这种布局方式适用于需要展示大量文字或图片的场景，如文章正文页面、用户注册页面等。
三栏式大气，常用于信息量大，更新速度快的网站，给人感觉开阔、有气势。根据信息量的变化，内页还可以采用两栏或者通栏的形式。所以不存在全页都是三栏的样式，设计师可以根据内容进行调整排版。三栏是最常见的分栏，除此之外，现在比较多的两栏和四栏也非常多见。设计的时候可以根据页面宽度，以及内容来改变栏数。
宽、窄栏与信息的关系
对于分栏结构，如果采取分栏宽的方式，也只能产生几种情况。假设栏宽不同，有了宽栏与窄栏，改变宽栏的位置，将生成多种不同组合，页面就更加灵活多变。
对浏览者来说，当均分栏宽时，二栏式的左右两栏信息的重要程度是一样的。而对三分栏来说，中栏可以第一时间吸引浏览者的视线，换句话说，其内的信息是最重要的(用蓝色标注);其次人们会注意到左栏(次重要用黄色标注)，最后才是右栏(红色区域是相对最不引人注意的,或者代表视线最后一个到达的区域 )。这样一来，重要信息则要放在蓝色区域里，其次是黄色的区域，最后是红色区域。
我们还发现，从某种程度上来说，宽栏比窄栏更容易吸引浏览者的注意，居中的位置比旁边的位置要好一些。此外，每个人的生活习惯、文化阅历等不尽相同，对一部分人来说，有时候视线会先到红色区域，再转到黄色区域，而有时则正相反。
栏中栏
信息情况多变，页面结构就会跟着产生变化。必要时，单栏需要再次进行划分，得到的结果就是栏中栏。
划分的方式不仅有竖向的，还有横向的。观察分割前后，区域之间的视线流动方式可以帮们判断如何排版信息。越靠上的信息区，越先进入浏览者的视野。并且对三分栏来说，中栏和左栏上部信息区同等重要。当二分栏的宽栏被竖向划分出四部分时，页面结构变得繁琐了，气质也会被改变。栏中栏可使页面格局产生很大的变化，使其个性鲜明的同时，也使一部分页面格局失去了原分栏结构的特征。如图例中的第 3 排，信息被分成一块一块，格局精致了、但页面看起来重像是区域结构，使原本“大气”的气质不存在了。
页长与栏底
分栏线是否一通到底与表现栏式结构的特征关系紧密。分栏特征会随着分线是否直通到页面底部而产生变化。直通到底部，所形成的分栏数，其页面就带有这种分栏结构的最大特征。另外，如果页面长度在一屏内(不需要滚动条的情况)，即使采用分栏结构，特征也不会明显，因为页面短，信息量少，分栏结构的“大气”无法很好地传达出来。
② 栏式结构的特点
清晰明了：栏式结构通过明确的分栏处理，使页面信息更加清晰明了，便于用户快速定位所需内容。
灵活多变：根据页面内容和功能需求的不同，可以选择不同数量的分栏，实现灵活多变的页面布局。
提高信息密度：通过增加分栏数量，可以在有限的页面空间内展示更多的内容，提高信息的密集度。
易于阅读：合理的分栏处理可以使页面内容更加易于阅读和理解，提高用户的阅读体验。
③ 栏式结构的应用场景
信息量大、更新速度快的网站：如新闻网站、博客类网站等，可以通过三栏式布局展示更多的文章标题和摘要，提高信息的密集度和更新速度。产品展示类网站：通过二栏式或三栏式布局展示产品图片、介绍和购买按钮等信息，方便用户浏览和购买产品。文章正文页面：通栏布局适用于文章正文页面，可以展示整篇文章的内容，同时避免分栏导致的阅读中断。
总之，在网页设计中，栏式结构是一种重要的页面布局方式，它可以根据页面内容和功能需求的不同选择不同的分栏数量和布局方式，实现清晰明了、灵活多变、提高信息密度和易于阅读的页面效果。
由于信息的多变性，栏式结构无法满足我们的所有需求。于是从栏式结构的横向分割，逐渐化出了区域排版结构。
① 分栏结构与区域结构
正因为我们无法满足于栏式结构的信息排版和页面设计，才衍生出区域排版结构。如果说分栏是把页面竖向划分，那么区域就是在此基础上把页面横向分割。一般来说，采用区域排版的页面都非常精美。这是因为区域结构可以有效的编排信息内容，使信息布局时而疏松，时而收紧。美化用的插图还可以与结构完美融合，给设计师提供自由度颇大的创作空间。
② 区域结构的特点
灵活性：区域结构允许设计师根据需要自由分割页面，可以适应不同内容的需求。
信息编排：区域结构可以有效地编排信息内容，使信息布局时而疏松、时而收紧，以适应不同信息的重要性和优先级。
创意性：区域结构为设计师提供了更多的创意空间，可以创造出更具吸引力和个性的网页设计。
③ 响应式设计
适应不同设备：区域结构应能够适应不同设备和屏幕尺寸，确保页面布局在不同设备上都能完美呈现。
可触摸友好：在移动设备上，按钮和链接的大小应适中，方便用户触摸操作。
栏式结构与区域结构具有一定的普遍性和实用性，可以放置一定量的信息内容，并符合网站网页形式的信息格局要求。两种格局所形成的网站风格气质也具有一定的独立性应用起来各有特色。现今的大部分网站框架都是由这两种基础结构演化而来的，结合两种格局的优点，可以使页面既保留栏式结构的大气，又保有区域结构的精美，这样的网站更能适应信息形式的变化和人们审美的追求。除此以外，网页平面还继承了来自平面印刷品(平面广告、报纸、书籍装帧)的某些排版特征。在网络上，有相当一部分页面排版借鉴了平面设计的优点，并摆脱了信息格局的框架式束缚，加上动态效果等网站形象可具有非常独特风情的气质与趣味性。
我们在设计网页的时候可以遵循以下设计原则，创作出既美观又实用的版式设计作品，有效传达信息并提升读者的阅读体验。
对齐原则：
版面中各个元素应对齐，包括文字、图片和其他设计元素。
常见的对齐方式有左对齐、居中对齐、右对齐和两端对齐。
对齐可以增强版面的整洁感和美观度，同时便于读者快速准确地获取信息。
色彩原则：
色彩搭配是版式设计中至关重要的一环。
选择色彩时需要考虑色彩的明度、饱和度、色调以及色彩的搭配协调性。
合理的色彩搭配能够增强版面的吸引力和读者的阅读体验。
间距原则：
指的是版面中各个元素之间的间隔和距离，包括行距、字距、段间距及元素与边框的距离等。
合理的间距设置能够提升版面的舒适性和美观度，有助于读者的阅读和理解。
留白原则：
在版面中留出一定的空白区域，使版面呈现空灵、清新的视觉效果。
留白可以提供更好的呼吸空间和视觉平衡，使读者更容易阅读和理解信息。
简洁性原则：
版式设计应尽量精简，避免过多的修饰和冗余元素。
简洁的设计能够使信息更加清晰明了，防止混乱和干扰。
统一性原则：
版式设计中的元素应具有统一性和特定的风格。
这有助于形成一个整体的视觉效果，增强设计的一致性和连贯性。
重点突出原则：
通过合理使用颜色、大小、形状和位置等元素来突出版式中的关键信息和重要内容。
这有助于引导读者的注意力并快速传达核心信息。
在设计网页版式的同时，我们还需要重点关注网站设计的流行趋势，设计风格等，这样才能抓住用户想要的。近些年，AI 技术的广泛运用，也让我们关注点发生了变化，主要有以下这些风格：
1. AI 辅助网页设计
2023 年，人工智能彻底改变了设计行业。AI 生成的图像开始被运用在网页设计中，为设计师提供设计灵感，这有效提升了设计师的工作效率。此外，设计师还可借助 AI 为网页界面的文案进行润色，让设计呈现更好。利用 AI 提供的功能，从网页设计的灵感查找到设计到最终验收阶段为网页设计师提供辅助，为设计师节省了大量时间。毫无疑问，2024 年 AI 将被越来越多的应用在设计中，AI 辅助设计将成为 2024 年网页设计趋势之一。
2. 可访问性网页设计
在当今日益数字化的时代下，企业越来越追求更加酷炫与迷人的网页设计效果去吸引用户，这让网页的可访问性对于用户而言变得至关重要，促使其成为 2024 年值得关注的网页设计趋势之一。网站的可访问性包含多种功能，包括添加替代文本、响应式设计、网站的配色等。关注可访问性的网站，只需要以很小的努力就可对企业的业务产生巨大的影响。作为一名网页设计师，我们在进行网站设计时，必须要充分理解并实施可访问性的网页设计指南与趋势，确保网站具备足够良好的包容性，让所有人都能够从中获得好处。
3. 聊天机器人的应用
随着 chatgpt 等聊天机器人的兴起，无疑通过探索实施人工智能来提升网站的潜在优势以促进业务增长将成为 2024 年的重要网页设计趋势。通过聊天机器人的应用，网站能够更好的服务其用户的个性化需求，并提供更高的访问效率。比如使用 AI 生成大量通用的产品描述、生成文本，以增强网站的可访性。根据个人用户的独特偏好定制网站内容、结构和网页设计。让 AI 担任客服给用户提供更好的购物指导。
4. 分屏布局网页设计
我们可以在网上看到很多垂直分屏的网站布局设计，这种布局的设计趋势正在上升，将在 2024 年成为最值得关注的网页设计趋势之一。在网站设计中，分屏布局设计能够给人一种现代化的视觉感受且在创造力方面有很大的展现空间。通过这种分屏布局设计，设计师可以在同一页面分别呈现不同的内容或消息，让用户能够更快的获取自己想要的信息，节省用户的时间。此外，使用这种方法也可以有效地展示不对称设计和交互对象。
5. 深色模式网页设计
随着越来越多的网站开始展示他们对黑暗模式的看法，2024 年的网页设计师必须掌握如何进行深色设计模式。采用深色模式进行设计，不仅可以减弱光条件下的眼睛疲劳以提高网站的阅读效率，还可以赋予网站时尚现代的外观，给用户提供更好的视觉体验。此外，深色模式还有助于延长设备的电池续航时间，同时为用户提供愉快的夜间体验。
6. 鲜艳的色彩
近几年，鲜艳的色彩一直都很流行。2024 年，极端饱和的色彩仍将是设计师们争夺注意力并让他们的设计脱颖而出的战场。色彩丰富、对比强烈的设计，在网页中可以很容易吸引用户的眼球，让你的设计备受瞩目。
7. 长虹玻璃效果设计
长虹玻璃效果（Reeded glass effect）增强了设计的深度，以有趣的方式漫射光线，创造出吸引眼球的迷人效果。作为装饰艺术风格不可或缺的一部分，它近年来在室内设计中经历了非凡的复兴。此外，以令人兴奋和多样化的方式融入这一元素的图形设计也大幅增加。在网页设计中，使用这种效果进行图像模糊或作用文本，都能给用户留下深刻的印象.
8. 点阵屏网页设计
点字体正变得非常流行，Nothing 品牌就是一个很好的例子，它因其创意概念而走红。通过将现代简约设计中的单色圆点作用文本，可以在网页设计中很好的展现出未来主义以及复古的氛围，营造出一种新鲜的科技氛围。此外，使用带有圆点背景或类似半色调图像的设计，也正在成为一种排版网页设计趋势。
9. 抽象渐变网页设计
虽然使用渐变色彩进行网页设计已经成为流行趋势有一段时间了，但在 2024 年，渐变色彩的使用将更加抽象、有趣和艺术化。使用鲜艳的色彩或使用不经常组合的颜色进行设计，给用户一种超现实和陌生的感觉，会让你的网页设计看起来更加独特。但需要注意的是，整体的设计需要保证美感，让人赏心悦目。
10. 明显网格区域边界
在网页设计中，使用网格进行设计，可以让页面更有秩序并提高可读性。到 2024 年，使用明显网格区域边界的设计，将成为有趣的网页设计趋势之一。通过在网页中使用网格，可以让页面的层次结构更加易于理解，而在自由空间打破网格又可以使网页看起来更加具有创意。
我们在设计 G 端网页的设计,除了了解版式布局以外，还需要关注多个方面，以确保其既满足功能性需求，又具备良好的用户体验。以下是一些关于 G 端网页设计的主要要点和设计策略，在设计 G 端网页时，要始终将用户需求放在首位，通过不断的测试和优化，确保网页既美观又实用。同时，关注行业动态和技术趋势，将新的设计理念和工具应用到网页设计中，以保持其竞争力和吸引力。
1. 明确目标用户与需求：
深入了解目标用户群体，包括他们的需求、行为模式、偏好等。根据用户需求确定网页的功能和特性。
2. 精湛的界面设计：
使用精选的颜色调色板、精美的排版和独特的图标，为网页带来高雅的外观。
创意元素是高端设计中必不可少的，可以考虑使用定制的插图、动画效果或独特的形状和图案。
3. 用户体验的极致追求：
确保网页在不同屏幕尺寸下都能呈现精美的设计和完整的内容，实现响应式设计。
从页面加载速度到导航的流畅性，都要精心考虑，确保用户能够轻松地浏览和交互。
4. 内容的精心挑选：
清晰、有深度的文字内容和高质量的图像可以增强网页的吸引力，并向用户传达专业性和价值。
使用高品质的摄影作品或独特的插图，让网页更具视觉冲击力和吸引力。
5. 导航的简洁与有序：
使用清晰的菜单和内部链接，确保用户能够流畅地浏览网页，轻松找到所需信息。
6. 品牌一致性的保持：
网页设计与品牌形象保持一致，使用品牌色彩、标志和字体，确保用户能够与品牌建立深刻的联系。
7. 交互设计的优化：
遵循费茨定律，优化按钮和界面元素的设计，确保用户能够快速、准确地完成操作。
应用席克定律，减少用户在执行任务时的选择，提高操作体验。
8. 利用 AI 助力设计：
利用人工智能工具提升设计效率，获取创意灵感。
使用 AI 生成的图像快速构建网页布局，对文案、色彩、字体进行优化调整。
9. 聊天机器人的整合：
考虑在网页中整合聊天机器人，提供定制化服务，改善用户与网页的互动方式。
10. 案例学习与借鉴：
参考高端网页设计案例，学习其布局、色彩搭配、交互设计等方面的优点，并尝试在自己的设计中应用。
在我们的项目中以下 2 点设计策略，尤为重要。
参考一些排版布局页面，版式不再是简单的分割，更加有层次的设计感，重要的信息更加突出，让页面更加活泼轻松。
校园网站设计多稿设计方案的迭代中，学校网站已成为展示学校形象、提供教育服务的重要平台。一个良好的版式布局不仅能够提升用户体验，还能有效传达学校的教育理念和文化特色。采用重复、对称等构图技巧，使页面布局更加和谐统一
网页版式设计和风格在网页设计中都是至关重要的元素，但它们的重要性因项目需求、目标受众和品牌特性等因素而异。无法简单地说哪一个更重要，因为它们通常是相互关联、相辅相成的。
网页版式设计的重要性：
网页风格的重要性：
综合考虑：
在实际设计中，网页版式设计和风格应该相互协调、相互补充。版式设计为网页提供清晰、合理的布局和排版，而风格则为网页赋予独特的个性和情感。一个成功的网页设计应该既能满足用户的信息需求，又能给用户带来愉悦的视觉体验，同时能够准确地传达品牌的价值观和形象。
因此，在网页设计中，我们应该根据项目的实际需求、目标受众和品牌特性等因素综合考虑网页版式设计和风格的重要性，并在设计中找到它们之间的平衡点。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
FocusFlow是面向软件研发全团队的文档与任务一体化协同平板Web后台，适配平板横屏触控操作，深色专业基底搭配渐变绿主视觉。产品覆盖两大核心业务：多团队任务进度管控、技术文档分支版本管理，实时推送全员任务创建、文档标注、状态流转动态，支持新建文档分支、配置权限、绑定配套文件与注释，区分前端、后端、市场、CRM多业务团队，满足研发日常迭代任务跟进、技术架构文档版本维护、跨部门协作同步全场景需求。
传统研发协同工具四大行业痛点
1. 界面浅白刺眼不适合长期编码办公：多数协同工具浅色基底，研发长时间盯屏幕易视觉疲劳，缺少专业深色模式；
2. 任务与文档版本割裂：任务进度、技术文档分支分属两套系统，无法在同一页面联动查看；
3. 平板适配体验粗糙：PC端页面直接压缩至平板，导航层级深、触控按钮过小，横屏办公效率低；
4. 团队动态分散无统一信息流：成员新建任务、修改文档、流转状态无聚合动态面板，需要逐个页面查看更新。
二、完整研发协同办公闭环
平板端单页面打通团队动态查看→任务状态跟进→文档分支管理→新建版本分支完整操作闭环
1. 左侧多级导航栏：顶层概览、联系人；任务模块区分进行中/已关闭；集成、业务商机；下方按研发团队分类（CRM、后端、前端、市场、教育站点），层级清晰一键切换业务板块；
2. 中部实时动态信息流：按时间倒序展示全员操作动态，附带人员头像、操作内容、任务状态流转标签（新建/进行中/已完成），直观掌握团队当日工作进度；
3. 右侧文档分支管理面板：罗列架构、数据库、基础设施全系列技术文档分支，标注创建时间、配套文档数量、维护人，支持选中查看详情；
4. 悬浮新建分支弹窗：完整表单配置分支名称、附件、文档上限、可访问成员、备注注释，一键创建新版本文档分支，完善版本管控流程。
三、核心页面模块设计拆解
模块1：平板横屏完整工作台总览
全深色基底，左侧固定多级侧边导航，中部动态信息流，右侧文档分支卡片，三栏布局适配平板宽屏触控
1. 顶部全局栏：产品Logo、全局搜索框、任务全部/更新分类切换、详情定位标签；
2. 左侧导航分层设计：通用总览、任务管理、集成商机、多业务研发团队分组，选中项采用渐变绿色高亮；
3. 动态流标准化卡片：成员头像+操作文案+时间戳，搭配状态渐变标签区分任务阶段，低饱和度彩色区分不同团队；
4. 文档分支圆角卡片：标题、分类、文档数量、维护人信息分层展示，选中分支绿色对勾标记；
5. 右上角悬浮触发新建分支按钮，唤起弹窗完成版本创建操作。
模块2：文档分支列表与新建弹窗
1. 列表模块：极简深色卡片排布，每条分支附带文档、描述计数标签，轻量化圆角弱化厚重感；
2. 新建分支弹窗：分区表单控件，包含附件上传、分支命名、数值下拉框、成员权限标签、多行注释输入框，底部渐变绿确认按钮与白色取消按钮形成清晰操作区分。
模块3：任务动态单组件规范
独立拆分动态卡片组件，人物信息、操作文字、状态流转箭头可视化，状态色块采用柔和蓝、绿渐变，可全局复用统一视觉标准。
四、视觉设计体系：深灰渐变绿专业研发深色风
1. 色彩系统
- 基底底色：纯深灰近黑深色基底，长时间办公护眼，适配研发人员昼夜编码场景；
- 品牌渐变主色：柔和青柠绿渐变，用于导航选中、主操作按钮、选中标记，作为产品核心识别色；
- 状态区分辅助色：浅蓝标记进行中任务、灰黑为新建、浅绿为已完成，多色柔和不刺眼；
- 文本色：浅灰白正文、浅灰辅助说明文字，层级区分清晰不费眼。
2. 图形与可视化规范
1. 轻量化大圆角悬浮卡片，低透明度柔和阴影，多模块同屏排布不拥挤；
2. 状态流转可视化箭头，直观展示任务从新建到进行中再到完成的完整流程；
3. 纤细线性极简导航图标，技术向简约风格，适配研发专业调性；
4. 团队区分低饱和彩色小点标签，快速识别业务归属。
3. 文字层级规范
纤细无衬线专业等宽商务字体，三层清晰信息层级：动态标题/分支名称加粗大字→操作说明、团队分类中等字→时间、计数辅助小字，平板远距离浏览也能快速识别关键信息。
五、产品商业与研发团队落地价值
1. 原生专业深色基底适配研发办公：不用手动切换模式，长时间查看代码、文档视觉负担更低；
2. 任务与文档分支同屏联动：平板单页面同步管控迭代任务与技术架构版本，减少多系统切换；
3. 专为平板横屏优化三栏布局：导航、动态、文档分区合理，触控按钮尺寸适配平板手指操作；
4. 统一聚合团队动态信息流：当日全部任务、文档更新集中展示，管理者快速掌握团队协作进度；
5. 标准化文档分支权限配置：完整表单管控版本可见人员，保障技术架构文档数据安全。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
一、全文速览图
背后其实是同一件事：AI 时代，设计系统的使用者变了。
过去我们讲设计系统，主要是在服务设计师、研发和团队协作。
设计师通过它统一视觉语言，判断界面质量，维护设计一致性。
研发通过它复用组件，实现页面结构，保证代码可维护。
团队通过它建立共同语言，知道用什么、怎么用、怎么保持一致。
所以，传统设计系统里通常会有三类内容
这些内容对团队协作当然非常重要。 但 AI 进入工作流之后，设计系统多了一个新的使用者：AI Agent。
它不只是“看规范”，而是要进一步去 读规则、选组件、拼页面、辅助检查。 它需要知道：
所以，传统设计系统给人协作够用，但给 AI 执行还缺几层。
我现在会把这个缺口概括成四件事。
很多判断原本是设计师凭经验完成的。比如：
这些对人来说是经验，对 AI 来说却不是默认知识。
你不写出来，它就不知道。
有些规则在 Figma 里，有些在文档里，有些在组件说明里，还有一些藏在团队习惯里。
人可以靠上下文补齐，AI 很容易读漏、读散、读不完整。
最后看起来像“它知道一点，但又没完全知道”。
很多团队其实已经有组件库了，但 AI 不一定知道：
它可能知道“这里有 Button”，但不知道什么时候用 Primary，什么时候用 Danger，什么时候还要加二次确认。
AI 生成页面之后，如果没有统一的验收标准，它也不知道：
所以很多时候，AI 生成页面缺的不是灵感，也不是提示词不够好，而是缺少一套明确的执行依据。
它缺：
到这里，这件事其实可以拆成两个层面来看：
第一步：搭底座
先让 AI 有东西可读。
这里包括：
它们解决的是：AI 先理解这套系统的风格、命名、变量、组件和基础规则。
第二步：用底座
再让 AI 知道怎么调用这些资产。
这里包括：
它们解决的是：
AI 怎么找组件、怎么选组件、怎么组合页面、怎么检查结果。
所以前两个模块合在一起，其实是在补一套 AI 执行层。
这一层让设计系统变得：
说完背景，再回到大家最常来问我的几种情况。
很多设计师会说：
我已经有一套 Figma 组件库了，能不能让 AI 直接读取组件，然后帮我拼页面？
这个方向当然可以尝试。 但 Figma 组件更多描述的是 视觉结构、图层关系和基础状态，它不一定告诉 AI：
所以这种场景最容易出现的问题是：AI 看起来用了组件，但页面结构还是很散。
这时要补的往往不是更多单个组件说明，而是：
比如后台列表页，不只是 Button、Input、Table 的堆叠。
它还包括页面标题、筛选区、工具栏、表格、分页、批量操作、空状态和异常状态。
AI 需要知道这些区块怎样组成一个页面。
还有一些团队已经写了规范文档，甚至整理了 Design MD，但 AI 生成结果依旧发散。
这通常是因为：文档只有描述，没有连接到真实资产。
比如文档里写：
但 AI 并不知道：
所以 Design MD 不能只是说明书。
它还需要继续连接到：
否则 AI 只是“看过规范”，但没有办法稳定执行规范。
也有团队已经有前端组件库，但 AI 生成页面时还是会：
这通常不是因为组件库没用，而是 AI 不知道怎么调用。
它需要知道：
这种场景下，最重要的是：不要让 AI 一上来就直接生成页面。
一个比较稳定的顺序通常是：
只有这样，AI 才不是凭感觉写页面，而是在按照组件库规则生成页面。
这是最常见、也最容易混乱的一类。
团队手里有：
但它们之间没有明确关系。
比如：
如果这些关系没有整理出来，AI 会看到很多材料，但不知道该以哪个为准。
这时候不是继续堆更多文件，而是先建立连接：
AI 时代的设计系统，不只是多写几份规范。
它更像是在原有设计系统之上，补一层 AI 执行层。
当这些问题被补齐之后，设计系统才会真正从“给团队协作看的规范”，变成“AI 可以参与执行的工作流”。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
这个页面 Codex 已经能做出来。
但你看截图时，可以重点看图标，粗的细的面性的...会感觉有点乱。
不指定图标库时，AI 一般会默认用 Lucide 图标库。不是说它丑，但会让页面一眼有「AI 生成」的味道，就像Ai同样喜欢生成蓝紫色渐变的页面。
同样的页面，只是统一了图标，精致感就会上一个台阶。
这件事可以分两种情况：还没生成页面时，先把图标规则写进去；页面已经生成后，再用一条 prompt 把图标统一回来。
如果你还没开始生成页面，可以把规则直接写进主 prompt 里：
图标使用要求
界面中的图标默认使用 [Hugeicons] 图标库：
[https://hugeicons.com]
请优先选择与参考图含义和视觉风格最接近的图标。
如 [Hugeicons] 中没有完全匹配的图标，可以选择语义接近、风格一致的替代图标，但需要保持整体图标线宽、圆角和视觉统一性。
这就是最常用的调用方式。
核心不是让 Codex「推荐图标」，而是提前告诉它：图标从哪里选、怎么替代、线宽圆角和颜色要怎么统一。
如果页面已经生成好了，可以直接补这一句：
请检查当前 Dashboard 页面里的所有图标。
统一改成 [Hugeicons] 图标库，请优先从 [https://hugeicons.com/] 里选择语义最接近的图标。
所有图标保持线性风格，尺寸按使用场景统一：导航图标约 20px，数据卡片图标约 24px，消息提醒图标约 16px。
图标颜色跟随文字或卡片主色，不要混用其他图标库，也不要手写 raw SVG。
这一步做完，页面的变化会更明显。
图标会被拉回同一套视觉语言里。线条、圆角、粗细都统一以后，页面会少很多临时拼的感觉。
如果企业有自己的图标库，可以这么用：
帮我安装 @our-company/icons，这个项目所有导航和按钮图标都使用公司图标库。请从包里引入 React 组件，不要临时手写 SVG。
最后小一句话：别让 AI 自己猜图标。
你给它一个图标库、一条选择规则、一组样式约束，它做出来的页面就会少很多临时拼的味道。
选图标库时，不要只看数量多不多。
如果你真的在意外观，我建议先避开两个“坑”。
选图标库时，不要只看数量多不多。
如果你真的在意外观，我建议先避开两个“坑”。
它确实轻、稳、好调用，和 Shadcn UI、Tailwind 这些 AI 常用组合也很顺，所以模型特别爱用。
但也正因为太常见，那种细线、圆角、默认尺寸组合已经很容易被识别成「AI 默认图标」。如果你想要你的图标有特色一点，我不建议选它。
它把很多流行图标库都封装在一起，选择面很大。
问题是，AI 一旦从大集合里自由挑，可能这个来自 Feather，那个来自 Material，另一个来自 Font Awesome。语义对了，视觉语言却散了。
我的建议是：先选一个主风格库，再允许 AI 在找不到时做语义接近的替代，但必须保持线宽、圆角和视觉统一。
如果你想找一个覆盖面广、视觉质量也比较稳的图标库，Hugeicons 是很适合先试的一套。
它的优势是场景覆盖比较全，风格也适合拿来做完整界面：Dashboard、SaaS、产品官网、移动端页面，都比较容易找到合适的图标。
Tabler 的优势是数量多。
做 ERP、数据平台、管理后台时，菜单经常一排十几个：订单、库存、客户、财务、权限、日志、工单……这时候大多数小型图标库会不够用，Tabler 更容易补上。
它个性不算强，但很适合「东西很多、还要整齐」的项目。
Phosphor 比较适合你想控制视觉层级的时候。
同一个图标有 Thin、Light、Regular、Bold、Fill、Duotone 等版本。比如普通状态用 Regular，重点入口用 Fill，空状态插画旁边用 Duotone，页面会有更细的层次。
这种库适合有一点设计控制欲的人。你愿意多说几句规则，它回报你的细节也更多。
Radix Icons 数量不算最多，但它在小尺寸 UI 里很舒服。
按钮、弹窗、表单、Dropdown、Toast 这种组件里，图标太花反而烦。Radix 的 15×15 网格很规整，适合做设计系统里的小图标。
如果你的项目偏组件库、B 端工具、内部系统，它会比很多大而全的库更稳。
补充选择：Remix Icon / Material Symbols / Feather
Remix Icon 很中性，适合企业工具、内容平台、通用 Web 产品，所有图标均免费供个人和商业使用。
Material Symbols 更适合 Google / Android / Material Design 体系，普通项目不要为了「看起来专业」硬上，参数太多会增加控制成本。
Feather 很经典，也很干净，但数量相对少一点。它和 Lucide 的视觉气质很接近，如果你已经觉得 Lucide 有 AI 味，Feather 也要谨慎使用。
在 Figma 社区 找个图标库，或者把自己画的图标整理成组件页，顺手把名字改成 icon-home、icon-message 这种语义名称。
把这一页要用的图标放到同一个 frame 或组件区里，别让 Codex 在一堆图层里乱找。
把 Figma 链接交给 Codex 的 Figma 插件，并补一句：
[figma链接] 请优先使用这个 Figma 图标区里的图标。如果没有完全匹配的图标，可以选择语义接近、风格一致的替代图标。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com