首页

设计师必看:分清客户与用户,设计才不会做无用功|兰亭妙微

涛涛 用户研究

不少刚入行的 UI、平面设计师做项目时,很容易陷入一个思维误区:把付费对接的甲方等同于产品最终使用者,全程只盯着客户喜好做设计,忽略真实使用人群的需求,最后产出的方案甲方满意,终端使用者却很难上手。深耕政企 B 端界面、可视化设计多年的兰亭妙微,在数百套系统项目落地中发现,厘清客户与用户的边界,是做出有效商业设计的第一步。

UI 设计师必学视觉底层逻辑:格式塔设计原理|兰亭妙微实战解读

涛涛 设计管理与成长

很多人误以为 UI 设计只是打磨像素、美化界面图形,真正成熟的界面设计核心是高效信息传递、流畅操作体验与清晰用户引导。深耕 B 端可视化、政企软件 UI 设计十六年的兰亭妙微(蓝蓝设计),在数百套后台系统、大屏、管控软件项目落地中发现:优质界面的底层逻辑,全部源于人类天然的视觉感知规律,也就是格式塔原理。

我把关键词都分享出来了,以后别说不会做动效了!

之晨 设计资源

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

一、全文速览图

image.png

二、生成前的预处理

1. 给素材进行预处理(加一个素材没有的颜色作为背景),这里进行预处理是为后期在AE中进行抠像处理做准备

image.png

2.把首尾帧的参考图给 AI,生成适配的动态提示词。因为要做 “从无到有” 的动效,推荐用首尾帧生成,在提示词里写清楚首尾帧的画面和运动过程即可

image.png

这是AI给到我的提示词

image.png

三、生成视频

1. 选择「首尾帧生成」模式,首帧上传纯蓝色图片,尾帧上传花朵碰到一起,花瓣爆开的图片。

首帧:

image.png

尾帧:

image.png

2. 查看生成的视频

现在生成的视频,在碰撞后有很多杂线飞出,整体太乱了,我们修改提示词,让他不要有杂线飞出。

我们直接描述问题发给AI,让AI给我们修改提示词。

image.png

这是AI给到我的提示词:

image.png

3. 把新的提示词给到AI,让AI重新生成视频。

4. 现在生成的动画是没有杂线飞出了,但是节奏不对,两朵花碰到一起后,延迟了一会花瓣才爆发出来,我希望他是两朵花碰到一起后花瓣就直接爆发出来,那我们就继续描述问题,让AI给我们修改提示词。

image.png

image.png

https://image.uisdc.com/wp-content/uploads/2026/07/cf7774965441bbe94e0bbe8dd1bf35ba.webp

四、AE实操

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。

 

image.png

没想到我一个没有绘画基础的设计师,也能做这种海报!

之晨 平面设计

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

全文速览图

image.png

对于一些视觉海报,有了创意,但效果不太处理得好,借助AI的力量,让你轻松拿捏!

首先是创意设定,草图这一块,我们运用夸张(大小对比)的创意技法,搭建好构图。

image.png

这也是我们在做海报会经常用到的创意技法,冲击力以及效果都嘎嘎好使。

像另一张番茄与猫的海报,同样是大小对比的上下结构构图:

image.png

技法其实没什么难度,结合好了那就是一张优秀的海报作品。

那我们再回到第一张的草图。

image.png

我们预想的是做逆光的光影氛围效果,但不明确光应该怎样打,于是找了如左图的参考,让背景类似于在室内,有道门溜了一条缝,光从室外通过门缝,照射到主体物上面,按此思路,铺个大效果,确认光源方向,明确受光面和投影方向。

image.png

接下来把图交给AI生成,写关键词要明确表达出:

  1. 画面风格
  2. 颜色调性
  3. 光源方向,其他具体的细节层面根据需要补充

image.png

细看生成的图,小猫不太精致,主要集中在头部的BUG,手动修正脸部五官的扭曲,以及明确头顶耳朵的结构。

image.png

用黑白画面来看下视觉重心,当前是巨大的主体物让画面的视觉重心集中到了右侧。

image.png

所以我们需要在画面的左上方加入元素来把视觉重心往回拉一些。

image.png

我们将文字标题放在了那个位置,并加入排版,让标题叠压在番茄的下面,做出层次,并选择深色字体,用于与小猫身上重色进行颜色平衡。

image.png

纯黑的标题与亮色背景对比太强,过于突出吸睛,于是将其变灰一些,减少对主体物的干扰。

image.png

将标题文字调整为深棕色,符合画面的暖色调,并加入一点背景的暖黄色,让其能融入进背景而不至于脱离于环境导致太割裂,然后加入一层杂色效果,增加整体画面质感细节。

image.png

以上就是我们出设定,用AI辅助结合局部手动调

转载自优设网

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

AI产品用户暴涨之后,产品经理该看哪些指标?

之晨 行业趋势

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

一、全文速览图

image.png

QuestMobile 的数据显示,国内 AI 原生 App 月活已经到 4.99 亿,同比涨了 85.4%。

支付宝「碰一下」的用户规模过了 4 亿,千问的月活涨幅接近 58 倍。

这些数字这半年被反复引用,几乎成了「AI 产品在爆发」的标准论据。

这类报道通常只披露一件事,规模涨了多少。使用时长、复访比例、有没有留存下来,这些同样能拿到的数据,很少被放进同一篇报道里,也很少被追问。

但很少有报道会往下多问一句,这些涨起来的用户,有多少留下来了,有多少只是来试了一次就走。用户规模和用户是不是被真正留住,是两件事,前一件被讲了太多次,后一件几乎没人认真拆过。

这半年被反复引用的规模数字,也让「要不要跟进做一个 AI 功能」这类决策,变得比以前更容易被数字本身带偏。

二、传统指标体系失灵的地方

产品经理判断一个产品好不好,习惯性地看一条链路,获客、转化、留存。

这条链路背后有个默认假设,用户只要进来了、用起来了,价值就会自然沉淀,剩下的事交给时间。

这套假设在传统互联网产品上大体成立。做一个能用的产品需要门槛,门槛本身筛掉了一批凑热闹的用户,留下来的大多是真有需求的人。

AI 产品把这套逻辑打乱了。

调一个大模型 API,套一个现成的 RAG 框架,几天就能拼出一个看起来很能打的 Demo。门槛被拉到了历史最低,注册转化率、首页访问这些前端数字,因此也变得很容易做得好看。

举个例子,一个做 AI 写作工具的团队,两周就能上线一个输入主题就能生成一篇公众号文章的功能。用户点一下几乎零成本,注册转化率做得很漂亮并不难。真正难的是,用户拿到生成结果之后,愿不愿意把这篇文章真的发出去,这一步在老地图上是找不到的。

这套低门槛甚至体现在产品经理自己的判断习惯上。过去评估一个新功能值不值得做,往往先看它能不能带来注册量和访问量的短期上涨。AI 功能几乎都能满足这个标准,因为新鲜感本身就会带来一波点击,这也是为什么很多团队会在错误的方向上,做出一个看起来很成功的判断。

问题出在更深的地方。用户进来了,产品是不是真的把事情办成了,这件事和用户进来了完全是两回事。

传统产品里,进来和办成之间的距离很短。AI 产品里,这段距离被拉长了,而且大部分产品经理还在用老地图找这段新路。

这就是为什么同一套仪表盘,同一批产品经理,会在 AI 产品上判断失误。不是数据造假,是看的地方错了。

image.png

三、权重重新排序

看的地方错在哪,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 产品都有这么清晰的任务边界,判断使用深度之前,先想清楚自己的产品里,一次完整任务到底指的是什么,是能不能套用这套框架的前提。

image.png

image.png

四、转化率超 100%,未必是好事

权重排对了,接下来是怎么防止被数字骗。

第一个常见陷阱,是漏斗里某个环节的转化率超过了 100%,人数不减反增。

这种情况通常有三个来源。

统计口径没对齐,上一步按自然日去重统计新增用户,这一步却按一个更长的活跃窗口统计所有触发过这个动作的账号,两边的分母来自不同的时间尺度,下一步的人数比上一步多,是算法层面的必然,不是产品层面的奇迹。

采集标准不一致,前端埋点和后端日志各算各的,同一个动作在两套系统里可能被记成不同的数字,尤其是涉及 App、小程序、网页多端的产品,这种错位更常见。

