首页

深度拆解9类B端筛选组件，扒出设计的四大问题（上）

清阳 设计资源

B 端表格页面的核心竞争力，在于是否能让用户高效、精准地触达目标数据，而筛选功能正是这一核心的关键载体。作为 B 端产品 “增删改查” 中 “查” 的核心手段，筛选组件的设计直接影响业务操作效率。兰亭妙微ui设计公司将从筛选与搜索的核心差异切入，拆解筛选底层逻辑，系统梳理 9 类主流筛选组件的设计要点、适用场景，同时明确设计原则与避坑方案，帮你掌握适配不同业务场景的筛选设计落地 SOP。

那好话不多说，我们正式开始～

在开始之前先来说说 什么是 B 端产品，我们通常也叫做管理后台。

这里会有两个问题：“它管理什么？到底如何管理？”给大家三秒钟可以思考一下。

首先它管理的是数据，无论是 ERP 系统的订单数据、CRM 的客户数据、OA 的流程数据，你都会发现管理后台就是在不停的对数据进行补充、整合。

那到底应该如何管理？简单来说就是 数据的“增删改查”，筛选其实就是查询的一种重要方式。

image.png

比如一个客户关系管理系统（CRM），销售人员去拜访客户就会提前查询客户信息，来了解客户关注内容进而去组织销售话术。

那这里的筛选应该如何设计？怎样设计既能高效便利，同时也具备扩展性？那今天我们系统盘点筛选组件究竟应该如何设计？

一、筛选与搜索的差别

这里我们先来讲讲筛选的邻居“搜索”，因为很多同学其实对于这两者之间的差别不太了解，只知道它们都是在工具栏当中，都是在做查询数据的工作。但在功能上是有明显的区分：

搜索是对系统的关键词进行精准匹配，比如用户 ID、手机号、昵称、地址等信息内容

筛选则是给出产品的固定条件选项，比如归属人、状态、类型 等，你可以按需勾选条件，就能得出对应数据

这里稍微多说一句，因为所有的 B 端系统都是由字段组成，而在大的分类上，字段主要包含有输入、选择、上传三大类型。

搜索服务于输入类字段，比如刚才讲到了 用户 ID、手机号、昵称、地址等 都是得让用户自行输入才会得到，因此在表单里输入，在表格当中也是输入搜索，所以系统是关联的。

筛选则是选择类字段，也就是归属人、状态、类型 等，在 B 端系统当中，选择字段尤为重要，所以在表单处选择同样在筛选处也是相同逻辑。

理解筛选与搜索的差异后，我们再来说说筛选～

image.png

二、筛选的逻辑

在筛选的过程当中，有着非常多重要的逻辑需要提前掌握，我们通过简单的快问快答，帮助大家快速拆解。

第一题：什么是 且、或、非

这是筛选当中必须要了解的基础运算条件。

且就是筛选的条件必须同时满足才能出结果，比如一个电商数据分析师，需要筛选潜在高意向客户，在筛选条件为「时间在近 30 天有支付订单、近 30 天累计消费金额≥800 元、近 30 天订单次数≥2 次」，必须同时满足才会满足用户需求。

或就是这些条件满足任意一个就能出结果，比如还是电商数据，需要寻找对产品有兴趣的潜在客户，就需要筛选「近 90 天内有过人工咨询记录、近 30 天内访问产品详情页≥6 次、近 180 天内提交过试用申请」，三个条件满足任意一个，这样就能涵盖更为全面。

非就是这些条件必须排除掉才能出结果，比如电商数据，因为涉及到刷单、退款的情况，需要将其进行清洗，因此在筛选条件上就需要满足「订单状态≠测试订单、支付状态≠已退款、客户类型≠内部员工」，需要同时排除这些数据。

所以对应的筛选运算规则，其实背后都是用户在使用时需要深度分析使用的最为重要的工具～

第二题：在B端系统当中多个筛选条件默认的运算规则是什么？

A：且 B：或 C：非

在 B 端系统当中，最常用的运算规则就是且，也就是取多个筛选当中的交集。

比如下面这三个筛选项，所计算的呈现规则就是 「销售负责人是李强」且「销售时间是 近一个月」且「价值为高价值」的客户，这样就是一个典型的且的关系。

因为这种思维方式是最符合用户的思考逻辑，这也是众多 B 端系统当中的常见逻辑。

image.png

 

第三题：且、或、非可以同时存在于一个筛选组合当中吗？

A.可以

B.不可以

它们可以出现在同一个筛选组合当中，因为实际的业务往往是“多条件、多逻辑” 的复合场景。

比如在教育管理系统当中，班主任要筛选 初三年级且数学月考不及格 或 非 住校生 的学生，来针对这两类人群进行重点管理与监控。

但在筛选的设计当中，为了让用户理解逻辑，我们需要通过 条件组（如括号、层级缩进、虚线框）让用户直观感知分组关系，避免依赖抽象的优先级规则。

image.png

第四题：如果你是一个设计师，应该如何降低成本表达这个关系？

因为逻辑较为复杂，所以在筛选时有些基础办法可以降低门槛。

① 可视化展示筛选运算，如果用户对于且、或逻辑不太了解，可以使用图标快速表示

image.png

② 实时校验逻辑规则，不要出现相互矛盾的筛选逻辑

这个功能其实不太好做，但 ONES 做了一个最简单的逻辑判断。在且条件当中，同一筛选条件不得选择两次，这样用于避免在且条件当中经常出现的相互矛盾的筛选逻辑。

image.png

三、筛选的类型

好的，准备工作已经完成，我们就可以顺利了解筛选的类型。

由于筛选的类型众多，我们会按照 业务复杂度、容器差异 两个维度，来对筛选进行归类。
通过业务复杂度，将其分为：基础筛选、高级筛选、自定义筛选

按照容器差异，将其分为：标签筛选、折叠筛选、浮窗筛选、抽屉筛选、表头筛选、AI 筛选

1. 基础筛选

基础筛选是将 高频使用（使用频率≥80%）的筛选条件进行固定，一直保持在页面中的核心位置，不折叠、不隐藏，让用户能够直接看到的筛选类型。

这是一个最为基础的筛选方式，在常见的 Ant Design、Arco Design 的页面模板当中都会有基础筛选的身影。

image.png

使用基础筛选最为重要的便是 快速触达，用户打开页面就会查看筛选条件，不需要点击“更多”“展开” 等入口，这能满足 B 端用户 高效完成日常操作 的核心需求。

在使用基础筛选时，我们需要注意以下问题：

① 基础筛选条件的数量不宜过多，一般 3-4 个最为合适

因为筛选条件过多，就失去了常驻的意义。但在实际业务当中，我们也需要考虑 5 个、7 个这类极端场景，毕竟常驻是最为基础的方案，难免会遇到特殊情况。（需要在筛选的规则当中进行梳理，将交互逻辑呈现清楚）

② 基础筛选当中，排序规则会非常重要

一般按照 高频-低频 的方式，从左到右依次排列，对于高频低频的获取方式，我们可以数据埋点、卡片分类、问卷调研等多种方式进行搜集。

image.png

③ 筛选基础，样式就不基础

基础筛选有着较多的筛选样式，大家可以结合自身业务进行选择，这里推荐样式一与二，因为展示效率更高～

image.png

这里列举一些常见的基础筛选产品，大家可以一并查看：

image.png

2. 高级筛选

高级筛选是较为复杂的筛选形式，它为了满足更多 低频、复杂、个性 的业务需求，通常会提供相对独立筛选面板，展示更多的筛选条件。

独立面板也就是我们后续会提到的 浮窗筛选、抽屉筛选、表头筛选...，所以它们的关系也会相对复杂。

image.png

高级筛选与基础筛选最大的区别在于：

基础筛选只能覆盖 3 个左右的高频筛选，而高级筛选可支持 10 + 维度的灵活组合；常驻只能使用且的逻辑相对简单，而高级可以有条件组嵌套支持复杂业务逻辑；常驻位置较为固定，而高级则有面板加持，可以更为灵活。

其实选择高级筛选或者基础筛选，最大的话语权还是场景。

如果你的筛选是简单筛选几个条件，那基础筛选就已经足够，反之对筛选条件、筛选效率有着更高要求，我们则会考虑更为复杂的筛选方式。

在使用高级筛选时，这些问题尤为重要：

① 因为高级筛选需要访问独立面板，因此在入口的设计就会尤为重要。一般会用文字链接或者图标来提示用户，便于寻找。

image.png

② 基础筛选与高级筛选可以并存，因为角色不同、使用场景不同，常驻可以作为高频使用的固定模块，高级则作为特定角色需要更多筛选的补充，这部分放在下面 筛选的原则-筛选角色化 给大家详细说明。

这里列举一些常见的高级筛选产品，大家可以一并查看：

image.png

image.png

3. 自定义筛选

自定义筛选则是在高级筛选的基础上，进一步业务化。

它是为了满足 字段不固定、需求差异化 的业务场景，用户能够自定义选择 筛选字段，配置字段的筛选规则。

