首页

数据可视化大屏不得不说的设计奥秘——交互动效

蓝蓝设计的小编

编辑导语:我们在工作中经常会用到一些数据,数据可视化可以帮助我们更好的理清数据,动效的设计也更加能体现多维展现数据;本文作者分享了关于交互动效的数据可视化,我们一起来看一下。

数据可视化把相对复杂、抽象的数据通过可视化的手段表达出其内里的信息和规律,促进数据信息的传播和应用,更加直观地传达图表信息;通过可视化,我们的大脑能够更好地抓取和理解有效信息,增加信息的印象。

然而,如果数据可视化设计做的不合理,反而会带来负面影响,影响信息的传播,误导用户的认知;所以在设计的时候需要我们多维展现数据,不仅仅局限于单一层面,这时候动效设计就是很重要的一环了。

我们希望的数据可视化设计是可以让数据通过视觉形式,使信息更容易被接受,让数据内容更容易被理解,让数据信息更容易被记忆。

一、为什么需要交互动效设计

在一个数据项目中,有许多的数据通常都是实时变化的,为了减少数据变化刷新时的突然性以及需要告知用户数据更新,那么动效设计就是必不可少的。

此外,数据可视化大屏服务的主要是B端用户,我们在设计过程中要做到:让设计服务于数据内容,给用户以最为清晰明确迅捷的数据展示。

针对数据可视化大屏的特点,来具体谈谈我们为什么需要做动效设计:

1. 信息体量大

与B端产品一样,可视化大屏的信息体量相对庞大,且更注重用户在单位面积内获取信息的效率,因此我们需要在有限的大屏内尽可能展示多的有效信息。

但是,如果我们仅仅是一味地往数字大屏里“塞”信息,没有对信息结构、展现方式做一个很好的规划,往往庞大的数据量会造成信息堆砌,给用户接受并处理信息带来一定的干扰。

这时候,动效就可以很好的解决这个问题;利用动效,构建出数据大屏的层次,将数据存放在不同的层级页面内,为用户带来更好的数据信息服务体验。

2. 专业操作性强

从目标用户来看,可视化大屏主要面向的是具有一定专业知识的用户,因此产品需要做到专业性高、逻辑严谨、规范性强,用户在使用时按照已有的一套规范流程进行操作,大大提高工作效率。

但专业的操作流程,往往会带来操作链路过长的问题;因此我们需要进行动效设计,一个好的动效可以引导用户更快、更简的熟悉流程、上手操作、完成任务

3. 专业概念多而复杂

可视化大屏往往需要解决一些专业性的问题,同时传达出来的概念多而复杂,如果仅仅靠文字、数据来进行展现,往往会增加用户的认知成本;同时,可视化大屏在帮助业务人员理解以及帮助领导做出决策中起到了很大的作用,我们如何将复杂的专业概念快速传达呢?

这时候“动效”就产生了很大的作用——大数据时代,文字和数据实在会让人感到疲惫,但将其转化为图片甚至是动画,通过概念物化可以帮助用户更快的理解、更好的记忆

二、做什么样的交互动效

根据可视化大屏的这三个特点,具体来说说我们可以制作怎样的动效让可视化大屏动起来:

(以下案例均来源于EasyV数据可视化)

1. 信息排布

信息排布可以解决好信息体量大的问题,在有效的面积内尽可能的展示更多的信息,这就需要设计师在信息展示上进行布局优化。

当出现同一类指标需要应用于不同的场景时,可以利用交互按钮进行指标主体切换,将不同的场景数据存放在同一位置中。

比如,同属于票务销售指标的公园门票与观光车票,可以通过交互按钮进行主体切换,将不同数据的两张图表存放在同一区域块内;既解决了空间存放问题,又让用户更好的理解数据主体,提升了用户的交互体验。

当需要了解更详细的文字、数据信息时,可以通过交互动效进行信息补充。

用户在使用时可以通过总体信息概览关注到整体数据的变化,并不需要时时刻刻知道每个区域具体的数据信息,但有时候需要关注到具体的业务时往往会需要知道更详细的数据;比如,用户在点击新疆区域时可以从大屏中获取到新疆区域的动销品种、新书品种、销售码洋的信息。

将全局信息与局部信息区分开,通过动效设计优化信息的排布,可以帮助用户获得更好的交互体验。

在使用数据可视化大屏时,领导决策者会更关注全局数据,具体业务负责人会更关注局部数据;比如,上图模版中地球视角代表的就是全局数据,指标视角代表的就是局部数据,整个数据大屏中的数据被明确区分开,便于决策者与业务人员更好的使用并理解数据。

2. 引导交互

动效设计可以引导用户进行交互,让用户每进行一次操作就知道接下来该做什么立刻明晰自己的操作得到了什么。

利用动效进行交互引导即使大屏操作链路过长,也可以让用户快速上手操作,减少流程学习时间。

比如,用户的鼠标滑过,字段会高亮响应或者图表块会突出显示,提示用户此处可点击,从而吸引用户点击查看下一层级数据。

进入下一场景后,又会有对应的区域提示用户返回全局或查看其他场景;当做到层层有响应,就能减少用户在每一步操作上的困惑时间,帮助用户快速上手操作流程,并且大大提升工作效率。

3. 概念物化

将抽象的概念利用动效具象化,将会大大降低用户的学习成本,利用动效讲好一个故事,无疑是为可视化大屏景上添花的。