用户行为本身有跳跃,用户离开又回来重新走了一遍这个环节,系统把这当成了两次独立事件,凭空多算了一次。这在允许用户中途退出再进入的 AI 产品里尤其常见,因为一次任务本身可能拆成好几轮交互。
遇到这种数字,正确的排查顺序是这样的。

先确认两个环节的统计窗口是不是完全对齐,再看这批用户里有没有掺进本不该算的老用户或回流用户,最后确认埋点逻辑会不会把同一个人的多次动作,算成了多次新增。三步查完,大概率能找到问题出在哪一环。

更具体一点,多数 BI 工具或者后台数据库里,可以直接把两个环节的用户 ID 拉出来做交叉比对,看下一环节里有多少用户 ID 没有出现在上一环节的名单里。如果这个数字不是零,说明确实有凭空出现的用户,顺着这批用户的行为记录往回查,通常能直接定位到问题出在统计口径、埋点还是回流。

这三步排查,靠翻埋点文档和拉后台原始数据就能做,不需要额外的工具。需要的是遇到反常数字时,先怀疑统计本身,再相信这是个好消息的习惯。

Lollipop 的后台就出现过更夸张的情况,注册转化的一个子环节里,「成功注册」的人数是「进入注册页」的十倍还多,转化率算出来超过了 1000%。

image.png

查下来是两个环节的统计时间窗口没对齐,「进入注册页」只挑了当日严格路径进来的用户,「成功注册」却把更宽时间窗口里所有完成注册的账号都算了进去,两边的分母压根不是同一批人。这类异常如果不查,很容易被当成一个值得庆祝的好消息,写进周报里。

五、功能上线不等于被采纳

第二个陷阱更隐蔽,一个 AI 功能上线了,不代表用户真的在用它。

微软自己披露的数据是一个很有分量的参照。

Microsoft 365 Copilot 上线三年后,付费企业里的实际采纳率不到 4.5%,每周还在用的用户比例只有 1%。

财富 500 强企业里七成拿到了 license,但每周真正被使用的付费席位只有两到三成。

一个全球最大的企业软件公司,尚且交出这样的采纳数据。说明这不是某个小团队的执行问题,是 AI 功能从上线到被真正采纳,中间天然有一道很宽的沟。

这道沟通常来自三个原因。

用户不信任 AI 给出的结果,宁可自己重做一遍,尤其是涉及需要担责的场景,比如财务数字、合同条款,用户会本能地想再核对一遍,AI 帮着做的这一步,等于白做。

功能藏得太深,不在用户原有的操作路径上。一个 AI 摘要功能如果放在三级菜单里,大多数用户根本不知道它存在,更不会主动去找。

功能确实存在,但比用户熟悉的手动方式并没有明显更好,缺乏切换的理由。如果 AI 自动填表的出错率比用户自己手动填还高,用户试过一次就会放弃,回到熟悉的老办法。

判断一个 AI 功能有没有真被采纳,可以拆成两层来算。第一层是尝试率,能接触到这个功能的用户里,有多大比例点开用过至少一次。第二层是复用率,用过一次的人里,有多少比例会用第二次、第三次。

尝试率高、复用率低,说明用户对这个功能有好奇心,但没有形成依赖,这正是大多数 AI 功能卡住的地方。用过一次约等于好奇,用过不止一次才约等于这个功能真的解决了问题。

微软的数据也印证了这一点。超过 1 亿月度 Copilot 用户,说明尝试的门槛已经很低,财富 500 强七成拿到 license,说明分发也做到位了,真正卡住的,是复用这一层。

我们 Lollipop 的简历漏斗里也有类似情况。用户确定简历之后,走到「Agent 对话」这一步的转化率只有个位数。功能是上线了的,但绝大多数用户走到这一步就停住了,没有再往前一步。

image.png

六、留存曲线才是终局判据

前两个陷阱都还只是排查具体数字,第三个陷阱要看的是一整条曲线,留存曲线的形状。

a16z 在一份关于 AI 消费应用的报告里提到一个说法,很多 AI 应用早期都会经历一波「AI 游客」。这批用户被新鲜感或者一次刷屏式的传播吸引进来,用几次就走,本身对产品没有真实需求。

AI 游客通常是被两种力量带进来的。一种是免费试用或者限时活动,用户抱着反正不要钱的心态点进来看一眼;另一种是社交媒体上的一次刷屏式安利,用户被大家都在讨论这件事本身吸引,而不是被产品要解决的问题吸引。这两类用户对产品本身没有真实需求,留存曲线注定要往下掉。

真正的分水岭在第三个月前后。如果留存曲线过了这个点还在持续往下掉,说明用户最初的新鲜感没有转化成长期愿意用的理由。具体到怎么看这条曲线的形状,可以连续观察三个月的环比降幅,如果降幅一个月比一个月收窄,说明曲线在走平,用户群体逐渐稳定下来;如果降幅稳定甚至扩大,说明流失还在加速,这是曲线持续下探的信号。

报告里也提到一个有意思的反例,头部产品比如 ChatGPT 呈现出一种回升式的留存曲线,用户在中途流失后,会因为产品能力持续提升、能处理的场景变多,重新回来使用。

回升式曲线不是靠运气出现的。头部产品做对的事情,通常是持续扩展产品能处理的场景,让一个因为某个具体需求流失的用户,后来因为另一个新场景被解决,重新想起这个产品,再加上恰当的触达(比如提醒、周报这类唤回机制),才能把回升曲线做出来。

看留存,不能只看前几天的数字,要看到第三个月这个节点之后曲线是往下探、走平,还是回升。前几天留存好看,只能说明第一次体验没让人失望,不能说明产品被真正需要。

Lollipop 的 30 日留存数字趋近于零,首页访问的流量并不小。

image.png

入口流量还在,但30天之后几乎查不到人回来,这组对比比任何一条好看的增长曲线都更能说明问题。

image.png

image.png

前面这三个陷阱,说的都是老指标怎么骗人。有一个容易被忽略的地方是,使用深度、功能采纳率这类新指标,同样可以被做出虚假的好看。

刷时长、机器人循环调用、把一个简单任务硬拆成好几轮交互凑次数,都能在不产生真实价值的情况下,把这几个新指标堆上去。看使用深度、看功能采纳率、看留存曲线,解决的是入口指标不够用的问题,不是给了一张可以不用再怀疑的新地图。遇到反常的深度数据,同样要用前面几节的排查方法再过一遍。

七、一份可复用的判断清单

把前面几节收拢成一份清单。

先看使用深度,用户打开之后有没有走完一次完整任务,来得勤不勤,待得久不久。

再看功能采纳率,新功能有没有被反复使用,不是浅尝辄止用一次就再没打开过。

最后看长期留存曲线的形状,第三个月之后是探底、走平,还是回升,不要只盯着首周数字。

入口流量、首日转化率这类老指标不是不看,是不能再排在最前面。

如果这三项同时不达标,修复的优先级也有讲究。

先修留存,留存趋近于零,说明产品可能根本没有解决用户的真实问题,这时候去优化功能采纳率或者入口转化率,投入产出比很低,方向可能就错了。

再修功能采纳率,留存还过得去,但某个 AI 功能没人用,通常是设计或者信任问题,不是产品根本没用,值得针对性优化。

最后才轮到入口转化率,这一层最容易优化,也最容易带来虚假的安全感,前两层没达标之前,把力气花在这里性价比最低。

这套优先级说起来容易,落地时最大的阻力往往不是数据本身,是团队内部的认知。如果汇报框架、老板的直觉判断都还锚定在注册量和 DAU 上,突然把留存曲线摆到第一位,很容易被当成在唱反调。更现实的做法,是把这几个新指标和老指标并排放进同一张报表里,让入口流量继续涨,同时用具体数字展示留存和采纳率的差距,用事实说话,比正面辩论更容易推动认知转变。

拿这份清单去看一个陌生的 AI 产品,可以这样用。

先找它公开披露过的使用时长或使用频次,没有的话看应用商店评论里有没有人提到「用了一次就没再打开」这类反馈。

再看它有没有单独披露过某个核心功能的复用数据,一次性使用和反复使用是两回事。

最后如果能查到第三方的留存报告,重点看第三个月前后的曲线走向,而不是首周数字。

