通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来，自然成为视觉焦点。
引导用户注意力优先落在关键信息或操作点上，这就是对比原则，我们可以通过形状的对比让卡片突出，增加视觉表现力：
在一些视觉页面中，也可以用异形容器增加视觉表现力，可以结合主题设计容器，例如下方就是一个以纸质火车票造型作为卡片背景的例子：
也可以结合内容设计容器，例如页面的内容是感谢用户，就可以从感谢信或者信纸的角度设计容器：
在设计中，想要为卡片或页面增加形式感，丰富背景是直接且高效的方式，可以从颜色、底纹、装饰元素这三个核心维度展开，让背景不再单调，为整体设计加分：
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。
参考价值：金融科技类产品的深色模式设计、数据呈现方式与交互逻辑，都有很高的借鉴意义。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com