比如,将整个流程通过动效制作成模型展示出来,用户便能直接清晰明了的找到某个环节的数据;如今的数据可视化不再是一味的图表堆砌,更多的设计师开始关注3D建模、动效交互等等,将更逼真的场景搬上大屏,给用户身临其境的真实感。

在数据可视化大屏中,优秀的动效设计不仅仅是炫酷的场景、令人赞叹的动画,更多的是要关注到用户的体验感。

说到底,制作动效还是为了更好的服务使用者,提供更好的交互体验,有时候一个微小的动效设计就能带来用户体验的大幅提升。

 

本文由 @可爱的数据控

 原创发布于人人都是产品经理,未经许可,禁止转载

原文链接:https://www.woshipm.com/pd/4217597.html

题图来自unsplash,基于 CC0 协议

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

image.png

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

Zero-UI:未来设计趋势下设计师的转型之路

蓝蓝设计的小编

 

Zero-UI(零用户界面)作为未来设计趋势,正随着AI技术发展而逐渐融入生活。本文探讨Zero-UI对设计师转型的影响,从多模态交互到情境智能,再到生态系统整合,展示设计师在新技术浪潮下的机遇与挑战。

 

Zero-UI,也就是零用户界面,最近又悄悄地火了起来。事实上,它并不是一个新概念,大家熟悉的智能家居的语音交互,就是非常典型的例子。随着AI技术的发展,它将越来越多地融入到我们的生活和工作场景中,未来设计趋势也将随之转变。

3月份还发生了一件事,也可能会影响设计师未来工作方式和产出:谷歌Gemini作为新一代多模态AI模型,让手机「睁眼看世界」成为现实。它的实时屏幕共享功能,能准确识别屏幕上的内容并实时互动;并且可以打开摄像头与物理世界交互,比如帮用户给釉陶「上色」。

Gemini支持文本、图像、语音、视频的实时跨模态理解与生成,Zero-UI追求的”脱离屏幕的多元交互”高度契合,极有可能会重新定义人机交互的未来范式。举个例子,当我们双手提满购物袋走进家门时,门口的终端检测到你的手不太方便,便会自动触发智能门锁的非手动开门功能,比如人脸识别+语音交互。换句话说,这种组合将推动体验设计从”如何操作设备”转向”如何通过环境理解意图,并通过优于界面操作的交互方式达成目标”。

可以说,Zero UI将是一场必然的设计变革。

01 什么是Zero-UI

传统图形用户界面(GUI)依赖屏幕、键盘和触控操作,用户需要通过视觉和触觉的显式交互完成任务。而Zero-UI的核心在于“无界面化”,即通过语音、手势、环境感知等自然方式与设备交互。它的本质是 “让机器适应人类的行为,而非人类适应机器的逻辑”。

02 Zero-UI对设计趋势的影响

从视觉主导到多模态融合

传统设计以视觉为中心,设计师需精通色彩、布局和动效;而在Zero-UI时代,交互设计的维度扩展至语音、触觉、手势、环境感知等多个模态。例如,微软Kinect通过骨骼追踪技术识别用户动作,谷歌Project Soli利用微型雷达捕捉细微手势,早在2016年,谷歌I/O大会上,神秘部门ATAP(Advanced Technologies and Projects)就展示了Project Soli技术,这是一项基于毫米波雷达监测空中手势动作而实现的新型传感技术。

从功能导向到情境智能

GUI时代的设计目标是“如何让用户快速找到功能”,而Zero-UI的设计逻辑转向“如何让设备主动理解用户需求”。情境感知(Context Awareness)成为关键,例如智能家居系统通过分析用户位置、时间、行为习惯,自动调节灯光和温度。这种转变要求设计师从线性流程设计转向非线性场景设计,考虑设备在复杂环境中的自适应能力。

从独立设备到生态系统整合

Zero-UI的终极目标是构建无缝连接的智能生态系统。以小米智能中控为例,用户通过一个语音指令即可联动空调、灯光、安防等多台设备。

03 设计师如何应对变化

从视觉设计到多感官设计

这很好理解,未来的体验设计中,设计师不仅要关注用户看到的内容,还要考虑用户在交互过程中听到的、触摸到的,甚至是感受到的环境变化。举几个例子:

1.Microsoft Mesh(混合现实会议)

  •  场景:远程协作
  •  设计亮点:
  •  全息投影参会者+空间音频(声音随头部转动变化)
  •  触觉手套反馈虚拟握手力度
  •  环境光照自适应(虚拟阴影与现实光线同步)
  •  技术:Hololens 2+触觉手套+AI场景建模
  •  体验价值:消除地理隔阂,创造”面对面”协作感

2.BMW iDrive 8.0(车载交互)

  •  场景:智能汽车
  •  设计亮点:
  • 隔空手势控制(如手指画圈调节音量)
  • 配合不同操作触发3D音效(低频”嗡鸣”反馈成功识别)
  •  技术:ToF传感器+个性化声场算法
  •  体验价值:减少驾驶员视线偏移,提升行车安全

(二)形成随地大小想的习惯

在 Zero-UI 的背景下,用户不再需要适应设备的操作方式,而是设备要适应用户的自然行为和习惯。生活和工作中,处处都是创意迸发的机会,比如我们的「衣食住行」,都是我们想象和创意的对象:

  • 「衣」-VR虚拟衣橱:通过VR/AR试穿虚拟服装,语音指令切换风格,AI根据场合、天气推荐搭配;3D扫描身材数据,推荐/定制合身衣物。
  • 「食」-AI营养师 + 语音厨房:

