首页

交互思维与产品设计思维、体验设计思维、视觉设计思维的融合

杰睿

在前面的文章中,我们定义了交互思维和流程、目标,接下来我们分享交互设计思维与我们常说的产品思维、体验思维等的融合。

一、交互思维与产品设计思维的融合

在现代产品开发中,交互思维产品设计思维的融合已经成为提升用户体验的关键。两者看似独立,却可以在实际设计过程中形成互补,打造出更加契合用户需求的产品。本文将从两者的特点、融合的价值,以及实际应用场景中如何落地等角度出发,深入探讨它们的结合。

1. 交互思维与产品设计思维的区别

交互思维:聚焦人与界面的连接
交互思维的核心在于用户与产品的互动体验。它关注的是:

  • 效率:用户是否能快速找到功能并完成操作?
  • 体验:操作过程是否流畅、愉悦?
  • 反馈:用户的操作是否能即时获得明确反馈?

交互思维倾向于优化用户的操作路径,将复杂的技术逻辑隐藏在背后,让用户感受到简单和直观。

例子:在淘宝购物车中,“全选”功能按钮被设计在靠近商品列表的顶部,方便用户快速选中所有商品;而删除操作则以批量和单选两种方式提供,提升操作灵活性。

产品设计思维:关注用户价值与商业目标

产品设计思维则是更全局的,它关注的是产品能否满足用户需求并实现商业价值。核心问题包括:

  • 需求洞察:用户真正需要什么?
  • 功能取舍:哪些功能是核心,哪些功能是辅助?
  • 商业目标:如何在满足用户需求的同时,实现盈利或增长目标?

产品设计思维更偏向战略层面,要求对市场、用户和商业有全局的理解,并制定产品的发展方向。

例子:微信从“即时通讯”入手,以简单的聊天功能切入市场,但通过持续扩展支付、朋友圈、公众号等模块,构建了一个完善的生态系统。

2. 交互思维与产品设计思维的融合点

两种思维的结合,能够更好地兼顾用户体验和商业价值。以下是几种主要的融合方式:

1)以用户为中心,兼顾商业目标

交互思维: 设计流畅、直观的操作流程,提升用户体验。

产品设计思维: 在流畅体验的基础上,引导用户完成关键行为(如购买、注册等),实现商业目标。

案例:美团外卖的下单流程

  • 交互层面:在选餐、结算、支付的每一步,用户体验都清晰、顺滑,没有任何卡顿。
  • 产品设计层面:通过优惠券推送、推荐菜品等设计,提升订单金额和用户粘性。

2)用户需求与技术限制的平衡

交互思维: 关注用户直观感受,简化复杂操作,让用户专注于目标任务。

产品设计思维: 在技术和资源限制内,找到实现用户需求的最佳方案。

案例:滴滴出行的“一键叫车”功能

  • 交互层面:用户只需输入目的地,一键发单,系统会自动分配司机。
  • 产品层面:背后整合了定位技术、调度算法、司机匹配逻辑等复杂功能,但这些复杂性被完全隐藏,用户只需看到简洁的界面和高效的结果。

3)数据驱动与用户体验的结合

交互思维: 基于用户行为数据优化界面和流程,提升操作效率。

产品设计思维: 基于数据分析判断用户需求的优先级,调整产品功能布局。

案例:淘宝推荐算法与界面设计

淘宝的个性化推荐系统通过AI分析用户浏览和购买行为,推荐相关商品。交互设计确保推荐商品的展示方式简洁、直观,不打扰用户正常浏览,增强购物体验的同时提升成交转化率。

4)感性设计与理性分析的结合

交互思维: 关注情感体验,设计让用户愉悦的互动。

产品设计思维: 从用户行为和反馈中提炼需求,找到情感体验的落地点。

案例:支付宝的“年度账单”功能

  • 交互层面:炫酷的动效和图表展示,给用户带来仪式感和满足感。
  • 产品层面:通过账单展示增强用户的消费行为意识,并潜移默化地推广其理财功能。

3. 交互思维与产品设计思维融合的关键原则

  • 优先关注用户需求:两者融合的首要任务是以用户需求为核心,所有设计决策都应服务于用户的目标和体验。
  • 注重全局与细节的平衡:产品设计思维关注全局策略,而交互思维则深入到细节优化。两者需紧密配合,既要设计好产品的整体框架,也要关注用户的每一次点击和滑动。
  • 数据与创意并重:以数据为基础验证产品方向,以创意设计激发用户的情感共鸣,实现理性与感性的结合。

4. 未来展望:AI与交互/产品思维的深度融合

随着AI技术的深入发展,交互思维与产品设计思维的融合将进一步进化:

  • 智能推荐与场景化设计: AI可以通过用户数据精准预测需求,设计更贴合场景的互动。
  • 个性化界面: 产品的界面和交互将更加动态,根据用户习惯实时调整。
  • 自动化与人性化的平衡: 利用AI简化操作的同时,保留关键环节的人性化设计,让用户感到关怀与尊重。

案例展望:

在未来的外卖App中,AI不仅能推荐菜品,还能根据天气、饮食偏好提供动态优惠,让用户感到“被理解”。同时,界面交互会变得更加智能,比如直接通过语音完成点餐和支付。

二、交互思维与用户体验设计思维的融合

在数字产品开发中,交互思维用户体验设计思维(UX Design Thinking)常常交织在一起,共同塑造出令人满意的产品体验。两者的融合不仅能提升产品的使用效率,还能激发用户的情感共鸣,最终实现用户目标与商业价值的双赢。

1. 交互思维与用户体验设计思维的核心概念

1)交互思维:聚焦人与界面的高效互动

交互思维主要关注用户与产品之间的操作过程,旨在通过直观的界面设计高效的交互方式,帮助用户轻松完成任务。其核心要素包括:

  • 清晰性: 让用户知道该怎么操作。
  • 反馈性: 用户的每一次操作都能获得及时的反馈。
  • 效率性: 操作路径最短、操作负担最小。

2)用户体验设计思维:以用户为中心的全局视角

用户体验设计思维是以用户需求用户感受为核心的一种方法论,涉及产品从设计到使用的整个生命周期。其重点在于:

  • 需求洞察: 通过调研理解用户真正的需求。
  • 情感连接: 不仅满足功能需求,还要让用户感到愉悦、舒适。
  • 全流程体验: 关注用户从进入产品到离开的每一个接触点。

简单类比:

交互思维像是一位专注于修路的工程师,确保路径笔直流畅;而用户体验设计思维更像是一位城市规划师,考虑如何让整个城市的交通系统高效且宜居。

2. 交互思维与用户体验设计思维的融合点

1)从细节到全局,满足用户操作与体验的双重需求

交互思维注重细节,优化每一个交互动作;而用户体验设计思维关注全局,确保整个使用流程的流畅性和一致性。两者结合能让用户在每个环节都感到舒适且顺畅。

案例:微信的语音消息功能

  • 交互思维: 长按录音键时,提供实时的录音状态提示;松手后,自动发送语音,减少用户额外的操作。
  • 用户体验思维: 通过语音功能,解决了用户在手忙或不方便打字时的沟通需求,增强场景适配性和易用性。

2)情感设计与功能设计的结合

交互思维解决“怎么用”的问题,用户体验设计思维则深入到“为什么用”和“用后感受如何”。情感设计是两者融合的一个关键点,既提升用户满意度,又增强产品粘性。

案例:支付宝的完成支付动画

  • 交互思维: 支付完成时的动态反馈,让用户明确支付已完成。
  • 用户体验思维: 支付后展示“支付成功”字样并配以动画,不仅提供信息,还让用户感到完成任务的愉悦。

3)用户需求与设计约束的平衡

交互思维帮助优化操作路径,而用户体验设计思维则考虑设计的合理性和场景适配性。在技术和资源的限制下,两者需要共同探索最佳方案。

案例:滴滴出行的路线规划与确认

  • 交互思维: 用户输入起点和终点后,系统快速规划出最佳路线,并提供简单确认按钮。
  • 用户体验思维: 考虑用户可能存在对价格敏感的需求,提供多种车型选择,同时展示每种选择的价格和预估时间。

4)数据驱动与用户感知的结合

数据分析是用户体验设计思维的重要部分,而交互思维则利用这些数据优化每一次用户操作。两者的结合能实现功能的个性化和体验的精准化。

案例:淘宝的商品推荐系统

  • 交互思维: 推荐商品以卡片形式展示,用户可以快速滑动浏览、添加购物车或直接购买。
  • 用户体验思维: 推荐逻辑基于用户的浏览和购买行为,推送最相关的商品,减少用户决策时间,提升购物体验。

