首页

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

天宇 交互设计及用户体验

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

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

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

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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

弹框关闭的七种交互方式

天宇 交互设计及用户体验

前言:日常设计工作中,我们设计师可能会面临以下设计问题:
  1.  
    移动端弹框什么时候需要关闭按钮?什么时候不需要关闭按钮?
  2.  
    界面中间的确认取消警示弹框,是否需要在右上角添加“关闭”icon按钮?
  3.  
    手势关闭弹框需要注意什么?
  4.  
    iOS和安卓两端关闭弹框有什么区别?
  5.  
    点击弹框中的任务按钮,弹框是关闭还是不收起?
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
 
弹框关闭的七种交互方式
 
 
统一使用图标按钮,以icon“x”的形式,显示在底部弹框的右上角,用户通过点击“关闭icon”图标按钮来关闭弹框。
使用场景
当弹框中包含内容和功能操作时,应提供一个关闭icon“x”的图标按钮,以让用户能够主动关闭弹框并进行相应的操作。
何时不需要关闭按钮icon“x”?
1.操作型弹框,需要用户确认或选择操作项,不需要显示关闭按钮,需统一使用文字主按钮,以文本“取消”的按钮形式,显示在弹框面板底部,用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时,弹出的确认框通常只需要“确定”和“取消”按钮,而不需要显示关闭按钮。
2.全局提示toast(自动关闭)。
3.功能入口类型弹框,为了保持界面简洁,不需要“关闭icon”,如智能文档编辑模式的底部悬浮工具栏。
4.警示或通知类型的弹框,不要关闭icon。
弹框关闭的七种交互方式
 
 
关闭按钮位置
关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。
关闭按钮icon“x”何时需要展示在左上角?
页面级:当页面层级超过3级时,为了便于用户能快速回到一级页面,无需原路返回,可以将关闭按钮“x” 置于左上角,位于「返回」按钮右侧。
多语言和国际化用户习惯:特定语言和文化习惯,从右向左阅读顺序,遵循用户阅读习惯。例如台湾、日本等。
弹框关闭的七种交互方式
 
 
用户点击弹框外部区域,即遮罩层,可关闭弹框。
弹框关闭的七种交互方式
 
 
遮罩层不可点击场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,遮罩层不可点击。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
遮罩层展示逻辑
1、非模态弹框,不加遮罩层;模态弹框,加遮罩层;
2、遮罩层统一使用半透明黑色蒙层,色值和不透明度的数值由UI定义;
3、遮罩层可视高度,遵循移动端最小点击区域48dp*48dp高度的交互热区,保证用户可点击
 
遮罩层的覆盖范围
  1.  
    遮罩层需覆盖标题栏,需遵循iOS、Android、微信小程序平台规范。其中微信小程序端,遮罩层覆盖标题栏,但不可覆盖标题栏右侧胶囊按钮。
  2.  
    若是内嵌H5页面,因客观条件限制,则弹框之下的遮罩层无需覆盖标题栏。
  3.  
    以上提到模态弹框和非模态弹框两种弹框模式,要想更清晰理解两种模式弹框的关闭交互方式,需要理解两者之间的交互区别。‍‍
 
模态弹框和非模态弹框的交互区别
模态弹框‍‍‍‍‍‍‍‍‍‍‍‍:
用户只能操作弹框内的交互元素,弹框外部区域不可操作,需要加半透明遮罩层。例如底部操作型弹框。
非模态弹框‍‍‍‍‍‍‍‍‍‍‍
用户可以并行操作弹框内和弹框外部区域的交互元素,不要加半透明遮罩层。例如苹果地图App。
 
弹框关闭的七种交互方式
 
 
用户在底部弹框区域向下滑动手指,弹框会随之向下移动,当到达当前弹框高度的1/2位置后,会触发关闭交互,用户继续向下滑动松手则关闭弹框。
弹框关闭的七种交互方式
 
 
交互逻辑
1、支持下拉关闭的弹框,头部区域需统一展示水平条icon,样式由UI定义
2、交互热区:底部弹框全部区域
3、手势方向:手指只能向下移动
4、下拉触发关闭弹框阈值:当前底部弹框高度的1/2位置
 
使用场景
长内容类型弹框,需使用下拉关闭交互手势,关闭弹框
 
不可用下拉手势关闭弹框的场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不可下拉关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
弹框关闭的七种交互方式
 
 
用户在屏幕上向下滑动(包括左下或右下滑动方向)至任意位置后松手释放,可关闭弹框;当用户手指下滑未松手,继续向上滑动到任意位置后松手释放,则可取消关闭弹框。
弹框关闭的七种交互方式
 
 
使用场景
仅图片大图模式场景使用。用户向下滑动屏幕,图片随之向下移动,松手后触发关闭图片查看器,关闭图片弹框
例如:手机相册
弹框关闭的七种交互方式
 
 
用户从弹框区域左边缘向右轻扫,即快速向右滑动后松手,则触发关闭弹框操作,关闭弹框。
弹框关闭的七种交互方式
 
 
不可从界面左边缘向右轻扫场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不支持向右轻扫关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
除以上场景外,均需要支持弹框左边缘向右轻扫手势关闭弹框,包括Android、iOS、小程序。
 
特殊场景
1、当同时存在页面向右滑和弹框向右轻扫手势时,在弹框区域向右轻扫,先关闭弹框,再次沿着屏幕左边缘向右滑动,则返回上级页面。
2、键盘展开场景,iOS端不支持左边缘向右轻扫收起键盘,遵循iOS平台规范。
弹框关闭的七种交互方式
 
 
对于安卓设备,用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时,可关闭弹框。
交互用法
1、点击物理按键,需原路逐级返回,不允许跳级返回
2、模态弹框,遮罩层覆盖物理返回按键,不支持左边缘向右轻扫关闭弹框
3、安卓手机将系统导航方式切换到全面屏手势,则不存在物理返回按键
弹框关闭的七种交互方式
 
 
  1.  
    点击弹框中的功能按钮,通常需要立即执行并关闭弹框。一定是先执行再关闭弹框,而不是先关闭弹框再执行。用户执行某功能按钮后,遵循即时响应原则,系统必须要反馈用户在执行用户操作。
  2.  
    为什么点击执行功能按钮需要关闭弹框?因为弹框是否关闭,和用户目标有关。用户主动触发某操作唤起弹框,首先是有用户目标的,其次,用户通过点击弹框内某功能按钮,执行任务来实现用户目标。
  3.  
    此外,也存在点击执行功能按钮立即执行不关闭弹框的场景,比如开关选择器,但本质还是围绕当前用户目标来进行决策是否关闭弹框。
 
结语:任何设计都有它遵循的规律


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

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

天宇 交互设计及用户体验

响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
 
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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

响应式布局|打造跨平台无缝体验的设计利器

天宇 交互设计及用户体验

响应式布局|打造跨平台无缝体验的设计利器
 
 
一、介绍
1.1 发展历程
响应式布局起源于20世纪的建筑设计领域,最初用于描述建筑物根据环境变化自动调整的能力。随着互联网技术的发展,这一概念被引入到网页设计中,以解决传统固定布局在多样化设备上的局限性。自2010年以来,随着智能手机和平板电脑的普及,响应式布局逐渐成为网页设计的标准实践。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
  •  
    固定布局:内容在不同屏幕上的尺寸和布局保持不变。这种设计适用于桌面电脑,但在移动设备上显示效果不佳
  •  
    流式布局:将元素的宽度设置为百分比而不是固定像素值。这样可以使网页内容在不同屏幕尺寸下自动调整大小,但仍存在布局失控和内容挤压的问题。
  •  
    媒体查询:CSS3引入了媒体查询功能,允许开发人员根据设备的特性(如屏幕宽度、分辨率等)应用不同的CSS样式。这种技术使得网页可以根据设备的不同特性应用不同的布局和样式,为响应式设计奠定了基础
  •  
    响应式设计:综合利用了流式布局和媒体查询技术,使网页能够根据设备的尺寸和特性动态调整布局和样式,以适应各种屏幕大小和设备类型。这种方法提供了更一致、更灵活的用户体验,成为现代Web设计的主流趋势
  •  
    移动优先设计:随着移动设备用户数量的增加,设计师开始采用移动优先的设计理念,即首先为移动设备设计网页布局和样式,然后再逐步增强适应桌面设备。这种方法有助于确保网页在小屏幕上的可用性和性能
