首页

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

ui设计分享达人 用户研究

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


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

AI创作工具的「可控性」与「用户体验」博弈

ui设计分享达人 设计管理与成长

这两年生成式ai爆发性增长并且重塑数字创作的工具生态。从文本生成、图像视频生成以及模型训练,可以说无法离开ai,ai的介入让创意生产变得前所未有的高效简单,但同时也带来了体验上的困境,例如我们在使用自动化生成便利的同时,还能保持对创作过程的深层控制?比如在进行文生图或者线稿转3D的流程中,我们如果要控制某个部分的设计表现,需要利用多个方法才能完成,仅仅通过提示词的修改并无法完成,这个矛盾在之前的SD等开源模型中非常明显;
AI创作工具的「可控性」与「用户体验」博弈
 
 
 
算法模型的开放让设计达到了无限的可能,但更多设计师却被迫在控制权和易用性之间做出了妥协,当重复一个流程无法生成满意的图象时,大多情况都是基于一个“不满意”的图像进行优化,我把这个理解为用户心理上的妥协;
AI创作工具的「可控性」与「用户体验」博弈
 
 
以节点式工作流工具ComfyUI为例,其通过可视化编程赋予用户对Stable Diffusion生成流程的精细控制权,允许自由组合模型、调节参数、插入预处理模块,成为专业创作者的首选工具。然而,这种高度自由的设计也带来了显著的认知负担:错综复杂的节点连线、晦涩的参数术语、缺乏引导的开放式画布,让0基础设计望而止步;数据显示,超过67%的新用户在首次使用ComfyUI时因“界面混乱”而放弃进一步探索(来源:ComfyUI社区调研)。这一现象揭示了生成式AI工具设计的核心矛盾——系统的灵活性与用户的心智模型之间如何实现平衡?
AI创作工具的「可控性」与「用户体验」博弈
 
 
一、核心问题与矛盾
1、设计师对“控制权”的需求本质
安全感需求:
用户希望理解生成过程(分布控制、seed数值、CFG),避免黑箱带来的不可预测性;
注:大多数AI工具(如Midjourney)像一台自动售货机——输入提示词,随机吐出一张图片。用户无法知晓AI为何生成一只三头六臂的猫,只能反复“抽卡”直到满意。
 
创造性需求:
通过精细化的控制实现独特的风格,例如分布提示,基于大模型训练出来的lora,不同lora模型融合后的混合模型,这些需要付出很大的学习成本和时间才能满足,我个人理解ai给设计师通往目标的过程中搭建了不同的道路,但设计师如果在没有导航的情况下要达到这个目标,中间可能会辗转反侧,也可能一条道路就能到达目的地;
AI创作工具的「可控性」与「用户体验」博弈
 
 
效率需求:
自动化设计(如MJ和国内其他一键生图的ai产品)可以降低设计的操作成本,但同时牺牲了可控性;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、comfyUI的设计矛盾
过度控制悖论:
ComfyUI试图打破黑箱,将AI拆解成可调节的“齿轮组”(如调节“采样器”改变画质、用“ControlNet”控制构图)。但当用户面对50多个参数和上百种节点时,反而因信息过载陷入“该调哪个参数?连错节点会爆炸吗?”的决策瘫痪。
AI创作工具的「可控性」与「用户体验」博弈
 
 
过高的配置要求:
comfyUI解决了MJ带来的黑箱效应,但同时也带来了物质上的门槛,设计师需要配备更高的配置或者使用第三方租用云电脑等才能运行,否则前者就会造成漫长的等待,后者则需要花费大量的财力,对于设计师而言反而是造成了时间上的负荷;
AI创作工具的「可控性」与「用户体验」博弈
 
 
功能维度:
节点系统支持无限组合,但缺乏对用户意图的主动理解,如自动推荐节点;
AI创作工具的「可控性」与「用户体验」博弈
 
 
认知维度:
参数暴露(如CFG Scale、Sampler)提供控制感,但引发“选择过载”实际使用过程中,如果是普通玩家,无法短时间内通过这些参数来控制结果,核心还是在于认知门槛过高;
AI创作工具的「可控性」与「用户体验」博弈
 
 
交互维度:
自由连接节点导致逻辑混乱(如错误连线无及时提示),增加调试成本。
AI创作工具的「可控性」与「用户体验」博弈
 
 
我把ControlNet的“负面条件”打乱连接到“正面clip文本框”上,而采样器的“负面条件”直接连接到“负面clip文本框”内,整个过程是不会出现任何报错提示,但是当运行调试的时候就会运行失败,提示ControlNet缺少负面条件,ControlNet(应用)缺少负面条件输出等问题,众所周知对于一些低配玩家,运行一次需要等很久,等到最后发现生产出来一个“报错”!!!
AI创作工具的「可控性」与「用户体验」博弈
 
 
二、对比分析:comfyUI和midjourney
AI创作工具的「可控性」与「用户体验」博弈
 
 
当设计师想生成“一只穿宇航服的柴犬”,Midjourney可能输出卡通风格或超现实照片,设计师只能通过追加提示词(如“3D、黏土”)逼近目标,不停的抽卡;
(实在不想用mj了,下面的图本地跑的,大概的意思一样就是不停的抽卡抽卡)
AI创作工具的「可控性」与「用户体验」博弈
在ComfyUI中,设计师可以强制指定:用FLUX模型生成基础图像,然后加载相关LoRA模型,在添加个视觉风格迁移的模型,添加宇航服,在添加个视觉风格模型,连接OpenPose节点调整柴犬姿势,最后用放大模型,放大画质;但我就想说:我只是想画只猫,为什么要弄这么复杂。。。
AI创作工具的「可控性」与「用户体验」博弈
 
 
关键结论:
ComfyUI的“高可控性”吸引专家设计师,但普通设计师或者0基础设计师因认知负荷大多放弃使用。Midjourney通过“限制控制权”降低门槛,但设计师可能因无法干预细节感到焦虑。
三、comfyui冲突点和机会点
为什么说这个呢,因为comfyui目前是趋势ai,核心的生成逻辑包括实际应用都已经大于mj了,所以接下来的内容也是围绕comfyui拆解的;
1、参数暴露vs认知负荷
问题:
ComfyUI将所有参数(如LoRA权重、VAE选择、采样器、各种模型加载器)暴露给用户,导致界面信息过载。
例如:
设计师需要同时调整“提示词权重”“采样器类型”“ControlNet强度”时,易混淆参数优先级,对于这个结果的影响,是采样器类型问题呢还是ControlNet的数值不对呢,最后我猜大多人过程都是一个个试一遍,最后哪个效果好用哪个;
思考点:
动态参数分组,根据生成的目标隐藏无关的参数,比如当输入完成“提示词”后,可以识别出输入的提示词类型,生成一个3d风格海报,那么基于这个提示词,就可以提前预判出跟3d风格海报相关的参数都可以隐藏;参数依赖的可视化,通过逻辑线的方式标记他们之间的关系,例如CFG与采样步数,通常来讲CFG数值越高生成的图越接近提示词,但是图像质量会下降,采样步数越高生成的图质量就越高,那么问题来了,当设计师调整CFG数值时,是不是可以标记或者提示设计师采样步数的变化,以此来达到最优解;
下方示例
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、自由连接vs逻辑错误
问题:
节点可任意连接,但缺乏逻辑校验目前comfyUI中只是告诉设计师如果两个节点本身没有前后关系的情况下不可以连接(没有节点对应的收入口)另一种情况是两个节点在一个工作流中都能起到作用,但是节点是多功能化的,连线的时候可以正常连接,最后运行的时候就会出现某某节点不匹配。
例如:
设计师错误连接ControlNet预处理器与VAE节点,导致生成失败且无报错提示。
思考点:
实时逻辑校验,在设计师连线时提示冲突(如“该节点仅接受潜空间输入”)。
工作流自检模式,一键检测缺失节点(如缺少“提示词编码器”时提醒用户)。
AI创作工具的「可控性」与「用户体验」博弈
 
 
四、设计师心理与工具的“错位战争”
生成式AI工具的设计矛盾,本质上是人类认知模式与技术逻辑的冲突。以ComfyUI为例,其设计暴露了以下深层问题:
1、“技术透明化”的认知陷阱
ComfyUI将AI生成过程拆解为节点,试图通过“透明化”提升用户信任,但普通人并不需要(也无法理解)技术细节;不知道你们有没有,当我第一次看到“VAE解码器”“潜在空间降噪”等节点时,大脑会触发“意义建构焦虑”——“这些词和我想要的图片有什么关系?”
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、控制权的“虚假承诺”
ComfyUI看似赋予用户完全控制权,但多数参数的实际影响难以预测(如CFG值从7到8可能导致画风突变)这类似于让设计师驾驶一辆方向盘与轮胎无机械连接的汽车,转动方向盘时,轮胎可能随机偏转。设计师误以为“控制节点=控制结果”,实则是“在黑暗中调整未知旋钮”;
AI创作工具的「可控性」与「用户体验」博弈
 
 
3. 技术极客与大众的“认知断层”
开源社区的理想:“人人可 Hack”的民主化工具;现实问题是开发者设计节点时默认用户理解SD原理(如Latent Space、扩散模型、euler_ancestralcai、dpmpp_2m),但普通用户只关心“如何让图片更逼真”;这种断层导致ComfyUI的文档充满技术术语,而非用户目标导向的指南(如“修复模糊人脸”对应哪些节点组合),这也是技术工具与用户体验的博弈;
AI创作工具的「可控性」与「用户体验」博弈
 
 
五、对于comfyUI的畅想
1、适配不同能力的设计师
专家模式:保留完整的节点和参数,让这类设计师自由编辑;
精简模式:隐藏底层参数,仅仅提供目标导向的选项;
自动化操作:根据提示词推荐采样器、cfg数值等组合,例如提示词是自然语言,那就匹配关于flux模型的专属采样器;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、智能节点推荐引擎
目标推荐:输入“生成赛博朋克城市”后,自动推荐“SDXL模型+ControlNet边缘检测+色调调整节点”;行为预测:分析历史工作流,推荐高频使用的节点组合(如“LoRA模型+分层提示词”);
3、可解释性反馈面板
参数与结果的实时性:实时显示调整CFG值对图像细节、对比度的量化影响。节点的贡献度分析:生成后标记关键节点(如“ControlNet贡献度72%”),帮助用户理解流程。
六、总结:控制的幻觉与设计的谦卑
ComfyUI揭示了生成式AI时代的核心矛盾——技术的能力越强大,人类越需要承认自身认知的局限性。工具设计不应追求“上帝模式”,而需寻找“刚刚好的控制权”给用户“扳手”而非“零件库”:提供高层级调节维度(如“画面精细度”“风格偏离度”),隐藏底层技术参数,并不是每个设计师都是工程师的角色;大多设计师的角色只是维修工;拥抱“不完美的人性”:允许用户保留“我不知道为什么要调这个,但调了就有用”的玄学操作,而非强迫所有人成为AI工程师。重新定义“控制”:从“绝对掌控流程”转向“有效影响结果”,让AI的不可预测性成为创意催化剂而非焦虑来源。


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

