设计组件库是提升设计效率和一致性的重要工具，但如何在频繁迭代和动态调整中高效赋能业务设计交付，一直是行业面临的挑战。兰亭妙微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。
响应式是一种网页前端技术，让网页可以根据分辨率、设备的变更，自动调整样式和布局。
它的诞生起源于移动互联网兴起的热潮，彼时智能手机访问网站的需求激增，但多数网站的适配都是面向电脑端的大屏幕，仅有少数网站会额外开发符合移动端显示需求的版本（自适应）。
响应式的提出，就是为了解决这种问题，通过建立一套约定好的设计、开发方法，用一套代码自动适配台式电脑、笔记本、平板、移动端等各种设备，提高网站的兼容性和开发效率。
而学习响应式，首先就要从浏览器开始说起。
浏览器是一个非常特殊的软件，比如大家熟知的 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。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
因此今天兰亭妙微UI设计公司，来讲解 B 端产品界面的视觉风格，聊聊在整个行业当中视觉风格的变化与目前的现状。以及给大家说说未来应该如何选择自己产品的视觉风格～
我们会将整体分为行业初期，萌芽期、成长期、野蛮发展期、新阶段 ，每一个阶段给大家总结一个最为流行的风格，并分析这个风格出现的原因，方便大家进行理解。
我们把时间拉回到 2012 年。在那时，Ant Design 还没有出现，也没有什么 Element、Semi Design，行业当中最早的 B 端系统都是以客户端的形式进行呈现。
整体风格也非常老旧，像是那会儿的 Office、SAP、Salesforce，你可以看到都是他们青涩的模样。
在经典传统的设计风格当中，会使用大面积的白色作为底色，同时在页面中用灰色进行分割，使得整个页面散乱抢眼，导致整体的视觉很难被大众所接受，总体感觉信息较散，难以进行聚焦。
而在早期，出现这些老旧风格主要有三个原因：
关于这类风格的产品，大家不要觉得这夸张，其实在目前依旧有很多产品会延续这个风格。比如 医疗类产品、工业生产类系统，对于他们而言，能用即可，不必纠结太多。
但随着时间的推移，行业中对于 B 端设计的要求也在逐渐变高。
我们将时间推移到 2015 年前后，随着行业不断发展，在国外 Fiori、Salesforce 的出现让大家意识到，这类型的 B 端产品也是需要设计的。
因此国内外的很多系统都是在这一时间面世，像是 Ant Design、Element 都相继发布。
由于这些设计系统的诞生，你会发现大家对于整个 B 端设计有了一点自己的想法。
在设计上，会去考虑使用 区块划分，将整个页面进行规整呈现。
比如 SAP 在使用了 Fiori 过后，就会使整个界面更干净。
同样非常老牌的 Salesforce 在 2015 年的时候。也带来了相当大的视觉变化。整体都能感受到，整个页面会通过不断的分层、颜色的划分、通过黑白灰的方式去呈现页面当中的基本信息。
我们的时间来到 2018 年前后，在这个时间节点，很多产品都推出了自己的设计系统，对于 B 端设计风格而言，也会提出更高的要求。
比如 Teambition 产品当中，它们提供了自己的设计系统的内容去指导整个产品来进行迭代和优化。同样 Ant Design 它们也推出了自己的 Ant Design Pro 来演示使用设计系统过后，能够搭建出什么样的产品。
同样，这个时段很多产品也开始进行自己产品的视觉优化，这时候整体的风格是以：黑色侧边导航为主，然后内容形态进行延展。
比如像有赞、Coding、微盟、飞书，之前都是这样的设计风格来进行呈现。
你会发现它们在整体的设计上都会更加重视页面的分块颜色的区隔，整体页面的识别效率。同时这段时间爆发出来非常多的 B 端产品，随后国内都会按照侧边黑色导航的样式进行进一步设计，这一定程度上提高了国内 B 端设计的下限～
我们随后将时间推移到 2019 年后，在这时诞生了新拟态设计风格。
它最早是乌克兰设计师 Alexander Plyuto 在追波和 ins 发布的一副系列作品，随后大家发现非常奇特，所以得到广泛的关注。
新拟态的设计风格是以立体效果与浮雕元素，呈现更为三维立体的效果，会给人一种奇特、梦幻的界面体验。
随后就会有很多产品都开始进行跟进，比如 智能家居的产品、金融类产品都有所涉及，甚至很多 B 端产品也勇敢尝试，但大多数设计师设计完过后，整体评价都不算太高。
为什么没有大规模的推行，我觉得有 3 点原因：
现在还会使用新拟态风格的界面设计越来越少，大多数只会在官网设计的局部进行使用，这样可以转换视觉感受，给到用户更好的视觉冲击～
时间来到 2022-2024 年左右，你会发现很多产品都开始在这个时间节点进行更新。
像我们熟知的 飞书、有赞、微盟、ONES、Coding，再到 Ant Design、Salesforce，你会发现非常多的产品都在进行界面风格上的迭代。
对于这个风格，我们愿意叫它为 灰白风。
整体页面是以 灰色和白色 进行的页面划分，在分布上灰色占据弱侧信息，白色占据核心信息，进而形成对页面内容的划分。
聊到这里，可能有部分同学不太理解，这里我们以飞书管理后台的迭代作为示例，给大家进行讲解。
在 2018 年，飞书管理后台的第一个版本，采取的就是沉稳侧黑风，
在 2022 年，飞书的管理后台开始改变为灰白风格
由于业务的叠加，2023 年时，在此基础上增加了顶部导航的业务维度，最终形成了现在这样的界面。
为什么这类型的风格会大受追捧，我觉得有以下几个原因
关于设计风格，我们这篇只是讲解了过去的风格内容，下篇文章我们讲解当前整个 B 端产品的设计梳理，讲解了更为重要的四种风格。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
今天兰亭妙微UI设计公司，跟大家分享登录页的 12 种设计切入点，相信总有一款会入甲方爸爸的心。
作为设计师，我们常常面临一个窘境：要面对各式各样客户审美的挑剔，有时候被虐得都怀疑人生。
但找参考时，思维又容易被局限在常见的几种形式里，我通过分析大量优秀的登录页，总结了 12 个高级的设计切入点，希望能为你打开新思路。
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
通过以上 12 个案例的系统性拆解，我们发现 B 端登录页的设计可以有如此丰富的切入点。
它绝不仅仅是摆放表单的简单任务，而是一个融合了品牌战略、用户体验、视觉营销和技术表达的综合性设计挑战。
希望这 12 个切入点的详细分析，能成为您应对登录页设计挑战的灵感源泉和实用工具箱。
一个高级的设计，其最高境界是让用户感觉不到“设计”的存在，却能高效、愉悦地完成目标，并对品牌留下积极而深刻的印象。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
哈喽，这里是兰亭妙微UI设计公司，今天分享的是「如何化解错误时刻」。
说到用户体验设计，大家首先想到的都是“正常场景”：注册流程顺畅、支付顺利完成、输入顺利通过。但现实并非如此，用户总会不小心犯错误，系统偶尔也会掉链子。但这些“问题时刻”往往最容易被忽略。要是产品没法帮用户解决问题，所有错误的后果都得用户承担，最后只会让他们焦虑。换句话说，错误是用户体验的最大危机，也是削弱用户对产品信任的关键节点。
相关干货：
这里的“微设计”比我们常说的“微交互”范围更广，包括文案、视觉元素，还有各种反馈设计。这些小细节看似不起眼，却能精准安抚用户的出错焦虑，帮他们重新找回掌控感。
微设计的三个核心要素：
在深入探讨具体案例之前，让我们先来探究一下用户遇到错误的背景和原因。下面简要总结了用户出错的类型、背后的心理，还有哪些场景容易出错。
在用户体验理论中，错误分“失误”和“错误”两种，前者是用户在执行操作时无意识犯下的错误，后者是一开始就想错了。
失误：行为不当
目标是对的，但采取的行动有问题。例如不小心点错了按钮、着急打错了字，大多是做熟悉的事时分心、没留意造成的。
错误：判断失误
从一开始就误解了情况。比如看到一个显眼的按钮，以为是自己要的功能，结果点击后才发现不对。这种情况多是因为界面的信息混乱、层级不清晰，呈现的内容含糊不清。
通常“失误”发生在执行阶段，“错误”发生在规划阶段，但实际中两者经常一起出现。重点是搞清楚 “为什么会出错”，并给出解决方案。
出错不只是功能出问题，更会让用户慌张：“万一没法恢复怎么办？”（恐惧）、“我无法控制这种情况”（无助），甚至 “可能我根本不会用这东西”（自责）。最糟的就是自责——用户不怪产品怪自己，压力越来越大，最后干脆关掉页面、放弃使用。
所以设计师的任务很明确：别让用户背锅，明确告诉他们“能补救”。先给情绪上的安慰：“没关系，你可以再试一次。”
有些时候，用户的选择压力和出错焦虑会被放大，心里越没底，越不敢动。
操作不可逆：删除文件、转账、重置数据等，一旦点错就没法恢复，让人不敢操作。
操作反复失败：连不上网、输密码总错，越试越沮丧，甚至会想 “是不是只有我用不了？”
尤其是对准确性要求高的场景，比如金融、商务、B2B工具，出错体验的设计更关键。有时候对于出错的恐惧，比错误本身更影响用户行为。
支付/转账：错误导致资金损失的压力以及造成损失的可能性。
传输/删除关键数据：知道没法恢复，更不敢操作。
表单反复验证失败：失败的次数越多，就会越沮丧。
应对错误的核心是“双管齐下”：提前预防 (别让错误发生) +及时恢复 (错了能轻松补救)。单独用哪一个都不够，需要根据场景灵活设计。
从根本上阻止可能出错的情况，或者用视觉提示帮用户识别风险。比如禁用按钮、提供有限的选项、防止重复点击。某种程度上哪怕稍微限制一点用户的自由，也比让他们出错好。
例如订酒店时，对于有住宿天数要求的酒店，预定的天数少于住宿天数时，无法进行预订；类似的还有“信息没填完时，登录按钮是置灰的”、“加载时不能点按钮，避免重复操作”，都是这个道理。
在搜索框、输入框里加入自动补全或关键词建议，不需要让用户记住全部信息，输入又快又准。尤其在输入地址或者比较复杂的内容时，这种方法能大大提高效率。
例如在输入地址时，搜索词会高亮显示，并且会可能提供清晰的搜索建议：想搜的是地铁、公交还是某家店铺，方便用户减轻记忆负担，快速做出选择；在移动设备中，键盘的局限性导致打字失误的情况频繁发生，飞书的错别字自动修正提示，能够很好地提高输入速度和准确性。
对于需要重复做的操作，可以把常用的选项设为默认，帮助用户少费心。但默认选项不一定永远是对的，如果存在错误的可能性，得让用户能检查修改，不然反而会“诱导错误”。
例如在外卖软件中，可以把常用地址加上默认标识，省去了再次添加收货地址的麻烦。但当默认地址和当前的位置差很远，超出配送范围时，购物车中的商品会呈置灰状态无法进行购买。
用户进行多步骤任务时 (比如注册)，万一不小心退出了再进来，保持之前填的内容还在。这样不需要用户重新填，也不会忘记已经完成了哪些步骤，减少失误的发生。
编辑文章时，内容可以自动保存到草稿箱中。哪怕退出登录过两天再进入，草稿箱里的内容都还在，对于用户来说也是一种很贴心的体验。
对于需要记住很多选择的流程(比如订酒店)，把选好的日期、人数、筛选条件固定在屏幕顶部，随时能看。这种设计方法允许用户在不依赖不准确记忆的情况下再次确认信息，从而及早预防错误。
像Airbnb会把要去的地点、 入住时间和人数这些筛选条件固定在页面的顶部，让用户可以持续查看当前的预订情况，这样在找房子的时候会觉得更踏实。
对于删除文件或重置数据这类不可逆的操作，一定要增加 “确认步骤”，进一步确认用户的意图。
一旦出错无法恢复的操作可能会引发用户的强烈焦虑，因此需要清晰传达操作的影响，并通过问题和警告来确认操作，例如：“您确定要删除xx？删除后不可恢复，请谨慎操作。”
但注意不能滥用确认弹窗，过于频繁的确认弹窗可能会让用户在不仔细看内容的情况下，习惯性地点击“确定”，增大出错的风险。只在重要且不可逆转的操作中使用。
例如删除文件时进行二次确认，同时告知删除后文件的位置、删除后文件是否可以找回等一系列内容，让用户对于删除的内容有清晰的认知；对于确认后无法再修改的信息，也最好来个再次确认，让用户做到心里有数。
对于表单输入这类容易出错的场景，好的使用体验是在输入时就“实时”提供反馈，而不是等所有信息都填完点击提交之后再提示错误。
比如字符超了、密码格式不对，立即用红色文字、错误图标、边框高亮、震动动效等形式反馈出来，减少重复输入的麻烦。
例如发动态时，如果输入的标题字数不符合要求，会在标题处有一段反馈提示，提醒用户输入符合要求的标题；填写多个表单时，如果有多个表单未填写，每个输入框下面都会有错误反馈，而且每条错误反馈的内容会根据不同字段而调整，而不是用“请填写内容”这种模板化的反馈。
对于操作后不好修改的场景中 (比如发表文章、发布视频、视频渲染)，可以先给用户看 “最终效果预览”。确认没问题再提交，这样用户就能提前发现错漏，心里也踏实。
例如在发布动态的时候上传视频封面后，在推荐列表、视频动态中能提前预览封面效果，有问题可以及时修改，省去了动态发布后再去修改的麻烦；视频软件中渲染一个视频通常需要几分钟甚至几十分钟，通过提供“渲染预览”可以快速检查错误减少不必要的时间浪费。
“撤销”功能允许用户立即挽回错误，增强掌控感，减轻错误带来的负担，例如删错内容、发错邮件后，点一下就能恢复。有了这个功能，用户用着更放心，也敢大胆尝试各种功能。
在花瓣中采集图片后，会提供一个撤销的功能，方便用户快速撤销采集有误的图片；在使用微信发消息、使用邮箱发邮件的时候，也都支持在发出去几分钟内撤回，尽可能帮用户挽回错误。
如果错误不可避免，需要使用通俗易懂的提示文案告诉用户哪里出现了错误，出现了什么样的错误，而不是用一些模板化的或是含糊不清的提示文案，让用户感到困惑。
例如上图中的登录失败提示，会明确告知什么地方出现了错误、出现多次错误后会有什么后果、如何操作能解决错误，这才是一个格式的错误提示；填写新增地址信息时，如果手机号码有问题，会明确提示“手机号有误”，而不是只说 “输入内容有误”。
接着上一条，不仅要说清楚错误的原因，还要告诉用户“该怎么做”，引导用户立即采取行动。例如添加“重试”、“返回主页” 按钮，引导用户回到正确的操作流程里。
如果访问的页面有问题，可以提供返回首页或者联系客服的入口，让用户可以继续探索其他内容；例如苹果的Face ID连续5次识别失败后，系统会锁定面容ID功能，并提示输入密码验证后才能重新启用。
通过自动定位和聚焦错误输入项来鼓励快速更正。发现错误后，系统自动定位到出错的输入框，缩短错误从识别到更正的过程。尤其在那些表单特别多的后台页面中，这种错误定位的功能还是很有必要的。
利用情感化的视觉设计，例如柔和的色彩、插图和动效等，提供了视觉上的舒适感，缓解用户的焦虑和紧张。这不仅是简单的错误反馈，还是展现品牌个性的好机会。
比如谷歌浏览器离线时经典的“恐龙小游戏”，让用户等待网络连接的同时进行有趣的游戏体验，能让用户没那么烦躁。
总的来说，减少错误的根本策略是避免不必要的差异化，并遵循熟悉的界面、交互和设计惯例。这里的“熟悉”不仅是风格问题，更是整个用户体验设计的通用标准。
当然，再标准的设计也没法完全杜绝错误的发生。这时候，贴心的微设计就派上用场了——帮助用户快速发现错误、轻松改过来。
这些细节，正是体验设计师存在的价值，也是产品赋予用户的最大信任。你还有哪些化解错误的小妙招呢？欢迎留言咱们一起聊聊～
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微UI设计公司：互联网时代，品牌的节日营销是重要的传播节点之一。
从520、七夕到中秋、圣诞、元旦、春节，用户情绪在节日中被自然放大，也为品牌提供了集中触达用户、强化品牌认知的重要窗口。
在百度品牌营销中，节日营销已经成为高频且稳定的投放节点。
品牌通过开屏、信息流、品专等多触点场景，在短时间内形成曝光，快速放大声量。
随着营销环境的变化，用户的注意力愈发稀缺，节日营销的定义也在发生变化。
节日营销从单一的品牌曝光、信息触达，逐渐走向情绪沟通和心智的建立。
节日正在从一个传播节点，转变为品牌进入用户情绪的入口。
这也是我们重新思考品牌节日营销设计的起点。
节日营销设计为什么升级
当前节日设计越来越多趋同，问题也开始显现：
用户看到了节日，却没有记住品牌。
中秋是月亮、圣诞是雪花、春节是红色。这些符号足够“像节日”，但不再够打动人。
过去的节日营销设计，本质是一种标准化程序化的换肤，
在已有样式的基础上替换为颜色、叠加元素、快速形成节日版本。
这种方式高效，但是有明显的局限：
用户看到，但没有情绪共鸣；品牌出现，但是没有留下记忆；
当品牌开始从「曝光」走向「心智」，
设计，不再只是做节日视觉设计，而是要承担新的角色，
通过节日，帮助品牌与用户建立一次情绪的链接。
设计的角色，正在发生变化
在品牌营销体系中，设计的角色正在从“视觉执行”走向“情绪表达”。
过去，设计解决的是好不好看；现在，设计需要回答的是能不能被感知、能不能被记住、能不能触发行动；
这种角色的变化本质来自两个点：
1.用户从接受信息到情绪共鸣，用户不再被信息打动，而更容易被情绪打动；
2.品牌从曝光到转化，品牌不仅需要被看到，更需要被记住、被选择；
因此，设计的价值也在升级，从“表达节日”升级到“激活情绪”。
尝试让节日、文化、品牌营销进行融合。通过设计，让节日设计不仅被看见，而是被感受到被记住。
从节日元素，到节日情绪
在过去一年的实践中，我们形成了一个清晰的设计路径，
不再思考“用什么元素”，而是优先回答“表达什么情绪”，
整体设计流程我们拆分成四步：
1.文化分析，找情绪；
2.元素提炼，确定表达；
3.情感叙事，建立引导；
4.商业场景，承接转化；
最终形成一套设计方法：先定义情绪，再选择表达，最终通过场景完成转化。
设计的不只是画面，而是一段完整的情绪体验。
下面围绕中秋、圣诞、春节三个典型节日展开，
案例一｜中秋：让月色承载情绪
在中秋节的设计中，我们先思考中秋的情绪是什么？
中秋节更偏向安静与温暖，它是一种关于思念和团圆的情绪。
在设计中，我们没有强调元素的丰富性，而是让月光成为画面的核心情绪来源。
整张画面被橙色的月色包裹，品牌礼盒作为视觉中心，灯笼与窗棱构建远近景的空间层次，让情绪在画面中缓慢铺开。
用户感受到的，不只是节日，而是一种被传递的心意。
不是月亮本身，而是月光下的情绪。
案例二｜圣诞节：用星光建立引导
与中秋节这种传统节日不同，圣诞节则是一种外放型的节日情绪，它的文化核心是惊喜和给予。
在众多圣诞符号中，我们选择了一个更具文化指向的元素：圣诞星（伯利恒之星）。
在圣诞文化中，这颗星象征着“指引与希望”——它引导人们找到方向，也成为光明与祝福的象征。
因此，圣诞星光不仅是装饰元素，而是承载节日意义的核心符号。
基于这一语义，我们让“星光”成为整个画面的视觉起点与叙事线索。
画面中，星光从上方落下，形成一条清晰的视觉路径，最终聚焦品牌产品。
用户的视线随着星光的轨迹移动，从节日氛围自然过渡到品牌信息。
深色的夜空与雪景构建静谧的节日空间，而星光成为画面中最有温度的存在。
我们以星光为核心视觉线索，让星光轨迹贯穿整个设计场景。
从开屏的星光破窗，到信息流的星轨延展，再到品专的星光汇聚，用户在浏览过程中被星光自然引导，完成从视觉吸引到情感共鸣的转化。
星光不只是点缀，而是连接节日与品牌的路径。
案例三｜春节：让节日流动起来
春节的复杂性，不在于元素的丰富，而在于情绪的多样。
它既有热闹的年味，也有现实的消费动机，还有天然的互动氛围。
因此我们不再堆叠符号，而是将春节拆分为三种情绪的表达。
基于春节用户三类核心情绪，我们将方案聚焦为三个方向，表达春节文化温度的流动，
年味：通过传统节日元素构造氛围，让品牌自然进入节日语境；
好礼：强化商品表达，让内容本身成为转化入口；
趣味：结合生肖与互动玩法，提升参与和传播；
通过传统节日元素营造氛围，帮助品牌营造节日氛围和加深品牌记忆；
我们选取了福字、生肖、红包等高认知度的春节元素，帮助品牌快速进入春节语境，快速建立春节氛围，帮助品牌进入春节语境。
春节期间，用户对送礼买礼品的接受程度是全年最高。
因此在「好礼」这个方向中，我们尝试打破传统按钮形式，让商品本身成为入口。
在开屏、信息流、品专、品牌百看中，品牌商品都可以以更直观、更强势曝光的样式出现。
春节期间，用户更愿意停留、互动，也更容易参与轻量玩法。
我们通过生肖IP的设计，并结合简单的游戏化互动，让品牌在春节期间不只是被看见，而是被“玩起来”。
最终让春节不只是被看见，而是让用户感受到一种正在发生的热闹。
当节日设计开始有温度
在过去一年品牌广告打造了七夕、中秋、圣诞、元旦、马年CNY等节日营销包，
在节日营销方案上线前后，我们从用户、客户、品牌资产三个维度进行了对比，结果呈现出清晰的增长趋势：
节日营销方案上线后，用户对内容的关注度显著提升，点击率提升48%；
设计价值的前置，也带来了客户决策方式的变化，客户样式复购率提升71%；
设计资产复用率达到90%，多行业多节点快速适配，支撑节日营销规模化扩展。
节日，从来不只是营销节点，它是文化的缩影，是情绪的放大器，
更是品牌与用户之间，最自然的一次链接机会。
当设计能够阐述节日背后的文化语义，并用合适的方式将情绪传递出去，
品牌就不再只是出现，而是真正被用户感知、记住，甚至产生链接。
未来，品牌营销设计不再只是追求样式的创新，
而是回到一个更本质的问题：
品牌，如何被用户感受到。
而“有温度”的设计正是这个问题的答案。
转载：IXDC
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com