举个具体的应用场景。假设在看一款新出的 AI 笔记应用,官方通稿里只写了用户破千万。这时候先翻一下应用商店评论区,如果高频出现用了一次觉得挺新奇、后来就没再打开这类留言,基本可以判断留存是个问题。如果通稿里进一步披露了周活跃或者人均使用时长,可以拿来和同类产品做个粗略对比,时长明显偏短,说明用户可能只是把它当成一次性的新鲜工具,没有形成使用习惯。

三步做完,基本能判断出这个产品的增长,有多少是真的。

image.png

八、结尾

增长曲线好看,这件事本身不需要否定。

真正决定一个 AI 产品能走多远的,是曲线背后那些不那么好看、但更接近真实的数字,有多少人真的把一次任务办成了,办成之后,愿不愿意再来一次。

这三层判断标准不需要复杂的工具,大多数时候翻一下后台数据、看一眼应用商店评论,就能做完第一轮判断。

 

转载自优设网

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

Figma 在 AI 时代起落沉浮,让它们看清了关于未来的 3 个趋势

之晨 行业趋势

 

 

 

 

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

软件开发与数字设计领域,眼下正在经历着一场深刻的重构。这场重构由 AI 和各大厂商的大模型所驱动,而 Figma 正好处于这个风暴中心,从 2024 年到现在,它正在经历一场彻底的颠覆,从一个云端协作设计工具,蜕变为「产品创建操作系统」。

全文速览

image.png

转型的起点,源于 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%。

image.png

在这个伴随高速扩张、生态重塑与突发危机的动荡期,Figma 的核心管理层、内部开发者、一线设计师及庞大的社区生态纷纷发声。针对 AI 如何重塑设计流程、设计方法及产业未来,他们提出了大量极具颠覆性与前瞻性的见解。本报告系统梳理了 2024 年至 2026 年间 Figma 生态内部的言论、产品发布、工程博客及行业数据。我们将深入解析 AI 时代设计工作流的底层逻辑演变,并全面提炼 Figma 团队对整个设计产业未来的终极预测。

一、「软件大清算」与 AI 时代的设计哲学重构

面对 AI 浪潮,Figma 领导层并未采取传统的防御姿态。相反,他们主动拥抱破坏性创新,并从哲学与战略高度,重新定义了设计在现代软件工程生命周期中的核心坐标。

1.1、Dylan Field 的「软件大清算」

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 处理,而具备长久生命力的核心产品系统,将永远离不开人类设计师的打磨。

1.2、设计权力的去中心化与「产品感」的崛起

Figma 产品副总裁 Sho Kuwamoto 从组织架构的角度,剖析了 AI 的深远影响。Kuwamoto 断言:

「孤立设计师的时代已经结束,设计正在跨越专业壁垒,成为每个人的业务。」

AI 工具打破了职能孤岛。如今,产品经理、营销人员甚至后端开发者,都能利用 AI 工具进行早期的视觉探索。

image.png

在这场权力去中心化的变革中,Kuwamoto 认为设计师的战略价值发生了转移:从「把东西做对」(偏重执行),转向了「做正确的东西」(偏重战略方向的把控) 。他特别强调要培养「产品感」。这是一种根植于深刻理解用户痛点、从而解决问题的能力 。在 Figma 内部,团队通过高强度的「吃狗粮」(Dogfooding,即重度使用自家开发的产品)来不断磨砺产品感。这确保了他们在极高速度的 AI 迭代中,依然能与用户保持共情 。

1.3、AI 动态博弈:「抬高设计天花板」与「降低设计门槛」

image.png

Figma 设计副总裁 Noah Levin 将 AI 对设计行业的冲击,提炼为一个双向动态模型。他认为,AI 同时在「抬高天花板」和「降低门槛」 。

抬高天花板与「更好的设计」:AI 打破了传统工具在复杂计算上的桎梏。这使得顶尖专业设计师能够放手探索以往因成本过高而望而却步的复杂系统与动态交互 。

降低门槛与「脆弱的设计」:AI 让未经严格训练的普通人也能迅速生成 UI 。然而,业界资深专家 Buzz Usborne 结合最新的交互研究发出了警告:「完全依赖自然语言生成界面,往往会导致脆弱的设计。」 绝大多数普通用户并不具备高超的「提示词能力」以及掌控力。

image.png

这也意味着未来的设计工具必须做出改变,不能再仅仅提供一个空白的输入框,而是要转向提供结构化的语境建议和约束条件。

二、 工作流的彻底颠覆:「从画布到代码」再到「代码即画布」

2024 至 2026 年间,Figma 最大的技术突破在于彻底终结了陈旧的「线性设计交付」模式。过去,设计师在画板上绘制静态的 UI 界面,然后丢给前端开发。这个过程往往伴随着设计语境的丢失和妥协。而现在,以 MCP 协议为核心的双向工作流彻底颠覆了这一切。

2.1、MCP 引发的设计变革

在 Schema 2025 大会上,Figma 宣布其 MCP 服务器正式全面可用,Figma 将内部复杂的画布结构彻底开放。这包括组件库、设计令牌(Design Tokens)、变量层级,甚至是自动布局逻辑,这些结构被全部暴露给 Claude Code、Cursor 等智能体编程平台。

image.png

这意味着,当用户向 AI 下达开发指令时,AI 不再基于互联网数据胡乱猜测。相反,它会严格遵守企业的专属设计规范来输出代码。业界资深人士 Tommy Geoco 对此给出了极高评价,称这种结合了 Figma MCP 与 Claude Code 的底层基建,是目前「唯一能在生产环境中使用的 AI 工作流」 。

image.png

当然,2026 年此刻,Figma 早就不是唯一的选择了。

2.2、「Code to Canvas」:AI 设计开发闭环确定

image.png

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. 视觉探索与决策:设计团队无需触碰任何代码,就能直接在这些由代码逆向生成的真实界面上进行批注,并对比各种极端状态。

image.png

这种全新的「状态评审」(State Review)的工作方式,将会彻底取代了传统的「设计评审」。值得注意的是,根据 2026 年初的独立测试数据显示,AI 从设计图到代码的「还原度」目前普遍徘徊在 65% 到 80% 之间 。这也印证了业内的精准评价:

「代码负责收敛逻辑,画布负责发散探索。在生成 UI 变得轻而易举的世界里,核心工作已经发生了转移——我们需要在无限的可能性空间中,去决定究竟应该交付哪一个版本。」

三、 Figma 的进化与 AI 的重构

在继续审视 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 的繁琐操作。

image.png

3.1、争议与反思:Apple Weather App 事件

2024 年 7 月,Figma 发布了早期的「Make Designs」 AI 工具。由于引入了未经严格人工审查的第三方组件库,当用户输入「天气应用」时,系统直接生成了一个与苹果 iOS 原生天气应用近乎一模一样的界面 。此事件瞬间引爆了关于 AI 抄袭和数据伦理的巨大风暴 。

image.png

CEO Dylan Field 亲自出面澄清,强调模型并未在用户的私有文件上进行训练,并果断将该功能下线回炉重造 。这一惨痛的教训让 Figma 深刻意识到:泛用型的 AI 生成工具暗藏巨大的法律风险。AI 必须与企业自身的设计系统进行深度绑定。

3.2、Schema 2025:迈向「智能体设计系统」

在 2025 年的 Schema 设计系统大会上,Figma 的核心议题迎来了全面升维:重点探讨「如何为人工智能构建基础设施」 。会上,Figma 正式宣布了「智能体设计系统」的一系列底层基建更新:

  • 扩展集合 (Extended Collections):允许架构师发布白标基础版本。子品牌则能在其基础上自由扩展自定义变量,同时还能自动接收来自母系统的底层更新 。
  • 插槽原生支持 (Native Slots):设计师可以在组件内部精准定义「插槽」区域,并严格约束允许放置的实例类型。这大幅提升了组件库的模块化程度,同时保障了 AI 生成内容的合规性 。
  • 检查设计 (Check Designs Linter):该功能利用机器学习智能扫描画布元素。它能自动识别硬编码的色值,并建议替换为相匹配的变量 (Token) 。

3.3、系统哲学与问责制的变化

在这次大会当中,系统设计专家 Cristian Morales Achiardi 分享过一个发人深省的案例。