产品设计如何利用心理学

ui设计分享达人 设计思维

产品设计的成功除了依赖设计方案和技术实现,还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的,但其实用户行为经常是非理性,会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为,优化产品体验,提高用户的粘性、留存率和转化率,从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


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

关于设计组件库,一些新思考

ui设计分享达人 设计管理与成长

关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整,如何高效赋能业务设计交付的相关内容,但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务,每一个微小的设计细节都有可能影响各个业务的数据指标,一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范,完成合规的设计,从这个角度而言它应该比较
「好懂」
 
而作为服务于整个设计团队的公用设计组件库,面对每月数以万计的调用次数,它必须保障最基本的易用性,应该非常
「好用」
 
同时,面对频繁迭代,“好的设计组件”还需要保持最快的更新速度,为各个横向团队提供正确的样式,从这个角度来说它还要
「好维护」
 
因此,
「好懂、好用、好维护」
是搜索设计语境下,对一个“好的设计组件”的定义。
 
关于设计组件库,我们有一些新思考
 
 
 
接下来,我们将从这三个「好」入手,分享搜索设计组件库在升级过程中的一些思考,希望能和大家共同探讨。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
“万丈高楼平地起”,我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先,在搭建组件时,我们可以考虑采用
多层嵌套
的方式,即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作,甚至还能在解绑组件时,通过选中内部的子组件图层进行解绑,大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下,我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样,能够支持大部分的状态切换,而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示),以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步:
场景收集和分析、搭建基本变体组、拓展高阶变体组
 
我们将通过视频组件搭建的生动案例,具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库,使得组件本身既足够灵活,又能起到足够的约束作用。
 
关于设计组件库,我们有一些新思考
 
 
 
在着手搭建某类组件时,我们首先通过规范确认和场景遍历,广泛收集各类变体。随后,从我们能想到的所有维度出发,对这些变体进行细致定义。这样,我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等,而第一行则罗列出各种维度,如宽度、比例等。通过这种方法,我们可以将原本零散、杂乱的组件变体描述,系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库,我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体,这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致,常见特性则涵盖了最常见的分类性质,如宽度、高度、数量和优先级等,而业务特性则与具体业务紧密相关。
 
在搭建组件时,我们可以遵循
「共性-常见特性-业务特性」
顺序,这样的顺序有助于降低理解成本,因为最符合心智的分类被置于外层,同时底层的组件又保持了足够的灵活性,便于切换各种变量。对于业务特性,我们可以根据实际情况灵活处理,既可以将其作为基本组件的延展,也可以不将其纳入组件范畴。
 
以视频组件为例,我们从表格中获取的信息如下:
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择;
  •  
    播放状态是所有变体的共有性质;
  •  
    自动播放情况与业务相关,但不一定需要在组件库中呈现;
  •  
    高阶组件仅涉及少部分尺寸的组件,应在完成基本组件搭建后再进行。
 
据此,我们可以轻松梳理出视频组件搭建流程的优先级:
 
  1.  
    播放状态作为共性,应首先搭建;
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择,应紧随其后;
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是,“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则,我们将其插入到搭建播放状态之前。因此,视频组件的最终搭建流程为:
 
  1.  
    封面槽位;
  2.  
    播放状态;
  3.  
    基本组件尺寸和组合;
  4.  
    高阶组件。
 
关于设计组件库,我们有一些新思考
 
 
 
完成对视频组件搭建的分析,我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件,再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知,但仍需格外注意,如配置项的设置要力求合理,也可以融入设计规范和使用规范,同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项,我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程,一个达到及格线的视频组件就诞生了。据统计,优化后每次调用视频组件将节省至少10步的点击操作!
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了一个基本组件的搭建后,我们可以转换视角,从使用的角度来审视并检查这个组件。
 
我们期望,从插入组件变体、切换组件配置,再到最后的解绑组件,整个流程都能纵享丝滑且稳定可靠,确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库,我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件,据观察,通常有三种方式,①在左侧的资产面板(Assets)中直接找到对应组件并插入;②通过查阅设计规范,锁定所需的变体后复制粘贴;③选中一个不需要的组件,通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显,在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库,我们有一些新思考
 
 
 
为了提升搜索精度,我们可以从组件命名入手,采用中、英、数字结合的方式,实现模糊匹配;也可以在发布时隐藏不希望被调用的组件,以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的,我们可以添加“Preferred”子组件,这样在切换时会优先展示这些子组件,这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师,我们增加了更多实际使用的正误案例,这些案例直观展示了组件变体的正确选择和使用方式,进一步降低了规范的理解成本,有效辅助设计决策。同时,我们专门维护了一个固定区域,用于平铺展示所有组件变体。为了确保能够轻松点选,我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体,从而快速选择所需的组件。
 
关于设计组件库,我们有一些新思考
 
 
 
在组件配置阶段,有三项注意点能让组件更加易用,即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库,我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯,我们应避免使用过于复杂的分组方式。相反,应更注重组件的样式展示,并尽量简化组件的层级结构。这样,设计师在使用时能够更直观地看到组件的外观,而无需深入复杂的层级去查找。
 
另外值得注意的是,Figma会默认用组件集合中最左上角的组件生成预览样式,因此应当把视觉上最有代表性的变体放在左上角,这个效果在切换变体(Swap instance)时很重要,因为目前在该面板中没法查看组件细节,只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库,我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究,业界有组件库为了实现C2D2C,从源头上将设计组件和前端组件的配置项打平,这是不错的思路,但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境,我们还是选择了从「规范理解」角度去设置组件的配置项,将所有允许自定义的配置尽可能外露,并清晰地说明修改限制,如字数限定、选项个数等,这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率,建议对选项和选项之间,以及外层的不同配置项,都按照一定的逻辑顺序进行排序。
 
关于设计组件库,我们有一些新思考
 
 
 
最后一点,我们称之为
“贴心地保存修改”
机制,这个针对的是文字修改的场景。
 
在实际操作中,使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时,已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要,它能够记忆并保存修改过的文字内容,从而免于重复输入。
 