使用自定义字段最重要的核心要素就是 突破固定字段限制，因为高级筛选是针对产品预设好的固定字段进行筛选，自定义则是用户可以自行选择字段，用于适配更为灵活、多变的业务场景，如 CRM 的客户自定义字段、OA 的流程表单（因为不同的公司对于 流程、客户信息的管理不太相同，因此需要提供自定义字段进行支持）

在设计自定义筛选时，我们的方案选择主要受到“筛选频率、条件复杂度、界面空间”的影响。

① 小入口+大弹窗，以筛选图标作为入口，点击过后弹窗展示所有筛选条件。这种方式适合 中低频（每天 1-3 次）使用筛选，界面空间紧张用大弹窗容纳复杂配置

image.png

 

② 展开收起式，当用户点击筛选后，将表格与工具栏之间的部分展开，用于呈现筛选条件。它能够避免弹窗的跳转感，筛选时用户的视线可以无需离开表格区域，适用于 筛选条件数量多、高频使用的场景

image.png

③ 固定常驻式，在顶部区域固定，默认展开，这样就无需点击入口，这样更适合“筛选是核心工作流” 的场景image.png

 

自定义筛选是最难设计的，在使用过程中会有 四大基本元素。

筛选入口：需要让用户快速找到入口，同时不干扰主界面。

逻辑运算区：主要就是 且、或 逻辑的展示，只是在运算区域里面，需要考虑切换时究竟应该如何做？

神策数据是通过文字方式，快速展示 且、或 逻辑，并且支持手动直接切换，这个方案目前看来是用户最容易理解的。

字段选择区：选择你所需要筛选的字段，点击 添加、选择，整体逻辑较为简单。

条件组管理区：筛选条件全部展示过的后续动作，比如保存，批量录入 等相关动作都可以放在条件组管理当中，进行呈现。

 

4. 标签筛选（外露筛选）

接下来的 标签筛选、折叠筛选、浮窗筛选、抽屉筛选，都是对容器进行分类。因此我们需要进行展开讲解，穷举一下不同容器的形式和变化。

先来说说标签筛选（外露筛选）

标签筛选是将重要的筛选选项设计成“可点击的标签按钮”，将筛选过程当中的选项直接来进行展示，目的是为了能够让筛选条件，直接暴露出来给到用户进行使用。

它最重要的是提升效率，针对高频使用的筛选维度将其外露展示，将多步操作压缩为 一步点击，同时能够凸显当前的筛选状态，避免用户忘记自己选了什么。

在使用标签筛选时，需要注意这些内容：

  1. 在标签的设计上，因为存在的样式相对较多，所以我们可以根据自身产品的视觉层级，进行逐一选择。
  2. 涉及到多角色使用标签筛选时，需要重点考虑角色化的差异，因为其常驻，如果内容都不是用户关注的点，标签常驻的意义也不会很大。
  3. 当标签选项超过 7 个时，则需要考虑对此筛选内容是否需要进行单独处理，因为选项过多，用户使用标签筛选也不会特别清晰。

比如我想外露的内容是各种状态，我就可以将其放在顶部，进行指标图+筛选功能的杂糅，像在小红书千帆系统当中，对于订单的多种状态，就会使用这一技巧，进行呈现。

image.png

5. 折叠筛选

折叠筛选则是用隐藏的方式，按照使用频率将筛选条件分层。高频条件平铺展示、低频条件收折在面板当中，点击展开的筛选类型。

它最重要的价值是要平衡“空间与效率”的问题，当筛选条件 4-8 个时，如果全部平铺页面就会过于冗余，如果全部隐藏又会增加操作步骤，折叠筛选通过 “高频展示 + 低频折叠”，让用户既能快速操作高频条件，又能按需调用低频条件，兼顾 “便捷性” 与 “功能完整性”。

正因为这样的特性，所以很多基础固定的筛选一旦变多后，通常就会使用折叠的方式进行呈现。

image.png

6. 浮窗筛选

浮窗其实是将筛选包起来，用浮窗进行承载，临时唤起，用完即走。

在设计时首先会有一个统一的筛选入口，浮窗弹出后设置对应条件，然后点击确认、取消，浮窗自动收起，不占用页面只提示有筛选条件。

image.png

对于系统而言，它为什么需要浮窗筛选？本质上会有三个原因：

  1. 节约空间，因为在列表当中，如果把筛选条件进行常驻会挤压核心内容，列表当中的屏效相对较低，这时候筛选则会呈现为隐藏-唤起的模式，我们列表所展示的信息数量就会变多。
  2. 降低页面复杂度，当筛选条件是常驻时，条件多了过后就会导致使用起来异常困难，特别是针对那些使用频率本身偏低的用户来说，更是无效信息，因此收纳起来就能降低复杂度，使用户的专注度能够更加聚焦于核心任务当中。
  3. 更强的适配性，假如在需要设计移动端的筛选，也可以复用统一的交互，并且用户点击筛选图标已形成记忆。

我们之前就有相同的业务，需要将桌面端的部分移植到 Pad 端与移动端，使用浮窗性价比就会更高。

7. 抽屉筛选

抽屉筛选就是浮窗筛选的另一种表达，它主要是平衡 筛选条件与界面空间 的另一种选择。
但确实会发现现在的抽屉筛选已经没有当年的雄风，感觉大家就避之不谈，基本不会使用它。其实也会有几个原因：

  1. 抽屉需要来回滑动，操作上不如弹窗直接高效，视觉上也缺乏弹窗的简洁与高级感；
  2. 展开时内容常偏向主屏幕一侧，容易造成明显的视觉偏移，影响整体体验

很多之前沿用抽屉筛选的产品，现在都在调整自己的交互方案。

并且因为抽屉的不稳定性，我们其实不太建议同学们使用抽屉进行选择自己的选项条件。

image.png

8. 表头筛选

表头筛选是一种相对特殊的筛选形式，它是将筛选入口放置在头部，提供给到用户进行快捷的筛选操作。

本质上是在满足长时间使用 Excel 用户的使用习惯，因为在 Excel 当中表格众多，对于筛选只能使用一种影响较小，最为通用的做法，随着 B 端产品的发展，也会发现很多设计方式都被得到了延续。

在理解表头筛选时，会有两种使用场景：

① 空间较少，使用表头筛选可以进行轻量的筛选动作。

这样点击筛选过后便可直接选择筛选选项，执行筛选操作。你可以看到飞书文档，在主页列表中就会这样设计便可以轻量满足筛选需求。

image.png

② 字段太多，需要表头筛选带入更多筛选值，进行筛选安排。

这种方案本质上是针对高级筛选的体验补充，记住！是需要高级筛选 or 自定义筛选时才会用到筛选策略。

因为在这两种筛选当中，需要选择筛选字段，有大量的选项，这对用户来说会十分影响其正常使用，通过表头处的点击，就能够将字段默认带入，缩短筛选路径，提高筛选效率。

这种方案的表头筛选也会有相应弊端，首先是表头空间问题，因为表头本身需要展示的信息就相对较多，比如冻结、排序、等等，过多的操作会导致表头过于复杂，如果还加上筛选，表头空间就会更大，更不适合进行使用。

其次用户理解成本也会相对过高，因为很多行业属性相对较为简单的 B 端产品并不会使用这类筛选，对于用户初次使用也会有不小的负担。但表头筛选目前的普及率仍然比较低，使用比较频繁的便是纷享销客。

image.png

9. AI 筛选

来到重点，AI 筛选。它不仅仅是未来筛选设计的大趋势，更是能够在产品层面解决 筛选复杂化的问题。

比如刚才的高级筛选、自定义筛选，无疑都是在增加用户的操作层面，他们需要不断的选择，才会得到自己想要的结果。而 AI 筛选的价值在于它解决了 用户自然语言与程序逻辑执行 之间的壁垒，让筛选能够响应用户的自然语言诉求。

比如我想筛选最近一个月的高价值客户，就只需要在 AI 输入框中说出自己想法，然后就能得到筛选结果。

image.png

程序逻辑执行，程序就可以根据自身知识库，对高价值客户进行拆解，逻辑变为 客户时间为：最近创建一个月客户、类型为高价值。

这样一来，其得到的结果就会更为简单合理，但是在设计 AI 筛选时，它的难度还是会相对较大。

因为 AI 的结果可能会出现差错，那对应的修改策略就会极为重要。

所以我们可以看到，像 Jira 对于 AI 筛选就会有更多的修改入口让用户对于筛选结果进行快速修正，同时在入口上也需要做更多的设计进行提示。

image.png

转载：优设

兰亭妙微（蓝蓝设计）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。

 

image.png

评论(0) 浏览(112)

如何设计产品中的反馈｜让交互有回应，体验更流畅

清阳 设计思维

在数字化产品设计愈发注重用户体验的当下，界面反馈早已不是单纯的“操作提示”，而是串联用户行为、产品功能与体验感知的核心纽带，更是决定产品易用性、专业性与用户留存度的关键细节。作为深耕UI/UE全链路设计十余年的专业团队，兰亭妙微UI设计公司（蓝蓝设计）长期聚焦B端后台管理、大数据可视化、工业软件、智能设备界面等多元场景，累计服务数百家中大型企业与行业龙头客户，在各类实战项目中沉淀了一套完整、可落地的反馈设计方法论。

