因此今天兰亭妙微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。
前 Meta AI 团队创立的 Hero 公司，推出专利技术 AI Autocomplete SDK，能实时预测任务所需全部参数，输入 “订机票” 即刻呈现所有选项，让交互速度提升 10 倍、成本大降。这篇文章深入解析这项革命性技术的工作原理、应用场景与商业价值，探讨它能否成为未来 AI 应用的标配，带你看懂人机交互的下一场变革。
你有没有想过，为什么和 AI 聊天总感觉像在玩猜谜游戏？你说想订机票，AI 问你去哪儿。你说去纽约，它问什么时候出发。你说下周三，它又问几点。你说早上，它接着问要直飞还是转机，经济舱还是商务舱，要不要托运行李。这种来回问答的过程让人抓狂，就像是在玩一场永无止境的”二十个问题”游戏。更糟糕的是，有时候你都不知道 AI 需要什么信息，只能等它一个一个问。这种交互方式看似自然，实则效率低下，完全违背了 AI 应该让我们生活更简单的初衷。
前 Meta AI 团队成员创立的 Hero 公司刚刚发布了一项专利技术，可能会彻底改变这种局面。他们推出的 AI Autocomplete SDK 不是简单的自动补全功能，而是一个能够实时预测并呈现完成任务所需全部信息的系统。想象一下，当你开始输入”订机票”的时候，屏幕上立刻出现所有相关参数：出发地、目的地、日期、时间、航空公司、座位偏好、行李选项等等，你只需要填写或选择就好，不需要等 AI 一个一个问你。这听起来像是一个小改进，但实际上它可能会让 AI 交互速度提升 10 倍，成本降低 10 倍，并且为未来的增强现实设备奠定基础。
Hero 不仅将这项技术用在自己的助手应用中，还通过 SDK 向其他公司开放。这意味着我们可能很快就会在各种应用中看到这种全新的交互方式。而且，他们刚刚获得了 Forerunner Ventures 领投的 300 万美元追加投资，这是在去年 400 万美元种子轮之后的又一次资本认可。我深入研究了这项技术后发现，它的影响远比表面看起来要深远得多。
这个现象背后反映的是当前 AI 交互方式的根本缺陷。大语言模型虽然能理解自然语言，但它们并不知道用户想要完成什么任务需要哪些具体信息。就像 Hero 的 AI 工程师 Saharsh Vedi 说的：”现在的问题是，负担都在用户身上，他们需要思考 AI 需要什么信息。”这完全颠倒了技术服务人类的关系。
我自己在使用 AI 工具时也深有体会。比如用 AI 生成图片，我经常需要反复调整提示词，尝试不同的描述方式，才能得到满意的结果。有时候我花在琢磨提示词上的时间，比直接用传统工具做图还要长。更令人沮丧的是，即使你精心设计了提示词，AI 也可能遗漏某些重要细节，导致结果不符合预期。然后你又得重新生成，这不仅浪费时间，对于按次收费的服务来说，还意味着额外的成本。
当前主流的 AI 应用都试图通过各种方式解决这个问题。有些添加了建议按钮，提供预设的提示词模板。有些使用引导式问答，一步步收集用户需求。还有些像 Adobe 的 Firefly 应用，把提示词拆分成多个部分，比如创作音乐时分别输入情绪、风格和用途。这些方法都在一定程度上改善了用户体验，但都没有从根本上解决问题：用户仍然需要主动思考和输入信息，AI 仍然处于被动等待的状态。
Hero 的方法则完全不同。他们不是让 AI 更聪明地问问题，而是让系统主动预测并呈现完成任务所需的全部信息。这种思路的转变看似简单，实则颠覆了整个交互范式。就像创始人 Brad Kowalk 说的：”我们基本上意识到，你在互联网上能做的任何事情，都只是一系列参数。一旦你看到了这一点，就很难再忽视它。”这句话听起来简单，但它揭示了一个深刻的洞察：无论多么复杂的任务，本质上都可以分解为一组参数，而这些参数是可以预测和呈现的。
AI Autocomplete 的核心理念是前置加载所有必要信息，而不是通过反复问答来收集。当你开始输入或说话时，系统会实时更新界面，显示完成这个动作所需的所有参数。这不是简单的文本补全，而是一个理解任务结构、预测所需信息、动态呈现选项的智能系统。
拿订机票这个例子来说。在传统的 AI 助手中，你可能需要经历这样的对话：你说”我想订机票”，AI 问”您要去哪里？”，你说”纽约”，AI 问”什么时候出发？”，你说”下周三”，AI 问”您希望几点的航班？”，你说”早上”，AI 问”经济舱还是商务舱？”，你说”经济舱”，AI 问”需要托运行李吗？”，以此类推。整个过程可能需要十几轮对话，每次都要等待 AI 的回应。如果你在某个环节说得不够清楚，或者 AI 理解错了，还得重新来过。
但在 Hero 的 AI Autocomplete 系统中，当你输入”订机票”的瞬间，屏幕上就会出现所有相关字段：出发地、目的地、出发日期、出发时间、航空公司偏好、返程日期、座位类型、行李选项等等。你可以随时停下来，只填写你知道的信息，然后发送查询。系统会根据你已经提供的信息，智能地建议或填充其他字段。你不需要等待 AI 一个一个问你，所有信息都在你眼前，你完全掌控着交互的节奏。
这种方法的优势是多方面的。第一，速度快。Hero 声称可以让操作速度提升 10 倍，因为省去了大量来回对话的时间。第二，成本低。每次 AI 的响应都需要服务器计算，减少对话轮次意味着大幅降低运营成本。Kowalk 特别强调了这一点：”因为涉及的消息更少，规模化运营的公司可以节省服务器成本。”第三，用户体验更好。你不会感觉自己在被 AI 审问，而是在一个清晰的框架内主动提供信息。
我特别欣赏 Hero 工程师 Vedi 说的那句话：”希望我们回头看时，几乎不记得’提示词’这个概念。”这体现了他们的雄心：不是改进提示词，而是让提示词成为历史。在他们的愿景中，未来的 AI 交互应该是结构化的、可预测的、高效的，而不是开放式的、充满不确定性的对话。
AI Autocomplete 的应用场景远比订机票更广泛。Hero 在发布时特别强调了几个重要领域，每个都有可能被这项技术彻底改变。
搜索和电商是最直接的应用场景。现在在电商平台搜索商品，你需要输入关键词，然后在成百上千的结果中筛选，使用各种过滤器来缩小范围。这个过程既费时又费力。但如果有了 AI Autocomplete，当你输入”咖啡”时，系统立刻显示出品牌、烘焙程度、包装规格、配送时间、订阅频率等参数。你可以快速选择你想要的选项，甚至可以设置”每月配送”这样的重复订单。Hero 展示的咖啡订购例子就很好地说明了这一点：不仅可以快速完成当前订单，还能轻松设置定期订购，就像你说”每个月”一样简单。
媒体生成是另一个会被改变的领域。我之前提到过用 AI 生成图片时需要反复调整提示词的痛苦。AI Autocomplete 可以在你开始输入时就实时展示各种参数：主体、动作、风格、光线、相机角度、分辨率等等。你可以从这些选项中选择，而不是试图用文字准确描述你想要的效果。这不仅能激发创意，让你看到自己可能没想到的选项，还能显著减少生成次数，从而降低服务器成本。对于视频生成这种计算密集型任务来说，减少迭代次数的意义更加重大。
客户服务和企业表单填写也是重要应用场景。现在的客服聊天机器人通常需要通过一系列问答来收集信息，比如你的订单号、问题类型、联系方式等等。这个过程对用户来说很繁琐，对企业来说也低效，因为经常需要后续跟进来补充缺失的信息。有了 AI Autocomplete，聊天机器人可以根据用户的初始问题，立即呈现所有相关字段，引导用户一次性提供完整信息。这既节省了用户时间，也降低了企业的运营成本。
我认为这项技术最具潜力的应用可能还没有被充分认识到。比如在教育领域，AI Autocomplete 可以帮助学生构建更好的学习查询，展示他们可能没想到的相关主题和角度。在医疗领域，它可以帮助患者更准确地描述症状，提供结构化的问诊表单。在法律、金融等专业服务领域，它可以帮助非专业人士更有效地表达需求，获取更精准的服务。这些场景的共同点是：专业性强、信息复杂、普通用户难以准确表达需求。AI Autocomplete 恰好可以弥合这个知识鸿沟。
Hero 的 AI Autocomplete 不仅改变了用户体验，还开创了一种全新的广告模式。这让我感到特别兴奋，因为它解决了自然语言界面商业化的一个核心难题：如何在对话式交互中自然地融入广告，而不破坏用户体验？
传统的搜索广告模式是基于关键词和搜索结果的。你在 Google 搜索”咖啡机”，顶部会显示付费广告。这种模式在图形界面中运作良好，但在纯对话界面中却很难实现。你总不能让 AI 助手在回答问题的中途突然推销产品吧？那会让对话变得非常生硬和令人反感。
Hero 的方法则巧妙得多。在 AI Autocomplete 系统中，品牌可以通过三种方式出现：第一，类似 Google Ads，品牌可以付费成为决策过程中的优先建议选项。比如在订咖啡的例子中，Peet’s Coffee 可以付费让自己出现在品牌选择列表的前面。第二，品牌可以建议互补产品，添加到当前订单中。比如在你订咖啡时，建议搭配某款点心或咖啡杯。第三，品牌可以从更高的重复购买率中受益，因为在 AI Autocomplete 系统中，设置定期订单就像说”每个月”一样简单。
我认为这种广告模式的天才之处在于，它不是打断用户的决策过程，而是增强这个过程。当你在选择咖啡品牌时，看到各种选项本来就是决策的一部分，付费推广的品牌只是在这个自然的选择过程中获得了更显眼的位置。这和传统搜索广告的逻辑一致，但执行方式更自然、更不突兀。
Hero 目前正在与 AI 广告平台 Koah Labs 讨论合作，将这种新广告形式推向市场。我觉得如果这种模式成功，它可能会成为自然语言界面商业化的标准模式。想想看，未来所有 AI 助手、AI agent 和对话式应用都可能需要这样一种不破坏用户体验的广告模式。Hero 作为先行者，有机会定义这个新兴市场的规则。
更重要的是，这种广告模式对小企业也很友好。不像传统的品牌广告需要巨额投入，自然语言广告可以非常精准地针对特定需求。一家本地咖啡烘焙商可以选择在用户搜索”小批量手工烘焙咖啡”时出现，而不需要和星巴克竞争”咖啡”这样的大词。这种精准性和可负担性可能会让更多中小企业进入数字广告市场。
AI Autocomplete 的诞生其实源于增强现实的需求，这是我觉得最有远见的部分。Hero 的联合创始人 Brad Kowalk 和 Seung Woo Lee 都曾在 Meta 工作，参与 AR 相关项目。离开 Meta 后，他们一直在思考 AR 大规模普及面临的一个核心问题：当 AR 设备的屏幕空间远小于智能手机时，如何让它同样有用？
这是一个很多人没有深入思考过的问题。我们习惯了智能手机的大屏幕、复杂菜单、多层导航。但 AR 眼镜不可能有那么大的显示空间，也不适合复杂的触摸操作。那么，如何在有限的界面上提供丰富的功能呢？
大公司的思路通常是将移动端的界面缩小，配合手势控制。但 Hero 认为这不是正确的方向。Kowalk 和 Lee 的洞察是：AR 设备需要的不是缩小版的图形界面，而是基于意图的交互系统。用户应该能够用自然语言表达意图，系统通过 AI Autocomplete 这样的技术引导用户提供必要信息，然后直接执行任务。整个过程不需要复杂的 UI，只需要清晰的参数呈现和简单的选择机制。
我觉得这个思路非常前瞻。它不是试图把现有的交互模式搬到新设备上，而是为新设备设计全新的交互范式。这种轻量级但强大的 AR 操作系统，可能会成为下一代计算平台的基础。就像触摸屏为智能手机带来的革命一样，基于意图的自然语言交互可能会为 AR 设备带来类似的变革。
Hero 三年前就开始申请这项技术的专利，说明他们很早就看到了这个方向。现在专利已经获批，技术已经成熟，时机也恰到好处。大语言模型的进步让自然语言理解变得可靠，AR 设备开始进入消费市场，用户对新交互方式的接受度也在提高。所有这些因素结合在一起，为 AI Autocomplete 这样的技术创造了完美的时间窗口。
虽然 Hero 现在主要在移动和 Web 应用中推广这项技术，但他们的长远目标显然是 AR。这也解释了为什么他们选择以 SDK 的形式开放技术，而不是只在自己的应用中使用。他们希望建立一个标准，一个未来 AR 交互的基础协议。如果成功，Hero 可能不只是一家应用公司，而是下一代计算平台的基础设施提供者。
Hero 选择以 SDK 形式开放 AI Autocomplete 技术，这是一个非常聪明的战略决策。CTO Seung Woo Lee 解释说：”我们三年前就意识到，AI agent 的瓶颈不会是 AI 浏览互联网和完成任务的能力，而是用户知道该说什么的能力。所以，我们不是再造一个玩’十个问题’游戏的聊天界面，而是推出一个让用户能一次性完成任何多步骤动作的系统。我们相信我们的技术有能力增强今天所有使用自然语言输入的产品。”
这段话揭示了他们的雄心：不是造一个更好的聊天机器人，而是改变整个行业的交互方式。这就需要让其他公司也能使用这项技术，而不是把它封闭在自己的应用中。从商业角度看，这是一个高风险高回报的策略。风险在于，开放技术意味着竞争对手也能使用，可能会削弱自己的差异化优势。回报在于，如果技术被广泛采用，Hero 就能成为这个新交互范式的标准制定者和基础设施提供者。
我认为这个选择体现了创始团队的格局。他们在 Meta 工作过，见识过平台级技术的威力。他们知道，真正改变世界的不是一个优秀的应用，而是一个被广泛采用的标准。就像 HTTP 协议定义了网页浏览，触摸屏定义了智能手机交互，AI Autocomplete 有潜力定义自然语言交互的标准。
SDK 策略还有助于快速验证技术价值和收集反馈。通过让不同行业、不同应用场景的公司使用这项技术，Hero 可以快速发现技术的优势和局限，找到最有价值的应用场景，并根据实际使用情况不断改进。这比自己闷头做一个应用要高效得多。
从生态系统角度看，SDK 策略有助于建立网络效应。使用 Hero AI Autocomplete 的应用越多,用户就越熟悉这种交互方式。用户越熟悉，新应用采用这种交互方式的价值就越大。这种正反馈循环一旦启动，会形成很强的护城河。就像用户习惯了触摸屏之后，任何新的移动设备都必须支持触摸，未来用户习惯了 AI Autocomplete 之后，任何新的自然语言应用可能都需要支持这种交互方式。
Hero 的 AI Autocomplete 让我重新思考了当前 AI 交互的发展方向。整个行业似乎都在朝着”更自然的对话”这个方向努力，让 AI 更像人类一样交流。但 Hero 提出了一个反直觉的观点：也许最好的交互方式不是完全模拟人类对话，而是结合对话的自然性和表单的结构性。
人类之间的对话之所以高效，是因为双方共享大量背景知识和语境。你和朋友聊天时，可以用很简短的话表达复杂意思，因为你们互相了解。但人和 AI 的对话不一样，AI 不知道你的偏好、习惯和当前情境。如果完全模拟人类对话，就会导致大量不必要的来回确认。
Hero 的方法是承认这个差异，利用 AI 的优势来弥补。AI 可以快速分析任务结构，预测所需信息，实时更新界面。这些都是人类做不到的。通过展示结构化的参数，AI Autocomplete 实际上是在利用机器的优势，而不是试图完全模仿人类。
我认为这种思路会影响整个 AI 产品设计领域。未来我们可能会看到更多混合式交互：既有自然语言的灵活性，又有结构化界面的清晰性。这不是倒退到传统 GUI，而是在更高层次上综合了两种交互方式的优点。
从技术架构角度看，AI Autocomplete 也提出了新的要求。它需要 AI 模型不仅能理解用户意图，还要能预测任务结构和参数需求。这可能会推动一类新的 AI 模型发展，专门用于任务分解和参数预测。Hero 提到他们使用了一系列模型来预测用户可能输入的内容，说明这不是单一模型能解决的问题，而需要专门的技术栈。
对于正在开发 AI 产品的团队来说，Hero 的成功提供了重要启示：不要只关注 AI 的智能程度，还要关注交互设计。最聪明的 AI 如果交互方式糟糕，用户体验也会很差。反过来，即使 AI 能力有限，如果交互设计得当，也能提供很好的用户体验。Hero 的技术本质上是通过更好的交互设计，最大化了现有 AI 能力的价值。
我也在思考这项技术可能的局限性。它适合参数化的、结构化的任务，但对于真正开放式的、需要创造性的对话可能不太适用。比如你和 AI 讨论一个哲学问题，或者寻求情感支持，这种场景下强行展示参数就会显得生硬。所以 AI Autocomplete 可能不会取代所有类型的 AI 交互，而是在特定场景下提供更优选择。
另一个值得关注的是隐私和数据安全。AI Autocomplete 需要理解任务结构和预测用户需求，这意味着它需要访问相当多的上下文信息。如何在提供个性化服务和保护用户隐私之间找到平衡，将是这类技术普及过程中必须解决的问题。
Hero 目前正在自己的助手应用中测试这项技术，计划在几个月内向用户发布。他们重点展示的功能是帮助用户通过自动补全提示词找到会议时间或和朋友见面的时间。这是一个很实用的场景，也是一个很好的切入点。安排会议往往需要考虑多个人的时间、地点偏好、会议时长等因素，用自然语言描述清楚并不容易。有了 AI Autocomplete，这个过程会简化很多。
但我更期待看到 Hero 在更广泛场景中的应用。比如在旅行规划、购物、客户服务等领域，AI Autocomplete 的价值可能更加明显。Hero 的 SDK 策略意味着我们不需要等 Hero 自己去开发所有应用场景，而是会看到各行各业的公司将这项技术集成到自己的产品中。
从融资角度看，Hero 去年获得了 400 万美元种子轮，现在又获得了 Forerunner Ventures 领投的 300 万美元追加投资。Kowalk 表示，根据应用和 SDK 的增长情况，他们计划在未来几个月筹集更大一轮融资。我认为如果 SDK 能够吸引到一批有影响力的客户，证明技术价值，那么 A 轮融资应该不成问题。这项技术的潜在市场非常大，任何使用自然语言输入的应用都可能是潜在客户。
我也在想，Hero 会不会成为下一个 Twilio 或 Stripe 那样的基础设施公司？Twilio 让每个应用都能方便地集成短信和电话功能，Stripe 让每个应用都能方便地接入支付。Hero 有潜力让每个应用都能方便地提供优秀的自然语言交互体验。如果真的走到这一步，Hero 的价值将远超一个普通的应用公司。
但挑战也是存在的。技术再好，也需要市场教育和生态建设。开发者需要理解这项技术的价值，学会如何集成和使用。用户需要适应这种新的交互方式，培养新的使用习惯。这些都需要时间和持续投入。Hero 团队有 Meta 的背景，应该对这些挑战有充分认识。
我特别欣赏 Hero 团队的一点是，他们在三年前就开始布局这个方向，提前申请了专利。这种前瞻性在快速变化的 AI 领域特别难得。很多公司都在追逐最新的热点，而 Hero 则在思考更根本的问题：人机交互的本质是什么？未来的交互应该是什么样子？这种长期思维是真正有影响力的公司的特质。
最后，我想说的是，Hero 的 AI Autocomplete 提醒我们，AI 革命不只是关于更强大的模型，也关于更好的交互设计。技术进步和设计创新同样重要，甚至在某些场景下，好的设计比更强的模型更有价值。这也是为什么我对 Hero 的未来充满期待。他们不是在和其他公司比谁的模型更强，而是在重新定义人机交互的方式。这种创新往往更持久，也更有影响力。
我相信，几年后回头看，我们会惊讶地发现自己曾经需要花那么多时间和 AI 来回对话，就像我们现在回想起曾经需要记住各种命令行指令一样。AI Autocomplete 可能就是推动这个转变的关键技术之一。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微UI设计公司分享：在设计学校文艺汇演报名表单时，如何有效地实现基于选择的输入？本文探讨了隐藏非活动选项与显示非活动选项的设计方案，分析了页面级选项、水平Tab、垂直选项等多种形式的优劣及适用场景。
进入正题之前，大家可以先思考一下，以下情形大家会怎么做？
学校组织文艺汇演，老师、学生、家长可以任意组队报名表演节目。组队后，每个队伍都需要在学校教务系统上录入信息进行报名。
假如你是教务系统的设计师，你会怎么设计这个报名表单？
在上述案例中，对于“参与人员”这个信息，首先需要确定有哪几类人参加？其次再具体录入每一类的具体人员名称。比如：“三年5班队”表演的节目有40个人参加，其中只有老师和学生参加，那么老师分别是哪几位？学生又是哪几位？
那么根据对初始问题“有哪几类人参加？”的回答，要求继续回答“这几个人分别是谁？”，就是基于选择的输入。
基于选择的输入内容大体上可以分为两个部分：初始的选择、选择之后需要输入的内容，如下所示。
表单中基于选择的输入类型可选择的交互形式有很多种，那么在需求过程中，如何选择最适合的方式去进行设计？
表单基于选择的输入场景在B端产品中尤为多见。由于B端产品多为Web端，所以下列分析暂不考虑移动端的情况。
如果把基于选中的内容需要输入的选项称为活动的选项，那大致可分为两大类：隐藏非活动的选项、显示非活动的选项。以上三个案例均为隐藏非活动的选项类型。
显示所有未被选中选择的选择输入内容，会导致表单中出现大量无需用户处理的内容。除非用户需要这部分信息去辅助判断选择选项，否则不建议使用此类方法。
大部分设计方式都会通过隐藏非活动的选项，来降低输入过程中无效信息对用户的干扰。具体如何处理初始的选择和活动选项之间的关系，又可以分为以下几类：页面级选项、水平Tab、垂直选项、下拉选择、单选按钮下方显示、单选按钮内显示。
（1）页面级选项
把过程明确分为两步，这可能是解决表单中选择性输入问题最简单的方法。最常见的做法是采用不同的步骤进行表单内容的填写，如下：
对多数用户而言，初始选择和相关输入之间的关系明确，但一旦做出初始的选择，两者之间的联系会变得微弱。在第二步进行相关输入时，无法查看先前进行的初始选择。看上去这种方案比在当前页面完成所有输入任务的方式更慢。
但在实际测试中，通过该方案设计的表单，用户填写错误比较少，眼动测试参数表现也比较好（主要是眼睛固定的次数、总固定时长以及平均固定时长）。
（2）水平Tab
通过Tab的形式进行初始选择的区分，用户可以浏览表单的Tab，进入对应的Tab中进行选择输入的部分。例如：飞书的登录页。
Tab不仅作为一组筛选功能，还对选择之后输入的内容起到一个明显标题的作用。但大部分人都熟悉Tab作为导航的概念，对于Tab在表单中的应用可能会存在一定的歧义。比如Tab之间是否互斥？提交选择是针对表单中所有Tab还是当前选中的Tab？
对比以上两种设计形式，如果只从结果考虑用户的使用情况，水平Tab在测试过程中基本没有用户出错，并且可以快速完成任务。但根据页面级选项案例的眼动测试数据中会发现，用户浏览整个表单相比上面的方案所需要耗费更多的努力。
（3）垂直选项
从水平Tab方案中表现出来的眼动测试结果可以发现，其不符合用户自上而下的阅读模式。而垂直选项的方案则弥补了这一缺陷。如下图所示。
在选择选项之后，眼睛不需要做太多的移动，设计更有效率，如下方案例眼动数据所示。
（4）下拉选项
相比水平Tab和垂直选项，下拉选项在视觉上没那么独特。每一个选项对应一个初始选项，如下图所示。
下拉选项的解决方案利用选择后，输入的内容在下方特定的位置进行展示。所选选项可作为标题，更好的传达初始选项的范围和影响（看具体业务是否需要在表单中映射这个关系），上方案例中的映射关系就比较弱。
（5）单选按钮下方显示
展示所有选项，根据用户选择情况在下方显示具体需要选择输入的内容，如下图所示。
（6）单选按钮内显示
与单选按钮下方显示的办法类似，在初始选项内显示额外的输入内容。
基于选择的输入，在设计方案的选择中，需要考虑各个方面。
如果每个初始选项的额外输入选项数量很多，且同时存在其他需录入的信息时，那么页面级选项可能是最佳方案。虽然需要两个网页来拆分表单，但至少不会让用户产生困惑，也无需怀疑选项之间是否互斥。
垂直选项和水平Tab两个方案需要通过交互设计或者视觉设计来规避其互斥问题。
如果初始选项列表较长（4或者5个以上），并且每个选项都自带一套基于选择的输入，在设计时最好能针对额外选项采用下拉列表和视觉分组。
如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者单选按钮内显示是最佳的方案。但容易出现因选项切换而造成的页面跳动问题。
就整体而言，隐藏无关的输入项，可以减轻用户对表单的负担，帮助用户更快的完成表单内容。
最好能清晰的显示选项与基于选择的输入项之间的关系。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com