首页

如何提升AI交互设计能力?这篇总结超全面!

清阳 行业趋势

一、全文速览图

image.png

二、前言

2025 是智能体的元年,2026 年将更加成熟和普及,应用程序的体验方式因为智能体而逐步发生改变。

马斯克和扎克伯格曾预言“在未来 5-6 年内,传统的手机和应用程序(App)的形态将因为 AI 发生根本性变革”,兰亭妙微ui设计公司与您一同学习。

三、设计师已经迎来了「AI 交互设计」窗口期

以前的体验设计经验,已经跟不上如今 AI 能力逐渐普及的应用端设计开发趋势。

如今,各产品研发团队基于 AI 能力用户体验设计需求将会大幅增加。

即将到来的 2026 年金三银四求职季,产品和开发设计岗的招聘必然会对求职者结合 AI 的能力提出更高要求。

率先掌握 AI 体验设计能力的设计师,在求职时更有竞争力,在职场团队 AI 设计这一块也更有知识话语权。

换个角度看,AI 体验设计对于交互设计师在一定程度上也是一次洗牌的机会。

image.png

四、从 UX 到 AI Experience,具体有哪些转变

1. AI 将重塑以往的交互方式

当 AI 能够理解自然语言并主动完成任务时,许多传统的 UI 组件:信息架构、导航设计、表单流程、数据筛选等交互方式将会逐渐被重构。

用户与应用交互的过程将会改变。比如:

用户发起交互,由原来的用户主动操作+操作的路径,变成了用户的一句意图表达+AI 直接推送入口。

再比如对于用户输入错误的处理方式,由原来的表单验证与提示,变成了与 AI 的自然语言澄清,然后多轮对话修正。

再比如帮助决策上,用户由原来的面对多选项,变成了 AI 根据情境理解目标,并直接推荐最优路径。

image.png

3. 基于 AI 的场景设计与思考

根据尼尔森诺曼设计机构(简称 NN/g)在 2024 年的 AX 设计研究,优秀的 AI 体验设计要有具备以下几个素质:

  1. 用户能够容易地使用提示词:这意味着需要设计引导用户有效输入的界面元素
  2. 划清 AI 主导 与 用户主导 的边界:当不应该让 AI 做决定时,在合适的时机让用户介入
  3. 多模态交互设计:语音、文本、控件输入的设计结合
  4. 渐进式建立信任 AI:顺滑地让用户从发现、尝试到依赖 AI 功能
  5. 品牌下的 AI 人格化:AI 人设、开场白风格、拟人化、专有音效设计

五、如何提升 AI 体验设计能力

1. AI 交互设计知识

① 来自大厂的 AX 设计原则与模式

来自 Google、Microsoft、Ant 公司的 AI 设计规范与原则。

理解设计原则背后的原因、场景,就像以往我们接触过刚在技术窗口爆发期的「新颖」交互,比如 PC 时代的鼠标输入、移动互联网的触屏输入、虚拟现实时代等...交互模态各有差异。

  1. https://design.google/library/people-ai-research
  2. https://pair.withgoogle.com/guidebook/
  3. https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
  4. https://ant-design-x.antgroup.com/docs/spec/introduce-cn

image.png

② 建立 AI 交互设计基本认知框架

AI 的软件分为:AI 能力应用软件、各行业场景应用软件的 AI 赋能。

AI 的交互形态:

  1. Chat 对话式(对话式交互为主)
  2. Assist 助手式(隐藏为主,需要协助时唤醒)
  3. Spread 散布式(隐藏为主,固定节点出现相关的 AI 功能)

AI 交互组件:Think 思考过程、ThoughtChain 思维链、Prompts 提示集、Conversations 管理对话、Suggestion 快捷指令......

image.png

Ant-design-x

③ 积累 AI 交互设计经验

  1. 体验优秀的 AI 功能,并搜集到案例夹。
  2. 建议按场景分类收集:内容创作类、数据分析类、任务自动化类、客户服务类、等等。
  3. 大致的框架可以像产品体验日记一样,记录设计细节,比如:产品名称与截图、核心交互流程描述、AI 介入的具体方式、优秀设计细节(如何处理加载、错误、歧义的)。

image.png

④ 尝试理解 AI 大模型底层的技术原理

这是偏技术的知识,对于非专业人群来说,比较难啃,但回报是最高的。

因为它是我们认识 AI 的原理性起点,一旦掌握,做许多 AI 项目都能受益,比如:快速判断 AI 能力边界、规划大模型训练等。

而对于设计师来说,也包括能有效指导 AI 领域的设计。

就像以往我们落地自己的设计方案,最好提前摸清前端框架、组件、数据交互,才不容易在开发环节被卡脖子,更顺利地实现设计方案。

了解方式:查阅关于 LLM 工作原理的科普类文章;相关大模型的官方网站查找文档。

2. Ai 交互设计思维

在现有设计项目中,多一层关于「AI 交互辅助」的思考

在做设计项目中,在传统交互设计思路上,有意识地思考「假设现在有 AI 智能体的帮助,这个功能可以是什么样的更好用法?」。

如果你想更好地验证 Ai 设计模式的成果,可以做一些进阶的学习研究:

首先像以往的项目一样,拆解用户操作;

然后针对每个环节思考“如果这里有 AI 能力,能否提效或者减负?

再将 传统方案 vs AI 加持方案的可视化,并进行对比,量化提升的效率

image.png

基于上图,我们把有 AI 协助退货整个过程,背后的动作和实现原理拆解分析:

  1. 用户与系统的交互是通过「多轮对话」,
  2. 然后 AI 在对话中「识别意图」,与用户确认需求,
  3. AI「搜集关键信息与用户资料」提交,
  4. AI 发起退货申请,并对接商家「退货系统」,
  5. AI 推荐「最优」的退货方式(上门取件),
  6. 只把最少的操作「确认」留给用户。

而以上这些动作,都需要设计师具备了理解前后台的交互链路(前端如何自然地与用户交流、后端对接哪些接口)、Ai 工具调用的能力、等等知识经验,才能顺利地完成 Ai 的交互设计方案,并落地。

3. 争取实战机会,让自己新学习的能力在落地中验证

战略性参与有 AI 的项目:

如果你的团队项目正好有 AI 智能体对业务场景赋能的规划,那么对你来说,参与进来将是一个转型的好机会。

其中,从 redesign 小的功能点中 加入 AI 的交互方案开始,比如:搜索功能智能化、表单自动填充、智能推荐卡片。这类功能点改造见效明显,往往投入产出比高,易于快速验证和迭代。

当然得在方案支撑足够有理的前提下。比如:准备传统交互 vs AI 加持的交互这两套方案对比,用预期收益、技术可行性和数据说话。

主动创造机会和环境:

定期向产品团队分享竞品的优秀 AX 设计案例,进行团队设计扫盲,同时也能提升队内影响力,后面参与项目设计更有话语权。

4. 大胆点,用 AI 颠覆玩法

进阶到挖掘大的场景中,能够利用 AI 重塑体验方式的机会。

比如:

传统的进度条,用户需要拖动查看逐个视频帧寻找他想看的目标片段。

