首页

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

杰睿

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

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

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

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

冯.雷斯托夫效应 | 设计师需要知道的设计原则!

杰睿

前言
在我们的日常生活中,心理学的影响无处不在。它像一把神奇的钥匙,能打开人们内心深处的秘密。作为设计师,我们更应该掌握并运用心理学,将其融入我们的设计中,从而创造出更具有吸引力和影响力的作品。
设计并不仅仅是形状、颜色和布局的组合,更是对人类心理的探索和解读。我们的每一个设计决策,都与用户的心理状态和认知过程息息相关。如何抓住用户的眼球、引发他们的兴趣、引导他们的行为,这些都是我们需要深入研究的课题。
在众多的心理学原理中,冯·雷斯托夫效应(Von Restorff Effect)是一个值得设计师们关注的设计法则。这个效应揭示了一个有趣的现象:特殊的东西往往比普通的东西更容易被人记住。这就意味着,在设计中,我们要制造一些“特殊”的元素,使它们能够从众多的信息中脱颖而出,成为用户关注的焦点。今天笔者就带大家了解一下设计中常用的心理学之一冯·雷斯托夫效应。
 
 
 
分享目录
一、关于冯.雷斯托夫效应
二、冯.雷斯托夫效应对设计的影响
三、在设计中的应用
四、常见问题及解决方式
五、结语
 
 
 
一、关于冯.雷斯托夫效应
1.产生背景
在1933年的德国,一个名叫海德维希·冯·雷斯托夫的医生开启了一项改变我们对人类记忆理解的实验。她深入探索了当人们面对一系列物品时,他们的记忆是如何运作的。通过精心设计的对比实验,她发现了一个令人惊奇的现象:在一组物品中,那个最特别的物品总是更容易被人们记住。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
这一发现为我们揭示了一个核心事实:特别的事物更能吸引我们的注意力,并在我们的记忆中留下深刻的印记。想象一下,在一组物品中,如果有一个被聚光灯照亮,那么相比其他未被照亮的物品,它无疑会成为人们关注的焦点,从而在记忆中留下更深的痕迹。
这个人类行为和记忆的规律后来被命名为“冯·雷斯托夫效应”。这一效应不仅仅是一个简单的观察,它实际上是人类行为学和心理学领域的一项重要研究成果。随着时间的推移,这一效应逐渐被应用于美学和设计领域,为设计师们提供了全新的视角和工具,以创造出更具吸引力和影响力的作品。
自冯·雷斯托夫效应被正式确立命名以来,众多科研学者在此基础上进行了更深入的研究,他们不仅剖析了这一效应的内在机制和影响因素,还探讨了其在不同情境下的应用。随着研究的深入,对于这一效应的理解也在不断加深,并衍生出了许多其他的理论和学术观点。
 
2.融入设计行业
冯·雷斯托夫效应为我们提供了一个独特的视角,帮助我们更好地理解人类记忆的运作方式。通过运用这一原理,我们可以在设计中有意识地创造出令人难忘的元素,从而与观众建立更深刻的联系。无论是在广告、品牌推广还是产品设计中,突出特别的元素都是一种有效的策略,可以帮助我们更好地吸引观众的注意力并留下深刻的印象。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
冯·雷斯托夫效应,又被称为隔离效应或新奇效应,揭示了人们在记忆中的偏好。当情境或经历中出现与众不同的刺激时,这种效应尤为明显。
在当今信息爆炸的时代,用户往往没有耐心去仔细查找信息,而是快速扫视。因此,设计师需要巧妙地运用莱斯托夫效应,使关键内容从繁杂的信息中脱颖而出,吸引用户的目光。
统一性是设计的基础,但只有差异化的元素才能让信息从页面中脱颖而出。通过巧妙运用颜色、形状、布局等元素,我们可以创造出与众不同的视觉效果,引导用户的视线。通过巧妙地突出关键内容,我们能够更好地与用户沟通,引领他们的注意力,为业务创造更大的价值。
 
 
 