还有一些情况是,某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值),用户切换后就会发现组件完全变了,只能撤回。为了避免这类情况,建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了组件的搭建和检查,接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开,一是依托中台的日常数据监控进行维护,二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设,在本文中我们不做更多展开,重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径:View libraries-Analytics),看板中展示了各个组件的调用数和解绑数数据,这些数据不直接反映组件的优劣,但如果我们观测到某个组件解绑率偏高,我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库,我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享,包括搜索业务对于“好的设计组件”的诉求,以及一些搭建和优化组件的实用思路,核心是探讨如何从组件库建设的角度入手,成功助力团队提升设计资产消费效率。
 
关于设计组件库,我们有一些新思考
 
 
 
 


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

Banner布局在用户界面中的设计样式研究

ui设计分享达人 设计思维

前言
    Banner,这一设计元素对于我们设计师而言早已经是司空见惯,其核心往往聚焦于视觉表现的层面,也是成为UI设计师重要能力play中的一环。今天要写的,并非Banner在视觉艺术上的探索,而是其在UI场景中布局样式的深度剖析。
    Banner图作为产品中的一项基础功能,其存在已是常态。在视觉创意的追求之外,UI层面的样式布局也在不断寻求突破与创新。
 
目录
一、Banner 视觉层表现
二、Banner 布局样式
三、总结
 
一、Banner视觉层表现
    作为界面视觉焦点,Banner通常以可交互的轮播组件形式呈现,这种动态展示方式已成为现在产品的重要导航模式之一。它不仅是信息传递的载体,也是平台与用户对话的窗口,承载着活动推广、品牌宣发等核心内容的展示使命。 在提升用户注意力的设计探索中,Banner的视觉表现手法持续演进。从设计维度来看,我们不仅要在创意构思、版式布局、色彩搭配等基础层面下功夫,更需在表现形式上寻求突破。
    基于动态复杂度,我将Banner的表现形式归纳为四个层级:从基础的静态图像,到轻量级的GIF动画,再到沉浸式的视频背景,直至最具空间感的分层效果,每种形式都对应着不同的设计目标和用户体验。
Banner布局在用户界面中的设计样式研究
 
 
1.1静态
    在众多Banner表现形式中,静态轮播图因其高效的设计实现和便捷的技术支持而成为多数产品最普遍的选择。
    这类Banner采用静态图片作为视觉载体,根据产品需求可分为两种基础模式:单一画面呈现的简约风格,以及多画面轮播的交互形式。其中,多图轮播既支持自动播放的时间轴切换,也允许用户通过手势滑动进行自主浏览,在保持视觉简洁性的同时增加了交互维度。这种设计平衡了视觉效果与功能实用性,所以会成为多数产品的首选方案。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.2动态
    动态Banner以生动的表现力,在吸引用户注意力方面展现出显著优势。通过关键元素的微妙动画和CTA按钮的交互反馈,能够有效引导用户视线,强化信息层级。
  在动态Banner的应用中,单图形式往往更受青睐。虽然动态效果能提升视觉吸引力,但过度使用可能导致"视觉噪音",反而分散用户注意力,降低核心信息的传达效率。
    面对信息过载的数字环境。微交互动画作为一种优雅的解决方案,在功能引导和视觉叙事两个维度都发挥着重要作用,也已经成为界面设计中不可或缺的设计语言。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.3视频
    视频广告作为一种成熟的营销媒介,在短视频文化盛行的当下,已逐步融入Banner轮播体系。这类视频Banner通常占据首屏黄金位置,配合明确的倒计时提示和便捷的关闭选项,为用户提供可控的观看体验。为减少对用户的干扰,视频默认采用静音播放模式,这种贴心的设计选择体现了以用户为中心的设计理念。
    在特定垂直领域,如影视类平台,我们也能观察到多视频轮播的创新应用。这种相对小众的呈现方式,往往与平台的内容属性高度契合,为特定用户群体提供沉浸式的浏览体验。这种差异化的设计策略,展现了产品设计中对场景化需求的深入思考。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.4分层
    在追求差异化体验的设计浪潮中,轮播广告正在突破传统平面展示的局限。分层视觉设计以其独特的空间感和动态层次,为Banner设计注入了新的活力。这种创新表现形式包含多层次的视觉构建:从基础的内容层叠加视觉,到更具空间感的3D翻转效果,再到前景与背景的智能分离运动,每种方式都在重新定义用户与广告内容的交互方式。
    基于视觉层次的运动差异,设计出引人入胜的视觉叙事,能够有效的提升用户参与度以及更具沉浸感和记忆点广告体验。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
小结
    Banner的视觉创新是提升内容吸引力的关键驱动力。
    每一种新的视觉语言都是我们与用户对话的新方式,是提升信息传达效率的重要途径。在竞争激烈的市场环境中,差异化的表现形式往往能成为抓住用户注意力的制胜法宝,这也是为什么我们要不断突破常规,寻求更具感染力的视觉解决方案。
 
二、Banner布局样式
    在确定Banner的视觉表现手法后,就得深入研究其在界面布局中的空间关系。布局样式的多样性源于多个设计维度的考量:从Banner的宽高比例、尺寸规格,到其与页面结构的整合方式(通栏或分栏),再到其与周围元素的视觉关系(独立呈现或背景融合)等。
    就通栏与分栏布局而言,这种结构性选择直接影响Banner的视觉占比。虽然直觉告诉我们更大的Banner更具吸引力,但优秀的设计需要平衡信息层级与视觉舒适度。Banner的布局不应是孤立的决策,而应该与整体界面风格和谐统一,既要突出又要融入,在视觉冲击力和界面协调性之间找到最佳平衡点。这种全局性的设计思维,正是打造优质用户体验的关键点所在。
Banner布局在用户界面中的设计样式研究
 
 
    在处理深色系头部界面时,我们常采用Banner与背景层叠的设计策略。这种手法通过建立视觉深度,创造出富有层次的空间感。背景色的处理有两种方式:一是采用固定色值保持统一性,二是根据轮播图主色调动态调整,后者能实现更自然的视觉过渡,提升整体设计的融合度与空间纵深感。
    在Banner比例方面,选择直接影响高度控制,需要根据界面内容密度灵活调整。除了基于内容需求的自定义方案,许多人会采用数学比例系统进行规范化设计。其中,基于斐波那契数列推导出的8:5、8:3等比例关系,因其视觉舒适度而被广泛采用。在实际应用中,我更倾向于选择能被4整除的数值,既符合开发规范,又能确保在不同设备上的适配性。
Banner布局在用户界面中的设计样式研究
 
 
以经验作为基石,而不是限制,特殊情况特殊对待,就像配合前端工程师调整设计图样式一样,灵活运用。
 
三、总结
    Banner作为页面中的常见元素,与其说是对布局样式的探索,不如说是对用户体验的深度挖掘。每一次布局创新都是对用户与页面互动方式的重新思考。
    一个恰到好处的留白、一次精准的视觉引导、一个流畅的交互过渡,这些细微之处都可能成为提升产品体验的关键。 当我们能够系统性地把控每个设计细节,将用户需求转化为优雅的解决方案时,就能做出真正打动人心的页面设计。


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

界面设计中【浮标】的思考与探索

ui设计分享达人 设计管理与成长

界面设计中【浮标】的思考与探索
结合设计原则与“智能伴学助手”项目应用浮标实践展开
-------------
 
目录:
背景
浮标的本质与价值
浮标设计
一、功能定位与场景适配
二、视觉与交互设计
三、技术实现优化
四、无障碍与伦理考量
五、创新方向探索
结语
 
-------------
背景:
在教育类移动端中接入了大模型AI智能应用,为保证这个应用入口可长期保持并随时可见,提高使用率,为用户提供便利。笔者通过“智能伴学助手”浮标实践应用,对后续制作浮标在界面设计中思考与探索。
 
浮标的本质与价值
1)空间维度突破  
作为界面中的「第三层空间」,浮标通过视觉悬浮感打破平面限制(如iOS 的3D视差效果); 在信息过载时代,提供「随时在场」的核心功能入口(如美团外卖的悬浮购物车,左右动效:进缩)。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
 
2) 认知心理学应用
利用格式塔原则中的「闭合性」设计半透明遮罩,暗示可交互区域;通过菲茨定律优化点击热区,圆形浮标直径建议≥48dp(Android 规范)。
 
 ---------------------
浮标设计
就项目中“智能伴学助手”为例,一个教育类的应用入口,结合功能定位、用户体验与技术实现浮标在界面中的作用。通常浮标是一个悬浮的按钮或图标,用于快速访问某些功能,从多个维度探索其在移动端界面中的合理呈现方式:
 
 
一、功能定位与场景适配
 
浮标的设计规范:
比如尺寸、颜色、位置。通用的设计规范,教学工具类App的界面设计,可能涉及图标和布局。
1)尺寸与网格系统
 ◇ 图标尺寸需适配不同屏幕分辨率,常见规范包括128x128px、96x96px、64x64px等,需根据界面层级选择合适尺寸。