语音识别操控智能厨具,AI根据健康数据(如肠道菌群报告)生成菜谱,VR教程手把手教学。说“低脂高蛋白晚餐”,冰箱自动推荐食材,联动烤箱同步预热。

  • 「住」-家庭情绪疗愈空间:

生物传感器监测情绪,AI播放对应音乐/光线,VR引导冥想;释放安神香氛(如基于用户DNA定制的舒缓分子)。

  • 「行」-汽车驾驶虚拟旅行:

VR+嗅觉模拟技术实现模拟“环球旅行”,AI导游根据兴趣定制个性化路线;生物反馈调整虚拟场景。

(三)拓展眼界,了解新技术与跨学科知识

Zero-UI 的实现依赖于多种技术,如语音识别、人工智能、生物学等,设计师需要对这些技术有一定的了解。但是了解到什么程度呢?我认为刚开始不需要花太长时间去研究它们的理论,毕竟隔行如隔山,学一个新技术不是那么简单的事情。所以更多地是关注这些技术的最新动向,有哪些新产品,发展到了什么程度,在需要用到的时候想得到。这个时候,AI可以帮助我们了解这些知识,以下就是DeepSeek给到的信息,可以作为一个基础的了解,在实际运用的时候再深度研究。

04 写在最后

正如谷歌首席执行官 Sundar Pichai所说:展望未来,下一阶段,“设备”这个概念将消失。现有的用户体验和设计越来越趋同,设计师的价值感在逐渐流失,而Zero-UI 的发展对设计师是个难得的转型机会,大家将有更多机会创造出更加自然高效或是生动有趣的产品体验。

 

本文由人人都是产品经理作者【58UXD】,微信公众号:【58UXD】

原文链接:https://www.woshipm.com/share/6206970.html

原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Pixabay,基于 CC0 协议。

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

image.png

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

解码数据洞察新境界

蓝蓝设计的小编

编辑导语:在数据爆炸的时代,如何让复杂的数据变得易懂、易用,从而辅助高效决策?这考验着大数据可视化的设计能力。本文以电商销售数据可视化设计为例,深入剖析如何运用 UI 设计技巧,实现数据的直观呈现与交互探索,为你揭开数据背后的价值。

在当今数字化商业浪潮中,数据如同企业的 “燃料”,驱动着业务决策与发展。然而,海量的数据也如同一座迷宫,让许多从业者迷失其中。就拿电商行业来说,商家们每天都会积累大量销售数据,涵盖商品销量、用户购买行为、市场趋势等多个维度。如何将这些复杂的数据转化为清晰、有价值的信息,成为了提升竞争力的关键,而大数据可视化与 UI 设计的融合则是破局的 “钥匙”。
 

一、电商数据洞察的关键维度

电商运营者在分析销售数据时,最为关注的核心维度主要有三个:商品销售表现、用户购买行为以及市场动态变化。商品销售表现直接关系到业务的盈利能力,包括销量、销售额、库存周转率等指标;用户购买行为则揭示了消费者的偏好与需求,像购买频率、客单价、购买时段等信息至关重要;市场动态变化涉及竞争对手、行业趋势等外部因素,时刻影响着企业的市场份额。

以一家服装电商为例,在销售旺季来临前,运营团队需要快速了解不同款式服装的销售趋势,哪些款式销量增长迅速,哪些库存积压严重。但传统的表格数据密密麻麻,很难在短时间内获取关键信息。这时,借助大数据可视化,将数据以直观的图表形式呈现,就能让问题一目了然。

639b97a81f0ac0feb8798dad602a722.png

 

二、交互驱动的数据探索体验

为了让用户能更深入地探索数据,交互设计在大数据可视化中扮演着重要角色。通过交互操作,用户可以主动挖掘数据背后的细节,发现潜在的规律和机会。

在电商销售数据可视化界面中,常见的交互方式有筛选、排序和钻取。比如,运营者可以根据不同的维度进行筛选,如按照时间范围筛选特定月份或季度的销售数据,也能依据商品品类、价格区间等条件进行筛选。排序功能则能帮助快速找到销量最高或销售额增长最快的商品。而钻取操作更强大,当用户点击某个数据点时,可以查看更详细的子数据,像某一款热门服装的具体销售地区分布、不同年龄段的购买比例等。

f6479818d1b92f5bf1315d3fab936e4.png

 

三、个性化定制:让数据 “因材施教”

不同的电商运营角色,对数据的关注点各不相同。店铺老板可能更关注整体的销售业绩和利润,运营经理侧重于流量转化和用户留存,而商品采购人员则关心商品的库存和补货需求。因此,大数据可视化设计需要支持个性化定制,满足不同用户的特定需求。

通过设置用户权限和自定义视图功能,每个角色都能根据自身需求调整数据展示的方式和内容。例如,运营经理可以创建一个聚焦于用户行为路径的视图,将用户从进入店铺到下单购买的各个环节数据进行整合展示;采购人员则能定制一个突出库存预警和商品销售速度的界面,方便及时安排补货。

70bedd82b1cda6eee2749424ed5f69f.png

 

四、数据可视化的未来展望

