首页

用户体验中的神经设计:认知科学如何帮助我们打造更佳的界面

杰睿 用户研究

通过 AI 辅助创建的图像

说实话,我们大多数人在设计屏幕时并不会考虑人脑。我们关注的是布局、间距和颜色。但事实是:设计并非发生在屏幕上——而是发生在用户的大脑中。这就是神经设计的用武之地。

神经设计就是运用认知心理学和神经科学来构建直观、轻松甚至略带愉悦的界面。我之前并没有学过神经科学,但自从我开始了解大脑的运作方式后,我的设计方式就彻底改变了。

以下是我所学到的知识 — — 有真实的例子、用户体验法则和一些你可能想看看的书籍精华。

1. 大脑是懒惰的(好的方面)

我们的大脑天生就具有节能的本能。这意味着人们几乎总是会选择阻力最小的路径。当你的用户界面过于复杂或选项过多时,大脑就会说:“不行。”

记住希克定律

提供的选择越多,做出决定所需的时间就越长。

想想谷歌的主页只是一个标志和一个搜索栏。这并非偶然——它的设计是为了减少认知负荷。

Google.com

您可以做什么:

  • 确定主要行动的优先级
  • 保持表单简短(就像 Typeform 那样)
  • 删除无用的元素

2.人们先看到,后思考

设计首先是情感驱动,其次是逻辑驱动。这意味着色彩、布局甚至动画都能在第一秒就建立信任。

让我们来看一个例子:Duolingo 的应用程序使用友好的插图、有趣的语气,以及一些感觉像大脑“拍拍背”一样的小奖励。它降低了学习新语言的情感障碍。

图片来源——匹兹堡杂志

以下是Susan Weinschenk 所著《神经网络设计》一书中的一条重要建议:

“我们不会做出合乎逻辑的决定。我们会做出情绪化的决定,然后用逻辑来证明其合理性。”

您可以做什么:

  • 使用温暖、友好的设计语言
  • 让入职培训感觉像是手把手指导,而不是测验
  • 添加微妙的动作,使操作感觉灵敏(就像Apple在 iOS 中使用弹跳或淡入淡出一样)

3.熟悉的感觉很好

大脑喜欢模式。当用户看到自己熟悉的事物时,他们会感到安全,并且能够掌控一切。

记住雅各布定律

用户大部分时间都花在其他网站上。因此,他们期望你的产品也能以同样的方式运作。

让我们看一些例子:Instagram 的底部标签栏亚马逊的购物车图标Gmail 的撰写按钮——它们都遵循常见的视觉隐喻,以减少学习曲线。

您可以做什么:

  • 遵循原生平台惯例
  • 使用常见的图标和术语(除非您是 Zara,否则不要将购物车称为“我的包”)
  • 除非有充分理由,否则避免不必要的改造

4.记忆很短暂——真的非常短暂

认知科学告诉我们,用户的工作记忆中一次只能记住大约4个条目。因此,如果你的应用依赖于用户记忆指令,那么它注定会失败。

“米勒定律”来了

一般人的短期记忆只能保留 7 件(正负 2 件)物品。

真实案例:你有没有尝试填写表单,但错误信息只有在提交后才会显示,而你却忘了哪个字段出了什么问题?这简直就是记忆噩梦。