◇ 尺寸一般用1:1比较好或者成倍数,先做大再导出所需要的不同大小比例。
◇ 使用网格系统(如微软Fluent的24px基础网格)确保视觉一致性,留出安全边距(如2px内边距)避免元素溢出。
2)造型与风格
◇ 遵循简约易懂原则,优先采用象形图或表意符号增强识别性。
◇ 保持系列图标风格统一,包括线条粗细(建议1.5px)、圆角弧度(微软Fluent定义大/中/小三级圆角)及视觉平衡。
3)适配性
◇ 导出格式需与开发协作,推荐PNG序列或SVGA文件以兼顾清晰度与性能。
◇自适应考虑不同平台的显示情况。
 
核心功能聚合:
语言学习工具类界面将高频功能(如首页入口、作业评论、学习提问)通过浮标动态整合,支持长按展开二级菜单或滑动切换功能模式,吸附于屏幕边缘。
根据学习阶段智能变化:
课前(预习):浮标展示课程试学入口或学习目标设定;
课中(口语输出):提供实时笔记悬浮窗或标记工具;
课后(点评):将课后作业及巩固语言习得情况的评价和自我精进。
(外语语言口语学习一般模式:盲听,然后根据自己的话复述,理解语言并有效使用语言)
  
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
 
二、视觉与交互设计
 
以”智能伴学助手“为例,浮标主色是蓝色,企业主题色也是蓝色,而”智能伴学助手“浮标使用背景一般也以蓝色为主,App主题色也是蓝色,多场景使用适配蓝色背景的静态浮标,又要使浮标可以在背景中脱颖而出,在其过程中尝试蓝+蓝搭配的存在局限性,本身蓝色系较统一。
在同为蓝色后,产生不同「空间」,通过将界面元素分层(如前景图标与背景图像),营造深度感。在浮标进行描边隔层,现在很多表情包就是这种模式操作。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
 
思考与探索:
浮标需要特色,用户在使用过程中视觉明显,提高交互。
浮标既显眼又不干扰学习,所以需要平衡可见性和沉浸感。
浮标可以移动,用户可以根据需要调整位置,避免遮挡内容。
现浮标是静态的,如何尝试动态浮标,与用户有更好的交互体验,参与感。
颜色和动效方面,冷色调营造学习氛围,浮标可以用品牌色,如蓝色或绿色,加上微动效吸引注意。样式用了蓝色圆形浮标,可能适合教育类应用,赋予科技感设计。
不同状态或者不同页面下的浮标呈现方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
 
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
 
思考与探索:
配色方案
1)主色选择
明亮色系:如红色、橙色、黄色等,能快速吸引用户注意,适用于促销活动入口。
品牌色融合:在特殊场景中融入品牌LOGO或主色,代表企业形象和IP,增强品牌认知。
2)色彩心理学应用
蓝色:传递信任感,适合金融或工具类应用。
黑金/黑黄组合:营造神秘或高端感,常见于娱乐或奢侈品领域。
紫色+粉红:适用于美容、女性向产品,传递温柔与创意。
控制色彩平衡,用户色彩感官可适应。
3)对比与背景
使用中性色(如米色、白色)作为背景,提升信息可读性。
避免冲突色搭配(如蓝色用于食品类浮标易抑制食欲)。
 
思考与探索:
个性化推荐和交互设计,可以结合AI预测用户行为,动态调整浮标的出现时机,比如在需要提醒作业时显示。主色选用品牌色(如教育蓝/科技紫)强化识别性。
 
如何设计浮标会更好?
如何设计浮标会更好?
 
 
创新交互模式思考探索:
1)压力感知交互  
▸安卓压感屏实现「轻按预览/重按触发」分层交互(如华为悬浮球压感菜单);配合触觉反馈(Haptic Engine)增强操作确认感。
2)动态语义变形
-生物拟态动画:
▸呼吸感悬浮:模拟水母游动节奏(振幅0.5-1.2px,频率0.8Hz)  ;
▸点击时触发粒子扩散动画(模拟知识传递意象);
▸拖拽时产生弹性形变(阻尼系数0.6-0.8),边缘碰撞后回弹。
- 根据场景智能改变形态:  
▸ 阅读类App中展开为「书签浮标+进度条」复合控件  ;
▸ 音乐播放器浮标可拉伸成波形可视化界面。
 通过多模态反馈,听觉,视觉,触觉多种情感交互。
3) 空间布局策略:
▸默认位置:置于屏幕右下侧(符合右手持机习惯),预留10%边距防止误触;
▸智能避让:通过内容识别算法,在视频播放或文本输入时自动偏移避开核心内容区域;
▸AR场景中的空间投影浮标(如IKEA Place家具预览浮窗)。
位置多为屏幕右下侧
位置多为屏幕右下侧
 
 三、技术实现优化
 
1)跨端一致性
  •  
    使用React等框架封装可复用浮标组件,通过响应式设计适配不同设备尺寸(如折叠屏展开态需重新计算定位锚点);
  •  
    采用SVGA格式实现高性能动效,控制帧率在30fps以内以降低功耗。
2)AI驱动个性化
  •  
     基于LSTM模型预测用户行为: 检测到长时间未操作时,浮标缩小并展示激励标语; 识别到错题高峰时段,主动弹出知识点讲解入口;
  •  
     支持语音指令交互(如“浮标移到左上角”)。
 
四、无障碍与伦理考量
 
1)包容性设计
◇为色弱用户提供高对比度模式(浮标轮廓增加动态描边,对比度≥4.5:1);
◇支持头部追踪控制浮标移动(iOS Switch Control技术适配)。
2)防沉迷机制(适合未成年类App)
◇连续使用1小时后,浮标渐变灰色并触发休息提醒;
◇家长端可远程设置浮标功能禁用时段。(未成年学习类工具考虑优化)
 
五、创新方向探索
 
1)多模态融合:
◇AR场景中浮标投射为3D虚拟助手,支持手势交互与空间定位;
◇结合眼动追踪技术,实现注视区域自动呼出上下文菜单。
2)情感化表达:
◇根据学习成就解锁浮标皮肤(如连续打卡7天变为奖杯形态);
◇错误率过高时,浮标呈现“鼓励模式”(配色变暖+微震动反馈)。
学习类智能伴学助手的浮标既能作为高效的功能枢纽,又可成为情感化学习伴侣。实际落地时建议结合A/B测试持续优化,例如对比分析「固定浮标」与「场景自适应浮标」的点击转化率差异。
 
----------------
 
结语:
浮标不应仅是功能载体,更应成为:  
- 空间叙事者:通过动态变化讲述产品故事;
- 情感连接器:建立用户与数字世界的温度触点;
- 场景预言家:预判需求并提供恰到好处的服务。
 
设计师需在「显性价值」与「隐形干扰」间找到精妙平衡,让浮标成为提升体验的优雅解决方案而非视觉负担。未来可探索脑机接口的意念控制浮标、量子动画渲染等突破性方向。
技术实现上,探究代码示例展示了如何控制浮标的移动,确保不超出屏幕,这可以作为技术参考应用实际案例中。同时,性能优化方面,使用SVGA格式或减少帧数,可能对动效设计有帮助。
浮标设计需要结合功能定位、用户行为、视觉设计、交互体验和技术实现,可多进行参考不同案例,搜索现有项目,对比借鉴然后对新型B端界面有所创新,确保既实用又不干扰用户。
还可以利用Ai创新思维,设计师可以更快速、高效地生成多种设计方案,结合项目开发满足消费者对个性化、时尚化的需求。
 


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

数据图表:多领域信息可视化的核心工具

ui设计分享达人 大数据可视化设计文章及欣赏

 
 
PART 1 ——————
数据图表的概述
数据图表是将复杂的数据集转换为图形或图像的过程,旨在通过视觉化的方式简化信息的理解和分析。它不仅是一种技术手段,更是一种沟通工具,能够帮助人们更有效地解释数据、发现模式、做出决策并传达见解。
数据图表:多领域信息可视化的核心工具
 
 
「核心价值」
·  简化复杂信息:数据图表通过图形化的手段简化了大量数字或文本信息,使读者能够迅速抓住关键点。
·  促进理解与学习:利用人类大脑对图形和色彩的敏感性,数据图表加速了信息处理过程,支持教育和培训。
·  辅助决策制定:数据图表为管理层或其他决策者提供了有价值的商业智能,支持快速决策。
·  提升沟通效果:促进了跨部门协作和公众传播的效果。
 