在界面设计中， 反馈（Feedback）是系统对用户操作做出的即时、可感知的回应 。系统通过界面元素、动效、声音或震动等方式，告知当前操作已被识别、系统状态如何，以及后续可采取的行动。

1.反馈设计的重要性
在 Jakob Nielsen 提出的十大交互设计原则中，居于首位的核心准则即为 “系统状态可见性”。该原则强调，系统必须通过及时且恰当的反馈，始终确保用户对当前发生之事、操作结果以及后续预期保持清晰的认知。

image.png

▲ Jakob Nielsen 十大交互设计原则
设想在购物时的场景：当用户点击“购买”按钮后，若界面缺失加载状态、操作确认或视觉反馈，用户将陷入操作不确定性——疑虑系统是否响应、是否需重复操作，甚至因焦虑而放弃交易。

image.png

在页面中添加有效的反馈能够将这种不确定性转化为明确的行动指引，通过状态变化、进度提示和结果确认等机制，让用户清晰感知系统响应，明确知道“发生了什么”以及“接下来该怎么做”，从而提升用户信任度与流程转化率。
2.在项目中如何完整地梳理并设计反馈
反馈设计并非后期补充的简单的提示，而是从产品设计的初期，就作为关键要素进行系统性的规划与设计，接下来，我们将以“创作者音色复刻”项目为例，分享作者在实际项目如何设计反馈。
“创作者音色复刻”功能的诞生，是为提升公众号“听全文”功能的体验。通过此功能，作者仅需朗读一段系统提供文本，AI 即可复刻出作者音色。复刻后，读者就可以在听全文时能听到 AI 模仿作者的专属音色，本文将聚焦的是作者录入并复刻音色的流程。

image.png

复刻原理看似简单，但对于公众号创作者而言，“创作者音色复刻”是陌生的功能，且中间涉及到很多由 AI 模型或用户选择导致的复杂判断逻辑。如果系统没有提供清晰的反馈，容易导致作者困惑或放弃使用此功能。
为了降低用户的使用门槛，在设计页面时，作者将系统的反馈设计作为重点，用以下三个步骤来实现：
Step 1 ：梳理反馈节点
在产品设计初期，系统性地梳理反馈节点是构建有效反馈机制的首要环节。通过绘制逻辑流程图，设计师能够将用户与产品的交互路径可视化，清晰呈现用户每一步操作后系统应提供的反馈。
在绘制流程图的时候，需要完整展示一下两点：

  • 用户完成任务所需的关键反馈节点

  • 用户在过程中可能产生的系统判断或用户选择其导致的反馈分支

案例
在“创作者音色复刻”项目中，作者通过“逻辑流程图”系统性梳理用户交互路径，目的是梳理所有反馈节点——包括主流程的 5 个核心反馈节点，以及因系统判断产生的 2 个反馈分支所衍生的额外 2 个反馈节点，从而确保反馈设计覆盖完整交互路径，避免遗漏关键环节。

image.png

▲流程图：正方形代表反馈节点，菱形代表判断节点
Step 2：定位节点的反馈类型
绘制完“逻辑流程图”后，设计师需为每个节点定位反馈类型。我们将常见反馈类型归纳为以下四类，每类都具有明确的界定标准与应用场景：

  • 状态反馈：系统对用户主动操作的即时状态确认，消除用户对操作是否生效的疑虑。

image.png

▲当用户轻触“开始录制”按钮时，按钮颜色加深、形态变化，直观告知用户操作已生效。

  • 进度反馈：当操作无法即时生效且需一定时间处理时，通过进度反馈告知用户当前任务进度。

image.png

▲微信下载大文件时显示的进度条，或加载动画，能够有效管理用户预期，减少等待焦虑。

  • 确认反馈：对可能产生负面后果的操作，可以通过确认反馈向用户提供上下文信息来解释操作的后果，向用户进行确认，从而防止发生错误。

image.png

▲微信删除联系人时，界面会告知用户当前操作所造成的风险，防止用户错误操作。

  • 结果反馈：用户完成任务节点后，系统明确告知操作成功或失败。

image.png

▲用户收藏公众文章后，界面显示“已收藏”并伴随成功动效，明确告知操作结果。
案例
回到“创作者音色复刻”项目中，作者为每个反馈节点匹配了最贴合的类型。例如，“开始录制”节点采用状态反馈确保操作确认，“等待录音处理”节点采用进度反馈管理用户等待预期，“朗读完成”节点采用结果反馈明确操作结果。
通过定位反馈类型，我们能够为每个交互节点建立相应反馈逻辑，确保用户在每个操作环节都能获得正确的系统响应。

image.png

▲初步为流程图中的反馈节点，定位反馈类型 
Stept 3 ：设计反馈表现
在明确反馈节点与类型后，就可以聚焦到每个节点，为反馈节点设计最合适的反馈表现形式。这一环节需要将抽象的反馈概念转化为具体界面元素，设计反馈时需要满足三个基本原则：

 

  • 及时：反馈应在操作后即刻发生，让用户感知到系统已响应。

  • 清晰：反馈信息应准确无误，一目了然，明确告知“发生了什么”及“下一步行动”。

  • 适度：反馈强度应与信息重要程度相匹配，避免过度干扰。

当单一反馈形式无法同时满足上述原则时，设计师可采用多通道反馈叠加策略，通过整合不同感知维度的反馈形式，增强反馈效果与用户感知。在移动端交互设计中，常见的反馈通道包括：

  • 视觉反馈：通过界面元素的视觉变化传达系统状态，例如颜色变化、动画效果、图标提示、文字提示及高亮标记。

  • 听觉反馈：通过声音信号增强用户感知，例如系统音效、操作音效及语音提示。

  • 触觉反馈：通过设备震动提供物理层面的反馈，例如短震确认、长震警告。

 

接下来我“创作者音色复刻”项目中以两个具体场景来真实项目中设计反馈表现的应用以上原则的设计与决策过程：

案例一：朗读错误的反馈优化
在音色复刻过程中，用户需要准确朗读文本。当准确率不足 90% 时，系统需要告知用户朗读有误并引导重新录制。
最初期方案评估
初期我们采用了业界通用的反馈样式：Toast 轻提示与弹窗提醒。虽然这两种方案满足了基本的及时性和适度性要求，但在可用性测试中暴露出明显缺陷。用户普遍反馈“无法确定具体错误位置”，导致重复录制时缺乏明确的目标导向，严重影响任务完成效率。

image.png

▲方案 a：Toast 轻提示（左）， 方案 b：弹窗提醒（右）。
问题分析
通过用户测试的结论，我们发现有效的错误反馈机制如果要达到“清晰”这一原则，必须构建完整的信息闭环。既要准确指出问题所在，又要提供清晰的修正路径，具体而言，需要同时回答两个核心疑问：

  • 朗读错误的具体位置在哪里？

  • 下一步应该做什么？

方案迭代
基于此认知，我们进行了方案重构：
方案 a：在单次朗读任务完成后，系统立即对识别出的错误文字进行视觉标红处理，并配以明确的重新录制指引。
方案 b：在朗读过程中实时监测发音准确度，对错误内容进行即时标记与提示。

image.png

两个优化方案在“清晰”原则得到了完善，通过精准的文字定位与明确的指引文案，消除了用户的认知不确定性。最后综合用户测试评估结果，发现方案 b 会在录制过程中，会影响用户在阅读时候的专注度且随时造成用户任务中断，违背了“适度”原则，最终选择了方案 a 作为落地实施方案。
案例二：录制状态的多通道反馈设计
在启动音频录制的关键节点，如何确保用户明确感知界面状态切换，并及时开始朗读，是本案例的设计重点。
最初期方案评估
初期方案仅依赖按钮状态的视觉变化作为反馈信号。

image.png

在用户测试过程中，我们观察到由于操作时手指对界面视觉反馈元素的遮挡，超过 40% 的测试者未能及时察觉状态变化，导致录制启动延迟或录入无效音频片段。

image.png

▲操作时手指对界面元素的遮挡
解决方案的探索过程
我们首先尝试强化视觉反馈通道，在界面核心区域增加 Toast 提示组件。然而评估后发现，这种方案虽然提升了状态感知度，但同时也带来了新的体验问题：弹出的提示层遮挡了需要朗读的文本内容，违背了反馈设计的适度性原则。

image.png

最终方案的确立与验证
通过多轮方案迭代，我们最终采用了多通道反馈的设计策略：在保留基础视觉反馈的同时，引入触觉反馈维度。具体实现方式为用户在轻触录制按钮时触发设备的短震动提示。这一设计巧妙地在不增加视觉干扰的前提下，显著提升了状态反馈的感知强度，既确保了操作的明确性，又保证了阅读体验的连贯性。更多关于触觉体验内容详见：用户界面之外：触感体验

image.png

