首页

数据驱动的 B 端设计:如何用 UI 提升企业级产品体验?

鹤鹤

在数字化转型的浪潮中,企业级产品的用户体验成为了决定产品竞争力的关键因素。对于 B 端产品而言,其使用场景复杂、用户需求多元,如何通过 UI 设计提升产品体验,成为了摆在设计者面前的重要课题。而数据驱动的设计方法,为这一难题提供了有效的解决路径。
数据收集与分析:奠定设计基础
要利用 UI 提升企业级产品体验,首先需精准把握用户需求。数据收集在此发挥关键作用,通过对用户行为数据、业务流程数据以及用户反馈数据的收集,能深入洞察用户使用产品时的痛点与期望。例如,分析用户在界面特定区域的停留时间、操作路径以及出错频率等,可明确用户在使用过程中遇到阻碍的环节。再结合用户主动反馈的意见,便能够为后续的 UI 设计优化提供有力依据,确保设计方向与用户真实需求高度契合。
遵循简洁高效的 UI 设计原则
企业级产品的用户通常期望借助产品提升工作效率,因此 UI 设计应秉持简洁高效原则。在界面布局上,避免元素堆砌,采用清晰的层级结构,让用户能迅速定位所需功能。以常见的企业资源规划(ERP)系统为例,将核心业务流程模块如采购、销售、库存管理等置于显眼且易于访问的位置,减少用户操作步骤。同时,精简操作流程,去除不必要的确认环节和复杂的表单填写项,利用自动化和智能化手段辅助用户完成任务,如自动填充常用信息、根据用户行为提供智能推荐等,以此提升用户操作效率,减少时间成本。
打造个性化与一致性并存的体验
不同企业虽有共性业务需求,但在业务流程和操作习惯上也存在差异。这就要求 B 端产品的 UI 具备一定的个性化定制能力。例如,允许企业根据自身品牌形象定制界面主题颜色、字体样式等视觉元素,增强品牌认同感。同时,在核心交互流程和功能布局上保持一致性,确保用户在使用不同模块或切换不同企业账号时,能迅速适应操作方式,降低学习成本。这种个性化与一致性的平衡,既能满足企业的独特需求,又能保证用户体验的连贯性和稳定性。
2301a18928f1bf96685094b2bd9d79a3ffc0033e586d3-iN8gVd_fw1200.png
强化数据可视化呈现
在企业级产品中,数据是决策的重要依据。优秀的 UI 设计应能将复杂的数据以直观、易懂的方式呈现给用户。运用柱状图、折线图、饼图等可视化图表,展示业务数据的趋势、占比和对比关系,让用户一眼看清关键信息。同时,提供数据筛选、钻取等交互功能,使用户可根据自身需求深入分析数据。例如,销售仪表盘通过可视化呈现各地区、各时间段的销售数据,管理者能快速发现销售热点和问题区域,并通过交互操作进一步查看详细数据,为决策提供有力支持。
72d2b0d9ac11f8bd9ceb86436d498d396cf543c030531-tmUYnq_fw1200.jpg
通过数据驱动的设计方法,精准把握用户需求,遵循简洁高效、个性化与一致性并存的设计原则,强化数据可视化呈现,能够有效提升企业级产品的 UI 体验,助力企业在激烈的市场竞争中脱颖而出,为用户创造更大价值。

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

UX 「二月」 AI设计观察

鹤鹤

MEUX 「二月」 AI设计观察
 
 
 
【1】OpenAI首个智能体Operator大测评
【2】腾讯落子,AI后手入场
【3】字节OmniHuman-1人体动画生成新突破
【4】2025年最佳项目管理工具对比
【5】DeepSeek爆火,巨头开始反击
【6】微软SWE Agent首曝光
【7】山姆·奥特曼提出AI经济学观察
【8】华为小艺版DeepSeek和R1有何差别
【9】AI霸屏第二年,硅谷大佬们Pick哪些产品
【10】OpenAI发布全新VI设计指南
 
 
 