「核心要素」
·  数据:来源可以是数据库、API或文件,类型包括定量和定性数据。
·  图表类型:根据数据特性和分析目的选择最恰当的图表类型。
·  设计原则:确保图表清晰易读、准确无误、风格一致且具备视觉吸引力。
 
「核心目标」
·  简化复杂信息:使大量数字或文本信息变得直观易懂。
·  促进理解与学习:加速信息处理过程,支持教育和培训。
·  辅助决策制定:提供有价值的商业智能,支持快速决策。
·  提升沟通效果:增强跨部门协作和公众传播的效果。
·  探索数据关系:发现隐藏模式,验证假设。
·  监测与跟踪进展:实时监控关键指标,规划项目管理。
 
⭐️ 
PART 2
 ——————
应用标准指南
数据图表:多领域信息可视化的核心工具
 
 
设计有效的数据图表不仅需要选择合适的图表类型,还需要遵循一系列设计要点以确保图表既美观又实用。以下是应用数据图表时需要注意的标准指南:
 
1. 明确目标与受众
·  理解需求:明确你希望通过图表传达的信息是什么。
·  考虑受众:了解你的目标受众是谁,他们的知识水平和兴趣点在哪里。
2. 简洁性与清晰度
·  去除冗余:避免不必要的装饰元素,保持图表简单明了。
·  突出重点:通过颜色、字体大小等方式强调最重要的信息。
·  易于解读:确保图表中的每个元素都有其明确的意义,并且容易被理解。
3. 数据准确性
·  精确无误:保证所使用的数据是最新且经过验证的。
·  透明度:注明数据来源,增加可信度;如果适用,提供数据获取方法或计算公式。
4. 合理使用颜色
·  色彩心理学:根据情感联想选用颜色,例如绿色通常关联增长,红色常用来警示。
·  对比度:使用足够的颜色对比来区分不同的数据系列或类别,同时考虑到色盲用户的需要。
·  一致性:在多个图表中保持颜色方案的一致性,以便于比较。
5. 标签与注释
·  完整标签:为所有轴、图例和其他重要元素添加清晰的标签。
·  必要注释:对于特别重要的数据点或异常情况进行说明,帮助用户更好地理解图表内容。
6. 图表标题与描述
·  简洁标题:用简短而准确的语言概括图表的主要信息。
·  辅助文本:如有必要,可以添加副标题或简短描述来补充背景信息或解释图表含义。
7. 交互性(如适用)
·  工具提示:当用户将鼠标悬停在某个数据点上时,显示详细信息。
·  动态更新:对于实时数据,设计允许自动刷新的图表。
·  筛选与排序:提供选项让用户根据自己的兴趣过滤或重新排列数据。
8. 响应式设计
·  适应多平台:确保图表能够在不同设备(桌面电脑、平板电脑、智能手机)上良好显示。
·  可缩放:允许用户放大特定区域或滚动查看超出初始视图的数据。
9. 避免误导性表示
·  比例尺的选择:合理设置Y轴起始值和增量,避免夸大或缩小差异。
·  避免三维效果:除非绝对必要,否则不要使用三维效果,因为它们可能会扭曲感知比例。
10. 故事讲述
·  逻辑连贯:构建一个从开始到结束逐步理解数据背后意义的故事线。
·  引导视线:通过布局和视觉层次引导观众关注最重要或最有趣的部分。
11. 测试与反馈
·  用户测试:邀请真实用户测试图表,收集反馈以改进设计。
·  持续优化:基于用户反馈和技术进步不断调整和完善图表设计。
 
遵循上述标准可以帮助创建出既美观又功能强大的数据图表,从而更有效地支持决策过程并促进信息交流。
 
⭐️ 
PART 3 
——————
图表构成元素
想准确的将图表与所要表现的数据进行对应,需要了解图表本身所包含的基本元素。
数据图表:多领域信息可视化的核心工具
 
 
在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域。
 
· 标题
(Title)
简明扼要地说明图表的内容和目的。
标题应位于图表上方居中位置,使用清晰易读的字体和大小。
 
· 坐标系(Coordinate System)
定义图表的X轴和Y轴,以及数据点的位置。
坐标轴应清晰地标记,包括刻度线和刻度值。确保刻度间隔合适,易于阅读。
 
· 时间范围(Time Range)
告知用户图表数据覆盖的时间段。
如果图表显示的是时间序列数据,时间范围可以放在标题下方或者图表底部的X轴标签旁边。
 
· 图形主体(Graph Body)
定义图表的X轴和Y轴,以及数据点的位置。
坐标轴应清晰地标记,包括刻度线和刻度值。确保刻度间隔合适,易于阅读。
 
· 图例(Legend)
解释图表中不同颜色或图案代表的数据系列。
图例应放置在图表的边角位置,不妨碍图表的主体内容。图例中的颜色或图案应与图表中的一致。
 
· 提示信息(Tooltip)
允许用户选择不同的数据系列或时间范围。
切换选项可以是按钮或下拉菜单的形式。应放置在图表的一侧或顶部,不影响图表主体的可视性。
 
· 切换选项(Toggle Options)
允许用户选择不同的数据系列或时间范围。
切换选项可以是按钮或下拉菜单的形式。应放置在图表的一侧或顶部,不影响图表主体的可视性。
 
· 值域(Value Range)
允许用户调整坐标轴的范围,以聚焦于特定的数据区间。
值域调整通常出现在坐标轴附近的小控件中,例如滑块或输入框。
 
⭐️ 
PART 4 
——————
常见的数据图表类型
数据图表:多领域信息可视化的核心工具
 
 
在C端(消费者端)应用中,数据图表是一种非常重要的可视化工具,它能够帮助用户更直观地理解和分析数据。
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
 
⭐️ 
PART 5 
——————
选择合适图表的关键因素
数据图表:多领域信息可视化的核心工具
 
 
挑选最佳图表类型是一个综合考量数据集特点、应用场景需求以及目标受众理解能力的过程,是确保数据有效传达的关键。以下是选择图表类型时应考虑的几个重要要点:
 
1. 数据性质
·  定量 vs 定性:确定你的数据是数值型(如销售额、温度)还是分类型(如性别、地区)。数值型数据通常适合柱状图、折线图等;分类型数据可能更适合饼图或条形图。
·  时间序列 vs 非时间序列:如果数据随时间变化,如股票价格或天气预报,则折线图和面积图可能是最佳选择。如果是静态数据,如人口统计信息,则可以考虑柱状图或饼图。
 
2. 比较需求
·  类别对比:如果你需要比较不同类别的数量或比例,柱状图、条形图和饼图是很好的选择。
·  趋势分析:对于展示随时间或其他连续变量的变化趋势,折线图和面积图更为合适。
·  相关性探索:当你要研究两个变量之间的关系时,散点图可以帮助你发现潜在的相关性或模式。
 
3. 数据量与复杂度
·  少量数据:对于简单且数据点较少的情况,饼图、条形图等可以直接清晰地传达信息。
·  大量数据:面对大量数据或高维数据集时,热力图、气泡图、树状图等能够更有效地处理复杂信息,并帮助识别模式。
 
4. 用户目标与受众理解能力
·  决策支持:如果目的是辅助快速决策,那么应该选择易于解读、直观明了的图表类型,如子弹图、漏斗图等。
·  教育或解释:针对教育目的或需要详细解释的数据,可以选择更具互动性的图表,如带有工具提示或动态更新功能的图表。
 
5. 图表的功能性
·  强调差异:如果你想突出显示异常值或显著差异,可以选择箱线图、瀑布图等。
·  构成分析:为了展示各部分占整体的比例关系,饼图和堆叠柱状图非常有用。
·  分布展示:直方图和密度图能很好地展示数据的分布情况,包括集中趋势和离散程度。
 
6. 可视化效果与美观性
·  视觉吸引力:某些图表不仅传递信息,还能增强视觉美感,如玫瑰图、雷达图等,适用于报告封面或演示文稿中。
·  空间效率:在有限的空间内传达更多信息,子弹图、仪表盘等紧凑设计的图表是不错的选择。
 
7. 行业惯例与标准
·  领域特定:不同的行业可能有其偏好使用的图表类型,例如金融领域常用蜡烛图,地理信息系统常用地图可视化。
·  遵循规范:遵守所在领域的图形表示规范,确保图表的专业性和可接受性。
 
通过综合考虑上述要点,你可以为特定的数据集和应用场景挑选出最合适的图表类型,从而最大化数据的价值并促进有效的沟通。选择图表时,务必结合实际需求和用户背景,确保最终呈现的信息既准确又易于理解。
 