二、冯.雷斯托夫效应对设计的影响
1.背景不同 强化视觉
在界面设计中,我们常常会遇到这样的情况:在同类型的元素中,某一元素与其他元素存在显著差异,这种现象我们称之为“背景不同”。为了使某个模块或元素在用户心中留下深刻印象,我们可以利用环境差异来提高其识别度和记忆度。这种手法在UI设计中被广泛应用,它利用了冯·雷斯托夫效应,能有效吸引用户点击。
例如淘宝底部标签栏中的四个ICON,唯独首页的第一个ICON(品牌logo)风格与众不同。即使离开了该页面,这个特殊的ICON依然让人印象深刻,饿了么第二的图标也是如此。因此,我们在设计界面时,若想吸引用户的注意或提高点击量,可以打破常规,让特定元素在同背景下脱颖而出。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
再比如下图的个人中心界面,功能入口模块均采用ICON展示,而游乐场模块却采用了特殊的布局和设计。因此,当用户进入个人中心时,最先映入眼帘的便是游乐场模块。这也解释了为什么我们在进行广告和活动投放时,需要特别设计的原因。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
2.经验不同 强化记忆
当遇到与过去经验显著不同的情况时,我们的大脑会产生一种特殊的效应,这种效应被称为“经验不同”的效应。例如,在骑自行车的过程中,我们通常习惯于左手控制左把手,右手控制右把手。但是,如果我们尝试用双手交叉的方式来骑车,结果很可能会摔倒。从此以后,每当我们听到或描述有关骑车摔倒的事情时,我们都会立刻想起那次“经验不同”的尝试。
同样地,淘宝和京东在618、双十一等大型促销活动时,会选择重新设计他们的首页。与往常的设计相比,这些新的首页设计通常会增加更多的促销入口,甚至改变ICON的风格。从冯·雷斯托夫效应的角度来看,这种与以往不同的设计能够更好地吸引用户的注意力,加深用户的记忆,并扩大活动对用户的影响力。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
 
 
三、在设计中的应用
1.功能隔离提高效率
在视觉层面难以实现强烈差异化时,我们可以通过功能来实现有效的隔离。以微信为例,其置顶功能允许用户将好友或群聊消息置于顶部,从而与其他信息区分开来。这种设计确保了关键信息的优先级,使用户能够更快速地找到和关注所需内容。通过巧妙地运用功能,我们可以轻松地解决视觉上的一致性与差异化之间的矛盾,为用户提供更加流畅和个性化的体验。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
2.动效加强引导
静态页面容易让人视觉疲劳,动效能够更加生动有趣地展示内容,引导用户更加关注页面。相较于被动接受信息,动效能够更加有效地吸引用户注意。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
3.背景联动吸引目光
随着Banner自动轮播的普及,用户对其的吸引力逐渐降低。面对不断变化的广告,用户不再耐心地逐个浏览。当无法获取所需信息时,他们的视线会迅速转向其他区域。
为了应对这一挑战,腾讯视频首页的Banner采用了背景联动的形式。这意味着头部背景色会根据Banner图片的色调进行变化,从而扩大了内容的变化空间。这种设计不仅使广告更加引人注目,还使用户更容易被吸引并保持关注。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
4.icon强化加强视觉感知
频道页的入口方式多种多样,金刚区icon无疑是最优选择。若要突出展示某些业务功能,单一的icon配合动效可有效吸引用户关注。此策略简单高效,有助于用户快速找到所需内容。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
5.内容强化凸显价值感
在设计界面时,我们追求的是在有限的空间内展示更多的有效信息,避免信息的无效重复。但在电商平台中,尤其是涉及到利益点时,我们需要确保信息具有足够的价值感和吸引力。
以智行APP开通会员为例,领神卡作为核心卖点被突出展示,采用了平铺展开的方式,从而突显其价值。相对其他权益则相应地进行了弱化处理,以保持整体信息的清晰度和重点。这样的设计既充分利用了屏幕空间,又确保了用户能够快速了解到核心的利益点。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
6.分层隔离提高信息层级
页面信息层次分明,信息层级越高,用户感知越强烈,越能吸引注意。例如,模态弹窗处于最上层,与内容层完全隔离,用户无法忽视。其次是非模态悬浮层,与内容层隔离,但不影响用户操作。还有侧边悬浮按钮、顶部或底部悬浮横条等。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
 
 
四、常见问题及解决方式
1.本末倒置的危险
受“危险按钮”的影响,过去设计师常常给予负向情绪操作很高的视觉层级,例如退出登录。这样的设计意图是警示用户操作危险,但视觉上却过于强调,甚至有些“喧宾夺主”。近年来,移动端设计中这种矛盾逐渐减少,但仍然存在。与其强调操作的难度和危险性,不如考虑如何让用户自然地忽视这些操作,减少不必要的干扰。从冯·雷斯托夫效应来看,这种设计方式有本末倒置之嫌,应尽量避免。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
2.什么都突出等于什么都不突出
新手设计师常常会遇到想要突出所有元素,但最终无法突出任何一项的问题。页面中的特异点应该属于少数,如果所有元素都想做得不一样,都会让页面整体视觉效果崩溃。因此,在设计中要学会取舍,选择最重要的元素进行突出,才能达到最佳的视觉效果。
 
 
 
五、结语
总的来说,将冯·雷斯托夫效应运用到设计中,能帮助我们创造出更具吸引力、更容易被记住的设计。但请记住,任何设计决策都应以用户为中心,了解他们的需求和心理是关键。只有这样,我们才能真正创造出打动人心的设计。
 


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

以用户为中心的交互设计思维

鹤鹤

聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
 


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

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

涛涛

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

54个绝妙UI/UX设计秘诀:让你的设计脱颖而出!

杰睿

当你为你的项目创建有效的,可访问的,漂亮的ui时,只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中,我收集了一些容易放置的内容。在实践中,这些小技巧可以毫不费力地帮助你改善你的设计,还有用户体验。

希望你喜欢!

1·让你的元素出现更多

 

用微妙的边界定义。

使用多重阴影或非常微妙的边界(只是一个阴影比你的实际影子)周围的某些元素可以使这些元素出现

更清晰,更清晰,帮助你避免那些看起来泥泞的阴影。

 

 

2.减少字母间距

 

标题给一个更好的光学范围。减少长格式正文的字母间距?这是一个大大的“不”。但对于标题……我要说“是”!

你的标题很可能会比他们的标题更大,更重。相比于正文,字母之间的间距有时会出现视觉上更大,这并不是你想要的。减少字母间距,只是少量,可以使你的标题视觉平衡,更易于阅读,通常更赏心悦目。

 

 

3.图表一致性

 

