附 Figma 官方文案节选：无论多少次被宣告 “消亡”，设计始终生生不息。它藏在帮你避免坐过站的地铁图里，藏在一目了然的菜单里，也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流，也不是可被替代的技术，它关乎体验、关乎感受，而非仅仅追求功能可用。设计屡遭唱衰，却一次次证明自身不可替代。官方链接：https://x.com/figma/status/2061101954034442293
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
谈论 AI 就绕不开大模型，它是 AI 技术应用的核心。
简单解释 AI 大模型，就是一个通过特定方法和大量数据训练出来的 “自主化程序”，这个程序可以根据用户输入的指令自己做出 “判断和思考” 后再进行回复。
传统程序虽然也可以执行用户的指令，但回复的内容和方式不会超出一开始预设的范围，非常有限。
而 AI 大模型则大大拓展了这个边界，我们不用提前预设各种条件和逻辑，它就会自己去理解问题再决定给出什么结果。
当然，这个边界只是不能生成图片(截止到2026年初)。而 Google 开发的 Gemini 大模型则是多模态模型，可以生成图片和视频等内容。
不同模型会有不同的表现和优劣，但因为大模型的开发需要尖端的技术和庞大的规模（训练），门槛极高，所以市面上主流的大模型数量并不多，可以简单分为国内和国外两个阵营。
国外的主流大模型包括 OpenAi 开发的 ChatGPT，Google 开发的 Gemini，Anthropic 开发的 Claude，xAI 的 Grok 等。
国内的主流大模型则包括字节开发的豆包，阿里开发的千问 Qwen，深度求索开发的 Deepseek，月之暗面开发的 Kimi 等。
因为前面说过大模型的局限性，所以为了应对不同的应用场景，团队就会将它们裂变出不同的版本。比如千问既有 Max 语言大模型，还有 Omni 全模态（文字、图片、音频、视频）大模型，针对处理问题的难易度又分成了 Max、Plus、Flash、Lite 等版本。
完整的大模型体积和参数都非常庞大，需要部署到专属的算力中心，并通过云服务来实现用户的访问和使用。也就是需要联网使用，但因为国内网络服务的限制（不可抗力），我们无法通过国内电信访问国外的主流大模型。
虽然说国内大模型的水平在这几年突飞猛进，但离国外的大模型还有一定的差距，在实际工作场景中多数应用的也是国外大模型，所以访问它们就需要大家自己发挥主观能动性解决了。
顺便再解释一个基础的问题，大模型除了远程访问以外，也可以在本地进行安装。部分团队（如千问）会在网上开源自己的大模型供其它人下载和使用，当我们下载到本地后就可以用 GPU 来运行它。但因为大模型对性能的要求极高（旗舰显卡起步），所以本地运行的效果要大打折扣。
而一些企业内部或行业专属的大模型，往往都是使用这些开源大模型进行二次训练和调试后的结果。还有一些针对特定硬件（如手机、眼镜）和特殊应用场景开发的小模型，就暂时不在我们的讨论范围之内。
前面讲过大模型可以类比成一种 “程序”，且它还是后端服务器上运行的程序。想要对这个程序实现命令的输入并返回它处理的结果，就需要应用前端的工具来实现。
比如我们打开豆包的官网，就可以使用这个网页对豆包大模型提出问题和要求，然后网页上就会返回它处理后的结果。这个网页就是使用大模型的工具，而这只是 AI 工具的其中一种形式，还可以是本地应用程序、手机 APP、小程序、硬件定制系统等等。
我们大多数人开始接触 AI 大模型，都是从这些官方的工具开始，它们最基本的功能就是根据指令返回文字或图片信息，我们会把它们当成是一种可以对话的人工智能客服。
但实际上它们可以发挥的作用远不止于此，比如帮你整理本地的文件夹清理重复的文件，帮你自动修图并完成动态相片的剪辑，帮你编写程序并自己运行和检测等等。想要实现对话以外的其它功能，就需要借助特定的工具才能实现。
所以除了最基础的对话工具外，行业还衍生出了很多激发大模型潜力的 AI 工具。它们可以借助大模型完成程序开发、视频剪辑、操作托管、热点整理、消息推送等等。
到这里我们就要清楚，AI 大模型是大模型，工具是工具，大模型是基座，而工具是大模型的具体表现和应用形式。
我们更进一步认识 AI 工具，就可以把AI工具分成官方工具和第三方工具两个种类。
官方工具就是 OpenAI、Google 等大模型企业自己开发并绑定自家大模型的产品，而第三方工具则是其它团队开发，再接入到大模型进行使用的工具。
比如本地聊天机器人 Cherry Studio，它本身只是个简单的聊天对话工具，可以自己创建对话角色/助手，但需要接入大模型以后才能进行对话。还有著名的AI编程工具 Cusror，只有接入大模型以后，它才可以实现 AI 编程和代码管理。还有前阵子火遍全球的龙虾 Openclaw，也只是个本地工具，需要接入大模型后才能识别本地的文件和执行命令。
官方能提供的 AI 工具与服务往往很有限，所以在真实项目流程中，我们就会混合使用多种工具来完成工作。就像以前做一套项目除了用 Figma以外，还要结合使用 Adobe PS、AI、C4D、AE 等软件。
而第三方工具和官方不同的是，官方工具默认连接自家的大模型，用户直接登录就能使用。而第三方工具要接入大模型，就需要进行额外的配置，也就是添加大模型的 —— API。
API 就是接口，是前端工具连接后端服务器的通道，而这个通道默认是上锁的，还需要提供对应的密钥（API Key）才能正常访问。
部分工具会自己接入各大模型的 API，用户只能选择它提供的模型，并只需要对这个工具进行付费即可。
另一部分工具则需要用户自己选择模型和配置 API，需要我们访问大模型的 API 开放平台进行申请，然后再将它们生成的 API Key 填入到工具中完成连接。
API Key 就像是一个电话号码，当我们申请完并进行使用，就会产生一定的 “流量”，而 AI 产生的流量用专业术语形容叫词元 Token。
使用 API 完成的任意 AI 服务，都会消耗 Token，且因为 AI 的计算成本极高，所以主流大模型都会针对 Token 消耗量进行收费。就像电信运营商一样，既有包月服务附带一部分流量，超出部分还要按量计费。
在实际的 AI 工具使用过程中，Token 的消耗是极其巨大的，往往会造成沉重的成本，而这个市场也遵循一分钱一分货的真理，越好的大模型价格就越贵。以最适合编程的大模型 Claude Opus 为例， 一个程序员高频使用消耗的 Token 账单可以从数千到数万元不等。所以我们也会从性价比的角度出发，来搭配不同的模型进行使用。
总结我们应用 AI 的本质，就是通过工具来操作大模型。而工具的作用不同，大模型本身的特性和价格也不同，就导致我们在面对一个复杂的任务时，需要选择多种 AI 工具和不同大模型来实现。
学习使用 AI，和传统的单一软件教学不同，不是只学会某个工具的功能和操作方法，而是了解不同的 AI 工具以及大模型的特性，通过组合它们来实现自己目标的方式。这不是设计或产品思维，而是工程思维的具体应用。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来，自然成为视觉焦点。
引导用户注意力优先落在关键信息或操作点上，这就是对比原则，我们可以通过形状的对比让卡片突出，增加视觉表现力：
在一些视觉页面中，也可以用异形容器增加视觉表现力，可以结合主题设计容器，例如下方就是一个以纸质火车票造型作为卡片背景的例子：
也可以结合内容设计容器，例如页面的内容是感谢用户，就可以从感谢信或者信纸的角度设计容器：
在设计中，想要为卡片或页面增加形式感，丰富背景是直接且高效的方式，可以从颜色、底纹、装饰元素这三个核心维度展开，让背景不再单调，为整体设计加分：
1. 优化颜色增加背景的形式感
可将背景的无彩色（如黑白、灰度色）替换为带有明确色相的有彩色（如柔和的薄荷绿、清新的天蓝、低饱和的珊瑚橙等）
借助 “无彩色与有彩色” 的属性差异，让卡片与周围的浅灰背景或普通卡片形成直观色彩对比，快速从整体布局中跳脱出来：
也可以将卡片的单一纯色设计，升级为多种颜色的渐变效果 —— 通过这种渐变色，让卡片与周围的背景、其他组件形成鲜明对比
从而快速从整体布局中凸显出来，成为视觉焦点，快速抓住用户注意力：
2. 给背景增加底纹
在背景中增加底纹（如低透明度的几何纹理、轻微的肌理质感等），不仅可以强化视觉层次，还可以向用户传递页面的风格氛围，增强记忆点。
例如科技类产品用细线条网格底纹增强科技感，古风类产品可以用纸张等营造复古的氛围感：
下面列举了一些常见的底纹元素，可搭配图层的混合模式、不透明度使用：
3. 在背景上增加装饰
可以根据页面/活动添加合适的装饰元素，装饰可以是图形、文字等与页面相关的元素。
装饰元素主要是为了平衡界面视觉，优化整体协调性：当界面存在 “大面积空白” 或 “元素分布不均” 时，装饰元素可起到 “视觉平衡” 作用。
这里的文字不仅是卡片标题，也可以是活动标题或者页签导航，那么文字的设计感可以怎么加呢？我们可以从图形装饰、线条装饰、文字装饰、背景装饰四个方面给文字添加设计感：
1. 图形装饰
将图形放在标题空白处增加标题的设计感：
也可以用来填补标题的空白区域，平衡视觉：
用图形代替文字的某一个笔画，传递产品的氛围：
2. 线条装饰
用简单的线条突出标题，辅助信息分层，突出重点信息，降低认知成本：
3. 文字装饰
用风格独特的字体写一句英文作为标题的装饰：
另一种方法是将文字放大起到装饰作用：
4. 背景装饰
在标题后面增加背景，不仅可以保证标题的可读性，还能让标题抓住用户的眼球，进一步强化视觉表现力：
尽管上面的案例分别展示了不同的提升形式感的方法，但在实际设计中，不必局限于单一形式。
将多种手法灵活组合（比如为卡片搭配有彩色背景的同时，叠加轻量底纹并点缀细节装饰），更能放大视觉表现力，让界面摆脱单调感，呈现出更丰富的层次与质感。
如果这篇内容对你有启发，或是你有其他提升形式感的实用思路，欢迎在评论区分享交流，一起探索更多设计可能性～
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
响应式是一种网页前端技术，让网页可以根据分辨率、设备的变更，自动调整样式和布局。
它的诞生起源于移动互联网兴起的热潮，彼时智能手机访问网站的需求激增，但多数网站的适配都是面向电脑端的大屏幕，仅有少数网站会额外开发符合移动端显示需求的版本（自适应）。
响应式的提出，就是为了解决这种问题，通过建立一套约定好的设计、开发方法，用一套代码自动适配台式电脑、笔记本、平板、移动端等各种设备，提高网站的兼容性和开发效率。
而学习响应式，首先就要从浏览器开始说起。
浏览器是一个非常特殊的软件，比如大家熟知的 Chrome、Safari、Eage 等，我们日常访问的所有网页，都需要通过浏览器加载并渲染出最终的样式。
可以把网页 HTML 文件理解成是一个程序，而浏览器就是运行这个程序的系统（环境），也就是说解析网页依靠的是浏览器而不是 Windows、Mac、iOS、Android、Linux 等客户端系统。
浏览器即系统中的系统（类似虚拟机)，不管在任何系统或设备上，只要安装了浏览器，就可以用大体相同的规则、逻辑去加载、渲染出网页。
但不同设备的屏幕有很大差异，网页如何识别并匹配这些设备呢？
方法主要有两种，第一种是浏览器会识别当前系统和设备，并提供接口让网页读取。而部分网站会准备多种规格的网页，根据获取的设备类型推送对应的规格，这种做法叫做自适应模式。
通常自适应只区分桌面端和移动端两种，较大的门户、购物、工具类网站，普遍使用自适应模式。因为移动端访问网页的需求并不高，所以会对移动端版本做大量的精简，降低开发、维护成本。
另一种方法，则是读取浏览器视图区域的分辨率。任何浏览器的界面，都包含功能区域和视图区域两个部分，功能区域提供相关的软件菜单、操作按钮，视图区域则是显示网页界面的区域。随着设备和屏幕分辨率的变化，浏览器的大小也会不同，网页视图区域也会跟着缩放。
网页视图注定小于整个浏览器的软件窗口，而浏览器作为软件，在系统中的尺寸不等于系统分辨率（或设备分辨率），一方面有系统的全局组件影响，另一方面窗口并不是非得全屏，用户可以任意调整。
所以响应式网页就是根据浏览器的视图区域做适配，不管你是在电脑上缩放软件窗口，还是在不同的设备、系统中打开，本质上都只是显示区域大小的变更。而在浏览器的检查选项中，模拟不同的设备其实就是缩放出一个指定的视图窗口出来。
这种依赖关系延伸出一个新的知识点，即网页显示的分辨率，和显示设备的屏幕分辨率，是两套不同的体系。
这是因为硬件分辨率和系统渲染的分辨率是两个概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸笔记本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系统的屏幕分辨率选择中，默认的却是 1512*982（即原来的 1/2）。
这是因为硬件分辨率太高了，1:1 渲染的话，那么大多数图标、文字是无法被看清的，所以默认使用了 2x 的规格渲染。但这只是其中一个选项，在 HIDPI 技术的加持下，用户还可以选择别的分辨率，比如我会进一步调高到 1800*1169。
在 Windows 系统中同理，虽然有很多高分辨率的屏幕，但是用户为了看清内容，会在系统中设置 120%、150% 的放大效果，等于为系统分辨率做出变更。
说到底，系统显示分辨率的规格也是无穷无尽的。但是不管外部的转换逻辑有多复杂，规格有多少，都和响应式网页无关，它只需要认准浏览器的视图区域分辨率即可。
所以了解线上案例的响应式布局规则，或者检查已经开发好的响应式页面，并不需要切换不同设备查看，只要拖拽缩放浏览器的大小（主要是宽度）即可获得完整的响应效果。
最后总结起来，响应式网页是面向浏览器视图区域做适配的布局方法，而不是面向系统、屏幕分辨率的适配，这和自适应布局有本质的差异。
在 B 端领域，绝大多数项目都只部分兼容响应式，放弃移动端的适配，即使支持移动端也是使用自适应的混合模式。要面对这些复杂的场景，就月需要理解上面这些基础的概念，否则设计师就无法真正满足响应式项目的前期创建和后期交付需要。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
设计组件库是提升设计效率和一致性的重要工具，但如何在频繁迭代和动态调整中高效赋能业务设计交付，一直是行业面临的挑战。兰亭妙微UI设计公司，分享了他们在设计组件库建设中的新思考和实践，供大家参考学习。
本文将分享我们对于“什么是好的设计组件”的看法，并给出一种搭建复杂组件的实用思路。我们还会从资产消费的角度，提供一些优化建议。虽然过程中会涉及不少基于Figma软件的操作细节，但核心思路就像一把“万能钥匙”，无论在哪个设计平台都行之有效，希望这些内容能给广大设计师们带来一些新的启发。
从网上搜索设计组件，我们能找到各种对外公开的设计组件库，同样还有不少或概括或详细的文章，手把手教你“如何搭建一个好的设计组件库”，但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整，如何高效赋能业务设计交付的相关内容，但这恰恰是搜索业务面临的关键问题。
搜索是一个“牵一发而动全身”的业务，每一个微小的设计细节都有可能影响各个业务的数据指标，一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范，完成合规的设计，从这个角度而言它应该比较「好懂」。
而作为服务于整个设计团队的公用设计组件库，面对每月数以万计的调用次数，它必须保障最基本的易用性，应该非常「好用」。
同时，面对频繁迭代，“好的设计组件”还需要保持最快的更新速度，为各个横向团队提供正确的样式，从这个角度来说它还要「好维护」。
因此，「好懂、好用、好维护」是搜索设计语境下，对一个“好的设计组件”的定义。
接下来，我们将从这三个「好」入手，分享搜索设计组件库在升级过程中的一些思考，希望能和大家共同探讨。
“万丈高楼平地起”，我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
首先，在搭建组件时，我们可以考虑采用多层嵌套的方式，即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作，甚至还能在解绑组件时，通过选中内部的子组件图层进行解绑，大大简化了搭建和使用双方的操作流程。
在多层嵌套的思路下，我们可以进一步用“底层灵活、上层收敛”来指导组件的搭建。这意味着底层变体的形式足够多样，能够支持大部分的状态切换，而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示)，以降低超出规范设计的可能。
具体的搭建流程可以大致分为三步：场景收集和分析、搭建基本变体组、拓展高阶变体组。
我们将通过视频组件搭建的生动案例，具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库，使得组件本身既足够灵活，又能起到足够的约束作用。
在着手搭建某类组件时，我们首先通过规范确认和场景遍历，广泛收集各类变体。
随后，从我们能想到的所有维度出发，对这些变体进行细致定义。
这样，我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等，而第一行则罗列出各种维度，如宽度、比例等。
通过这种方法，我们可以将原本零散、杂乱的组件变体描述，系统地归纳整理成一张清晰明了的表格。
表格通过不同维度来唯一确定一个变体，这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致，常见特性则涵盖了最常见的分类性质，如宽度、高度、数量和优先级等，而业务特性则与具体业务紧密相关。
在搭建组件时，我们可以遵循「共性-常见特性-业务特性」顺序，这样的顺序有助于降低理解成本，因为最符合心智的分类被置于外层，同时底层的组件又保持了足够的灵活性，便于切换各种变量。对于业务特性，我们可以根据实际情况灵活处理，既可以将其作为基本组件的延展，也可以不将其纳入组件范畴。
以视频组件为例，我们从表格中获取的信息如下：
据此，我们可以轻松梳理出视频组件搭建流程的优先级：
值得注意的是，“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则，我们将其插入到搭建播放状态之前。
因此，视频组件的最终搭建流程为：
完成对视频组件搭建的分析，我们就可以有条不紊地开始搭建组件了。
先搭建基本组件视频组件，再用基本组件搭建高阶组件。
这一步骤虽然为大家所熟知，但仍需格外注意，如配置项的设置要力求合理，也可以融入设计规范和使用规范，同时还应将一些搭建过程中的零散组件集中收纳避免被调用。
关于这些具体的注意事项，我们将在后续部分进行详细阐述。
至此我们完成了组件搭建的基本流程，一个达到及格线的视频组件就诞生了。
据统计，优化后每次调用视频组件将节省至少10步的点击操作！
完成了一个基本组件的搭建后，我们可以转换视角，从使用的角度来审视并检查这个组件。
我们期望，从插入组件变体、切换组件配置，再到最后的解绑组件，整个流程都能纵享丝滑且稳定可靠，确保业务设计师在使用过程中获得最佳体验。
我们可以一步步来审视组件的使用过程。
首先是插入组件，据观察，通常有三种方式：
①在左侧的资产面板(Assets)中直接找到对应组件并插入；
②通过查阅设计规范，锁定所需的变体后复制粘贴；
③选中一个不需要的组件，通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。
很明显，在这个过程中依赖的是组件的精准搜索和快速定位。
为了提升搜索精度，我们可以从组件命名入手，采用中、英、数字结合的方式，实现模糊匹配；也可以在发布时隐藏不希望被调用的组件，以减少无用的搜索结果。
如果组件是采用前文提到的“多层嵌套”方式搭建的，我们可以添加“Preferred”子组件，这样在切换时会优先展示这些子组件，这个功能在切换图标时尤为实用。
对于习惯边查阅设计规范边使用组件的设计师，我们增加了更多实际使用的正误案例，这些案例直观展示了组件变体的正确选择和使用方式，进一步降低了规范的理解成本，有效辅助设计决策。同时，我们专门维护了一个固定区域，用于平铺展示所有组件变体。
为了确保能够轻松点选，我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体，从而快速选择所需的组件。
在组件配置阶段，有三项注意点能让组件更加易用，即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
考虑到C端组件的多样性和用户的使用习惯，我们应避免使用过于复杂的分组方式。相反，应更注重组件的样式展示，并尽量简化组件的层级结构。这样，设计师在使用时能够更直观地看到组件的外观，而无需深入复杂的层级去查找。
另外值得注意的是，Figma会默认用组件集合中最左上角的组件生成预览样式，因此应当把视觉上最有代表性的变体放在左上角，这个效果在切换变体(Swap instance)时很重要，因为目前在该面板中没法查看组件细节，只能靠缩略图和名称来推测是哪个组件。
其次对于配置项的设置也大有讲究，业界有组件库为了实现C2D2C，从源头上将设计组件和前端组件的配置项打平，这是不错的思路，但有可能会提升设计侧的理解成本。
针对搜索业务的特殊语境，我们还是选择了从「规范理解」角度去设置组件的配置项，将所有允许自定义的配置尽可能外露，并清晰地说明修改限制，如字数限定、选项个数等，这样能够在使用的过程中强化业务设计师对规范的掌握。
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率，建议对选项和选项之间，以及外层的不同配置项，都按照一定的逻辑顺序进行排序。
最后一点，我们称之为“贴心地保存修改”机制，这个针对的是文字修改的场景。
在实际操作中，使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时，已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要，它能够记忆并保存修改过的文字内容，从而免于重复输入。
还有一些情况是，某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值)，用户切换后就会发现组件完全变了，只能撤回。
为了避免这类情况，建议使用另外的标记来表明组件某个设置项是不可切换的。
完成了组件的搭建和检查，接下来让我们聚焦于组件的日常维护。
这一环节可以从两个维度展开，一是依托中台的日常数据监控进行维护，二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设，在本文中我们不做更多展开，重点讨论前者。
数据监控的方式主要依托Figma中的组件数据看板(查看路径：View libraries-Analytics)，看板中展示了各个组件的调用数和解绑数数据，这些数据不直接反映组件的优劣，但如果我们观测到某个组件解绑率偏高，我们会考虑直接把它作为模板而不是创建成组件。
以上是百度搜索设计团队在设计组件库升级过程中的心得分享，包括搜索业务对于“好的设计组件”的诉求，以及一些搭建和优化组件的实用思路，核心是探讨如何从组件库建设的角度入手，成功助力团队提升设计资产消费效率。
当前我们已经完成设计资产工程化的前序环节，我们对设计资产的升级和探索并没有结束，未来我们将持续探索设计系统工具化的形态、与AI大模型结合的机会，通过丰富消费途径，实现在业务交付的不同阶段下全方位提效。
这部分内容后续有机会也将会和大家见面，请大家期待！
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
插图的使用已有 10,000 年的历史。最早的图画之一是西班牙发现的手部轮廓图，距今已有 66,000 多年历史。随着互联网的出现，大约在 1997 年，插图的使用逐渐增多，谷歌的每日涂鸦和红牛能量饮料就是其中的典型例子，包括国内的百度，它们都在将具有特殊意义的插图融入产品中。
在过去插图通常使用铅笔、粉笔、钢笔、蚀刻画和颜料完成，但现在经过技术的发展我们可以通过更智能的方式来呈现插图；
一个好的插图还可以更好地生动地传达信息，我们如何确定最合适的插图风格？插图怎么才能体现品牌感？怎么能引起用户群体的共鸣？对于内容，哪种类型的插图最能强调产品特性，本篇内容分享了相关的案例，并解析如何针对不同用户群体确定产品插图风格；
1、当代产品设计中插图的战略价值
以互联网产品为例，现在市场上随便拿出来个产品都会有一堆竞品出现，那如何在众多产品中体现自己产品的特性呢，除了功能层的差距外，无非就是“看和用”这个方面了，我们以看为例，像Ant Design的「科技温度」风格、Discord的「夜光贴纸」风格，都展现了产品的个性化，甚至说从插图风格就能get到产品是做什么行业的；
当情况挺复杂的时候，要是全靠大段大段的文字去讲清楚，用户可能得费不少劲才能弄明白。这时候，要是有插图来帮忙，往往就能直接把意思给展现出来，让用户能更快地抓住信息的核心意思，例如医疗类APP用插图替代专业术语；
好的插图不仅起到美化视觉信息传达的作用，也能够对业务起到数据方面的提升，例如多邻国的插图表情，他们在2023年的调研数据上显示ip系统提升用户学习时长28%，Headspace冥想插图动效减少用户焦虑指数；
不同的群体对于认知和喜好不同，首先就要明确是给谁做，每个产品都有自己用户画像，拿到用户画像去进行拆解设计目标，例如年龄在18-25岁，这就决定了设计风格偏年轻化，女性用户群体占比70%，决定了色系不能使用过多的冷色系（产品主色如果不是按照群体来的，那当我没说），在例如是一线还是二线三线，职业分布如何，这些拆解出来后，方向不就确定了吗，无非就是通过受众群体做减法，减少无用的脑暴；
|
用户特征 |
设计切入点 |
|
18-25岁 |
年轻化风格、新颖、趣味性 |
|
男性70% |
减少暖色使用，冷色为主 |
|
一线城市居多 |
避免营销化、低端风格 |
|
对科技、技术感兴趣 |
冷色系、极客风、极简... |
搭建插图系统和设计规范流程是一致的，都需要在最基础的设计原则框架下完成，否则就脱离了基本的体验；
视觉降噪原则：构图简单，突出核心表达信息，避免过渡装饰干扰用户
语言符号化：使用行业共识的符号做为基础形象进行设计，降低认知成本以及适配国际化，例如网络中断使用wifi、球形网络；
场景关联：除了基础的插图，在特定场景下的插图也要预判用户在当前场景下的情绪变化，通过插图来提升用户情绪峰值，例如社区产品中，用户成功发布一个帖子，给用户反馈的插图应当是开心、活跃让用户感受到产品的情绪价值；
动态情感曲线：在新手引导中通过每一步的交互流程来变化插图表达的情绪，例如开始引导时突出表达信息，在一个流程结束时强化氛围鼓励用户，用户情绪进度期待→奋斗→高昂，促进用户进一步操作；
视觉原子构建：提取品牌色彩、标志性符号，形成基础的插图基因库；
品牌故事元素贯穿全场景，例如茶颜悦色将古风和现代插图风格结合，创造了独特的品牌调性，并且每个插图场景都在传达品牌故事；
多端一致性：能够三端自适应适配尺寸，在小尺寸屏幕下插图的识别性是否会出现问题；
扩展性：在各大节日时插图是否能够结合当前节日扩展，例如春节时插图是否可以添加灯笼烟花相关元素；
插图风格系统是品牌视觉语言的延伸，需通过基因提炼-规则制定-动态迭代的三层框架实现规模化应用；提到喜茶能想到的是描边黑白风格插图，茶颜悦色就能想到古风，而提到飞书我们就能想到极简具有规则的形状插图，这就是通过插图风格提升用户对产品认知；
前面每一步的分析都是为执行辅助
|
品牌基因提取 |
从品牌色、logo中提取颜色标志性符号，上面提到过 |
|
用户认知匹配 |
例如年轻用户偏高饱和，小众独特风格，但银行类的产品就需要体现出权威、安全、稳重的风格 |
|
组件化拆解 |
代入组件化思维，从小到大进行搭建，例如原子层→分子层→模块，也可以根据场景搭建基础层→装饰层→插图 |
|
情感化分类 |
按照场景情绪进行分类，成功、错误、失败 |
通过视觉表达降低用户认知负荷，引导用户关注或操作核心功能；
这个比较常见，很多产品在新功能或者复杂功能的时候会建立新手引导的流程，这时候使用单一的箭头引导会比较单一，就需要添加一些插图做为情绪化引导，提升用户趣味性；
在一些上传、加载的场景其实也可以融入插图来缓冲用户焦虑，现在大多产品都是使用比较简单的加载方式，实际上可以将品牌插图融入进去；
将品牌DNA转化为可感知的视觉叙事，建立情感化认知锚点
在登录页/加载页/404页等全链路重复品牌标志性元素，提升用户对品牌的记忆；
用插图隐喻传递品牌主张（如环保产品用树木生长插图替代口号式文案）
在特殊节日叠加一些装饰元素，提升仪式感，上面有提到融入节日元素；
解决体验断点，通过情感化设计提升用户容忍度与愉悦感
出现bug的页面通过插图传递「可控感」，用修复工具插图+明确解决步骤缓解用户焦虑；
在新功能上线时或者改版功能时，用插图对比新旧流程差异，这个主要在b端场景使用会比较多
在用户完成某项任务或完成某个阶段流程时给用户反馈出高成就感的插图，例如keep的成就解锁，学习软件种每日学习打卡成功等；
分析三个不同行业的插图，来看看他们的插图差异化
首先看看金融类产品如何在专业与用户情感传递之间进行平衡
颜色方面围绕稳重复合色（深蓝+浅金），避免高饱和色彩带来的廉价感；
仅在低风险场景（如教育科普页）使用轻度拟人化角色，而核心功能涉及到数据方面的则使用抽象的数据的可视化插图；
在出海的一些国家涉及到文化冲突，例如在中东区域就删除了动物形象用植物和建筑符号代替；
小红书通过潮流涂鸦的风格建立z时代圈层共鸣，为用户提供固定的模板，降低用户创作成本，提升产品的品牌主张，同时能够营造出社区统一的氛围感。
以线稿为主，为用户提供自由创意的涂鸦玩法。
动态生成：根据实时数据改变插图元素，如不同的天气、心率的高低、运动的步数等等；
天气软件中可以根据不同的天气变化背景，当然这个目前已经广泛应用了，但未来也是不变的一个趋势；
可通过ai流程来制作统一的插图风格进行应用，并且风格的局限性相较于之前也更灵活了，在前几年只能通过mj喂图抽卡来生成统一的插图，并且时间成本非常高；
在前两年只能通过训练大模型的方式训练具有产品特点的模型，并且训练周期非常长，配置要求高，随着现在的技术更新，线上出现了很多训练模型的方式，不在依赖本地配置，通过线上训练的lora模型，内存比较小也方便调用，时间上相对之前大大提高；
转载：防脱发药水
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
| 组件 | 选择逻辑 | 核心特点 | 生效方式 | 最佳使用场景 |
|---|---|---|---|---|
| 开关 | 二元独立切换 | 单功能、无关联 | 操作立即生效 | 单独功能开启 / 关闭 |
| 复选框 | 可多选、可全不选 | 同组关联、支持全选半选 | 多为统一确认生效 | 关联选项批量勾选 |
| 单选按钮 | 互斥单选、必选其一 | 组内唯一、排他选择 | 选定即锁定选项 | 多选项只能选一个 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
参考价值：金融科技类产品的深色模式设计、数据呈现方式与交互逻辑，都有很高的借鉴意义。
蓝蓝设计的小编 http://www.lanlanwork.com