3. 交互思维与用户体验设计思维的融合策略

  • 以用户为核心,构建全流程体验:两者的融合应始终围绕用户需求展开。在每一个用户接触点上,既要确保交互的流畅性,也要关注用户的情感感受。
  • 简化操作路径,优化信息传达:用户体验设计需要通过交互设计,减少用户完成任务的步骤,同时以视觉化、图形化的方式传递信息,让用户一目了然。
  • 动态优化,保持体验的一致性:基于数据分析,实时调整交互设计和体验设计,确保用户在产品生命周期内始终获得一致且优秀的体验。

4. 实践案例:抖音的交互与体验设计

抖音作为短视频平台,在交互与用户体验设计的结合上表现得尤为出色:

  • 交互思维: 用户只需上下滑动即可浏览视频,操作简单直观;同时每次滑动都有即时的视觉反馈,增强流畅感。
  • 用户体验思维: 推荐算法通过用户兴趣分析,持续推送个性化视频内容,提升用户粘性;视频结束时还配有引导互动的按钮(如点赞、评论),鼓励用户参与互动。

5. 未来展望:AI技术推动交互与用户体验的升级

随着AI的普及,交互思维与用户体验设计思维的融合将进入新的阶段:

  • 智能交互: 通过语音、手势等自然交互方式,进一步简化操作。
  • 个性化体验: AI根据用户行为预测需求,动态调整界面和推荐内容。
  • 情感化设计: AI捕捉用户情绪,提供更贴心的交互反馈和情感关怀。

案例展望:智能客服系统

未来的智能客服不仅能准确理解用户问题,还能根据情绪识别调整对话语气,同时提供即时解决方案与友好的互动体验。

三、交互思维与界面设计思维的融合

交互思维界面设计思维的融合,是现代产品设计中的核心命题。二者分别专注于用户操作路径和界面视觉呈现,彼此互补,共同打造出功能性与美观性兼具的产品体验。本文将从两者的概念、融合的价值以及实际案例中剖析如何实现这种深度结合。

1. 交互思维与界面设计思维的核心概念

1)交互思维:聚焦操作路径与用户效率

交互思维的核心在于优化用户操作的每一步,降低操作复杂度,提升使用效率。

其关注的主要问题包括:

  • 用户如何完成某项任务?
  • 操作的反馈是否清晰?
  • 整体路径是否流畅高效?

特点:逻辑性强,重在用户的操作行为,强调功能可达性和可用性。

2)界面设计思维:聚焦视觉呈现与情感体验

界面设计思维则以视觉表现为中心,关注界面的美感和信息传达的有效性。其关注点包括:

  • 信息是否清晰易读?
  • 视觉元素是否吸引人且统一?
  • 是否通过视觉传递了情感和品牌理念?

特点:更注重感性表达,强调用户的情感体验和对产品的第一印象。

简单类比:

交互思维像是设计产品的操作说明书,确保逻辑清晰易懂;而界面设计思维则为产品包装,让它看起来有吸引力且直观。

2. 交互思维与界面设计思维的融合价值

  • 兼顾功能性与美观性:用户既需要能够快速完成任务,也希望在使用过程中感到愉悦。交互思维和界面设计思维的结合,可以让产品在逻辑清晰的基础上,通过视觉传达提供更佳体验。
  • 提升用户认知效率:交互逻辑清晰但界面复杂,会增加用户认知成本;界面美观却缺乏交互合理性,会让操作变得困难。融合两者可以提升用户对信息的识别和理解效率。
  • 构建品牌感与用户粘性:交互设计让用户留下“好用”的印象,而界面设计则通过视觉元素让用户感到“好看”。这种结合不仅能满足短期功能需求,还能通过美学设计强化品牌认知,提升用户长期粘性。

3. 交互思维与界面设计思维的融合方式

1)信息分层与视觉引导的结合

交互思维: 根据用户操作逻辑,对信息进行层级划分,优先展示关键信息,隐藏次要内容。

界面设计思维: 通过颜色、字体大小、对比等视觉元素,强化信息的层级感和用户的关注点。

案例:支付宝首页的布局

交互层面: 核心功能(如转账、收付款)被放置在显眼的首屏区域,次要功能(如理财推荐)隐藏在二级页面。

界面层面: 不同模块的背景颜色和按钮样式有明显区分,用户一眼就能找到核心功能。

2)动效与反馈设计的结合

交互思维: 动效作为用户操作的反馈机制,提示操作结果或状态变化。

界面设计思维: 动效的风格和节奏与界面整体视觉风格保持一致,增强整体体验的连贯性。

案例:抖音的点赞动效

交互层面: 用户双击屏幕后,出现心形动画,明确提示“点赞成功”。

界面层面: 动效的色彩与抖音的品牌风格一致,给用户带来视觉和情感上的满足感。

3)视觉布局与操作路径的优化

交互思维: 确保核心操作路径最短,减少用户不必要的点击和跳转。

界面设计思维: 通过对页面布局的优化,让用户在操作路径中感到界面简洁且层次分明。

案例:京东购物车的设计

交互层面: 重要操作(如全选、去结算)被放置在用户触手可及的位置,减少多余步骤。

界面层面: 清晰的分组、直观的价格信息展示,让用户轻松理解购物车内容。

4)情感设计与功能优化的结合

交互思维: 通过优化功能满足用户需求,让操作过程简单高效。

界面设计思维: 在视觉设计中融入情感化元素,让用户感到愉悦或被关怀。

案例:网易云音乐的“听歌识曲”功能

交互层面: 用户只需点击一个按钮,系统即可快速识别歌曲,操作简单高效。

界面层面: 启动时有动态音波效果,识别成功后展示专辑封面和歌词,增强情感连接。

4. 交互思维与界面设计思维融合的关键原则

  • 优先满足用户需求:任何设计决策的出发点都应是用户需求,确保用户能够快速完成目标任务。
  • 强调一致性与连贯性:界面视觉风格和交互逻辑需要保持一致,避免用户因切换页面或操作而感到困惑。
  • 数据驱动优化设计:通过用户行为数据分析,发现交互逻辑和界面设计中的问题点,并不断优化。
  • 保持创新但不偏离预期:界面美观或交互新颖可以吸引用户,但要确保设计符合用户的心理模型和习惯,避免过度创新导致理解困难。

5. 实践案例:微信的朋友圈功能

微信的朋友圈功能是交互思维与界面设计思维结合的经典案例:

交互设计:

用户可以通过简单的下滑操作浏览动态,上滑时加载更多内容,操作自然流畅。

点赞和评论的交互逻辑简单,长按可以删除自己的评论,符合用户直觉。

界面设计:

动态展示以卡片形式分隔,保持视觉整洁。

文本和图片的排版统一,评论区域的缩进样式使信息层级清晰。

总结

交互思维与产品思维、体验思维、视觉设计思维的融合,是用户体验优化的基础。在实际设计中,我们既需要从全局出发,规划产品战略,也需要关注用户的每一步操作细节。

通过两者的互相补充,我们能设计出既符合用户需求,又实现商业价值的产品,更精准地满足用户需求,让产品不仅好用,还能打动人心。为用户和企业带来双赢的结果。

未来,随着技术的进步和用户需求的多样化,这种融合将持续推动数字产品体验的升级,成为提升产品竞争力的核心动力。

本文由 @ DesignLink 原创发布于人人都是产品经理。未经作者许可,禁止转载

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

交互思维与产品设计思维、体验设计思维、视觉设计思维的融合

杰睿

在前面的文章中,我们定义了交互思维和流程、目标,接下来我们分享交互设计思维与我们常说的产品思维、体验思维等的融合。

一、交互思维与产品设计思维的融合

在现代产品开发中,交互思维产品设计思维的融合已经成为提升用户体验的关键。两者看似独立,却可以在实际设计过程中形成互补,打造出更加契合用户需求的产品。本文将从两者的特点、融合的价值,以及实际应用场景中如何落地等角度出发,深入探讨它们的结合。

1. 交互思维与产品设计思维的区别

交互思维:聚焦人与界面的连接
交互思维的核心在于用户与产品的互动体验。它关注的是:

  • 效率:用户是否能快速找到功能并完成操作?
  • 体验:操作过程是否流畅、愉悦?
  • 反馈:用户的操作是否能即时获得明确反馈?

交互思维倾向于优化用户的操作路径,将复杂的技术逻辑隐藏在背后,让用户感受到简单和直观。

例子:在淘宝购物车中,“全选”功能按钮被设计在靠近商品列表的顶部,方便用户快速选中所有商品;而删除操作则以批量和单选两种方式提供,提升操作灵活性。