为了一致性,确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量,要么填满,要么秒变了。不要混搭。

 

 

4.页面可以用一种字体

 

只使用一种字体就很好。在设计时,使用单一字体是绝对没问题的,这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量,大小和颜色,你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。

 

 

5.适当的留白

 

留白是UI设计朋友。大胆的使用。适度的留白,即使是少量的白色物质,但要使用得当。能让你的设计透气,而且看起来更光亮。

 

 

6.20pt的文字

 

创建长篇内容?给20 pt试试。对于长形式的内容(即微博文章,项目描述等等),试着这样做20pt(甚至更多一点)为你的文本字号。当然,这取决于所选择的字体,但大多数流行的字体在20pt时效果得很好,并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。

 

 

7.字号集比例

 

使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义,Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁,H₂等),或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。

 

 

8.界面颜色定义

 

选择一个基本颜色,然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许,简单地使用一个有限的调色板选择一个基地颜色,然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。

 

 

9.登陆用户体验

 

改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列,并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整,可以为你的用户提供更好的体验……

记住,拇指仍然是主宰!

 

 

 

10.阴影来自一个光源

 

你的影子来自其中一个光源对吧?确保你的影子总是来自一个光源。这是一个简单的错误,但它可以让你的设计看起来更抛光且统一。记住,我们不是生活在一个拥有一千个太阳的国度里。

 

 

 

11.建立字体集合

 

使用更好的字体组合,效率会很很快。当你想要提高你的字体组合技巧的时候,当面对1000个字体选择,只是去寻找对应的自己集合,效率会快很多。

 

 

 

12.提高你的对比

 

文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置,您可以选择尝试,并测试完整的图像覆盖,或更微妙的(从下到上,或从上到下)渐变叠加,以实现两者之间的简单对比。为了在你的文本之间形成良好的对比,不要太复杂的内容和图片。

 

 

13.使用居中排列文字要有节制

 

太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容,保持文本左对齐。你的用户会感谢你的你。

 

 

14.多字重

 

当选择一个多用途的文字,尽量找一个大量权重。你搜索的字体有很多选择吗?重量、风格?如果你打算在你的一些项目中使用它,请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话,我建议你避开这些。当然也有例外,某些项目会要求“只有一种风格”

更精致的字体,但对于绝大多数项目,你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格,希望你在设计过程的后期需要更多的空间。

 

 

 

15.浅色背景不要文本过亮

 

想要创造更容易理解的界面,对吧?把你的文字调暗在光亮的背景上。在浅色背景下工作时,不要让你的文本太亮。

 

 

16.纯黑色文字未必是好

 

当涉及到长形式的内容时,某些常规的粗细字体仍然可以看。但太重了,在屏幕上会很僵硬。你可以很容易地解决这个问题,选择一些像深灰色(即#4F4F4F)的基调,把文字往下写,让眼睛更容易看。

 

 

17.通过色彩对比度作区分

总是通过icon最突出的内容。你认为这是常识,对吗?我并不觉得。通过使用色彩对比度做区分,尺寸和标签,确保尽可能突出。如果可以的话,不要总是只依赖图标。如果可以使用文本标签,那就使用它们,让用户更好地理解。

 

 

18.字体越小,行高越大

 

当你的字体变小时,请增加行高,以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。

 

 

19.“Il1”测试文字可读性

 

使用x-height来测试字体的可读性。基本上,x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高,通常有助于更好地阅读,特别是在使用长形式的正文文本。另一种确定字体可读性,并缩小范围的方法如果你有一些无法选择的字体,可以做这个测试,比较来自特定字体的三个字符:大写字母I,小写的L和数字1。

 

 

 

20.突出实用动作

 

当设计一个在应用程序内部使用的菜单时,确保提供最多经常使用的动作(例如:上传图像,添加文件等)最突出的屏幕上。

 

 

 

21.颜色-从你的图像中选择

 

颜色-从你的图像中选择,会给你的产品带来生命。简单地从你的产品图片中选择颜色,然后应用各种色调。你选择的颜色阴影到你的背景,文字,图标或更多,可以添加。你的设计具有丰富的视觉趣味和个性。

 

 

22.不同字体,不同行高

 

基于字体的x坐标,设置您的线高度。不同x高的字体需要不同的行高测量,实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即:18px)它们的x的高度可以有很大的不同,这在选择正确的线的种类起着很大的作用高度来实现。

 

 

23.突出最重要元素的方式

 

突出最重要的元素。通过使用字体大小,权重,颜色和布局的组合,可以很轻松的突出UI中最重要的元素。只是很简单,但微妙的调整,让用户体验更好一点。

 

 

24.错误下额外的视觉辅助

 

操作错误的时候,添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式,但很有帮助,当他们填写任何形式的表格时额外的视觉辅助。

 

 

25.移动端热区创建

 

尝试在移动端创建慷慨的热区。当为移动设备设计时,尝试创建足够大的可点击区域,是好的。对于只包含文本的按钮和链接来说,这是很有挑战性的,尽可能使用带有标签的图标。

以下是iOS和Android的最小推荐点击区域:

44 x 44pt用于iOS

48x48dp用于Android

 

 

26.短标题上尽量使用全大写

 

在短标题上尽量使用全大写。如果你想在标题上使用全大写,请确保它们在任何时候都很短。有可能,最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样,在标题中添加少量的字母间距。能让他们呼吸顺畅,而且视觉效果更好。

 

 