1.2 基本概念
1.2.1 基于网格布局
响应式 UI 基于网格布局。该网格可以确保不同布局之间的视觉一致性,同时可以灵活的适配多种宽度的设计。网格列的数量取决于断点系统。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
1.2.2 断点(根据宽度切换布局方式)
断点是响应式设计中的关键概念,它指的是屏幕宽度达到某个预设值时,布局会发生明显变化的点。通过设置断点,设计师可以为不同的屏幕尺寸定制不同的布局方案。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
1.2.3 主要应用于横向空间,同时适配PC + 平板 + 手机
传统页面布局策略通常遵循这样一种原则:即内容的多少决定了页面的滚动长度。而页面的水平宽度则往往被设定为一个固定值,以确保在不同设备和浏览器上展示时的一致性和稳定性。然而,随着移动设备的多样化和用户浏览习惯的变化,固定的页面宽度已无法满足所有场景的需求。在这种情况下,响应式布局应运而生,其核心思想是使页面的宽度能够根据不同设备的屏幕尺寸动态调整。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
二、实现方式
2.1 媒体查询
媒体查询是CSS3的一个特性,允许根据不同的设备特性(如屏幕宽度、分辨率等)应用不同的样式规则。通过媒体查询,设计师可以为不同的设备和视口尺寸定制不同的布局和样式。
优点
  •  
    灵活性高,可以针对不同的设备特性(如屏幕宽度、分辨率、设备方向等)应用不同的样式规则
  •  
    允许创建复杂的响应式逻辑,如在横屏模式下调整布局或针对特定设备优化样式
缺点
  •  
    可能导致CSS代码变得复杂和难以维护,特别是当有大量不同的设备和条件需要处理时
  •  
    需要对各种设备和屏幕尺寸有深入的了解,以确保兼容性和一致性
使用场景
  •  
    当需要为不同的设备或视口条件定制不同的布局和样式时
  •  
    当设计需要考虑多种设备特性,如屏幕方向变化或高分辨率显示时
 
2.2 百分比
百分比宽度可以使元素的尺寸相对于其父容器进行缩放,从而实现响应式布局。百分比布局让元素能够根据父容器的大小变化而自动调整宽度,保持布局的灵活性。
优点
  •  
    使得元素的大小能够相对于其父容器进行缩放,从而实现响应式效果
  •  
    简单易用,对于基础的响应式布局非常有效
缺点
  •  
    百分比布局可能在某些情况下不够精确,特别是在需要固定元素位置或大小时
  •  
    可能需要结合其他技术(如视口单位)来实现更精细的控制
  •  
    每个属性都使用百分比,会造成布局的复杂度较高
使用场景
  •  
    当需要元素大小根据父容器的大小变化而变化时,如流体网格布局
  •  
    对于简单的响应式调整,如改变容器的填充或边距
 
2.3 视口单位(vw/vh 和 vmin/vmax)
vw(视窗宽度单位)和vh(视窗高度单位)是基于视口大小的相对单位。使用这些单位,元素的尺寸可以与用户的视口大小同步变化,实现真正的响应式设计。
优点
  •  
    基于视口的单位提供了一种与设备视口大小直接相关的方法来设置元素的尺寸
  •  
    可以创建与视口大小成比例的布局,确保在不同设备上的视觉一致性
缺点
  •  
    对于需要非常精确控制元素尺寸的情况,视口单位可能不够灵活
  •  
    在某些复杂的布局中,过度依赖视口单位可能导致计算复杂和难以调试
使用场景
  •  
    当设计需要元素大小与视口大小成比例时,如全屏背景图像或响应式图片
  •  
    在需要考虑不同屏幕尺寸和分辨率的布局设计中
 
2.4 rem
rem(root em)单位是基于根元素(html元素)的字体大小的相对单位。通过设置根元素的字体大小,可以统一控制页面上所有使用rem单位的元素的尺寸,实现更好的响应性和可维护性。
优点
  •  
    rem单位基于根元素的字体大小,提供了一种一致性更强的方法来缩放元素
  •  
    有助于保持设计的一致性和可访问性,因为所有尺寸都与根字体大小相关联
缺点
  •  
    对于没有深入了解CSS的设计师或开发者来说,rem的计算可能有些复杂
  •  
    在某些情况下,rem可能导致布局的缩放不如预期,特别是在与百分比或其他单位混合使用时
使用场景
  •  
    当需要整个页面的尺寸和布局与根字体大小保持一致时
  •  
    在创建可伸缩的排版和需要保持一致性的设计中
 
三、布局的几种类型
3.1 基础布局
3.1.1 固定
对于固定宽度的元素,确保它们在所有设备上都保持一致的尺寸,适用于那些不需要随屏幕尺寸变化的元素
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.2 流式
流式宽度的元素可以根据父容器的尺寸变化而动态调整宽度,适用于需要随屏幕尺寸变化的元素。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.3 吸附(adhesion)
元素宽度是固定的,直到受到其他元素或断点的影响。参考产品:花瓣发现页
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.4 挤压
元素的宽度随着面板的出现而收缩
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.5 推出
推出宽度的元素在特定条件下会扩展到父容器之外,以显示额外的内容或功能。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.6 遮盖
遮盖宽度的元素会根据内容的需要动态调整宽度,如果内容超出父容器,将会遮盖相邻元素
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.2 混合布局
3.2.1 固定+流式
这种布局方式结合了占满和固定两种布局方式的特点。元素的宽度可以动态调整以占满屏幕空间,而高度则保持固定不变。这种布局方式适用于那些需要充分利用屏幕宽度,但高度固定不变的场景。参考产品:UI中国、知乎等
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.2.2 流式+吸附(典型的响应式布局)
等比+断点布局是指在不同屏幕尺寸下,元素的宽度和高度按照等比缩放,但在某些特定的屏幕尺寸下会触发断点,使得元素的布局方式发生改变。这种布局方式可以在不同屏幕尺寸下实现更加灵活和适应性更强的布局。参考产品:站酷首页。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
四、设计流程
4.1 确定常见的屏幕尺寸范围
通过对目标用户群体的设备使用情况进行研究,确定常见的屏幕尺寸范围,如小屏幕手机、中等屏幕平板和大屏幕桌面显示器。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.2 确定适配规则
4.2.1 间距宽度不变,缩放内容区域
为每个布局区间制定具体的布局策略,包括元素的排列方式、大小和位置。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.2.2 内容区域宽度不变,缩放两侧留白区域
为每个布局区间制定具体的布局策略,包括元素的排列方式、大小和位置。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.2.3 混合缩放,内容区域与两侧留白区域同时变化
为每个布局区间制定具体的布局策略,包括元素的排列方式、大小和位置。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.3 分解固定元素
4.3.1 区分固定元素与变化元素
确定页面中的哪些元素应该在不同屏幕尺寸下保持不变,哪些元素应该随屏幕尺寸变化而变化。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.3.2 确定页面中固定元素的尺寸
对于页面中的固定元素,如Logo、导航栏等,为这些元素设定在不同屏幕尺寸下的尺寸和位置,确保其在任何设备上都具有良好的可见性和功能性。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.4 确定卡片(模块)的布局变化规则
4.4.1 卡片位置变化
根据屏幕尺寸的变化,调整卡片的位置,使其在不同屏幕上都能合理布局。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.4.2 卡片布局变化
改变卡片的排列方式,如从水平排列变为垂直排列,以适应不同屏幕尺寸的布局需求。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.4.3 卡片数量变化
根据屏幕尺寸调整卡片的数量,例如在较小屏幕上减少卡片数量以简化内容,提高用户体验。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.5  文本拉伸规则
4.5.1 溢出省略
对于过长的文本内容,采用溢出省略的方式显示部分内容,并用省略号表示剩余内容,确保页面布局不被破坏。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.5.2 文本换行
根据屏幕尺寸调整文本的换行规则,使文本在不同屏幕尺寸下都能合理显示,避免布局被破坏。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.6 图片拉伸规则
4.6.1 居中裁剪
在保持图片比例的同时,对图片进行裁剪以适应不同屏幕尺寸,确保图片内容的重点区域始终可见。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.6.2 等比缩放
根据屏幕尺寸调整图片的大小,确保图片在不同屏幕尺寸下都能保持原始比例,避免变形或失真。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
五、可见性适配行为
5.1 固定的
对于固定可见的元素,确保它们在所有设备上都保持可见,以提供稳定的用户体验。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
5.2 可切换的
对于可切换的元素,根据屏幕尺寸和用户需求在显示和隐藏之间进行切换,以优化空间利用和用户体验。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
5.3 临时的
临时可见的元素在特定条件下才会显示,如当用户与页面交互时,可以临时显示额外的信息或操作选项。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
六、响应式模式
6.1 出现
出现模式指的是元素在用户滚动或触发某些动作时动态进入或退出视图的过程。
6.2 变形
变形模式描述元素如何根据用户交互或屏幕尺寸变化而改变形状、大小或布局。
6.3 分割
分割模式涉及将内容分割成多个部分,以适应不同的屏幕尺寸和布局需求。
6.4 重排
重排模式指的是元素在不同屏幕尺寸下重新排列,以优化空间利用和用户体验。
6.5 扩展
指的是元素或组件能够根据内容的多少或者用户的交互动作而增加额外的空间或者附加信息。这种模式常见于折叠面板、下拉菜单、模态窗口等交互元素。扩展模式的关键在于它提供了一种优雅的方式来处理额外的内容,而不是在所有时间里都将其展示出来,这样可以保持界面的整洁和减少不必要的干扰。
6.6 位移
涉及到元素在页面上的位置变化,以响应用户的交互或其他条件。这通常是为了重新组织页面布局,以便为新的内容腾出空间或者将用户的注意力引向特定的区域。位移可以是平滑的动画效果,也可以是简单的位置变动。需要谨慎使用,以确保用户不会被突然的布局变化所困扰。
 
