首页

兰亭妙微ui设计公司分享:数据可视化系列—那些被你忽略的坐标轴设计细节

清阳 设计资源

兰亭妙微ui设计公司分享:坐标系是能够使每个数组在维度空间内找到映射关系的定位系统,更偏向数学/物理概念。在数据可视化中,最常用的坐标西分为笛卡尔坐标系和极坐标系,本文介绍的坐标轴设计主要也是围绕直角坐标系展开,enjoy~

什么是坐标轴

在说坐标轴之前先来介绍下什么是坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统,更偏向数学/物理概念。

维基百科对坐标系的定义是:对于一个n维系统,能够使每一个点和一组n个标量构成一一对应的系统,它可以用一个有序多元组表示一个点的位置。

数据可视化中,最常用的坐标系有两种:笛卡尔坐标系和极坐标系,均为二维坐标系。

  • 笛卡尔坐标系即直角坐标系,是由相互垂直的两条轴线构成。
  • 极坐标系由极点、极轴组成,坐标系内任何一个点都可以用极径和夹角(逆时针)表示。用到直角坐标系的常见图表有柱状图、折线图、面积图、条形图等。

下文介绍的坐标轴设计主要也是围绕直角坐标系展开,用到极坐标系的图表有饼图、圆环图、雷达图等。

数据可视化系列:那些被你忽略的坐标轴设计细节

坐标轴是坐标系的构成部分,是定义域轴和值域轴的统称。系的范围更大,而轴包含在系的概念里。由于可视化图表绘制的数据大部分都有一定的现实意义,因此我们可以根据坐标轴对应的变量是连续数据还是离散数据,将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。

数据可视化系列:那些被你忽略的坐标轴设计细节

坐标轴的构成要素

介绍坐标轴设计前,我们先将坐标轴拆分成“原子”要素,具体分为轴线、轴刻度、轴标签、轴标题/单位、网格线。

数据可视化系列:那些被你忽略的坐标轴设计细节

坐标轴易被忽视的设计细节

根据坐标轴的构成,分类讨论下每个构成要素容易被忽视的设计细节。

轴线一般只考虑是否显示,例如柱状图、折线图等,在有背景网格线的情况下,会隐藏y轴线,条形图则是隐藏x轴线,以达到信息降噪,突出视觉重点的目的。

轴刻度通常不显示,只有在肉眼无法定位到某个标签对应的数据点时,会显示刻度线,辅助用户定位,比如折线图,或抽样显示的柱状图。

网格线用于定位数据点的值域范围,跟随值域轴的位置单向显示,柱状图采用水平网格,条形图采用垂直网格。样式为虚实线的最多,斑马线由于感知过强,一般不用。

数据可视化系列:那些被你忽略的坐标轴设计细节

轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义,无需单独显示标题/单位,“如无必要,勿增实体”。

数据可视化系列:那些被你忽略的坐标轴设计细节

轴标签的设计就比较复杂,涉及到的细节点很多,而且对于定义域轴和值域轴上的标签和单位设计要考虑的细节点还有差异。下文将定义域轴和值域轴看成x轴和y轴,便于说明。

1. x轴标签设计

x轴标签的设计重点在显示规则上,不同的坐标轴类型有不同的处理方式。

1.1 连续轴/时间轴的标签显示

连续轴/时间轴,是由一组前后包含同等差值的等差数列组成,缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠,我们可以利用抽样显示的手段来避免这种情况。这里不推荐使用旋转,一方面从美观度上,旋转可能会破坏界面整体协调,另一方面,连续/时间轴非必须显示所有轴标签,抽样标签已经能满足用户对当前数组定义域的理解。

介绍一种常见的抽样方式:等分抽样。

当多个标签在x轴无法完全显示,优先保留首尾标签,其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数,能被1和其本身以外的数整除。如果间隔数为质数,就需要“-1”转成合数。

举个例子:11个标签,间隔数是10,能被2和5整除,即分成2等分和5等分。12个标签,间隔数是11,无法等分,需要在间隔数基础上再“-1”,转成合数10后再等分,此时最后一个标签显示在倒数第二个数据点上。

数据可视化系列:那些被你忽略的坐标轴设计细节

有人会问了,能被那么多数等分,到底该选哪个呢?这就要根据标签长度来定,选择能放下最多标签的等分值。由于连续轴/时间轴,一般是数值、日期、时间等,字符长度有限,即使抽样后也能保证显示出一定数量的标签。