27.保持文字与图像的对比度

 

在轻文本和图像之间,保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。

 

 

28.英文标题字体推荐

 

看看这些很棒的字体,用在标题非常好的。发现他们真的很适合标题,设计感很强。(我没有推广费用,请放心用)

 

 

29.英文长文本字体推荐

 

看看这些很棒的字体,用于长文本是非常好的,强烈推荐使用。(我仍然没有任何推广费)。

 

 

30.让垂直节奏恰到好处

 

标题和正文。当你想实现一个好的垂直节奏,以及一个强大的视觉之间,需要对文本元素排版、间距作设计。我见过许多设计,最常见的是在文章列表中,它们已经被应用标题的上下空白相等,这样就失去了这种联系在它下面有正文。在这种情况下,我总是会给我的标题更多的顶部边距,而在底部,标题和下面的内容之间的连接是更强,有良好的垂直节奏,视觉层次保留在所有的文章之间。

 

 

31.使用具有信息性的提示符

 

对于下载指标,试着去做尽可能提供信息。对于用户,尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点,用百分数来显示当前进度,一个简单的图标,让他们可以在任何地方取消下载时间。

 

 

 

32.保持标题相对简洁

 

如果你能保持标题简短,简洁……“想做就做”。

如果可以,如果合适的话,保持标题简短,时髦,切中要点。而不是“这是你的风格,你的方式”,简单地使用像这样的“你的风格。你的方式。”人们会浏览,保持这些标题简短有力有助于他们更快地消化中的信息。

记住,这种方式可能会让人感觉很突然,你需要考虑一下你所从事的项目类型,以及目标受众来决定方法是合适的,相对于更标准的格式。

 

 

33.选择合适的字体

 

正确的设计“声音”。在项目中处理文本时,选择正确的字体将影响就像你说话的声音一样。要大声,要柔和,要友好,要正式,要有趣。每一种字体都有自己独特的声音,关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时,这似乎是一项艰巨的任务,所以不要害怕从类似的项目中获得灵感,并从这些项目中汲取灵感它们有助于影响你的决定,并提高你的理解什么是合适的。

 

 

 

34.行长度的平衡点

 

你的正文,并提高可读性处理正文文本,并试图找到合适的行长度可能有点平衡。对于一个单独的列页面,45到75个字符被普遍认为是满意的行长度,而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然,字体大小和行高在决定可读性时也起着重要作用,但是对于行长,保持在45到75个字符之间,就会更好了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

35.幽灵文字提升用户体验

 

偶尔使用纯装饰的幽灵文字也可以,但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时,希望添加纯出于装饰目的的文本,我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验,那么出于装饰的原因,插入奇怪的元素是可以的。



 

 

36.界面元素保证快速区分

 

使用户界面中的元素彼此区分。按钮、通知,ui中两个独立但重要的元素。如果可以的话,总是试着确保你的用户能够快速地将它们区分开来,轻松扫描您的网站或应用程序。按钮,在大多数情况下,将优先,所以确保他们是最突出的。项目在屏幕上,并很容易区分其他元素。

 

 

37.投影的玩儿法

 

只是一些细微的阴影,你所需要的。我们都喜欢阴影,对吧?它们可以作为微妙又很强大的视觉线索,在您的设计中使用要适度。现实世界中的阴影,在大多数情况下几乎是不可察觉的,而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度,以实现一些的东西更微妙和栩栩如生。

 



38.全大写文本

使用全部大写?选择适合的字体,能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重,使用户的光学清晰度。

 

 

39.让面包屑脱颖而出

让面包屑脱颖而出,易于为用户解释。面包屑无处不在,经常用于内容丰富的网站,通过最小的调整,你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度,这一点尤其有用。

 

 

40.尝试用高饱和颜色

 

使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒,但是当过度使用时,它们会使使用者的眼睛疲劳,主要是在使用的时候的文字内容。尽可能使用时要适度,并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色,以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心,与更柔和的颜色采取较少突出角色,让用户的眼睛休息一下。记住,在选择颜色时,可读性和可访问性应该是最优先的。

 

 

 

41.图表不要叛逆的使用

 

在ui中使用已建立的图标,为了避免给用户造成混淆。在你的设计中添加图标时,试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑,成为用户的认知障碍。不要在这些图标上过于叛逆。

 

 

 

42.接近原则

 

在众多经过尝试和测试的设计原则中,这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程,表明彼此之间的关系,这有助于加快用户的认知。

 

 

 

43.文本网格

4pt基线网格+ 8pt网格=单一网格。当使用类型时,8点网格旁边使用4点基线

可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4,使用的行高值为4的倍数(16、20、24、28等)

为什么4?我发现在过去使用特定的文本大小时,按8的倍数缩放是不太合适。

 

 

 

44.文本建议行高比例

减少标题上的行高是很好的。与长形式的主体文本不同,它需要足够的行高,以便折行易读。标题的推荐行高通常约为1至1.3倍。

 

 

45.颜色选择

 

选颜色有困难计划吗?在颜色上进行类比论。类似的颜色,也被称为相邻或相邻的色调,是其中之一最和谐的配色方案,可以大大帮助你,如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的,颜色方案快速。当你需要快速将颜色调和到混合中时,可以使用类似的方法。

 

 

46.提高信噪比

 