⭐️ 
PART 6 
——————
使用场景
数据图表:多领域信息可视化的核心工具
 
 
「健康类应用」
健康类App通过使用多样化的数据图表,不仅让用户对自己的健康状况有了更直观的理解,同时也激励用户采取积极的生活方式改变,从而改善健康状况。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如每日步数、卡路里消耗等。
·  视觉层次分明:使用不同的颜色、字体大小和对比度来区分关键信息和次要信息,最重要的数据一目了然。
·  一致性:整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
 
2. 互动性
·  深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的锻炼记录或饮食摄入情况。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月)、运动类型等进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片或CSV格式的功能,便于打印或分享给教练或朋友。
 
3. 个性化
·  用户定制:根据用户的个人健康目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定训练方案的效果。
·  目标跟踪:类似于健康管理目标设定,允许用户设定并跟踪自己的健身目标,如减重、增肌等。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估进展,并为用户提供有针对性的反馈和建议。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的健身数据,如实时监测的心率或运动进度,这对于及时调整训练计划尤为重要。
·  同步与整合:与其他健身设备或平台无缝对接,自动同步来自各种来源的数据,如智能手环、跑步机等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设目标或需要特别关注时,及时向用户发送通知或提醒,鼓励持续参与。
 
5. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的健身数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让用户之间可以交流经验和支持,增加互动性和动力。
 
综上所述,健身类APP图表运用的设计特点不仅强调了清晰易读、互动性强、个性化定制和实时更新,还特别注重用户体验和社区互动。这些特性共同作用,可以帮助用户更有效地管理和理解健身数据,从而促进更好的健康管理和运动效果。
 
「医疗辅助应用」
医疗辅助应用的数据图表设计特点可以从健身类APP的设计特点中汲取灵感,但同时也需要考虑到医疗行业的特殊需求和严格标准。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  专业术语解释:确保图表本身清晰易读的同时,提供必要的术语解释或简短说明,帮助非专业人士理解复杂的医学概念。
·  视觉层次分明:使用不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:保持整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
 
2. 互动性
·  深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的测量结果或特定治疗阶段的效果。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月)、病患群体、疾病类型等进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为PDF、CSV等格式的功能,便于打印或分享给其他医疗专业人员。
 
3. 个性化
·  患者定制:根据患者的健康状况、治疗计划或个人偏好调整图表内容,例如突出显示关键指标的变化趋势或特定治疗方案的效果。
·  医生建议:集成医生推荐的图表视图或设置,方便医生快速评估病情进展,并为患者提供有针对性的反馈。
·  健康目标跟踪:类似于健身APP中的目标设定,允许患者设定并跟踪自己的康复或健康管理目标,如血压控制、体重管理等。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的健康数据,如实时监测的生命体征或实验室检测结果,这对于紧急情况下的决策尤为重要。
·  同步与整合:与其他医疗设备或系统无缝对接,自动同步来自各种来源的数据,如可穿戴设备、医院信息系统等,确保数据的完整性和准确性。
·  通知与预警:当某些关键指标超出正常范围时,及时向患者和相关医护人员发送通知或警告,以便采取必要的干预措施。
 
5. 隐私与安全
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保患者信息的安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如HIPAA(美国健康保险流通与责任法案)或其他国家/地区的疗数据保护法规。
 
6. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的健康数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让患者之间或患者与医生之间可以交流经验和支持。
 
综上所述,医疗辅助Web应用的数据图表不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注隐私保护和安全性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助医疗专业人员和患者更有效地管理和理解健康数据,从而促进更好的医疗服务和健康管理。
 
「金融类应用」
金融类应用的数据图表设计需要特别关注清晰性、互动性、个性化和实时更新,同时还要考虑到金融行业的特殊需求如安全性、合规性和专业性。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如股票价格走势、投资组合表现等。
·  视觉层次分明:不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
·  术语解释:提供必要的术语解释或简短说明,帮助非专业人士理解复杂的金融概念。
 
2. 互动性
· 深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的交易记录或市场波动情况。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月、年)、资产类型(股票、债券、基金等)进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片、PDF或CSV格式的功能,便于打印或分享给财务顾问或同事。
·  情景模拟:提供情景分析工具,用户可以调整变量(如利率、通胀率)来预测不同市场条件下的投资表现。
 
3. 个性化
·  用户定制:根据用户的个人投资目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定投资策略的效果。
·  风险偏好匹配:基于用户的风向承受能力,推荐适合的投资组合配置,并展示相应的风险与回报图表。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估投资进展,并为用户提供有针对性的投资建议和反馈。
 
4. 实时更新
· 即时反馈:确保图表能够迅速反映最新的金融市场数据,如实时股价、汇率变动等,这对于及时调整投资策略尤为重要。
·  同步与整合:与其他金融平台或服务无缝对接,自动同步来自各种来源的数据,如银行账户、证券账户等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设阈值或需要特别关注时,及时向用户发送通知或提醒,帮助用户抓住投资机会或规避风险。
 
5. 安全与合规
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保用户隐私和资金安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如GDPR(欧盟通用数据保护条例)、SOX(萨班斯-奥克斯利法案)等,确保数据处理符合法律要求。
 
6. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的金融数据和图表背后的意义。
·  社区交流:创建一个专业的社区平台,让用户之间或用户与金融专家之间可以交流经验和支持。
·  客户支持:提供在线客服或热线电话,确保用户在遇到问题时能够得到及时的帮助。
 
综上所述,金融类应用的数据图表设计不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注安全性和合规性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助用户更有效地管理和理解金融数据,从而做出更加明智的投资决策。
 
「信息记录类应用」
另一类比较常用图表的 App 是信息记录类 App,这些 App 通常会统计用户主动输入信息的频次或频率,依此生成一段时间周期内的统计图表。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如每日情绪波动、月度费用支出等。
·  视觉层次分明:不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:保持整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
·  术语解释:对于不太常见的记录类别或指标,提供必要的解释或简短说明,帮助用户理解图表内容。
 
2. 互动性
·  深度探索:允许用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的记录详情或特定事件的影响。
·  多维度筛选:提供灵活的筛选选项,让用户可以根据时间范围(日、周、月、年)、记录类型(如费用分类、情绪标签)进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片、PDF或CSV格式的功能,便于打印或分享给朋友或顾问。
·  情景模拟:在适用的情况下,提供情景分析工具,用户可以调整变量(如预算分配)来预测不同情况下的结果。
 
3. 个性化
·  用户定制:用户的个人目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定习惯养成的效果。
·  目标跟踪:类似于健身APP中的目标设定,允许用户设定并跟踪自己的记录目标,如每月节省金额、每周阅读书籍数量等。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估进展,并为用户提供有针对性的反馈和建议。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的记录数据,如实时更新的情绪评分或新添加的费用条目,这对于及时调整计划尤为重要。
·  同步与整合:与其他相关平台或服务无缝对接,自动同步来自各种来源的数据,如银行账户、健康监测设备等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设阈值或需要特别关注时,及时向用户发送通知或提醒,帮助用户保持记录习惯或抓住改进机会。
 
5. 隐私与安全
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保用户的个人信息和敏感数据的安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如GDPR(欧盟通用数据保护条例),确保数据处理符合法律要求。
 
6. 教育与支持
· 学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的记录数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让用户之间可以交流经验和支持,增加互动性和动力。
·  客户支持:提供在线客服或热线电话,确保用户在遇到问题时能够得到及时的帮助。
 
7. 历史回顾与趋势分析
·  长期趋势:提供长周期的趋势分析图表,帮助用户回顾过去一段时间内的变化和发展,如年度费用总结、多年情绪变化等。
·  模式识别:通过可视化手段帮助用户发现隐藏的模式或规律,如消费习惯、情绪波动周期等。
·  里程碑标记:在图表中标记重要的里程碑或转折点,如重大事件发生的时间、重要决策做出的时刻等,增强回忆和反思的价值。
 
综上所述,信息记录类应用的数据图表设计不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注隐私与安全性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助用户更有效地管理和理解记录的信息,从而促进更好的自我管理和行为改变。
 
⭐️ 
PART 7 
——————
结语

情绪价值在体验设计中的应用

ui设计分享达人 交互设计及用户体验

近两年“情绪价值”这个词,相信每个人应该或多或少都有过接触,从商业空间的营销场景到后来渗透到每个领域、每个行业。 
 
先说下这个词的概念,它源于心理学和社会学, 本意为:“它指的是一个人或事物对他人情感状态所产生的积极影响和价值。这种价值不仅仅体现在短暂的愉悦感受上,更包括长期的情绪稳定、心理满足和精神支持。” 
无论是在网红还是在新型电商行业中,许多品牌强调的已经不是单一的产品功能价值,而是增加了强调在消费体验中为消费者带来的快乐、满足、归属感等等一些积极的情绪。这足以说明,无论是品牌、产品还是服务越来越注重为消费者提供情绪价值。 
 