七、结语
在进行产品设计时,我们经常会碰到包含多种元素的复杂设计单元,比如图文结合的布局,或者是更加多元的卡片、文本和图像的组合。面对这种复杂性,首要任务是将这些单元分解,审视并理解每个单独元素的适配需求。然后,我们需要综合考虑这些元素在尺寸、形态、数量以及排列上的变化,融合这些变化来制定一套综合的适配计划。这样的过程旨在保证不论是在何种设备或屏幕尺寸上,这些设计单元都能维持其原有的功能和视觉效果,进而为用户提供优质的体验。
虽然开发团队可能依赖于他们的经验或遵循既定的设计标准来执行适配任务,并不总是需要设计师提供详尽的适配指导,但设计师对适配原则的理解和掌握对于打造适用于所有用户设备的连贯体验至关重要。这种专业知识不仅能够提高设计工作的效率和产出的质量,还能促进与开发团队的有效合作,共同推动产品的成功开发。


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

鼠标指针的秘密:提升PC端交互的小技巧

天宇 交互设计及用户体验

一、鼠标指针概述
1.1 鼠标指针的起源
鼠标指针最早出现在20世纪60年代的早期图形用户界面系统中,如Douglas Engelbart在斯坦福研究所开发的oN-Line系统。随着操作系统的发展,鼠标指针的样式也变得更加多样化,以适应不同的操作和反馈需求。
 
1.2 鼠标指针的定义
光标是一种视觉提示,它不仅向用户显示鼠标的位置,还向用户显示如何与特定元素进行交互,包括选择文本、单击、拖动或滚动等。了解哪些光标指示哪些类型的交互并适当地使用它们,可以使界面对用户更直观。
 
1.3 在用户体验中的作用
光标作为用户与计算机系统之间交互的主要视觉工具。在用户体验中起到一些关键作用,例如:直观的控制、视觉焦点、操作反馈、精确选择、交互提示、增强可访问性、减少错误等。
 
二、鼠标指针的基本功能
2.1 指向与选择
  •  
    鼠标指针最基本的功能之一是指向。用户可以通过移动鼠标来控制指针在屏幕上的位置,指向不同的界面元素,如按钮、链接、文本或图像。
  •  
    选择功能通常与指向结合使用。当用户将指针放在某个元素上并按下鼠标按钮时,就可以选择该元素。例如,在文本编辑器中,用户可以通过指向并点击来选择文本;
  •  
    在网页上,指向并点击链接可以打开新的页面。
 
2.2 点击与激活
  •  
    点击是用户与界面元素交互的常见动作。用户将鼠标指针移动到按钮或其他可激活的元素上,然后按下并释放鼠标按钮来执行点击操作。
  •  
    激活功能指的是通过点击来触发元素的事件或动作。例如,点击一个按钮可能会提交一个表单,点击一个菜单项可能会打开一个新窗口或执行特定的命令。
 
2.3 拖动与移动
  •  
    拖动功能允许用户通过按住鼠标按钮并移动鼠标来拖拽界面元素,如窗口、图标或选定的文本。
  •  
    移动功能是指通过拖动操作来重新定位元素。用户可以在桌面上移动窗口到不同的位置,或在文档中拖动文本或图像来改变它们的位置。
  •  
    拖放操作是拖动的扩展,用户可以将一个元素拖到另一个元素或区域来执行特定的功能,如将文件拖到文件夹图标中进行移动或复制。
 
三:鼠标指针的多样性
3.1 箭头光标
介绍:箭头光标通常表现为一个箭头形状,指向屏幕的某个方向(通常是右上方),它允许用户通过鼠标或触摸板与屏幕上的元素进行交互。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    选择:
    箭头光标允许用户点击按钮、选择菜单项或激活链接。
  •  
    指向:
    它提供了指向屏幕上特定元素的功能,帮助用户直观地识别可交互区域。
  •  
    导航:
    在浏览网页或应用程序时,箭头光标帮助用户在界面中导航。
交互行为
  •  
    悬停:
    将箭头光标悬停在某个元素上可能会显示额外的信息,如工具提示或菜单;也可能会触发视觉变化,如颜色或大小改变
  •  
    点击:
    用户可以通过将箭头光标定位到目标上并点击鼠标左键来执行点击操作。
 
3.2 指针光标
介绍:指针光标是屏幕上的一个可见符号,通常随鼠标移动而变化位置,允许用户与计算机进行交互。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    选择:
    通过点击操作选择界面元素。
  •  
    指向:
    指示屏幕上的特定位置。
  •  
    激活:
    点击按钮或链接以触发事件。
  •  
    拖动:
    拖动窗口或对象到新位置。
交互行为
  •  
    悬停:
    将光标停留在某个元素上以查看状态变化或提示信息。
  •  
    点击:
    按下并释放鼠标按钮以选择或激活元素。
  •  
    双击:
    快速连续点击两次以执行默认命令,如打开文件或文件夹。
 
3.3 文本光标
介绍:文本光标是一个通常出现在文本字段中的垂直线条或竖条,指示用户可以在此位置插入文本。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    文本输入:
    允许用户在文本字段中输入字符。
  •  
    文本编辑:
    用户可以通过点击文本光标来定位文本中的特定位置,进行编辑或修改。
交互行为
  •  
    点击:
    用户可以将鼠标指针移动到文本光标上并点击,以在该位置插入或编辑文本。
  •  
    拖动:
    用户可以拖动文本光标来选择文本。
 