在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声,从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效,不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。

 

 

47.图像文字达到强对比

 

我想用更非正式的方式说话。语气吗?尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时,使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。

 

 

48.使用重量、大小和颜色来表示类型中的层次结构

 

当使用类型时,元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素,避免在过程中产生任何混淆。

 

 

49.浅色文字加深色?

 

养肥了,字体大小为最佳易读性。当设置暗色文字与浅色背景,选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量,特别是对于长表单副本。以最佳的易读性为目标,避免让用户的眼睛疲劳。

 

 

 

50. 用你的字体选择创造正确的情感回应

 

试着为你要呈现的内容选择合适的字体。用户是精明的,有一种直观的感觉,当内容与他们交谈当它不是。正确的字体选择是至关重要的,使您的内容讲给他们直率和情感的水平。

 

 

51.大写字母+字母间距=更好的易读性

 

你是否使用全大写的短行文本?嗯…这是一个好主意,增加这些字母之间的间距,以达到更好的用户的易读性。这样做使单词更容易阅读和处理,因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。

 

 

52.错误告知

 

打开这些错误消息,您的表格有帮助。在使用表单时,请尝试并确保错误消息得到解释。出了什么问题,如何补救。总是让用户了解情况,即使是像常规一样常见的事情的形式。让这些错误消息有用,不要让您的用户蒙昧。

 

 

 

53.告知用户正在发生什么

 

试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循,并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。

 

 

 

54.不可逆的操作强提醒

 

告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前,总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为,如删除某些东西。让用户知道将要发生什么,并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。

 

 

 

参考文献《UI & UX Micro Tips - The Ultimate Collection》

 



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

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

大厂搜索哪家强?这些交互设计值得你收藏学习!

杰睿

大体上分为两类:彩蛋流和体验流

搜索的本质是什么?无疑是内容的召回和信息的推荐。

可随着时代的发展和行业公司的内卷,不少公司除了持续优化搜索结果与推荐外,在搜索的体验和彩蛋上也是下了不少功夫,从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些,那有意思的大厂搜索交互。

大体上分为两类:彩蛋流和体验流

A.彩蛋流

注重提升搜索过程中的趣味程度,以增加用户的好感度与产品印象/口碑。行业代表:谷歌浏览器、百度浏览器

 

1.谷歌浏览器

 

可以说是搜索彩蛋的先行者,内置了很多搜索关键词的有趣彩蛋,如娱乐角色:搜索【灭霸】,页面右边会打响指,相关字段会被’毁灭‘掉

 

 

搜索【马里奥兄弟】,右边也有游戏里一样的点击彩蛋

 

 

还有各种有意思的搜索结果比如搜:is google down(谷歌关闭了吗),搜索结果优先显示:NO

 

 

再如搜索《银河系漫游指南》的一句话:the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。

 

而且在日常的节日、活动、热点运营上,谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与,可以已经形成一个稳定、具有品牌感的企业文化了。

 

如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

 

 

 

 

 

2.百度浏览器

 

百度在搜索彩蛋里下的的功夫也不少,最著名的应该是搜索【黑洞】时,页面上会出现黑洞的吸入特效。

 

 

 

 

而且和谷歌相同,在其他的搜索关键词上,百度也是埋下了不少彩蛋,比如:搜索【翻转】,页面会左右翻过来

 

 

 

 

搜索【跳跃】,页面会在上下跳动

 

 

 

 

搜索【失重】,页面上的字会飘起来‍

 

 

 

 

 

而在【活动运营】上,百度也是很有心地进行着创新设计,力求给用户一种眼前一亮的感觉。比如每年的愚人节,搜索结果页上都有‘调戏’用户的创意设计,各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。

 

 

 

 

 

 

 

还有在【活动入口】的设计上也是特别有想法:在某年的圣诞节上,百度创新性地将活动入口’嵌套‘在结果页卡片中间,用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」

 

 

 

 

 

 

 

用这种充满创意+应景的的入口设计与引导方式,最大限度地降低漏斗,吸引让更多用户参与该活动。另外,百度搜索框上面的运营活动入口,也和谷歌有异曲同工之妙。

 

 

 

 

而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

 

B.体验流

 

注重提升搜索过程中的交互体验,以增加用户的操作效率与产品易用性

 

代表:苹果产品、夸克浏览器

 

 

1.Apple/苹果产品

 

·iPhone

 

iPhone的【桌面搜索】除了能查询手机上的各种信息、文件,它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器,大大减少操作链路。

 

 

 

 

在iOS的原生键盘里,可以根据输入词检测+搜索对应的手机号码:当你输入 【打+我或通讯录好友+电话】时,键盘上会自动显示自己或好友的电话号码,点击号码就能自动粘贴在输入框中。

 

 

 

 

用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码,大大提升操作体验与效率

 

·Mac

 

在Mac电脑的工具栏上搜索相关帮助时,系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里,并减少寻找的操作路径,免去多余操作

 

 

 

 

在Mac电脑的‘系统偏好设置’里搜索帮助,在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时,该入口的聚光灯会更清晰些,特别容易找到搜索结果。

 

 

 

 

2.夸克浏览器

 

夸克浏览器除了传统的「点击搜索框」唤出输入栏外,在屏幕任意位置下滑手势同样可以唤出搜索框。

 

 

 

 

