附 Figma 官方文案节选：无论多少次被宣告 “消亡”，设计始终生生不息。它藏在帮你避免坐过站的地铁图里，藏在一目了然的菜单里，也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流，也不是可被替代的技术，它关乎体验、关乎感受，而非仅仅追求功能可用。设计屡遭唱衰，却一次次证明自身不可替代。官方链接：https://x.com/figma/status/2061101954034442293
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
商品卡片是一个广泛存在于电商产品中的组件，不管是狭义上的商品，还是广义上的所有可交易产品 (包括课程、服务、游戏等虚拟商品)，都需要商品卡片来承载它们的关键信息，以方便用户快速了解商品的核心属性。
常见的商品卡片有两种形式，也是电商 App 普遍使用的两个视图，即：网格视图和列表视图，卡片在这两种视图中有着不同的布局，其信息包含能力也有所差异。
1. 两种布局
如 Part.1 种所说，商品卡片通常有两种布局形式，分别是网格布局和列表布局。
①网格布局
网格布局可以使用瀑布流，图片的尺寸相对来说会更单一一些，因为需要严格控制卡片的错落程度，不至于过于杂乱。
当然，并不是只能做成瀑布流，完全对齐的网格布局也很常见，只需要严格限制图片和字段的高度，且为有高度差异的字段 (一般是标题) 留出空间即可。
②列表布局
列表布局通常也会保持所有图片尺寸一致，但文本区域需不需要与图片等高，得看具体项目中商品需要露出的信息多寡，像京东这种信息非常多的，文本区域就可以超出图片的高度范围。而如果信息量中等，那么等高是一种比较好的选择。
但如果信息比较少，强行把某一字段与图片底对齐的做法会导致组件内的间距比组件间的更大，从而影响亲密性识别。
这时候可以在两个商品之间加分割线。
2. 卡片样式
主要有三种样式，我称之为有全包、半包和开放式。
全包：有明确的卡片背景，将图片和文本全部包括在内部，比较不常见。
半包：图片部分会撑满卡片的边界，而文本依然在卡片内部，比较常见。值得注意的是如果卡片需要做圆角，图片朝内的两个角不需要给圆角。
开放式：没有明确的卡片背景，图+文本自成卡片区域，在设计上通常会让文本两侧较之图片稍微向内缩进一些距离，在让亲密性表现得更舒适。可以两侧缩进，也可以只缩进右侧。
3.卡片内容
不同类型的商品、不同需求的产品所需要表达的信息是不同的，但总结来说有以下这几类：
其中，图片、标题和价格，这三个是最基础的信息，几乎每个商品卡片都必不或缺。其余的信息则并不一定每个都要包含在内，不同的 App 会根据自己的展示需求挑选其中几类排布在卡片内。
信息展示的顺序、和权重对比，都会根据实际情况略作调整。例如一些国外的电商 App，会把价格的权重做得比标题更大。而对于网格布局和列表布局，所展示的信息尽可能保持一致。但因为网格视图不适合展示的过长，所以如果信息真的非常多，那么网格视图可以适当省略。例如小米有品是一个典型的例子，网格视图相比列表视图只少了商品规格表，因为这个字段实在不适合放在网格视图展示。
4. 不同的使用场景
之所以会把使用场景放在这里，是因为商品卡片的使用场景会影响它所展示的信息类型。举个例子，淘宝首页推荐内的商品卡片内所包含的信息，就比搜索出来的完整商品卡片少了一些。
这是因为推荐中的商品信息务求直击要害，其导购需求远远强于展示需求，同时也考虑到推荐页应同屏展示更多商品，所以会把其他可能会影响用户获取核心信息，且可能造成卡片过长的字段全部隐去了。
同理，商品卡片在购物车中的信息也不一样，考虑到存在于购物车中的商品都是用户已经了解过大部份信息的商品，所以设计时要抓住用户在这种场景下最关注的内容——价格和规格，所以购物车中的卡片会多出一些价格变动、规格重选、数量修改等信息。
总之，商品的使用场景很大程度上会影响展示信息的选择，最核心的要点是一定要考虑用户在不用的场景下，最核心的信息诉求是什么，不同 App 对此可能有不同的做法，我在这里也无法一概而论。
5. 不一样的商品卡片
①Asos/Massimo Dutti
国外的电商 App，尤其是品牌自己的 App，总是会做得非常极简，一个标题一个价格一张图片，几乎做到了商品卡片最简洁的状态，这是品牌气质决定的，也是产品定位决定的。所以国内走出海路线的 App 大多也会是这个风格，比如 Shein。
②马蜂窝/飞猪
举这两个例子并不是因为两者的组件设计得有多精妙，而是因为它们有着另一种不同的商品，以及所呈现出来的不同的组件——酒店。
我在这里想要说明的是，不同的商品类型可能也会有其特有的字段类型，尤其是服务型商品，不同的服务所呈现出来的组件会有很大不同。
这里收集了一些商品卡片的线上案例，也可以作为设计时的参考：
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
1. 初识B端产品和C端产品
C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
2. B端和C端产品的区别
在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。
从使用者的角度来说：
从开发的角度来说：
3. 后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：
1. 初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。
后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
2. 后台UI设计工作流程
后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
3. 制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
以下数值为参考，请结合特定产品灵活运用。
统一尺寸
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架
页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定
一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为 10px。
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。
单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高
表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
行数
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「...」展示，鼠标悬停出现完整内容（比如详情、描述）。
列数
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式
表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
详情入口
表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框
弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框
侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏
为某些特定数据提供数据加载等待时的占位图形组合。
全局提示
建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。
警告提示
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
分别站在整个产品设计研发流程中各个角色的不同角度，在工作中可能会有以下“抱怨时刻”：
由此，体现出搭建设计规范的作用和意义：
搭建设计规范的意义
产品侧：⼀个产品不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。保证可复用模块的交互体验的⼀致性。
设计侧：通过设计规范去解决大部分需求，极大提高效率解放双手，让设计师能去做一些更发挥创意和想象力的设计。
开发侧：形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同⼀个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发，做到开箱即用。
测试侧：标准化的设计规范，是测试人员最喜欢看到的。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化，最早可以追溯到工业革命时期，福特创造的流水线生产方式。福特将汽车分解成零部件，再把零部件模块化组装，这⼀创举极大的提高了生产效率。
根据资料显示，T型车是世界第一款大量使用通用零部件，并进行大规模流水线装配的汽车。这种方式极大地提高了T型车生产效率，降低了生产成本。1914年，福特已经可以做到93分钟生产一辆汽车，而同期其他所有汽车厂商的生产能力总和也不及于此。到了1920年代，T型车的价格甚至降到300美元一辆（问世之初T型车的售价仅需850美元，而同期的竞争对手则通常为2000-3000美元一辆）。
原子设计理论最初来源于化学领域，这一点从名字可以听出来。在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。
2013年前端工程师BradForst将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。
当公司的业务产品逐渐扩大时，我们就需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。
总之，将设计拆分成一些基本元素，例如一个按钮、一个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是原子设计理论（组件化设计），区别于整体设计制造的一种新的工作流程。
1. 设计系统搭建—原子
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、阴影等。
2. 色彩体系
中后台产品的色彩体系主要分为3类：品牌色、功能色、中性色。
色彩体系
3. 文字体系
B端产品的文字系统设计目标：增强阅读体验、提升信息获取效率，字体是体系化界面设计中最基本的构成之一。
字体的大小、字重、色彩区分体现界面信息的层级关系。
文字体系
4. 阴影、圆角、线条
阴影：在B端界面中，有些特殊的元素会使用到阴影，从阴影中我们可以看出物体距离平面的高度，距离平面越高的物体阴影越大；
圆角：从直角到圆角给人带来从严谨冰冷到柔和亲切的心理感受，在B端界面中，常用2-8px圆角；
线条：分割模块及辅助定位。
5. 后台设计系统搭建—分子
在界面中，分子是按照规律组合起来的元素，如：按钮、搜索框、选择器等。
以按钮为例，文字、色块、图标和间距这些抽象的原子产生关联组合成分子：图标、文字传达含义；颜色、圆角传递特性；间距、尺寸定义规范。
6. 后台设计系统搭建—组织
分子+原子组合成更复杂和可拓展的组织（区块组件），如搜索区、卡片列表区、表单区、数据统计区等。
7. 后台设计系统搭建—模板
由原子+分子+组织构成的更复杂更专注页面底层架构，并非具体页面。
8. 后台设计系统搭建—页面
带业务逻辑的场景案例，如标注场景、权限管理、详情设置等，将页面模板填充真实的文字、图片后形成页面，即带交互逻辑的高保真原型图，真实内容使设计系统有了“生命”。
虽然通过设计规范可以对产研流程提效，但在开发还原中还是会经常遇到一些棘手的问题。
为了解决和优化上述的问题，DesignToken应运而生。它可以解决产品设计和开发过程中的细节、变更和风格一致性的问题，有效提高产研团队设计质量和协作效率。
1. Design Token 介绍
“Token”原本的意思是“令牌，指令”，与Design连在一起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，DesignToken则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。
2. Design Token 优势
① 设计语义更易理解
帮助设计师和开发建立统一语言，设计方案更加一致。
从下到上的Design Token 命名思路
②主题皮肤一键替换
主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个Token命名，达到一键换肤的效果适配不同客户方案。
③设计变更高效维护
替代传统工作流一键替换效果。例如修改二级文本的颜色，传统工作流需要先修改设计规范，修改设计稿，然后输出给开发，开发逐一更新代码，完成后提交给设计师进行走查验收。而当使用Token之后，只需要更新Token参数，就可以直接导出JSON给开发，一键自动更新。提高效率不止一点点。
④设计效果精准还原
代码编辑器自动化提示颜色选择，如不正确则产生报错。
使用Token开发和传统开发的对比
总结一下使用 Token 开发的优势：
3. Design Token 应用流程
第一步：提炼 token 元素；第二步：定义命名规则；第三步：整理 Design Token 资产表；第四步：开发与应用。
Design Token 应用实践
接下来具体说说如何为 Design Token 命名，命名方式目前并没有绝对统一的要求，不过有一定的逻辑规则，可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则，举个例子：
命名规则示意
为了更好的统一规范，应用 Token，建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题，尽在指尖。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
jankspace精准概括这类痛点：产品对外宣传全链路无缝自动化，实际使用却要在账号、支付、文件、权限间反复跳转，消耗用户耐心却毫无体验增益，属于设计失误带来的无效负担。消费心理学宜家效应佐证：用户亲手投入步骤完成事物后，会自发抬高产品价值；动手参与的沉没成本，最终转化为情感与记忆沉淀。
| 摩擦分类 | 用户体感 | 典型场景 | 设计决策 |
|---|---|---|---|
| 坏摩擦 | 被迫填坑、烦躁流失 | 重复登录、错乱跳转、无效排队 | 全盘删除优化 |
| 交易必要摩擦 | 安全感确认 | 支付二次核验、隐私授权 | 精简话术、保留必要步骤 |
| 仪式型好摩擦 | 沉浸场景、充满期待 | 开箱、线下试穿、集章打卡 | 结构化设计，配套情绪回报 |
| 记忆型好摩擦 | 愿意投入时间、加深印象 | 长内容观看、线下展览动线、手作 DIY | 设计体验峰值 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天分享分析一套名为「APEX」的航天发射与回收控制台 UI 设计系统——它可能是近年来暗黑系数据大屏领域最完整的作品之一。
────────────────────────────────────────
上图是Logo Construction 页面，包含几何图形构建过程、Key Values 清单、Clear Space 规范、On-Board Panel 金属铭牌效果图、ID Card 工牌效果图。
这套设计的起点不是界面本身，而是一个完整的品牌识别体系。Logo 采用几何化的"M/N"折线图形，通过严格的网格系统和角度标注（A1 60°、A2 60°）完成构建。这种做法传递出一个信号：这不是"画出来的"，而是"工程推导出来"的。
三个值得注意的品牌细节：
• Key Values 清单将 Corner Radius、Stack Ratio、Grid Multiple 等参数量化到小数点后两位——这种"伪工程规范"的呈现方式，本身就是一种视觉叙事手段，让品牌看起来像真实的军工项目
• On-Board Panel 金属铭牌效果图：把 Logo 做成金属蚀刻效果，配合 S/N 序列号和规格参数（AL-142 SPEC: AMS 4027），完成了从数字设计到物理实体的视觉跨越
• ID Card 工牌：Operator / Alex Chen / Launch Director / EXP 12/2026，用真实工牌的格式强化了整个项目的沉浸感
设计启示：B 端/工业级 UI 项目，如果能在界面之外补充品牌载体（铭牌、工牌、实体 Mockup），说服力会呈指数级增长。
────────────────────────────────────────
上图是The Brief 文档页 + WHAT BROKE ON B-04 事故报告页。
这套作品最独特的地方在于：它不只是"好看的界面"，而是有故事背景的完整设计系统。
The Brief 页面采用类似军方密件的红头文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息栏，正文用衬线体排版，引用语"We launch the booster every twenty-three days. We recover it every twenty-three days"营造出强烈的任务氛围。
B-04 事故报告页则展示了另一种信息架构能力：
• Mission Timeline：一条时间轴贯穿从 PRE-IGNITION 到 RECOVERY COMPLETE 的全过程，关键节点（T+04:57 TELEMETRY GAP · 30s）用黄色高亮 + 虚线框标注异常区间——这是非常成熟的事件标注模式
• Operator Stress Map：三张并排的折线图分别展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力负荷曲线，黄色渐变填充区域直观标示高压时段
• Operator Testimonials：底部三张引言卡片用双引号图标 + 小字署名，把冷冰冰的数据还原为人的体验——"We were guessing for thirty-eight seconds"
这种"数据 + 人文叙事"的组合，是高端 B 端设计区别于普通仪表盘的关键差异点。
────────────────────────────────────────
上图是One surface. Four operators. Nine minutes. 概念标题页。
"One surface. Four operators. Nine minutes."
这句话只有六个英文单词，但它完成了三件事：
• 定义了交互范式（One surface = 统一操作界面）
• 定义了用户角色（Four operators = 四个操作岗位）
• 定义了时间约束（Nine minutes = 任务窗口）
下方四张线稿风格的人物侧脸插图（Launch Director / Telemetry Officer / Recovery Captain / Engineer），用极简的轮廓线勾勒出角色身份，每个头像下方标注岗位名称。这种处理方式在视觉上极度克制，却信息量充足。
设计启示：任何复杂系统的 UI 设计，都应该有一个"一句话概括"的概念页。它不仅是封面，更是整个设计系统的"宪法"——后续所有界面的设计决策都要能回溯到这句话。
────────────────────────────────────────
上图是主控面板总览 + Launch Director 主界面。
这是整套设计的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等宽字体占据左半屏视觉重心，周围是大量留白——和之前分析的车辆仪表盘使用的是同一策略：让数字自己说话。
但这套设计在此基础上做了更极致的延伸：
① System Readiness 点阵网格 右侧用一个 8×8 的方格矩阵表示系统状态，每个子系统（Avionics / Propulsion / Range / Payload 等）对应一个格子。绿色 = GO，橙色 = HOLD，红色 = NO-GO。这种"一目了然"的状态表达方式比文字列表高效得多——用户可以在 1 秒内扫完所有子系统健康状态。
② Auto-Sequence Path 自动序列路径 左侧竖向排列的任务清单（Sensor Calibration → RF Uplink Established → Range Clearance...），每个任务前用三角形图标表示状态：绿色 ▲ = 已完成，橙色 ⚠ = 等待中，灰色 = 未开始。这是一种非常清晰的线性进度可视化方式。
③ 火箭线稿插画 右侧大面积区域放置火箭透明线稿图（Wireframe），内部用绿色渐变填充表示液氧（LOX）储量——84.2%。这种"技术蓝图 × 实时数据"的组合，既提供了设备形态参照，又嵌入了关键运行参数。
④ Secure Audio Channel 音频通道波形图 右上角的小型音频波形条（AES-256 ACTIVE），暗示这是一个实时通讯环境。这类"微细节"的存在感虽然弱，但对营造专业氛围至关重要。
────────────────────────────────────────
上图是Stage 1 LOX 详情 + 引擎集群温度监控。
上图是Launch Director 与 Telemetry Officer 并排对比。
上图是Recovery Captain 与 Engineer 并排对比。
这套设计最令人印象深刻的架构决策是：为四个不同角色设计了完全不同的数据视图，且每个视图的信息密度和数据类型都精确匹配该角色的职责：
|
角色 |
核心关注 |
主色调 |
关键组件 |
|
Launch Director |
全局状态 + 倒计时 |
绿色 |
Readiness 网格、Auto-Sequence |
|
Telemetry Officer |
实时遥测数据 |
红色 |
波形图、雷达扫描、引擎剖面 |
|
Recovery Captain |
回收海域 + 着陆区 |
绿色+红 |
雷达圆环、海况热力图、甲板平面图 |
|
Engineer |
子系统参数 |
绿色 |
Readiness 网格、诊断图表、引擎温度 |
Stage 1 LOX 详情卡片的设计尤其出色：
• 84.2% 用超大的绿色等宽字体显示
• 右侧是一个透明的圆柱形容器 3D 渲染图，内部绿色液体高度与百分比对应——数据可视化与三维插画的完美融合
• 下方列出 TEMP（-183.4°C）和 PRESSURE（4.2 BAR），字体大小层级清晰
• 引擎集群部分用九宫格排布九个引擎喷口，每个喷口上方标注编号，其中 #07 用橙色高亮标记异常温度（1120°C），#03 和 #09 显示正常温度
Engine Cluster 温度条形图：底部一根横向的温度分布条，从绿（420°C）过渡到黄再到红（1480°C），ENG-07 区域明显偏黄/橙——一眼就能定位哪个引擎出了问题。
────────────────────────────────────────
上图是TOPOLOGY 拓扑图。"Four roles. Two locations. One protocol."
这张拓扑图回答了一个核心问题：四个操作员之间是什么关系？数据怎么流动？
画面布局清晰地展示了信息链路：
• Ground Station（地面站卫星天线）→ 通过 Fiber Backbone 连接到 Mission Control（任务控制中心）
• Mission Control 内部有两个席位：Launch Director + Telemetry Officer
• Mission Control 通过 Orbital Uplink 连接到 Satellite GEO-04
• 同时通过 Manual Override/Fallback 链路连接到 DroneShip "North Star"（海上回收船）
• DroneShip 上有另外两个席位：Recovery Captain + Engineer
• 还有一个独立的 Meteorological Mesh / Atlantic 气象数据源
每条连线都用虚线 + 不同颜色区分（绿色 = 正常链路，黄色 = 备用链路，红色 = 应急链路），并标注了延迟时间（Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms）。
设计启示：复杂系统的 UI 设计，如果缺少一张"上帝视角"的拓扑图，用户就很难建立对整体架构的心智模型。这张拓扑图就是整个系统的"地图"。
────────────────────────────────────────
上图是轨道飞行视图 + Ascent 阶段视图。
这是整套设计中最具视觉冲击力的页面之一：
上半部分：地球边缘的太空视角，可以看到城市灯光分布在大陆上，一枚白色箭头轨迹线从地表射入太空，旁边标注 8.42 MACH 和 112.4 KM —— 当前速度和高度。右上角的状态标签显示 MAX-Q CLEARED（已通过最大动压点）。
下半部分分为多个数据模块：
• Aerodynamic G-Force：左侧的 G 力曲线图，红色斜纹填充区域标示危险范围，白线表示当前值（// critical load 6.22G //）
• Aerodynamic Heating：六边形蜂窝热力图，中心亮红色表示最高温区（Peak Nose Core Temp: 1,940°C）
• Flight Event // WECO：事件列表，[ STAGE 1 CUTOFF CONFIRMED ] 用绿色标注已完成事件
• Trajectory Attitude：右侧小型地球仪显示当前姿态角（Pitch: 48.1°, Roll: 0.8°）
特别值得一提的是下图的变体版本——部分区域被黄色/黑色斜纹遮罩覆盖，模拟军事系统中常见的"机密信息遮盖"效果。这种细节处理极大地增强了真实感。
────────────────────────────────────────
上图是真实控制室环境中的大屏渲染。
这张图把 UI 从"屏幕截图"提升到了"空间体验"层面：
• 整个控制室笼罩在红色应急灯光下，营造出紧张的事故处置氛围
• 中央大屏显示的是 Telemetry Officer 的雷达界面（红色主题）
• 大屏前方坐着几位操作员的剪影背影，他们面前还有各自的工作站屏幕
• 右上角的数字时钟显示 3:20，暗示这是某个关键时刻的时间戳
为什么这张图重要？
大多数 UI 设计只停留在 Figma/Sketch 的画布上。但这套设计考虑了物理环境中的呈现效果——红色环境光如何影响界面的可读性？大尺寸投影下的字号是否足够？多人协作时的视线方向是否合理？这些"超出像素"的问题才是决定实际落地质量的关键。
────────────────────────────────────────
上图是Aborted/Ordnance 中止/引爆界面。
当系统进入中止/紧急模式时，界面发生了显著变化：
• 主色调从绿色切换为红色：正常态的绿色元素全部变为红色或橙红色
• 圆形雷达视图中央显示 KSC LAUNCH-PAD 39A，外围有多层同心圆环（绿色→黄色→红色）代表不同的安全区域边界
• Exclusion Zone [ EXCLUSION ZONE ] 标签用红色菱形图标标记禁区
• 左上角显示 ABORT 状态标识，左侧边栏也变为红色调
• 底部的 Flight Termination System 面板显示 [ ORDNANCE ARMED ] 状态，KEY_ALPHA / CMD 显示 [AUTHORIZED] 或 [PENDING]
这种基于状态的色彩系统反转，是高风险行业 UI 的标准做法——用户不需要阅读文字，仅凭颜色就能判断当前处于"正常"还是"紧急"状态。
────────────────────────────────────────
上图是DroneShip 回收船甲板监控界面。
Recovery Captain 的主界面展示了海上回收阶段的全貌：
• 顶部状态栏：Vessel 名称 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS
• Sea State & Wind：左上角海况热力图，Speed 14 KTS，Sea State 3 (MODERATE)
• 甲板俯视平面图：中央大型区域显示无人机船甲板布局，三层同心圆环（SAFE ZONE / RISK ZONE / ABORT ZONE），目标落点用绿色菱形标记
• 底部四模块：
• Grid Fins：四个舵面角度滑块（+02° ~ +05°）
• Deck Impact & Legs：着陆冲击热力图 + 四条着陆腿状态（LANDING LEGS: DEPLOYING...）
• Action Zone：机械臂抓取装置的线稿图 + [ DECK SECURE ] 按钮
黄色/黑色警示条纹的使用也是一大亮点——多处区域用斜纹条纹表示"受限/加密/不可用"，既是功能表达也是一种视觉节奏的调节手段。
────────────────────────────────────────
上图是Module 03/04 和 Module 05/06 子系统详情。
最后两张图展示了子系统的精细化设计：
Module 03 — VECTOR THRUSTERS（矢量推进器）：
• 四个推进器的 3D 线稿图，每个箭头标注推力方向
• 推力数值直接标注在推进器旁：42% / 38% / 89% / 34%
• 底部状态栏：DP MODE: STATION KEEPING [ ACTIVE ]
Module 04 — ALTITUDE TELEMETRY（高度遥测）：
• 一条下降曲线图，横轴为 TIME TO IMPACT（撞击倒计时），纵轴为 ALTITUDE
• 下方两个超大数字：ALT: 1,240m / SINK RATE: 42 m/s
Module 05 — G-FORCE TELEMETRY：
• G 力曲线图，红色区域标示危险范围
• 注释文本：// critical load 6.22G //
Module 06 — STAGE SEPARATION & MECO：
• 事件确认列表 + 多组进度条（Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等）
• 右侧火箭剖面图标注各部件状态（Pneumatic Clamps: RELEASED）
这些模块化的设计使得整个系统具有极强的可扩展性——新增一个子系统只需增加一个 Module 卡片，而不需要重构整个界面。
────────────────────────────────────────
这套 APEX 发射控制系统 UI 给我们留下了以下可直接应用的设计原则：
1. 从品牌到界面的全链条设计：Logo → 工牌 → 铭牌 → 界面 → 物理环境，每一个触点都在讲故事
2. 概念先行，一句话定义系统："One surface. Four operators. Nine minutes." 让所有设计决策有据可依
3. 角色驱动的差异化界面：不同岗位看到不同数据，信息密度精确匹配职责需求
4. 状态即颜色，颜色即语义：绿色=正常/GO，黄色=警告/HOLD，红色=紧急/NO-GO/ABORT
5. 点阵网格替代状态列表：System Readiness 的方格矩阵比文字列表快 5 倍完成认知
6. 线稿插画承载工程美感：透明线稿 × 数据填充，比写实渲染更有"控制室"的专业感
7. 拓扑图是复杂系统的必需品：没有"地图"，用户就无法建立全局心智模型
8. 考虑物理环境的影响：屏幕上的好看 ≠ 控制室里好用，环境光、观看距离、多人协作都是设计变量
────────────────────────────────────────
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套车辆安全数据分析仪表盘的 UI 设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
────────────────────────────────────────
手机端 iPhone Mockup 中的 AI 智能洞察弹窗卡片，白色卡片浮层覆盖在主界面之上。
手机端的这张 Smart AI Insight Card，展示了 B 端弹窗设计的一个重要原则：层级的建立靠光影，不靠线条。
• 主界面采用浅灰背景（约 #F5F6FA），弹窗卡片是纯白浮层 + 微投影（Y-offset 4px, blur 8px），层次关系干净利落，无需额外边框来界定卡片范围
• 卡片内部包含车辆碰撞示意图、型号信息（Ford Model 2017）、事件类型标签、CTA 链接共四类信息层，通过纵向网格对齐排布，视觉密度控制在舒适区间
• 左上角的蓝色警示标签（高饱和蓝，类似 #0047FF）是整个卡片唯一的色彩重心——它同时承担了"信息类型标识"和"视觉激活点"两个职能，让用户 0.3 秒内锁定核心信息
设计启示：弹窗卡片中，单一高饱和色点 + 大量灰白留白 = 最高效的注意力引导策略。不要用多个颜色"争抢"用户视线——在 B 端场景下，克制即高级。
────────────────────────────────────────
iPad 宽屏 Mockup 展示的 Advanced Visual Data Graph 界面，左侧浅灰数据区 + 右侧高饱和蓝详情面板形成强烈对比。
全系界面仅使用蓝 + 灰白两个色系，却呈现出强烈的科技感和专业感。这种配色策略的背后是一套严格的色彩分工：
|
层级 |
颜色 |
用途 |
|
主内容区 |
#F5F6FA / 浅灰底 |
降低视觉疲劳，承载长期查阅的大量数据 |
|
强调面板 |
高饱和蓝 #0028FF |
聚焦关键信息，建立信息的视觉优先级 |
|
交互元素 |
蓝色渐变 |
按钮、选中态、CTA 链接 |
|
数据图表 |
蓝白渐变 + 灰色辅助线 |
保证数据可读性为第一优先级 |
其中右侧蓝色详情面板的处理尤为出色：纯蓝底色上使用白色线稿风格的车辆技术插画，融合了"工程图纸"的美学质感与"数字大屏"的现代感。这种「工程蓝图 × 数字大屏」的混搭风格，是近两年 B 端设计中逐渐成熟的视觉语言，特别适合汽车、工业、安防等领域的产品界面。
iPad Mockup 的展示意义：宽屏设备框让仪表盘的宽屏布局优势一目了然——选对展示载体，本身就是最好的设计说明。
────────────────────────────────────────
Collision Analytics 完整看板，在笔记本设备 Mockup 中的实际效果展示，包含主数据区 + 底部卡片列表 + 右侧蓝色抽屉面板。
在完整的 Collision Analytics 看板中，信息被严格划分为三个优先级层级，每一层对应不同深度的阅读需求：
第一层：核心指标（0.5s 锁定）
• 「48.2%」以超大字号占据左上角视觉重心区
• 这是用户在任何场景下都能瞬间锁定的"那个数字"
• 时间维度切片（Year/Quarter/Week）以 Tab 形式置于指标上方，提供灵活切换的同时不侵占核心数字的空间
第二层：趋势与异常标注（5s 理解）
• 折线图上用蓝色竖线直接标出风险突增的时间节点
• 箭头线从竖线引出，连接到文字说明"Collision severity increased by 64.2%"
• 这种标注式数据可视化让用户不必在图表和说明文字之间来回跳转——上下文信息被直接嵌入图表内部
第三层：可对比的详情卡片（30s+ 深入）
• 底部三张卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等宽网格并列排布
• 每张卡片结构完全一致：左侧标签 + 中间标题 + 右侧关键百分比，支持快速横向对比
• 右侧蓝色抽屉面板作为"按需展开"的详情层，随时可召唤、不抢占主内容区域
核心方法论：B 端仪表盘的信息架构不是"把数据放上去"，而是精心设计一条「用户先看什么 → 再看什么 → 如何深入」的视线引导路径。
────────────────────────────────────────
手机端两张卡片并排展示，左侧为蓝色聚焦卡片（Collision Reconstruction），右侧为白色常规卡片，两张卡片形成对比。
移动端的 B 端设计面临的核心挑战是：在极有限的屏幕空间内，把复杂数据讲清楚。这组移动端卡片展示了三个可复用的设计原则：
原则一：一卡一事 每张卡片承载一个分析命题，不做多任务混合。蓝色卡片 = 需要用户关注的条目，白色卡片 = 常规信息条目。颜色在此承担了优先级语义，而非装饰功能。
原则二：图文合一 车辆技术插画与百分比数据（如 35% severity）在同一卡片内左右排布。插图不是装饰——它用视觉化的方式解释了"碰撞严重程度"这个抽象概念，大幅降低了用户的理解成本。右侧的折线小图同时提供时间维度的趋势感知。
原则三：时间轴极简化 折线图上方的时间维度切换（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整个交互区域高度不超过 40px——零控件感，零视觉冗余，却承载了五个时间维度的切换入口。
────────────────────────────────────────
Focused Analytics 界面，左侧大量留白区域居中展示 +64.2% 大数字，右侧为折线趋势图 + 蓝色聚焦行动卡片。
最后一张 Focused Analytics 画面，是全套设计中最值得细品的一个单页。+64.2% 的增长数据被单独放在整个左半屏，周围是大量留白。这种处理方式背后有一条被反复验证的设计法则：
数字的"说服力" = 字号 × 留白面积
具体执行层面：
• 巨大的无衬线字体 + 极简居中排版，让数字本身成为页面唯一的视觉锤，用户不需要阅读任何辅助文字，就能"感受"到这个数字的分量
• 右侧折线图从 0 开始缓慢爬升、斜率逐渐增大，用图形曲线的"加速感"还原了"问题在恶化"的紧迫性——这是叙事型数据可视化的经典手法，图形本身在讲一个"从平稳到恶化"的故事
• 左灰右蓝的分屏策略将界面分为"客观数据区"和"行动聚焦区"，完整闭环了「信息获取 → 风险感知 → 行动指引」的用户旅程
• 蓝色聚焦卡片内部包含标签、标题、技术插画、百分比数值、进度条、说明文字共 6 个信息层级，全部通过字号、字重、间距做出清晰区分，密而不乱
────────────────────────────────────────
这套作品给我们提供了以下可直接应用到实际项目中的设计准则：
1. 配色做减法：2 个主色 + 灰白体系，足够构建完整的科技感 UI。颜色越多，信息噪音越大
2. 信息分三层：核心数字 → 趋势标注 → 对比详情，为用户建立有节奏的阅读路径
3. 弹窗靠光影：偏移投影 + 留白比边框分割更优雅，更符合现代 UI 的视觉趋势
4. 颜色即信息：界面上唯一的高饱和色，必须指向用户当前最该关注的区域
5. 移动端一卡一事：小屏不做多任务混合，一张卡片讲清一个命题，宁可多滑一屏
6. 数字要能被"感受"：超大字号 + 充足留白 + 叙事型曲线，比干巴巴的百分比数字更有冲击力
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蚂蚁阿福 APP 以 AI 医生朋友的身份重新定义健康管理，从对话式医疗入口到智能体驱动的全流程服务，这款应用正在颠覆传统医疗产品的交互逻辑。它不仅通过人格化设计降低医疗决策压力，更借助阿里生态实现从咨询到就诊的完整闭环。本文将深度解析其创新设计如何重构用户与医疗服务的连接方式。
今天向大家分享一款最近刚推出的蚂蚁旗下的 AI 健康助手——蚂蚁阿福 APP ，希望你能从这篇产品体验分析中有所收获。如果你觉得我们的文章有价值，欢迎分享给你的朋友！
蚂蚁阿福是蚂蚁集团推出的 AI 健康管理应用，由原 AI 健康工具 AQ 升级而来。产品愿景是成为用户的 AI 医生朋友，提供健康咨询、图片解读（支持报告、病例、处方、药盒）、个人和家庭健康档案管理，以及预约挂号、云陪诊等医疗健康服务。
当你打开蚂蚁阿福 APP的第一刻，你会发现它像 ChatGPT、DeepSeek 一样，只有一个对话框。这正是 AI-UX 的典型表现形式——把「对话」作为核心入口，弱化传统的多层级导航，让用户用一句话就能触达预约、解读报告、症状咨询等多种服务。交互形式就像与医生聊天，而不是过去在 App 里找入口、找功能。
对话式AI交互和传统的菜单栏相比，用户的心智需要改变什么？
最近我对用“用户心智”这个知识点有了全新的理解。这得益于刚好在尝试全新交互的设计，而体验到阿福时，我尤其感同身受，因此重新思考了这个问题。
从交互方式上看，传统菜单栏要求用户预先了解功能位置和层级结构，通过”点击—浏览—选择”的路径完成任务。而对话式 AI 交互让用户从”寻找功能”转向”表达需求”，用自然语言直接描述问题，对话即交互、对话即操作。
这种转变对应着心智模型的两个层面：
另外，你会发现阿福的头部有点拥挤（包含用户中心、智能体、任务中心等入口）。这是因为过去在菜单栏或金刚区的高频功能都被上移了。也许这就是未来的设计趋势——”菜单栏”从下往上，把最宝贵的黄金位置留给 AI。
心智模型（Mental Model）
心智模型是用户基于过去经验形成的认知框架，决定了他们如何理解产品的运作方式。它影响用户如何理解界面、预测交互结果并做出操作决策。当产品的实际运作方式与用户的心智模型一致时，体验会更流畅；反之则会增加学习成本和认知负担。
与传统 AI 对话式交互不同，阿福将医疗场景中的高频应用设计成独立智能体。用户可以在底部对话框上方和头部直接触发，比如接下来介绍的 AI 诊室。使用其他 AI 工具问诊时，体验往往缺乏仪式感。但在阿福中，点击 AI 问诊后，系统会明确提示”你已进入 AI 诊室问诊中”。接下来的流程会聚焦于你的症状，进行梳理分析，最终推荐适合的医院和医生。
另外，阿福受益于阿里健康和支付宝的强大生态，可以在 APP 内完成预约和问诊的闭环。用户只需一个 APP，就能完成从诊前咨询到在线就诊的全流程。
如果你觉得 ChatGPT、DeepSeek 这类对话式 AI 产品的交互过于简单，融入智能体设计的阿福会给你更多惊喜。智能体像一个封装了特定功能的应用，具有明确的目标导向，用 AI 服务于这个目标，而不是让用户在自然语言中”摸索路径”。换句话说，智能体就像传统的二级功能模块——用户触发后，系统会在当前场景中围绕这个需求进行交互。
正是这个流程的设计，让我发现了它的独特之处。无论是之前体验过的阿里旗下安诊儿和讯飞晓医，还是我 7 月份构思的北京协和互联网医院 AI 版本方案，都未曾想过可以通过智能体来丰富交互设计形式。
AI 智能体是什么？
AI 智能体（AI Agent）是一种能够自主感知环境、做出决策并执行任务的 AI 系统。与传统的对话式 AI 不同，智能体具有明确的目标导向，能够调用多种工具、API 和服务来完成复杂任务。
AI 找医生这个智能体同样带给我很大的惊喜和启发。它成功地将传统医疗 APP 中用户已经熟悉的交互模式融入产品，同时巧妙地结合了 AI 智能对话方式，形成了一种既保留用户认知习惯又具有创新性的混合交互体验。
体验完这个智能体的交互流程后，我意识到过去对对话式 AI 产品的交互和 UI 理解过于浅显。它们确实主要依靠对话交互，但随着智能体的发展，每个智能体都代表一个独立的流程、内容甚至风格。
以 AI 找医生为例：它融合了传统的 TAB 框架，让用户按科室或疾病查找；当 AI 推荐的数据不满意时，还提供”查看全部”按钮，引导用户进入二级页面进行个性化筛选。这个设计让我发现，AI 产品远比想象中丰富——它不只是简单的对话框和侧边栏。
写到这里，我突然想起另一款对话式医疗 APP——讯飞晓医。当我输入”预约挂号”时，系统只能提示我跳转至其他医疗网站完成挂号。相比之下，阿里的生态能力令人赞叹：阿福直接连接好大夫等平台，用户可以在 App 内完成从 AI 推荐、查看医生到付费问诊的全流程，无需跳出即可实现就诊闭环。
早在 2023 年参与钉钉智能体测评时，我就有过类似构思：如果将专家过往的就诊经验和知识喂养给 AI 并进行专门训练，这个智能体能否解决 80% 的诊前基础咨询？当我体验这个智能体并查询相关资料后，发现阿福的医生 AI 分身确实做得非常出色。
该模型（官方名称叫蚂蚁·安诊儿医疗大模型 AntAngelMed）基于海量医学文献和去隐私化的真实病例数据构建，具备”深度思考”能力。它可对复杂、信息不全的临床场景进行多轮推理、逻辑验证与自我纠错，助力精准诊疗。
在产品层面，AI 医生整合了语音对话、挂号、补号申请等多种功能和场景。患者可以像与真人交流一样咨询，医生则能 24 小时服务多位患者。
医生 AI 智能体这一创新模式对多个行业领域具有重要的参考价值。它的核心在于：将一位拥有数十年临床经验的医疗专家所积累的专业知识、诊疗经验和实践智慧进行系统化的数据处理和标准化转换，再借助人工智能技术，使这些专业知识能够同时为成千上万的用户提供高质量的服务。
我甚至有一个大胆的设想：在未来，即便一个专家寿终正寝，只要他能把自己的知识库和经验传送给 AI，这个专家是不是就并未真正离去，而是可以继续造福我们的子孙后代？
「健康小目标」是一个围绕具体健康意图（如改善睡眠）展开的目标型智能体。它通过 AI 引导式问答拆解目标，自动生成可执行的日常任务，并将”制定计划—每日打卡—正向反馈”完整串联，形成持续的行为干预闭环。
体验这个功能时，我特意下载了几款健身打卡 APP，对比阿福的打卡流程与专业健身应用的差异。整体体验下来，阿福的用户体验更流畅。由于首页更聚焦、更简洁，我可以一目了然地看到所有打卡任务。
这个智能体给了我两点启发。
第一，表单类操作（如添加就诊人、填写问卷等）可以直接在对话框中完成，无需跳转到新页面。实际体验下来，这种设计不仅高效，还能保持用户的使用连贯性。
第二，健康小目标就像常见的用户签到打卡功能，通过持续打卡增强用户活跃度。但我认为最大的亮点在于：你可以在对话框中输入想实现的目标，系统就会为你自动规划。这正是自我决定理论（Self-Determination Theory）的绝佳体现，当用户具备自主性和胜任感时，他们会感觉是在主动使用产品，而非被产品操控。
这还是我第一次如此细致地了解我的皮肤，因为阿福的 AI拍皮肤智能体更像一个一体化的皮肤管理工具。不仅可以拍患处、看舌苔，还可以测肤质、测毛发。很幸运，工作了这么多年，我还没有秃头的迹象，AI 给我的测评是要注意休息、少熬夜，目前毛发良好。
我不得不感叹当今 AI 技术的飞速发展。当我完整体验了看舌苔、测肤质和测毛发这些功能时，虽然或许是我之前未曾留意，但还是给了我很大的震撼。AI 仅通过不同视角和角度的拍照，就能在短时间内快速评估出用户皮肤的健康状况——这本身就是科技的巨大进步。我没有去找 ChatGPT 探讨背后的技术原理，只想从一个普通用户的角度，表达我体验这些技术时的真实感受。
「药管家」围绕患者真实的用药场景，将药品识别、用药管理、用药指导、价格查询与购买行为整合为连续流程。用户从”我手上有什么药/我需要吃什么药”出发，可以自然完成从查询、添加到用药提醒，乃至购买的全链路操作。AI 在其中承担持续辅助与决策支持角色。
这个环节让我深刻感受到一个完整生态的价值——你在阿福就能实时查询药品价格、多维度对比，以及直接通过外卖配送或邮寄下单。
C 端产品的页面空间寸土寸金。当我添加了用药提醒后，我突然意识到阿福的首页其实是一个任务中心，而非传统的科普资讯推荐区。特别是与安诊儿 APP 相比，阿福的首页虽然看起来千人千面,但它能够感知、读取并提醒用户——无论是健康打卡、健康数据还是用药提醒,这个卡片区的场景拓展与应用都关联着整个产品的功能体系。
体验到这里时，恰好我刚带小孩去医院做了个小检查。拿到抽血报告后，我尝试将报告拍给阿福，亲身体验了 AI 报告功能。与医生相比，阿福的 AI 报告能帮助患者更系统、更完整地了解细节。医生工作繁忙，虽然经验丰富、能快速判断病情，但往往没有足够时间为患者详细解释。
AI 报告不仅为患者提供多轮对话追问，最后还会自然衔接 AI 诊室、医生解读与医院推荐，形成从”看不懂报告”到”下一步怎么做”的完整闭环。
我们也许真的要认真思考如何利用 AI 来帮助我们更好地生活了，比如 AI 报告这样的功能，它至少可以解决大部分患者对于专业报告的疑惑，了解 50%-70% 的基础情况。过去的互联网医院可以解决全国城市医疗资源不对等的痛点，而随着 AI 的加持，我觉得这种痛点会逐渐降低，就像 我在 AI 医生分身那个环节提到的一样，如果AI 可以把一个医生过去几十年的知识和就诊经验复刻，那么无论我们在哪个城市，都能同时享受到这个医生带给社会的价值。
总结与思考
第一，传统菜单栏会逐渐消失吗？
正如我在第一部分讨论的，阿福的对话式入口给了我很多启发。看着阿福拥挤的头部，我真切地感觉到——传统菜单栏可能会在越来越多的产品场景中彻底消失。甚至连搜索栏这样的功能，都会被 AI 输入框替代。对话即交互，对话即搜索，对话即触发，让我们拭目以待。
第二，智能体驱动 AI 产品设计创新
我每天都在使用 ChatGPT，长久以来形成了一种刻板印象：对话式 AI 产品的设计平淡无聊，传统的交互和界面设计似乎不再重要，取而代之的是功能逻辑和提示词设计。但阿福的设计给了我新的启发，打破了我对对话式 AI 产品的固有认知——未来的 AI 产品可以结合智能体做出更多创新，交互界面设计依然重要。
第三，对话式 AI 产品的应用场景将越来越广
我想到了许多应用场景，特别是与医疗高度相似的政务领域，比如税务、教育等。如果这些传统行业引入对话式 AI 交互，将极大提升工作效率。试想一下，当你只需在税务 APP 中输入几个字或说一段语音就能开始办理业务，能为前台工作人员节省多少时间？在这里给自己定个小目标：2026 年设计一款政企对话式 AI 产品，探索这个领域的设计趋势。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
飞书的聊天窗口设计正重新定义企业协作的边界。通过标签页集成、多模态通讯、结构化搜索等创新功能，它将传统IM工具升级为沉浸式工作台。本文深度拆解了这款产品如何将碎片化沟通转化为高效生产力，其设计哲学值得每一位关注协作效率的产品人思考。
今天我想向大家分享我近期对飞书聊天窗口设计的体验洞察 ，希望你能从这篇产品体验分析中有所收获。如果你觉得我们的文章有价值，欢迎分享给你的朋友！
飞书是字节跳动旗下的新一代一体化协作平台，诞生于 2016 年。它将即时通讯、日历、文档、云盘、OKR、审批等功能深度整合，试图通过”All-in-One”的产品哲学重新定义企业办公的协作方式。相比传统 IM 工具，飞书更像是一个以沟通为中心的工作操作系统，致力于消除信息孤岛，让团队协作变得更加高效与流畅。
飞书的聊天窗口设计彻底打破了”即时通讯工具”的传统边界。通过在会话界面顶端嵌入可自定义的标签页（Tabs），飞书将对话框重构为一个微型协作工作台。用户无需跳转页面，即可在聊天上下文中快速切换文档、云表格、网页链接或关键任务，实现从”信息流”到”任务流”的无缝融合。
设计亮点
体验思考
从接触飞书到此次深度拆解，中间大概有 3 年多时间。我算不上飞书的重度用户，但过去 1 年多，飞书已成为我负责的在线教育项目中的主要沟通工具。如果不是这次深度体验，我从未发现聊天窗口竟然支持 tab 切换查找内容，甚至可以自定义。
当我开始深度体验时，从上至下的第一个功能就给了我惊喜——它突破了我对聊天窗口的固有认知。传统的 IM 软件将沟通（聊天）与结果（文档/任务）剥离，导致用户频繁在应用间跳转。而飞书通过”标签页”将生产力资产直接”拎”到会话层。这种设计策略证明了在 B 端产品中，沟通往往基于具体目标，这就是协作的本质——减少操作跨度就是提升生产力。
体验到这里，我甚至特意打开企业微信进行对比。毕竟在国内，这两个工具是企业办公的二选一。相比飞书,企业微信的聊天窗口采用传统模式，和微信的聊天模式相差无几。
另外，这一功能设计充分体现了渐进式披露和自我决定理论这两个设计策略——不强迫普通用户接受复杂的工作台逻辑，而是将深度协作工具隐藏在轻量级的标签切换中，并充分给予用户自主性和掌控感。
知识卡片：
渐进披露（Progressive Disclosure）：一种信息呈现策略，只在用户需要时才展示更复杂或高级的功能，而非一次性呈现所有信息。这种方法防止用户被过多信息淹没，减轻认知负荷，让用户能逐步学习和适应界面。
自我决定理论（SDT）：人有三个基本心理需求——自主性（想自己做决定）、胜任感（觉得自己做得到）和关系感（感到被认可和接纳）。如果产品设计能满足这些需求,用户就会更愿意使用。
飞书在聊天窗口顶端集成了覆盖全场景的通讯矩阵，将语音通话、视频会议以及运营商电话拨打深度整合在统一的交互入口下。除了文字，还支持语音、视频和电话拨打。更让人爱不释手的是，飞书的语音/视频不仅可以自由切换，还可以随时邀请其他伙伴发起多人会议，并提供屏幕共享、录制、倒计时、直播等工具——沟通体验真的非比寻常。
设计亮点
体验思考
在深度使用飞书协作的这一年里（此前三年我都是独立工作），我才真正理解为什么会诞生飞书、企业微信这类协作软件。例如，飞书的语音通话可以直接转化为会议，完美解决了传统聊天软件如微信的痛点：第三个人加入时必须挂断并重建群聊；分享屏幕时不得不切换到腾讯会议。这种”沟通即协作”的逻辑大幅提升了工作效率，无需频繁切换沟通方式。
相比传统聊天软件，这种聊天既协作、语音既会议的模式是从”沟通媒介”到”协作场景”的跃迁。它不仅深度集成了聊天和协作场景，更通过屏幕共享、倒计时和录制功能，将稍纵即逝的语音信息转化为可搜索、可引用的数字资产。
飞书聊天窗口的搜索功能不仅是一个关键词入口，更是一个强大的结构化过滤器。它通过将混乱的聊天记录原子化地拆解为消息、云文档、文件、图片/视频、链接等五大维度，配合“来自用户”与“时间范围”的多重嵌套过滤，让用户在海量碎片化信息中实现秒级定位。这种设计将搜索从一种“试错行为”转变为了一种高度确定的“资产调取”过程。
设计亮点
体验思考
在飞书的聊天窗口中，搜索并不是一个独立、泛化的全局能力，而是深度绑定在“会话”这一上下文之中。我觉得它的更像是一种从“文本检索”向“资产管理”的心智迁移。比如传统的 IM 搜索往往只针对文本，而飞书把对话中产生的每一个文档、每一条链接都定位成数字资产，于是我们可以通过不同的类型、时间、以及发送人去进行筛选。
回到产品设计层面，我觉得飞书的设计，解决了过往我们在传统 IM 搜索中的三个痛点：
如果要推荐此次产品分析中最惊喜的功能，实时翻译无疑是我的首选。飞书的实时翻译功能彻底抹平了国际化协作中的语言鸿沟。通过在聊天设置中深度集成翻译助手，飞书不仅实现了接收消息的”自动翻译”，更创新性地推出了”边写边译”模式。这一设计将翻译从”被动查阅”升维为”主动表达”的即时增强，让跨国团队无需第三方工具，就能在 IM 窗口内完成流畅且地道的原生对话。
设计亮点
体验思考
体验这个功能时，我不禁思考：飞书的实时翻译能否替代 HelloTalk 这类专业语言学习软件，让我在真实工作场景中自然地学习外语？它不仅支持自动翻译和边写边译，更重要的是能消除语言障碍，提升工作效率。而且，这还是一个完全免费的功能。
发现这个功能后，假如未来我能服务国际客户，我也觉得不必胆怯。它不仅打破了”表达焦虑”，更能实际解决跨语言协作沟通的难题。
你是否遇到过这样的情况：用传统 IM 软件发送长文字时，需要添加格式，比如加粗、增加项目序号？事实上，我一直忽略了飞书的这个功能。虽然我坚持聊天应言简意赅，但在工作场景中，确实常需要编辑长段落文字。
飞书聊天窗口通过一键转化功能，将传统的单行文本输入框升维为专业的富文本编辑器。这一创新设计打破了即时通讯”碎片化表达”的局限，让用户无需跳转文档页面，就能在会话流中直接产出结构清晰、排版精美的深度内容，实现”沟通”与”创作”的无缝对接。
设计亮点
体验思考
当我拆解得越细致，我发现我对飞书的印象就在一步步的改变。聊天对话框一键转化为富文本编辑器的设计，不仅规避了”长文表达必须跳转文档”的痛点，更解决了碎片化聊天导致信息混乱的问题。富文本编辑框本质上是一个”强制信息结构化”的引导工具——通过引导用户使用项目序号、加粗重点，设计师无形中帮助团队提升了信息分发效率，确保核心指令不被社交闲聊淹没。
飞书聊天窗口底部的工具栏是一个集成了多元化办公能力的原子化矩阵。它不仅涵盖了基础的社交元素（如表情、图片、语音），更深度嵌入了生产力组件（如任务、云文档、红包、定位等）。这一设计确保了用户在沟通的任一环节，都能即时调取对应的工具来推进工作，真正实现了“所聊即所得”的协作闭环。
设计亮点
体验思考
请点击“
”按钮，然后仔细看看飞书底部工具栏藏着多少功能。如果说传统 IM 软件的工具栏是社交驱动的，而飞书则是任务驱动的。也许在 B 端的工作场景中，聊天框不应仅仅是字符的传输带，而应成为各业务模块（如 OA、CRM、任务管理）的统一分发器。
不过虽然工具栏功能繁多，但飞书通过“常用置前、深度收纳”的排版逻辑，避免了信息过载。这种设计确保了用户在基础聊天时处于“社交心流”中，而在需要专业协作时，又能通过二级菜单快速唤起“协作心流”。
我强烈推荐大家一定要注意飞书聊天窗口底部菜单栏的日程和任务这两个功能。因为你可以在和同事的聊天中随时发起会议和任务分配。你甚至不需退出聊天窗口去会议和任务面板，就能把工作的事儿在聊天窗口完成。
飞书通过在 IM 界面深度嵌入这样的快捷功能入口，消除了传统办公软件中切换应用、同步上下文的繁琐过程，让用户在沟通的任一瞬间都能一键将“想法”转化为“行动”，构建了一个从实时对话到确定性执行的闭环。
设计亮点
体验思考
我觉得飞书的聊天窗口实在太能理解用户的需求了，也许这正是飞书是字节跳动内部延伸出来的产品，它的诞生就是为了帮助字节跳动提升效率，所以它能深刻洞察到如何在几秒钟内防止办公效率的流失，从而将会议与任务视为 IM 的内生能力，而不是外部插件。
体验到这里，我真正改变了自己对飞书的产品认知，它并不是社交工具，而是数字办公室。即便只是一个聊天窗口，飞书也构建了全能的任务分发器。这种系统功能之间连接的颗粒度，让人叹为观止。
飞书在聊天窗口外围构建了一套极细颗粒度的消息过滤体系。通过将混合在一起的消息流原子化地拆解为未读、标记、单聊、群组、云文档、任务等多个 Tab 标签，飞书将“阅读消息”这一行为从无序的翻找升维为精准的任务处理。这种设计极大地提升了信息检索与处理效率，确保了核心任务在海量沟通中始终处于视觉中心。
设计亮点
体验思考
当我退出聊天窗口，准备结束这次产品体验的时候，我又突然发现飞书的消息列表页也藏着不少细节。如果习惯了传统 IM 软件按时间顺序堆叠消息的模式，飞书则通过 Tab 标签来标注消息的状态，甚至点击左侧筛选，还可以查看标记、@我、标签、单聊、话题等等更细的分类。
这是一种“信息熵增”的减法交互技巧和策略。随着工作时间增长，群组与好友数量会不可控地增加（即熵增），Tab 标签本质上是一套“动态降噪系统”。它允许用户通过点击特定的 Tab（如“未读”），瞬间将复杂的界面简化为仅剩待办事项的极简模式，从而缓解用户的信息焦虑、提升专注力。
过去几年我一直在用飞书，但坦白说，在没有刻意拆解之前，我从未意识到一个聊天窗口里竟然藏着这么多“为效率而生”的设计细节，虽然它是使用频率最高、却也最容易被忽略的核心界面。
我们日常使用协作软件时，常常会沿用其他 IM 的习惯，把它当作一个“像聊天一样聊天”的地方：发消息、回消息、刷对话就结束了。直到我开始更细致地体验与对比，才发现飞书把聊天窗口做成了更接近“协作工作台”的中枢入口。沟通不再只是信息往返，而是能在对话上下文里直接完成。
无论是结构化搜索在海量消息中精准定位关键资产，还是一键发起会议、随时分配任务让“讨论”立刻落到“行动”，又或者是实时翻译让跨语言协作更顺滑，这些能力都尽可能被收拢到同一个聊天窗口里完成。也因此我相信，你在看完这次拆解后，会对飞书的使用场景与产品认知产生新的变化：原来一个聊天窗口不仅能承载沟通，还能承载协作与生产力的闭环。
我认为，飞书把“以场景为中心”的策略发挥到了极致：和 C 端产品不同，它真正聚焦于 B 端协作沟通场景，将用户最高频、最真实的工作场景——沟通——作为承载协作的主舞台。
于是，文档、任务、会议、搜索、翻译等能力都能在同一上下文中被自然调用，让用户沿着“正在讨论什么”这条主线，持续推进到“接下来要做什么”。这种将信息流与任务流紧密耦合的设计，显著降低了切换成本与认知负担，也让团队的协作轨迹更容易沉淀、回溯与复用。
正因如此，这个聊天窗口几乎浓缩了飞书的设计精华：既承载其“沟通即协作”的价值主张，也映射出对真实工作场景与用户需求的深刻洞察。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
AI 行业的爆发始于2022年 ChatGPT 和 Midjouney 的发布，到现在已经快4年了，整个发展过程用突飞猛进、日新月异形容一点都不过分。
但不管它过去还是现在，发展得有多迅猛，都依旧处于行业早期的开荒和发展阶段，离真正成熟的理想形态还有很长的一段路要走，这是我们首先要达成的共识。
而之所以有这样的结论，原因就是 AI 的发展速度是超过现实世界匹配它的速度的，这造成了一种经济和机会成本上的巨大阻力。
简单来说，我们可以把 AI 技术的应用拆分成上、中、下游三个层，上层是 AI 的核心，主要是算法、大模型，中游是负责运行AI模型的硬件和支撑，即 AI 芯片、光模块 CPO、高速内存 HBM、服务器液冷、特高压电路等，下游即 AI 具体的应用工具，包括 AI 软件、硬件、智能体等。
这是一个非常庞大且复杂的产业链，它们之间是需要相互耦合，才能顺利应用到具体的使用场景中。
简单来说，就是 AI 模型厂商需要根据技术路线和成本选择硬件并购买算力中心，以及消耗海量的电力来训练自己的模型并维持它的正常运转。虽然这些背后的基建作为普通用户可能感受不深，但头部厂商的竞争已经到了白热化的阶段。
比如大模型的开发必然要关注硬件规格和架构，大洋彼岸除了英伟达外，还陆续推出了谷歌 TPU、微软 Maia、英特尔 Gaudi 等芯片，它们代表了不同的技术方案，应用在了不同的模型上。
而因为贸易和地缘政治的因素，国内是无法进口这些高端芯片，所以我们只能自研生产以满足国产大模型的需求。如阿里在自研并应用自家的真武系列芯片， DeepSeek 近期更新缓慢的重要原因就是因为要适配华为的昇腾系列芯片等。
之所以要提这点，是因为 AI 大模型的发展也适用马太效应，赢家通吃。在接近性能和水平下谁家应用的算力、电力成本最低，谁就具备了最大的优势。
而每家大模型厂商都要面临技术路线的选择，并投入海量的成本孤注一掷做基建，很难走回头路。这种发展路径注定会让行业发展充满波折和动荡，会有很多企业倒在半路上，连带着它们提供的产品和服务一起逐渐消亡。
比如文生图的 OG Midjounery，已经无法跟上大厂的技术和训练规模掉队，在今天已经无人问津，而一年多前网上还到处都是用 MJ 生成UI界面设计，UI 设计师要下岗的帖子。
强如 OpenAI，也要应对 Google、X AI、Anthropic、Seedance 的冲击和成本管理失控（GPT5 训练量需要消耗一个中等规模城市1年用电量），也在近期放弃旗下的文生视频工具 Sora。
模型和硬件端都充满了巨大的不确定性，因为技术的发展是需要“试”出来的，总有前浪会被拍死在沙滩上。至于谁会被拍死在沙滩上就不是站在今天的视角上能回答的。
再回到我们今天的主角 Anthropic，这是一家非常务实的 AI 公司，专注于开发有商业应用场景的大模型，是写作、编程等领域中的最佳选择。与之相对的则是类似 ChatGPT、Gemini 这类全能多模态大模型。
因为其模型可用性极高，所以从去年开始付费用户量暴增，在今年初预估年化收益已经超过300亿美元，不仅用户付费率远高于 OpenAI，且运行成本也远比它低。
而这家公司想要年底要上市（估值8000亿美金），产品矩阵的拓展就成为非常重要的资本策略。通过发布 Claude Design，能很好的和 Claude Code 实现联动，完成使用 AI 开发软件的闭环。
至于现阶段 Claude Design 够不够用不重要，毕竟故事和逻辑是成立的，作为初版它也有后续升级迭代和优化的空间。在我们目前的试用中，它的生成效果也就那样，但消耗的 Token 量（你最好确保自己有个足够鼓的钱包）……
Claude Design 有新上市的光环风头正盛，那是否还记发布也还不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。
再往前是否还记得使用 StableDiffusion 训练 Lora 和 Checkpoint 的工作流？
工具一直在更新，即使今天还很粗糙。但用发展的眼光看问题的话，终有一天它生成的质量会足够高足够智能足够可控，甚至通过脑机接口 BMI 实现所想即所得的水平（又到了做梦的时候）。
但是，那天是什么时候？
以及，和你现在设计的界面有什么关系？
作为设计师一定要搞清楚的逻辑，就是 AI 生成界面和图像的过程，只是一种工具的发展和进步，提升了设计师的设计效率。就像人类发明了电脑和软件，取代了尺规作图，同样也大幅度降低了设计的效率和成本，但设计师这个岗位并没有消失。
因为使用工具的人之间的差异，会直接影响最终的输出效果，就像用同一个 AI 生成工具你可能就是做不出网上高赞帖子的案例，都用美图秀秀不用 PS 去 P 图你也 P 不过有一定专业积累的摄影师。
而且任何工具使用都有门槛，就一个简单的 Claude Design、Google Stitch 安装和使用都需要学习和适应，生成结果还要做大量的调节和校准，这些就不是工作量，老板和产品经理也一定能闲得每天学习新工具并且直接自己干？
我相信有很多公司现在都很热衷于拥抱 AI，强行推进 AI 的工作流，从企业战略和发展的角度来讲是能够理解的，但在实际执行层面上却不会像想的那么美好。其中最大的问题就是前面提到的整个产业的不确定性，产品还都有各自的局限。
每个团队在搭建 AI 工作流的时候需要做技术的选型，以及围绕自己的实际生产场景优化工具的使用方式。往往为了一个简单的工作结果就要耗费大量的精力去搭建工作流，而这个工作流很可能是一次性的，因为之后的工作场景发生改变这套工作流就用不了了。
有些同学可能心态好点觉得这种过程可以收获宝贵的经验，但最不幸的，就是工具的升级和更新（甚至关闭）可以直接颠覆掉原来的做法，让原先的成果毫无意义。
在我朋友中普遍得到的反馈，就是在稍微复杂的专业场景中，强行适配 AI 的结果往往只有增加工作量，原先目标的降本增效，实际导致了更长的工作时间和更晚下班，从去年到现在在不同 AI 工具中做研究疲于奔命。
换个角度思考，其实就是工作过程变成今天用 PS，明天用 Figma，后天用 Excel 或 PPT 进行设计，每一阵子换个工具设计相同的东西，而它们又不能解决设计过程中最复杂的决策部分。
也就是我们一直在使用充满不确定性的工具去寻求相对确定的结果。
这就是今天 AI 工具在 UI 行业中应用的真相，不管我们怎么用逻辑还是格局去判断未来 AI 要实现一切，但起码不是今天和最近，就是变得更强了，也依旧需要有人去操作和控制。
而我们现在要做的是关注最终输出的结果，而不是和别人炫耀 Figma 用的好，还是 Sketch、XD、即时、Pixso 用的好。等到市场竞争格局基本确认，通用的工具也普及以后，再去掌握和学习也不会低人一等（门槛不会高到哪里去）。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com