而 AI 播放器中,可以把识别到的字幕,加入到进度条中作为锚点,让用户根据具体的字幕内容,就可以精准定位并直达该进度点,找片段的效率大大提升,直接使体验升维。

image.png

最后

预计 2-3 年之后,AI 交互设计将普及为交互设计师的基本能力。那些率先掌握的设计师,将在 AI 重塑产品形态的浪潮中,找到属于自己的新位置。

现在就是最好的开始时机。

你,做好准备了吗。

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

搜索框的消亡启示录

清阳 设计思维

当 AI 开始重构本地生活的交互逻辑,美团的搜索框正悄然沦为旧时代的遗迹。本文深入探讨了关键词搜索与自然语言理解之间的根本冲突,揭示了筛选器背后隐藏的产品妥协,并预判了 AI 对本地生活服务入口的三大冲击。从对话框替代,到 Agent 化威胁,再到最危险的场景蒸发 —— 这场范式迁移,将如何重塑美团的护城河?
 
AI 正在重构本地生活服务的交互入口。这并非一次简单的升级,而是一场彻底的范式迁移。兰亭妙微 ui 设计公司认为,交互入口的代际变革,本质是用户心智与产品逻辑的双重重构,决定着平台未来的核心竞争力。

一、一个被所有人忽视的产品细节

image.png

周五下午六点,你打开美团,想找一家“适合带父母吃饭、安静一点、最好有停车场、粤菜或者闽菜都行”的餐厅。

你停顿了三秒。

因为你不知道该在搜索框里输入什么。“粤菜”太宽泛,“安静粤菜”不确定能否搜到,“带父母”这个条件根本没有对应的关键词。最后你妥协了,输入“粤菜”,然后手动拨动筛选器:距离3公里以内、评分4.5以上、人均150—300元。翻了两页结果,看到第十几家店的时候,已经记不清最初想要什么感觉了。

这个场景,每天发生在数以千万计的美团用户身上。没有人觉得有什么问题——毕竟大家都习惯了。

但如果认真思考,你会发现这里隐藏着一个根本性的产品矛盾:用户的真实需求是模糊的、情绪化的、充满上下文的,而搜索框的底层逻辑却是关键词匹配——它要求用户把一个复杂的人类意图,压缩成几个离散的词语。

这个压缩的过程,本身就是信息损耗。而筛选器、排序、推荐算法,不过是在这个损耗之后所做的各种补救。

今天我想深入分析的,不是美团要不要做AI,而是AI的到来如何从结构上重新定义了美团的用户交互逻辑,以及这对整个本地生活服务赛道意味着什么。

二、搜索框背后的产品逻辑:十年的“意图压缩术”

2.1 搜索框的本质不是“搜索”,而是意图的强迫翻译

image.png

从信息架构的角度看,搜索框是一个“意图翻译器”。它的工作原理是:把用户头脑中模糊的需求,强制转化为系统可以处理的结构化信号。

问题在于,这个翻译过程存在天然的信息损耗。人类表达需求的方式是自然语言,是带有情绪和上下文的整句话;但关键词搜索要求的是最小化、去语境化的词组。当你把“想找一家适合带父母的安静粤菜馆”压缩为“粤菜 安静”,你已经丢失了“带父母”所暗含的价值感需求——面子、正式感、停车便利、服务周到。这些维度,任何筛选器都覆盖不到。

更重要的是:大多数用户在打开搜索框的那一刻,自己的需求也是未完全成形的。他们需要的不是“输入词语获得列表”,而是一个能帮他们把模糊想法变成具体选择的交互过程。搜索框不是这个过程的起点,它只是一个粗暴的入口。

2.2 筛选器是“打补丁”的产物,不是真正的解法

美团过去十年,在搜索框旁边积累了越来越多的筛选维度:价格区间、评分区间、距离、营业时间、配送方式、菜系、口味偏好……每一个新增的筛选项,背后都是对搜索能力不足的一次承认。

筛选器越复杂,说明搜索越弱。这是一个重要的产品逻辑。

因为在理想情况下,如果搜索本身能理解“适合带父母”,你根本不需要“人均150—300元”这个筛选器——系统应该自己推断出价位范围。如果搜索能理解“安静”,你也不需要“评分4.5以上”来作为代理指标。筛选器的本质,是用多个结构化维度去近似替代搜索本身无法理解的语义内容。

这种设计在关键词搜索时代是合理的,因为你只能如此。但它同时也造成了一个认知负担:用户要在使用产品的同时,自己完成“需求拆解→关键词提炼→筛选器配置”这三步工作。这是用户替产品做了本该由产品完成的事情。

2.3 推荐算法为什么救不了搜索

过去几年,美团在推荐算法上投入了大量资源。首页的“猜你喜欢”“今日必吃”“附近热门”,本质上是在用主动推荐来弥补搜索的局限性。

但推荐和搜索满足的是用户决策链上的不同节点:推荐解决的是“我不知道要什么”的探索需求,搜索解决的是“我已经有方向,需要找到它”的意图需求。

当用户有明确意图的时候,推荐流是一种干扰,而不是帮助。周五六点打开美团想带父母吃饭的那个人,他不需要“今日必吃网红烤串”,他需要的是一个能理解他需求的系统。推荐算法再精准,也无法解决搜索的根本缺陷。

三、AI来了,搜索框面临的三种结构性冲击

冲击一:被对话框渐进替代

image.png

大型语言模型的核心能力之一,是零成本的自然语言理解。它可以直接处理“帮我找一家适合带父母吃饭、安静、有停车场的粤菜馆”,而不需要用户做任何翻译工作。

这不是概念,而是已经在发生的事情。当前各大互联网平台陆续接入大模型的搜索能力,其背后的产品逻辑完全一致:把关键词搜索框替换为自然语言对话框,让系统来承担“需求理解”的工作,而不是把这个负担甩给用户。

对美团而言,这意味着搜索框的替代将是一个渐进式、不可逆的过程。用户一旦体验过“说人话就能找到想要的餐厅”,他们不会再愿意回到拼关键词加拨筛选器的旧交互模式。

冲击二:被Agent整体跳过

比对话框替代更激进的是Agent路径。

在Agent模式下,用户不再经历“搜索→筛选→选择→预订”这个线性流程,而是:表达意图→Agent自主完成理解、比价、预订、提醒的全部环节→用户只需最终确认。

这意味着搜索框不只是被替换,而是作为一个独立环节被整体消解。用户无需进入美团App,只需在微信、支付宝、或者操作系统级别的AI助手中完成整个交互——美团的服务能力被调用,但美团作为流量入口的位置被彻底边缘化。

微信的AI搜索、支付宝的AI助手、华为的小艺、苹果的Siri进化版,都在朝着这个方向推进。Agent化不是遥远的未来,它是当下已经在布局的竞争格局。

冲击三:用户行为迁移导致的场景蒸发(最被低估的威胁)

前两种冲击是关于“搜索框被什么替代”,而第三种冲击更为隐蔽,也更具毁灭性:用户的使用场景可能在不进入美团的情况下被满足。

想象一个使用场景:用户在和朋友的微信群聊里讨论周五吃什么,这时群里的AI助手直接分析对话内容,给出三家符合所有人口味和位置的推荐,并且完成了预订——全程在微信内完成,美团的数据库被调用,但美团App从未被打开。