产品设计思维:关注用户价值与商业目标

产品设计思维则是更全局的,它关注的是产品能否满足用户需求并实现商业价值。核心问题包括:

  • 需求洞察:用户真正需要什么?
  • 功能取舍:哪些功能是核心,哪些功能是辅助?
  • 商业目标:如何在满足用户需求的同时,实现盈利或增长目标?

产品设计思维更偏向战略层面,要求对市场、用户和商业有全局的理解,并制定产品的发展方向。

例子:微信从“即时通讯”入手,以简单的聊天功能切入市场,但通过持续扩展支付、朋友圈、公众号等模块,构建了一个完善的生态系统。

2. 交互思维与产品设计思维的融合点

两种思维的结合,能够更好地兼顾用户体验和商业价值。以下是几种主要的融合方式:

1)以用户为中心,兼顾商业目标

交互思维: 设计流畅、直观的操作流程,提升用户体验。

产品设计思维: 在流畅体验的基础上,引导用户完成关键行为(如购买、注册等),实现商业目标。

案例:美团外卖的下单流程

  • 交互层面:在选餐、结算、支付的每一步,用户体验都清晰、顺滑,没有任何卡顿。
  • 产品设计层面:通过优惠券推送、推荐菜品等设计,提升订单金额和用户粘性。

2)用户需求与技术限制的平衡

交互思维: 关注用户直观感受,简化复杂操作,让用户专注于目标任务。

产品设计思维: 在技术和资源限制内,找到实现用户需求的最佳方案。

案例:滴滴出行的“一键叫车”功能

  • 交互层面:用户只需输入目的地,一键发单,系统会自动分配司机。
  • 产品层面:背后整合了定位技术、调度算法、司机匹配逻辑等复杂功能,但这些复杂性被完全隐藏,用户只需看到简洁的界面和高效的结果。

3)数据驱动与用户体验的结合

交互思维: 基于用户行为数据优化界面和流程,提升操作效率。

产品设计思维: 基于数据分析判断用户需求的优先级,调整产品功能布局。

案例:淘宝推荐算法与界面设计

淘宝的个性化推荐系统通过AI分析用户浏览和购买行为,推荐相关商品。交互设计确保推荐商品的展示方式简洁、直观,不打扰用户正常浏览,增强购物体验的同时提升成交转化率。

4)感性设计与理性分析的结合

交互思维: 关注情感体验,设计让用户愉悦的互动。

产品设计思维: 从用户行为和反馈中提炼需求,找到情感体验的落地点。

案例:支付宝的“年度账单”功能

  • 交互层面:炫酷的动效和图表展示,给用户带来仪式感和满足感。
  • 产品层面:通过账单展示增强用户的消费行为意识,并潜移默化地推广其理财功能。

3. 交互思维与产品设计思维融合的关键原则

  • 优先关注用户需求:两者融合的首要任务是以用户需求为核心,所有设计决策都应服务于用户的目标和体验。
  • 注重全局与细节的平衡:产品设计思维关注全局策略,而交互思维则深入到细节优化。两者需紧密配合,既要设计好产品的整体框架,也要关注用户的每一次点击和滑动。
  • 数据与创意并重:以数据为基础验证产品方向,以创意设计激发用户的情感共鸣,实现理性与感性的结合。

4. 未来展望:AI与交互/产品思维的深度融合

随着AI技术的深入发展,交互思维与产品设计思维的融合将进一步进化:

  • 智能推荐与场景化设计: AI可以通过用户数据精准预测需求,设计更贴合场景的互动。
  • 个性化界面: 产品的界面和交互将更加动态,根据用户习惯实时调整。
  • 自动化与人性化的平衡: 利用AI简化操作的同时,保留关键环节的人性化设计,让用户感到关怀与尊重。

案例展望:

在未来的外卖App中,AI不仅能推荐菜品,还能根据天气、饮食偏好提供动态优惠,让用户感到“被理解”。同时,界面交互会变得更加智能,比如直接通过语音完成点餐和支付。

二、交互思维与用户体验设计思维的融合

在数字产品开发中,交互思维用户体验设计思维(UX Design Thinking)常常交织在一起,共同塑造出令人满意的产品体验。两者的融合不仅能提升产品的使用效率,还能激发用户的情感共鸣,最终实现用户目标与商业价值的双赢。

1. 交互思维与用户体验设计思维的核心概念

1)交互思维:聚焦人与界面的高效互动

交互思维主要关注用户与产品之间的操作过程,旨在通过直观的界面设计高效的交互方式,帮助用户轻松完成任务。其核心要素包括:

  • 清晰性: 让用户知道该怎么操作。
  • 反馈性: 用户的每一次操作都能获得及时的反馈。
  • 效率性: 操作路径最短、操作负担最小。

2)用户体验设计思维:以用户为中心的全局视角

用户体验设计思维是以用户需求用户感受为核心的一种方法论,涉及产品从设计到使用的整个生命周期。其重点在于:

  • 需求洞察: 通过调研理解用户真正的需求。
  • 情感连接: 不仅满足功能需求,还要让用户感到愉悦、舒适。
  • 全流程体验: 关注用户从进入产品到离开的每一个接触点。

简单类比:

交互思维像是一位专注于修路的工程师,确保路径笔直流畅;而用户体验设计思维更像是一位城市规划师,考虑如何让整个城市的交通系统高效且宜居。

2. 交互思维与用户体验设计思维的融合点

1)从细节到全局,满足用户操作与体验的双重需求

交互思维注重细节,优化每一个交互动作;而用户体验设计思维关注全局,确保整个使用流程的流畅性和一致性。两者结合能让用户在每个环节都感到舒适且顺畅。

案例:微信的语音消息功能

  • 交互思维: 长按录音键时,提供实时的录音状态提示;松手后,自动发送语音,减少用户额外的操作。
  • 用户体验思维: 通过语音功能,解决了用户在手忙或不方便打字时的沟通需求,增强场景适配性和易用性。

2)情感设计与功能设计的结合

交互思维解决“怎么用”的问题,用户体验设计思维则深入到“为什么用”和“用后感受如何”。情感设计是两者融合的一个关键点,既提升用户满意度,又增强产品粘性。

案例:支付宝的完成支付动画

  • 交互思维: 支付完成时的动态反馈,让用户明确支付已完成。
  • 用户体验思维: 支付后展示“支付成功”字样并配以动画,不仅提供信息,还让用户感到完成任务的愉悦。

3)用户需求与设计约束的平衡

交互思维帮助优化操作路径,而用户体验设计思维则考虑设计的合理性和场景适配性。在技术和资源的限制下,两者需要共同探索最佳方案。

案例:滴滴出行的路线规划与确认

  • 交互思维: 用户输入起点和终点后,系统快速规划出最佳路线,并提供简单确认按钮。
  • 用户体验思维: 考虑用户可能存在对价格敏感的需求,提供多种车型选择,同时展示每种选择的价格和预估时间。

4)数据驱动与用户感知的结合

数据分析是用户体验设计思维的重要部分,而交互思维则利用这些数据优化每一次用户操作。两者的结合能实现功能的个性化和体验的精准化。

案例:淘宝的商品推荐系统

  • 交互思维: 推荐商品以卡片形式展示,用户可以快速滑动浏览、添加购物车或直接购买。
  • 用户体验思维: 推荐逻辑基于用户的浏览和购买行为,推送最相关的商品,减少用户决策时间,提升购物体验。

3. 交互思维与用户体验设计思维的融合策略

  • 以用户为核心,构建全流程体验:两者的融合应始终围绕用户需求展开。在每一个用户接触点上,既要确保交互的流畅性,也要关注用户的情感感受。
  • 简化操作路径,优化信息传达:用户体验设计需要通过交互设计,减少用户完成任务的步骤,同时以视觉化、图形化的方式传递信息,让用户一目了然。
  • 动态优化,保持体验的一致性:基于数据分析,实时调整交互设计和体验设计,确保用户在产品生命周期内始终获得一致且优秀的体验。

4. 实践案例:抖音的交互与体验设计

抖音作为短视频平台,在交互与用户体验设计的结合上表现得尤为出色:

  • 交互思维: 用户只需上下滑动即可浏览视频,操作简单直观;同时每次滑动都有即时的视觉反馈,增强流畅感。
  • 用户体验思维: 推荐算法通过用户兴趣分析,持续推送个性化视频内容,提升用户粘性;视频结束时还配有引导互动的按钮(如点赞、评论),鼓励用户参与互动。