通过这两个案例的完整设计过程，我们认识到反馈的表现形式并不是固定的在组件 toast、弹窗、进度条这几个组件之间进行选择，而是需要设计师在遵循“及时、清晰、适度”这三个原则，深入理解具体场景中，了解用户困境再进行设计与创造。当反馈能够准确预见用户疑惑并提供清晰指引时，它就不再是被动的提示，而是变成了推动任务顺利进行的关键设计要素。
3.反馈的必要性
最后，在“创作者音色复刻”项目中，我们也发现界面设计中的反馈并非越多越好，其存在价值需通过严谨评估来确认——反馈应服务于核心交互目标，有效弥补用户认知与系统状态间的“信息差”。若交互逻辑本身能自然引导用户行为、从源头规避误解，则额外反馈反而会成为冗余干扰。
案例
在“创作者音色复刻”项目的录制按钮的交互设计中，我们就经历了从“增加反馈提示”到“重构交互”的思维转变。
最初期方案评估
在项目初期，我们采用了“长按开始录制”的交互方案。

image.png

然而用户测试显示，受微信语音操作习惯的影响，多数用户在长按时会不自觉地过度贴近设备麦克风，导致录音质量下降，同时因设备倾斜造成朗读文字阅读困难。
最初尝试-提示纠正用户行为
我们首先尝试了增加 Toast 提示的方案，在用户进入录制页面时显示操作指引。但额外增加反馈并没有改变用户的行为，反而影响了用户阅读文字。

image.png

通过系统性分析，我们意识到问题的本质在于交互模型与用户任务目标之间存在内在冲突 ：长按动作本身与微信发语音交互类似，易引起贴近设备的心理暗示。

image.png

从提示纠正到优化交互设计
因此，我们改为重构交互框架，尝试将操作改为“轻触录制”。

image.png

新的方案，显著改善了用户的录音姿势——轻触操作自然避免了用户过度靠近设备的行为，同时保持了舒适的阅读角度。通过交互的优化，我们从根源上解决了问题产生的前提条件。
案例启发
这一案例表明，反馈的必要性需置于整体交互系统中审视：当系统自身能通过更优的结构设计实现引导时，反馈应保持克制，而非作为补偿性措施强行添加。
4.最后
界面中有效的反馈可以成为连接系统与用户之间的桥梁。在设计反馈时，可以参考作者在“作者音色复刻”项目中使用的以下流程：首先借助“逻辑流程图”进行整个项目的“反馈节点”梳理，然后定位“反馈类型”，最后在遵循“及时、清晰、适度”的原则进行反馈的表现的设计，从而为产品构建完整而反馈机制。
除此以外我们持续审视每个反馈的必要性，优先通过优化系统交互逻辑来简化反馈需求，从而在提供明确引导与保持交互简洁之间找到平衡
转载：WeDesign

兰亭妙微（蓝蓝设计）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。

 

image.png

评论(0) 浏览(102)

如何为日本市场打造多场景设计语言

鹤鹤 设计思维

围绕「如何更好地触达日本用户」这一目标，并行探索了两种不同的设计方向：
一种侧重‘日式美学体验’，另一种侧重‘saas商业信任’。
这个过程引发了我们关于「美学价值」与「商业目标」如何平衡的深度思考，本文旨在沉淀与分享我们团队的这次探索过程与方法论。
首先，设计之前先读懂日本美学的“潜台词”：
日本设计常被视为高级感的代名词，其设计感强的同时能保证信息足够清晰明了。这背后是深植于其传统哲学的独特美学——「间」（Ma）与「侘寂」（Wabi-Sabi），一种于克制中见风骨的艺术。它并非悬浮的理论，而是可以被转译为现代设计语言的实用准则。
对我们而言，其核心是
通过克制的色彩、有序的留白和对细节的极致打磨，践行“少即是多”的哲学理论
。
一、色彩：「和风三色」的碰撞
在色彩选上，我倾向于从日本传统色谱（https://nipponcolors.com/）中汲取灵感。相比于高饱和度的色彩，源自自然的
低饱和度、低明度的配色
更能营造出沉静、雅致的氛围。为了让设计更具识别性，会考虑适度选择
樱色、松绿、靛蓝
三个颜色，唤起用户对日本文化的深层共鸣。
简单来说：樱色、松绿、靛蓝这三种颜色，虽然没有一个官方固定的名称，但它们的确是能够完美代表日本传统审美和自然观的经典色彩组合，之所以如此具有代表性，是因为每一种颜色都深深植根于日本的自然、文化和历史之中，感兴趣的同学可以自己去了解一下，在这里我们把它们简称为
「和风三色」。
 

image.png

二、布局：严谨的留白与“直角vs圆角”的思辨
布局是日式设计的灵魂，而留白（间）则是其精髓。
视觉元素间的留白比例通常会达到30%-50%
，远超一般的设计标准。这不仅是为了美观，更是为了引导视线，让信息有序地呈现。设计中严格遵循网格系统，对文字与图片的间距、字体的行间距进行精细到像素级别的调整，构建一种“板正”的秩序感。
参考：https://www.webdesignclip.com/
 
 
这里有一个很有趣的细节值得探讨：
边角处理的选择
选择圆角——能带来亲和、自然的感觉，符合一部分日式设计中对
“有机形态”
的追求。
选择直角
——
基于严格网格系统的排版中，锐利的直角能够最大化地强化秩序感和专业性，让整个界面看起来如同精心切割的木工作品，精准而有力。
选择哪一种，取决于想传递的具体气质，我们也是应用到了不同的场景里进行尝试。
三、图片：承载“视觉呼吸”的侘寂之窗
在日式排版中，图片往往不只是信息的补充，更是
营造“视觉呼吸感”的关键载体
。
因此，在图片选择上，需要格外注意它能否传达出「侘寂」美学中那种对不完美、无常、自然的敬畏感。
通过
大量的留白来突出主体
，引导观者进入一个宁静的哲学意境。
它们与文字和图标一起，共同构成了那个充满呼吸感、值得细细品味的设计空间。
 
 
站点实战复盘——两种设计策略的并行探索：
一、 两种设计哲学（方案）的碰撞
1、以‘日式美学优先’建立情感连接
方案A ————
  •  
    沟通方式：
    感性沟通——传达“我能让你变得很有品位”的概念，向他们兜售一个关于“理想之家”的筑梦工具；
  •  
    设计目标：
    希望能第一时间抓住用户眼球，让用户感知到这是一家高级的公司；
  •  
    风格调研：
    在本地用户投票调研中拿到了不俗的票数，说明成功地引发了用户“共鸣”；
  •  
    差异化：
    在普遍SaaS网站中，风格比较独特鲜明；
  •  
    总结：
    通过大面积的留白、克制的和风配色、以及严谨的网格系统和锐利的直角，去传递产品的专业与品位，旨在先与用户建立情感共鸣。
     
     
2、以‘本土信任优先’驱动商业转化
方案B ————
  •  
    沟通方式：
    理性沟通——传达“我们很厉害”的概念，告诉用户我们在卖一个“解决方案”；
  •  
    信赖感强：
    蓝色主色搭配黄色的辅助色，配合线条插画，是日本SaaS网站建立用户信任的“标配”元素；
  •  
    风格清晰：
    明确的SaaS风格，降低用户认知成本，同样在本地用户投票调研中拿到了不俗的票数；
  •  
    总结：
    符合日本主流SaaS网站的设计范式，开门见山地展示了软件的核心功能、客户案例墙、增长数据，通过“理性沟通”，用最快的速度告诉用户“相信我，我能帮你解决问题”；
 
 
*配图仅截取方案的某一部分
二、团队的决策与沉淀：设计策略的“情境化”应用
经过用户调研和团队内部的深入讨论，我们达成共识：在SaaS官网这一
以“转化”为核心
的特定场景下，以方案B——“信任优先”的策略更贴合现阶段的商业目标。
它在建立用户信任、降低认知和决策成本上表现更优，是更稳妥的市场切入策略。最终上线后，我们的结论也在日本市场中得到了相应的数据验证。
当然，我们对于方案A的验证也没有完全舍弃，而是应用在线下推广的应用中，在平面设计领域尽可能发挥出日式美学的魅力。
image.png
三、设计的答案，永远在“情境”之中
我们只是在不同声道上与用户对话，作为设计师，我们的目标就是成为一个“多声道”的沟通者，既要懂得如何用“工程师”的语言搭建高效的转化桥梁，也要懂得如何用“艺术家”的语言构建引发共鸣的情感空间。
这或许也是国际化设计最迷人的挑战吧！
 
 
作者：群核科技MCUX
链接：https://www.zcool.com.cn/article/ZMTY3ODA2OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

兰亭妙微（蓝蓝设计）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。

 

image.png

 
 
评论(0) 浏览(215)

为什么 AI 产品都爱用蓝紫色？背后藏着色彩心理学与行业巧思

鹤鹤 设计思维

打开手机里的各类 AI 应用，你大概率会被一种蓝紫色调 “包围”：通义 APP 的 logo、百度的问 AI 按钮、钉钉的 AI 表格图标、讯飞星火的官网 banner……
 
可用的色彩那么丰富，为何 AI 产品偏偏对蓝紫色 “情有独钟”？其实这种选择并非设计师随意为之，背后既贴合大众的认知习惯，也藏着心理学逻辑与行业设计巧思。

image.png