这不是技术上的想象,而是一个流量入口迁移的商业问题。美团失去的不只是搜索框,而是“用户主动打开App”这个行为本身。一旦用户的高频决策习惯在其他平台形成,美团的日活数据将面临结构性下滑。

这才是AI冲击中最危险的死法,因为它是无声的、渐进的,等到平台意识到的时候,可能已经失去了整整一代用户习惯。

四、美团真正的护城河在哪里

image.png

在讨论AI对美团的冲击时,有一个根本性的问题需要厘清:美团的价值究竟是什么?

如果美团的价值是“连接用户和商户的信息中介”,那它确实岌岌可危,因为AI可以比搜索框更高效地完成这个连接。但如果美团的价值是“把服务实际送达到用户手中的履约网络”,那AI对它构成的威胁就要小得多。

4.1 履约能力:AI造不出来的壁垒

美团今天拥有超过700万的骑手网络、覆盖数百个城市的即时配送基础设施、与数百万商户的深度绑定关系,以及每天处理数千万笔订单所形成的实时运力调度系统。

这些东西,AI无法凭空生成。大模型再强大,也无法替代一个在三十分钟内把热餐送到你手边的骑手网络。AI是信息层的技术,而美团的核心竞争力是物理层的基础设施。

这个判断有一个重要推论:美团的搜索框可以被替代,但美团的履约能力不会被替代——至少在可见的未来不会。这意味着即便美团完全失去了前端的流量入口,它也可以以“能力提供者”的角色,为其他平台的AI助手提供后端服务。

4.2 数据资产:有价值,但需正确使用

美团积累了超过十年的用户消费行为数据:什么人在什么时间什么地点吃什么,偏好什么价位、什么菜系、什么口味,有什么饮食禁忌,外卖和堂食的偏好有什么差异……这些数据是训练本地生活垂直AI模型的核心资产。

但这里有一个容易被忽视的战略陷阱:数据只有转化为理解用户意图的能力,才能成为真正的护城河。如果美团把这些数据只是用来优化推荐算法,提升现有搜索框的点击率,那它就是在用新工具巩固旧模式,而不是在构建下一个时代的竞争优势。

真正的机会是:用历史数据训练一个“深度理解本地生活消费意图”的垂直模型,让AI能够理解“带父母吃饭”背后的全部语义,能够根据用户画像推断“你说的安静,是哪种程度的安静”。

4.3 最危险的战略误判:把AI做成更聪明的搜索框

基于以上分析,美团在AI转型中最危险的做法,是把大模型接入现有的搜索产品,让对话框替换关键词框,在视觉上完成一次“AI升级”,然后宣称完成了AI化转型。

这是一种“AI美颜”——换了皮肤,底层逻辑没变。用户体验确实会有改善,但改善的是现有流程的效率,而不是对未来交互范式的卡位。

真正的产品战略应该是:放弃“流量入口”的思维定式,转向“意图响应网络”的定位。美团需要成为一个能在任何界面、任何上下文中理解用户本地生活消费意图并完成履约的系统,而不只是一个把用户吸引进App的流量平台。

五、对产品经理的三个结构性启示

image.png

美团的案例不只是一个大厂的战略故事,它对所有产品人都有直接的方法论价值。

启示一:重新识别你产品的“意图入口”

在你当前负责的产品里,用户在哪个环节表达了他最真实的需求?那个入口,通常就是AI冲击最先发生的地方。

如果你的产品依赖搜索框、关键词匹配、或者多级筛选器来理解用户需求,那么你需要认真思考:当大模型能够直接理解用户的自然语言时,你的产品流程里哪些步骤是多余的?哪些环节是在让用户替产品做本该产品做的事情?

启示二:区分“AI能替代的”和“AI替代不了的”

美团的履约网络是AI替代不了的。你的产品里,也存在这样的部分。

识别的方法:把你产品的核心价值链拆解到最细的颗粒度,逐项问自己:如果有一个无限能干的AI助手,它能把这个环节做掉吗?能做掉的是信息层,做不掉的通常是物理层、关系层、或者依赖特定资质的专业层。那些做不掉的部分,就是你在AI时代真正应该加固的护城河。

启示三:警惕“功能叠加”掩盖“结构性缺陷”的产品陷阱

美团的筛选器越来越多,是搜索本身无力的一种掩盖。在你自己的产品里,也要警惕类似的模式:当你在给现有功能打补丁的时候,要问自己,这是在解决问题,还是在拖延面对一个结构性缺陷的时间?

AI时代给了产品经理一个重新思考底层设计的机会。与其在旧的交互框架里做局部优化,不如退出来问那个更难的问题:如果今天从零开始设计这个产品,知道AI存在,我会怎么设计?

六、搜索框消失的那天

image.png

回到最开始的场景。

有一天,你打开美团,首页没有搜索框,没有筛选器,只有一行文字:“今晚有什么打算?”

你输入:“带父母吃顿正式点的,粤菜或者闽菜都行,不要太吵,最好有停车”。

系统回答:“为你找到3家符合条件的餐厅。其中顺德菜馆距你2.1公里,今晚有包间空位,停车场可停50辆,评价中高频出现‘安静’‘服务好’,人均约220元。是否帮你预留?”

你点了确认。整个过程,四十秒。

这不是遥远的科幻,它是可以预期的近未来。搜索框不会因为某一天某个版本更新而消失,它会以用户几乎察觉不到的方式,被慢慢替代——就像人们不再“搜索天气”,而是直接问语音助手一样。

美团的搜索框消失的那天,不是美团的终结,而是本地生活服务进入“意图经济”时代的标志。在那个时代里,谁拥有对用户消费意图最深的理解能力,谁拥有把服务真正送达的基础设施,谁就拥有竞争优势。搜索框只是一个UI控件,重要的从来不是它本身,而是它背后那个“理解用户意图”的能力。

而这个能力,才刚刚开始被认真对待。

转载:人人都是产品经理

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

外卖平台搜索功能设计核心总结

清阳 设计思维

兰亭妙微UI设计公司,以美团、饿了么、大众点评为案例,分析外卖平台搜索功能的价值、类型与设计方法,提炼出打造优质搜索体验的核心要点。

一、搜索的核心意义

image.png

  1. 高效找餐:帮有明确需求的用户快速检索,节省时间、提升点餐效率。
  2. 引导消费:用热词、推荐等引导无目标用户,创造消费、促进下单。
 

二、主流平台搜索类型特点

image.png

  1. 入口:统一用搜索框,保证高曝光。
  2. 模式:美团 / 饿了么 = 全量模糊搜索;大众点评 = 城市定向搜索。
  3. 功能:饿了么 / 大众点评带扫一扫,支持二维码快速找品。
  4. 引导:美团 / 饿了么用大色块按钮;美团加搜索标签刺激转化。
 

三、四大设计原则

  1. 场景预热:搜索前用轮播热词、运营活动、IP 动态对话引导。image.png
  2. 贴心引导:提供历史搜索、搜索发现、热榜,缩小范围、展示权益。

    image.png

  3. 预期管理:实时联想关键词,展示商家 / 商品 / 优惠,减少无效操作。

    image.png

  4. 细致分类:结果分层归类,搭配榜单与笔记,方便筛选避坑。

    image.png

 