3.4 十字光标
介绍:十字光标通常表现为一个十字形或“+”形的指针,它允许用户进行非常精确的定位和选择。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精确定位:
    十字光标帮助用户在屏幕上进行精确的点击或选择。
  •  
    细节操作:
    在需要处理图像、图表或其他细节元素时,十字光标提供了更好的控制。
交互行为
  •  
    点击:
    用户可以使用十字光标进行精确点击。
  •  
    拖动:
    在需要选择特定区域或绘制图形时,用户可以拖动十字光标。
 
3.5 不允许的光标
介绍:不允许/禁止光标通过特定的视觉样式(如带斜线的圆圈或箭头)来表示某个操作在当前上下文中是不被允许或禁止的。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    禁用指示:
    指示用户界面中的某些元素或操作目前不可用或被锁定。
  •  
    防止误操作:
    通过视觉提示防止用户尝试执行不可用的操作,从而避免可能的误操作或错误。
交互行为
  •  
    视觉反馈:
    当用户将鼠标移动到禁止操作的区域时,光标变化提供即时的视觉反馈。
  •  
    操作阻止:
    系统阻止用户执行任何无效的操作。
 
3.6 屏幕快照选择区域
介绍:屏幕快照选择区域光标允许用户通过拖动来定义一个区域,这个区域将被捕捉并保存为图像文件。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精确定位:
    十字光标帮助用户在屏幕上进行精确的点击或选择。
  •  
    细节操作:
    在需要处理图像、图表或其他细节元素时,十字光标提供了更好的控制。
交互行为
  •  
    点击:
    用户可以使用十字光标进行精确点击。
  •  
    拖动:
    在需要选择特定区域或绘制图形时,用户可以拖动十字光标。
 
3.7 消失光标
介绍:指示在松开按钮时,所拖移的项目将消失。如果项目是
替身
,则不会删除其原件。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
 
3.8 拷贝光标
介绍:拷贝光标通常表现为一个箭头旁边带有“+”号或其他表示复制的符号,明确告诉用户当前操作将复制选中的项目。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    复制操作:
    允许用户通过拖动来复制文件、文件夹或其他界面元素。
  •  
    数据传输:
    在不同应用程序或同一应用程序的不同部分之间传输数据。
交互行为
  •  
    拖动复制:
    用户将鼠标指针放在可复制的元素上,按下鼠标按钮并拖动以复制该项目。
  •  
    释放完成:
    用户在目标位置释放鼠标按钮,完成复制操作。
 
3.9 替身光标
介绍:替身光标表明用户可以通过拖动操作创建原文件或文件夹的快捷方式,而不是移动原始项目。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    创建快捷方式:
    允许用户在不改变原始文件或文件夹位置的情况下,创建一个指向原始位置的链接。
  •  
    节省空间:
    替身不占用额外的空间,因为它只是一个指向原始文件的引用。
交互行为
  •  
    拖动:
    用户将鼠标指针放在文件或文件夹上,按下并拖动。
  •  
    创建替身:
    在拖动过程中不松开鼠标按钮,同时按下Option键(或根据系统提示的其他修饰键),光标将变为替身光标。
  •  
    放置:
    用户将文件或文件夹拖到所需位置并释放鼠标按钮,完成替身的创建。
 
3.10 帮助指针
介绍:帮助指针通常表现为一个问号(?)或带有问号的图标,表示用户将鼠标悬停在某个元素上时可以获取帮助或说明。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    提供信息:
    帮助指针可以向用户显示额外的说明或信息。
  •  
    辅助理解:
    帮助用户理解界面元素的功能或操作方式。
交互行为
  •  
    悬停显示:
    当用户的鼠标指针悬停在具有帮助功能的界面元素上时,光标样式可能会变化,同时显示帮助信息。
  •  
    点击获取:
    在某些情况下,用户可能需要点击带有帮助指针的元素以打开帮助文档或获取更多信息。
 
3.11 铅笔光标
介绍:铅笔光标是一种视觉提示,通常表现为一个铅笔形状的图标,用来告诉用户他们当前处于可以绘制或编辑文本的状态。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    文本输入:
    铅笔光标用于指示用户可以在文本字段中输入文字。
  •  
    文本编辑:
    在已有文本上移动铅笔光标,可以进行文字的选择、编辑或修改。
交互行为
  •  
    点击定位:
    用户可以在文本中的任何位置点击铅笔光标,以定位文本插入点。
  •  
    拖动选择:
    用户可以拖动铅笔光标来选择文本。
 
3.12 精密指针
介绍:精密指针是一种特殊的光标样式,它为用户提供了更精细的控制能力,特别是在需要精确定位或选择的应用程序中。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精确定位:
    允许用户在需要高精度的界面元素上进行操作,如图形设计、图像编辑或表格数据输入。
  •  
    细致选择:
    在文本编辑或代码编辑中,精密指针可以帮助用户更准确地选择文本或代码段。
交互行为
  •  
    点击:
    用户可以使用精密指针进行精确点击。
  •  
    选择:
    用户可以轻松地选择小尺寸的界面元素或在紧密排列的元素之间进行选择。
 
3.13 单元格指针
介绍:单元格指针是一种特殊类型的光标,它在电子表格应用程序(如Microsoft Excel、Google Sheets等)中用于指示当前选中的单元格或用户可以输入数据的位置。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    单元格选择:
    允许用户通过点击来选择单个或多个单元格。
  •  
    内容编辑:
    指示用户可以在单元格中输入或编辑数据。
交互行为
  •  
    点击选择:
    用户可以通过点击来选择单元格,单元格指针随之移动到该单元格。
  •  
    拖动选择:
    用户可以拖动单元格指针来选择一个区域的单元格。
  •  
    输入编辑:
    用户可以在单元格指针所在的位置输入或编辑文本。
 
3.14 放大/缩小指针
介绍:放大/缩小指针通常表现为一个带有加号(+)或减号(-)的放大镜图标,用来指示用户当前正在进行放大或缩小的操作。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    放大内容:
    允许用户放大查看细节,例如地图、图片或文本。
  •  
    缩小内容:
    允许用户缩小以获得更广阔的视野。
交互行为
  •  
    点击放大/缩小:
    用户可以通过点击带有“+”或“-”符号的放大/缩小按钮来进行操作。
  •  
    拖动缩放:
    在一些应用中,用户可以通过拖动一个滑块或在触摸屏幕上用两个手指进行捏合操作来放大或缩小。
  •  
    滚轮缩放:
    使用鼠标滚轮或触控板的多点触控手势也可以实现放大或缩小。
 
3.15 移动&拖拽光标
介绍:移动光标是一种鼠标指针样式,通常表现为一个带有箭头的矩形或边框,表示用户可以通过拖动来移动某个元素或对象。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    元素移动:
    允许用户通过拖动操作来改变元素在界面上的位置。
  •  
    布局调整:
    用户可以通过移动光标来调整界面元素的布局。
交互行为
  •  
    点击并拖动:
    用户可以通过点击并拖动移动光标来移动元素。
  •  
    释放完成移动:
    用户释放鼠标按钮后,元素将停留在新位置。
 
3.16 抓取指针
介绍:抓取指针是一种鼠标指针样式,通常表现为一个张开的手或带有抓取图标的指针,表示用户可以通过拖动来抓取和移动元素。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    抓取元素:
    允许用户通过拖动操作来抓取界面上的元素。
  •  
    移动元素:
    在抓取元素后,用户可以将其移动到新的位置。
交互行为
  •  
    点击并拖动:
    用户可以通过点击并拖动抓取指针来抓取元素。
  •  
    释放完成移动:
    用户释放鼠标按钮后,元素将被放置在新位置。
 
3.17 载入光标
介绍:等待光标是一种特殊的光标样式,通常以一个旋转的图标、沙漏或进度条的形式出现,用来指示应用程序当前正在忙碌,正在等待某个操作完成或数据加载。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    指示忙碌状态:
    向用户明确表示应用程序正在忙碌,正在处理数据或执行任务。
  •  
    提供反馈:
    为用户提供即时的视觉反馈,告知他们操作正在进行中。