一、色彩设计心理学：精准契合 “稳重 + 创新” 的核心需求

 
颜色从来不止是视觉装饰，更承载着大众的心理联想，而蓝紫色恰好精准踩中了 AI 产品最需要的两大认知标签 ——“靠谱稳重” 与 “前沿创新”。
 
蓝色自带的 “信任感” 早已深入人心：支付宝用蓝色传递安全可靠，多数科技品牌以蓝色彰显专业严谨，AI 产品自然也借助这份 “信任红利”，让用户从视觉上就先认可其技术实力。
 

image.png

但仅靠蓝色远远不够，AI 功能还需凸显 “新意”，避免陷入传统科技产品的沉闷感。此时紫色的加入，恰好补上了 “创新感” 的缺口：紫色由蓝色与红色调和而成，既保留了蓝色的理性稳重，又融入了红色的活力，却无红色的刺眼感，比蓝色多了几分创造力与神秘感。

image.png

 
这种 “理性基底 + 创新活力” 的双重质感，堪称为 AI 量身定制 ——AI 既要靠严谨算法体现逻辑，又要靠创新功能吸引用户，蓝紫色的组合完美适配这一核心特质。

image.png

以钉钉为例，其主色调为蓝色，但在 AI 相关设计中大量融入紫色调：官网首页 banner、分类卡片、功能按钮、UI 界面及装饰图形等，均采用蓝色搭配浅紫、粉紫的组合，既保留了品牌的专业感，又传递出 “能创造新价值” 的工具属性，精准契合 AI 突破常规的定位。这种 “蓝色稳根基 + 紫色添新意” 的搭配，让 AI 产品既不冰冷遥远，又不失专业可信度。
 

二、打破科技色惯例：在同质化中实现差异化突围

 
早年科技圈几乎是 “蓝色的天下”：海外的 IBM、Meta、微软、推特等品牌，均是蓝色的重度使用者；国内不少互联网品牌的主题色选择，也或多或少受此影响。

image.png

若 AI 产品继续沿用纯蓝色，极易在同质化竞争中被淹没，而蓝紫色则成为最具性价比的破局方案。一方面，蓝紫色调未脱离 “科技感” 的大众认知框架，不会让用户产生陌生感；另一方面，鲜艳的蓝紫渐变自带强烈视觉吸引力，能营造出未来感与现代感，快速抓住用户眼球。随着越来越多 AI 产品采用这一配色，蓝紫色逐渐成为行业视觉约定，帮助用户快速识别 AI 工具与相关内容。

image.png

 
阿里通义千问便是典型代表：设计中摒弃了阿里系传统的橙红色，也未跟风科技圈的纯蓝色，转而采用青蓝到亮紫的渐变设计，从 logo、页面 UI 到宣传海报，均贯穿蓝紫色调。既与其他 AI 产品形成差异化辨识度，又牢牢扎根于大众对 “科技色调” 的认知，实现了平衡与突围。
 

三、数字场景 “天生百搭色”：适配多场景使用需求

 
AI 产品需适配手机、电脑等多终端的日常使用，而蓝紫色恰好是数字场景的 “理想配色”，经得住各类屏幕与使用场景的考验。
 
其一，显示效果友好。蓝紫色在屏幕上不会像红、黄色那般刺眼，也不会因过浅而模糊不清，尤其是渐变效果，能在手机、电脑上呈现出丰富层次感。无论是深色模式下的护眼需求，还是浅色模式下的醒目度要求，蓝紫色都能完美适配，契合用户昼夜切换的使用习惯。

image.png

 
其二，视觉效果突出。蓝紫色搭配和谐不易出错，同时贴合当下设计潮流，能让用户直观感受到产品的新潮感，提升对产品的好感度。
 
当然，蓝紫色并非 AI 产品的 “万能公式”：ChatGPT、腾讯元宝采用绿色主题，更显活泼灵动；ima 页面以浅绿色为主，按钮等元素搭配深灰色，无明确主题色；纳米 AI 的 logo 选用红色，风格特立独行（这类配色在 AI 产品中相对小众，不建议轻易尝试）。

image.png

 
但对绝大多数 AI 产品而言，蓝紫色仍是最稳妥的选择：既契合大众对 “靠谱科技” 的认知，又能在竞争中脱颖而出，还能适配各类使用场景。下次再看到蓝紫色调的 AI 产品，你便会明白，这背后藏着设计师精准拿捏用户心理的 “设计巧思”。
 

兰亭妙微（蓝蓝设计）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。

 

image.png

评论(0) 浏览(367)

B 端设计师为何要懂技术？该懂哪些技术？

鹤鹤 设计管理与成长

对于 B 端设计师来说，“懂技术” 并非意味着要掌握编程、亲自写代码，而是要从框架层面理解特定技术的原理、运行逻辑，以及落地实现的相关限制。这从来不是 UI 设计师的专属要求，而是整个设计行业的通用专业准则 —— 设计的核心本就是解决方案的策划，任何设计最终都要通过具体的实施环节落地。就像平面设计要适配印刷标准、工业设计需契合制造工艺、室内设计要衔接施工规范，脱离落地标准的设计，终究只会变成无法落地的 “飞机稿”。兰亭妙微深耕 UI 设计与开发领域，团队设计师始终保持持续学习、稳步成长的状态，在 B 端UI设计上积累了丰富实践，相关作品案例可在我们的官方网站查看。

image.png

 
作为专业的 UI 设计师，了解技术是输出有效设计方案的核心前提。若忽视技术限制，设计稿极易因无法实现被驳回，严重拖慢项目推进效率。除此之外，对技术的认知还能帮助设计师更深度地思考设计与项目的关联，精准预判方案实现难度，优化与前端的交付对接方式。设计师与前端工程师的沟通矛盾，很大一部分根源就在于设计师对技术的不了解，输出的方案要么无法实现，要么实现成本极高，如同产品经理要求设计 “五彩斑斓的黑” 一般，忽视了对方的专业限制。懂技术与不懂技术的设计师，在项目推进效率上差距显著，这也是懂技术的设计师更具职业竞争力、更受行业认可的关键原因。
 
而对于 B 端设计师，懂技术还有着更为特殊且重要的意义：B 端领域中，有大量产品是面向技术领域提供服务的。常规 B 端服务面向无技术背景的商业用户，如仓库管理员用 ERP 查库存、职员用 OA 提交工单；但面向技术领域的 B 端产品，主要服务于企业开发环节，需程序员操作以提效降本，比如云服务供应商的产品，只有具备专业技术知识的程序员才能熟练使用。
 
云服务只是其中一个方向，区块链、数据大屏等领域的 B 端产品也均是如此，即便操作使用者是程序员，其界面设计仍需专业设计师完成。只有具备一定技术知识积累的设计师，才能精准理解这类产品的需求，而非单纯跟着产品原型画图、对设计内容一无所知。尤其近年 AI 技术快速崛起，AI 相关 B 端服务数量大幅增长，这类产品依托技术搭建，需要用户完成特定配置才能实现服务，若设计师不了解 AI 及基础技术原理，根本无法开展有效设计。如今行业新增的 “B 端 AI 设计师”，并非指用 AI 生成设计，而是指专门设计 AI 类产品、且具备一定 AI 技术认知的设计师。可见，懂技术不仅是 B 端设计师完成日常工作的基本要求，更是拓展职业边界、抓住行业新机遇的重要助力。
 

image.png

一、B 端设计师该懂哪些技术？

 
明确懂技术的重要性后，设计师需要掌握的技术知识，并非零散的编程技巧，而是能搭建起技术认知框架的核心方向，具体可总结为五类：
 
  1. 前端界面的实现逻辑
  2. 后端的功能框架和服务
  3. 前后端联调的过程
  4. 产品的部署和运维
  5. AI 的生成和处理流程
 
接下来将对每个方向的核心概念、学习价值及入门方法做简单解析，帮助设计师快速建立基础认知。

image.png

 

二、各技术方向核心解析与学习建议

 

（一）前端界面的实现逻辑

 
这是与 UI 设计师关联最紧密、距离最近的技术内容，指前端实现界面样式、交互与动画的底层逻辑，这里的前端是广义概念，涵盖网页、iOS、Android、小程序、桌面端等所有系统的用户界面。
 
不同系统的开发语言虽有差异，但实现前端界面的核心逻辑大体一致，因此设计师只需吃透其中一种，便可触类旁通。对 B 端设计师而言，网页前端是最佳学习对象：一方面，B 端工作中接触最多的就是网页项目；另一方面，网页前端是所有前端类型中最简单、最易上手的。
image.png
 
网页前端的核心由 HTML、CSS、JS 三种语言构成：HTML 和 CSS 是搭建网页框架、定义样式的标记语言，JS 则用于实现逻辑运算与交互处理。对设计师来说，重点系统学习并动手实操HTML 和 CSS即可 —— 从程序员的视角，二者并非真正的编程语言，只是标记和样式语言，学习门槛极低，实操却能带来极大价值：既能深度理解界面的实现过程，搞清楚为何相同参数下，开发效果与设计稿会存在偏差；也能快速建立正确的前端认知，明白样式与逻辑是前端工作的两个独立部分，实现界面效果只是前端工作的一小部分。

image.png

image.png