5. 未来展望:AI技术推动交互与用户体验的升级

随着AI的普及,交互思维与用户体验设计思维的融合将进入新的阶段:

  • 智能交互: 通过语音、手势等自然交互方式,进一步简化操作。
  • 个性化体验: AI根据用户行为预测需求,动态调整界面和推荐内容。
  • 情感化设计: AI捕捉用户情绪,提供更贴心的交互反馈和情感关怀。

案例展望:智能客服系统

未来的智能客服不仅能准确理解用户问题,还能根据情绪识别调整对话语气,同时提供即时解决方案与友好的互动体验。

三、交互思维与界面设计思维的融合

交互思维界面设计思维的融合,是现代产品设计中的核心命题。二者分别专注于用户操作路径和界面视觉呈现,彼此互补,共同打造出功能性与美观性兼具的产品体验。本文将从两者的概念、融合的价值以及实际案例中剖析如何实现这种深度结合。

1. 交互思维与界面设计思维的核心概念

1)交互思维:聚焦操作路径与用户效率

交互思维的核心在于优化用户操作的每一步,降低操作复杂度,提升使用效率。

其关注的主要问题包括:

  • 用户如何完成某项任务?
  • 操作的反馈是否清晰?
  • 整体路径是否流畅高效?

特点:逻辑性强,重在用户的操作行为,强调功能可达性和可用性。

2)界面设计思维:聚焦视觉呈现与情感体验

界面设计思维则以视觉表现为中心,关注界面的美感和信息传达的有效性。其关注点包括:

  • 信息是否清晰易读?
  • 视觉元素是否吸引人且统一?
  • 是否通过视觉传递了情感和品牌理念?

特点:更注重感性表达,强调用户的情感体验和对产品的第一印象。

简单类比:

交互思维像是设计产品的操作说明书,确保逻辑清晰易懂;而界面设计思维则为产品包装,让它看起来有吸引力且直观。

2. 交互思维与界面设计思维的融合价值

  • 兼顾功能性与美观性:用户既需要能够快速完成任务,也希望在使用过程中感到愉悦。交互思维和界面设计思维的结合,可以让产品在逻辑清晰的基础上,通过视觉传达提供更佳体验。
  • 提升用户认知效率:交互逻辑清晰但界面复杂,会增加用户认知成本;界面美观却缺乏交互合理性,会让操作变得困难。融合两者可以提升用户对信息的识别和理解效率。
  • 构建品牌感与用户粘性:交互设计让用户留下“好用”的印象,而界面设计则通过视觉元素让用户感到“好看”。这种结合不仅能满足短期功能需求,还能通过美学设计强化品牌认知,提升用户长期粘性。

3. 交互思维与界面设计思维的融合方式

1)信息分层与视觉引导的结合

交互思维: 根据用户操作逻辑,对信息进行层级划分,优先展示关键信息,隐藏次要内容。

界面设计思维: 通过颜色、字体大小、对比等视觉元素,强化信息的层级感和用户的关注点。

案例:支付宝首页的布局

交互层面: 核心功能(如转账、收付款)被放置在显眼的首屏区域,次要功能(如理财推荐)隐藏在二级页面。

界面层面: 不同模块的背景颜色和按钮样式有明显区分,用户一眼就能找到核心功能。

2)动效与反馈设计的结合

交互思维: 动效作为用户操作的反馈机制,提示操作结果或状态变化。

界面设计思维: 动效的风格和节奏与界面整体视觉风格保持一致,增强整体体验的连贯性。

案例:抖音的点赞动效

交互层面: 用户双击屏幕后,出现心形动画,明确提示“点赞成功”。

界面层面: 动效的色彩与抖音的品牌风格一致,给用户带来视觉和情感上的满足感。

3)视觉布局与操作路径的优化

交互思维: 确保核心操作路径最短,减少用户不必要的点击和跳转。

界面设计思维: 通过对页面布局的优化,让用户在操作路径中感到界面简洁且层次分明。

案例:京东购物车的设计

交互层面: 重要操作(如全选、去结算)被放置在用户触手可及的位置,减少多余步骤。

界面层面: 清晰的分组、直观的价格信息展示,让用户轻松理解购物车内容。

4)情感设计与功能优化的结合

交互思维: 通过优化功能满足用户需求,让操作过程简单高效。

界面设计思维: 在视觉设计中融入情感化元素,让用户感到愉悦或被关怀。

案例:网易云音乐的“听歌识曲”功能

交互层面: 用户只需点击一个按钮,系统即可快速识别歌曲,操作简单高效。

界面层面: 启动时有动态音波效果,识别成功后展示专辑封面和歌词,增强情感连接。

4. 交互思维与界面设计思维融合的关键原则

  • 优先满足用户需求:任何设计决策的出发点都应是用户需求,确保用户能够快速完成目标任务。
  • 强调一致性与连贯性:界面视觉风格和交互逻辑需要保持一致,避免用户因切换页面或操作而感到困惑。
  • 数据驱动优化设计:通过用户行为数据分析,发现交互逻辑和界面设计中的问题点,并不断优化。
  • 保持创新但不偏离预期:界面美观或交互新颖可以吸引用户,但要确保设计符合用户的心理模型和习惯,避免过度创新导致理解困难。

5. 实践案例:微信的朋友圈功能

微信的朋友圈功能是交互思维与界面设计思维结合的经典案例:

交互设计:

用户可以通过简单的下滑操作浏览动态,上滑时加载更多内容,操作自然流畅。

点赞和评论的交互逻辑简单,长按可以删除自己的评论,符合用户直觉。

界面设计:

动态展示以卡片形式分隔,保持视觉整洁。

文本和图片的排版统一,评论区域的缩进样式使信息层级清晰。

总结

交互思维与产品思维、体验思维、视觉设计思维的融合,是用户体验优化的基础。在实际设计中,我们既需要从全局出发,规划产品战略,也需要关注用户的每一步操作细节。

通过两者的互相补充,我们能设计出既符合用户需求,又实现商业价值的产品,更精准地满足用户需求,让产品不仅好用,还能打动人心。为用户和企业带来双赢的结果。

未来,随着技术的进步和用户需求的多样化,这种融合将持续推动数字产品体验的升级,成为提升产品竞争力的核心动力。

本文由 @ DesignLink 原创发布于人人都是产品经理。未经作者许可,禁止转载

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

Tab Bar 动态设计提示

杰睿

前排提示:本文多Gif需耐心加载,且需要有一定Ae基础才能便于理解内容。

 

 

 

 



 

 

01 前言

你有没有注意过,App底部的图标是如何变成选中的?大多数产品是将静态图标替换(硬切过渡),来完成状态切换。

 

 

 


当我看完上百个动态后,找到了更有趣的方式...



02 App底部导航构成

通常由图标、文字/点线装饰、和底板卡片组成,(当然也有些产品只使用图标或文字),但设计师在进行动态设计时则是针对这3部分。

 

 

 

 



03 Tab Bar动态类型

  • 图标动态
  • 装饰元素动态
  • 底板卡片动态

动态效果由弱到强,视觉层级由低到高依次排序:图标动态 — 装饰元素动态 — 底板卡片动态。(根据本文案例效果来排序,但效果不同会有所差异)

 

 

图标动态․
我们知道图标风格可以简单的分为:线性、面性还有线面。在这基础上通过修改颜色或造型,又能延展出更多风格。

 

 

 

 

  • 在底部导航中,假如图标选中前后都是线性风格

最常用的是添加修剪路径(Ae的一种路径效果),你可以把它理解成托尼老师,可以通过调整百分百参数来控制线条生长。

 

 


但只是单色修剪,看起来很单调。我们可以在这个动画基础上再多复制几层,并分别加入品牌色,这样可以让视觉看起来更丰富。

 

 

 

 

也可以换一种方式,只调整不同颜色图标的位置属性,便能得到故障效果。

 

 


如果你觉得这些太浮夸,那么单个图标添加修剪路径,再配合位移、旋转等基础属性则是更好的选择。

 

 

 

 

  • 假如选中图标是面型风格

通用的方法是调整不透明度,相比于硬切更柔和,且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说,可能会显得有些普通。

 

 

 


我们可以考虑使用遮罩来制作动态,首先在图标周围绘制几个圆,再将图标外轮廓,作为圆的遮罩,来控制其显示范围,最后调整圆的缩放即可。

 

 


在一些特殊的时间,设计师们可能会技痒,而将图标绘制的更加丰富,来营造氛围。

 

 

 

对于这类图标,只需要参考它们的物理状态[下方解释],再遵循从下往上,从中心往四周扩张的原则来调整基础属性,便能制作出细节丰富的出场动画。

 

 

 