四、总结

外卖搜索要围绕效率、引导、体验打磨细节,借鉴优秀竞品设计,打造流畅流程,提升用户留存。
 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

细节见真章!12个按钮设计容易踩到的坑

清阳 交互设计及用户体验

细节定成败:12个常见的按钮设计误区

按钮设计的直觉性,源于物理按钮给我们留下的行为习惯。回顾历史,物理按钮正是现代UI组件的鼻祖。它们至今仍被大量使用,其魅力在于:即便用户不懂内部原理,只需轻轻一按,就能让设备运转起来。正如《Power Button》一书作者Rachel Plotnick所言,按钮文化塑造了我们今天下达数字指令的方式。

“你只需按下按钮,剩下的交给我们。”——柯达公司的这句经典广告语,精准捕捉了按钮对用户的吸引力:用最简单的触碰,换来即时的满足感。

即便触摸屏日益普及,物理按钮也并未消失。它所塑造的交互习惯,深刻影响着数字界面按钮的设计,成为衡量直观性与易用性的永恒参照。

一、分清按钮与链接

按钮向用户传达“可操作”的信号,广泛出现在对话框、表单、工具栏等场景中。

image.png

  • 链接:用于导航到另一个地方,如“查看全部”、“阅读更多”。

  • 按钮:用于执行具体动作,如“提交”、“合并”、“创建”、“上传”。

二、定义完整的按钮状态

image.png

每个按钮都应具备清晰、无干扰的视觉反馈。其交互状态需明确定义,以区别于周围布局:

  1. 正常:可交互的默认状态。

  2. 焦点:通过键盘(如Tab键)进入可编辑状态时的提示。

  3. 悬停:鼠标指针置于元素上方时(主要适用于桌面端)。

  4. 按下:表示用户正在点击该按钮。

  5. 加载中:操作未立即完成,向用户反馈任务正在进行。

  6. 禁用:当前不可交互,但未来可能启用。

三、选择合适的按钮样式

圆角矩形按钮因其高识别度最为常见。样式的选择取决于用途、平台及设计规范。主流样式大致分为:

image.png

  • 填充按钮(实心):视觉权重最高。

  • 描边按钮(线框):视觉权重次之。

  • 文本按钮:视觉权重最弱。

利用样式差异构建清晰的动作层级,在多个选项中引导用户。通常,最重要的操作使用“首要”按钮样式,其他操作则按重要程度递减。

四、避免让用户思考

image.png

可用性专家Steve Krug曾说:“别让我思考。”用户早已被各类电子产品“教育”,对按钮的外观和功能形成了固定认知。任何与“标准”的较大偏差,都可能造成困惑。

五、区分可点与不可点元素

切勿对交互式元素(如按钮、链接)和非交互式元素(如纯文本标签)使用相同的颜色,否则用户会因不确定哪里可以点击而感到迷茫。

六、保持一致性

image.png

“一致性是最强大的可用性原则之一。当事物总是以相同方式表现时,用户就无需担心意外发生。”——雅各布·尼尔森(Jakob Nielsen)

一致性提升了操作的效率和准确性,减少了误操作。它创造了可预测性,帮助用户掌控流程。在定义主要、次要等按钮样式时,请确保颜色、形状等元素的一致,不仅在项目内部,也应尽量遵循平台的整体规范。

七、保证足够的点击区域

image.png

按下一个按钮应是轻松简单的操作。如果用户容易误触相邻元素,会带来糟糕的负面体验。

  • 推荐尺寸:对于多数平台,触摸目标建议至少为 48x48dp。无论屏幕大小,其物理尺寸应约为9mm。触摸屏元件的目标尺寸至少应在7-10mm之间。

  • 图标按钮:务必确保其可点击的热区大于图标的可视范围。这一原则不仅适用于移动设备和平板,也同样适用于鼠标操作的网页端。

八、践行无障碍设计

image.png

所有组件都应遵循无障碍设计原则。除了目标区域大小,字体尺寸、色彩对比度也至关重要。有许多工具可以帮助检测组件的可访问性表现。

九、谨慎使用手势

image.png

手势(如滑动、双击、长按)能提供触觉反馈并节省时间。然而,对于普通用户而言,许多手势并不直观。建议将复杂手势作为快捷操作留给高级用户,同时为普通用户保留明确的按钮操作入口。

十、使用清晰的按钮标签

image.png

按钮传达的文字信息与其外观同等重要。模糊的标签会让用户感到困惑甚至误导。

  • 使用动词:好的标签能引导行动,就像按钮在主动询问用户:“要把这件商品加入购物车吗?” 或 “要确认订单吗?”

  • 避免模糊词汇:应避免使用“是/否”或过于通用的“提交”等标签。

十一、合理排列按钮顺序

image.png

“确定”与“取消”谁在前?两种方式各有道理:

  • 确定在前(如Windows):符合自然的从左到右阅读顺序。

  • 确定在后(如macOS):促使用户在行动前先评估所有选项,有助于减少错误。

两种顺序都没有绝对的对错,也不会造成严重的可用性问题。选择哪种,取决于平台规范与具体场景。

十二、少用“禁用”状态

image.png

你是否曾面对一个灰色按钮,停留数秒甚至数分钟,却不知如何是好?滥用“禁用”状态极易引发用户的挫败感。

建议:尽量避免使用禁用按钮。更好的做法是始终启用按钮。如果用户遗漏了必填信息,只需在相应空白字段下方给出明确提示,或高亮显示错误项即可。

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

B 端交互设计 13 个优化策略

清阳 B端ui设计文章及欣赏

核心总览

B端交互体验优化,牢牢把握三大方向、十三个策略,覆盖结构、效率与引导全链路。同样适用于C端及工具类产品。兰亭妙微UI设计公司今日与您一同学习。
 

一、结构优化(4 个策略)

 
目标:让复杂功能易理解、易查找、易操作
 
  1. 分块分组

    image.png

     
    页面信息杂乱时,按业务逻辑拆分区块。例:发布商品→基本信息、规格库存、商品详情。
  2. 导航优化
     

    image.png

    用面包屑、标签页、快捷入口、回到顶部等组件,提升页面跳转与定位效率。
  3. 步骤分解
     

    image.png

    复杂流程拆分为多步,降低单次操作难度,避免用户一次性处理过多信息。
  4. 内置交互
     

    image.png

    低频操作用展开 / 收起、弹窗隐藏,保持界面简洁,突出核心功能。
 

 

二、效率提升(4 个策略)

 
目标:减少操作步骤、降低点击成本
 
5. 默认填值
 

image.png

按场景与用户习惯预填数据。例:发布时间默认次日 9 点。
 
6. 按钮输入
 

image.png

高频常用值做成按钮组,一键选择。例:下架时间→一周后 / 一月后 / 三月后。
 
7. 频次顺序

image.png

 
功能按使用频率从高到低排序,低频 / 非必填项后置。
 
8. 快捷按键
 

image.png

配置复制、粘贴、保存等快捷键,适配高效办公场景。
 

 

三、提示帮助(5 个策略)

 
目标:降低学习成本、减少操作失误
 
9. 文案说明
 

image.png

复杂功能下方加简短提示,清晰告知用途与规则。
 