降低「需要往上手指移动,才能点击搜索框」的操作成本,让用户更快、更精准地触达搜索。

 

而且在输入网址或英文等字段时,搜索框下方会出现一个滑块区。点击就会变成长条的滑块,拖拽滑块即可改变光标位置。

 

 

 

 

而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

让用户更方便地将光标快速移动到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克还会前置搜索结果, 比如在搜索框中输入“某城市+天气”的关键词,上方就会以卡片的形式显示该地区最近一周的天气。

 

用户无需触发搜索、进入结果页才能看到想要查询的信息。

 

 



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

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

这样的设计想法为啥我没有想到

蓝蓝设计的小编

对于产品设计师来说,在同质化的环境中我们需要具备突破创意的思维,这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发,发现有意思的设计细节也能提高我们的设计思维。

 

今天黑马哥将会继续为大家带来一些优秀的设计细节,我们一起来反思一下,这样的设计想法为啥自己没有想到呢?

 

 

 

 

 

 

分享目录

 

一、营造顶部区域视觉感与情感化

二、主题化配图增强视觉感

三、弹幕式标签提高关注度

四、IP 强化底部标签栏图标设计

五、强化动态发布的引导设计

六、连贯性的插画突出卡片特色

七、动态表情化的评价设计

八、场景化的推荐设计

九、上下轮播的 Banner 设计

十、情感化的氛围营造

 

 

 

一、营造顶部区域视觉感与情感化

 

产品顶部区域的视觉感是吸引用户的关键,在一些功能单一的产品中,强化视觉表现力也是提升产品丰富度的有效形式。

 

比如麦当劳 App 首页的设计中,顶部区域结合温馨的场景插画进行表达,让你早上打开麦当劳就有种心情愉悦感。动态的太阳微笑画面给你一天好心情,情感化的设计不仅增强了视觉感,也带给用户美好的产品使用体验。

 

 

 

 

 

 

二、主题化配图增强视觉感

 

封面图在产品规范中相对比较难约束,通过构图、比例、固定元素和配图质量等,在一定程度上可以提高感官体验。如果是在重点突出的内容上面,结合主题化配图也可以增强视觉感。

 

之前在使用优酷 App 时,当时在重点突出热剧的设计中,就将主题化的内容融入到宫格的配图中。以统一的画面风格和设计表现形式填充封面,增强了视觉表现力,以此突出热剧的吸引力。

 

 

 

 

 

 

三、弹幕式标签提高关注度

 

在固定的结构布局中如何提高局部内容的关注度,我们需要在不改变结构的前提下进行创意融入。比如动态画面、突出视觉感、内容特异化等等,而最近发现弹幕式标签也是一个不错的选择。

 

在体验优酷 App 时,在动漫栏目中针对推荐的热播新番,想要突出的动漫结合了弹幕式标签进行强化。动感的节奏会提高用户的关注度,在不改变当前结构的基础上,不失为一种有效的解决方案。

 

 

 

 

 

 

四、IP 强化底部标签栏图标设计

 

底部标签栏图标是产品设计师经常发挥的场景,在一些节庆主题或者活动中都会定制设计。

 

优酷 App 在元旦促销活动期间,就将底部标签栏图标设计与 IP 形象结合,默认以促销主题文字展示,点击状态以 IP 形象显示。图标与活动相结合,不仅突出图标视觉表现,也营造了活动氛围感。

 

 

 

 

 

 

五、强化动态发布的引导设计

 

对于靠内容吸引用户参与度的产品来说,提高用户发布动态的意愿度至关重要,突出动态发布的吸引力也能起到促进作用。

 

会玩 App 在动态发布的引导设计中给出了不错的思路,未发布动态时会以形象化的空状态设计进行引导。动态发布的按钮旁以俏皮可爱的形象进行引导设计,提高了按钮的吸引力,让用户有种参与的冲动。情感化设计的引导不仅可以增强感官体验,也更容易攻破用户的防备心理。

 

 

 

 

 

 

六、连贯性的插画突出卡片特色

 

卡片式设计已经成为主流的产品设计趋势,信息的归纳感可以提高识别效率。探索卡片设计的表现特色尤为重要,重点在于卡片造型和内部视觉表现力的发挥层面。

 

麦当劳 App 在主内容的卡片设计上运用了配送场景插画,连贯性的插画突出了卡片特色。插画场景结合了品牌图形,增强了麦当劳的品牌曝光度;白天和晚上还以不同配色风格和细节进行差异表现,无论是想法还是设计细节都非常不错,是一个挺有创意的案例表现。

 

 

 

 

 

 

七、动态表情化的评价设计

 

用户评价可以反馈服务的质量,进而做出产品迭代或者服务调整的思路。如何提高用户参与评价的积极性,需要产品设计师多多探索啦!

 

最近在使用顺丰速运小程序时,完成快递业务之后进行评价,表情化的星级评价非常有意思。不同等级以不同的表情呈现,动态表达非常形象生动,让人不由的挨个体验。动态表情的形式提高了评价的关注度,情感化的表达让用户更愿意参与评价,提高了评价的体验度。

 

 

 

 

 

 

八、场景化的推荐设计

 

针对电商类产品来说,商品/店铺推荐模块出现频次较高,吸引用户关注度自然成为了设计的首要目标。

 