1.OpenAI首个智能体Operator大测评
 
近期发布的Operator无疑是AI圈最大的亮点,这款AI智能体能够自动处理一系列任务,像是演唱会购票、家政服务预订、AI新闻查找等。演唱会抢票终于不用自己蹲守了,公司订餐也可以直接「无脑托管」,这就是OpenAI发布的Operator。
 
MEUX 「二月」 AI设计观察
 
 
 
 
2.腾讯落子,AI后手入场
 
今年初,腾讯AI助手应用“元宝”已经完成了组织调整,按腾讯官方分类,“混元”系列包括混元大模型与元宝、元器。元宝对标豆包,元器对标扣子。元宝从技术部门的剥离可以视为从技术到重视产品体验的转变。沿着相同的逻辑,元器大概率也要被归于CSIG。面向To C,它可以是一款独立的Agent应用开发产品;面向To B,也能以“大模型+Agent”的形式落地企业场景。
 
MEUX 「二月」 AI设计观察
 
 
 
 
3.字节OmniHuman-1人体动画生成新突破
 
与传统的深度伪造技术不同,OmniHuman-1不仅仅局限于人脸替换,而是能够完整地动画化整个身躯,包括自然的手势、姿态及与物体的互动。无论是一个政客在发表演讲、一个历史人物被复活,还是一个虚拟角色在唱歌,该模型正在促使我们重新思考视频创作的方式。
 
MEUX 「二月」 AI设计观察
 
 
 
 
4.2025年最佳项目管理工具对比
 
2025年市面上有哪些值得留意的项目管理工具呢?它们分别适合哪种场景?有什么功能,优缺点又是什么?文章对2025年最佳项目管理工具—即时设计、Trello、Monday、Jira、ClickUp、Wrike和Basecamp进行了详细对比,帮你找到最合适你的项目管理办法。
 
MEUX 「二月」 AI设计观察
 
 
 
 
5.DeepSeek爆火,巨头开始反击
 
这个春节,几乎所有人都被“国产之光”DeepSeek的魔力征服了。用高超的算法、开源技术路线、极低的成本,DeepSeek打破了科技巨头用算力构建起的高墙,也让AI平民化成为现实。此刻,DeepSeek的冲击波效应还在继续,上线仅25天,DeepSeek便狂揽4000万次下载,超越了ChatGPT的首月下载量。到1月最后一周,DeepSeek在短短7天内便新增了1亿用户,累计用户达1.25亿。
 
MEUX 「二月」 AI设计观察
 
 
 
 
6.微软SWE Agent首曝光
 
纳德拉官宣,GitHub Copilot将all-in智能体,微软自主的SWE智能体首次亮相。GitHub现任CEO Thomas Dohmke表示,自主SWE智能体(项目代号Padawan)也将融入GitHub用户体验,不过要等到今年晚些时候发布,它可以将GitHub Copilot体验从搭档提升到人类程序员水平。
 
MEUX 「二月」 AI设计观察
 
 
 
 
7.山姆·奥特曼提出AI经济学观察
 
如今,一些接近AGI的系统正逐渐浮现,因此,理解当前所处的时代至关重要。AGI是一个定义模糊的概念,但通常指的是能够在多个领域以人类水平解决复杂问题的系统。人类天生就是工具的创造者,拥有强烈的探索和创新欲望,而正是这种驱动力推动世界不断向前发展。每一代人都站在前人的肩膀上,发明出更强大的工具—从电力、晶体管、计算机、互联网,到即将到来的AGI。我们对AI的理解正在快速演进,而AI的经济影响力也逐步显现。 
 
MEUX 「二月」 AI设计观察
 
 
 
 
8.华为小艺版DeepSeek和R1有何差别
 