（二）后端的功能框架和服务

 
这一方向要求设计师建立对服务器层面的认知，了解产品的运行机制，以及后端程序员的核心工作内容。这对设计师理解界面中复杂的字段、数据逻辑至关重要，部分复杂的 B 端交互设计，更是需要基于对后端服务和数据的理解才能完成。
 
设计师可从 B 端服务的框架图切入学习，B 端的 SaaS、PaaS、IaaS 类服务，均是对后端技术架构拆解后形成的产物。若遇到陌生专业名词，可借助 GPT 工具快速查询解析。同时需重点理解：后端代码的存储位置、运行方式，以及代码与数据库之间的关联逻辑，这是理解后端工作的核心基础。

image.png

（三）前后端联调的过程

 
前后端联调，即让前端程序与后端程序建立连接、实现数据传输的过程。前端与后端程序是运行在不同硬件上的独立程序，默认无任何关联，需要开发人员通过技术手段为其搭建沟通桥梁，这就像将主机与显示器、鼠标、键盘连接，才能形成一个可正常运作的整体。
 
联调的核心概念是API 接口，这是前后端程序连接的关键节点，如同主机后侧的各类插口 ——3.5mm 圆形插口、USB 插口、Type-C 插口，不同插口对应不同的 API，只有搭配适配的 “接头”，才能实现数据通信。
 
API 是项目中的核心技术点，产品经理、前后端工程师都会投入大量时间处理 API 文档、推进 API 联调，也是项目会议中的高频讨论内容，直接影响产品需求的落地。建议借助 GPT 工具对 API 进行深度解析扫盲，理解这一概念后，设计师便能听懂项目会议中大部分开发术语，避免陷入认知盲区。

image.png

 

（四）产品的部署和运维

 
前端、后端、联调知识，能支撑起一个基础的互联网产品，但随着技术发展，后端架构愈发复杂，云服务平台的产品与服务类型也随之丰富，想要理解这些复杂的后端服务，设计师必须具备一定的运维知识。
 
如今的后端岗位（不含算法）主要分为两类：后端程序开发与运维。后端开发的核心是实现产品的各项功能，而运维的核心是搭建网络运行环境，将开发好的代码部署到服务器中，确保产品能正常、稳定运转。若想理解二者的分工与价值，可参考相关的 DevOps 扫盲资料，建立基础认知。
 
理解运维知识，不仅能让设计师对互联网产品的运行机制有全新认知，更能精准理解云服务、区块链等技术类 B 端产品的服务本质，知道这类产品能解决哪些实际问题。若时间充裕，建议打开大型云服务平台，查看其产品列表，对陌生的产品与服务名词逐一查询扫盲，快速积累行业知识。

image.png

 

（五）AI 的生成和处理流程

 
AI 技术的应用愈发广泛，而几乎所有 AI 应用都离不开 B 端界面的支持，紧跟时代发展，理解 AI 的生成与处理流程，是 B 端设计师的必备能力，尤其是对主攻 AI 类 B 端产品的设计师而言，这一知识更是核心刚需。
 
理解 AI 技术应用，首先要区分 AI 大模型的种类与应用方向，从外行视角，可将大模型简单分为四类：
 
  1. 计算机视觉模型：对图像进行生成、检测、分类，文生图是最常见的应用；
  2. 自然语言处理模型：对文字进行分析并返回文字结果，ChatGPT 是典型代表；
  3. 语音处理模型：实现语音识别、合成、输出，如短视频的合成人声；
  4. 多模态模型：处理图文、音视频等多种混合数据，应用于图文检索、视频总结等场景。image.pngimage.png
 
AI 大模型是各类 AI 应用的内核，能帮助我们完成复杂的信息处理与数据返回，省去大量开发环节，设计师可借助这一机制，将 AI 融入设计与产品工作流。比如电商新品发布，可搭建 AI 工作流：输入产品摄影图、标题、基础介绍，让 AI 优化生成封面图、商品展示图，适配不同平台生成标题，甚至扩写产品介绍、给出介绍图的生成与排版建议。
 
这类 AI 工作流的处理逻辑，可通过 COZE 等平台学习尝试，查看官方说明文档便能快速上手，能直观感受到 AI 在 B 端产品中的实际应用方式。理解 AI 的技术逻辑，不仅能让设计师精准把握 AI 产品的设计要点，更能清晰认识 AI 的优势与能力边界，避免陷入 “AI 威胁论”，抓住 AI 时代的职业发展机遇。
 

三、结语

 
对 B 端设计师而言，“懂技术” 的核心是建立技术认知框架，而非掌握某一门编程语言。以上五大方向，是从零开始理解技术的核心切入点，虽然实际项目中的技术细节远不止于此，但只要吃透这些基础内容，便能形成完整的技术认知体系，后续遇到新的技术概念、产品类型，都能做到触类旁通。
 
掌握这些技术知识，不仅能让设计师输出更具落地性的设计方案，提升项目推进效率，更能精准理解各类 B 端产品的需求本质，拓展职业边界，在云服务、AI、区块链等新兴领域找到新的职业机遇，成为更具核心竞争力的专业设计师。

兰亭妙微（蓝蓝设计）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。

 

image.png

评论(0) 浏览(219)

商家后台 AI 功能体验升级：以统一认知赋能商家高效经营

鹤鹤 B端ui设计文章及欣赏

一、项目背景与核心目标

 
随着 AI 技术深度融入电商经营全流程，百度优选商家后台已实现 AI 能力在商品创建、经营管理、客服接待等核心场景的全面覆盖。但商家在使用过程中普遍面临 “不会用、不敢信” 的体验难题，经深度拆解经营痛点发现，交互模式不统一、视觉表达混乱是核心诱因，直接抬高了商家对 AI 工具的认知与使用成本。
 
为此，我们以 **“统一 AI 认知，提升商家经营效率”为核心目标，启动 AI 功能体验升级工作。团队立足行业主流的嵌入式、对话式、伴随式三大 AI 交互形态，结合 B 端商家后台的操作习惯展开审慎选型与创新设计：舍弃更适用于自然语言指令推进生产、以沉浸问答为主的对话式交互；同时针对客服、直播互动等需规模化、自动化运行的场景，创新提出“托管式”** 交互范式，适配低人工介入的服务需求。并同步搭建统一的 AI 视觉语言体系，最终打造出一套商家可统一理解、轻松调用、深度信任的智能体验解决方案，全方位助力商家降本提效。

image.png

 

二、三大交互范式的场景化落地应用

 

2.1 嵌入式交互：复杂表单的灵活填写助手

 
嵌入式交互的核心是让 AI 生成结果紧邻用户操作场景，实现轻量便捷的交互体验，核心适配复杂表单填写类场景，以商品创建环节为典型代表 —— 该环节字段繁多、手动填写耗时久，且易因填写不规范被审核驳回，严重拉长发品周期。针对这一问题，我们根据字段特征与 AI 能力类型，设计了两种差异化交互流程：
 
  1. 填充识别类：针对规则明确、AI 可通过识别提取关键信息输出稳定答案的字段（如商品属性），采用系统自动填入模式，搭配 “AI 预填” 标签提示状态。例如 AI 可从商家上传的商品包装图中识别 “风干”“盒装” 等信息，自动填入食品工艺、包装方式模块，同时提示商家检查确认，以自动化替代手动录入，最大化缩短填写时间。
  2. 推荐优化类：针对需依托 AI 优化素材、提升购买吸引力的内容（如商品主图、标题），因存在 AI 创作内容不符商家预期的可能，采用 “主动提供结果但不预先填入” 的模式，支持商家对 AI 结果进行调优，待符合预期后再手动录入。灵活的交互设计既满足不同商家的个性化需求，也有效降低人工审核时长。
 
该模式上线后成效显著，商家平均发品时长缩短 8 分钟，发品成功率提升 0.7%，模块满意度提升 25%，实现了既定流程内的效率突破。

image.png

 

2.2 伴随式交互：全场景的主动诊断助手

 
针对商家多线程经营时需频繁跳转各模块、需自主发现经营问题的痛点，我们打造了深度融入经营动线的伴随式交互方案，聚焦 **“主动触达、连续洞察”** 两大核心，让 AI 助手跳出常规对话机器人的被动响应模式，转变为结合工作流前后场景、提供落地行动指引的经营辅助工具。
 
  1. 主动触达：AI 助手入口设计 “流光呼吸感” 动效，搭配轮播词条实时推送与当前任务相关的关键信息（如 “今日店铺访问量增长 20%”），实现轻量视觉吸引；当商家停留于具体任务页面时，助手可基于页面内容与业务逻辑，主动识别潜在问题并推送轻量提醒（如 “商品主图尺寸可能影响点击率”），在商家未发起提问前即主动触发服务。image.png
  2. 连续洞察：AI 助手在输出建议或数据时，会附带清晰的思考过程与来源摘要，实现 “可解释的 AI”，打消商家疑虑；同时能基于当前对话主动预判后续需求，智能推荐下一步操作（如 “进一步分析体验分下降的原因”），将单点查询转化为系统性的经营问题排查与解决链路，大幅降低商家获取完整决策依据的综合成本。image.png
 