随着技术的不断进步,大数据可视化与 UI 设计的结合将更加紧密,功能也会愈发强大。未来,可能会引入更多智能化的设计,比如根据用户的历史操作和偏好,自动推荐最佳的数据展示方式;利用增强现实(AR)和虚拟现实(VR)技术,让用户以沉浸式的方式探索数据,获得全新的体验。

在电商领域,这意味着运营者能够更精准、更高效地把握市场动态,及时调整策略,提升业务竞争力。但要实现这些,需要不断探索和创新,在数据可视化设计中融入更多人性化的思考,让数据真正为用户所用。
 

解锁交互密码:设计如何让用户「上瘾」

蓝蓝设计的小编

 

 

一、设计误区:美≠好


在 UI 设计与交互设计的世界里,不少新手设计师都有个误区,觉得设计就是把界面做得美美的,用户肯定会喜欢。可实际上,设计远不止这么简单,真正厉害的设计得从用户思维出发,为用户创造价值。
 

二、生活中的交互逻辑


日常生活中的很多场景,都藏着交互设计的底层逻辑。比如逛超市时,为什么牛奶、面包这类常用品总被放在最里面?这背后其实是对用户行为和思维的巧妙洞察 —— 让顾客在寻找必需品的过程中,不自觉被沿途的促销商品吸引,增加购买欲望。这种对用户心理的把握,与 UI 交互设计的原理如出一辙。
 
b287969ba8183e61b51a6797083687c.png
 

 

三、用户的思考模式


心理学上,人类决策分为「快思考」和「慢思考」两种模式。快思考是基于经验和直觉的条件反射,能帮大脑节省能量;而慢思考则在遇到复杂问题或涉及自身利益时才会启动。同样,用户在使用产品时,大部分时间都处于「感性决策」状态,只有当体验受阻或面临风险时,才会切换到理性模式。

 

四、提升交互体验的技巧


掌握了用户的思维模式,设计师就能通过巧妙的设计让用户保持愉悦的交互体验。比如,清晰展示状态和进度条能缓解用户等待时的焦虑 —— 下载视频时,动态进度条搭配剩余时间提示,让用户对等待时长「心中有数」;而个性化推荐功能则能精准击中用户兴趣点,像音乐 APP 根据听歌记录生成的专属歌单,总能带来「挖到宝藏」的惊喜感。

add81d59baa6488a683afab26c00bdf.png

信息传递的精准度,也是交互设计的关键。如今的电子产品介绍页不再是单调的参数罗列,而是搭配操作视频、常见问题解答和真实用户评价,用更直观易懂的方式帮助用户快速了解产品。同时,优秀的设计还会主动「预判」问题:当手机网络异常时,系统不仅弹窗提醒,还能自动检测故障并提供修复建议,让用户无需自行诊断。

 

五、设计的本质回归


但设计的本质,始终是「解决问题」优先于「视觉美感」。一款办公软件即便界面华丽,但如果操作复杂、功能卡顿,用户也会果断弃用。只有将实用性与美观性深度融合,才能打造出真正「好用」的产品。

在 UI 设计与交互设计的赛道上,持续深挖用户需求、打磨细节体验,才能让设计从「能用」走向「好用」,最终成为用户爱不释手的「心头好」。
 
 

交互设计的「破茧」:从 GUI 到 IUI

蓝蓝设计的小编

在这个科技飞速发展的时代,咱们每天都离不开各种电子设备,手机、电脑、平板…… 而与它们交互的方式,也在悄悄发生着翻天覆地的变化。今天就来和大家聊聊交互设计领域的新宠儿 —— 意图用户界面(IUI),看看它如何从传统图形用户界面(GUI)手中接过接力棒,重塑我们的数字生活。

以前,我们和设备交互靠的是 GUI,点点图标、滑滑屏幕、敲敲键盘,像给机器下一道道明确指令。比如想开灯,就得找到对应的 “开灯” 按钮。但 IUI 可不一样,它就像个懂你心思的朋友。下班到家,还没等你开口,灯光自动调亮,空调调到舒适温度,音乐也轻轻响起,好像设备能 “猜” 到你累了一天,就想放松放松。这就是 IUI 的神奇之处,它不再只关注你做了什么操作,而是琢磨你为什么这么做。

df641184dd13b5d597c3cf3afa3e573.png

IUI 能这么智能,背后离不开 AI、机器学习和大数据分析的支持。它会收集好多信息,像你平时的行为习惯、用的什么设备、周围环境咋样,还有你直接告诉它的喜好之类的。收集来这些信息后,经过处理和分析,再用机器学习模型 “学习” 规律,结合当下情境,就能做出最贴心的回应。比如地图 App 在你每天上班时间,主动推送路况信息,帮你提前规划路线。

在如今 AI 蓬勃发展的时代,IUI 成为交互设计的新趋势是必然的。AI 的强大能力为 IUI 提供了技术基础,让它能处理海量数据,精准洞察我们的需求。而且 IUI 让 AI 不再 “高冷”,普通用户用语音、自然语言就能轻松和 AI 互动,解决了 AI 落地的难题。现在软件功能越来越复杂,信息多得让人眼花缭乱,IUI 能帮我们筛选信息、简化操作,还能根据每个人的情况提供个性化服务。就像电商平台,根据你的购物历史和当下需求,推荐真正合你心意的商品。
 
ed14d174ad4ab4721a3e08917441d0c.png
 