他敏锐地察觉到警告色的对比度存在异常这件事情。在传统流程中,这往往会导致部门间互相推诿,或是开发者干脆写死色值。但在智能体生态中,开发者调用了「Token 审计智能体」(Token-auditor skill)来排查链路。最终,系统精准追溯到了源头:正是 Cristian 本人在底层定义的原始色阶出了错 。

Cristian 为此感慨道:

「开发者对系统产生了绝对信任。当错误发生时,环境机制能够精确追溯到决策层。」

在这套体系中,设计系统架构师扮演了「法律制定者」的角色。正如一位负责人发出的严重警告:

「如果开发者利用 AI 将产出效率提升了 3 到 4 倍,而你只是盲目增加开发者,那么你扩张的根本不是产出,而是技术债务。因为设计决策、实施审查、质量保证这些外围支撑,必将成为致命的瓶颈。」

四、2026 年职场角色的残酷洗牌

2026 年初,Figma 发布了重量级的《State of the Designer 2026》报告。该报告对全球逾 900 名专业设计师进行了深度调研,勾勒出了一幅机遇与危机并存的产业图景。

4.1、效率的狂欢与创作危机

数据呈现出压倒性的拥抱姿态:72% 的设计师正在使用生成式 AI,其中 98% 的人增加了使用频率。

在拥抱 AI 的群体中,91% 认为工作质量得到了提升,89% 认为工作速度明显加快,80% 认为协作得到了增强 。

更关键的数据在于:积极使用 AI 的设计师,其工作满意度比拒绝使用 AI 的同行高出了 25%。反之,在 AI 使用量停滞的群体中,有 40% 的人觉得自己的工作变得更糟 。

image.png

然而,认知的巨大裂谷依然存在。当被问及「AI 是否实质性地改善了最终产品质量」时,68% 的开发人员表示肯定,但只有 40% 的设计师认同 。Figma 尖锐地指出了设计师「手艺危机」的存在:由于互联网上高达 81% 的主页存在低对比度等体验缺陷,依赖这些海量平庸数据训练出的 AI,在自动化生成中必然会延续这种系统性的偏差与缺陷 。

在这个充满不确定性的变革期,结构感成了定心丸:高达 91% 的设计师坦言,「清晰的目标和期望」能帮助他们更好地完成工作 。此外,87% 的设计师表示拥有「决策权」能够显著提升他们的表现。这证明了一个观点:

「精确的设计愿景,才是区分专业设计师与随便使用 Figma 的产品经理的关键。」

4.2、中产空心化与新角色的崛起

报告揭示了一个残酷的真相:目前 Figma 中 60% 的新文件是由非设计师创建的 。纯 UI 岗位的生存空间受到了严重挤压。行业内催生出了两种新型职业路径:

  • 设计工程师 (Design Engineer):他们将 50% 的时间投入在 Figma 中制定系统规范,另外 50% 的时间则使用 Claude Code / Cursor 构建和测试真实的 React 组件 。他们兼具前端框架认知与 API 评估能力,是跨越设计与开发鸿沟的坚实桥梁 。
  • AI 产品经理 (AI Product Manager):他们不再纠结于像素细节。其核心职责是将商业意图拆解为 AI 可执行的逻辑模块,并定义数据流向与交互规则 。

image.png

对此,Wert & Co. 首席执行官 Daniel Wert 警告各大企业:

「不要陷入寻找全能创始设计师(Founding Designer Unicorn)的陷阱,而应利用魔球理论(Moneyball approach)来建立多元化团队。」

他同时指出,大幅削减初级人才招聘,正在严重损害行业的长远建设 。

五、 Figma 团队对未来的三大宏观预测

预测1:对「设计产品」本身的预测——全领域覆盖的设计工具

设计工具将不再是一个绘图的画布,以 MCP 为代表的通信协议将成为底层标配,设计工具将全面演变为「双向连通的沙盒」,它既能向下直接生成生产级代码,更能向上解析和渲染实时运行的复杂代码架构 。平台将无缝集成战略规划、开发框架与下游 CMS,最终实现「全领域互联」的目标 。

预测2:对「设计产业」格局的预测——基于 Agent 的系统性治理

随着 2026 年 4 月 Google Stitch 走向免费,基础 UI 生成的边际成本已彻底归零。当绝大多数数字资产都由非技术人员通过提示词快速生成时,产业对「中介型」执行劳动的需求将彻底枯竭。设计组织的核心任务将发生不可逆转的转移,转向「质量控制与支撑层」。未来,企业需要构建严密的「智能体设计系统」,以类似于立法与司法机构的方式,来确保海量 AI 产物的合规性与品牌独特性 。

预测3:对「设计本身」的终极预测——品味成为护城河,「设计即代码」

「设计即代码」时代已全面降临。当你能在画布上直接渲染/编辑 React 代码的框架时,「设计」这一动作本身就是在进行系统架构决策。当技术手段变得无限充裕且极度廉价时,方向性决策就会变得最为昂贵。正如 Dylan Field 所言:

「AI 算法可以穷尽千万种视觉组合,但无法体会痛楚,也无法理解人类微妙的文化共鸣。」

因此,人类对卓越技艺的极致追求,以及在纷繁复杂中懂得取舍的高级「品味」,将成为永远无法被算法计算出的终极护城河。

 

转载自优设网

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:实战案例!拆解同花顺自选模块的体验优化设计思路

清阳 交互设计及用户体验

一、前言

兰亭妙微ui设计公司分享:真实 C 端产品改版实战,本次优化对象是国内头部证券 App—— 同花顺核心高频使用模块:自选板块。 文末附全文逻辑速览图,方便快速梳理整体设计脉络。

二、同花顺自选模块现状与用户底层需求拆解

image.png

自选是承载用户收藏个股、实时查看行情数据的核心页面,用户可自主创建分组收纳不同标的,覆盖 A 股、港股、美股等多市场股票。 收藏分组是互联网产品通用功能,短视频、电商、资讯 App 均有同类设计,但证券类产品的收藏逻辑和使用场景存在本质区别:

  1. 普通 App 收藏仅作内容归档,用户低频回访,核心诉求是 “事后查找内容”;
  2. 同花顺自选属于高频刚需功能,用户打开的核心目的不是找单只股票,而是批量监控一整组标的实时行情,页面本质是可横向滑动的数据表格,无需点进个股详情即可快速对比涨跌。

除此之外,分组本身对资深投资者具备极强决策价值: 多数股民习惯自建自定义分组替代官方行业板块,按照科技、有色、消费、化工等赛道划分,分组会自动计算组内个股平均涨跌幅,用来判断整体板块行情。 官方自带板块个股繁杂、标的关联度低,无法贴合个人交易逻辑,自定义分组是短线、波段交易者的核心看盘工具。

基于高频交易场景,原版自选模块存在三大致命体验痛点,直接干扰看盘、选股效率:

痛点 1:分组切换操作成本极高

image.png

原有分组仅靠页面顶部窄标签栏承载,触控区域狭小、点击容错率低;分组数量多时横向滑动距离过长。即便打开侧边分组列表,展示空间有限,需要反复滚动才能定位目标分组,切换流程繁琐。

痛点 2:分组行情数据隐藏太深

分组平均涨跌幅是板块判断关键指标,但原版必须展开侧边栏才能查看;侧边栏弹出后会锁定页面,无法同步操作个股列表,打断连续看盘流程。

痛点 3:分组无层级管理能力,分类混乱

image.png

仅支持一级分组,不支持父级分类。以金属赛道举例,投资者需要拆分铜、铝、贵金属、稀有金属等细分赛道,单层列表会造成分组泛滥、杂乱无章。 用户只能手动添加标题 + 分割线勉强区分大类,属于治标不治本的补救方式,管理效率极低。

以上问题看似不多,但对短线高频交易者影响显著:频繁切换分组、查看板块数据会增加操作步骤,错失行情判断时机,直接影响交易决策。下文将围绕痛点,完整还原整套优化设计落地思路。

三、自选页面完整优化方案推演

(一)优化核心目标

image.png

结合用户刚需与现存缺陷,本次改版锁定三大核心目标:

  1. 重构分组展示形式,降低分组查找、切换成本;
  2. 分组行情数据默认外露,无需弹窗即可直观查看板块涨跌;
  3. 支持多级分组架构,实现大类 - 细分赛道分层管理。