DeepSeek这匹来自中国的AI黑马,以极低的训练成本实现了媲美OpenAI o1的性能,凭借强大的中文能力、堪称赛博觉醒的顿悟时刻和秉持开源精神,迅速搅动了以ChatGPT为首的AI圈。随着腾讯云、秘塔AI、阿里云、百度智能云和国家超算互联网平台纷纷宣布接入DeepSeek,手机作为最常用的个人智能终端,也迎来了它的身影。
 
MEUX 「二月」 AI设计观察
 
 
 
 
9.AI霸屏第二年,硅谷大佬们Pick哪些产品
 
想知晓前沿AI产品趋势?看A16z这份榜单就够!24位业内行家每人精挑3款心头好,从中能洞察诸多关键信息,AI搜索Perplexity成热门、AI工具百花齐放、AI视频势头正猛。各领域更是亮点不断,从起步探索的工具类,到大厂扎堆的ChatBot,再到风格各异的图像、视频产品,为你速览AI创新风向。
 
MEUX 「二月」 AI设计观察
 
 
 
 
10.OpenAI发布全新VI设计指南
 
2025年伊始,OpenAI发布了全新的品牌设计指南,目的是为品牌提供明确的设计指导,包括logo的使用、排版布局、商业语言的应用等方面,为产品的营销和沟通工作提供所需的设计资产和应用规范。
 
MEUX 「二月」 AI设计观察


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

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

大屏 UI 设计风格的未来趋势

鹤鹤

在科技飞速革新的时代,大屏设备的应用领域不断拓展,从城市的智能交通指挥中心,到商场的互动广告大屏,再到家庭的超大尺寸智能电视,大屏已然成为信息展示与交互的关键载体。大屏 UI 设计风格也随之不断演变,顺应技术发展和用户需求,展现出一系列引人瞩目的未来趋势。

一、深度融合 AI 与动态交互

随着人工智能技术的深度融入,大屏 UI 将不再局限于静态展示。AI 驱动的动态交互设计将成为主流,系统能够依据用户的行为数据、使用习惯,甚至实时情绪状态,智能调整界面元素的布局、色彩和展示内容。例如,在数据监控大屏中,AI 可以根据数据的变化趋势自动突出显示关键信息,通过动态图表和实时动画,让数据的呈现更加直观、生动。这不仅提升了信息传达的效率,还能为用户带来个性化、沉浸式的交互体验。

二、沉浸式的 3D 与虚拟现实体验

未来的大屏 UI 设计将朝着沉浸式体验大步迈进,3D 技术和虚拟现实(VR)、增强现实(AR)的应用会更加广泛。用户不再是简单地观看屏幕,而是能够身临其境地与界面内容互动。在展厅展示中,利用 3D 建模和 VR 技术,用户可以仿佛置身于虚拟的产品世界,全方位查看产品细节,进行虚拟操作。这种沉浸式的体验将模糊现实与虚拟的界限,极大地增强用户的参与感和记忆度。

三、可持续与环保设计理念的渗透

环保意识的增强促使大屏 UI 设计融入可持续发展理念。未来的设计将更加注重色彩的选择和图形元素的运用,以减少视觉疲劳和能源消耗。同时,在界面设计中可能会融入环保主题的元素,鼓励用户关注环境问题。例如,采用低饱和度、柔和的色彩搭配,不仅符合环保理念,还能营造出舒适的视觉氛围,让用户在长时间观看大屏时也能保持轻松愉悦的心情。

四、打破常规的跨界融合风格

不同设计领域的跨界融合将为大屏 UI 带来全新的风格。艺术、时尚、建筑等领域的设计理念和元素将被引入大屏 UI 设计中。从艺术作品中汲取灵感,打造具有独特艺术风格的界面;借鉴时尚界的流行元素,让大屏 UI 更具时尚感和潮流感;融合建筑设计的空间布局和结构美学,使界面的层次感和空间感更强。这种跨界融合将创造出独一无二的大屏 UI 风格,满足用户日益多样化的审美需求。

五、强化无障碍设计与包容性