IUI 的出现,让产品设计和交互设计都发生了大变革。产品设计不再只盯着功能按钮,而是围绕用户的最终目标,努力让产品主动服务。个性化成了产品的核心竞争力,音乐 App 根据你的听歌习惯推荐专属歌单就是很好的例子。在交互设计方面,交互方式变得更多样自然,语音、手势、眼神都能和设备互动。以前在线购物要走好几个步骤,现在用 IUI,直接说 “买上次的洗发水”,系统就能一步到位完成购买,方便快捷。

不过,IUI 发展也面临一些挑战。AI 理解我们意图时偶尔会 “跑偏”,数据隐私和安全问题也让人担心,算法可能存在偏见,用户还希望对 AI 的决策有更多了解和控制权。但这些困难不会阻挡 IUI 前进的脚步。未来,IUI 和 GUI 会携手合作,GUI 提供基础交互框架,IUI 赋予交互智能,共同为我们带来更棒的体验。

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

image.png

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

 
 

银行 APP 设计新探:细节告别交互困局

蓝蓝设计的小编

最近深度体验了多款银行 APP,发现优秀的 UI 交互设计真的能让使用体验直线飙升!今天就和大家分享那些让人惊艳的交互设计细节,原来银行软件也能这么 “懂人心”!

一、数据可视化:让金融数据会 “说话”

传统银行界面里,资产总览可能就是一串冷冰冰的数字,让人看完毫无波澜。但在一些采用先进交互设计的 APP 中,数据可视化彻底改变了这种局面。比如某银行 APP 的资产看板,运用动态折线图实时展示近 30 天的资金变动趋势,当收益上涨时,折线会以流畅的动画向上攀升,还搭配轻快的音效,直观又有趣;而当支出增多时,折线下滑的同时,图表区域会变成醒目的黄色预警色,提醒用户注意消费情况。

图片1.png 

再比如理财产品对比界面,不再是密密麻麻的文字介绍和参数表格。设计师将不同产品的风险等级、预期收益、投资周期等关键信息,转化为雷达图、柱状图结合的形式。用户只需轻轻滑动屏幕,就能 360 度旋转雷达图,全方位对比各产品的优劣势,这种可视化交互让复杂的理财选择变得一目了然,就像有个专属理财顾问在身边为你讲解。二、人性化交互流程:告别繁琐操作

过去在银行 APP 转账,可能要经历选择转账类型、输入卡号、填写金额、核对信息等多个步骤,流程冗长且容易出错。而经过精心设计的交互流程则大不相同。某头部银行 APP 采用了 “智能转账” 交互模式,当用户点击转账按钮,系统会自动识别用户最近的转账对象和金额,将其展示在快捷转账列表中,用户只需一键点击,就能快速完成转账操作。如果是给新用户转账,在输入卡号时,系统会实时校验卡号有效性,并通过颜色变化提示用户输入是否正确,避免因输错卡号导致转账失败的尴尬。

图片2.png 

在账户管理方面,下拉刷新的交互方式已经屡见不鲜,但有一款银行 APP 却玩出了新花样。当用户下拉刷新账户余额时,界面会出现一个可爱的小动画,比如一只小钱包 “咻” 地打开,金币 “哗啦” 掉落,同时余额数字以动态效果更新。这种充满趣味性的交互,让原本枯燥的刷新操作变得生动起来,给用户带来了愉悦的使用体验。

三、沉浸式用户体验:细节之处见真章

交互设计的魅力还体现在对用户情感的关注上。在一些银行 APP 的登录界面,除了常规的密码输入方式,还加入了指纹识别、面容 ID 等快捷登录方式,并且在用户选择这些方式时,会有柔和的光影效果和轻微的震动反馈,仿佛在和用户进行 “亲密互动”。当用户忘记密码时,找回密码的流程也不再是冷冰冰的提示,而是通过引导式的交互界面,一步一步带领用户完成身份验证和密码重置,整个过程就像在和一个贴心的客服人员对话。

图片3.png 

这些优秀的 UI 交互设计案例,不仅让银行 APP 变得更加易用、有趣,也真正实现了从 “功能导向” 到 “用户体验导向” 的转变。希望未来能看到更多银行在交互设计上发力,为我们带来更出色的使用体验!大家在使用银行 APP 时,有没有遇到过哪些让你印象深刻的交互设计呢?欢迎在评论区分享!

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

image.png

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

交互设计思维:用户目标与交互目标

涛涛

前面的文章我们分享了交互设计思维,这篇文章,我们来看看用户目标与交互目标。交互设计的核心,就是帮用户拆解这些目标并找到最优路径,让他们觉得“这事儿没那么难”。

全球化UI设计:全网最全小语种出海产品设计干货

清阳

出海产品面临着语言、文化和用户习惯的巨大差异,这对UI设计师提出了更高的要求。本文为出海产品的UI设计提供了全面的干货指南,从文字、图标、色彩、图案到交互手势等多个角度,详细拆解了设计师在面对小语种和不同文化背景时需要注意的关键点。

随着TikTok的海外关注度和影响力逐渐扩展、小红书在海外友人的媒体圈炙手可热,国内的互联网市场逐渐趋于饱和,互联网产品纷纷向东南亚、非洲、拉丁美洲、欧洲扩展商业版图,这也为UI设计师创造了新的机遇。