在此基础上深挖股民深层诉求:看盘既要盯个股分时,也要同步追踪全赛道板块走势,页面承载的有效行情信息越多,越便于快速判断交易机会。 但移动端改版存在三大天然约束,需要在设计中平衡取舍:

  1. 手机屏幕尺寸有限,页面承载信息容量受限;
  2. 移动端触控交互远不如电脑端便捷,无法大幅增加操作步骤;
  3. 页面除分组模块外,还需保留个股行情、指标等基础字段,空间资源紧张。

明确约束与目标后,进入原型迭代推演,完整还原真实设计师方案打磨全过程:

版本 1:分组宫格卡片基础形态

image.png

先尝试两种主流宫格布局:3 列、4 列卡片排布,将每一个自定义分组转化为独立可视化卡片。 基础交互逻辑:点击分组卡片,页面下方弹出局部滚动区域展示个股列表,板块卡片区与个股列表区分上下两层,均可独立滚动;支持新增分组、添加分类标题、折叠 / 编辑分组栏。

image.png

版本 2:优化滚动误触,重构个股展开逻辑

image.png

初代分层滚动结构极易发生上下滑动误触,因此调整交互逻辑:点击分组卡片后,下方铺满全屏个股列表;顶部保留同级分组卡片栏,支持左右横向滑动切换其他分组;再次点击卡片即可收起列表,回到全分组宫格视图,规避多层滚动冲突。

版本 3:差异化卡片尺寸,强化行情信息展示

image.png

纯统一尺寸卡片视觉单调,信息承载不足,新增大尺寸 2×2 行情卡片,卡片内直接展示分组走势折线图,一眼看懂板块近期趋势。 3 列布局无法兼容大尺寸卡片并排展示,因此最终选定 4 列宫格方案:

  • 4 列布局容纳更多分组卡片,适配手机竖屏空间;
  • 支持自由缩放卡片大小,逻辑接近手机桌面小组件,兼顾极简浏览与深度行情查看。

版本 4:完善编辑、自定义交互体系

image.png

宫格布局参考系统桌面交互逻辑,补充批量管理能力:

  1. 长按卡片进入编辑模式,支持多选批量删除、重命名分组;
  2. 长按拖拽自由调整卡片排序,自定义分组展示优先级;
  3. 开放卡片自定义配置:可自主选择展示组内领涨股、涨跌数值、分时 K 线等信息,适配短线、长线不同用户需求。

版本 5:沉浸式看盘模式 + 大屏设备适配

image.png

  1. 全屏专注模式:一键隐藏顶部标题栏、底部全局导航栏,清除页面冗余元素,打造无干扰看盘界面;
  2. 折叠屏 / 平板宽屏适配:利用横向大屏优势,常态展示更多分组卡片;点击分组后,页面左右分栏,左侧分组宫格、右侧个股列表,无需来回切换页面,大幅提升多板块对比效率。

至此整套优化方案框架搭建完成,还可延伸更多细节迭代,重点平衡普通散户与专业短线交易者的使用差异,设计师可结合自身理解补充细化。

四、设计复盘:改版背后的产品与设计思维

本次自选模块优化不只是视觉、交互微调,是完整的产品功能重构流程。 成熟团队中 UI/UX 设计师的核心价值,不是单纯落地产品给出的需求,而是主动挖掘用户隐性痛点,产出完整、大胆、可落地的解决方案,补足产品视角的盲区;方案能否最终上线落地,取决于设计评审中能否完整论证价值、说服团队。

五、结尾感悟

产品改版是锻炼产品思维、用户体验分析能力最好的方式:日常使用 App 时,把所有别扭、低效的设计拿出来自主推演优化方案,长期积累能快速建立完整的设计思考框架,这套完整的推导逻辑,是 AI 无法替代的设计师核心竞争力。

下篇内容再见~

 

 

转载:优设

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微ui设计公司分享:旅行Widget怎么设计?Trip Widget全流程体验设计实践

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:Widget 是一个被全球生态验证了二十多年的成熟载体,却在旅行场景中一直“存在感不足”。这背后,不是技术或载体本身的问题,而是我们对旅行体验的理解还未真正延伸到桌面这一层。

本次分享以 Trip Widget 的设计实践为例,聊聊如何以 Widget 为智能载体,把“行前—行中—行后”的完整旅程整合进一个桌面组件,让服务真正适应场景,而不是让用户去管理碎片。

01.旅行类 Widget 使用率为何偏低?

1) Widget 作为成熟载体的现状

Widget 已有二十多年发展历史。

1998 年诞生于桌面端,2008 年进入移动端,覆盖海量设备。

2020 年 iOS 14 将 Widget 提升为系统级核心功能,相关数据显示,iOS 14 后 Widget 使用显著增长。

作为信息触达载体,Widget 的价值已经被反复验证——它可以让信息更主动、更及时地触达用户。

2) 在旅行场景中的“错配”

尽管如此,在旅行场景下,Widget 的实际使用却远不如预期,我们看到两层问题:

  1. 市场认知缺位:部分主流 OTA 尚未系统化提供 Widget 能力,或仅覆盖单端。用户缺乏对“旅行类桌面组件”的清晰认知和使用习惯。
  2. 现有方案与旅行需求的结构性错配:许多 Widget 仍停留在“功能单一、信息静态”的形态,更像一块“会更新的壁纸”。部分方案按行前、行中、行后拆分成多个独立组件,用户需要为不同环节反复添加和管理多个 Widget,导致体验被割裂。

而旅行本质上是一个多场景、连续动态的体验流程:从灵感激发 → 行程规划 → 出行途中 → 目的地体验 → 行后总结。当前“单一功能、场景割裂”的 Widget,与“多场景、动态演进”的旅行需求存在根本性错配。

02.让 Widget 真正“理解旅程”

1) 设计问题的提出

依托一站式旅行生态,我们提出了一个核心问题:

能否以 Widget 为智能载体,深度整合生态能力,让它主动感知并响应动态旅程中的每一个场景?

换句话说:

能否打造一个真正理解用户旅行状态的 Widget,而不是一个只会展示静态信息的组件?

2) 设计答案: Trip Widget — 你的一站式随身旅行伙伴

它具备以下特征:

  • 根据用户的旅行状态主动感知并切换模式。
  • 在不同阶段整合展示最关键的信息与功能。
  • 将“桌面组件”进化为“持续陪伴旅行流程的场景化服务入口”。

下面,我们用四个典型场景来说明这一范式转变。

03.场景拆解:从灵感到工具的全流程陪伴

场景一:行前没有规划 —— 灵感激发模式

用户状态

  • 时间:慵懒的周日下午。
  • 心理:想去旅行,但还没有确定目的地和方案。
  • 核心问题:“上哪儿能找到优惠又靠谱的旅行灵感?”

Widget 行为

  • 主动切换为「灵感激发模式」。
  • 展示精选特价机票与热门目的地。
  • 通过 TG 智能推荐,提供个性化旅行灵感(例如“周末短途”“亲子友好”“海岛度假”等)。

体验变化

  • 用户不需要主动打开 App、搜索和筛选。
  • 在桌面即可获得可能的旅行方案,实现从“自己找”到“被推荐到”的转变。

场景二:已有行程 —— 行程规划助手模式

用户状态

  • 已经预订了前往某城市的机票。
  • 核心问题:“还需要预订哪些项目?那里有什么值得体验的乐趣?”

Widget 行为

  • 自动切换为「行程规划助手模式」。
  • 提供接送机、租车等周边产品的快捷预订入口。
  • 展示目的地热门景点等入口,帮助用户发现地道体验。
  • 通过 TG 专业指导,给出必游景点的个性化推荐。

体验变化

  • Widget 不再只是信息展示,而是行程规划的关键入口之一。
  • 用户在桌面即可完成行程的补全与深化,减少频繁切 App 的负担。

场景三:赶飞机途中 —— 出行掌控模式

用户状态

  • 正在乘车匆忙赶往机场。
  • 核心问题:“我的航班号是多少?该去哪个登机口?会不会延误?”

Widget 行为

  • 进入「出行掌控模式」。
  • 实时展示航班时间、登机口信息与状态(值机、登机、延误等)。
  • 提供一键查看后续行程的入口,高效管理当日行程。

体验变化

  • 用户无需打开 App 深层页面查找信息。
  • 在桌面就可以完成航班确认与行程检查,显著降低出行焦虑。