(物理状态:该物体在现实场景下的状态,上图奖杯真实世界状态通常是放置地面,所以出场方向是从下到上。但假如你的图标是锦旗,那么物理状态应该是挂在墙上,所有出场方向是从上到下)


当然如果去掉高光和投影,在制作一些动态时会更方便。
例如:复制一颗星,将其初始位置设定为一个奖杯的距离,并记录关键帧,然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形,这样便能营造出3d旋转的错觉。

 

 

 

 

  • 假如选中图标是线面风格

对于结构复杂的图标,可以提前分层。其中线条依旧可以使用修剪路径(在Tab bar中,不同图标修剪路径的起始点方向通常相同,以便保持一致性),而填充只需要调整元素缩放,并借助蒙版限制其显示范围就行。

 

 



装饰元素动态․
如果你觉得前面这些方案不够新颖,那我们可以对装饰元素下手。(当然这类方案很少见,原因在于商业价值不足,实现成本高,所以这里也只是提供一些创意练习思路)
在一些年轻化产品中,如果图标含义很容易理解,那么设计师可能会用线或点来替代文字,让整体更简洁。
国外设计师Tubik,通过让点元素在移动时呈现心电图样式,让人眼前一亮。

 

 

 


通过动态效果,甚至能体现出产品行业属性。

 

 

  • 基于这种思路,我们同样让装饰元素放在下方

尝试修改轨迹样式,然后为元素不透明度和位置添加动画,你能猜出这是什么类型的产品吗?

 

 


又或者再夸张些,将轨迹设计成电路图。其中线条添加修剪路径,再借助Ae路径跟踪方法,使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围,这个方案看起来适合科技或游戏类产品。

 

 

 

 

  • 装饰元素还可以放在上方

通过调整元素路径来改变其造型,模拟液体滴落,再通过蒙版缩放,让选中状态下的图标出现。

 

 

 

 

  • 装饰元素还可以放在中间

假如你的图标设计的足够巧妙,我们可以提前绘制好关键笔画的运动轨迹,便能通过修剪这条轨迹来完成笔画的移动。

 

 




底板卡片动态․
这类动态少见的原因在于其动态效果面积大,视觉层级高,容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。

 

  • 当选中图标时,让卡片凸起

在Ae中要制造这样的效果,最先想到的可能是调整卡片路径,但这样的方式在制作弹性时非常麻烦。

 

 

 


我们有更简单的方法,先多画出一个圆,然后与卡片路径合并。
为了让边缘圆滑,整体添加高斯模糊简单阻塞,分别加大参数,便能让边缘圆滑。(这种方式有个缺点:会收缩原有卡片宽高。所以添加效果后,需要借助参考线再次调整卡片大小)

 

 

 

 

完成圆滑处理后,修改其他元素的基础属性即可。

 

 

目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰,其弱化了弹性次数。

 

 

  • 除了凸起,还可以凹陷

这个效果灵感来源于Dribbble设计师(EuroART93),我们只需要将凸起案例中,圆与底板卡片的布尔运算模式改为相减就行,其他元素同样调整基础属性。

 

 

此方案目前还没有在其他产品中看过,究其原因还是效果太过抢眼。

 

 

看了这么多,其实不难发现。同一个图标,只需要改变不同属性或元素的运动方式,便能带来不一样的感受。

 

 

 

 

或许创意的产生,并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。
正是它们之间这种奇妙的融合,给我们带来了新鲜感,或许这就是我们要的创意。

 

 

 



最后再说两句:

每个产品都有自己的调性和目标用户,动态效果也有强有弱。好的动态应该是能与其进行匹配,而不是根据某个产品得出一个绝对的答案。
本文演示了不同类型图标用什么动态,并不代表只能这样用。动态效果类型远远不止这些,而以上只是最常见的动态属性组合方式,所以请不要局限你的想法。

 



作者:幺零三
链接:https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

一个小弹窗引发的28个建议

涛涛

这套高颜值的质感弹窗设计方法,看了一定学会!

响应式布局-创造无缝的跨平台用户体验

杰睿

响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
 
Current Time 0:00
/
Duration Time 0:07
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验


作者:72度灰
链接:https://www.zcool.com.cn/article/ZMTYyMzcwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

在你的设计中营造“愉悦感”

杰睿

引言:
当我们谈及用户体验的时候,“
愉悦
”这个词是最常听到的一个形容词。让用户爱上一个产品,“愉悦”的用户体验就是核心要素,这也是设计力图达到的效果。
在一个产品的体验中,使用户在情感上感到愉悦的时间节点是不固定的(large or small),合理的设计能够满足用户在情感上的需求。
恰到好处的成就感和让人感到惊喜的细节能够唤起人们内心的幸福。
我们总会对那些体现着愉悦性的设计细节赞赏有加
我们总会对那些体现着愉悦性的设计细节赞赏有加
 
分享目录:
一、深度愉悦与表面愉悦
二、了解 Kano 模型
三、只有满足基本期望才能让用户产生愉悦情感
四、时机
五、负面效应
六、总结
 
一、深度愉悦与表面愉悦
愉悦分类
愉悦分类
 
从根本上来说,创造卓越的用户体验是获得深度愉悦的先决条件。
而现在仅仅聚焦于产品功能、实用性和特色已经远远不够了,我们要在这之上考虑更多东西。为了能够在市场上实现差异化并进行自我提升来超越竞争对手,我们需要专注于提升用户满足感、兴奋感与参与感。这事先就应该被考虑进设计过程中,而不应该搁置到过程结束之后再考虑。
这对于整个体验是非常特别的部分,就像招牌菜的秘方,故事的反转。
  1.  
    深度愉悦是你创造终身客户价值的方式。
  2.  
    深度愉悦是你让你的产品融入用户日常生活的方式。
  3.  
    深度愉悦是你与客户建立心理安全的方式。
 
在你的设计中营造“愉悦感”
 
 
二、了解 Kano 模型
东京理工大学狩野纪昭(Noriaki Kano)教授于1979年发表了《质量的保健因素和激励因素》,并与1984年1月18日正式发表《魅力质量与必备质量》,标志着KANO模式的确立。
因为在互联网圈内贴合度很高,可以对需求进行分类、优先排序。也就变成了产品经理的方法论之一。
五大需求类型
五大需求类型
 
1、基本型需求
基本型需求也称为必备性需求、理所当然需求,是用户对企业提供的产品或服务因素的基本要求。它是用户认为产品“必须有”的属性或功能,当基本性需求满足时,用户不一定会很满意;但如果没有被满足,用户就会很不满意。
对于这类需求,企业的做法就是注重不要在这方面失分,不断地调查和了解用户需求,并通过合适的方法在产品中体现这些要求。
2、期望型需求
期望型需求也称为意愿型需求。是指用户的满意状况与需求程度成比例关系的需求,即这类需求做的越好,用户的满意度就会越高。虽然期望型需求没有基本型需求那样苛刻,要求提供的产品或服务比较优秀,在互联网圈内,也成为“痒点”,即体现企业竞争能力的表现。企业能通过这类需求来提升产品的独特性与质量,超过竞争对手。
3、魅力型需求
魅力型需求也称兴奋型需求,是指提供给用户的完全出乎意料的产品功能或服务,使用户产生惊喜感的需求。虽然没有这个功能不受影响,但是提供之后会让用户非常的兴奋和满意。与期望型需求区别之处在于,魅力型需求是指数型的曲线,而期望型需求是线性曲线。
4、无差异型需求
无差异型需求是指就是你有没有这个功能用户都不太在意,对用户没有影响。
5、魅力型需求
反向型需求又称逆向型需求,指引起强烈不满的、导致满意度降低的需求功能。提供了反向型需求反而会使用户满意度降低。
KANO模型-四象限图
KANO模型-四象限图
 
Kano发现,如果你不满足基本需求,客户就不会对体验和性能感到满意,而愉悦感则毫无意义。他还指出,随着时间的推移和曝光度的提高,愉悦感可以成为性能需求,而性能需求可以成为基本需求。 想想 Twitter 的下拉刷新模式,或者 Slack 或 Discord 中的斜线命令。这些功能已经从令人兴奋的功能迅速转变为基础的UI模式,当它们不存在(或无法按预期工作)时,会让人不满意。
 
 
三、只有满足基本期望才能让用户产生愉悦情感
我们把 “令人沮丧”和 “令人愉悦”作为一个维度的两端来评估一个设计。而这个维度的中点,意味着设计既不令人感到沮丧但也不令人感到愉悦,它还好,它可以正常运行,它能用,它实用,它并没有令人难忘或者脱颖而出。它提供的是表现一般 平平无奇的用户体验。
把一个设计从令人沮丧移动到维度的中点, 意味着我们需要了解我们的用户并达到他们的预期和需求。要去掉任何能够让用户产生“难用”和“困惑”的因素,解决导致处理工作任务变慢。
Aaron Walter-用户需求的5个等级
Aaron Walter-用户需求的5个等级
 