10. 样式引导
 

image.png

用颜色、大小、徽标、红点强化重点,弱化次要信息。
 
11. 即时反馈
 

image.png

输入错误、表单提交、操作成功 / 失败时,实时给出明确反馈。
 
12. 内容预览
 

image.png

提交前展示最终效果,方便用户核对修改。例:商品上架预览。
 
13. 新手帮助
 

image.png

用新手引导、示例、帮助手册,让新用户快速上手。
 

优化后总结(一句话记忆)

结构理清楚,效率提上去,引导做到位,用 13 个策略搞定 B 端交互体验。
 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

超多案例!3个设计策略让你的AI产品更加人性化!

清阳 交互设计及用户体验

在 AI 时代做产品设计时,“人性化” 体验依旧是不变的主旨,核心目标是让设计回归用户本身,在合理应用新技术的同时,尊重用户的认知习惯、情感需求与行为差异,让 AI 产品既好用、又 “懂用户”。兰亭妙微UI设计公司会介绍以下三个设计策略和典型案例:

  1. 个性化定制
  2. 多产品互通
  3. 低操作门槛

希望会为你带来更多的设计灵感。

一、个性化定制

基于用户的个体特征、行为数据、场景语境与目标偏好,提供“千人千面”的专属设计方案。核心在于将体验从“通用适配”转向“精准贴合”,从而提升用户的认同感、满意度与留存率。

案例1:ChatGPT推出年度回顾功能,将用户一整年的AI对话转化为可视化数据、AI人格画像与定制诗歌。

image.png

案例2:Gemini新增“使用历史对话作为上下文”功能,实现更连续、更具记忆感的多轮对话体验。

image.png

案例3:ChatGPT推出多维度人格参数调节滑块,通过档位化控制实现交互风格的精准适配,标志着AI对话系统从统一输出转向用户主导的个性化体验设计。

image.png

案例4:Google发布Android 16,利用AI重构通知系统,自动将广告、新闻推送等不重要通知静音并生成摘要,帮助用户保持专注。同时强化图标、主题与深色模式的个性化表达,用户可以自由调整图标形状,让桌面更贴合个人风格。超多案例!3个设计策略让你的AI产品更加人性化!

二、多产品互通

AI智能体能够调动其他产品进行互动,协调多个不同产品或设备,实现它们之间的交互与协同工作,从而为用户提供更便捷、高效、智能的服务体验。

案例1:Gemini Agent上线租车功能,支持自动比价、读取邮箱及租车服务预订,AI正逐步进入端到端的生活服务领域。

 

image.png

案例2:OpenAI与Instacart合作,将“买菜”功能接入ChatGPT。用户可在聊天中一边讨论菜谱,一边生成购物清单,并直接完成结账,全程无需跳转应用。

image.png

案例3:Cursor为Cursor Browser推出全新可视化编辑器,将网页、代码与视觉编辑工具整合在同一窗口,支持拖拽调整界面、直接查看组件属性与样式,并通过自然语言指令快速修改,自动同步至底层代码。

image.png

案例4:谷歌将虚拟试穿门槛降至只需一张自拍,借助Gemini Nano Banana生成全身模型,将AI从可选趣味功能升级为低门槛、便捷实用的购物入口,进一步将搜索与电商融合为一体化、内容驱动的消费场景。

image.png

案例5:谷歌推出Workspace Studio,将AI自动化直接嵌入Gmail、日历与文档,开始重构企业日常工作的操作层。

image.png

三、低操作门槛

通过简化决策、减少手动操作、贴合用户认知习惯等方式,让不同能力层级的用户都能轻松享受AI服务带来的价值。

案例1:Gemini Veo3.1正在小范围测试“视频模板库”,用户可在工具菜单中选择或自定义模板快速生成视频,让“人人皆可做电影”成为可能。

image.png

案例2:灵光App上线可视化“科普动画生成”功能,将抽象科学原理自动转化为动态演示,让教育与科普内容从纯文字升级为“秒懂级”的可视化表达,巩固了其在学习场景中的差异化优势。

image.png

案例3:知名组件库shadcn推出shadcn create,提供可视化方式自定义基础组件的结构、间距、字体与风格,并支持一键在Next、Vite、TanStack Start中启动生成主题,大幅降低构建专属设计系统的门槛。

image.png

案例4:Manus推出Design View,从“反复对话生成”逐步迈向“所见即改”的创作流程。

image.png

案例5:Google在Android版Google News中加入AI播客功能,将新闻自动转化为可收听内容,拓展了通勤、碎片时间等场景下的新闻消费方式。

image.png

案例6:Grok iOS版新增多种语音唤醒模式(默认、隔离、按住说话),在不同环境下提升了语音交互的可控性,打磨出“随时可用但不打扰”的语音入口,为AI助手向高频、低负担使用场景渗透铺平道路。

image.png

案例7:亚马逊旗下AI智能家居助手Alexa Plus上线网页端入口,将原本以语音和音箱为核心的家居控制能力延伸到桌面与工作流中,使其成为更常用的日常AI助理。

image.png


技术的边界在不断拓宽,但设计的温度始终取决于我们对“人”的底层关怀。在AI浪潮中,工具形态会随算法不断进化,而用户对尊重、高效与情感连接的需求从未改变。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

10个产品细节剖析,看看高手如何做温度的设计!

清阳 设计思维

随着互联网产品的不断发展,在生活和工作的方方面面都有非常多的产品普及,用户的选择性更多了。想要打动用户,就要拿出更优质的服务和差异化的产品,当产品和服务拉不开差距的时候,产品设计的体验感变得至关重要了。

为了提升用户体验度,做出有温度的设计才能打动用户,兰亭妙微UI设计公司相信这些案例可以带给你一些启发。

1. 插画氛围:用场景感激活用户参与欲

image.png

产品的社区、活动等模块,核心目标是提升用户参与度。温暖具象的插画场景,能快速唤起情感共鸣。
 
  • 钉钉成长社区用全家福温馨插画,精准击中家长记录孩子成长的心理,有效提升动态发布活跃度。
  • 用视觉氛围降低参与门槛,让用户愿意主动互动、分享。
 

2. 热点主题化:借势营造沉浸式氛围

image.png

蹭热点不只是营销手段,更是视觉与体验的氛围升级
 
  • 麦当劳 App 频繁推出品牌联名主题,将界面背景、插画、图标全面贴合联名风格,整体统一且辨识度极强。
  • 从视觉到交互完整落地热点氛围,让用户感受到新鲜感与品牌趣味。
 

3. 情感化动态:让打卡更有仪式感

image.png

线下到店打卡的核心是参与感与真实感,动态设计能强化这两点。
 
  • 大众点评打卡采用 IP 角色 + 定位符号动画,清晰传递 “真实到店” 的含义。
  • 流畅动效提升操作愉悦度,让简单打卡变成有情绪反馈的小仪式。
 

4. 应景天气设计:把自然氛围搬进产品

image.png

天气类产品的竞争力,在于场景化与氛围感
 
  • 苹果天气 App 在中秋夜晚同步展示圆月效果,与现实节气高度呼应。
  • 随季节、节日、天气变化的视觉皮肤,让产品更贴近生活、更有人情味。
 