通过以上设计，AI 工具从单纯的被动响应工具，升级为能主动赋能的经营伙伴。
 

2.3 托管式交互：隐式服务的安心管家

 
相较于嵌入式、伴随式交互需商家实时参与、无法解放人力的特点，托管式交互通过 **“预先配置规则，系统自动执行”** 实现最高程度的自动化，核心适配客服接待等需规模化服务的场景。针对商家对 AI 自动化 “黑盒操作回复” 的不信任，以及人工无法实现 24 小时不间断接待、难以覆盖海量咨询需求的问题，我们设计了 “预先配置 + 人机接力” 的托管式交互方案，让 AI 成为可自主运行的安心服务管家。
 
  1. 可视化配置，构建信任基础：为消除商家对 AI “黑盒操作” 的疑虑，将抽象的 AI 能力转化为可预判的具体结果，我们提供直观的策略配置面板与 C 端页面预览图，商家可针对售前咨询（商品咨询、催促下单等）、售后维护（退款申请等）不同场景设置回复规则，并实时查看 AI 执行的示意效果。“配置即所见” 的设计让 AI 能力变得具体可感知，让商家从配置起点建立对自动化系统的可控感。

     

    image.png

  2. 明确状态标识，实现流畅人机接力：为保障人机协同的顺畅性，界面中对接待状态进行全方位清晰标识：全局接待状态置顶实时更新、会话列表按状态动态分组、单人接待状态（接待中 / 暂停接待）强化并自动同步。当 AI 无法解答复杂诉求、用户负面情绪等问题时，会话将自动流转至 “待人工回复” 分组，通过动态高亮 + 声音预警提醒人工快速接管；人工回复后，AI 将自动暂停并更新接待状态，同时生成会话摘要，帮助工作人员快速了解沟通前因后果，将决策焦点从 “梳理问题” 转向 “解决问题”。此外，客服可主动设置 “恢复托管”，AI 也会在识别新会话时自动恢复接待，形成闭环的人机协同机制。image.png
 
在买家视角，该设计也实现了服务主体的明确化：AI 接待时清晰标识消息主体，人工接管后实时告知买家，保障消费者的服务体验连贯可靠。该模式上线后，咨询响应时长缩短 15.8%，商家满意度提升 14%，买家满意度同步提升 7.4%，成功实现 7×24 小时规模化服务覆盖与服务质量的双重提升。
 

三、构建全链路智能化感知体系

 
在三大交互范式的基础上，我们搭建了一套贯穿产品全链路的智能视觉语言体系，沉淀为具有 AI 特色的感知系统，全方位优化 B 端设计体验、提升操作效率。
 
在视觉设计层面，我们继承百度 APP 的 AI 标识与色彩体系，延续用户对 “百度 AI” 专业、可信赖的固有认知，有效降低商家的理解与学习成本。针对 B 端界面信息密集，需兼顾操作效率与视觉清晰度的特点，在百度 APP 高饱和智能感知色彩体系的基础上，结合现有产品组件降低色彩饱和度，实现视觉降噪，打造出适配 B 端操作场景的浅色系列组件。
 
为弥补浅色体系下 AI 视觉感知弱化的问题，我们引入状态动效、声音提醒等多维反馈机制，通过感官协同让商家在复杂界面中，也能清晰、即时地感知 AI 运行状态（如 AI 智能接待中的扫光动画），保障信息传达的效率与可靠性。

image.png

image.png

四、设计核心与价值沉淀

 
本次百度优选商家后台 AI 体验升级，始终以 **“以商家提效为中心”** 为设计核心，通过 “场景筛选适配 + 交互形态创新”，落地嵌入式、伴随式、托管式三大交互范式，精准破解商品创建、多线程经营、客服接待等核心场景的使用痛点；同时构建 “视觉 + 多感” 的智能化感知体系，从根本上解决商家 “不会用、不敢信” 的体验困境。
 
从业务价值来看，本次升级实现了发品效率、经营问题解决率、服务满意度的全方位提升；从设计价值来看，项目沉淀的 **“场景 - 范式 - 视觉”** 设计方法论与标准化组件资产，为直播带货、智能投放等更多电商场景的 AI 赋能提供了可复用的落地模板。
 
未来，我们将持续围绕商家实际经营需求迭代优化产品，推动 AI 技术深度融入电商经营全链路，以设计驱动产品长效升级，助力商家实现降本提效，为百度优选商家生态的高质量发展注入持续动力。
本文为转载
 

兰亭妙微（蓝蓝设计）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。

 

image.png

评论(0) 浏览(280)

智能家居开关面板的界面设计赏析

蓝蓝设计的小编

智能家居开关面板的界面设计，核心是 “场景化交互、轻量化视觉、多感官反馈、生态化适配”.

头部品牌界面设计核心特点与代表案例

 

品牌

界面设计核心特点

代表系列 / 功能

界面设计亮点

华为鸿蒙智家

鸿蒙分布式 UI + 蒙德里安美学，卡片化场景优先

蒙德里安系列、智能中控屏

1. 引力动效 + 胶囊 / 卡片组件，视觉统一；2. 金缮 / 月辉系列界面与面板材质呼应；3. 背光随环境光自适应，低饱和配色

施耐德电气

极致简约 +“减感空间”，触控与实体双反馈

致铂系列

1. 4.3mm 超薄面板 + 窄边框，界面轻量化；2. 触控按键仅操作时高亮，平时隐形；3. 1.5° 微动摆角，操作 “有感无声”

绿米 Aqara

米家生态适配 + 场景化快捷入口

智能墙壁开关 H1 Pro

1. 层级≤2 层，场景卡片（如 “回家 / 离家”）一键触达；2. 图标直观（太阳 = 照明、月亮 = 睡眠）；3. 状态色标低饱和，避免视觉干扰

罗格朗

艺术与科技融合，界面适配家装风格

Arteor 系列

1. 异形面板 + 装饰化界面（如时钟 / 温度嵌入）；2. 哑光涂层 + 同色系配色，弱化设备感；3. 场景模式替代多按键，操作元素少

公牛

性价比 + 易用性，适配大众家装

G56 系列

1. 大字体 / 图标（≥8mm×8mm），适配老人 / 儿童；2. 黑白灰中性色，适配北欧 / 极简风；3. 触控 + 实体旋钮双兼容，

 

操作逻辑：1 步触达核心功能

    • 层级不超过 2 层，用 “场景卡片” 替代 “设备罗列”，比如 “观影模式” 一键关闭主灯、打开氛围灯 + 电视；
    • 图标用通用符号（如云朵 = 空调、雨滴 = 窗帘），避免抽象图形，降低学习成本。

  • 视觉呈现：轻量化 + 易读性
    • 字体 / 图标 “大且清晰”，建议≥8mm×8mm，适配不同年龄用户；
    • 色彩用 “低饱和底色 + 高对比文字”（如浅灰底 + 深灰字），既柔和又易读，避免高饱和工业色。

  • 交互适配：触控 + 实体双兼容
    • 触控界面：按钮区域足够大，避免误触；操作后视觉（图标变色）、触觉（震动）、听觉（轻提示音）三重反馈；
    • 实体旋钮 / 按键：界面参数与物理操作同步，比如旋钮转动时，温度 / 亮度实时变化。
  • 场景响应：动态适配环境
    • 亮度自适应：界面背光随环境光调节（白天变暗、夜晚调柔），避免光污染；
    • 状态可视化：设备异常时，用醒目但不刺眼的提示（如浅红底色 + 故障图标），不干扰日常视觉。

 

设计避坑与落地建议

  • 避免信息过载：只展示 “当前状态 + 关键操作”，比如温度、时间、设备快捷图标，其余功能隐藏在二级菜单；
  • 适配家居风格：极简风用无彩色系 + 窄边框，原木风用浅木色 + 哑光涂层，轻奢风用金属质感 + 低饱和配色；
  • 多感官反馈：操作后配合背光亮起、轻微震动、提示音，强化确认感，避免重复操作。

兰亭妙微（蓝蓝设计）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。

image.png

评论(0) 浏览(404)

2025 B 端界面设计趋势：15 年经验沉淀的 5 类高价值场景体验升级方向

蓝蓝设计的小编

B 端界面的本质是 “业务流程的数字化延伸”，15 年服务经验让我们明确：其设计趋势始终围绕 “降本增效、赋能业务” 展开 —— 通过预判用户需求、简化操作层级、显性化核心信息，让工具从 “负担” 变为 “助力”。
若您的企业正面临 B 端系统效率低、用户使用率差、业务适配性不足等问题，兰亭妙微可提供定制化界面升级方案，结合行业特性与业务需求，打造 “贴合场景、高效易用” 的 B 端产品体验。

评论(0) 浏览(378)

UI 界面设计中的 “呼吸感”：留白与间距的黄金法则

鹤鹤

UI 界面设计中的 “呼吸感”：留白与间距的黄金法则

在信息爆炸的数字时代，用户对界面的审美与体验需求日益严苛。“呼吸感” 作为衡量 UI 设计优劣的隐性标准，其核心在于通过留白与间距的科学运用，赋予界面生命力与节奏感。本文将从理论内核、实践法则到经典案例，系统拆解留白与间距如何塑造界面的 “呼吸节奏”。