对于出海产品而言,UI设计师需要有基础的语言文化了解,在此基础上去进行设计才能真正满足海外用户的需求,本文主要从UI的文字、图标、色彩等几个角度来拆解设计师在设计海外项目时需要注意的关键点,避免因为文化习俗差异而影响产品的易用性。

目录:

1.小语种文字:超长文本的处理规则、镜像语言、小语种适配检视技巧

2.图标:需要镜像的典型图标、不需要镜像的典型图标、图标特例

3.颜色

4.图案:禁忌图标、禁忌手势、禁忌物品、禁忌动物

5.交互手势

一、小语种文字

① 超长文本的处理规则

当在某些语种下出现界面用语超长显示不完整的情况,应按照如下优先级进行处理:

(1)精简界面用语

在保证可理解的前提下,考虑对该语言的翻译进一步精简,采用其他较短的近义词或者精简表达,如“save number”在界面用语超长时应精简为“save”。

(2)动态布局

当控件周围没有其他控件冲突时,控件可根据界面用语长度动态扩展,如按钮。

(3)缩小文字

将文本逐级缩小,建议最小缩小到18sp/dp。

⚠️并列的层级关系,文本超长时所有文字需要同时缩小字号

(4)多行显示

在设计中文时,提前考虑预留小语种换行空间,⚠️按音节换行。

(5)跑马灯

避免同意界面使用过多的跑马灯,1-3个为宜。过多的跑马灯会分散用户注意力,界面显示混乱。跑马灯占用系统资源,影响性能,过多的跑马灯可能会导致卡顿。

(6)打点截断

显示不下到文字截断显示并在末尾增加“…”

截断的使用场景:

A.用户自定义内容,如文件名,相册名

B.某处显示空间有限,但可以在本层级/上一层级/下一层级查看到全量内容。

② 镜像语言

阿拉伯、波斯语、乌尔都语、希伯来语等语言的书写都是从右向左书写,和当今世界主流语言(如英语)从左向右书写的方向相反。

受文字书写方向的影响,阿拉伯语言的用户对于左右逻辑的认知和英文等LTR (left to right)完全相反,比如习惯将右侧作为开始,左侧作为结束。

为了支持RTL语言和用户习惯特点,在UI设计中,需要在文本,界面布局,手势操作和动画,图标等交互元素中满足RTL的特殊要求。

③ 小语种适配检视技巧

(1)字串显示——检视语言:西班牙语(拉丁美洲)

(2)大字体显示——检视语言:西班牙语(拉丁美洲)

二、图标

① 需要镜像的典型图标

(1)后退,前进

(2)显示前进方向的图标,如:骑车 发送 进度条。

▲ 阿拉伯语-显示前进方向

(3)右侧具有滑块的音量图标应当镜像,滑块应从右向左显示,如:音量调节。

▲ 阿拉伯语-音量调节

(4)表达含有文本含义的图标,如:对话框、书写、备忘录。

▲ 阿拉伯语-文本含义图标

② 不需要镜像的典型图标

(1)虽然时间的线性表示在RTL中被镜像,但圆形时间方向不是。对于RTL需要,时钟仍然是顺时针转动,时钟图标或带有箭头指向顺时针图标的刷新图标不应该镜像。

▲ 阿拉伯语-带有时间含义的图标

(2)国际标准的图标不需要镜像,如蓝牙。

(3)拟物图标不需要镜像,如SIM卡。

 (4) 斜线不需要镜像 ,如静音图标。

▲ 阿拉伯语-特殊免镜像图标

③ 图标特例

(1)亮度图标需要镜像:英文习惯认为左边暗,右边亮;阿拉伯语习惯认为左亮,右边暗。

(2)阿拉伯语有自己的问号❓

(3)阿拉伯语am.pm的位置要移动到时间左侧

三、色彩

1.中东市场:绿色为主、火红与黄色慎用。绿色象征吉祥,但叙利亚视黄色为不祥之兆,伊朗不喜爱蓝色。

2.非洲市场:禁忌多样。黑色普遍被认为不祥,红色在乍得、尼日利亚等国也不受欢迎。

3.欧洲市场:白色神圣,黄色慎用。

四、图案

禁忌手势

禁忌物品

禁忌动物

五、交互式手势

RTL语言中,带左右滑动方向的图片或者是左右滑动展开功能选项,应遵循与英文界面相反的镜像规则。

汉语-左滑删除

以上就是从小语种文字、图标、颜色、图案、交互手势等方面总结的出海产品设计干货,希望能让你有所收获~

本文由人人都是产品经理作者【Clippp】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

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

引导帮助设计:让用户顺利进入下一交互层次的有效方法

清阳

大部分产品中都含有一些引导帮助的功能,这些功能有什么作用呢?对于设计者来说,应该秉持怎样的初心来设计呢?目前,引导帮助功能又有哪些常见的分类呢?带着这些问题,我们一起走进这篇文章,看看作者为我们的分享。推荐相关人员阅读与学习。

一、用户怎么知道此功能的使用方式?

前几天眼睛不太舒服,去医院做了一个检查(视疲劳导致)。

因为要走商保,所以需要使用社保卡,之前我记得社保结算都需要去人工窗口,我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保,要我扫她胸前挂的码(可以快速到达电子社保二维码界面),扫完她就开始帮我点击操作。

她觉得我应该不会操作,所以让我看一遍,其实这个操作并不难,只是因为我不知道自助机上可以用,自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子,后面好几个人都还是去了窗口。