5. 品牌化刷新:让基础操作贴合产品特质

image.png

下拉刷新是高频操作,贴合产品属性的趣味动效,能大幅提升记忆点。
 
  • 当当 App 将刷新设计为 “开书→翻页” 动画,完美契合图书平台定位。
  • 把通用操作变成品牌小彩蛋,枯燥动作也变得有趣。
 

6. 长按快捷删除:提升效率更人性化

image.png

消息通知易造成红点困扰,简化删除流程是体验刚需。
 
  • 淘宝通知列表支持长按一键弹出删除选项,可单条 / 全部清除。
  • 减少滑动、点按步骤,高效解决用户痛点,更贴合使用习惯。
 

7. 多元头像预设:降低设置门槛,强化 IP

image.png

很多用户不愿自定义头像,优质预设能解决这一问题。
 
  • 贝壳找房提供微信头像导入 + 专属 IP 头像选择,选择丰富、一键应用。
  • 既提升用户头像完成率,又持续曝光品牌 IP,情感化与品牌化双赢。
 

8. 点亮城市足迹:用成就感驱动用户

image.png

旅行、出行类产品的核心情感是探索欲与成就感
 
  • 高德地图首次抵达新城市会自动弹出欢迎提示,并点亮城市足迹。
  • 用轻量玩法带来即时成就感,激发用户探索更多地点。
 

9. 昼夜视觉切换:让界面随时间更治愈

image.png

动态变化的界面,能带来持续新鲜感与细腻感知
 
  • 美团 “看病买药” 个人中心,昼夜切换顶部背景与小药箱 IP 动作。
  • 柔和的视觉变化,让界面更有生命力,提升整体使用舒适度。
 

10. 多感官趣味:视觉 + 触觉打造沉浸互动

 
随着交互技术成熟,多维感官体验成为新趋势。
 
  • 马蜂窝 AI 帮手 “十一实况” 结合重力感应,旋转手机即可触发场景变化。
  • 从视觉延伸到触觉,让互动更真实、更有探索乐趣。

     

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

B端产品体验调研中,设计验证怎么做?

清阳 设计思维

人们认为设计师是表面工作——设计师拿着盒子说‘它看起来好!’这不是我认为好的设计。设计可不只是看起来或者摸起来的样子,设计考虑的是用它的感觉。 ——Steve Jobs 2003年11月30日《纽约时报》

在日常的 B 端产品调研支持过程中,我们研究员经常会遇到这样的场景:

“你们帮我看看,产品方案满不满足用户需求?功能符不符合用户预期?”

“(研发问)功能上线的 ROI 是多少?用户对这类功能是否有需求?解决了用户什么问题?”

“你们多找一些用户验证一下 demo 方案行不行…”

无论是产品同学,还是设计同学,相信大家或多或少都会在需求文档、设计文档评审时被业务方、研发问到方案可行性和落地价值等方面的“灵魂拷问”,而这些疑惑同时也在拷问我们研究员。那么作为研究员,我们是如何从用户的角度去辅助产品同学和设计同学进行敏捷的方案验证呢?

首先,我们先来了解什么是产品可用性测试?

可用性(Usability),被定义为一种用来衡量界面好用程度的属性。好用程度的高低一般取决于以下五个要素:

  1. 可学习性(Learnability):初次接触这个设计时,用户完成基本任务的难易程度。
  2. 效率(Efficiency):用户能多快完成任务。
  3. 可记忆性(Memorability):当用户一段时间没有使用产品后,是否能马上回到以前的熟练程度。
  4. 出错(Errors):用户能否从错误中恢复。
  5. 满意度(Satisfaction):用户对产品的主观满意度。

可用性测试主要用于验证产品的可用性,该方法能够帮助产品同学和设计同学了解在实际使用情境中该设计方案(概念或创意)的质量(评估是否可用/是否有效/用户是否满意),并在测试结果的基础上进行改进。

换句话说,可用性测试是观察有代表性的用户,让用户完成产品中的各项任务,了解用户如何使用产品,界定出可用性问题并解决这些问题,让业务、产品、设计、研发等上下游角色尽快对产品方案达成共识并积极优化产品体验。

image.png

通过可用性测试,我们可以:

  1. 了解用户如何与产品进行交互;
  2. 了解用户是否能够完成指定任务;
  3. 了解用户需要多久才能完成指定任务;
  4. 了解用户对本品和竞品的满意度;
  5. 明确产品存在哪些需要优化的可用性问题;
  6. 明确产品可用性情况及是否符合上线目标;
  7. 让产设研团队在开发上线前发现问题并解决。

那么,什么情况下可以做可用性测试?

在实际项目执行中,我们通常会在几个特定阶段去进行产品可用性测试,不同阶段采取的调研方式也有所不同,所关注的内容亦随之变化。

(1)设计初始阶段,我们通常会进行前期用户需求挖掘或相似产品使用情况分析,并基于需求概念设计出来的草图方案进行探索性可用性测试,来确定方案内容和功能的范围是否符合用户预期方向和使用需求,以此初步评估草图方案的有效性和可用性。因此,在该阶段,我们常以纸张原型测试+定性深访为主,先从认知上与用户保持一致,理解了用户,做出来的产品方案更能贴近用户诉求。

(2)灰度上线前,我们一般对 demo 终稿进行评估性可用性测试,向目标用户介绍新设计,同时尽可能保证 demo 稿是用户能够直观测试使用的,以此来确定 demo 在功能满足、信息布局、流程交互,甚至是视觉样式上是否能够提供良好的用户体验。所以,在该阶段我们更多会进行面对面测试+可用性测试量表(SUS 量表),一般在会议室等固定安静的环境中进行,并要求用户按既定任务测试操作,任务测试过程中不打断用户并观察记录用户在关键流程环节使用中遇到的问题,测试完成后向用户提出问题或进一步探究原因。

(3)灰度上线或全量上线后,我们通常会对上线后的新方案进行对比性可用性测试,通过灰度方式在同一时间维度下比较新方案和原方案的可用性反馈和用户满意度,确保方案在全量上线之前修复任何潜在问题。因此,在该阶段我们以 A/B 测试+场景化调研问卷(如下图所示)为主,通过用户体验数据和业务数据来评估出最优版本。

image.png

实际执行中,我们怎么做可用性测试?主要实施步骤有:

image.png

STEP1:设计任务

可用性测试的基础是任务,任务测试内容的好坏是能够对测试结果的准确性有直接影响的。因此在招募用户之前,需要对测试的产品方案进行任务设计。比如,测试商家在 B 端营销系统报名营销活动流程方案的任务可以是:报名一场双 11 大促活动。