场景四:目的地餐厅 —— 即时工具助手模式

用户状态

  • 坐在异国餐厅,面对一份看不懂的菜单。
  • 核心问题:“这道菜是什么?这瓶酒大概要花多少钱?我会不会点错?”

Widget 行为

  • 切换为「即时工具助手模式」。
  • 提供菜单翻译与菜品介绍,帮助跨越语言障碍。
  • 提供实时汇率换算,辅助价格判断和决策。
  • 通过 AI 智能推荐当日人气餐厅,引导用户发现更地道的选择。

体验变化

  • 用户从“临时抱佛脚查资料”变为“随时有工具在身边”。
  • 桌面组件成为真正的场景工具,而不仅是静态信息面板。

04.设计方法沉淀:从功能堆叠到场景范式

1) 以“旅行流程”为主轴重构结构

传统做法

  • 按功能点/场景拆分为多个独立组件,用户需要为不同环节反复添加和管理。
  • 导致体验割裂,信息分散,缺少贯穿旅程的整体感知。

我们的做法

  • 以旅行全流程为主轴进行重构:行前:灵感激发 → 行程规划。行中:出行掌控 → 即时工具。行后:总结与分享(作为未来扩展方向)。
  • Widget 通过场景识别和状态切换,将这些环节整合进同一个体验框架。

用户感知的是“一个能跟着旅程变化的桌面伙伴”,而不是多个分散的功能入口。

2) 场景化的 Modern Design 视觉语言

在有限的 Widget 空间内,我们为不同场景设计了差异化视觉策略:

1)行程场景:信息优先

强化时间、航班号、登机口等关键数据的可读性。使用清晰的层级和对比,减少装饰性元素,以效率优先。

2)AI 场景:智能感

沿用TripGenie 的品牌色彩与视觉语言,让 Widget 在桌面上与站内智能助手保持一致的识别度。

3) 信息聚焦:每个场景只保留最关键的 3–5 个信息点

挑战

Widget 空间极为有限,容易成为“信息堆砌”的重灾区。

策略

  • 针对每个场景,我们先梳理用户任务,再反推最关键的信息点。
  • 以“完成任务必须看懂的内容”为标准,控制在 3–5 个核心信息。
  • 其他信息通过“进入详情页”等延伸交互承载。

4) 交互创新:内部场景的无缝切换

目标

希望一个组件就能承载旅程内的多重需求。

具体实践

  • 在同一个 Widget 中,通过点击等轻量交互实现模式切换。
  • 保持操作成本极低,同时提高用户对“Widget 会主动变化”的心理预期。

05.用户反馈

上线后,用户行为给出了清晰的肯定:

  • Widget 日均曝光显著提升。
  • 周留存率保持在较高水平,证明用户愿意长期保留并使用 Widget。
  • 每日为站内带来可观的活跃访问量,成为有效的站内流量入口。
  • Widget 用户的站内复访率明显高于整体大盘用户,呈现出更高的粘性。

最后,用一句话总结这次实践:

我们完成了一次从「让用户管理碎片」到「让服务适应场景」的范式转变。

  • 不再把复杂性留给用户,让他们在多个 App、多个页面、多个组件之间反复切换。
  • 而是让服务主动理解旅程,在合适的场景、合适的时机,把关键信息与功能送到用户面前。

这正是我们希望交付的新旅行体验范式,也是 Trip Widget 未来持续演进的方向。

 

转载:优设

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

用了3年AI,终于知道怎么去掉AI味!

之晨 行业趋势

 

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

一、全文速览图

image.png如果你用AI生成的图有一股AI味,那今天你有福了,我来给大家介绍几个方法,去掉你图片的AI感。

二、质感太平

很多同学用AI生的图,质感过于平,尤其是白色,比如下面这个晴天娃娃的创意形象,白色就非常平:

image.png

主要原因就是缺少暗部重色,这个时候你只需要和AI说,加强质感,加重暗部:

image.png

然后你就可以得到一个质感饱满的效果

image.png你可以对比下效果:

image.png

一下子就从一个纸片变成了饱满的立体效果!

三、颜色泛黄

有时候用AI生出来的图泛黄,导致AI感特别重,比如一片叶子:

image.png

这时候我们可以给他加一点色彩平衡,然后把颜色往蓝色调整,黄绿就会变成蓝绿色:

image.png

这样质感就舒服很多。

还有AI生出来的白色,也容易泛黄,我们也可以加入蓝色,比如下面这个图标,绿色和白色都进行加入蓝色的处理:

image.png

质感就舒服很多!

四、暗部饱和度太浓烈

这一个点是最最最致命的,也是80%AI感的来源。

我们都知道,一个画面里有暗部和亮部,按照正常逻辑来讲,应该凸显亮部,弱化暗部,如果暗部过于抢眼,那这个画面就会非常的扎眼、油腻。

比如下面这个杯子,很明显,他的杯子暗部饱和度就有点高:

image.png

如果你觉得没看出来,那你再仔细看下杯子的投影部分,那个地方饱和度就更加的高,整个视觉焦点都被投影的高饱和给吸引了:

image.png

所以这个时候,我们就需要去给暗部加入灰色,比如杯子的暗面,以及杯子的投影部分,使其暗部颜色没有那么浓烈,这样你再对比下:

image.png

是不是AI感就消失了很多!

我总结下来,造成AI感的三个主要点就是:平、黄、油!

  1. 平就是质感平,解决办法就是增加重色,增强质感。
  2. 黄就是颜色泛黄,解决办法就是增加蓝色,对冲黄色。
  3. 油就是暗部饱和度过高,解决办法就是在暗部颜色中增加灰色,弱化暗部颜色的抢眼程度!

 

转载自优设网

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

大厂出品!四大章节帮你掌握网页版式设计

之晨 网站设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

前言

当我们设计网页面对 G/B 端的用户时,经常我们不知道该如何设计,没有设计思路。首先我们要了解网页设计排版布局,以及了解当前的设计流行趋势和风格,如何让客户眼前一亮,需要设计师深入客户沟通需求,并发掘客户想要的网页版式,接下来我们就一起探讨下,我们首先需要考虑的就是合理的布局框架,为将来高效、精准的表达和流畅的体验做好基础。

image.png

一、版式布局结构

在浏览器空间里,按着一定的视觉表达内容的需要和审美的规律,结合各种平面设计的具体特点,将信息内容和页面视觉元素加以组合编排,就是网页排版了。如果对平面设计来说,长宽比例是固定的。那么对网页设计来说,则没有所谓固定的长宽比例,设计者可以自行确定作品的尺寸,可以根据页面的需求来设计排版,整个网页设计还是比较自由,开放的。

1. 栏式结构

根据信息的需求,网页排版主要划分为两种基础结构,一种是栏式结构,另一种是区域结构。
在网页设计中,栏式结构是一种常见的页面布局方式,它主要通过竖分的方式将页面信息分成几列,以适应不同内容和功能的需求。以下是关于网页设计中栏式结构的详细解释:

① 栏式结构的分类

二栏式:页面被分为两列,通常左边为主内容区,右边为辅助内容区或广告位。这种结构简洁明了,适用于信息较少或需要突出主要内容的页面。

三栏式:页面被分为三列,中间通常为主内容区,宽度较大,用于展示主要信息;左右两侧为辅助内容区或导航栏,宽度较窄。三栏式布局能容纳更多的内容,提高信息的密集度,常用于信息量大、更新速度快的网站。在这种布局中,用户默认中间为重点信息,两边的内容为次要信息或广告。

四栏式及五栏式:虽然这两种布局方式在某些特定场景下也会被使用,但相对较少见。因为过多的分栏会使页面显得拥挤,不利于用户浏览和获取信息。

通栏(即不分栏):页面不进行分栏处理,整个页面作为信息的展示区。这种布局方式适用于需要展示大量文字或图片的场景,如文章正文页面、用户注册页面等。

image.png

三栏式大气,常用于信息量大,更新速度快的网站,给人感觉开阔、有气势。根据信息量的变化,内页还可以采用两栏或者通栏的形式。所以不存在全页都是三栏的样式,设计师可以根据内容进行调整排版。三栏是最常见的分栏,除此之外,现在比较多的两栏和四栏也非常多见。设计的时候可以根据页面宽度,以及内容来改变栏数。