交互行为
  •  
    显示载入光标:
    当应用程序开始处理任务时,指针变为载入光标。
  •  
    隐藏载入光标:
    任务完成后,载入光标消失,恢复为正常指针样式。
 
3.18 滚动光标
介绍:滚动光标是一种用户界面元素,用来指示用户可以滚动查看的内容区域。它可以是滚动条上的滑块,也可以是鼠标滚轮或触控板的滚动手势。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    内容浏览:
    允许用户浏览超出当前视图范围的内容。
  •  
    滚动内容:
    允许用户滚动查看内容,如网页、文档或图像。
交互行为
  •  
    拖动滚动:
    用户可以点击并拖动滚动条上的滑块来上下或左右滚动内容。
  •  
    滚轮滚动:
    使用鼠标滚轮或触控板的滚动手势可以快速滚动页面。
  •  
    自动滚动:
    在某些应用程序中,内容可以自动滚动,如在演示或某些游戏场景中。
 
四、鼠标指针的交互设计原则
4.1 一致性(Consistency)
  •  
    定义:一致性原则要求在整个应用程序或网站中,鼠标指针的行为和样式保持统一。这意味着相同的操作应产生相同的视觉反馈,相同的指针样式应表示相同的功能。
  •  
    应用:例如,如果标准箭头指针用于所有选择操作,那么用户就会学会预期这种指针样式,并知道何时可以进行选择。
 
4.2 反馈(Feedback)
  •  
    定义:反馈原则指的是系统应提供即时的视觉或听觉信号,以响应用户的操作。这有助于用户理解他们的操作是否成功,以及系统的状态。
  •  
    应用:例如,当用户将鼠标指针移动到按钮上时,按钮可能会改变颜色或显示阴影,以表明它是可点击的。
 
4.3 可见性(Visibility)
  •  
    定义:可见性原则确保鼠标指针在所有情况下都是可见的,以便用户始终知道他们当前的位置和可以进行的操作。
  •  
    应用:例如,当指针移动到特定元素上时,元素可能会高亮显示,或者指针可能会改变形状或大小,以提高其可见性。
 
4.4 适应性(Adaptability)
  •  
    定义:适应性原则指的是鼠标指针应能够适应不同的用户需求和上下文环境。这包括对不同屏幕尺寸、分辨率和用户偏好的适应。
  •  
    应用:例如,提供可调整的指针大小选项,以便视力不佳的用户可以更清楚地看到指针。或者在不同的操作系统或设备上使用适当的指针样式。
 
五、鼠标指针对用户体验影响
5.1 提升效率与准确性
  •  
    鼠标指针提供了一种直观的方式来快速导航和选择界面元素。通过精确的指向和点击,用户能够高效地完成任务,减少寻找和选择目标所需的时间。
  •  
    鼠标指针的变化可以即时反映用户的操作,如当用户将指针移动到链接上时,指针变成手形,这是一种即时的视觉反馈,告诉用户这是一个可点击的链接。
  •  
    清晰的指针状态变化可以减少用户在操作过程中的不确定性,帮助他们更好地理解界面的当前状态和预期行为,从而降低操作错误。
 
5.2 增强可访问性
  •  
    鼠标指针的设计考虑到了不同能力的用户。例如,可调整的指针大小和颜色对比度可以帮助视力不佳的用户更容易地看到和跟踪光标。
  •  
    辅助功能,如指针粘滞键或慢速指针移动,可以帮助运动障碍用户更准确地控制指针,确保所有用户都能有效地与界面交互。
 
5.3 个性化与品牌识别
  •  
    通过自定义鼠标指针的样式和动画,应用程序和网站可以增强其品牌识别度。独特的指针设计可以帮助用户在视觉上与品牌建立联系。
  •  
    个性化的指针样式可以提供更丰富的用户体验,让用户感觉界面更加贴心和专属。
 
六、技术实现与自定义
6.1 操作系统的鼠标指针设置
以mac系统为例:系统偏好设置 -> 辅助功能 -> 指针控制
鼠标指针的秘密:提升PC端交互的小技巧
 
 
  •  
    操作系统通常提供了一套预定义的鼠标指针方案,包括不同的指针形状和大小,以适应各种操作和视觉需求。
  •  
    用户可以通过控制面板或系统设置访问鼠标指针的配置选项。例如,在Windows中,用户可以打开“鼠标属性”对话框来更改指针速度、调整指针可见性(如指针大小和颜色),以及选择不同的指针方案。
  •  
    一些操作系统还提供了辅助功能,如指针的轨迹显示,帮助用户更清晰地追踪鼠标移动。
 
6.2 自定义指针样式与动画
  •  
    需要下载第三方应用程序完成自定义,例如:Steer Mouse;xGestures;Smooth Scroll;Catch Mouse等
  •  
    用户和设计师可以通过创建自定义指针样式来个性化他们的计算机或应用程序。这通常涉及选择或设计新的指针图像,并将其应用为鼠标指针。
  •  
    自定义指针样式可以包括独特的图形设计、颜色和主题,以匹配应用程序的品牌或用户的个性。
  •  
    动画指针可以提供更丰富的视觉反馈,例如,一个等待动画可以显示旋转的图标,以表明应用程序正在处理用户的操作。
 
6.3 编程控制指针行为
  •  
    开发者可以通过编程方式控制鼠标指针的行为,以增强应用程序的交互性。这包括改变指针的形状、位置、可见性,甚至创建自定义的指针效果。
  •  
    在Web开发中,CSS和JavaScript可以用于更改指针样式和行为。例如,cursor属性可以改变HTML元素上的指针图标,而JavaScript可以用于监听鼠标事件并动态更改指针样式。
  •  
    在桌面应用程序开发中,开发者可以使用相应的API来控制指针。例如,Windows API允许开发者设置自定义光标,而macOS的AppKit框架提供了设置光标的接口。
  •  
    编程还可以实现更高级的交互,如捕捉鼠标位置、响应鼠标事件,以及在特定条件下更改指针行为。
 
七、案例研究
7.1 成功的鼠标指针设计案例
 
Current Time 0:00
/
Duration Time 0:52
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
 
 
7.2 鼠标指针设计中的常见问题
  •  
    不一致的指针样式:使用多种不同的指针样式可能会导致用户混淆,特别是如果指针变化与功能不匹配时。
  •  
    不明显的可交互元素:当指针移动到可交互元素上时,如果没有清晰的视觉反馈,用户可能不知道可以进行操作。
  •  
    指针尺寸不适当:指针太小或太大都可能影响用户体验,特别是在不同分辨率的屏幕上。
  •  
    缺乏视觉反馈:鼠标指针在悬停、点击或拖动时,如果没有适当的动画或变化,可能会让用户感到困惑。
  •  
    指针与界面元素间距不当:当用户点击按钮或其他元素时,如果指针位置与实际触发区域不一致,可能会导致误操作。
  •  
    指针样式与品牌形象不符:如果自定义指针样式与品牌的视觉形象不协调,可能会削弱品牌识别度。
  •  
    在不同操作系统或设备上的兼容性问题:设计的指针样式需要在不同的操作系统和设备上进行测试,以确保一致性和功能性。
  •  
    动画过度或不足:指针动画可能会吸引用户的注意力,但过度的动画可能会分散用户对主要内容的关注;不足的动画则可能无法提供足够的交互提示。
  •  
    指针行为与用户期望不符:用户对指针行为有一定的预期,如果指针的实际行为与这些预期不符,可能会导致用户感到困惑。
 
结语
鼠标指针的设计需要综合考虑功能性、美观性和用户体验。一个设计良好的鼠标指针不仅能够提升用户界面的整体质量和效率,还能够增强用户对产品或服务的满意度和忠诚度。希望通过本篇文章大家可以合理的利用各种鼠标指针类型。
 