1、解决用户的失败操作
我们经常会遇到类似的问题,项目里的每一个人都急于想设计出“理想”的视觉界面。然而,想要达到所谓的“完美”效果,往往痴人说梦。我们都知道,人与人之间存在极大的差异,即使我们的产品功能再完美,用户在使用产品的时候,哪怕只是遇到一个小小的障碍或断层,就会对产品的印象大打折扣。因此,我们应该将重点关注在解决用户的痛点,这一点很重要,可以让我们避免陷入“理想”设计和“完美”产品的漩涡之中,可以将影响面降到最低。
 
2.简化用户的复杂操作
过度密集是设计的最大阻碍。过多的元素会让用户感受到困扰,极大破坏用户体验。过度密集的设计涉及到界面中元素的数量,也涉及到视觉特征的多样性。过多的颜色和形状组合肯定会产生混乱。坚持美学的连贯、整体表达,形成让用户易于理解的设计语言。
互联网 30 年,桌面和移动界面的解决方案都已经标准化。符合用户习惯,就能够加速产品的学习周期。例如,用户习惯右上角看到个人资料或登录按钮。移动端搜索栏应该在列表的顶部。
这个规则不仅适用于单个界面元素以及元素的位置,也适用于整个页面或功能。如果忽略这些用户行为模式,出乎寻常的设计可能会延长用户的学习曲线,通常也会导致失败。
所有界面元素都可以根据用户的优先级来定位。考虑界面元素在用户执行任务时的作用,通过强调不同视觉的手法,我们可以在每一屏中确定界面元素的优先级。字体、颜色、形状、图标。这能够帮助用户遵循流程和界面逻辑行动。适当的将界面分区,这能够帮助用户划分关键场景。
当用户使用产品时,就会在脑海中构建一张心智地图。能够及时的提示用户操作某些特定的场景,提示寻找某些信息和服务等等。
 
四、时机
引起用户愉悦的体验一般都会由一个特殊场景或者特定的客户触点触发,比如等待时间、消费数据、升级过程等等。然而没有一种通用触发情绪手段适用于所有情况。我们所在的市场竞争激烈,我们要寻找新的方式使自己在一众竞争者中脱颖而出,同时为用户增加价值是我们一直努力的目标。我们都在为同一个目标而努力,即创造有意义的设计和用户体验来和产品建立深层联系。
让用户看到意料之外的结果能让沮丧的情绪转化成愉悦
有许多种方法和途径可以激活产品的“情绪愉悦”。而 第一步通常都是花费时间去真正了解用户痛点——找出什么对用户来讲很重要,并找机会填补这些空缺。
1、品牌个性
在众多不同的行业中,你需要一个能让你的产品在众多同类产品里 脱颖而出的品牌命名。
2、微互动
关注用户的情绪在 UI 交互中有非常重要的作用。我们都知道产品中的 微动画 有多么重要,我们可以利用这些动画来回应人们在屏幕前做出的反应。
在你的设计中营造“愉悦感”
 
 
在开发产品时,把 UI 界面体验变得 更感性,让用户觉得屏幕另一端运行程序的是 真实的人类 而不是冰冷的计算机。在用户完成一项个人目标时给予他们 奖励。例如,即便用户的收件箱没有新增邮件时,可以利用动画让用户在体验上有更多的 参与感 。
触感反馈就能体现应用软件在用户进行界面操作时给予了积极反馈。这样的举动会让页面加载时间变得更加有趣,不那么难以忍受。
Twitter 为用户改进了下滑刷新界面。就是这样简单而有效的产品反馈,让其他数千款 app 都不约而同地使用了同种交互语言,因为这让数据刷新体验更加流畅。
在你的设计中营造“愉悦感”
 
 
3、在用户没有抱有期待时提供帮助
让用户感到愉悦的瞬间并不需要高度可视化元素或动画。我们的目的是寻找这样一个机会,当他们没有意识到或者没有期待被帮助时,给予用户帮助。在这个案例中,正要输入繁杂冗长的 Wi-fi 密码时,界面跳出了“分享密码”的弹窗。这一举动使用户分享私密信息变得更安全,更简单,同时用户体验变得更轻松。
苹果:分享Wi-Fi密码
苹果:分享Wi-Fi密码
 
4、实时追踪反馈
实时追踪反馈是另一个行业变革技术应用。
Uber 的司机分享应用让用户在等车的同时,了解更多当前情景里的实时信息,例如你的司机是谁、接车车型、该司机的乘客评价等。有了这个功能,用户会认为自己有被很好的关心到。据我们了解,很多公司也在他们的应用产品上使用了这一策略和服务。现在你可以在手机上看到你订的披萨外卖已经走到哪里,大概什么时候会被送到。
在你的设计中营造“愉悦感”
 
 
5、自动填充
验证码发送后可以选择自动填入,不需要手动输入操作。
这是另外一个用户无需输入完整信息就可以达到目的,从而让用户的生活变得更加轻松的设计。
在你的设计中营造“愉悦感”
 
 
五、采取行动
设计能够愉悦用户体验的关键是什么呢?
我该如何在我的产品或者服务上实现这些呢?
愉悦用户情绪需要为体验中的某一关键时刻而设计,但是功能性又是放在第一位的。在设计过程中,你需要仔细并系统地处理用户情绪,而不是事后才考虑到这一点。
 
1、做好调研,从情绪板开始入手:
从外部和内部寻找灵感,不要局限于类似的产品,灵感可以以任何形式出现。
2、确定你所定义产品的使用案例:
找出你的产品能够让人感到意料之外惊喜的时刻。在建立的这种情感联系里,你的产品可以在哪些方面获利?
3、专注于一个目标,细节很重要:
让自己专注在一件事上,或者一个时刻。如果你同时想实现很多事,结果可能就是和愉悦用户背道而驰,还可能导致一屏信息过载,并且会让你的用户处于认知超载的状态。
你可以从以下 3 个层次入手对用户的情感做出反馈:
  •  
    本能层
    (外观,视觉语言,基调)
  •  
    行为层
    (如何运作,表现,回应)
  •  
    反思层
    (如何解释和理解)
4、传达意义即输出结果:
为情绪愉悦而设计的意义就是为了达成某一目的。你应该为了意义(达成目的)而做设计,二者应该是因果关系而非包含关系。这里的意义比情感更有力量,超越了本身的价值。
5、设计和演示:
和产品设计的其他过程一样,我们应该不停的测试、设计、测试、设计。让“愉悦情绪驱动的设计”变得有意义,就是一个不断迭代的过程,需要持续不断的实验和改进。
 
六、负面效应
当然,具有愉悦性的事物在某些情况下同样会带来负面效应。某些笑话可能冒犯到他人,温馨的广告可能误导部分观众,即便是可爱的音效也会因为运用不当而使人抓狂。
在UX领域,我们总会对那些体现着愉悦性的设计细节赞赏有加;而另一方面,对其负面效应的了解也将有助于我们更好、更全面的掌握这一设计原则,避开陷阱。
1、增加认知负荷与交互成本
一旦运用不当,意在愉悦用户的界面元素反而可能破坏可用性,增加界面的认知负荷及交互成本。
在你的设计中营造“愉悦感”
 
 
这是一个第一次见会被惊艳到,但实际上用起来可能没这么好的配色网站,界面排版视觉上非常舒服。
当随机换颜色的时候,背景会适配颜色变化,且有一个颜色渐变过度的效果。网站有个“颜色动态”的开关,点开后颜色数据旋转,由于中心旋转的缘故,使用时会产生眩晕、不适的感受。
过度追求视效及愉悦性,置可用性而不顾,穷极所能在每一个元素当中体现着“设计感”,最终结果便是信息难以获取,操作难以进行。
视觉表现层面的愉悦性可以为产品赋予生命与性格,使品牌形象更加生动饱满。然而一旦处理不当,愉悦性反而会破坏产品最基本的可用性,阻碍用户获取信息、完成任务。
2、审美疲劳
“惊喜”是构建愉悦体验的关键要素。新鲜的、不期而遇的美好事物总会让人感到开心。
通常情况下,愉悦感都会随着时间而渐渐淡化,你能想到的最为精彩出奇的细节表现也只会在最初的一段时间内给人以新鲜感,而维系的方式似乎只有在情感化的方向上一遍又一遍的重设计。
3、愉悦的定义是主观的
见过那些试图融入幽默元素的出错页面?本质上讲,这种做法相当于在很坏的状况下通过开玩笑来缓解尴尬。通常,在人们试图获取信息、保存数据或完成任务却遭遇意外状况而导致失败的时候,任何带有“搞笑”味道的反馈信息都会显得缺乏同情心,用户很可能感到被冒犯,甚至因此被激怒。
此外,“愉悦”的定义也因人而异。在一部分人看来十分新鲜有趣的东西,对另一部分人可能会很糟。普遍适用的愉悦标准几乎是不存在的,“情感化”是一个复杂地带,良好的设计初衷未必如愿带来正面的结果。
令人不适的缺省设计
令人不适的缺省设计
 