一、呼吸感的底层逻辑：从视觉认知到情感共鸣

心理学研究表明，人类视觉系统具有 “选择性注意” 特性，当界面元素密度超过 70% 时，大脑处理信息的效率会下降 40%。留白并非 “无物”，而是通过正负空间的平衡，引导视线流动。如苹果 iOS 16 的控制中心，以 24pt 安全边距包裹圆角矩形控件，在 6.7 英寸屏幕上形成 “透气” 的视觉场域，这种设计暗合格式塔心理学中的 “闭合原则”，让用户潜意识中感知界面的秩序感。
 
间距则是呼吸感的 “节拍器”。Material Design 3 提出的 8dp 网格系统，将间距划分为 4/8/16/24/32dp 等层级，如同音乐中的四分音符与八分音符，通过固定 “韵律” 降低认知负荷。当按钮与输入框的间距从 12dp 增至 16dp 时，用户操作错误率可降低 18%，这印证了间距对交互流畅度的直接影响。

二、黄金法则：留白与间距的量化设计体系

  1. 层级留白策略
    • 宏观留白：界面边缘安全距离（iOS 建议 20pt，Android 为 16dp），避免内容 “贴边” 产生压迫感；
    • 中观留白：模块间距遵循 “亲密性原则”，相关元素间距≤16dp，无关元素≥24dp，如淘宝商品列表中，商品卡片间距 16dp，分类栏与列表间距 24dp；
    • 微观留白：控件内部留白，按钮文字与边框的间距宜为 16-24dp，输入框内边距不小于 12dp，确保触控区域与视觉反馈的一致性。
  2. 间距的动态适配
    • 响应式间距：在 320px 窄屏（手机）采用 16dp 基础间距，在 1024px 平板端增至 24dp，保持视觉比例恒定；
    • 功能导向间距：支付流程中关键按钮间距放大至 32dp，通过 “视觉权重” 引导用户聚焦核心操作；
    • 情感化间距：社交类 App 聊天界面，气泡间距随消息长度动态调整，短消息间距 8dp 营造紧凑感，长文本间距 16dp 提升可读性。

三、反常识设计：打破教条的呼吸感创新

并非所有场景都需遵循 “越大越好” 的留白逻辑。在工具类 App 中，如 VS Code 的代码编辑区，通过最小化行间距（1.2 倍字号）和零边距设计，满足开发者对信息密度的需求，此时 “克制的呼吸” 反而提升效率。这种 “功能性优先” 的留白策略，体现了设计的辩证思维。
 
间距的 “非对称美学” 同样值得关注。Spotify 播放界面中，专辑封面与控制按钮的间距采用 20dp，而按钮组内部间距为 16dp，通过细微差异形成视觉焦点，这种 “打破网格” 的设计让界面更具生命力。

四、案例解析：从优秀设计中提炼方法论

  1. Figma 界面：左侧工具栏与画布间距 24dp，面板内控件间距 8dp，形成 “松 - 紧 - 松” 的节奏，既保证操作区域紧凑，又避免视觉拥堵；
  2. Notion 笔记：正文行高 1.5 倍，段落间距 1.8 倍，通过 “呼吸式排版” 模拟纸质书写体验，长文档阅读疲劳感降低 35%；
  3. Airbnb 搜索页：搜索框与筛选标签间距 32dp，标签之间 12dp，利用间距层级构建 “搜索 - 筛选 - 结果” 的视觉路径，用户决策效率提升 22%。

结语：让界面 “会呼吸” 的终极要义

留白与间距的黄金法则，本质是 “以用户为中心” 的设计哲学具象化。它要求设计师既能精准运用 8dp 网格等量化工具，又能灵活应变不同场景的情感需求。当界面元素如同生命体般拥有自然的 “呼吸节奏” 时，用户获得的不仅是高效的交互体验，更是一种潜意识的审美愉悦 —— 这正是数字产品温度的来源。未来，随着 AR/VR 界面的发展，三维空间中的 “呼吸感” 设计，将为我们带来更广阔的探索维度。
 
接下来我将为文章生成 6 张配图，分别对应不同章节的核心内容。
 
配图 1：视觉认知对比图，左侧为拥挤无留白的 UI 界面（元素重叠、文字密集），右侧为留白合理的界面（元素间距清晰、边缘有安全距离），中间用大脑图标连接，标注 “信息处理效率提升 40%”。

image.png

 

配图 2：8dp 网格系统示意图，展示 4/8/16/24/32dp 间距的视觉层级，用不同颜色的矩形模块排列，标注 “Material Design 3 间距标准”，底部配手机界面应用示例。

image.png

 

配图 3：层级留白策略图，分宏观（界面边缘 20pt 安全边距）、中观（模块间距 24dp）、微观（按钮内边距 16dp）三级，用手机界面剖面图展示，不同层级留白区域用不同透明度的蓝色填充。

image.png

 

 

配图 4：响应式间距对比图，左侧为 320px 窄屏（16dp 基础间距），右侧为 1024px 平板屏（24dp 基础间距），展示相同界面在不同设备上的间距适配效果，用红色箭头标注间距变化。

image.png

 

 

配图 5：反常识设计案例，左侧为 VS Code 代码编辑区（最小行间距、零边距），右侧为 Spotify 播放界面（专辑封面与按钮间距 20dp，按钮组间距 16dp 的非对称设计），用对比箭头连接。

image.png

 

配图 6：案例解析综合图，包含 Figma 工具栏间距（24dp）、Notion 段落排版（行高 1.5 倍）、Airbnb 搜索页间距（搜索框与标签 32dp），三个局部界面拼图，用黄色线条标注关键间距数值。

image.png

 

评论(0) 浏览(718)

打破同质化：3 个技巧让你的 UI 界面自带记忆点

鹤鹤

在信息爆炸的数字时代，用户每天要面对成百上千个 APP 和网站，千篇一律的 UI 设计早已让用户审美疲劳。想要让产品在激烈竞争中脱颖而出，关键在于打破同质化，打造自带记忆点的界面。以下 3 个实用技巧，帮你摆脱设计套路，让 UI 既美观又有辨识度。
 

一、聚焦核心功能，打造差异化视觉符号

同质化的根源往往是 “全面堆砌”，而优秀的设计需要 “减法思维”。聚焦产品核心功能，提炼专属视觉符号，能让用户瞬间记住产品特质。例如音乐类 APP 可围绕 “声波”“音符” 设计专属图标，工具类产品可突出 “效率”“便捷” 的视觉语言。
 
设计时可从形状、色彩、纹理三个维度发力：形状上避免滥用圆形、矩形等基础图形，尝试组合变形或提取产品相关的具象元素抽象化；色彩上建立专属配色体系，主色不超过 2 种，辅助色呼应主色，避免跟风热门色；纹理上可加入轻微渐变、肌理效果，让视觉符号更有层次感。
 

image.png

 
（注：图中展示了将产品核心功能抽象为几何图形，通过色彩搭配和细节处理形成的专属视觉符号）
 
 

二、巧用微交互，让细节传递品牌温度

微交互是界面的 “隐形记忆点”，看似微小的动效的却能极大提升用户体验和辨识度。例如按钮点击时的反馈动效、页面切换的过渡动画、数据加载时的趣味图标，都能让界面 “活” 起来。
 
设计微交互时要遵循 “贴合场景 + 传递情绪” 原则：登录成功时的轻量庆祝动效、操作失误时的友好提示动画，都能让用户感受到产品的温度；同时保持动效风格统一，比如简约型产品适合流畅的线性动效，活泼型产品可采用夸张的弹性动效，让微交互成为品牌风格的延伸。
 

image.png

 
（注：图中展示了按钮点击、页面切换、数据加载三种常见场景的微交互设计效果）
 
 

三、融入场景化元素，构建沉浸式体验

场景化设计能让用户产生情感共鸣，进而加深对产品的记忆。根据产品使用场景和目标用户画像，融入相关元素，让界面与用户需求高度契合。例如旅游类 APP 可加入地图纹理、风景插画，母婴类产品可采用柔和的曲线和童趣元素。
 
场景化设计的关键是 “自然融入”，避免生硬堆砌：可将背景处理为半透明的场景图案，既不干扰核心内容，又能营造氛围；在功能模块设计中融入场景逻辑，比如健身 APP 的课程页面采用运动场地示意图布局，让用户直观理解功能用途。通过场景化元素，让用户在使用过程中形成 “产品 = 特定场景解决方案” 的认知。
 

image.png

 
（注：图中展示了旅游类 APP 的场景化设计，背景融入地图元素，功能模块贴合出行场景）
 
 
 
UI 设计的记忆点，本质上是用户对产品功能、情感和场景的综合感知。摆脱同质化不是盲目创新，而是在理解产品核心价值的基础上，通过视觉符号、微交互、场景化设计的有机结合，让界面既有辨识度又有实用性。掌握这三个技巧，让你的设计从 “千篇一律” 变为 “过目不忘”，在用户心中留下独特印记。
 
 

兰亭妙微（蓝蓝设计）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。

 

image.png

评论(0) 浏览(289)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档