宽、窄栏与信息的关系

对于分栏结构,如果采取分栏宽的方式,也只能产生几种情况。假设栏宽不同,有了宽栏与窄栏,改变宽栏的位置,将生成多种不同组合,页面就更加灵活多变。

image.png

对浏览者来说,当均分栏宽时,二栏式的左右两栏信息的重要程度是一样的。而对三分栏来说,中栏可以第一时间吸引浏览者的视线,换句话说,其内的信息是最重要的(用蓝色标注);其次人们会注意到左栏(次重要用黄色标注),最后才是右栏(红色区域是相对最不引人注意的,或者代表视线最后一个到达的区域 )。这样一来,重要信息则要放在蓝色区域里,其次是黄色的区域,最后是红色区域。

我们还发现,从某种程度上来说,宽栏比窄栏更容易吸引浏览者的注意,居中的位置比旁边的位置要好一些。此外,每个人的生活习惯、文化阅历等不尽相同,对一部分人来说,有时候视线会先到红色区域,再转到黄色区域,而有时则正相反。

栏中栏

信息情况多变,页面结构就会跟着产生变化。必要时,单栏需要再次进行划分,得到的结果就是栏中栏。

image.png

划分的方式不仅有竖向的,还有横向的。观察分割前后,区域之间的视线流动方式可以帮们判断如何排版信息。越靠上的信息区,越先进入浏览者的视野。并且对三分栏来说,中栏和左栏上部信息区同等重要。当二分栏的宽栏被竖向划分出四部分时,页面结构变得繁琐了,气质也会被改变。栏中栏可使页面格局产生很大的变化,使其个性鲜明的同时,也使一部分页面格局失去了原分栏结构的特征。如图例中的第 3 排,信息被分成一块一块,格局精致了、但页面看起来重像是区域结构,使原本“大气”的气质不存在了。

页长与栏底

分栏线是否一通到底与表现栏式结构的特征关系紧密。分栏特征会随着分线是否直通到页面底部而产生变化。直通到底部,所形成的分栏数,其页面就带有这种分栏结构的最大特征。另外,如果页面长度在一屏内(不需要滚动条的情况),即使采用分栏结构,特征也不会明显,因为页面短,信息量少,分栏结构的“大气”无法很好地传达出来。

image.png

② 栏式结构的特点

清晰明了:栏式结构通过明确的分栏处理,使页面信息更加清晰明了,便于用户快速定位所需内容。

灵活多变:根据页面内容和功能需求的不同,可以选择不同数量的分栏,实现灵活多变的页面布局。

提高信息密度:通过增加分栏数量,可以在有限的页面空间内展示更多的内容,提高信息的密集度。

易于阅读:合理的分栏处理可以使页面内容更加易于阅读和理解,提高用户的阅读体验。

image.png

③ 栏式结构的应用场景

信息量大、更新速度快的网站:如新闻网站、博客类网站等,可以通过三栏式布局展示更多的文章标题和摘要,提高信息的密集度和更新速度。产品展示类网站:通过二栏式或三栏式布局展示产品图片、介绍和购买按钮等信息,方便用户浏览和购买产品。文章正文页面:通栏布局适用于文章正文页面,可以展示整篇文章的内容,同时避免分栏导致的阅读中断。

总之,在网页设计中,栏式结构是一种重要的页面布局方式,它可以根据页面内容和功能需求的不同选择不同的分栏数量和布局方式,实现清晰明了、灵活多变、提高信息密度和易于阅读的页面效果。

2. 区域结构

由于信息的多变性,栏式结构无法满足我们的所有需求。于是从栏式结构的横向分割,逐渐化出了区域排版结构。

① 分栏结构与区域结构

正因为我们无法满足于栏式结构的信息排版和页面设计,才衍生出区域排版结构。如果说分栏是把页面竖向划分,那么区域就是在此基础上把页面横向分割。一般来说,采用区域排版的页面都非常精美。这是因为区域结构可以有效的编排信息内容,使信息布局时而疏松,时而收紧。美化用的插图还可以与结构完美融合,给设计师提供自由度颇大的创作空间。

② 区域结构的特点

灵活性:区域结构允许设计师根据需要自由分割页面,可以适应不同内容的需求。

信息编排:区域结构可以有效地编排信息内容,使信息布局时而疏松、时而收紧,以适应不同信息的重要性和优先级。

创意性:区域结构为设计师提供了更多的创意空间,可以创造出更具吸引力和个性的网页设计。

③ 响应式设计

适应不同设备:区域结构应能够适应不同设备和屏幕尺寸,确保页面布局在不同设备上都能完美呈现。

可触摸友好:在移动设备上,按钮和链接的大小应适中,方便用户触摸操作。

image.png

二、网页版式设计和风格

栏式结构与区域结构具有一定的普遍性和实用性,可以放置一定量的信息内容,并符合网站网页形式的信息格局要求。两种格局所形成的网站风格气质也具有一定的独立性应用起来各有特色。现今的大部分网站框架都是由这两种基础结构演化而来的,结合两种格局的优点,可以使页面既保留栏式结构的大气,又保有区域结构的精美,这样的网站更能适应信息形式的变化和人们审美的追求。除此以外,网页平面还继承了来自平面印刷品(平面广告、报纸、书籍装帧)的某些排版特征。在网络上,有相当一部分页面排版借鉴了平面设计的优点,并摆脱了信息格局的框架式束缚,加上动态效果等网站形象可具有非常独特风情的气质与趣味性。

我们在设计网页的时候可以遵循以下设计原则,创作出既美观又实用的版式设计作品,有效传达信息并提升读者的阅读体验。

image.png

对齐原则:

版面中各个元素应对齐,包括文字、图片和其他设计元素。

常见的对齐方式有左对齐、居中对齐、右对齐和两端对齐。

对齐可以增强版面的整洁感和美观度,同时便于读者快速准确地获取信息。

色彩原则:

色彩搭配是版式设计中至关重要的一环。

选择色彩时需要考虑色彩的明度、饱和度、色调以及色彩的搭配协调性。

合理的色彩搭配能够增强版面的吸引力和读者的阅读体验。

间距原则:

指的是版面中各个元素之间的间隔和距离,包括行距、字距、段间距及元素与边框的距离等。

合理的间距设置能够提升版面的舒适性和美观度,有助于读者的阅读和理解。

留白原则:

在版面中留出一定的空白区域,使版面呈现空灵、清新的视觉效果。

留白可以提供更好的呼吸空间和视觉平衡,使读者更容易阅读和理解信息。

简洁性原则:

版式设计应尽量精简,避免过多的修饰和冗余元素。

简洁的设计能够使信息更加清晰明了,防止混乱和干扰。

统一性原则:

版式设计中的元素应具有统一性和特定的风格。

这有助于形成一个整体的视觉效果,增强设计的一致性和连贯性。

重点突出原则:

通过合理使用颜色、大小、形状和位置等元素来突出版式中的关键信息和重要内容。

这有助于引导读者的注意力并快速传达核心信息。

在设计网页版式的同时,我们还需要重点关注网站设计的流行趋势,设计风格等,这样才能抓住用户想要的。近些年,AI 技术的广泛运用,也让我们关注点发生了变化,主要有以下这些风格:

1. AI 辅助网页设计

2023 年,人工智能彻底改变了设计行业。AI 生成的图像开始被运用在网页设计中,为设计师提供设计灵感,这有效提升了设计师的工作效率。此外,设计师还可借助 AI 为网页界面的文案进行润色,让设计呈现更好。利用 AI 提供的功能,从网页设计的灵感查找到设计到最终验收阶段为网页设计师提供辅助,为设计师节省了大量时间。毫无疑问,2024 年 AI 将被越来越多的应用在设计中,AI 辅助设计将成为 2024 年网页设计趋势之一。

image.png

2. 可访问性网页设计

在当今日益数字化的时代下,企业越来越追求更加酷炫与迷人的网页设计效果去吸引用户,这让网页的可访问性对于用户而言变得至关重要,促使其成为 2024 年值得关注的网页设计趋势之一。网站的可访问性包含多种功能,包括添加替代文本、响应式设计、网站的配色等。关注可访问性的网站,只需要以很小的努力就可对企业的业务产生巨大的影响。作为一名网页设计师,我们在进行网站设计时,必须要充分理解并实施可访问性的网页设计指南与趋势,确保网站具备足够良好的包容性,让所有人都能够从中获得好处。