在体验 Mars App 时,在生活超市推荐的设计中,模拟了便利店的场景形象。真实感的场景表达带给用户亲切自然的购物体验,同时也提高了用户对于该模块的关注度。

 

 

 

 

 

 

九、上下轮播的 Banner 设计

 

轮播 Banner 图算是产品设计中最常见的模块,在移动端的设计中通常左右轮播为主,最近体验到上下轮播的案例,打破常规也不失为一种新的设计思路。

 

在 Mars App 的首页 Banner 图以上下轮播进行交互,左侧固定展示定位城市的天气等信息,提高了 Banner 位置的利用率。Banner 与金刚区悬浮在特定的背景上,带给用户沉浸式的感官体验。

 

 

 

 

 

 

十、情感化的氛围营造

 

情感化的设计可以让产品更有温度,增加用户对产品的好感度。配合传统节日或者节气主题进行表达是相对比较普遍的形式,会在产品主题和视觉区域进行氛围营造。

 

在清明节期间体验飞猪旅行 App 时,顶部区域以踏春的场景营造氛围感,还在搜索区域以青团(青团是江南人家在清明节吃的一道传统点心)替代搜索按钮。情感化的设计营造不仅体现了产品的温度,也带给用户对于节日的场景体验。

 

 

 

 

 

 

小结

 

禁锢我们思维的不是我们的技术,而是我们的眼界和设计感知。发现优秀的设计并总结和转化,才能让我们打开禁锢的思维,在优秀的基础上输出更好的设计解决方案。

 

本文对于设计的理解阐述属于个人见解,不足之处欢迎大家留言补充,我们互相进步。

 

 

作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。



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

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

交互设计:我们是不是要把“用户体验”中的“用户”拿掉了

杰睿

精准的分析了UX设计师的技能定位。其实不光是作为一些交互设计师自己不太清楚,领导和客户往往也会忽略这一重要的步骤...

交互设计:我们是不是要把“用户体验”中的“用户”拿掉了?

前言:这篇文章写得特别好,很精准的分析了UX设计师的技能定位。其实不光是作为一些交互设计师自己不太清楚,领导和客户往往也会忽略这一重要的步骤。文章篇幅有点长希望大家能静下心看完,会帮助自己了解更多哦~

什么是用户体验设计师?

我最近从一位来自MathWorks(世界领先的技术计算和基于模型的设计的软件开发商和供应商)的高级用户体验专家那儿看到了一个很棒的广告,这是其中一些节选:

 

  • 与开发团队合作,遵循以用户为中心的设计方法,协同工作,对复杂的问题进行头脑风暴和设计创新的解决方案

  • 向团队成员建议使用哪些可行的方法来回答他们关于用户的问题,并根据项目的需求、目标和约束来设计方向

  • 与团队成员密切合作,进行用户研究,发现痛点,开发用户配置文件,并创建任务列表

  • 在纸上画出功能原型

  • 进行可用性测试,进行用户交流和网上调研,组织调查,并进行你认为合适的其他可行性评估

 

它准确地描述了我在对于用户体验工作的期望。我们从目标人群和竞品那里学习有关项目的一切知识,找到方法来研究用户的需求和目标,与目标人群一起评估这些需求,修改项目计划,并在最终确定产品之前创造出经过用户验证的解决方案。

 

但当我换一份新的工作时(当然那是个例外),我看到许多职位描述都要求具备广泛的用户体验技能,有些人甚至要求具备除此以外的更多技能。但似乎他们真的需要一个能进行原型设计的视觉设计师。

 

来自高级UI/UX设计师的广告:

 

  • 有测试和可用性实验的经验和熟练的交互原型的经验

  • 创造清晰和具有视觉冲击画面的能力

  • 深入了解用户的兴趣和需求

 

听起来他们在寻找一个精通调研、可用性测试和交互原型的人。但更迫切的需要反映在以下关于"附加"的要求中:

 

  • 项目工作能展示强大的用户体验过程和完美的细节视觉和交互设计原则(IA,IxD,排版,布局,层次结构,颜色,组成)

 

你认为他们只会招聘一个可以进行用户调研,画线框图和测试的人吗?或是视觉设计做的很出众的人?也许这反映了“UI”这部分的职位描述。让我们来看看一个纯粹的UX设计师的职位,它要求:

 

  • 优秀的分析能力

  • 在实际用户研究、信息架构、交互设计、以用户为中心的设计过程以及用。户体验原则和技术等方面有丰富的经验

 

听起来不错!但其真面目会在下一个要求中显示:

 

  • 把想法/概念转化为优质的视觉设计

 

如今,用户体验已成为热门词汇。尽管看起来不言自明,但一些公司并没有明白这一点——他们仍然忽视了行为经验,而不是外表和感觉。我看到的许多广告都是在视觉设计上表达了最具体和生动的语言。这让我挠头,怀疑是否只有最成熟、规模最大的公司才真正需要用户体验,并有足够的预算来支持它。难道其他公司只是通过招聘视觉设计师并给他们贴上“UX”的标签,来追个市场热点而已吗?

 

 

远离调研?

用户研究员Alan最近离开了一家总部位于亚特兰大的公司,那里拥有大量的用户体验员工。他在公司的头两年里,参加了全国各地许多不同类型的用户调研。然而,在最后一年,他发现他的调研被抛到一边了。