未来的大屏 UI 设计将更加关注所有用户群体,包括残障人士。无障碍设计将成为重要标准,确保视力障碍用户能够通过辅助技术(如屏幕阅读器)顺利获取信息,听力障碍用户能够通过视觉提示理解内容。同时,设计将更加注重通用性和包容性,使不同文化背景、年龄层次的用户都能轻松使用大屏设备,实现真正意义上的信息平等和便捷交互。
大屏 UI 设计风格的未来充满无限可能。设计师需要紧跟技术发展潮流,关注用户需求和社会趋势,不断创新和探索,将各种先进的理念和技术融入设计中,打造出既符合时代特征又能满足用户多样化需求的大屏 UI 界面,引领未来数字交互体验的新潮流。

沉浸交互,APP 界面设计新视界

鹤鹤

 
在移动互联网蓬勃发展的今天,APP 已渗透到生活的各个角落。从日常社交到工作办公,从休闲娱乐到学习求知,各类 APP 琳琅满目。在这激烈的竞争中,融入沉浸交互理念的 APP 界面设计,正成为吸引并留住用户的核心竞争力。

一、沉浸交互,突破传统藩篱

传统 APP 界面设计多以功能展示为主,用户操作时如同使用独立工具,缺乏深度体验。而沉浸交互打破了这种局限,通过精心设计,让用户仿若置身于与现实紧密相连又独具特色的虚拟空间。
以一款旅行 APP 为例,打开它不再是单调的景点、酒店列表,而是借助 3D 动画、全景展示等技术,瞬间将用户 “传送” 至目的地。滑动屏幕,就像漫步当地街巷;点击景点,专业语音讲解随即响起,用户从信息被动接收者,转变为主动参与者。

二、沉浸交互的关键要素

  1. 视觉沉浸:精美的界面是吸引用户的敲门砖。高清图片、协调的色彩搭配与流畅动画,共同营造出逼真且极具吸引力的视觉环境。摄影类 APP 在图片展示时采用全屏高清,并搭配细腻光影,让用户仿若置身拍摄现场。
  1. 听觉沉浸:合适的音效能强化沉浸感。游戏 APP 中逼真的环境音效与紧张背景音乐,能让玩家迅速投入;冥想类 APP 里舒缓的自然音效,如潺潺流水、悠悠鸟鸣,帮助用户放松身心,沉浸其中。
  1. 操作沉浸:简洁、流畅且符合用户习惯的操作流程至关重要。短视频 APP 用户只需上下滑动就能浏览视频,简单便捷,无需思索操作步骤,便可沉浸于内容海洋。

三、沉浸交互的显著优势

  1. 提升用户体验:丰富有趣的交互体验,大幅提高用户满意度与忠诚度。
  1. 增强用户粘性:用户沉浸其中,更愿投入时间,APP 的使用时长和打开频率随之增加。
  1. 助力品牌塑造:独特的交互设计使 APP 在竞品中脱颖而出,塑造鲜明品牌形象,让用户记忆深刻。

四、未来展望

随着 VR、AR 等技术的成熟,沉浸交互在 APP 界面设计中的应用将更加广泛深入。未来,我们或许能通过手机参加虚拟演唱会,足不出户游览全球博物馆。
沉浸交互为 APP 界面设计开拓了新视野,让 APP 从单纯的工具,转变为充满无限可能的体验平台。开发者与设计师应持续探索创新,将沉浸交互发挥到极致,为用户带来更多精彩。

讲讲AI在B端设计上的应用方法

鹤鹤