4、安全的愉悦性策略
对愉悦性的负面效应了解后,我们知道,挑战和风险确实存在,但这并不意味着你需要彻底规避这个概念,关键在于识别一些适合承载愉悦体验的时间点。
在那些用户不常见到的界面当中尝试愉悦性元素是最为安全的
譬如:
  •  
    app启动页面
  •  
    帐号设置成功页面
  •  
    新功能游历
  •  
    用户初次完成某个重要操作之后的反馈页面
  •  
    空状态页面
这些状态通常只会被体验一次,情境都以正面情绪为主,无需担心反复无趣或是恼人一类的问题。
所以我们时常在新手引导流程当中看到一些有意思的表现形式,例如改版后的Google Sites。这类产品环境当中的多数页面都很简单直白,高度聚焦于任务,没有多余的元素干扰流程,只有在这些“一次性”的环节当中给人以惊喜,通过引发情感共鸣来促进信息的传递。
在你的设计中营造“愉悦感”
 
 
当下对于愉悦性的运用方式大家都在摸索,因为这是一个很主观的概念,任何绝对化的规则都难以成立。 对于如此抽象和感性的概念,恐怕每个人心中都会有着不同的定义。
 
七、总结
永远不要低估“愉悦”在优化用户体验方面能够发挥的作用。我们应该对它持有积极的态度并找到机会让“用户情感愉悦”在我们的产品里发挥作用。同时我们要牢记,制造“愉悦”情绪的根本是,我们要为用户提供从未期待过的奖励,而不是仅仅是为用户开发一个产品。
我们的最终目标一直都是功能性、稳定性、实用性,而追求“愉悦”并不应该成为限制这些目标的枷锁。每一个要实现的目标都应该能够相互衔接融洽互不干扰。我们需要移除科技术语,遵循自然语言,在产品里添加“有趣”“幽默”的特性,最重要的一点:你的设计和产品需要别有用心。
不要一味的注重产品的功能,同时还要考虑用户的情绪。我们需要为用户提供一个有趣味性的使用体验。
在你的设计中营造“愉悦感”
 
 
 


作者:拒不背锅女士
链接:https://www.zcool.com.cn/article/ZMTY0NzExNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这些提升用户体验的小技巧,你知道吗?

杰睿

为了帮助大家更轻松地提升设计水平,这里整理了一些简单实用的小贴士。希望这些小技巧不仅能够助力您优化当前的设计项目,还能在未来的设计之旅中为您提供参考价值。
 
 
 
21.将不相关的字段隐藏
在设计表单时,建议不要一次性展示所有信息和步骤,而是在用户真正需要的时候再呈现,这样可以更好地管理复杂性。如果用户一打开表单就看到大量的内容,可能会感到压力很大,甚至会放弃填写。
因此,我们可以隐藏那些不相关的信息,去掉不必要的字段。通过合理地简化表单内容,可以减轻用户的心理负担,确保只有在他们需要的时候才显示必要的信息,从而减少他们在填写其他表单项时的干扰。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
22.统一风格的图片更有高级感
在选择图片时,我们的目标是实用性和一致性,而不是过分追求华丽的效果。如果只是一味地追求美观,可能会导致图片风格各异,从而破坏整体的视觉统一性,影响用户的体验。因此,设计师在挑选图片时,需要对风格进行精确的把控,或者在后期进行适当的处理,以确保所有图片都能呈现出一致的视觉效果。
图片的风格对整个App的整体感觉和用户的情绪有着重要的影响。风格一致的图片不仅能带来愉悦的视觉享受,还能激发美好的联想。我们可以从以下几个方面来控制图片的风格:
● 类型:如位图、插画或形状;
● 视角:如平视、仰视或俯视;
● 背景:如简约、复杂或纯色;
● 呈现区域:如堆积、局部或特写;
● 构图:如中心、水平线、对称或对角线。
此外,还有很多其他抽象的方式来调整图片,虽然这些方法不是绝对的,但我们可以通过多角度的尝试,力求让每一张图片都达到最佳的视觉效果。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
23.在中性色中融入色相
在上一期的内容中,我们探讨了如何设置中性色。当饱和度(S值)为0时,通过调整亮度(B值)4到5个等级,可以很好地表达信息的层次结构。这种方法虽然有助于保证设计不出错,并能满足最基本的需求,但在追求更高层次创意的设计项目中,可能会显得有些单一。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
在更为成熟和全面的产品中,设计师们往往不会仅仅依靠纯灰色作为唯一的中性色调。通常会在基础的灰色调中加入一些微妙的色相变化。这样做不仅可以让整体视觉效果更加丰富,而且还能有效避免画面因过于依赖灰色而显得僵硬或缺乏活力。
常用的方法是在中性色中融入少量蓝色调。蓝色能够传递出一种平静、稳重的感觉,给界面带来柔和而不突兀的变化,同时保持良好的清晰度。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
需要注意的是,在加入新色相时,我们的目标是创造颜色间的细微差别,几乎达到难以察觉的程度,而不是让这些差异成为用户注意力的焦点,这样才更有利于提升界面的整体质感。因此,对于较浅的颜色来说,所添加的色相强度应当控制得很低,反之,颜色越深则添加的色相越多,类似下面的这种曲线:
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
24.第三方图标风格应保持一致
大多数应用程序都支持通过第三方平台登录,这种方式可以显著降低用户在登录注册时所需花费的时间成本。这种便捷的登录方式一般在登录页面的底部提供多个(如微信、QQ、微博等)图标入口。然而,很多设计师会忽略一个细节,就是直接将第三方平台提供的官方图标,简单地调整大小使之统一,然后整齐排列在一起,并没有进一步针对整体视觉效果进行专门的设计优化。
对于追求高品质用户体验的产品来说,任何不起眼的小细节都不应该被忽略。在处理第三方图标时,应以自己产品的图标风格为基础,对所使用的第三方登录图标进行重新设计或适当调整。这不仅能够确保整个界面风格的一致性,提升美观度,还能增强品牌识别度,让用户在整个使用过程中感受到更加连贯且专业的体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
25.可视化密码比输入两次更直观
为了提升您的使用体验,并确保密码的安全性,可以让用户在输入密码时自由选择显示或隐藏密码内容。这种方式替代了传统的双次输入验证方式,尤其有助于创建有效的密码。用户可以直接看到自己设置的密码是否满足安全标准,同时也减少了因重复输入而造成的错误。
另外,系统应当明确地展示密码的具体要求,并为用户提供即时反馈,帮助他们了解如何构建更安全的密码。例如,在用户开始输入密码时,界面下方可以实时更新密码强度(如弱、中等、强)及已满足的安全条件(比如长度、包含数字/符号/大小写字母等)。这样做不仅能让用户更好地理解什么是好的密码实践,还能激励他们遵循这些建议,从而提高账号的整体安全性。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
26.使用合适的表单录入控件
在设计表单时,选择合适的输入控件可以帮助用户更好地理解每个字段需要填写的信息量。
  •  
    能通过选择来完成的操作就不要让用户手动输入,这样不仅方便了用户操作,也减少了错误的发生。
  •  
    对于那些内容较短的输入项,比如姓名或电话号码,可使用单行输入框,前提是确保让所有输入的内容都能清晰可见。
  •  
    像评论、反馈或这种可能包含较多文字的地方,应使用多行文本框。这样用户能更轻松地查看和编辑文本内容。同时,我们还可以通过一些视觉提示,例如滚动浏览、输入框右下角的高度调整等,这样更便于用户操作。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