在设计比较合适的测试任务时需要注意以下几点:

  1. 选择最核心的功能或操作流程作为任务。产品最核心的功能和操作流往往是最频繁被用户使用的地方,假设最常用最核心的地方还存在可用性问题,那么就算优化了其他边缘部分的可用性问题,依旧是对产品整体体验于事无补。比如在商家报名大促活动流程中,最核心的环节是查找活动→选择商品报名→跟踪报名进度,那么就需要重点将这部分作为测试任务。
  2. 任务应符合常规操作流程。在实际业务中,产品线的职责分工会比较细化,比如 A 产品会负责 A 模块,B 产品负责 B 模块…单一功能模块的测试任务较多的情况下,如果各任务之间操作流无法串联甚至是存在冲突的话,用户测试的操作流就是不合常规的,也容易给参与测试的用户带来困扰。因此,我们研究员需要根据用户操作习惯来进行评估测试任务并设计串联流程。
  3. 为任务创建一个应用场景。简单的场景描述会对用户执行任务有帮助。比如:任务是“报名一场双 11 大促活动”,我们可以创建这样一个场景:你关注的双 11 大促活动报名时间开始了,你想上商家后台去报名双 11 大促,请登录商家后台来完成大促活动报名。
  4. 明确任务的起点和终点。用户是否完成了任务的评估依据是:用户是否从起点(页面 A)到达了终点(页面 B)。因此要明确起点和终点的定义,哪个页面是起点?哪个是终点?比如:任务是“报名一场双 11 大促活动”,起点页面就是商家后台首页,终点页面就是提交报名素材成功的页面。另外在评估是否到达终点页面之外,还需要关注用户在任务过程中的操作动线、是否有效填答信息,若没有,我们需要搞清楚背后原因是什么。
  5. 任务不应过于简单。若想测试用户是否能够找到某功能,不要用类似“找到 XX 功能按钮”这类表述,我们应该给用户提供一个要处理的实际场景任务,比如不是“找到换品功能按钮”而是“报名完成后想要重新换品”。
  6. 避免提供线索和描述操作步骤。任务只需要给出具体目标即可,不需要给到测试用户具体的操作步骤,不然会容易错过用户在执行任务过程中到某一环节可能存在的“意外问题”,而这些“意外”恰恰是我们需要关注的。

STEP2:招募用户

在招募用户环节,最重要的是样本数量的确定。在实际的可用性测试中,我们常常被产品同学或设计同学问到:

“6 个用户提出的问题能代表全部么?”

“几个用户是不是太少了?他们提出的问题是可靠么?”

诸如此类的样本数量“挑战”,不胜枚举。人机交互博士 Jakob Nielsen 曾提出:“有 5 个人参加的用户测试,即可发现大多数(85%)的产品可用性问题。” Nielsen 这张经典图表(如下图)告诉我们答案:一般最严重的问题都是前几名用户发现的,随着用户数量增多,发现问题逐渐减少。

image.png

当然在实际执行中也会存在一些局限性,比如只能发现问题数量,但无法确定发现问题的严重程度,因此还是需要从实际情况比如测试任务的复杂程度、人力资源的投入程度等等来确定招募样本数量。

STEP3:前期准备

  1. 测试地点与工具准备。比如安静的会议室、电脑、录音笔、录屏软件(录制操作全程,便于后续回顾分析)等。
  2. 任务相关资料准备。如①数据收集表,如收集任务是否完成、完成时间、关键事件中遇到的体验问题、满意度;②访谈提纲,包含任务步骤、需要注意深挖的环节问题等。比如,任务是“报名一场双11大促活动”,访谈验证sop示例:

image.png

STEP4:试点测试

试点前测的目的是针对整个测试流程和提纲进行测试,便于前置发现流程和提纲中存在的问题,及时优化,避免造成真实测试用户的资源浪费。试点前测需要注意:

  1. 访谈提纲的话术表达和任务流程的设计,是否能够准确让用户理解?
  2. 提纲内容是否透露了操作步骤,用户是否很快完成任务?
  3. 时间安排是否合理,用户是否可以在规定时间内完成任务?
  4. 任务流程安排是否合理,用户是否感到疑惑?

STEP5:观察访谈

在观察测试中,需要检查用户任务目标和心理认知是否可以顺利执行下一步操作,以此来发现可用性问题,因此我们要对以下问题做到心中有数:

image.png

在事后访谈中,有以下几点小小访谈 tips:

  1. 认知习惯层面:首先了解用户对方案功能的基本理解,比如是否能够理解?理解的意思是什么?为什么会有这些理解等等,之前在这些环节中用户的操作习惯是什么样的?
  2. 需求关注层面:用户在这些环节关注哪些方面?然后再给用户解释每个功能方案的定位作用是什么,方案解决什么问题。同时追问用户,就目前方案是否解决实际中的问题,哪些问题?以及还有哪些优化的建议等等。尽管大多数人认为不该直接问用户产品的优化建议,用户给到的结论也只是基于自身经验的主观想法,但是若根据用户给到的答案继续深挖“为什么”,可能会知道用户真正想要达到的效果和预期是什么。
  3. 切记不要上来就一通讲解方案后就单纯问用户你觉得好不好,应该还要继续往下追问。因为这样通过对用户现有的行为习惯和需求关注的了解,才能够判断评估用户说的话是否逻辑自洽,才能够验证方案是否能够真正满足用户的需求,而不是伪需求。

STEP6:分析报告

一般情况下,可用性报告的内容主要包含以下三方面:

  1. 研究概述:测试目标、样本描述、研究方法等。
  2. 问题解读:问题描述、原因解读、严重程度及影响范围评估、数据结果等。
  3. 解决应对:建议的解决方案。

最后的话

好的产品设计应当满足以下特征:可用性、易用性、好用性且具有吸引力。每个特征都是为了能让产品站稳脚跟而存在的,倘若想要让产品功能最终具备这些特征属性,就离不开产品可用性测试的过程。

而且一个产品设计方案在没有经过用户验证的情况下,容易在实际上线使用后出现一些隐性风险。而前置的设计验证,在一定程度上可以辅助我们产品功能在上线前发现问题,改进设计。

以上,共勉~希望能对大家有所启发。

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

教科书级干货!6招兰亭妙微UI设计公司,带你玩转情感化设计

清阳 设计思维

过去十几年,数字产品设计的核心一直是能用、稳定、无障碍,但如今功能同质化严重,情感体验成为产品决胜关键
 
C 端用户追求 “用得开心”,加载动画、趣味细节都能提升好感;B 端用户需要 “用得舒服”,简洁界面、贴心反馈能缓解工作疲惫。
 
情感化设计不是单纯美化界面,而是用设计触发正向情绪,建立用户与产品的情感连接,最终提升满意度与忠诚度。兰亭妙微UI设计公司带您一起看。

image.png

一、什么是情感化设计

image.png

 
情感化设计是以激发用户积极情绪为核心的设计理念,超越基础功能与可用性,让用户在使用中产生愉悦、安心、被重视的感受。
 
它基于唐纳德・A・诺曼的三层情感模型,覆盖用户全体验链路:
 

1. 本能层(视觉感官)

image.png

第一眼视觉冲击,直接影响初始好感。
 
  • C 端:美团橙黄色传递温暖食欲感
  • B 端:Notion 低饱和色系降低信息压迫感
 

2. 行为层(操作交互)

 

image.png

操作流畅度与即时反馈,决定使用舒适度。
 
  • C 端:淘宝购物车动效、点击反馈
  • B 端:360 安全卫士查杀流畅动画
 

3. 反思层(品牌记忆)

image.png

 
使用后的长期感受,塑造品牌忠诚度。
 
  • C 端:网易云音乐年度听歌报告
  • B 端:Slack 年度团队感谢动画
 

 