image.png

3. 聊天机器人的应用

随着 chatgpt 等聊天机器人的兴起,无疑通过探索实施人工智能来提升网站的潜在优势以促进业务增长将成为 2024 年的重要网页设计趋势。通过聊天机器人的应用,网站能够更好的服务其用户的个性化需求,并提供更高的访问效率。比如使用 AI 生成大量通用的产品描述、生成文本,以增强网站的可访性。根据个人用户的独特偏好定制网站内容、结构和网页设计。让 AI 担任客服给用户提供更好的购物指导。

image.png

4. 分屏布局网页设计

我们可以在网上看到很多垂直分屏的网站布局设计,这种布局的设计趋势正在上升,将在 2024 年成为最值得关注的网页设计趋势之一。在网站设计中,分屏布局设计能够给人一种现代化的视觉感受且在创造力方面有很大的展现空间。通过这种分屏布局设计,设计师可以在同一页面分别呈现不同的内容或消息,让用户能够更快的获取自己想要的信息,节省用户的时间。此外,使用这种方法也可以有效地展示不对称设计和交互对象。

image.png

5. 深色模式网页设计

随着越来越多的网站开始展示他们对黑暗模式的看法,2024 年的网页设计师必须掌握如何进行深色设计模式。采用深色模式进行设计,不仅可以减弱光条件下的眼睛疲劳以提高网站的阅读效率,还可以赋予网站时尚现代的外观,给用户提供更好的视觉体验。此外,深色模式还有助于延长设备的电池续航时间,同时为用户提供愉快的夜间体验。

image.png

6. 鲜艳的色彩

近几年,鲜艳的色彩一直都很流行。2024 年,极端饱和的色彩仍将是设计师们争夺注意力并让他们的设计脱颖而出的战场。色彩丰富、对比强烈的设计,在网页中可以很容易吸引用户的眼球,让你的设计备受瞩目。

image.png

7. 长虹玻璃效果设计

长虹玻璃效果(Reeded glass effect)增强了设计的深度,以有趣的方式漫射光线,创造出吸引眼球的迷人效果。作为装饰艺术风格不可或缺的一部分,它近年来在室内设计中经历了非凡的复兴。此外,以令人兴奋和多样化的方式融入这一元素的图形设计也大幅增加。在网页设计中,使用这种效果进行图像模糊或作用文本,都能给用户留下深刻的印象.

image.png

8. 点阵屏网页设计

点字体正变得非常流行,Nothing 品牌就是一个很好的例子,它因其创意概念而走红。通过将现代简约设计中的单色圆点作用文本,可以在网页设计中很好的展现出未来主义以及复古的氛围,营造出一种新鲜的科技氛围。此外,使用带有圆点背景或类似半色调图像的设计,也正在成为一种排版网页设计趋势。

image.png

9. 抽象渐变网页设计

虽然使用渐变色彩进行网页设计已经成为流行趋势有一段时间了,但在 2024 年,渐变色彩的使用将更加抽象、有趣和艺术化。使用鲜艳的色彩或使用不经常组合的颜色进行设计,给用户一种超现实和陌生的感觉,会让你的网页设计看起来更加独特。但需要注意的是,整体的设计需要保证美感,让人赏心悦目。

image.png

10. 明显网格区域边界

在网页设计中,使用网格进行设计,可以让页面更有秩序并提高可读性。到 2024 年,使用明显网格区域边界的设计,将成为有趣的网页设计趋势之一。通过在网页中使用网格,可以让页面的层次结构更加易于理解,而在自由空间打破网格又可以使网页看起来更加具有创意。

image.png

三、设计策略

我们在设计 G 端网页的设计,除了了解版式布局以外,还需要关注多个方面,以确保其既满足功能性需求,又具备良好的用户体验。以下是一些关于 G 端网页设计的主要要点和设计策略,在设计 G 端网页时,要始终将用户需求放在首位,通过不断的测试和优化,确保网页既美观又实用。同时,关注行业动态和技术趋势,将新的设计理念和工具应用到网页设计中,以保持其竞争力和吸引力。

1. 明确目标用户与需求:

深入了解目标用户群体,包括他们的需求、行为模式、偏好等。根据用户需求确定网页的功能和特性。

2. 精湛的界面设计:

使用精选的颜色调色板、精美的排版和独特的图标,为网页带来高雅的外观。
创意元素是高端设计中必不可少的,可以考虑使用定制的插图、动画效果或独特的形状和图案。

3. 用户体验的极致追求:

确保网页在不同屏幕尺寸下都能呈现精美的设计和完整的内容,实现响应式设计。
从页面加载速度到导航的流畅性,都要精心考虑,确保用户能够轻松地浏览和交互。

4. 内容的精心挑选:

清晰、有深度的文字内容和高质量的图像可以增强网页的吸引力,并向用户传达专业性和价值。

使用高品质的摄影作品或独特的插图,让网页更具视觉冲击力和吸引力。

5. 导航的简洁与有序:

使用清晰的菜单和内部链接,确保用户能够流畅地浏览网页,轻松找到所需信息。

6. 品牌一致性的保持:

网页设计与品牌形象保持一致,使用品牌色彩、标志和字体,确保用户能够与品牌建立深刻的联系。

7. 交互设计的优化:

遵循费茨定律,优化按钮和界面元素的设计,确保用户能够快速、准确地完成操作。
应用席克定律,减少用户在执行任务时的选择,提高操作体验。

8. 利用 AI 助力设计:

利用人工智能工具提升设计效率,获取创意灵感。

使用 AI 生成的图像快速构建网页布局,对文案、色彩、字体进行优化调整。

9. 聊天机器人的整合:

考虑在网页中整合聊天机器人,提供定制化服务,改善用户与网页的互动方式。

10. 案例学习与借鉴:

参考高端网页设计案例,学习其布局、色彩搭配、交互设计等方面的优点,并尝试在自己的设计中应用。

在我们的项目中以下 2 点设计策略,尤为重要。

image.png

四、案例分析

参考一些排版布局页面,版式不再是简单的分割,更加有层次的设计感,重要的信息更加突出,让页面更加活泼轻松。

image.png

校园网站设计多稿设计方案的迭代中,学校网站已成为展示学校形象、提供教育服务的重要平台。一个良好的版式布局不仅能够提升用户体验,还能有效传达学校的教育理念和文化特色。采用重复、对称等构图技巧,使页面布局更加和谐统一

image.png

总结

网页版式设计和风格在网页设计中都是至关重要的元素,但它们的重要性因项目需求、目标受众和品牌特性等因素而异。无法简单地说哪一个更重要,因为它们通常是相互关联、相辅相成的。

网页版式设计的重要性:

  1. 清晰的信息传达:良好的版式设计能够使网页内容更加清晰、易于理解。通过合理的布局和排版,可以引导用户的视线,使用户能够快速找到所需信息。
  2. 提升用户体验:版式设计的目的是为用户提供良好的浏览体验。合理的布局和排版可以减轻用户的视觉负担,使用户在浏览网页时感到舒适和愉悦。
  3. 强化品牌形象:版式设计是品牌视觉识别系统的一部分,通过统一的版式设计可以强化品牌的形象,提升品牌的认知度和记忆度。

网页风格的重要性:

  1. 吸引用户注意力:独特的风格能够吸引用户的注意力,使用户对网页产生兴趣并愿意深入了解。
  2. 传递品牌情感:风格不仅仅是视觉上的表现,它还承载着品牌的情感和态度。通过合适的风格可以传递出品牌的价值观、文化理念和个性特征。
  3. 区分竞争对手:在竞争激烈的市场中,独特的风格可以帮助品牌从众多竞争对手中脱颖而出,形成独特的竞争优势。

综合考虑:

在实际设计中,网页版式设计和风格应该相互协调、相互补充。版式设计为网页提供清晰、合理的布局和排版,而风格则为网页赋予独特的个性和情感。一个成功的网页设计应该既能满足用户的信息需求,又能给用户带来愉悦的视觉体验,同时能够准确地传达品牌的价值观和形象。

因此,在网页设计中,我们应该根据项目的实际需求、目标受众和品牌特性等因素综合考虑网页版式设计和风格的重要性,并在设计中找到它们之间的平衡点。

 

转载自优设网

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档