附件文件如下:可根据需要自行下载。(用于在设计稿上标注,或与开发沟通)
鼠标指针的秘密:提升PC端交互的小技巧
 
 
 

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

用好「用户行为分析」让体验起飞

ui设计分享达人

用户行为分析-如何开始搭建
体验或交互设计知晓用户行为分析有什么用?
答:
我们所处的行业下,各类产品变得成熟精细,大家开始拼细节卷服务,市场竞争激烈。对于产品的各种优化改版也就开始变得谨慎,往往需要经过用户研究或是数据分析等工作来验证或决策,不再是由设计师或产品经理凭借过往经验办事或对标竞品照抄了,恰好用户行为分析就是用户洞察中具有代表性的一项;
 
体验或交互设计为什么要掌握这些呢?
答:
回归到用户体验相关设计,本身就是一项细致活儿,处处需要用户研究或数据洞察来辅助设计工作,了解其相关甚至熟悉搭建分析,从职能发展趋势来看,可能是迟早的事;
 
所以即使你目前用不上用户行为分析相关,也不要急着关掉文章,先简单了解一下吧,说不定你会有兴趣呢,说不定不久后刚好用上呢?
 
 
用户行为分析能干啥
用户行为分析是数据分析的一个重要领域,特别是在数字化服务行业中,主要目的是通过深入研究用户群体的流量动向以及操作行为特征等,来了解用户与产品间的关系、效果、趋势,以帮助我们优化产品设计、提升用户体验并驱动业务决策。
说人话就是:
监测用户在产品上做出了哪些行为、是否符合预期、有什么特征、问题在哪里,然后看看产品上需要做些什么调整或迎合用户的特征偏好来决策啥的。
 
用户行为分析有啥优势
具备一定的客观性与真实性
被动采集的行为数据有时候比用户口述反馈的信息要更真实有效,一方面更加直接,另一方面也少了些用户心理设防(霍桑效应);
用好「用户行为分析」让体验起飞【构建篇】
 
 
具备一定的代表性与准确性
由于是群体性的大数据,所以更有代表性,并且是即时的数据记录,不容易记混记错,准确性也更好;
用好「用户行为分析」让体验起飞【构建篇】
 
 
具备可持续性与可追溯性
通过数字化技术实现,可以伴随产品发展持续的采集数据,可以较为方便的调取过往数据进行比对追溯分析;
用好「用户行为分析」让体验起飞【构建篇】
 
 
具备一定的AI不可代替性
用户行为的背后依旧是人文心理等方面的内容分析或业务场景化决策,往往离不开人工的加持介入;
用好「用户行为分析」让体验起飞【构建篇】
 
 
实施构建的流程
以下是对用户行为分析的工作流图解,由于不同企业的诉求有差异,以下工作流仅代表大部分用作交流;
用好「用户行为分析」让体验起飞【构建篇】
 
 
 
关键节点拆解说明
此次主要聊聊基础的上手运用与注意事项,不涉及过深或难以理解的部分,如果说用户行为分析可以到达高等数学的程度,那么此次就讲讲加减乘除好了,师父领进门,修行靠个人,各位看客请上座!
用好「用户行为分析」让体验起飞【构建篇】
 
 
目标需求拆解
1、什么时候开始?
首先你的产品得有流量,然后得有一个关乎到用户行为的目标,例如想看看用户流量分布、了解功能使用频率、任务执行的漏斗关系、用户行为偏好、用户数据画像构建等,这个时候就可以考虑开始了,不然就可能南辕北辙费力不讨好。
用好「用户行为分析」让体验起飞【构建篇】
 
 
2、界定一个范围?
首先构建一套完善的用户行为分析系统并持续的维护与应用并不是一个轻松的事情,所以最好是针对性构建+多迭代,不要上来就想着做全盘搭建,表面的工作或问题往往可能只是浮冰,逐步的深入后问题会越来越多,个人深有体会!
用好「用户行为分析」让体验起飞【构建篇】
 
 
3、由上而下,找准路线?
通过业务目标向下拆解,一般上层目标无非是商业转化、用户活跃留存、任务通过率这些,向下拆解则是通过业务目标去锁定核心的业务场景或任务线路,这些核心的页面、场景或是任务线路,就是你前期可以界定的一个范围,后续的重点工作则是将核心功能的入口或路径穷举出来,避免数据对不上或找不到异常源头的情况。
在我的认知里,用户行为分析建设不是一锤子买卖,步伐走小一点,基础搭好一些,以后的迭代建设或维护也会轻松许多;
概括一下就是,不要追求全面,靠拢业务价值,关联上指标或者核心业务场景即可;
之前网上看到有大佬给了一个建设思路,这里搬来大家参考一下;
用好「用户行为分析」让体验起飞【构建篇】
 
 
带你认识不一样的埋点
数据埋点技术已经很成熟了,甚至有很多第三方的埋点+分析的服务,以及采集用户行为数据的不仅仅只有埋点技术方案,哪怕你做一个录屏技术都可以,只不过从数字化产品视角出发,埋点技术更有性价比,以及符合用户隐私权益,所以这里专门讲一下“埋点”这个老技术,熟悉的大佬们可以跳过埋点这部分。
1、埋点是什么
数字化应用大多有个特征,就是需要用户进行界面交互,有交互就有行为动作发生,而
数据埋点
就是将用户在
界面交互
时产生的
各种类型
监控日志
上报到产品后台去,这样业务团队就可以知道到用户在不同页面或业务场景下操作了什么,去往过哪些页面,当结合业务后台的订单等数据时,就可以还原出更加清晰的用户行为全貌。
 
通常这些埋点会分为
“页面访问(PV、UV)、区块曝光(区域、时长)、按钮操作(动作、状态)”
三大类型,并
携带交互元素和操作者的各类特征信息参数
,便于我们知晓更多的场景细节与用户情况,例如知晓这个【免费试用】按钮是对应了那个产品?点击的用户是否已开通这个产品?这个用户是否为付费用户?是否个人还是商家类型?用户从那个渠道进来的等,而且这些植入在产品代码中的埋点可以不间断持续的采集和配套产品迭代进行维护,可以帮助业务团队获取大量有效数据用作业务分析决策。
用好「用户行为分析」让体验起飞【构建篇】
 
 
2、什么时候派上用场
这些数据埋点主要是为业务目标的洞察分析服务,也就是说业务目标中需要采集用户行为数据时,埋点就要派上用场了,相比传统的业务日志,埋点可以收集到更加全面的界面交互的行为数据,能够简易的还原出一套线上用户的使用情景,而不仅限于一些业务后台就能统计出的转化率或基础数据等;
用好「用户行为分析」让体验起飞【构建篇】
 
 
并且埋点数据可以与业务数据分开存储运维,这意味着埋点数据可以更迅速的根据设定的指标公式统计出期望的数据或视图,并且不会干扰业务访问的性能质量,因此产品迭代后的新老数据对比、营销活动的效果评估、用户行为的特征偏好识别等,数据埋点都以可以派上用场的。
 
3、怎么提埋点需求?
首先埋点需求没有固定的文档格式,其次不同埋点服务平台的要求也有差异,就移动端来讲,很多服务商已经支持可视化埋点、全埋点、无埋点服务,可以实现自动识别交互元素并进行埋点操作,大大减少了开发工作量,那么再聊回埋点需求怎么提。
 
核心结论就是由上而下,通过业务目标或核心指标进行拆解,然后关联到核心的任务流程上,对于一个页面或一套流程没有必要进行全篇埋点,技巧我概括为以下几点;
用好「用户行为分析」让体验起飞【构建篇】
 
 
埋点需求的主要内容基本包含以下,根据业务或埋点平台的差异,可以自行调整;
用好「用户行为分析」让体验起飞【构建篇】
 
 
4、业务扩参怎么一回事儿
扩参即扩展参数,指在当前用户界面中可以请求到的业务数据,并将这些业务数据绑定到埋点日志中一并上报给埋点数据后台,通常为一些用户属性参数、业务属性参数、设备属性参数、网络环境参数,这样我们就可以通过这些额外的参数进行数据分析或是过滤,举个典型案例;
用好「用户行为分析」让体验起飞【构建篇】
 
 
 