二、UI 情感化设计发展三阶段

 
  1. 功能导向期:以技术为中心,仅满足基础使用,用户适配系统image.png
  2. 体验兴起期:关注可用性,界面更直观易用

    image.png

  3. 情感化阶段:以用户情感为核心,打造有温度的体验image.png

 

 

 

三、为什么要做情感化设计

 
人类决策由情绪驱动,大脑杏仁核、前额叶皮层等区域负责情感处理,多巴胺、血清素直接影响愉悦感。
 

image.png

情感化设计能:
 

 

  • 触发用户正向行为,降低心理防线
  • 建立品牌认同与身份归属感
  • 实现用户体验与产品价值的双赢
 

 

四、情感化设计三大核心要素

image.png

 

1. 视觉设计:用美学传递情绪

 
  • 色彩:蓝色 = 信任、红色 = 热情、黄色 = 活力,精准匹配情绪image.png
  • 排版布局:简洁对称 = 平静舒适,杂乱无章 = 焦虑烦躁image.png
  • 动画过渡:轻量动效缓解等待焦虑,提升操作愉悦感image.png
 

2. 交互设计:用细节传递关怀

 
  • 微交互:按钮反馈、悬停变化、加载动画,体现设计用心image.png
  • 个性化:基于用户行为定制推荐,让用户感到被理解image.png
 

3. 内容语言:用语气拉近距离

  • 语气适配:幽默亲切 or 专业严谨,匹配产品调性image.png
  • 正向引导:错误提示安抚、成功操作鼓励,减少用户挫败感image.png
 

 

五、情感化设计的价值(C 端 + B 端)

 

对 C 端产品:拉近距离,提升粘性

 

image.png

  • 降低使用门槛,拟人化设计减少操作挫败感
  • 强化用户认同,契合审美与情感偏好
  • 促进转化传播,激发分享欲与复购
 

对 B 端产品:提升效率,优化协作

 
  • 缓解工作压力,简化流程、清晰反馈减少焦虑image.png
  • 增强团队协作,正向激励提升参与感image.png
  • 降低落地阻力,人性化设计减少员工抵触image.png
 

 

六、6 招落地情感化设计(核心实操)

 
  1. 视觉轻量化:低饱和配色、留白设计,减少视觉疲劳
  2. 微交互精细化:操作必有反馈,加载、点击、错误状态全覆盖
  3. 文案人性化:拒绝生硬提示,用亲切、鼓励的语言沟通
  4. 场景适配化:C 端做节日皮肤、个性化内容;B 端做高效流程、简洁界面
  5. 反馈即时化:任务完成、流程卡点及时提示,给用户掌控感
  6. 迭代动态化:通过用户调研与数据反馈,持续优化情感体验

 

 

 

结尾总结

 
情感化设计不只是好看的插画、动效,而是覆盖视觉、交互、文案的全维度体验设计。
 
它把冰冷的功能,变成懂用户、有温度的产品,让 C 端用户爱上使用,让 B 端用户高效舒适。
 
做好情感化设计,需要产品、设计、研发多方协作,以用户为中心,持续迭代优化。
转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

B 端表单设计(上)优化版|清晰、好读、可直接落地

清阳 设计思维

在B端产品设计中,表单作为核心数据录入与交互载体,其设计的合理性直接影响产品效率与用户体验,兰亭妙微ui设计公司在长期服务B端客户的过程中发现,许多产品因表单设计不规范、逻辑混乱,导致用户填写效率低、错误率高,甚至放弃操作。基于此,结合兰亭妙微ui设计团队的实战经验,我们保留核心干货,修正设计误区,梳理清晰逻辑,打造一份可直接落地、适合设计师快速查阅的B端表单设计指南,助力更多产品打造高效、易用的表单体验。
 

一、开篇:B端表单到底是什么?

表单是B端产品核心数据录入载体,本质是把线下纸质单据搬到线上,适配电脑/移动端操作习惯。核心目标:降低填写成本、减少错误、提升效率、提高完成率。

image.png

二、表单三大设计原则

  1. 表意明确:用对组件:日期用DatePicker、数字用InputNumber,不混用、不误导。
  2. 简洁高效:信息获取快、录入操作快;视觉清爽,不堆砌。
  3. 安全容错:操作前:清晰提示输入规则;操作中:实时校验、自动纠错;操作后:草稿保存、二次确认防误操作。

三、表单基础构成(必掌握)

基础表单 = 标签 + 表单域 + 提示信息 + 操作按钮;高阶表单 = 基础 + 校验提示/帮助提示/占位符/动态增减。

image.png

1. 标签布局(4种,效率排序)

效率:顶对齐 > 右对齐 > 左对齐 > 内部标签
  • 顶对齐标签:速度最快(50ms定位)、浏览填写双快、省横向、占纵向。✅ 适用:追求快速填写、标签长短不一、延展性要求高。

    image.png

  • 右对齐标签:填写快、省纵向、阅读稍慢。✅ 适用:要屏效+要速度,标签长度差异小。image.png
  • 左对齐标签:阅读稳、填写慢、省纵向。✅ 适用:复杂/敏感信息、需要用户仔细核对(如注册)。

    image.png

  • 内部标签:省空间、输入后消失易遗忘。✅ 适用:移动端极简表单(≤2项),不建议PC端大量使用。

     

2. 必填/选填标记规则(统一最关键)

image.png

  • 全必填:可统一不标,保持全局一致即可
  • 必+选混合:只标必填* 或 只标选填,二选一并贯穿全站
  • 星号位置:建议放标签左侧,一眼扫完必填项

3. 表单域(输入核心)

image.png

包含:输入框、选择器、时间选择器、数值选择器、上传。
设计要点:
  • 宽度与输入内容匹配:长度暗示输入量(建议用80/120/160/240/400这5档)
  • 提供合理默认值:减少选择负担,提升填写速度
  • 提示文案:有用、具体,不写“正确但无用”的话

4. 操作按钮

image.png

  • 弹窗表单:按钮底部居右(确认在最右)
  • 页面长表单:按钮居中(减少操作距离)
  • 阅读顺序:右上角/右下角 → 从右往左;表单内 → 从左往右

四、表单4种布局类型

  1. 基础表单:表单项≤7个、结构简单,直接单列/双列排布。

    image.png

  2. 锚点定位表单:内容极多、纵向超长、各组强关联,用锚点快速跳转。

    image.png

  3. 标签页(Tab)表单:内容多、各组无强关联,用Tab分组隔离。

    image.png

  4. 分步(Steps)表单:有先后逻辑顺序,给用户进度预期。

    image.png

五、表单5种交互形式(按内容量排序)

内容由少到多:气泡卡片 → 原位编辑 → 弹窗 → 抽屉 → 页面跳转
  1. 气泡卡片 Popover:轻描述、轻操作,不打断流程。

    image.png

  2. 原位编辑:展示即编辑,回车保存,极简录入。

    image.png

  3. 弹窗 Modal:不离开当前页,承载简单表单。

    image.png

  4. 抽屉 Drawer:侧边滑入,可多层,适合中量内容。

    image.png

  5. 页面跳转:最通用,适合复杂、长表单,必打断当前流程。image.png

    兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

     

    image.png

日历

链接

个人资料

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

存档