27.提供解决方案助力转化
在UI设计过程中,当用户尝试进行某项操作时,因未满足特定条件或出现操作失误而无法继续,这可能会对转化率产生负面影响。为了改善这种情况,在设计时可以采取更加贴心的做法:明确告知用户为何无法进入下一步,并提供具体的解决建议。这样做对于提升转化率非常有帮助。
比如,在用户打算用账户余额购买服务的情况下,如果仅仅提示“余额不足”,用户可能会感到困惑,甚至需要多次尝试不同的路径来完成充值和购买过程。一个更佳的解决方案是直接向用户展示当前账户余额,并提供快速充值链接。这样一来,用户可以直接通过这个链接轻松完成充值,随后顺利购买所需服务。这样的设计不仅简化了操作流程,也大大提升了用户体验的流畅度。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
28.标签栏的高级感
大多数标签栏设计都倾向于简洁风格,主要通过选中和未选中的状态来区分不同的选项。状态的变化依靠文字颜色的变换或在选中的标签下方添加一个小横条来实现。尽管这样的设计看起来简单,但要想让它脱颖而出却并不容易。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
很多产品从其品牌的独特性中汲取灵感,利用品牌作为用户熟悉且喜爱的形象作为设计的基础,这样做不仅能够建立一种视觉上的连贯性,让用户感受到内外一致的美好体验,同时也能加深他们对品牌形象的记忆。除此之外,加入一些有趣味性的图案也是一个不错的选择,它们能以独特的方式吸引用户的注意力,为用户提供更加愉悦的视觉感受。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
29.合理的规范输入格式
在表单设计过程中,虽然大多数输入项可以采用通用的处理方式,无需特别干预,但一些特殊类型的表单项,设定合理的格式约束显得尤为重要。这样做不仅有助于系统更准确地收集数据,还能有效减少用户填写错误的可能性,提升整体数据质量。
对于某些特定信息如地址、手机号码以及银行卡号等,可通过技术手段自动为这些长串文字自动添加分隔符,如空格或短横线,这样做能够使信息更加直观易读,便于用户检查自己所填内容是否正确无误;同时,也使得后续的数据处理工作变得更加简单高效。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
30.页面加载中,提前展示布局
在众多产品中,用户界面的数据或内容在完全加载之前通常仅显示空白页面。这种处理方式可能导致用户困惑,因为他们无法确定当前状态是正在加载、已加载完毕但无内容可展示,还是遇到了错误。
实际上,用户界面的布局往往是相对固定的。因此,在实际内容加载完成前,提前向用户展示界面的基本结构是一种更为友好的设计策略。因为在等待数据加载的过程中,用户能够预览即将呈现的内容框架,从而减少了不确定性带来的焦虑感。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
此外,这一做法符合人机交互设计中的一个重要原则——系统状态可见性。根据该原则,产品应当清晰地告知用户当前发生了什么,并提供足够的反馈信息以帮助其理解系统的现状及后续步骤。通过预先展示UI布局,应用程序不仅表明了正在处理请求的状态,还为用户构建了一个对未来操作环境的心理预期模型,进而提升了用户体验的整体满意度与效率。
 
 
31.表单页内容过长,适当进行分页
在对表单内容进行了精简处理后,依然显得很长,应该避免一次性向用户展示所有信息。过长的表单不仅会增加用户的填写时间,还可能引发用户的困惑与不满情绪,最终导致放弃填写。为此,建议根据逻辑关系及属性将表单项合理地分配到多个页面中,且清晰展示整个流程进度情况。这样可以使用户感受到填写过程更加简便流畅,同时也能帮助他们更好地理解整个表单结构,从而专注于当前的任务。
值得注意的是,在采用分页策略时,需谨慎平衡分页的数量与步骤的复杂度。过度细分会无谓地增加操作环节,反而可能引起用户的反感,进而产生新的问题。因此,在规划分页方案时,应当综合考虑简洁性和易用性原则,确保最终方案既能有效简化任务又能保持良好的用户体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
32.有时候,背景色比分割线更显高级感
在过去,设计师们常常使用线条来清晰地划分不同组件之间的界限。然而,在当今流行的扁平化设计理念中,这样的做法有时会让页面显得有些拥挤,并且缺乏层次感。一个非常有效的替代方案是为相邻元素选择仅有细微差异的背景色来进行区分。这种方式不仅能保持界面的整体美观与简洁,还能够让用户更加自然流畅地识别出不同的信息区域。这样在确保了内容的可读性和易用性的同时,也能为用户提供更加舒适的视觉体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
33.适当加大触控热区
你是否有过这样的体验:在使用某个应用程序或网站时,对着界面上的按钮一顿乱点,却发现要么完全没有反应,要么系统反馈特别慢。你可能会怀疑是手机卡顿了或者网络连接不稳定,感觉非常糟糕。其实,很多时候这种情况并不是因为设备性能差或网络问题,而是用户界面设计上存在一些小缺陷。
设计师们都知道,在进行UI设计时面临着一个挑战:如何在美观性和实用性之间找到最佳平衡点?特别是对于像按钮、超链接以及单选/复选框这样的交互元素来说,它们的实际显示大小往往很难达到人类手指接触区域的理想尺寸。如果这些控件设计得太小,用户就很难准确点击到目标位置,导致操作效率降低甚至失败。
从视觉效果考虑,当某些功能性组件需要保持较小外观时,我们可以确保可触发区域足够大。这样即使用户视线不那么集中,也能轻松完成任务,避免因误触或其他原因造成的不便。值得注意的是,无论该元素本身看起来有多小,它所关联的触控热区都不应低于标准值。例如,在iOS平台上,推荐的最小可点击区域大小为44x44 pt;而Android操作系统中,则建议至少保持48x48 pt。这样保持了界面的美观性,还能大大提升用户的操作体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
34.为图片添加色彩层营造氛围感
在图片上添加色彩层或将其转换为单一色调,可以创造出类似黑白照片的效果,这样能显著增强图像中物体或人物的形态感。通过简化色彩,观众的注意力更容易集中在图像的核心内容上,从而提升了视觉主体的表现力。
此外,选择不同的单色调不仅能突出主题,还能有效营造特定的情感氛围。比如,蓝色调可能会给人带来一种宁静、平和的感觉;而暖色调如红色或橙色,则可能激发温暖、活力甚至是紧张的情绪。通过精心挑选和运用色彩,我们可以极大地丰富视觉语言,提高图像传递信息的能力。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
35.使用前端验证,提升信息的有效性
前端验证是一种在用户输入信息时即时检查数据有效性的方法,无需将数据发送到服务器。这项技术基于预先设定的规则,在用户离开输入框时自动启动,能够快速检测诸如格式、长度或类型是否正确等问题。这样做的好处在于,它能够在用户完成整个表单之前就发现并指出潜在错误,从而提升了用户体验和数据准确性,避免了等到最后提交才发现问题所带来的不便。
在设置前端验证时,请记得不要过早开始校验过程,以免造成持续不断的错误提示,给用户带来困扰。最佳实践是在用户完全填写完当前项之后再进行验证。这样做既能保证及时给出反馈,又能避免因频繁出现提示而打断用户的操作流程,让整个体验更加顺畅愉快。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
结语
创造既美观又高效且易于使用的UI界面确实需要投入不少时间和精力,还可能要经历多次的迭代与改进。不过,正是通过这一系列细致入微的调整过程,我们才能打磨出一款让客户、用户以及我们自己都感到满意的优秀作品。



作者:大漠飞鹰CYSJ
链接:https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 

 

软件产品中,如何减少页面跳转?

涛涛

这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给用户,需要我们重新对信息进行组织分类,使信息能更高效有序地被用户认知。在进行信息设计的时候,我们会经常遇到“扁平化设计”这个词,在我的理解看来,扁平化设计可以理解为:“精简交互步骤,用户用最少的步骤就完成任务”。层级太多了用户就会看不懂;即使看得懂,层级多了用起来也麻烦,因此:手机上能不跳转就不跳转。那我们就来看看有没有办法减少跳转…

掌握这五个体验设计原则,让产品的设计更具优势

涛涛

李笑来说过一句话:审美常常并不需要知道原理,但创造美的人必须有方法论,否则不可能持续创造。但是很多人总觉得背方法论是笨工夫,高手难道不应该根据场上局面随机应变吗?但事实是,随机应变才是笨办法,方法论和成语典故、数学定理一样,是人脑思维中的快捷方式,“聪明人”之所以能做到随机应变,是因为他们脑中存有足够多方法论,当遇到事情时,这些方法论像神经一样互相连接,给出最优的解决方案。

企业产品中的色彩如何应用?

涛涛

色彩是设计中最具表现力和感染力的因素。全文17,955字,阅读时长约35分钟。

日历

链接

个人资料

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

存档