数据治理是做什么
为什么要治理?
简单说就是提升数据质量与准确性,在庞大的一套数据中,我们需要弄清楚数据之间的映射关系,即不同的数据参数代表了什么元素什么动作什么含义,数据是否有缺漏或冗余、报错漏报乱报、是否有无效的脏数据(例如内部的测试数据或脚本爬虫等带来的数据),如果我们不去将这些数据进行治理,则统计出的数据指标特征或趋势都将不可靠,无法被商业应用。
简单讲就是元数据没治理准确,得到的数据指标也就失去了实用价值。
用好「用户行为分析」让体验起飞【构建篇】
 
 
怎么去治理?
本质是查缺补漏将无效的数据过滤掉或纠错
,再把数据涵义映射成具体的指标或描述,用作进一步的指标计算与分析,如果数据又多又杂,你会发觉这一步要你老命,例如埋点就需要逐个查询原始埋点的位置、触发条件、埋点用途、埋点含义甚至与关联业务数据的关系校对等。
不过还好,
一般来讲这些工作都是数据建模(BI)相关人员去负责的
作为应用层的我们,更多的是能够根据业务目标提出埋点需求、提出指标与数据报表需求,以及通过数据核算或查看数据趋势等手段找出异常让 BI 修复
,所以这里就不展开埋点数据治理的方法了。
 
数据维护不易
就埋点监控用户行为的方式来讲,除了平时的治理与报表问题修复,每次迭代改版还要做好相关埋点信息的管理与维护更新,保证不出错,不影响关联指标,甚至是线上用户偏好的推荐算法等应用,特别是数据规模越来越大后,又密切关联着业务决策时,数据更不容出错,且要求准确。
 
三大分析内容产出
1、内容产出的先后
在用户行为分析内容构建的过程中,除非是有特定场景特定诉求,通常个人认为都是先出指标、再完善行为链路、再逐步丰满用户画像的一个过程,原因如下;
  1.  
    通常先接到的都是一些核心指标,例如转化率、留存率、活跃度等,同时这些指标也是上层最先关注到的;
  2.  
    接着就是完善不同场景或任务路径相关,帮助洞察微观视角下的体验障碍或用户偏好等,产出流量统计、流程漏斗等,起到业务体验的洞察改善决策作用;
  3.  
    用户画像的数据本身就没那么好收集,并且是一个逐步完善和被业务决策应用的过程,所以一开始不会直接奔着用户画像构建开始;
 
2、基础指标构建
所谓指标可以理解成是产品某项业务的成绩,例如我是卖包子的,那么我的指标大概率就是每天卖出去多少包子、利润有多少、哪款包子销量高,根据这些信息我就可以知道我平时应该准备多少包子、哪些品类的包子需要多做一些、我靠卖包子能赚多少钱。
用好「用户行为分析」让体验起飞【构建篇】
 
 
指标构建的原理
实际上指标的构建逻辑可以很简单,例如A占B的百分比、ABC的总和、连续多天A占B的变化等,很多加减乘除的算法就能搞定,主要是能拿到真实数据,不然我怀疑你在做烂账......
 
常见指标:
用好「用户行为分析」让体验起飞【构建篇】
 
 
3、行为链路分析
用户行为路径是一种数字化的旅行地图,相比较传统服务的旅行地图,场景会更纯粹、意图更准确、数据采集更便捷,主要作用有以下几点;
  •  
    分析用户在产品中的活动范围或页面路径的关系,可以帮助了解用户活跃分布,流量走向等情况;
  •  
    识别在任务或流程漏斗中的卡点或跳失情况,帮助优化流程体验或提升转化率等指标;
  •  
    通过用户的互动方式或路径特征来进行用户分类或偏好分析预测等,用于内容推荐算法或精准营销;
 
这些行为我们可以大致分为浏览、消费、互动三大类,根据不同的业务类型,可以选择性采集和分析相关数据,例如电商产品就比较关注用户的浏览与消费行为,常见的有商品浏览、添加购物车到下单;
而社交应用就更关注用户的互动行为,如不同类型的内容访问、评论点赞、关注收藏分享等;
这些数据最终可能由可视化的数据报表呈现出来,以便于业务团队快捷的找到数据问题或特征,如常见的漏斗图、桑基图、雷达图、树状图、散点图、决策树等;
用好「用户行为分析」让体验起飞【构建篇】
 
 
小话题延展
最近在UXRen的一场分享会中,听罗浩讲了体验营销的话题,虽然是关于用户研究在职能岗位上挖掘新的商业能力的内容,但是其中有一段是关于如何在旅行地图中挖掘新的营销触点,有一些体会,这里结合用户行为链路分析简单聊一下;
背景与问题:
产品功能与业务增多,引流渠道多样化,不同渠道流量的撬动关键是什么,核心场景具备哪些能力,哪些渠道的流量能吃掉,这些流量所处的触点或场景能支持什么,用户意图是什么,产品能力能满足什么,产品发展可以支持哪些?如何分流或匹配各类流量的意图,并提供路径分发,这些用户流量数据有何趋势或特征,是否能与场景或触点进行根因分析,是否沉淀行为或偏好模型?
行为路径的重点:
在于观察不同触点下的客户意图,展开业务所能触及的部分或新的机会,并匹配合适的关键路径,以提升转化或用户粘性等,然后做数据回归分析,抓取有效的用户特征信息,并应用到产品的内容推荐或外部引流投放信息优化上。
流程过程:
触点展开与机会洞察,触点场景——意图识别——结果匹配(关键路径)——(根因回归)画像更新——算法推荐——广告优化
这一套下来,是不是感觉有点儿似成相识?后来一想这不就是一套用户增长的设计思路嘛。
这一套下来,是不是感觉有点儿似成相识?后来一想这不就是一套用户增长的设计思路嘛。
 
 
4、用户数据画像
主要是帮助了解和理解用户,使得我们可以划分用户群体和识别偏好特征,最终以提供精准营销或是洞察用户诉求来迭代改善产品。
其中偏好特征我们还可以根据业务属性细分为兴趣偏好、行为偏好、消费偏好等,并为不同偏好特征的群体提供个性化的内容服务,例如常见的内容标签标记,通过识别用户常看内容的标签,来推荐类似的标签的内容或是有潜在兴趣的标签内容来抓住用户的兴趣。
用好「用户行为分析」让体验起飞【构建篇】
 
 
 
常见画像指标构建
这些指标会通过用户行为、设备信息、个人资料的完善来逐步获取,主要可以了解到用户的地域分布、年龄与性别分布、设备与活跃度情况,相应的数据在业务后台基本上都能够获取到,只需要将某个时间分区的数据拉出来,经过Excel之类的软件把数据加工一下,就能够获取到相关数据视图。
如果将多个数据指标结合起来分析,便可以获取一些复合型数据指标,例如哪些年龄段的用户群体消费能力更强、活跃度更高、不同教育背景的兴趣爱好是否有一定的关联性等等;
用好「用户行为分析」让体验起飞【构建篇】
 
 
进阶画像指标构建
进阶的数据画像会完善更多的用户特征信息,便于业务团队找到用户群体的特征,做进一步的精细化运营或内容推荐,常见的画像指标如下;
此外就是在收集用户数据的过程中,保证用户隐私安全、合法性和安全性。
此外就是在收集用户数据的过程中,保证用户隐私安全、合法性和安全性。
 
