兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.
我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
哈喽，这里是兰亭妙微UI设计公司，今天分享的是「如何化解错误时刻」。
说到用户体验设计，大家首先想到的都是“正常场景”：注册流程顺畅、支付顺利完成、输入顺利通过。但现实并非如此，用户总会不小心犯错误，系统偶尔也会掉链子。但这些“问题时刻”往往最容易被忽略。要是产品没法帮用户解决问题，所有错误的后果都得用户承担，最后只会让他们焦虑。换句话说，错误是用户体验的最大危机，也是削弱用户对产品信任的关键节点。
相关干货：
这里的“微设计”比我们常说的“微交互”范围更广，包括文案、视觉元素，还有各种反馈设计。这些小细节看似不起眼，却能精准安抚用户的出错焦虑，帮他们重新找回掌控感。
微设计的三个核心要素：
在深入探讨具体案例之前，让我们先来探究一下用户遇到错误的背景和原因。下面简要总结了用户出错的类型、背后的心理，还有哪些场景容易出错。
在用户体验理论中，错误分“失误”和“错误”两种，前者是用户在执行操作时无意识犯下的错误，后者是一开始就想错了。
失误：行为不当
目标是对的，但采取的行动有问题。例如不小心点错了按钮、着急打错了字，大多是做熟悉的事时分心、没留意造成的。
错误：判断失误
从一开始就误解了情况。比如看到一个显眼的按钮，以为是自己要的功能，结果点击后才发现不对。这种情况多是因为界面的信息混乱、层级不清晰，呈现的内容含糊不清。
通常“失误”发生在执行阶段，“错误”发生在规划阶段，但实际中两者经常一起出现。重点是搞清楚 “为什么会出错”，并给出解决方案。
出错不只是功能出问题，更会让用户慌张：“万一没法恢复怎么办？”（恐惧）、“我无法控制这种情况”（无助），甚至 “可能我根本不会用这东西”（自责）。最糟的就是自责——用户不怪产品怪自己，压力越来越大，最后干脆关掉页面、放弃使用。
所以设计师的任务很明确：别让用户背锅，明确告诉他们“能补救”。先给情绪上的安慰：“没关系，你可以再试一次。”
有些时候，用户的选择压力和出错焦虑会被放大，心里越没底，越不敢动。
操作不可逆：删除文件、转账、重置数据等，一旦点错就没法恢复，让人不敢操作。
操作反复失败：连不上网、输密码总错，越试越沮丧，甚至会想 “是不是只有我用不了？”
尤其是对准确性要求高的场景，比如金融、商务、B2B工具，出错体验的设计更关键。有时候对于出错的恐惧，比错误本身更影响用户行为。
支付/转账：错误导致资金损失的压力以及造成损失的可能性。
传输/删除关键数据：知道没法恢复，更不敢操作。
表单反复验证失败：失败的次数越多，就会越沮丧。
应对错误的核心是“双管齐下”：提前预防 (别让错误发生) +及时恢复 (错了能轻松补救)。单独用哪一个都不够，需要根据场景灵活设计。
从根本上阻止可能出错的情况，或者用视觉提示帮用户识别风险。比如禁用按钮、提供有限的选项、防止重复点击。某种程度上哪怕稍微限制一点用户的自由，也比让他们出错好。
例如订酒店时，对于有住宿天数要求的酒店，预定的天数少于住宿天数时，无法进行预订；类似的还有“信息没填完时，登录按钮是置灰的”、“加载时不能点按钮，避免重复操作”，都是这个道理。
在搜索框、输入框里加入自动补全或关键词建议，不需要让用户记住全部信息，输入又快又准。尤其在输入地址或者比较复杂的内容时，这种方法能大大提高效率。
例如在输入地址时，搜索词会高亮显示，并且会可能提供清晰的搜索建议：想搜的是地铁、公交还是某家店铺，方便用户减轻记忆负担，快速做出选择；在移动设备中，键盘的局限性导致打字失误的情况频繁发生，飞书的错别字自动修正提示，能够很好地提高输入速度和准确性。
对于需要重复做的操作，可以把常用的选项设为默认，帮助用户少费心。但默认选项不一定永远是对的，如果存在错误的可能性，得让用户能检查修改，不然反而会“诱导错误”。
例如在外卖软件中，可以把常用地址加上默认标识，省去了再次添加收货地址的麻烦。但当默认地址和当前的位置差很远，超出配送范围时，购物车中的商品会呈置灰状态无法进行购买。
用户进行多步骤任务时 (比如注册)，万一不小心退出了再进来，保持之前填的内容还在。这样不需要用户重新填，也不会忘记已经完成了哪些步骤，减少失误的发生。
编辑文章时，内容可以自动保存到草稿箱中。哪怕退出登录过两天再进入，草稿箱里的内容都还在，对于用户来说也是一种很贴心的体验。
对于需要记住很多选择的流程(比如订酒店)，把选好的日期、人数、筛选条件固定在屏幕顶部，随时能看。这种设计方法允许用户在不依赖不准确记忆的情况下再次确认信息，从而及早预防错误。
像Airbnb会把要去的地点、 入住时间和人数这些筛选条件固定在页面的顶部，让用户可以持续查看当前的预订情况，这样在找房子的时候会觉得更踏实。
对于删除文件或重置数据这类不可逆的操作，一定要增加 “确认步骤”，进一步确认用户的意图。
一旦出错无法恢复的操作可能会引发用户的强烈焦虑，因此需要清晰传达操作的影响，并通过问题和警告来确认操作，例如：“您确定要删除xx？删除后不可恢复，请谨慎操作。”
但注意不能滥用确认弹窗，过于频繁的确认弹窗可能会让用户在不仔细看内容的情况下，习惯性地点击“确定”，增大出错的风险。只在重要且不可逆转的操作中使用。
例如删除文件时进行二次确认，同时告知删除后文件的位置、删除后文件是否可以找回等一系列内容，让用户对于删除的内容有清晰的认知；对于确认后无法再修改的信息，也最好来个再次确认，让用户做到心里有数。
对于表单输入这类容易出错的场景，好的使用体验是在输入时就“实时”提供反馈，而不是等所有信息都填完点击提交之后再提示错误。
比如字符超了、密码格式不对，立即用红色文字、错误图标、边框高亮、震动动效等形式反馈出来，减少重复输入的麻烦。
例如发动态时，如果输入的标题字数不符合要求，会在标题处有一段反馈提示，提醒用户输入符合要求的标题；填写多个表单时，如果有多个表单未填写，每个输入框下面都会有错误反馈，而且每条错误反馈的内容会根据不同字段而调整，而不是用“请填写内容”这种模板化的反馈。
对于操作后不好修改的场景中 (比如发表文章、发布视频、视频渲染)，可以先给用户看 “最终效果预览”。确认没问题再提交，这样用户就能提前发现错漏，心里也踏实。
例如在发布动态的时候上传视频封面后，在推荐列表、视频动态中能提前预览封面效果，有问题可以及时修改，省去了动态发布后再去修改的麻烦；视频软件中渲染一个视频通常需要几分钟甚至几十分钟，通过提供“渲染预览”可以快速检查错误减少不必要的时间浪费。
“撤销”功能允许用户立即挽回错误，增强掌控感，减轻错误带来的负担，例如删错内容、发错邮件后，点一下就能恢复。有了这个功能，用户用着更放心，也敢大胆尝试各种功能。
在花瓣中采集图片后，会提供一个撤销的功能，方便用户快速撤销采集有误的图片；在使用微信发消息、使用邮箱发邮件的时候，也都支持在发出去几分钟内撤回，尽可能帮用户挽回错误。
如果错误不可避免，需要使用通俗易懂的提示文案告诉用户哪里出现了错误，出现了什么样的错误，而不是用一些模板化的或是含糊不清的提示文案，让用户感到困惑。
例如上图中的登录失败提示，会明确告知什么地方出现了错误、出现多次错误后会有什么后果、如何操作能解决错误，这才是一个格式的错误提示；填写新增地址信息时，如果手机号码有问题，会明确提示“手机号有误”，而不是只说 “输入内容有误”。
接着上一条，不仅要说清楚错误的原因，还要告诉用户“该怎么做”，引导用户立即采取行动。例如添加“重试”、“返回主页” 按钮，引导用户回到正确的操作流程里。
如果访问的页面有问题，可以提供返回首页或者联系客服的入口，让用户可以继续探索其他内容；例如苹果的Face ID连续5次识别失败后，系统会锁定面容ID功能，并提示输入密码验证后才能重新启用。
通过自动定位和聚焦错误输入项来鼓励快速更正。发现错误后，系统自动定位到出错的输入框，缩短错误从识别到更正的过程。尤其在那些表单特别多的后台页面中，这种错误定位的功能还是很有必要的。
利用情感化的视觉设计，例如柔和的色彩、插图和动效等，提供了视觉上的舒适感，缓解用户的焦虑和紧张。这不仅是简单的错误反馈，还是展现品牌个性的好机会。
比如谷歌浏览器离线时经典的“恐龙小游戏”，让用户等待网络连接的同时进行有趣的游戏体验，能让用户没那么烦躁。
总的来说，减少错误的根本策略是避免不必要的差异化，并遵循熟悉的界面、交互和设计惯例。这里的“熟悉”不仅是风格问题，更是整个用户体验设计的通用标准。
当然，再标准的设计也没法完全杜绝错误的发生。这时候，贴心的微设计就派上用场了——帮助用户快速发现错误、轻松改过来。
这些细节，正是体验设计师存在的价值，也是产品赋予用户的最大信任。你还有哪些化解错误的小妙招呢？欢迎留言咱们一起聊聊～
转载：优设
兰亭妙微（蓝蓝设计）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。
兰亭妙微（蓝蓝设计）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。
兰亭妙微UI设计公司:
时间：新店铺支付模块上线第二天，早上 10 点。
小A 正在工位上喝咖啡，客服群突然开始连环炸：
用户A： “我付完钱了，订单怎么还显示’待支付’？”
用户B： “我明明没付成功，为什么钱被扣了？”
用户C： “我取消了订单，钱什么时候退给我？”
小A 赶紧打开后台一看，傻眼了——
同一批订单里，“待支付”“支付中”“已支付”“支付失败”“已退款”五种状态交叉打架，有的订单同时出现在”待支付”列表和”已支付”列表里，还有几笔订单钱已经进了商户账户、但订单状态还停在“支付中”。
她翻出前一天熬夜画的支付链路时序图，越看越冷汗：
小A 硬着头皮拨通了老张的电话。
老张听完小A 的描述，只回了一句：
“你这不是‘支付接口写错了’，是把支付当成了一个动作。它不是一个动作，是一条链路——而链路的地基，就是三件事。”
接着老张发来一段话，小A 把它存成了备忘：
做支付产品，要先分清三件事——
一、交易流：用户 → 订单；
二、资金流：钱 → 账户；
三、信息流：状态 → 系统同步。
这三条流在理想情况下一一对应，但在真实生产环境里，它们永远会错位。你的产品工作，就是把这些错位“兜回来”。
在正式拆关之前，先澄清两个小A 一开始就搞混的认知——也是 90% 新手都会栽的坑：
很多人以为”接入微信支付”= 调一个 API。错。一次完整的支付涉及 7 个系统 + 2 个异步回调 + N 个状态流转。后面关卡二会展开。
订单篇讲过订单状态机，但订单状态 ≠ 支付状态。一个订单”已支付”不代表钱真到账了，可能只是”支付成功回调到了”。这两个状态机必须分开设计、双轨管理。后面关卡三会展开。
支付结算整套完整拆解要过 7 道关卡，上下篇分开讲：
上篇（本篇）· 地基三关 —— 钱怎么进来
第 1 关 · 支付方式全景 —— 用户能用什么付钱
第 2 关 · 支付链路 —— 点“付款”之后发生了什么
第 3 关 · 支付状态机 —— 钱到底在哪一步
下篇 · 进阶四关 —— 钱怎么不出事
第 4 关 · 对账 —— 财务最怕出事的环节
第 5 关 · 分账 —— 多方分钱怎么分
第 6 关 · 退款 —— 钱怎么原路退回
第 7 关 · 异常资金池 —— 最后一道防线
上篇讲完，你可以独立设计一个“能把钱收进来”的支付系统；下篇讲完，才能做到”钱进来之后不出事”。
小A 的第一个反问：“不就是微信、支付宝、银行卡吗？”
老张笑：“电商平台的收银台里，平均要接 12-18 种支付方式。你要是只知道三种，写出来的 PRD 就只能支撑一个最小 MVP。”
每一种支付方式的存在，都对应着某个特定场景下用户最低阻力的选择：
产品经理的第一课：不是选“最好的支付方式”，是覆盖“用户触达时的最低阻力路径”。
原则一：用户画像优先
品牌 X 的数据：
如果不接花呗，高客单商品转化率会下降 15-20%。
原则二：费率与到账时效平衡
原则三：接入成本要控制
每接一种支付方式 = 一套对接 + 一套回调 + 一套对账 + 一套退款。不要盲目追求“支付方式最全”，要评估 ROI。
小A 的第二个反问：“不就是前端调个 API 嘛？”
老张说：“这也是你整天对不上账的根因——你以为支付是一个动作，它其实是一条链路。”
从用户点击”立即支付”按钮，到最终”钱到账”，一笔支付要经过 7 个系统角色 × 2 次异步回调：
三个真实事故（品牌 X 上月发生）：
这三个事故的解法都写在订单篇下篇“支付三道防线”里——但真正在支付结算模块里实现的，是这些：
防线一：被动回调 + 主动查询双保险
– 三方通知到 → 立即更新（最快路径）
– 超过 30 秒没通知 → 订单系统主动反查一次
– 每 30 秒主动查询，最多查 10 次（共 5 分钟）
– 任一次成功即完成支付闭环
防线二：全链路幂等
– 支付单号（而非订单号）作为幂等键
– 同一支付单号的任何操作（成功通知/失败通知/查询响应）都要幂等
– 重复请求的返回值必须和第一次请求一致
防线三：异常资金池
– 所有”钱进账但找不到订单”或”订单已取消但钱到了”的交易，进入异常池
– 72 小时内必须处理完：原路退回 / 人工对账 / 转公司应付账款
– 详见关卡七
为什么用户看到的是“支付中”而不是“支付成功”？
答：因为用户点击的一刻，钱还没扣。扣款发生在第 8 步，那时用户可能已经退出 App 了。
好的设计：
坏的设计（小A 第一版设计）：
小A 的第三个反问：“订单状态机不就够了吗？为什么还要单独的支付状态机？”
老张说：“订单关心的是‘货的进度’，支付关心的是‘钱的进度’。这两件事在 80% 的时间里是同步的，但在 20% 的异常时刻会错位——而恰恰是那 20% 决定了你的产品水平。”
一笔完整的支付，在产品设计上至少要覆盖 8 种状态：
+ 1 个兜底状态：异常资金 — 第 7 关展开。
这是小A 在第一版 PRD 里漏掉的——她只设计了订单状态机，没有独立的支付状态机，结果”订单已支付”和”支付成功”混在一起，对账时根本拆不清。
矩阵的价值：
小A 上月踩的坑——“已取消 + 已支付”组合（矩阵右下橙色加粗格）：
订单被超时取消，但支付回调 30 分钟后才到。结果订单是”已取消”，支付是”已支付”。这笔钱就挂在了系统里，进入异常资金池。
解法（关卡七深度展开）：
铁律一：订单状态由支付状态驱动
很多新手 PRD 的错误写法：
“用户支付成功后，把订单状态改为’已支付’。”
这句话逻辑上没问题，但在系统层面是反的。正确的是：
“支付状态机从’支付中’流转到’已支付’时，触发订单状态机从’待支付’流转到’已支付’。”
区别在于：支付状态是因，订单状态是果。如果把它们耦合在一个状态机里，就做不到独立兜底。
铁律二：所有状态变更必须带“来源”
字段设计：
payment_status_log:
– payment_id: 支付单号
– from_status: 变更前状态
– to_status: 变更后状态
– source: 变更来源（user / system / callback / reconcile / manual）
– operator: 操作人（用户ID / 系统名 / 财务人员）
– timestamp: 变更时间
– remark: 备注（必填）
为什么必须带来源？因为财务对账、客诉排查、合规审计，三个场景都要追溯“是谁让它变成这个状态的”。
铁律三：每个异常态都要有退出通道
支付状态机里最容易出事的”死状态”：
任何状态都要有“进入规则 + 退出规则”，不能只有进入没有退出。
场景：品牌 X 上线”组合支付”，允许用户用”积分 + 微信”支付。
小A 第一版设计：
问题：积分成功了但微信支付失败，订单状态已经是”已支付”但实际只支付了积分部分。
正确设计：
关键：组合支付必须有“部分支付”这个中间态，而不是每个支付通道成功就是”已支付”。
订单篇问的是“订单系统扎不扎实”和“抗不抗压”，支付篇上篇先问一件事：地基稳不稳。能答对 3 题以上的，才好进下篇的对账、分账、退款、异常资金池。
1. 所有支付通道都有“被动回调 + 主动查询”双保险吗？ 只靠被动回调=钱进账但订单没更新
2. 所有支付接口都做了幂等吗？ 用”支付单号”做幂等键，不是订单号——重复回调必须识别出来
3. 订单状态机和支付状态机是独立的吗？ 而不是一个字段 status 揉完订单和支付
4. 支付方式的接入是按“用户画像 × 客单价 × 资金成本”选的吗？ 还是上来先接个微信和支付宝了事
一句话总结上篇： 支付系统的地基，不是”接完三个通道就完事”，而是把一条链路、一张双轨状态机、一套兜底与幂等，都提前画清楚。地基稳了，下篇才有资格谈”能扛”。
兰亭妙微（蓝蓝设计）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