什么是B端产品经理？和C端产品经理有什么区别？
按钮是产品中十分常见的交互元素之一，好的按钮设计可以很大程度地提升用户体验。那么，怎么打造出符合用户需求、深受用户喜爱的优秀按钮？这篇文章里，作者对按钮UX设计进行了拆解分析，一起来看一下。
在数字产品中，按钮是最常用的交互元素之一。一个好的按钮设计可以提高用户体验和产品的使用率。
本文将探讨一些关于按钮UX设计的方法，包括明确按钮功能、选择合适的颜色、确定按钮大小、添加标签和描述、考虑交互方式、测试和优化等。
通过综合考虑这些因素，我们可以打造出符合用户需求的优秀按钮，提升产品的用户体验和竞争力。
按钮是一种用户界面元素，用于触发特定的操作或行为。
它可以是文本、图像或交互式元素，通常位于页面的底部或顶部，以便于用户快速访问。
根据不同的用途和设计风格，按钮可以分为多种类型和分类，例如：
以上仅是一些常见的按钮类型和分类，实际上还有很多其他的类型和分类。在设计按钮时，需要根据具体的场景和目的选择合适的类型和分类，并结合用户体验和产品需求进行优化。
按钮的位置和大小对于用户体验和产品可用性非常重要。一般来说，按钮应该位于用户视线的中心位置，以便于用户快速访问。同时，按钮的大小也应该适中，不要过大或过小，以免影响用户的操作。
在实际设计中，可以通过以下几种方式来确定按钮的位置和大小：
除了位置和大小之外，按钮的布局方式和排版规则也非常重要。合理的布局方式和排版规则可以提高用户的使用体验和产品的可用性。以下是一些常见的按钮布局方式和排版规则：
按钮的颜色对于用户体验和产品可用性非常重要。一般来说，按钮的颜色应该与产品的品牌色或主题色相匹配，以便于用户识别和记忆。同时，按钮的颜色也应该具有明显的对比度，以便于用户在不同的背景下快速找到目标按钮。
以下是一些常见的按钮颜色选择原则：
除了颜色之外，按钮的样式设计也是非常重要的。合理的样式设计可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮样式设计要点：
按钮文字的设计对于用户体验和产品可用性非常重要。一般来说，按钮文字应该简洁明了、易于理解和记忆，同时要符合产品的品牌形象和主题风格。
以下是一些常见的按钮文字设计原则：
除了文字之外，按钮标签也是非常重要的。合理的标签设计可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮标签设计要点：
按钮的交互设计对于用户体验和产品可用性非常重要。合理的点击效果和反馈机制可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮点击效果和反馈机制：
除了点击效果之外，按钮的动画效果和过渡效果也可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮动画效果和过渡效果：
按钮的测试和优化对于提高产品的用户体验和可用性非常重要。合理的测试和优化策略可以发现并解决产品中存在的问题，提高产品的品质和用户满意度。
以下是一些常见的按钮测试方法和流程：
除了测试之外，按钮优化也是提高产品用户体验和可用性的重要手段。以下是一些常见的按钮优化策略和技巧：
按钮UX设计对于提高产品的用户体验和可用性非常重要。合理的按钮设计可以增加用户的参与度、趣味性和便利性，从而提高用户对产品的满意度和忠诚度。
在进行按钮UX设计时，需要考虑按钮的位置、大小、颜色、样式、功能、反馈机制等多个方面，以确保产品能够满足用户的需求和期望。同时，还需要进行测试和优化，发现并解决产品中存在的问题，提高产品的品质和用户满意度。因此，按钮UX设计对于现代产品开发和用户体验设计都具有重要的意义和必要性。
本文由 @MO鱼山寨 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
本文深入分析了B端弹窗设计的尺寸规范问题，提供了科学定义弹窗尺寸的方法和思路，旨在帮助设计师提升操作效率并确保良好的用户体验，希望对您在弹窗设计上的决策有所启发。
相信大多B端设计师对web弹窗设计的规范都不陌生：比如弹窗按交互形式可分为模态弹窗和非模态弹窗；
按承载内容类型分为：提示类、操作类、展示类弹窗；按弹窗承载信息量的大小可以分为：小尺寸弹窗、中尺寸弹窗、大尺寸弹窗…等等但最近，在做一个操作提效的需求设计时遇到了需求方对弹窗尺寸的规范挑战~
大致需求是这样：为节省弹窗内对选项选择的时间，现将原本弹窗内的级联选择下拉框改成平铺按钮的形式。（见下图）ps：本平台为人工审核平台，使用用户为审核员，平台设计要为审核员的审核效率负责，审核效率一般表示为：单人单天（8小时）xxx条审核量。
问题点：承载内容信息量不固定原因：弹窗内用户选择项为不通过原因，而此选择项是用户根据自身企业的风险标签来自定义配置，这就涉及到级联选择数量的问题，有的客户风险标签体系细，多则几百个，有的客户只需要粗粒度标签，例如只有一级标签，总数可能不超过十个…
需求方：我要一个这么大的弹窗！好让信息呈现更全面！
但做设计从来不是凭空定义一个弹窗大小，要做到有理有据；前期选择先跟使用此平台的审核负责人沟通，来确定目前已接入的客户在此处自定义配置的原因数量量级并整理出沟通结论：
存在少量客户10个以内的原因个数、常规客户在30个左右的原因个数、现存一家客户使用最大量级100+原因个数。但由于控制权在客户方，原因量级不可控，未来也可能出现几百的数量。在以上结论中，可以确定出可能的备选 600px中弹窗、800px的大弹窗、或者需求方提出的将近1200px的超大弹窗，但到底哪个最为合适需要进一步判断。
在有可能的600px、800px、1200px三种宽度中选取最合适的弹窗尺寸，分别从操作效率与适配性角度对其进行判断。操作效率层面：
当原因个数在30个以下时：
若不同宽度时，都选择第一个处置原因，根据交互方法论–菲茨定律，指点设备到达目标的与两个因素有关：（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；（2）目标的大小（S）。目标越大，所用时间越短。
由此可见此操作的最终目标按钮为右下角的确定按钮，目标按钮大小不变，但整体的选择距离是相对两个较小弹窗要远的。D3>D2>D1，所用时间 T3>T2>T1。由于对审核员任务操作时间和效率要考虑到秒或毫秒级别，此大小对用户快速完成此操作起到负向作用。
另外，当原因个数10个以内时，可见此时弹窗宽度过宽，导致空白区域过大。
当原因个数在30个以下时，操作效率评分：
1200px ⭐️⭐️
800px ⭐️⭐️⭐️
600px ⭐️⭐️⭐️
当超过100个原因个数时：1200px 一屏内展示完全，不需要滚屏滑动；800px 可在两屏内展示完全，需要滚屏滑动；600px 超出两屏展示才可展示完全，需要滚屏滑动。
当原因个数超过100时，操作效率评分：
1200px ⭐️⭐️⭐️
800px ⭐️⭐️⭐️
600px ⭐️⭐️
适配性层面：
根据市面主流屏幕分辨率尺寸调研：
市面上存在部分 1024 分辨率的显示屏，所以：600px能够适配所有市面主流分辨率显示器；800px能够适配所有市面主流分辨率显示器；1200px不能能够适配市面主流1024*768的分辨率显示器，弹窗不能在显示器内显示完全，固适配性相对较弱。
综合三种弹窗大小的操作效率和适配性：
800px的表现最优，固选取800px的弹窗大小。
高度规范：由于信息量的不同可以根据内容多少进行自适应高度，限定max high 700px。由于一般超出800px可能出现浏览器外滚动条，所以选取高度为600-800px之间。
滚动条规范：限高后，若信息超出max high支持出现内滚动条。浏览器适配规范：浏览器窗口>800px，弹窗宽度保持固定宽度800px。浏览器窗口600-800px之间弹窗同步在600-800之间自适应。浏览器窗口<600px，弹窗宽度保持600px，出现浏览器外滚动条。
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在互联网领域中，人机之间的互动过程就是交互。交互也有一些可预测的、重复出现的规律，作者总结了其中常见的七种C端交互模式，可以提高大家的工作效率，分享给大家。
前段时间有个产品童鞋，他刚加我就问了一大串问题。
什么是模式（Pattern）？什么是模版（Template）？这两个概念有什么区别？
作为一个热心好学、乐于助人的产品仔，我当然和他畅聊了一个多小时，顺便总结下聊天内容。
你是不是也经常在生活工作中，碰到类似“行为模式、设计模式、语言模式、文档模版、表格模版”等名词。
但又搞不清它们有什么区别，搞懂了又有什么用？
别急，我们花几分钟，先来唠唠什么是模式。
可预测、重复出现的现象或规律，通过归纳总结，就变成了某一种模式。
我们的生活中，就有许多模式的影子。
比如常见的商业模式、营销模式、行为模式、数学模式、语言模式等。
举个例子：
简单说下行为模式，它分为了“习惯模式、消费模式、学习模式”等等。
苦逼打工仔普遍的消费模式，一般是工作日花钱少，到了周末都爱到商场逛街和购物。
但又有特例，我有个朋友就特别宅，他只喜欢在上班的时候，摸鱼逛淘宝下单，简直离谱~
掌握模式，有什么用？
当你掌握了模式的概念，并尝试在生活中使用，相信你一定能感受到这 7 个好处。
我们试着再举个例子，加深下对模式的理解，顺便学学交互设计。
什么是交互？
简单来说，交互指的是在互联网领域中，人、机之间的一系列互动过程。
我还提炼了 3 种常见模式（简单反馈、数据操作、业务判断），比较粗糙凑合也能用。
现在试着再系统总结下，我常用的 7 种 C 端交互模式，主要有：导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式。
学完就能用，赶紧卷起来~
有人就问了，还有更多交互模式吗？
确实可以有，等我有时间再编几个。。
话说回来，如果是一些特别复杂的业务规则，可能会涉及到 N 个交互模式的任意组合。
常见的导航模式有按钮组合、标签菜单、宫格布局、列表视图等。
导航模式的主要作用是，告知用户当前在网站的位置，以及接下来到哪些页面，这有点像地图 APP。
上面这张图中，包含了几种导航组件呢？
搜索，是各大电商 APP 常见的交互模式。
搜索模式允许用户输入关键词，然后系统返回搜索结果。
打个比方，这有点像在 Navicat 中写了一段 SQL 查询。
SELECT id, name, age
FROM users
WHERE age > 18
这段 SQL 的作用是，查询大于 18 岁的用户信息，包含序号、名称、年龄。
常见的反馈模式组件，涉及了对话框、吐司提示、气泡提示等。
反馈模式用的比较多的场景是，告知用户一些信息或提示，比如“输入密码错了、展示订单取消的注意事项”等。
输入模式主要用于新数据创建，例如淘宝下单时，你新增了一个收货地址。
打开美团叫个外卖，整个订单创建流程，也是输入模式。
有很多人可能会把输入模式和编辑模式搞混。
区别它们的一个方法是，交互流程涉及新数据创建，还是改旧数据。
改数据的话，那就是编辑模式。
我们在看到一些干货文章，或好用的小程序想要转发给朋友，那就要用到分享模式。
分享模式可以很简单，也可以往复杂了做，看产品阶段去实现。
引导模式和反馈模式有点像，都是展示特定的内容。
那怎么分辨它们呢？
以设计师视角来看，反馈模式需要用户触发，系统被动显示。
而要让用户特别关注的信息，那就是引导模式。
模式，即抽象的规律。——好夕雷
说了这么多概念和例子，你是不是对模式的认知更清晰了呢？
模式运用在产品领域，就有了这 7 种交互模式，分别是“导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式”。
如果学会了模式，那么无论生活还是工作，相信你一定能轻松应对、事半功倍。
本文由 @好夕雷 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
在前面的文章中，我们定义了交互思维和流程、目标，接下来我们分享交互设计思维与我们常说的产品思维、体验思维等的融合。
在现代产品开发中，交互思维与产品设计思维的融合已经成为提升用户体验的关键。两者看似独立，却可以在实际设计过程中形成互补，打造出更加契合用户需求的产品。本文将从两者的特点、融合的价值，以及实际应用场景中如何落地等角度出发，深入探讨它们的结合。
交互思维：聚焦人与界面的连接
交互思维的核心在于用户与产品的互动体验。它关注的是：
交互思维倾向于优化用户的操作路径，将复杂的技术逻辑隐藏在背后，让用户感受到简单和直观。
例子：在淘宝购物车中，“全选”功能按钮被设计在靠近商品列表的顶部，方便用户快速选中所有商品；而删除操作则以批量和单选两种方式提供，提升操作灵活性。
产品设计思维：关注用户价值与商业目标
产品设计思维则是更全局的，它关注的是产品能否满足用户需求并实现商业价值。核心问题包括：
产品设计思维更偏向战略层面，要求对市场、用户和商业有全局的理解，并制定产品的发展方向。
例子：微信从“即时通讯”入手，以简单的聊天功能切入市场，但通过持续扩展支付、朋友圈、公众号等模块，构建了一个完善的生态系统。
两种思维的结合，能够更好地兼顾用户体验和商业价值。以下是几种主要的融合方式：
1）以用户为中心，兼顾商业目标
交互思维： 设计流畅、直观的操作流程，提升用户体验。
产品设计思维： 在流畅体验的基础上，引导用户完成关键行为（如购买、注册等），实现商业目标。
案例：美团外卖的下单流程
2）用户需求与技术限制的平衡
交互思维： 关注用户直观感受，简化复杂操作，让用户专注于目标任务。
产品设计思维： 在技术和资源限制内，找到实现用户需求的最佳方案。
案例：滴滴出行的“一键叫车”功能
3）数据驱动与用户体验的结合
交互思维： 基于用户行为数据优化界面和流程，提升操作效率。
产品设计思维： 基于数据分析判断用户需求的优先级，调整产品功能布局。
案例：淘宝推荐算法与界面设计
淘宝的个性化推荐系统通过AI分析用户浏览和购买行为，推荐相关商品。交互设计确保推荐商品的展示方式简洁、直观，不打扰用户正常浏览，增强购物体验的同时提升成交转化率。
4）感性设计与理性分析的结合
交互思维： 关注情感体验，设计让用户愉悦的互动。
产品设计思维： 从用户行为和反馈中提炼需求，找到情感体验的落地点。
案例：支付宝的“年度账单”功能
随着AI技术的深入发展，交互思维与产品设计思维的融合将进一步进化：
案例展望：
在未来的外卖App中，AI不仅能推荐菜品，还能根据天气、饮食偏好提供动态优惠，让用户感到“被理解”。同时，界面交互会变得更加智能，比如直接通过语音完成点餐和支付。
在数字产品开发中，交互思维和用户体验设计思维（UX Design Thinking）常常交织在一起，共同塑造出令人满意的产品体验。两者的融合不仅能提升产品的使用效率，还能激发用户的情感共鸣，最终实现用户目标与商业价值的双赢。
1）交互思维：聚焦人与界面的高效互动
交互思维主要关注用户与产品之间的操作过程，旨在通过直观的界面设计和高效的交互方式，帮助用户轻松完成任务。其核心要素包括：
2）用户体验设计思维：以用户为中心的全局视角
用户体验设计思维是以用户需求和用户感受为核心的一种方法论，涉及产品从设计到使用的整个生命周期。其重点在于：
简单类比：
交互思维像是一位专注于修路的工程师，确保路径笔直流畅；而用户体验设计思维更像是一位城市规划师，考虑如何让整个城市的交通系统高效且宜居。
1）从细节到全局，满足用户操作与体验的双重需求
交互思维注重细节，优化每一个交互动作；而用户体验设计思维关注全局，确保整个使用流程的流畅性和一致性。两者结合能让用户在每个环节都感到舒适且顺畅。
案例：微信的语音消息功能
2）情感设计与功能设计的结合
交互思维解决“怎么用”的问题，用户体验设计思维则深入到“为什么用”和“用后感受如何”。情感设计是两者融合的一个关键点，既提升用户满意度，又增强产品粘性。
案例：支付宝的完成支付动画
3）用户需求与设计约束的平衡
交互思维帮助优化操作路径，而用户体验设计思维则考虑设计的合理性和场景适配性。在技术和资源的限制下，两者需要共同探索最佳方案。
案例：滴滴出行的路线规划与确认
4）数据驱动与用户感知的结合
数据分析是用户体验设计思维的重要部分，而交互思维则利用这些数据优化每一次用户操作。两者的结合能实现功能的个性化和体验的精准化。
案例：淘宝的商品推荐系统
抖音作为短视频平台，在交互与用户体验设计的结合上表现得尤为出色：
随着AI的普及，交互思维与用户体验设计思维的融合将进入新的阶段：
案例展望：智能客服系统
未来的智能客服不仅能准确理解用户问题，还能根据情绪识别调整对话语气，同时提供即时解决方案与友好的互动体验。
交互思维与界面设计思维的融合，是现代产品设计中的核心命题。二者分别专注于用户操作路径和界面视觉呈现，彼此互补，共同打造出功能性与美观性兼具的产品体验。本文将从两者的概念、融合的价值以及实际案例中剖析如何实现这种深度结合。
1）交互思维：聚焦操作路径与用户效率
交互思维的核心在于优化用户操作的每一步，降低操作复杂度，提升使用效率。
其关注的主要问题包括：
特点：逻辑性强，重在用户的操作行为，强调功能可达性和可用性。
2）界面设计思维：聚焦视觉呈现与情感体验
界面设计思维则以视觉表现为中心，关注界面的美感和信息传达的有效性。其关注点包括：
特点：更注重感性表达，强调用户的情感体验和对产品的第一印象。
简单类比：
交互思维像是设计产品的操作说明书，确保逻辑清晰易懂；而界面设计思维则为产品包装，让它看起来有吸引力且直观。
1）信息分层与视觉引导的结合
交互思维： 根据用户操作逻辑，对信息进行层级划分，优先展示关键信息，隐藏次要内容。
界面设计思维： 通过颜色、字体大小、对比等视觉元素，强化信息的层级感和用户的关注点。
案例：支付宝首页的布局
交互层面： 核心功能（如转账、收付款）被放置在显眼的首屏区域，次要功能（如理财推荐）隐藏在二级页面。
界面层面： 不同模块的背景颜色和按钮样式有明显区分，用户一眼就能找到核心功能。
2）动效与反馈设计的结合
交互思维： 动效作为用户操作的反馈机制，提示操作结果或状态变化。
界面设计思维： 动效的风格和节奏与界面整体视觉风格保持一致，增强整体体验的连贯性。
案例：抖音的点赞动效
交互层面： 用户双击屏幕后，出现心形动画，明确提示“点赞成功”。
界面层面： 动效的色彩与抖音的品牌风格一致，给用户带来视觉和情感上的满足感。
3）视觉布局与操作路径的优化
交互思维： 确保核心操作路径最短，减少用户不必要的点击和跳转。
界面设计思维： 通过对页面布局的优化，让用户在操作路径中感到界面简洁且层次分明。
案例：京东购物车的设计
交互层面： 重要操作（如全选、去结算）被放置在用户触手可及的位置，减少多余步骤。
界面层面： 清晰的分组、直观的价格信息展示，让用户轻松理解购物车内容。
4）情感设计与功能优化的结合
交互思维： 通过优化功能满足用户需求，让操作过程简单高效。
界面设计思维： 在视觉设计中融入情感化元素，让用户感到愉悦或被关怀。
案例：网易云音乐的“听歌识曲”功能
交互层面： 用户只需点击一个按钮，系统即可快速识别歌曲，操作简单高效。
界面层面： 启动时有动态音波效果，识别成功后展示专辑封面和歌词，增强情感连接。
微信的朋友圈功能是交互思维与界面设计思维结合的经典案例：
交互设计：
用户可以通过简单的下滑操作浏览动态，上滑时加载更多内容，操作自然流畅。
点赞和评论的交互逻辑简单，长按可以删除自己的评论，符合用户直觉。
界面设计：
动态展示以卡片形式分隔，保持视觉整洁。
文本和图片的排版统一，评论区域的缩进样式使信息层级清晰。
交互思维与产品思维、体验思维、视觉设计思维的融合，是用户体验优化的基础。在实际设计中，我们既需要从全局出发，规划产品战略，也需要关注用户的每一步操作细节。
通过两者的互相补充，我们能设计出既符合用户需求，又实现商业价值的产品，更精准地满足用户需求，让产品不仅好用，还能打动人心。为用户和企业带来双赢的结果。
未来，随着技术的进步和用户需求的多样化，这种融合将持续推动数字产品体验的升级，成为提升产品竞争力的核心动力。
本文由 @ DesignLink 原创发布于人人都是产品经理。未经作者许可，禁止转载
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在前面的文章中，我们定义了交互思维和流程、目标，接下来我们分享交互设计思维与我们常说的产品思维、体验思维等的融合。
在现代产品开发中，交互思维与产品设计思维的融合已经成为提升用户体验的关键。两者看似独立，却可以在实际设计过程中形成互补，打造出更加契合用户需求的产品。本文将从两者的特点、融合的价值，以及实际应用场景中如何落地等角度出发，深入探讨它们的结合。
交互思维：聚焦人与界面的连接
交互思维的核心在于用户与产品的互动体验。它关注的是：
交互思维倾向于优化用户的操作路径，将复杂的技术逻辑隐藏在背后，让用户感受到简单和直观。
例子：在淘宝购物车中，“全选”功能按钮被设计在靠近商品列表的顶部，方便用户快速选中所有商品；而删除操作则以批量和单选两种方式提供，提升操作灵活性。
产品设计思维：关注用户价值与商业目标
产品设计思维则是更全局的，它关注的是产品能否满足用户需求并实现商业价值。核心问题包括：
产品设计思维更偏向战略层面，要求对市场、用户和商业有全局的理解，并制定产品的发展方向。
例子：微信从“即时通讯”入手，以简单的聊天功能切入市场，但通过持续扩展支付、朋友圈、公众号等模块，构建了一个完善的生态系统。
两种思维的结合，能够更好地兼顾用户体验和商业价值。以下是几种主要的融合方式：
1）以用户为中心，兼顾商业目标
交互思维： 设计流畅、直观的操作流程，提升用户体验。
产品设计思维： 在流畅体验的基础上，引导用户完成关键行为（如购买、注册等），实现商业目标。
案例：美团外卖的下单流程
2）用户需求与技术限制的平衡
交互思维： 关注用户直观感受，简化复杂操作，让用户专注于目标任务。
产品设计思维： 在技术和资源限制内，找到实现用户需求的最佳方案。
案例：滴滴出行的“一键叫车”功能
3）数据驱动与用户体验的结合
交互思维： 基于用户行为数据优化界面和流程，提升操作效率。
产品设计思维： 基于数据分析判断用户需求的优先级，调整产品功能布局。
案例：淘宝推荐算法与界面设计
淘宝的个性化推荐系统通过AI分析用户浏览和购买行为，推荐相关商品。交互设计确保推荐商品的展示方式简洁、直观，不打扰用户正常浏览，增强购物体验的同时提升成交转化率。
4）感性设计与理性分析的结合
交互思维： 关注情感体验，设计让用户愉悦的互动。
产品设计思维： 从用户行为和反馈中提炼需求，找到情感体验的落地点。
案例：支付宝的“年度账单”功能
随着AI技术的深入发展，交互思维与产品设计思维的融合将进一步进化：
案例展望：
在未来的外卖App中，AI不仅能推荐菜品，还能根据天气、饮食偏好提供动态优惠，让用户感到“被理解”。同时，界面交互会变得更加智能，比如直接通过语音完成点餐和支付。
在数字产品开发中，交互思维和用户体验设计思维（UX Design Thinking）常常交织在一起，共同塑造出令人满意的产品体验。两者的融合不仅能提升产品的使用效率，还能激发用户的情感共鸣，最终实现用户目标与商业价值的双赢。
1）交互思维：聚焦人与界面的高效互动
交互思维主要关注用户与产品之间的操作过程，旨在通过直观的界面设计和高效的交互方式，帮助用户轻松完成任务。其核心要素包括：
2）用户体验设计思维：以用户为中心的全局视角
用户体验设计思维是以用户需求和用户感受为核心的一种方法论，涉及产品从设计到使用的整个生命周期。其重点在于：
简单类比：
交互思维像是一位专注于修路的工程师，确保路径笔直流畅；而用户体验设计思维更像是一位城市规划师，考虑如何让整个城市的交通系统高效且宜居。
1）从细节到全局，满足用户操作与体验的双重需求
交互思维注重细节，优化每一个交互动作；而用户体验设计思维关注全局，确保整个使用流程的流畅性和一致性。两者结合能让用户在每个环节都感到舒适且顺畅。
案例：微信的语音消息功能
2）情感设计与功能设计的结合
交互思维解决“怎么用”的问题，用户体验设计思维则深入到“为什么用”和“用后感受如何”。情感设计是两者融合的一个关键点，既提升用户满意度，又增强产品粘性。
案例：支付宝的完成支付动画
3）用户需求与设计约束的平衡
交互思维帮助优化操作路径，而用户体验设计思维则考虑设计的合理性和场景适配性。在技术和资源的限制下，两者需要共同探索最佳方案。
案例：滴滴出行的路线规划与确认
4）数据驱动与用户感知的结合
数据分析是用户体验设计思维的重要部分，而交互思维则利用这些数据优化每一次用户操作。两者的结合能实现功能的个性化和体验的精准化。
案例：淘宝的商品推荐系统
抖音作为短视频平台，在交互与用户体验设计的结合上表现得尤为出色：
随着AI的普及，交互思维与用户体验设计思维的融合将进入新的阶段：
案例展望：智能客服系统
未来的智能客服不仅能准确理解用户问题，还能根据情绪识别调整对话语气，同时提供即时解决方案与友好的互动体验。
交互思维与界面设计思维的融合，是现代产品设计中的核心命题。二者分别专注于用户操作路径和界面视觉呈现，彼此互补，共同打造出功能性与美观性兼具的产品体验。本文将从两者的概念、融合的价值以及实际案例中剖析如何实现这种深度结合。
1）交互思维：聚焦操作路径与用户效率
交互思维的核心在于优化用户操作的每一步，降低操作复杂度，提升使用效率。
其关注的主要问题包括：
特点：逻辑性强，重在用户的操作行为，强调功能可达性和可用性。
2）界面设计思维：聚焦视觉呈现与情感体验
界面设计思维则以视觉表现为中心，关注界面的美感和信息传达的有效性。其关注点包括：
特点：更注重感性表达，强调用户的情感体验和对产品的第一印象。
简单类比：
交互思维像是设计产品的操作说明书，确保逻辑清晰易懂；而界面设计思维则为产品包装，让它看起来有吸引力且直观。
1）信息分层与视觉引导的结合
交互思维： 根据用户操作逻辑，对信息进行层级划分，优先展示关键信息，隐藏次要内容。
界面设计思维： 通过颜色、字体大小、对比等视觉元素，强化信息的层级感和用户的关注点。
案例：支付宝首页的布局
交互层面： 核心功能（如转账、收付款）被放置在显眼的首屏区域，次要功能（如理财推荐）隐藏在二级页面。
界面层面： 不同模块的背景颜色和按钮样式有明显区分，用户一眼就能找到核心功能。
2）动效与反馈设计的结合
交互思维： 动效作为用户操作的反馈机制，提示操作结果或状态变化。
界面设计思维： 动效的风格和节奏与界面整体视觉风格保持一致，增强整体体验的连贯性。
案例：抖音的点赞动效
交互层面： 用户双击屏幕后，出现心形动画，明确提示“点赞成功”。
界面层面： 动效的色彩与抖音的品牌风格一致，给用户带来视觉和情感上的满足感。
3）视觉布局与操作路径的优化
交互思维： 确保核心操作路径最短，减少用户不必要的点击和跳转。
界面设计思维： 通过对页面布局的优化，让用户在操作路径中感到界面简洁且层次分明。
案例：京东购物车的设计
交互层面： 重要操作（如全选、去结算）被放置在用户触手可及的位置，减少多余步骤。
界面层面： 清晰的分组、直观的价格信息展示，让用户轻松理解购物车内容。
4）情感设计与功能优化的结合
交互思维： 通过优化功能满足用户需求，让操作过程简单高效。
界面设计思维： 在视觉设计中融入情感化元素，让用户感到愉悦或被关怀。
案例：网易云音乐的“听歌识曲”功能
交互层面： 用户只需点击一个按钮，系统即可快速识别歌曲，操作简单高效。
界面层面： 启动时有动态音波效果，识别成功后展示专辑封面和歌词，增强情感连接。
微信的朋友圈功能是交互思维与界面设计思维结合的经典案例：
交互设计：
用户可以通过简单的下滑操作浏览动态，上滑时加载更多内容，操作自然流畅。
点赞和评论的交互逻辑简单，长按可以删除自己的评论，符合用户直觉。
界面设计：
动态展示以卡片形式分隔，保持视觉整洁。
文本和图片的排版统一，评论区域的缩进样式使信息层级清晰。
交互思维与产品思维、体验思维、视觉设计思维的融合，是用户体验优化的基础。在实际设计中，我们既需要从全局出发，规划产品战略，也需要关注用户的每一步操作细节。
通过两者的互相补充，我们能设计出既符合用户需求，又实现商业价值的产品，更精准地满足用户需求，让产品不仅好用，还能打动人心。为用户和企业带来双赢的结果。
未来，随着技术的进步和用户需求的多样化，这种融合将持续推动数字产品体验的升级，成为提升产品竞争力的核心动力。
本文由 @ DesignLink 原创发布于人人都是产品经理。未经作者许可，禁止转载
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
前排提示：本文多Gif需耐心加载，且需要有一定Ae基础才能便于理解内容。
你有没有注意过，App底部的图标是如何变成选中的？大多数产品是将静态图标替换（硬切过渡），来完成状态切换。
当我看完上百个动态后，找到了更有趣的方式...
02 App底部导航构成
通常由图标、文字/点线装饰、和底板卡片组成，（当然也有些产品只使用图标或文字），但设计师在进行动态设计时则是针对这3部分。
03 Tab Bar动态类型
动态效果由弱到强，视觉层级由低到高依次排序：图标动态 — 装饰元素动态 — 底板卡片动态。（根据本文案例效果来排序，但效果不同会有所差异）
▍图标动态․
我们知道图标风格可以简单的分为：线性、面性还有线面。在这基础上通过修改颜色或造型，又能延展出更多风格。
最常用的是添加修剪路径（Ae的一种路径效果），你可以把它理解成托尼老师，可以通过调整百分百参数来控制线条生长。
但只是单色修剪，看起来很单调。我们可以在这个动画基础上再多复制几层，并分别加入品牌色，这样可以让视觉看起来更丰富。
也可以换一种方式，只调整不同颜色图标的位置属性，便能得到故障效果。
如果你觉得这些太浮夸，那么单个图标添加修剪路径，再配合位移、旋转等基础属性则是更好的选择。
通用的方法是调整不透明度，相比于硬切更柔和，且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说，可能会显得有些普通。
我们可以考虑使用遮罩来制作动态，首先在图标周围绘制几个圆，再将图标外轮廓，作为圆的遮罩，来控制其显示范围，最后调整圆的缩放即可。
在一些特殊的时间，设计师们可能会技痒，而将图标绘制的更加丰富，来营造氛围。
对于这类图标，只需要参考它们的物理状态[下方解释]，再遵循从下往上，从中心往四周扩张的原则来调整基础属性，便能制作出细节丰富的出场动画。
（物理状态：该物体在现实场景下的状态，上图奖杯真实世界状态通常是放置地面，所以出场方向是从下到上。但假如你的图标是锦旗，那么物理状态应该是挂在墙上，所有出场方向是从上到下）
当然如果去掉高光和投影，在制作一些动态时会更方便。
例如：复制一颗星，将其初始位置设定为一个奖杯的距离，并记录关键帧，然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形，这样便能营造出3d旋转的错觉。
对于结构复杂的图标，可以提前分层。其中线条依旧可以使用修剪路径（在Tab bar中，不同图标修剪路径的起始点方向通常相同，以便保持一致性），而填充只需要调整元素缩放，并借助蒙版限制其显示范围就行。
▍装饰元素动态․
如果你觉得前面这些方案不够新颖，那我们可以对装饰元素下手。（当然这类方案很少见，原因在于商业价值不足，实现成本高，所以这里也只是提供一些创意练习思路）
在一些年轻化产品中，如果图标含义很容易理解，那么设计师可能会用线或点来替代文字，让整体更简洁。
国外设计师Tubik，通过让点元素在移动时呈现心电图样式，让人眼前一亮。
通过动态效果，甚至能体现出产品行业属性。
尝试修改轨迹样式，然后为元素不透明度和位置添加动画，你能猜出这是什么类型的产品吗？
又或者再夸张些，将轨迹设计成电路图。其中线条添加修剪路径，再借助Ae路径跟踪方法，使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围，这个方案看起来适合科技或游戏类产品。
通过调整元素路径来改变其造型，模拟液体滴落，再通过蒙版缩放，让选中状态下的图标出现。
假如你的图标设计的足够巧妙，我们可以提前绘制好关键笔画的运动轨迹，便能通过修剪这条轨迹来完成笔画的移动。
▍底板卡片动态․
这类动态少见的原因在于其动态效果面积大，视觉层级高，容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。
在Ae中要制造这样的效果，最先想到的可能是调整卡片路径，但这样的方式在制作弹性时非常麻烦。
我们有更简单的方法，先多画出一个圆，然后与卡片路径合并。
为了让边缘圆滑，整体添加高斯模糊和简单阻塞，分别加大参数，便能让边缘圆滑。（这种方式有个缺点：会收缩原有卡片宽高。所以添加效果后，需要借助参考线再次调整卡片大小）
完成圆滑处理后，修改其他元素的基础属性即可。
目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰，其弱化了弹性次数。
这个效果灵感来源于Dribbble设计师（EuroART93），我们只需要将凸起案例中，圆与底板卡片的布尔运算模式改为相减就行，其他元素同样调整基础属性。
此方案目前还没有在其他产品中看过，究其原因还是效果太过抢眼。
看了这么多，其实不难发现。同一个图标，只需要改变不同属性或元素的运动方式，便能带来不一样的感受。
或许创意的产生，并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。
正是它们之间这种奇妙的融合，给我们带来了新鲜感，或许这就是我们要的创意。
最后再说两句：
每个产品都有自己的调性和目标用户，动态效果也有强有弱。好的动态应该是能与其进行匹配，而不是根据某个产品得出一个绝对的答案。
本文演示了不同类型图标用什么动态，并不代表只能这样用。动态效果类型远远不止这些，而以上只是最常见的动态属性组合方式，所以请不要局限你的想法。
作者：大漠飞鹰CYSJ
链接：https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计的小编 http://www.lanlanwork.com