而用户体验设计的本质其实就是让人在使用产品的过程中有非常愉悦的感觉,这一点与“情绪价值”这个词的核心也有点不谋而合。 
 
情绪价值在体验设计中的应用
 
 
相信我们都有这样的疑问:情绪价值在体验设计中重要吗,有什么具体的关系?在设计工作中的情绪价值到底重要吗?情绪价值对产品使用的提升有哪些,具体要怎么做?相信看完下面的内容,你应该会对上面的问题有答案的。 
 
一、情绪价值对用户体验的影响
首先我们可能需要了解情绪价值能给用户带来什么?申晨老师在一次分享会上有提到过情绪价值的三个方向:愉悦感、保障感、专享感。三者由浅入深影响着用户在使用产品时的情绪变化,对应到体验设计中是这样的: 
  •  
    愉悦感→影响用户的满意度
  •  
    保障感→影响用户的容忍度
  •  
    专享感→影响用户的忠诚度
 
提升用户满意度
积极情绪的诱导
 
当产品或服务能够提供情绪价值时,会引发用户的积极情绪。如下图,三种UI会给用户不同的情绪反馈,积极的情绪(右图)往往会让用户驻足停留的更长一些,即便没有需求,也会更愿意去花费一些时间去深入了解,进而带来一些拉新、浏览转化等等数据的提升 
情绪价值在体验设计中的应用
 
 
满足情感需求
 
许多产品和服务通过满足用户的情感需求来提供情绪价值。用户在使用这些产品时,会因为产品所承载的情感因素而感到满足,进而提升对产品体验的满意度。例如: 
  •  
    社交媒体的分享被赞,是一种被关注、被认可的情感需求;
  •  
    直播平台app的互动效果,也是一种渴望互动的情感需求,以此刺激观看者送出礼物。
改善用户对负面体验的容忍度
情绪缓冲作用
 
当产品或服务出现一些小问题时,之前积累的情绪价值可以起到缓冲作用。例如: 
  •  
    在使用某工具产品时,友好的客服系统会给用户比较积极的情绪积累,从而选择包容一些比较小的错误;
  •  
    还有很多错误页面的情感化设计,目的亦是如此。
引导解决问题的积极态度
 
如果用户对产品或服务有情感上的依赖,当遇到问题时,他们会更积极地寻找解决办法,而不是抱怨和放弃。例如: 
  •  
    当产品或服务偶尔出现卡顿现象时,其用户社区氛围很好,用户之间可以互相交流使用经验和解决方案,并且软件开发者也会积极回应用户的问题。这种情绪价值会让用户愿意配合开发者解决软件卡顿问题,而不是直接卸载软件。
 
情绪价值在体验设计中的应用
 
 
增强用户的忠诚度
能够在用户和产品 / 服务之间建立起情感纽带
 
  •  
    以苹果产品为例,苹果公司通过简洁、易用的设计,以及高效的客户服务,为用户提供了良好的情绪体验。用户在使用苹果产品的过程中,会逐渐对品牌产生信任和喜爱。这种情感纽带使得用户在下次购买电子产品时,更有可能继续选择苹果产品,忠诚度较高。
  •  
    一些会员制度也注重通过情绪价值来增强用户忠诚度。例如,酒店的会员计划会为会员提供优先入住、免费升级房间、生日惊喜等服务。这些措施让会员感受到特殊待遇,产生一种被重视的情绪,从而增强了用户对酒店品牌的忠诚度。
推动口碑传播
 
当用户从产品或服务中获得了高情绪价值,他们更愿意向他人推荐。例如: 
  •  
    用户在一家餐厅用餐,餐厅的服务人员热情周到,菜品的呈现方式也很有创意,让用户在享受美食的同时获得了愉悦的情绪体验。这种用户很可能会将这家餐厅推荐给朋友、家人,通过口碑传播为餐厅带来新的顾客。
  •  
    在线游戏如果能为玩家提供丰富的社交互动功能,让玩家在游戏中结交朋友、组队作战,获得团队合作的快乐和成就感等情绪价值,玩家就会积极向周围的人宣传这款游戏,扩大游戏的用户群体。
 
 
二、什么产品适合通过创造情绪价值提升使用体验
 
C端产品:在创造情绪价值的应用策略下,更容易获得显著成果
情绪价值在体验设计中的应用
 
 
 
创造情绪价值这种有效的策略,尤其在面向个人用户产品时,可以更显著提升其使用体验。例如: 
  •  
    社交类产品
    如微信、微博等,通过提供社交互动和情感连接,增强用户的归属感和幸福感 
  •  
    内容类产品
    如视频平台、音乐应用等,通过提供丰富多样的内容,满足用户的情感和娱乐需求 
  •  
    娱乐类产品
    如游戏、盲盒等,通过游戏性和不确定性,激发用户的兴趣和情感投入 
  •  
    交易类产品
    如电商平台、在线购物等,通过营造购物氛围和提供个性化推荐,增加用户的购物愉悦感 
  •  
    工具类产品
    如效率工具、健康管理应用等,通过提供情感化的设计和反馈,提升用户的使用体验和满意度 
 
那么 B 端产品是否同样适用呢?答案无疑是肯定的。随着企业数字化转型的迅速推进,B 端产品在各个行业领域当中得到了广泛的应用,用户体验的重要性越发显著。 
 
 
B端产品:创造情绪价值更有利于提高忠诚度
 
情绪价值在体验设计中的应用
 
 
创造情绪价值的方式
 
  •  
    情感设计:通过设计元素和交互方式激发用户的情感共鸣,增强用户对产品的认同感和忠诚度。例如,通过微动画、个性化推荐和人性化提示,设计师可以为用户创造愉悦的使用体验
  •  
    个性化服务与定制化解决方案:了解客户的独特需求和痛点,提供个性化的建议和支持,帮助客户解决实际问题,带来更多情感上的满足感
  •  
    优化用户体验:注重产品设计和交互体验优化,提供良好的客户服务和多种使用方式,不断优化产品功能,以提升用户的整体使用体验
 
 
创造情绪价值的重要性
 
  •  
    提升用户满意度和忠诚度:通过创造情绪价值,产品可以显著提升用户的满意度和忠诚度,从而促进续费和口碑传播
  •  
    增强产品的市场竞争力:在功能相似的产品中,提供卓越的用户体验可以成为SaaS产品的核心竞争力,帮助企业在市场中脱颖而出
 
 
三、体验设计师如何提升产品的“情绪价值”
我们可以从设计核心的三大阶段(用户研究阶段、设计阶段、测试与优化阶段)入手,来创造与提升产品的情绪价值 
 
用户研究阶段
情绪价值在体验设计中的应用
 
 
 
深入了解用户情感需求
开展定性研究
:通过用户访谈、焦点小组等方式,挖掘用户在使用产品时的情感期望。例如,在设计一款健身APP时,与健身爱好者进行深入访谈,了解他们在健身过程中的情绪变化。可能会发现,用户在完成一次具有挑战性的训练后,希望得到即时的鼓励和成就感,这就为产品设计提供了情感方向。
 
进行定量研究
:利用问卷调查等手段,收集用户对现有产品情绪体验的数据。比如,询问用户在使用某电商平台时,购物流程是否让他们感到焦虑或愉悦,以及在哪些环节有这种情绪。通过数据分析,找出用户情绪的痛点和兴奋点。
 
构建用户画像与情绪场景
 
创建用户画像
根据用户研究的结果,构建详细的用户画像,包括用户的性格、生活方式、价值观等因素,并且添加情绪维度。以一款旅行APP为例,其中一个用户画像可能是“年轻的探险爱好者,性格乐观,追求刺激,在旅行前会充满期待和兴奋”。这样的画像有助于设计师站在用户的角度思考情绪体验。
描绘情绪场景
:针对不同的用户画像,描绘他们使用产品的情绪场景。比如,对于上述旅行APP的用户,在规划行程时,他可能会在APP上查找小众景点,此时的情绪是好奇和兴奋;在旅途中使用导航功能时,希望得到精准的指引,情绪是焦虑或安心,取决于导航的准确性。这些情绪场景为后续设计提供了具体的目标。
 
 
设计阶段
情绪价值在体验设计中的应用
 
 
视觉设计方面
色彩运用
:色彩对情绪有着强烈的影响。例如,暖色调如红色和橙色通常传达活力、热情的情绪,适合用于激发用户兴趣的界面元素,如促销活动页面;冷色调如蓝色和绿色则给人冷静、可靠的感觉,可用于数据展示或需要用户集中注意力的区域。在设计金融产品界面时,使用蓝色为主色调可以让用户感到安全和信任。
图形设计
:简洁、易懂的图形能够快速传达信息并引发积极情绪。在图标设计上,要符合用户的认知习惯。例如,在社交产品中,使用微笑的表情图标表示点赞或喜欢,用户很容易理解并产生愉悦的情绪。同时,利用有趣的插画或动画可以增加产品的趣味性。如在儿童教育产品中,用生动的动画来讲解知识,能够吸引孩子的注意力并让他们感到快乐。
排版布局
:合理的排版可以提升用户的阅读体验和情绪。清晰的标题和正文层次,适当的文字间距和行高,能让用户感到舒适。在新闻类产品中,采用模块化的排版,将不同的新闻内容清晰划分,使用户在浏览时不会感到混乱,从而减少烦躁情绪。
 