您可以做什么:

  • 将任务分解成小的、可管理的步骤(例如Airbnb 的分步主机设置
  • 使用内联验证
  • 保持标签靠近输入(不要让用户滚动或猜测)

5.反馈=安全

大脑会不断检查:这有效吗? 我能控制吗?如果用户界面没有响应输入,用户就会感到不确定——即使后台一切正常。

用户体验法则:反馈循环原则

人们需要立即得到反馈来了解其行为的结果。

例如,Slack在消息发送时会显示“正在发送…”的动画和勾号。这能建立信任,尤其是在快速对话中。

您可以做什么:

  • 显示加载状态、成功消息或错误提示
  • 允许用户撤消操作(如 Gmail 的“撤消发送”)
  • 动画过渡到信号系统状态

如果你想深入了解,可以参考以下书籍推荐

以下几本书确实帮助我将神经科学和用户体验联系起来:

  • Susan Weinschenk 的《神经网络设计》 ——超级易读,示例丰富
Susan Weinschenk 的《神经网络设计》
  • Susan Weinschenk 撰写的《每个设计师都需要知道的关于人的 100 件事》 ——设计师的最爱
苏珊·温申克 (Susan Weinschenk) 的《每个设计师都需要了解的关于人的 100 件事》
  • 史蒂夫·克鲁格的《别让我思考》 ——虽然不是神经科学,但完全符合大脑的行为方式
史蒂夫·克鲁格的《别让我思考》
  • 唐纳德·诺曼的《设计心理学》 ——以人为本的设计思维的经典见解
唐纳德·诺曼的《设计心理学》

好的用户体验不仅仅是让事物看起来美观。它在于理解人脑的运作方式,并围绕此进行设计。神经设计提醒我们,我们设计的不是屏幕,而是思维中的体验

当我们做得好的时候,一切都会顺利。

所以下次调整布局或重新设计流程时,问问自己:
现在什么对大脑来说最容易?
这个问题比任何花哨的工具都更能帮助我做出更好的决策。

……

 

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

兰亭妙微 软件开发与电子病历医疗界面设计服务

杰睿 随笔的一些文章

 

 
 
兰亭妙微作为专业的软件开发公司,在行业深耕 16 年,由清华团队全程主导技术与设计方向,积累了扎实的行业经验。在 QT 软件开发领域,我们的技术团队成员平均拥有 8 年以上相关工作经历,熟悉 QT 框架的各类功能模块与开发技巧,能够根据企业不同的业务场景,定制开发稳定可靠的桌面应用程序。从需求沟通阶段的功能梳理,到技术方案设计时的架构搭建,再到开发过程中的代码编写与测试优化,每个环节都有严格的质量把控标准,确保交付的软件在运行效率与稳定性上符合客户预期。
设计服务方面,我们兼具用户体验设计公司与界面设计公司的双重优势。在高端网站设计业务中,团队会先深入了解企业的品牌文化、核心业务与目标用户群体,结合市场流行趋势与实用功能需求,打造既符合品牌调性又适配多终端的网站。从首页的视觉呈现到内页的信息架构,从交互逻辑的顺畅性到加载速度的优化,都经过细致打磨,助力企业通过线上平台有效展示自身形象。在 B 端界面设计与 APP 界面设计中,始终以用户体验为核心考量,通过前期的用户行为调研与业务流程分析,合理规划界面的信息层级与操作路径,让复杂的功能模块变得条理清晰,提升用户的操作效率。
在医疗健康领域,我们尤其在电子病历医疗数据分析界面设计上积累了丰富经验。设计过程中,团队会与医护人员、医疗信息管理人员进行多轮沟通,深入了解临床工作流程、数据记录规范与分析需求。针对电子病历中大量的文字信息、检查数据与诊疗记录,采用分类标签、数据可视化图表等设计方式,让医护人员能够快速定位关键信息。同时,考虑到医疗工作的严谨性,在界面的操作反馈、数据校验等细节上做了特殊处理,减少误操作的可能性,让医疗信息的录入、查询与分析过程更加高效便捷。
秉持 “敬事而信,德智兼修” 的企业理念,16 年来我们已服务过超 300 家来自金融、医疗、工业、教育等多个行业的客户,完成 640 多个不同类型的项目,在设计与开发领域积累了良好的口碑。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

留白设计和UI设计准则

涛涛 设计思维

本文主要介绍留白设计准则(包括留白与裁剪可突出主体、留白与重心能凸显重点功能、留白影响视觉流使阅读有序、留白可对信息分组)和 UI 设计排版准则(层级通过字号、颜色建立,重复增加页面整体感,对齐引导视觉流,接近原则整合关联元素),强调合理运用这些准则可提升设计效果与用户体验。

UI 设计需懂用户心理学

涛涛 交互设计及用户体验

UI 设计需懂用户心理学,感知受过去经验、当前环境和未来目标影响,因此设计要避免歧义、保持一致并理解用户目标;格式塔心理学的接近性、相似性等原则可用于优化界面层次和用户体验;同时要降低信息噪音让用户专注,考虑到人天生不爱阅读的特性,需优化信息设计,减少文字量、提升可读性,这些都基于人类认知和心理学,能帮助设计师做出更符合用户需求的设计。

用户体验一致性思考

涛涛

在团队内部,我们已确立了一套设计规范,在日常项目中使用设计规范输出变的高效、统一。然而,在实际操作中,不可避免地会遇到一些特殊情况:某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此,深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时,灵活应对多变的需求,确保设计既保持统一和谐,又能满足特定场景下的独特需求,从而实现用户体验与品牌价值的双重提升。

我们来帮你捋清楚产品的设计思路

涛涛

全程参与产品从 0 到 1 的设计能锻炼综合能力,但实际工作中更多是迭代优化,需主动熟悉业务背景以掌握设计主动权。
文章重点解析立项前探索期的设计思路,后续将介绍交付与迭代阶段。

设计案例分享 | 人力资源模块界面设计

杰睿

 

产品定位
远东移动门户APP-人力资源模块包含收入证明、在职证明、假期管理、公租房、政策公示等,同时将互动信息在集团公告区互动展示,实现人员管理、交流协同化和一体化。使集团工作更便捷、高效,组织管理更透明化,合理化。
目标用户
远东移动门户APP面向和服务于公司全体领导和员工,是一个综合性、协同性的办公管理系统。本着操作便捷,办事方便高效,沟通及时有效的原则,界面友好易用、简洁美观。
设计风格
视觉方面,整体色调与公司logo及网站主色调红色保持一致。交互上,考虑到使用便捷、省时,提取主要功能按钮放在首页上方;同时,常用的业务模块集中展示,并做精细化处理。保证界面整体性和简洁统一,并做到有主有次,层次清晰。在布局上,做了两套方案供客户选择。第一套更大胆创新,第二套则相对中规中矩。

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

鹤鹤

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

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

鹤鹤

关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

日历

链接

个人资料

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

存档