"我的新老板不关心做调研。似乎整个公司都在降低它的重要性。相反,他们会开办设计思维讲习班,直接进入开发阶段。“任何研究或可用性测试都被留到最后,只是为了验证解决方案。

由于该公司以严厉对待用户体验而闻名,这一点尤其令人不快。

像用户体验(ux)这样流行的词汇会突然变得受人追捧,我想不出在这个行业还有什么比“设计思维”更重要的了。根据谷歌在过去的五年中的数据,对设计思维的网页搜索翻了两倍。

 显示从2012年12月到2017年6月设计思维搜索增加的图表。

 

搜索“设计思维”,2012年12月-2017年6月(资料来源:Google Trends)

设计思维过程的第一步是移情化,就是让用户参与并观察他们如何谈论的,同时观察他们如何真正完成任务。换句话说,这就是用户调研。谁做调研?做用户体验的诸位!不难想象互联网项目负责人和利益相关者绕过这个步骤,直接进入步骤2和3,开始定义问题和开展头脑风暴去解决方案。爽死他们了。

 

 

在“设计思考家最初犯的五个错误,”Dana Mitroff Silvers,一个设计思维驱动者和数据战略家写道,“我经常被客户要求跳过这个阶段,直接进入解决问题的阶段。”

 

她还描述了我有过很多次的经历,公司禁止接近用户!很多时候,silvers的客户都会问他们是否可以跳过这个阶段,因为他们“已经知道他们的受众需要什么,可以为他们代言。”

 

这就说的通了。团队绕过不熟悉的移情阶段,直接进入定义问题及其解决方案,过去一直都是这么做的。而且如果没有在移情方面的训练和指导,或者充分了解,很容易跳过这个阶段。在我接下来的交谈中可以看到,一个公司告诉我他们需要一个兼并的ux/视觉设计师。我问他们是否需要设计思维,产品总监回答:“是的。”他们跳过移情步骤了吗?他同样回答道:“是的。”

 

如果一家公司仅仅遵循设计思维的最后四个阶段——设计、构思、原型和测试——那么一个用户体验设计师是什么样的呢?是一个可以做原型开发的视觉设计师。

分离调研和设计

 

用户体验架构师Alyssa最近与一家大型电信公司签订了用户调研合同。让人失望的是,设计师似乎没有责任跟踪调研结果。调研人员每一到两周进行一次新的可用性测试,然后将测试结果提交给设计师,也不知道设计师是否会遵循建议

 

这似乎不对。

 

我已经注意到越来越多的公司在调研和设计师之间拆分他们的用户体验实践。问题是,“用户体验设计师”通常不仅要处理交互设计,还要处理视觉设计。尽管易于使用的工具的出现使得创建可点击的原型变得容易,但这是两个不同的技能。我期望交互设计师分析行为和工作流程,并充当用户的拥护者;视觉设计师则负责推广品牌。

 

将设计团队分成调研人员和设计师可能会阻碍有效的软件开发。为了真正了解用户,设计师需要培养共情心。他们和其他团队成员可以通过进行用户调研或可用性研究——或者参与调研过程来实现这一点。这就锁定了用户的目标和痛点,并让设计师了解到什么是最重要的点,这将有效帮助如何更有针对性的设计。除了对设计人员有好处之外,定期的用户调研还可以让公司了解用户的期望和行为。如果这些好处能被广泛理解,那公司一定会对共情心和用户调研付出比口头更多的心思了。

 

 

功能原型和测试不足

 

Alan Cooper是视觉基础的创造者和用户体验的领袖,也是《囚犯们管理收容所》一书的作者,他在Twitter上抨击了“原型和测试”的思维模式并表示:“原型和测试不是交互设计”。 Cooper写道交互和测试能让领导感到高兴,但它只是蚍蜉撼大树。尽管它创造了微小的改进,让设计师和他们的领导们充满希望和快乐,但它从来没有真正从大的程度上理解用户或者产品。

 

我们都搞错了

我们已经看到,在设计思维的大旗下,公司可能会跳过移情阶段,回归到一个舒适、独立的设计过程。设计思维确实带来了一个有价值的原型/测试阶段,但在用户研究上的偷工减料却使本末倒置,并错过了一个时机,去进行具体的见解和创新,从而可以将产品推向顶峰。而断断续续的研究只会拖延我们“想要知道我们的用户想要什么”的心态。

 

虽然强调视觉设计的技巧,但分离研究和设计,可能消耗掉那些面向认知将用户体验放在首位的设计师。视觉设计提供了一个重要的初步印象,许多研究表明,人们对第一眼有吸引力的网站的评价通常比较高。但视觉只是用户体验中的一部分。一个经常使用你的产品的用户到底是如何评价的?视觉效果将发挥一定作用,但我认为它更有可能依赖于一个伟大的工作流程——需要反复跟进用户体验的流程。

 

我们到底要什么?

 

我不知道出了什么问题,但我猜是我们的理由还不够充分。我们都含蓄地理解真正的用户体验过程的价值,但开发或市场主管是否也是如此?

 

可能是我们自己被自己的完美所欺骗了。我们已经大幅改善了用户体验的程度,现在在任何手机上都可以找到伟大设计的例子。改进后的开发工具利用了我们创新的交互模式,小工具使平面设计看起来很棒。也许开发领导者觉得他们已经看到了足够好的设计,他们相信他们也可以做到这一点。


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

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

日历

链接

个人资料

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

存档