在B端产品中也有很多类似问题,用户不知道有这个功能、也不知道这个功能怎么使用,特别是一些数据类产品,专业性比较强。产品、技术都认为用户和他们一样都懂,实际上并不是,这个时候你需要提供一些邀请,引导用户进行使用。

邀请就是引导用户进行操作前的提醒和暗示,通常包括实时的提示信息和预期功能,以表明在当前界面或下个界面可以做什么,这是成功的交互式界面关键所在。

例如:飞书-我的空间,当鼠标停留在可编辑区域上时,就会实时地显示邀请(复选框),这个例子的缺点是鼠标如果不处于相应区域上,就不会显示邀请。

引导帮助在产品中的作用

另一种方案是任何时候都显示邀请,例如:石墨文档-我的桌面,复选框一直显示。

引导帮助在产品中的作用

二、静态邀请

静态邀请就是通过直接在页面上给出交互提示,可以让用户随时看到期望的界面功能。

静态邀请主要有两种模式:引导操作邀请、漫游探索邀请。

1. 引导操作邀请

01 步骤引导

例如:华为云HECS服务器产品就给出1、2、3操作步骤引导帮助在产品中的作用

引导操作会占据页面较大的空间,同时也会吸引用户的眼球。所以在设计时需要思考一下,你希望引导用户执行什么操作,用户是否可以多次查看,这样有利于设计出明晰的页面和信息层。

02 白板引导

另一种引导操作邀请叫白板式引导。

意思很明确:现在只有一个空白页面,需要引导用户创建内容。

引导帮助在产品中的作用

引导帮助在产品中的作用

利用空白区域“变废为宝”,如何对该区域应有的功能给出提示,是诱导用户创建内容(填补空白)的有效方式。

2. 漫游探索邀请

与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能,怎样才能保证用户恰当地使用新页面,同时发现新添加的功能呢?漫游邀请是向用户介绍新功能最好的方法。

引导帮助在产品中的作用

最佳实践:

  1. 漫游功能用户可能不想用,所以需要有可选功能,也就是可以跳过或关闭;
  2. 漫游功能不是“创可贴”不要乱用,只有针对精心设计的界面使用才能发挥价值;
  3. 设计漫游的关键在于保持简单,让它容易开始也容易停止。漫游应该只是页面本身的一个演示。脱离页面的“教程”式漫游很难起到作用。

三、动态邀请

静态邀请适合提示用户当前界面中包含什么功能。然而,许多调查试验表明,用户经常不会阅读指导说明性的文字。而在用户交互过程中,在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户,并引导他们继续下一步操作。

1. 悬停邀请:在鼠标悬停期间发出邀请

吸引用户的一种方式是通过鼠标悬停来显示邀请

引导帮助在产品中的作用

例如:飞书消息列表鼠标移入后, 背景变化的同时会有一个“勾”图标来吸引用户,鼠标移入上去后提示可以点击完成,点击后消息移除列表。

最佳实践

  • 当操作没有内容重要,而且希望界面整洁时,使用悬停邀请。
  • 在实现悬停邀请时,可以通过改变光标、改变背景和显示提示条共同配合表明所邀请的操作。
  • 在交互的不同阶段,尽量点缀一些用户熟悉的元素,通过熟悉的概念引出新概念有助于用户快速理解新功能。最常见的元素是按钮、链接、下拉箭头和众所周知的图标。
  • 通过距离表明邀请操作的目标对象。

2. 预期功能邀请:使用熟悉的事物引出新事物

唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手,门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性,不过,由于习惯、术语、图形及一致性等原因,用户能够在某种程度上感觉到他们可以操作这些元素。

引导帮助在产品中的作用

引导帮助在产品中的作用

例如:第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标,就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。

预期功能邀请之所以有效,是因为利用人们已知的习惯与认知引入交互,从而让用户顺利完成一连串操作。

最佳实践

  • 通过人们习以为常、司空见惯的概念来引出新的、不熟悉的交互方式。
  • 使用可感知的预期功能来给出邀请提示(例如,用向下的箭头表示可以打开下拉菜单,而用向上的箭头表示可以关闭菜单)
  • 把邀请安排在适当的上下文中,特别是要靠近交互的主体。

3. 推论邀请:用于交互期间

设计邀请时怎么才能猜测用户的想法,也是一项重要挑战。如果用户下一步可能会执行多种操作,而事实上又不可能准确判断用户想法,那么面临的困难就会比想象的大很多。

在google sketchup ( 3D)绘图工具中,当鼠标点击某个点后,进行第二个点连接时,会有多种可能性,这个时候系统也不确定用户会怎样连接,但会给出对应的提示,比如:端点、中点、背面、侧面等点位来辅助用户进行连接。

引导帮助在产品中的作用

例如:这种工作流场景个人觉得也算是一种,点击“加号”右侧会滑出面板,给出你可以添加的动作。

这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。

4. 更多内容邀请:用于邀请用户查看更多内容

图片类型的更多邀请,例如:站酷相关推荐

引导帮助在产品中的作用

文字更多邀请,例如:QQ邮箱右侧最近联系人

引导帮助在产品中的作用

5. 邀请的优点

精心设计的应用能够通过邀请体现出各自的细微差别,无论是静态还是动态,都是引导用户顺利进入下一个交互层次的有效方法。

谢谢观看!

作者:夜莺YEAH;公众号:夜莺B端UX设计

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

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

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