B 端设计领域的 AI 应用
大多数同学目前对 AI 应用的认识只有文生图、对话、驾驶等领域,但 AI 应用的场景远远不止它们。
和头部的明星 AI 产品、模型相比,细分市场的 AI 应用就非常没有存在感了。比如使用 AI 进行财务的审核、饮料配方的调节、工程安全的模拟等等,它可以帮助企业节约大量的人力完成工作。
概括起来,就是一些可以通过计算机完成的(也不止)重复性劳动或标准化流程,都可以引入 AI 的技术进行降本增效。
那在 UI 设计领域中,这些重复性和标准化的工作内容有嘛?
有,但是并不会像外行或者新手想象的那么多。AI 难以覆盖的场景我们过去的分享探讨过,等等也会做进一步的说明,而这里我们先要探讨的,就是能用 AI 实现的 B 端设计场景,具体有哪些。
我们都知道市面上现在有很多开源的 B 端前端框架,各个大厂前赴后继地对它们进行更新和完善,里面包含了非常丰富的组件库。
讲讲AI在B端设计上的应用方法
 
 
这些组件库不不止是 UI 的组件,也包含了前端的对应代码,前端工程师可以快速调用这些代码组件而不用自己去重新写一遍样式和交互。
原则上,使用现成的组件开发就可以快速完成整套项目的前端内容,这可以给前端工程师节省大量时间。所以即使项目中有完整的设计稿,前端在开发过程中也会偷懒直接略过,直接套用框架内的组件实现。
这和设计师直接套用素材完成运营图设计一样,明明有现成的素材在那里,为什么要浪费一大堆时间自己重新画一遍还是用 3D 建模渲染?同理,要是组件足够丰富,满足项目的需要,设计师也可以直接复用官方的组件素材,不用自己设计。
组件化思维的运用,就是项目工作标准化和重复性的根源,不仅应用在设计领域,对于前、后端开发来说同理。
基于这种思路,催生出了一种新的 SaaS 模式 —— 低代码 Low-Code 服务。
即通过少量的代码,或者干脆不用代码,仅通过可视的工具和组件实现软件的开发,并完成相应的配置和部署的工具。
这概念咋一看不就是建站工具?比如有赞、微店之类的,用户可以在里面直接创建并配置店铺,然后以网页、H5 或小程序的形式发布。
但这只是最初级的应用,传统的建站工具属于帮你预制好了主要的参数和功能,用户只能在这个范围内做少量的自定义编辑和设置。但进阶的 Low-Code,会赋予用户更大的编辑范围和自由度,让用户通过可视化的界面创建自己想要的产品和功能。
讲讲AI在B端设计上的应用方法
 
 
这类产品已经衍生出一个规模不小的市场,因为有大量的中小企业不想投入太多的精力和成本进数字化平台的搭建上,
并希望能快速创建不同的管理工具来匹配企业日新月异的发展需要
这里要划重点,对于一部分企业来说,经营模式和业务流程是持续迭代的,如果使用传统的开发模式那么很难跟上这种迭代。
以连锁餐饮品牌举例,前期只在一个城市经营,和后期扩张到全省或全国,采购流程和供应链管理必然会持续进行调整,提交一个采购工单所需填写的字段就会发生变化,同理展示的表格、详情页也要跟着调整。
这类变化往往并没有修改界面的视觉、交互、组件,仅仅是增加和减少字段数据,而用传统的收集需求再输出进行开发的模式效率非常低,所以它们就成为 Low-Code 的最佳应用场景。业务方自己配置、修改直接上线,省掉产品经理、设计师、程序员中间耗差时……
并且对于很多企业来说,只需要应用一些非常基础的功能服务和页面类型。比如我经常提到的 B 端管理系统的四个核心页面类型:
讲讲AI在B端设计上的应用方法
 
 
Low-Code 就是把常规需求标准化,并运用组件化的框架,让用户通过简单的填写和编辑就能生成出想要的页面和功能。
既然需求不复杂,功能、组件、页面、代码都可以标准化,那不用 AI 降本增效还有王法嘛?
所以,使用 AI 生成 B 端页面(不是设计稿)的工具已经在大厂内部开始应用了,开发专属大模型,再把做好的组件喂给模型,用户只要在相应的表单内填入需求,就可以快速生成出落地的页面。
并且各家大厂内部的 B 端组件库,可远远不止对外分享的这些开源框架里包含的数量,还有很多特殊的业务组件,可以让模型得到更好的训练和产出,比普通 Low-Code 模式更简单高效,大幅度提升企业内部B端产品的落地和运用效率。
从已经了解到的信息中,有一部分业务部门已经开始进入实践环节了。且随着技术的迭代,这种工具必然会越来越强大,功能越来越丰富。
所以,了解完这个趋势,设计师和前端工程师迎来大结局了?要被AI技术清洗了?现在该捧起《从0到1学习炒粉》学习了嘛?
这就是下面要讨论的内容。
B 端 AI 和设计的关联
前面做了不少铺垫,就是为了强调,适用于 Low-Code 和 AI 生成的 B 端产品,是有前提条件的,包含下面这些要素:
  •  
    完整成熟的前后端组件库
  •  
    需求使用基础做法就能实现
  •  
    需要经常变动调整的业务需求
  •  
    对设计和交互本身要求不高