等分抽样不太适用于表达某个时间周期内的走势折线图,因为最后一个标签不一定对应最后一个数据点。对于这类折线图,能清除表明起始时间和末尾时间相比显示更多时间标签重要性来的更高。设计上可以只显示首尾标签,或首尾+中间值。

数据可视化系列:那些被你忽略的坐标轴设计细节

1.2 分类轴的标签显示

分类轴是由几组离散数据组成,相互之间独立存在,无紧密逻辑关联。若采用抽样规则,隐藏一些标签,用户对图表认知就会有困难,违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转45度,若45度仍显示不下,继续旋转90度。如果90度还是放不下就要考虑结合图表交互或反转图表。

数据可视化系列:那些被你忽略的坐标轴设计细节

标签旋转方向也有讲究,因为人的视觉习惯是从左到右,从上到下,标签顺时针旋转45度更符合用户的浏览动线。

数据可视化系列:那些被你忽略的坐标轴设计细节

分类轴标签字段有长有短,长文本标签直接旋转不仅影响美观,而且也不利于用户阅读。如果数据量比较少只有2~4个,长文本标签更适合水平展示,显示不下省略即可;如果数据量比较多,就限定字符数后旋转。

数据可视化系列:那些被你忽略的坐标轴设计细节

2. y轴标签设计

y轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的,就写成固定宽度,节省图表计算量,提高渲染速度。

2.1 y轴标签数量

标签数量不建议过多,太多的标签必定导致横向网格线变多,造成元素冗余,干扰图形信息表达。根据7±2设计原则,y轴标签数量最多不超过这个范围。

数据可视化系列:那些被你忽略的坐标轴设计细节

2.2 y轴标签取值范围

y轴标签的取值范围决定了图形在整个绘图区域的显示高度。

折线图y轴标签取值一般保证图形约占绘图区域的2/3,以更有效的传达数据波动幅度,避免掩盖和夸大变化趋势。2/3即斐波那契数列第二位起,相邻两数之比,也是黄金分割最简单的计算方法。

数据可视化系列:那些被你忽略的坐标轴设计细节

柱状图的y轴标签取值应从0基线开始,以恰当反应数值。如果展示被截断的柱状图,可能会误导观众做出错误的判断。

数据可视化系列:那些被你忽略的坐标轴设计细节

2.3 y轴标签数据格式

y轴标签的数据格式在ant.vision写的比较详细,重复内容不在此说明,重点讲下一些特殊的设计细节。标签保留的小数位数保持统一,不要因为某些轴标签是整数值,就略去小数点。

数据可视化系列:那些被你忽略的坐标轴设计细节

正负向的y轴标签,由于负值带“-”符号,整个y轴看起来会有视觉偏差,特别是双轴图的右y轴更明显。这里建议正负向y轴给正值标签带上“+”,以达到视觉平衡的效果。

数据可视化系列:那些被你忽略的坐标轴设计细节

总结

写了那么多关于坐标轴的设计,你是不是恍然大悟,原来小小的坐标轴还有如此之多的细节。往常我们做图表设计,可能只是用网上自动生成的图表简单调整下,或者按照通用样式来设计。然而,通用样式虽然能表达数据意义,但也缺少了对图表细节的把控,失了精致优雅的感觉。

作为数据可视化设计的一小部分,就是这些设计细节,决定了图表最终的传达效果。

 

 

转载:人人都是产品经理

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

 

image.png

 

三方协作避坑:设计师、对接人、决策者如何杜绝无效沟通|兰亭妙微

涛涛 设计思维

做设计项目最消耗精力的从来不是绘图,而是多层信息传递带来的反复改稿。深耕政企 UI、可视化与品牌设计多年的兰亭妙微,经手数百套外包、全案定制项目后发现,绝大多数无限返工、工期延误,根源都卡在设计师、中间对接人、决策负责人三方沟通断层。信息层层转述出现偏差、各方诉求无法同步,最终导致方案反复推翻,大幅拉高双方时间成本。

告别平淡界面:仪式感交互设计如何打动用户|兰亭妙微实战解读

涛涛 设计思维

生活里的节日庆典、专属仪式,总能赋予普通时刻独特情绪;放到互联网产品设计中,仪式感同样是打造差异化体验、拉近用户距离的关键抓手。深耕政企系统、移动端 UI 与可视化设计多年的兰亭妙微发现,多数产品功能完整却缺少记忆点,根源便是忽略了情感化仪式设计。恰到好处的仪式感,能把冰冷操作转化为有温度的专属体验,也是设计师拉开方案差距的核心创意切入点。

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

涛涛 用户研究

不少刚入行的 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

日历

链接

个人资料

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

存档