B端拖动排序的多种场景及交互

清阳

排序在B端和C端产品中都比较常见,随着用户对产品使用的易用性提高,排序在产品交互中也在变化。本文分享B端拖动排序的多种场景及交互,希望对你有所启发。

很久没有更新B端产品相关的文章了,近期工作项目中做了很多新需求,接触了更多业务,也学到了一些新的交互,后续将会根据我在实际工作项目中遇到的需求展开总结。

B端产品设计具有较高的业务属性,所以对于ui设计师而言也需要有较强的业务知识,在完全理解需求后,再针对业务场景、用户体验、交互、布局合理、易用性等多维度展开设计。

这一期主要分享关于B端产品中拖动排序功能。

排序在B端和C端产品中都比较常见,前期排序有通过点击上下箭头排序,但是这样的交互易用性较差,随着用户对产品使用的易用性提高,这种排序方式在产品交互中已经渐渐的被舍弃。

目前对于排序功能,使用更多的是通过拖动排序,通过选中数据后长按鼠标右键,上下拖动来完成数据的排序。

一、拖动排序的多种组件和交互

在B端产品中,我目前接触的拖动排序的组件包含以下两个大类:

  1. 一级目录常规排序(非树结构)
  2. 树组件多层级排序

对于分类2【树组件多层级排序】又包含两个小类:

  1. 同层级排序(横线高亮显示即将放的位置)
  2. 跨层级排序

对于小分类【跨层级排序】又可以细分为四个场景:

  1. 父级未展开时:拖动到父级、父级整行高亮
  2. 父级未展开时:拖动长按停留在父级时,父级自动展开子级
  3. 父级已展开时:拖动到子级时,父级整行高亮,拖动到的位置出现高亮横线
  4. 父级已展开时:拖动到子级文件夹时,父级不需要高亮,子级文件夹目录整行高亮(子级已展开和未展开的交互与父级同理)

二、拖动排序场景和交互实操

上面已经总结了排序的组件和场景,下面我们就一起来看看不同组件在不同场景下的具体交互,通过实际项目设计详细介绍拖动排序的功能。

1. 一级目录常规排序(非树结构)

数据默认展示类似列表数据一样,平铺左对齐排版,当拖动排序时,鼠标移动到需要排序的数据行,长按鼠标右键并拖动数据上下移动,被拖动的数据原位置置灰(也可以直接消失)。

同时,被拖动的数据跟着鼠标走,移动到其它位置时,在将要放下的位置出现蓝色高亮分割线(还可以做到所有数据实时变化位置效果)这样能让用户更加直观地看到数据位置的变化。

此类需求一般是针对一级数据排序,数据结构比较简单,没有文件夹多级树状结构,下面列举几个工作中遇到的需求场景,以及分享几个其它产品中遇到的交互,便于大家理解。

由于B端产品具保密性,所以下面分享的截图非工作实际数据,大家只要明白需求场景和交互即可。

需求场景1:产品业务中有很多的表单,表单中的字段顺序在不同企业中不同,应该如何设计呢?

在设计时,可以将表单所有的字段罗列出来,然后用户通过自定义排序字段即可,这里的交互就可以直接采用上下拖动排序。

需求场景2:飞书中有多个应用,对于每个用户而言,自己所关注的应用不同,优先级不同,该如何设计?

同理,飞书也是对用户个人的应该设计了拖动排序功能,可以根据自己关注的应该排序应该的位置,从而更快的找到自己常用的应用,提高工作效率。

无论是对于列表数据还是卡片数据的排序都可以采用这种拖动排序的交互。

2. 树组件多层级排序

(1)同层级排序(横线高亮显示即将放的位置)

树组件同层级排序默认展示和拖动时效果与一级目录常规排序一致。

(2)跨层级排序

父级未展开时:拖动到父级、父级整行高亮

如下图,当需要把文件夹【数据名称显示004】放在【数据名称显示003】文件夹中,鼠标拖动数据放在【数据名称显示003】时,【数据名称显示003】整行会出现蓝色高亮,表示被拖动的数据即将放在该文件夹内。

父级未展开时:拖动长按停留在父级时,父级自动展开子级。

如下图,按照上面的步骤拖动时,当鼠标一直停留在【数据名称显示003】的位置时,该文件夹会自动展开二级目录,这是一个拖动排序比较友好的交互,可以让用户再次看到该目录下的数据结构,并快速一次性选择需要放的位置。

父级已展开时:拖动到子级时,父级整行高亮,拖动到的位置出现高亮横线。

如下图,在上图基础上,当鼠标继续拖动数据,想要放在二级目录中时,数据一级目录同样会显示高亮,告诉用户当前数据的层级关系。

同时,二级数据中会出现蓝色高亮分割线,标识被拖动的数据即将放的位置,这样就能清晰的知道被拖动的数据将放在那个目录的那个位置。

父级已展开时:拖动到子级文件夹时,父级不需要高亮,子级文件夹目录整行高亮(子级已展开和未展开的交互与父级同理)。

当需要将数据拖动到二级文件夹内时,只需要高亮二级文件夹即可。

关于树组件多层级排序的使用场景和交互比较复杂,上面我根据不同场景分别列出了交互展示方式,下面再根据实际业务需求列举案例说明,因为此场景主要是针对交互和显示,所以我就直接拿动图展示,便于大家理解。

本文由 @设计小余 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

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

日历

链接

个人资料

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

存档