而这里面最关键的东西,就是标准化。必须要知道在今天的 AI 的应用发展中,要生成出符合实际工作需要的结果,绝对不是靠输入信息以后它自己 “蒙” 出来的。为了让结果尽可能准确,那么喂给模型的数据也就要越多且越有针对性。
理论上面向 B 端的 AI 工具,只要不断提供给他新的组件、页面,就能拓展它可以实现的范围。但不管你怎么训练它,都要满足标准化的前提。
而标准化,恰恰就是国内 B 端业务的命门……
我们都知道国内 SaaS 行业现在发展非常的混乱,虽然在不同的细分领域有自己的独角兽,比如财务领域的金蝶,OA 领域的钉钉,ERP 领域的用友等等。
但是这些公司就发展状况良好利润丰厚了?24年一季度的 SaaS 头部公司业绩非常萧条,比如网上找到的统计,和国外 SaaS 头部公司的估值和利润形成鲜明的对比:
讲讲AI在B端设计上的应用方法
 
 
为什么国内 SaaS 市场那么惨淡?说到底就是在国内 B 端领域很难实现真正的标准化,而不是国内 B 端市场规模太小。
比如钉钉、飞书这样的 OA 软件已经很成熟了,但它们的实际普及程度一点都不高,而中大型企业又有各种考量,现成的不用就热衷于开发一套自己的系统,简称定制化。这就倒逼 SaaS 工具为了满足更多的企业需求,拼命叠加功能,使得这些 SaaS 工具一个比一个臃肿。
而我们前面提到的 AI 生成,想要普及同样需要面对这种困境,因为模型不管怎么做,它都是基于特定标准化下的产物,它可以满足其中一部分需求,但难以满足其它需求。尤其是国内 B 端定制化需求中,混乱、抽象、联系复杂的问题非常突出。
换句话说,国内 B 端市场的大多数系统,是非标准化的,需要产品团队在面对这些非标准的需求下做出创新和适配,就必须要考虑很多抽象的因素,领导、背景、体验、交互、周期、难度等等。这个过程不可能由业务方自己完成,且最终导出的设计结果,往往会和常规方案有很大的差异。
按常规逻辑考虑的话,那有多少组件我们整理多少组件,早晚有一天不得穷尽设计师思考范围的边界?
且不说获得不同商业项目的业务组件有多困难,如果组件之间没有更底层的思路去规范它们的设计和交互,那么硬凑到一起的项目是非常割裂的,而 AI 在短时间内没办法做到真正理解交互的逻辑并根据使用场景做理性的推理。
所以基于一套团队产出的组件必然是有限的,它们或许可以满足自己项目,但不可能满足市面上所有项目的使用需求。
还有一个很关键的疑问,就是很多人会想,一个项目中的特殊组件往往只是少数,我们用 AI 工具生成多数页面,少数进行定制和独立开发不就行了?
这思路在逻辑上很合理,但实践起来的问题非常多。举个例子比如设计稿直接生成网页这种技术,从20年前我刚了解到网页设计那天说到现在了,这个实现逻辑理应不需要 AI 的参与都能做到,中间也问世了不少产品和工具,但没有一个做成了,反而网页前端工程师都成为一个独立热门职业了(以前是 UI 写)。
原因就是作为商业项目来说,团队需要 “可控性”,机器生成代码虽然容易,但是如果要修改里面的东西怎么办?实际情况就是前端对这些外部代码深恶痛绝,因为改起来太麻烦,而越大的项目改起来难度也越高。而且这个版本的一部分你改了,下个版本工具再生成的代码要不要兼容你前面写的东西?
所以现在即使有设计稿直接生成代码的工具前端也宁愿自己写,但当他们用到第三方框架的时候,能不动框架里面的东西就不动。想要理解这个感受,只要拿这些框架的组件素材用它们的组件、自动布局形式做完一个项目,你们就会产生 —— 还不如自己重做一遍的想法。
讲讲AI在B端设计上的应用方法
 
 
所以生成工具,要不然能一次性完整满足所有需求,要不然就会因为两三成的缺口形成致命的瓶颈。当然,还有远比这些复杂的进一步因素,我就不在这里展开。
标准化无法在定制化的面前获得优势,这是国内 B 端行业面临的直接困局,当然这里有坏的影响也有好的影响。
坏的影响,就是头部 SaaS 企业没办法得到快速的发展,推高整个 B 端软件业的收入水平和吸引力,AI 生成页面这些技术适用范围小,没办法真惠及全体,行业处于反复造轮子但根本没办法停下来。
好的影响,则是头部的 SaaS 企业发展不起来,市占率就低,它们就没办像 C 端市场一样形成非常显著的马太效应,形成事实的垄断。大家重复造轮子,那么提供的就业岗位才多,才能让我国的炒粉行业没有那么卷,竞争没有那么激烈(???)……
讲讲AI在B端设计上的应用方法
 
 
如果你关注过 B 端市场足够多年,你就会明白任何企图用一种标准、方法论直接平铺整个行业的做法,注定是徒劳的,而无序、野蛮、熵增才是不变的主旋律。
但 AI 的作用短时间内完全发挥不了吗?也不是。除了前面提到的一些简单的项目之外,还有一个非常大的可能,就是中小模型的开发会变得越来越容易,而基于项目自研的界面 AI 生成工具很有可能会普及起来。虽然它们不能随心所欲生成任何需求的样式,但可以完全根据业务方的实际需要进行定制,去服务小范围的群体。
这不代表项目里面就不需要设计师,符合这套项目的标准依旧需要设计师去制定,也需要设计师持续输出特殊的页面和组件。
所以,未来很长一段时间内 AI 和 B 端 UI 设计师之间会是互补的关系,而不是替代关系。这也会对岗位要求形成进一步的影响,所以下面是我对 B 端 UI 设计师所需技能的建议:
  1.  
    进一步提升交互能力,尤其是基于业务认知输出交互方案的抽象思维能力
  2.  
    进一步巩固项目设计规范的创建能力,深入了解规范的应用和落地流程
  3.  
    进一步提升全局性设计思维,能提炼核心价值观并在项目中进行应用
  4.  
    进一步了解编程开发逻辑,能更好的配合前后端完成项目的输出提高效率
这些能力的掌握是 B 端 UI 设计师应对未来市场变化的核心竞争力,也是 AI 在短时间内绝对无法替代的东西。
不管是作为已经入行的,还是准备入行的 B 端设计新人,都不用对 AI 技术在 B 端的影响太过担心,自怨自艾,因为
如果 B 端项目的设计都那么简单的话,那么从前端框架普及的那一天起,B 端 UI 设计师就可以集体下岗,而不用等到 AI 应用的那天
换个表述方式,祝大家不会菜到那么轻易就被 AI 给取代了……


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

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

WechatIMG27.jpg

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

 

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

产品设计如何利用心理学

鹤鹤

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


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

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

鹤鹤

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

日历

链接

个人资料

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

存档