交互设计方面
反馈机制设计
:为用户的操作提供及时、明确的反馈可以提升情绪价值。例如,当用户点击一个按钮时,按钮会有短暂的变色或动画效果,让用户知道操作已被接收。在加载页面时,使用有趣的加载动画代替单调的进度条,如旋转的小图标或者跳动的小球,能够缓解用户等待的焦虑情绪。
操作流程优化
:简化复杂的操作流程,减少用户的认知负担和操作失误。在移动支付产品中,尽量减少支付步骤,让用户能够快速完成支付,避免因流程繁琐而产生烦躁情绪。同时,可以增加一些引导性的交互,如新手引导教程,帮助用户轻松上手产品,提升用户的自信心和满意度。
个性化与定制化设计
:根据用户的喜好和行为习惯,提供个性化的交互体验。例如,音乐产品可以根据用户的收听历史推荐相似风格的歌曲,用户会因为产品的贴心而感到愉悦。并且允许用户对界面布局、主题等进行定制,让用户有更多的掌控感,满足他们的自我表达需求。
 
内容设计方面
文案撰写
:使用友好、易懂的文案可以拉近与用户的距离。在产品提示信息中,避免使用生硬的专业术语,而采用亲切的语气。例如,在一款智能家居产品中,当设备连接成功时,显示“哇,您已经成功连接啦,现在就可以享受智能生活啦”,这样的文案会让用户感到轻松和愉快。同时,文案的风格要与产品的定位和目标用户相匹配。
内容策略
:提供有价值、有趣的内容可以提升情绪价值。在知识付费产品中,确保课程内容不仅有深度,而且讲解方式生动有趣。对于内容社区产品,鼓励用户分享积极向上的内容,如生活中的小美好、励志故事等,营造一个充满正能量的社区氛围,让用户在浏览内容时感到愉悦和鼓舞。
 
 
测试与优化阶段
情绪价值在体验设计中的应用
 
 
可用性测试与情绪评估
进行可用性测试
:在产品原型阶段,邀请用户进行可用性测试,观察用户的操作行为和情绪反应。例如,在测试一款办公软件的新功能时,注意用户是否能够顺利使用,以及在使用过程中是否出现困惑、烦躁等情绪。可以通过用户的面部表情、言语反馈等方式收集情绪信息。
情绪评估工具
:利用情绪评估工具,如情感化可用性量表(UEQ)等,对用户的情绪体验进行量化评估。UEQ可以测量用户对产品的吸引力、易用性、可靠性等维度的情绪感受,通过数据分析,找出需要优化的情绪体验点。
 
根据反馈优化设计
迭代设计
:根据用户测试的反馈,对产品的视觉、交互和内容设计进行迭代优化。例如,如果用户在测试中表示某个界面元素的颜色让人感到刺眼,设计师可以调整颜色方案。如果用户对某个操作流程不理解,就优化操作引导。
持续关注情绪反馈
:产品上线后,持续收集用户反馈,关注用户情绪价值的变化。随着用户需求的变化和市场环境的改变,不断调整产品设计,以保持和提升产品的情绪价值。例如,在节日期间,对产品界面进行节日主题的装饰,为用户提供新鲜感和节日氛围带来的愉悦情绪。
 
四、情绪价值是否具备量化条件
可以通过以下方法对其进行量化计算
 
情感化可用性量表
情绪价值在体验设计中的应用
 
 
原理:UEQ是一种广泛用于量化用户对产品情绪体验的工具。它通过一系列的问卷题目来测量用户对于产品的吸引力、易用性、效率、可靠性和刺激度等多个维度的感受。例如,在吸引力维度上,会询问用户对于产品外观、风格是否感到喜欢;在易用性维度,会涉及用户操作产品时是否感到轻松、方便等问题。 
 
应用:在一款产品/功能的用户体验测试中,使用UEQ可以收集用户对该应用在不同维度的情绪评价。通过对大量用户反馈的数据统计,得出该应用在各个维度的量化得分,比如吸引力维度得分较高,说明产品在视觉等方面能引发用户积极情绪,而如果易用性维度得分较低,则可能表示产品的操作流程等会让用户产生负面情绪。 
 
 
净推荐值(NPS)与情绪关联量化
 
情绪价值在体验设计中的应用
 
 
 
原理:净推荐值是通过询问用户“您是否愿意将这个产品推荐给其他人”来衡量用户忠诚度。虽然NPS本身不是直接对情绪价值的量化,但它与用户的情绪体验密切相关。当用户体验到较高的情绪价值,如愉悦、满足等,他们更有可能成为推荐者,NPS得分就会升高。 
 
应用:通过定期收集用户的NPS数据,并且结合用户对功能使用体验的详细反馈(包括对产品、服务、售后等环节的情绪感受),可以间接量化情绪价值对用户忠诚度的影响。例如,如果发现NPS得分高的用户在评价中经常提及购物过程中的快乐情绪和优质服务体验,就可以推断出情绪价值在提升用户忠诚度方面起到了积极作用。 
 
 
 
  1.  
    生理指标测量
 
情绪价值在体验设计中的应用
 
 
原理:情绪会引发身体的生理反应,如心率、皮肤电导率、瞳孔大小等变化。通过专业的设备可以测量这些生理指标,以此来推断用户的情绪状态。例如,当用户感到兴奋或紧张时,心率会加快;当他们感到好奇或专注时,瞳孔可能会放大。 
应用:在用户体验实验室中,测试用户在使用虚拟现实(VR)游戏的情绪体验。通过佩戴可以监测心率和皮肤电导率的设备,观察用户在游戏不同场景下的生理指标变化。如果在某个刺激的战斗场景中,用户的心率明显上升,皮肤电导率也增加,就可以推断用户处于兴奋或者紧张的情绪状态,从而量化游戏场景对用户情绪的激发程度。 
 
虽然有量化方法,但也只有部分可被量化,完全精准量化还存在一定的挑战 
 
 
难以完全量化的原因
情绪的复杂性和主观性
个体差异:不同用户对同一产品或体验的情绪反应存在很大差异。例如,对于一款具有挑战性的游戏关卡,一些玩家可能会因为克服困难而感到兴奋和满足,而另一些玩家可能会因为觉得太难而产生沮丧情绪。这种个体差异使得很难用统一的标准来量化情绪价值。
文化背景影响:文化因素也会对情绪价值的感受产生影响。在某些文化中,含蓄的情感表达是常态,而在另一些文化中,人们可能更倾向于直接的情感反应。比如,在日本文化中,用户可能对产品的精致、细腻的设计有更深刻的情感共鸣,而西方文化中的用户可能更看重产品的创新性和个性化带来的情绪体验。
 
情绪与情境的动态变化
使用场景的多样性:用户在不同的使用场景下对产品的情绪价值感受不同。例如,一个音乐播放软件,用户在运动场景下可能更关注节奏强烈的音乐带来的激励情绪,而在睡前场景下则更看重舒缓音乐营造的放松情绪。这种随场景变化的情绪体验难以用固定的量化指标来衡量。
 
时间因素:用户对产品的情绪体验也会随着时间而变化。最初接触产品时的新鲜感可能会带来积极情绪,但随着时间推移,如果产品缺乏更新或出现问题,情绪可能会转变为消极。而且情绪的产生和消退过程很难精确量化,例如很难确定用户从感到满意到产生厌烦的具体时间节点。
虽然难以量化,但情绪价值在实际应用中发挥的作用还是很大的。 
 
 
结束语
在体验设计的广阔领域中,情绪价值犹如一股无形的力量,悄然影响着用户与产品之间的每一次互动。它不仅仅是愉悦感、保障感和专享感的简单叠加,更是用户在深层情感层面与品牌建立起的稳固纽带。通过精心设计的用户体验,我们能够触动用户的情感,激发他们的共鸣,从而在用户心中留下深刻而持久的印记。


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

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

ui设计分享达人 交互设计及用户体验

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


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

日历

链接

个人资料

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

存档