用户分层模型应用
当我们采集到一定的用户数据后,就可以在数据画像的构建阶段进一步完成用户分层工作,这一步是为了将用户分类,因为不同用户群的目的是有差异的,例如闲逛、精准采购、参与活动的等等,以提供差异化的服务做精准营销、识别用户群体特征做业务策略决策、或是优化产品体验相关,不过当你的用户规模尚小,运营模式简单,你也不用迫切去进行用户分层相关,因为收益不大。
那么通常都有哪些用户分层模型呢?其实你并不陌生,一些给你列举了一些;
用好「用户行为分析」让体验起飞【构建篇】
 
 
分析结论到应用
相信你也发现了,用户行为分析的构建与产出并不只是行为链路的数据,同时会包揽很多其他的有价值的指标与数据,所以不要被用户行为四个字迷惑,或许你此刻正需要构建相关数据。
 
当你准备构建或整理用户行为分析前,记得目标或问题先行,针对性采集数据或建设指标,在你有了相对准确或清晰易懂的数据后,那些数据报表或图表根本难不倒你,说白了无非是将纯纯的一堆数据换了形式展示,如果你数据可视化的形式与应用不够了解,你可以看看AntV官网的介绍说明了解一下,其实你也不用每个都研究个遍,实用的就那么几个,酷炫是要代价的,报表搭建平台支不支持、Excel支不支持、时间精力够不够研发给你整,都是问题~
 
 
此篇最后!
你可能疑问没有完整的教程手把手教你啊,其实不然,构建的前提、流程、要点、建设方向均在此篇中交代过,当你按照这套流程框架去做,基本上不会有啥大问题,一般来讲这些内容也够用,至于选用哪些数据埋点平台、数据分析平台、报表搭建平台、视自家公司情况而定吧。
也不要担心在数据报表搭建或分析的过程中,你搞不定,是不是你执行先不说,多问问百度或平台客服总能解决,如果就是觉得很难上手,那么大概率是工具你不熟,或者工具不好用。
 
 


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

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

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

不错,这些设计让我开眼啦!

天宇

有时候创意就体现在很细节的局部,不一定是多么惊人的想法,只要一个细微的差异,就能拿捏用户的情绪。一些简单的设计处理,只要让用户多看几眼,就能实现设计目的。
 
本期黑马哥继续为大家分享一些不错的设计案例,希望这些设计思路可以给你开眼,带给你更多创作灵感。
不错,这些设计让我开眼啦!
 
 
 
 
一、情感化的打卡设计
通过线上打卡已经成为众多业务方向的选择,在便利性的同时也方便管理与追溯。为了提高用户的打卡参与度,产品设计师也在不断挖掘更有趣、体验更好的解决方案。
 
作为上班族和家长们会用到一些打卡软件来辅助完成工作或者学习等,平时我也会经常使用钉钉给小孩进行课业打卡。在完成打卡后“我的成果”展示设计中,打卡标记的设计中嵌入系列 IP 形象或者图形,通过情感化的设计提升了成果展示的趣味性,更能激发小朋友参与打卡的热度。
不错,这些设计让我开眼啦!
 
 
 
 
二、底部标签栏的二级导航设计
底部标签栏更便于用户操作频繁切换的功能,通常 3~5 个为最佳,如果遇到超过极限值时就需要在交互形式上面思考解决方案。
 
在洋葱学园 APP 中,体验到一个底部标签栏带有二级导航的设计方案,很好的解决了超过极限值的情况。在二级导航设计中强化了字体和添加了图片背景区分状态,以差异化的视觉表现吸引用户关注度,以此增加二级导航的操作率。
不错,这些设计让我开眼啦!
 
 
 
 
三、图标设计的背景化运用
图标在产品中主要分为功能性和修饰性,对产品的操作体验和感官体验都起到了非常重要的作用,图标的运用也被深挖到各种业务场景中。
 
在哔哩哔哩任务中心栏目中,展示红包、奖励、积分、奖品的设计中,除了量化的数字结合以外,在各自数据背景中还添加了图标设计。相较于单纯的数据展示而言,图标背景化的运用不仅提升了设计的感官度,也助力了业务属性的差异化。
不错,这些设计让我开眼啦!
 
 
 
 
四、品牌化的弹窗设计
弹窗设计在图形创意、视觉表现和造型等方面都有更多发挥空间,为了提升转化率和降低阻力设计带来的负面情绪,提升弹窗设计的体验感也是至关重要的。
 
在使用我爱我家 APP 时,发现新版本的弹窗设计造型结合品牌和业务性质进行设计,区别于常规造型的弹窗表达。品牌化的探索可以强化用户对产品的品牌记忆度,深化用户粘性。
不错,这些设计让我开眼啦!
 
 
 
 
五、色彩丰富的卡片式设计
卡片式设计是近些年非常流行的 UI 趋势之一,卡片式设计无论在视觉表现力还是造型层面都呈现出了众多案例,简单的形式被赋予了各式各样的表达。
 
最近发现了一个色彩丰富的卡片式设计案例,相较于常规的白色卡片而言,嘀嗒出行的设计中给带有描边的卡片添加了局部突出部位作为背景。在色彩渐变的强化中,不仅使得卡片结构化,也体现出了青春活泼的感官氛围。
不错,这些设计让我开眼啦!
 
 
 
 
六、动态 IP 强化功能关注度
品牌 IP 在产品设计中的运用已经逐步普及,提升情感化设计的同时,也是助力品牌化的关键。
 
在掌上生活 APP 设计中,为了突出“服务大厅”入口的曝光度,采用动态 IP 来强化该功能的关注度。动态化的小招喵更有吸引力,强化功能的同时也让用户感受到轻松愉悦,提升了产品设计的情感化体验值。
不错,这些设计让我开眼啦!
 
 
不错,这些设计让我开眼啦!
 
 
 
 
七、情感化的用户反馈设计
用户反馈是提高忠诚度和采集数据的关键,为了提高用户反馈的意愿度,从情感化设计或者互动性等方面都在不断探索。
 
通过饿了么订餐之后,当配送员完成送达时,会弹窗提示用户是否已收到商品。通过表情化的图标配合文案设计,情绪化的表达使得反馈更清晰,更能提升用户的反馈意愿。
不错,这些设计让我开眼啦!
 
 
 
 
八、人性化的导向设计
地图软件的出现改变了大家的出行方式,再也不会担心迷路,可以尽情地走南闯北。随着产品体验的不断升级,地图软件也越来越人性化,带给用户优质的导航体验。
 
对于驾驶的用户来说,如果使用高德地图提前开始导航会进行人性化的导向,方便导航时间预估得更加精准。点击“我已上车”即可开始导航,让导航体验变得更加人性化。
不错,这些设计让我开眼啦!
 
 
 
 
九、动态头像设置
为了提升预设内容的体验度,针对一些默认的内容也在逐步走向情感化设计的方向,可以让用户感受到更加真实的操作体验。
 
针对头像设置也从默认的灰色人物剪影演变为个性化的 IP 形象、人偶、真实人物形象等,为了提升互动性,也在提供动态化的解决方案。比如豆包 APP 在给豆包设置头像时,设计了不同性别的动态头像,使得头像表达更加生动形象。
不错,这些设计让我开眼啦!
 
 
 
 
十、个性化的界面设计
产品设计的风格越来越多样化,为了体现差异化的体验,个性化的界面设计也是层出不穷。
 
最近在点餐时体验到一个设计风格非常个性化的小程序,名字叫:WHAT TO EAT。区别于别的点餐类产品,该产品设计风格以线性插画风结合,非常有个性化。不仅强化了自身品牌感,也深化了用户的记忆点。
不错,这些设计让我开眼啦!
 
 
 
 
小结
优秀的设计细节可以帮助我们打开禁锢的思维,创作出更优秀的设计方案。描述的观点属于个人经验总结,不足之处我们继续努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


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

洞察用户心声:解锁用户习惯,让产品成为用户的贴心小助手

ui设计分享达人

例如,Windows和Mac操作系统的用户在面对不同的软件关闭方式时,会因为习惯的差异而感到不适应。这种不适应性揭示了改变用户习惯需要付出学习成本,而这种成本的高低也直接影响用户对产品的接受程度。

日历

链接

个人资料

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

存档