首页

B 端设计师为何要懂技术?该懂哪些技术?

鹤鹤 设计管理与成长

对于 B 端设计师来说,“懂技术” 并非意味着要掌握编程、亲自写代码,而是要从框架层面理解特定技术的原理、运行逻辑,以及落地实现的相关限制。这从来不是 UI 设计师的专属要求,而是整个设计行业的通用专业准则 —— 设计的核心本就是解决方案的策划,任何设计最终都要通过具体的实施环节落地。就像平面设计要适配印刷标准、工业设计需契合制造工艺、室内设计要衔接施工规范,脱离落地标准的设计,终究只会变成无法落地的 “飞机稿”。兰亭妙微深耕 UI 设计与开发领域,团队设计师始终保持持续学习、稳步成长的状态,在 B 端UI设计上积累了丰富实践,相关作品案例可在我们的官方网站查看。

image.png

 
作为专业的 UI 设计师,了解技术是输出有效设计方案的核心前提。若忽视技术限制,设计稿极易因无法实现被驳回,严重拖慢项目推进效率。除此之外,对技术的认知还能帮助设计师更深度地思考设计与项目的关联,精准预判方案实现难度,优化与前端的交付对接方式。设计师与前端工程师的沟通矛盾,很大一部分根源就在于设计师对技术的不了解,输出的方案要么无法实现,要么实现成本极高,如同产品经理要求设计 “五彩斑斓的黑” 一般,忽视了对方的专业限制。懂技术与不懂技术的设计师,在项目推进效率上差距显著,这也是懂技术的设计师更具职业竞争力、更受行业认可的关键原因。
 
而对于 B 端设计师,懂技术还有着更为特殊且重要的意义:B 端领域中,有大量产品是面向技术领域提供服务的。常规 B 端服务面向无技术背景的商业用户,如仓库管理员用 ERP 查库存、职员用 OA 提交工单;但面向技术领域的 B 端产品,主要服务于企业开发环节,需程序员操作以提效降本,比如云服务供应商的产品,只有具备专业技术知识的程序员才能熟练使用。
 
云服务只是其中一个方向,区块链、数据大屏等领域的 B 端产品也均是如此,即便操作使用者是程序员,其界面设计仍需专业设计师完成。只有具备一定技术知识积累的设计师,才能精准理解这类产品的需求,而非单纯跟着产品原型画图、对设计内容一无所知。尤其近年 AI 技术快速崛起,AI 相关 B 端服务数量大幅增长,这类产品依托技术搭建,需要用户完成特定配置才能实现服务,若设计师不了解 AI 及基础技术原理,根本无法开展有效设计。如今行业新增的 “B 端 AI 设计师”,并非指用 AI 生成设计,而是指专门设计 AI 类产品、且具备一定 AI 技术认知的设计师。可见,懂技术不仅是 B 端设计师完成日常工作的基本要求,更是拓展职业边界、抓住行业新机遇的重要助力。
 

image.png

一、B 端设计师该懂哪些技术?

 
明确懂技术的重要性后,设计师需要掌握的技术知识,并非零散的编程技巧,而是能搭建起技术认知框架的核心方向,具体可总结为五类:
 
  1. 前端界面的实现逻辑
  2. 后端的功能框架和服务
  3. 前后端联调的过程
  4. 产品的部署和运维
  5. AI 的生成和处理流程
 
接下来将对每个方向的核心概念、学习价值及入门方法做简单解析,帮助设计师快速建立基础认知。

image.png

 

二、各技术方向核心解析与学习建议

 

(一)前端界面的实现逻辑

 
这是与 UI 设计师关联最紧密、距离最近的技术内容,指前端实现界面样式、交互与动画的底层逻辑,这里的前端是广义概念,涵盖网页、iOS、Android、小程序、桌面端等所有系统的用户界面。
 
不同系统的开发语言虽有差异,但实现前端界面的核心逻辑大体一致,因此设计师只需吃透其中一种,便可触类旁通。对 B 端设计师而言,网页前端是最佳学习对象:一方面,B 端工作中接触最多的就是网页项目;另一方面,网页前端是所有前端类型中最简单、最易上手的。
image.png
 
网页前端的核心由 HTML、CSS、JS 三种语言构成:HTML 和 CSS 是搭建网页框架、定义样式的标记语言,JS 则用于实现逻辑运算与交互处理。对设计师来说,重点系统学习并动手实操HTML 和 CSS即可 —— 从程序员的视角,二者并非真正的编程语言,只是标记和样式语言,学习门槛极低,实操却能带来极大价值:既能深度理解界面的实现过程,搞清楚为何相同参数下,开发效果与设计稿会存在偏差;也能快速建立正确的前端认知,明白样式与逻辑是前端工作的两个独立部分,实现界面效果只是前端工作的一小部分。

image.png

image.png

(二)后端的功能框架和服务

 
这一方向要求设计师建立对服务器层面的认知,了解产品的运行机制,以及后端程序员的核心工作内容。这对设计师理解界面中复杂的字段、数据逻辑至关重要,部分复杂的 B 端交互设计,更是需要基于对后端服务和数据的理解才能完成。
 
设计师可从 B 端服务的框架图切入学习,B 端的 SaaS、PaaS、IaaS 类服务,均是对后端技术架构拆解后形成的产物。若遇到陌生专业名词,可借助 GPT 工具快速查询解析。同时需重点理解:后端代码的存储位置、运行方式,以及代码与数据库之间的关联逻辑,这是理解后端工作的核心基础。

image.png

(三)前后端联调的过程

 
前后端联调,即让前端程序与后端程序建立连接、实现数据传输的过程。前端与后端程序是运行在不同硬件上的独立程序,默认无任何关联,需要开发人员通过技术手段为其搭建沟通桥梁,这就像将主机与显示器、鼠标、键盘连接,才能形成一个可正常运作的整体。
 
联调的核心概念是API 接口,这是前后端程序连接的关键节点,如同主机后侧的各类插口 ——3.5mm 圆形插口、USB 插口、Type-C 插口,不同插口对应不同的 API,只有搭配适配的 “接头”,才能实现数据通信。
 
API 是项目中的核心技术点,产品经理、前后端工程师都会投入大量时间处理 API 文档、推进 API 联调,也是项目会议中的高频讨论内容,直接影响产品需求的落地。建议借助 GPT 工具对 API 进行深度解析扫盲,理解这一概念后,设计师便能听懂项目会议中大部分开发术语,避免陷入认知盲区。

image.png

 

(四)产品的部署和运维

 
前端、后端、联调知识,能支撑起一个基础的互联网产品,但随着技术发展,后端架构愈发复杂,云服务平台的产品与服务类型也随之丰富,想要理解这些复杂的后端服务,设计师必须具备一定的运维知识
 
如今的后端岗位(不含算法)主要分为两类:后端程序开发与运维。后端开发的核心是实现产品的各项功能,而运维的核心是搭建网络运行环境,将开发好的代码部署到服务器中,确保产品能正常、稳定运转。若想理解二者的分工与价值,可参考相关的 DevOps 扫盲资料,建立基础认知。
 
理解运维知识,不仅能让设计师对互联网产品的运行机制有全新认知,更能精准理解云服务、区块链等技术类 B 端产品的服务本质,知道这类产品能解决哪些实际问题。若时间充裕,建议打开大型云服务平台,查看其产品列表,对陌生的产品与服务名词逐一查询扫盲,快速积累行业知识。

image.png

 

(五)AI 的生成和处理流程

 
AI 技术的应用愈发广泛,而几乎所有 AI 应用都离不开 B 端界面的支持,紧跟时代发展,理解 AI 的生成与处理流程,是 B 端设计师的必备能力,尤其是对主攻 AI 类 B 端产品的设计师而言,这一知识更是核心刚需。
 
理解 AI 技术应用,首先要区分 AI 大模型的种类与应用方向,从外行视角,可将大模型简单分为四类:
 
  1. 计算机视觉模型:对图像进行生成、检测、分类,文生图是最常见的应用;
  2. 自然语言处理模型:对文字进行分析并返回文字结果,ChatGPT 是典型代表;
  3. 语音处理模型:实现语音识别、合成、输出,如短视频的合成人声;
  4. 多模态模型:处理图文、音视频等多种混合数据,应用于图文检索、视频总结等场景。image.pngimage.png
 
AI 大模型是各类 AI 应用的内核,能帮助我们完成复杂的信息处理与数据返回,省去大量开发环节,设计师可借助这一机制,将 AI 融入设计与产品工作流。比如电商新品发布,可搭建 AI 工作流:输入产品摄影图、标题、基础介绍,让 AI 优化生成封面图、商品展示图,适配不同平台生成标题,甚至扩写产品介绍、给出介绍图的生成与排版建议。
 
这类 AI 工作流的处理逻辑,可通过 COZE 等平台学习尝试,查看官方说明文档便能快速上手,能直观感受到 AI 在 B 端产品中的实际应用方式。理解 AI 的技术逻辑,不仅能让设计师精准把握 AI 产品的设计要点,更能清晰认识 AI 的优势与能力边界,避免陷入 “AI 威胁论”,抓住 AI 时代的职业发展机遇。
 

三、结语

 
对 B 端设计师而言,“懂技术” 的核心是建立技术认知框架,而非掌握某一门编程语言。以上五大方向,是从零开始理解技术的核心切入点,虽然实际项目中的技术细节远不止于此,但只要吃透这些基础内容,便能形成完整的技术认知体系,后续遇到新的技术概念、产品类型,都能做到触类旁通。
 
掌握这些技术知识,不仅能让设计师输出更具落地性的设计方案,提升项目推进效率,更能精准理解各类 B 端产品的需求本质,拓展职业边界,在云服务、AI、区块链等新兴领域找到新的职业机遇,成为更具核心竞争力的专业设计师。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

商家后台 AI 功能体验升级:以统一认知赋能商家高效经营

鹤鹤 B端ui设计文章及欣赏

一、项目背景与核心目标

 
随着 AI 技术深度融入电商经营全流程,百度优选商家后台已实现 AI 能力在商品创建、经营管理、客服接待等核心场景的全面覆盖。但商家在使用过程中普遍面临 “不会用、不敢信” 的体验难题,经深度拆解经营痛点发现,交互模式不统一、视觉表达混乱是核心诱因,直接抬高了商家对 AI 工具的认知与使用成本。
 
为此,我们以 **“统一 AI 认知,提升商家经营效率”为核心目标,启动 AI 功能体验升级工作。团队立足行业主流的嵌入式、对话式、伴随式三大 AI 交互形态,结合 B 端商家后台的操作习惯展开审慎选型与创新设计:舍弃更适用于自然语言指令推进生产、以沉浸问答为主的对话式交互;同时针对客服、直播互动等需规模化、自动化运行的场景,创新提出“托管式”** 交互范式,适配低人工介入的服务需求。并同步搭建统一的 AI 视觉语言体系,最终打造出一套商家可统一理解、轻松调用、深度信任的智能体验解决方案,全方位助力商家降本提效。

image.png

 

二、三大交互范式的场景化落地应用

 

2.1 嵌入式交互:复杂表单的灵活填写助手

 
嵌入式交互的核心是让 AI 生成结果紧邻用户操作场景,实现轻量便捷的交互体验,核心适配复杂表单填写类场景,以商品创建环节为典型代表 —— 该环节字段繁多、手动填写耗时久,且易因填写不规范被审核驳回,严重拉长发品周期。针对这一问题,我们根据字段特征与 AI 能力类型,设计了两种差异化交互流程:
 
  1. 填充识别类:针对规则明确、AI 可通过识别提取关键信息输出稳定答案的字段(如商品属性),采用系统自动填入模式,搭配 “AI 预填” 标签提示状态。例如 AI 可从商家上传的商品包装图中识别 “风干”“盒装” 等信息,自动填入食品工艺、包装方式模块,同时提示商家检查确认,以自动化替代手动录入,最大化缩短填写时间。
  2. 推荐优化类:针对需依托 AI 优化素材、提升购买吸引力的内容(如商品主图、标题),因存在 AI 创作内容不符商家预期的可能,采用 “主动提供结果但不预先填入” 的模式,支持商家对 AI 结果进行调优,待符合预期后再手动录入。灵活的交互设计既满足不同商家的个性化需求,也有效降低人工审核时长。
 
该模式上线后成效显著,商家平均发品时长缩短 8 分钟,发品成功率提升 0.7%,模块满意度提升 25%,实现了既定流程内的效率突破。

image.png

 

2.2 伴随式交互:全场景的主动诊断助手

 
针对商家多线程经营时需频繁跳转各模块、需自主发现经营问题的痛点,我们打造了深度融入经营动线的伴随式交互方案,聚焦 **“主动触达、连续洞察”** 两大核心,让 AI 助手跳出常规对话机器人的被动响应模式,转变为结合工作流前后场景、提供落地行动指引的经营辅助工具。
 
  1. 主动触达:AI 助手入口设计 “流光呼吸感” 动效,搭配轮播词条实时推送与当前任务相关的关键信息(如 “今日店铺访问量增长 20%”),实现轻量视觉吸引;当商家停留于具体任务页面时,助手可基于页面内容与业务逻辑,主动识别潜在问题并推送轻量提醒(如 “商品主图尺寸可能影响点击率”),在商家未发起提问前即主动触发服务。image.png
  2. 连续洞察:AI 助手在输出建议或数据时,会附带清晰的思考过程与来源摘要,实现 “可解释的 AI”,打消商家疑虑;同时能基于当前对话主动预判后续需求,智能推荐下一步操作(如 “进一步分析体验分下降的原因”),将单点查询转化为系统性的经营问题排查与解决链路,大幅降低商家获取完整决策依据的综合成本。image.png
 
通过以上设计,AI 工具从单纯的被动响应工具,升级为能主动赋能的经营伙伴。
 

2.3 托管式交互:隐式服务的安心管家

 
相较于嵌入式、伴随式交互需商家实时参与、无法解放人力的特点,托管式交互通过 **“预先配置规则,系统自动执行”** 实现最高程度的自动化,核心适配客服接待等需规模化服务的场景。针对商家对 AI 自动化 “黑盒操作回复” 的不信任,以及人工无法实现 24 小时不间断接待、难以覆盖海量咨询需求的问题,我们设计了 “预先配置 + 人机接力” 的托管式交互方案,让 AI 成为可自主运行的安心服务管家。
 
  1. 可视化配置,构建信任基础:为消除商家对 AI “黑盒操作” 的疑虑,将抽象的 AI 能力转化为可预判的具体结果,我们提供直观的策略配置面板与 C 端页面预览图,商家可针对售前咨询(商品咨询、催促下单等)、售后维护(退款申请等)不同场景设置回复规则,并实时查看 AI 执行的示意效果。“配置即所见” 的设计让 AI 能力变得具体可感知,让商家从配置起点建立对自动化系统的可控感。

     

    image.png

  2. 明确状态标识,实现流畅人机接力:为保障人机协同的顺畅性,界面中对接待状态进行全方位清晰标识:全局接待状态置顶实时更新、会话列表按状态动态分组、单人接待状态(接待中 / 暂停接待)强化并自动同步。当 AI 无法解答复杂诉求、用户负面情绪等问题时,会话将自动流转至 “待人工回复” 分组,通过动态高亮 + 声音预警提醒人工快速接管;人工回复后,AI 将自动暂停并更新接待状态,同时生成会话摘要,帮助工作人员快速了解沟通前因后果,将决策焦点从 “梳理问题” 转向 “解决问题”。此外,客服可主动设置 “恢复托管”,AI 也会在识别新会话时自动恢复接待,形成闭环的人机协同机制。image.png
 
在买家视角,该设计也实现了服务主体的明确化:AI 接待时清晰标识消息主体,人工接管后实时告知买家,保障消费者的服务体验连贯可靠。该模式上线后,咨询响应时长缩短 15.8%,商家满意度提升 14%,买家满意度同步提升 7.4%,成功实现 7×24 小时规模化服务覆盖与服务质量的双重提升。
 

三、构建全链路智能化感知体系

 
在三大交互范式的基础上,我们搭建了一套贯穿产品全链路的智能视觉语言体系,沉淀为具有 AI 特色的感知系统,全方位优化 B 端设计体验、提升操作效率。
 
在视觉设计层面,我们继承百度 APP 的 AI 标识与色彩体系,延续用户对 “百度 AI” 专业、可信赖的固有认知,有效降低商家的理解与学习成本。针对 B 端界面信息密集,需兼顾操作效率与视觉清晰度的特点,在百度 APP 高饱和智能感知色彩体系的基础上,结合现有产品组件降低色彩饱和度,实现视觉降噪,打造出适配 B 端操作场景的浅色系列组件。
 
为弥补浅色体系下 AI 视觉感知弱化的问题,我们引入状态动效、声音提醒等多维反馈机制,通过感官协同让商家在复杂界面中,也能清晰、即时地感知 AI 运行状态(如 AI 智能接待中的扫光动画),保障信息传达的效率与可靠性。

image.png

image.png

四、设计核心与价值沉淀

 
本次百度优选商家后台 AI 体验升级,始终以 **“以商家提效为中心”** 为设计核心,通过 “场景筛选适配 + 交互形态创新”,落地嵌入式、伴随式、托管式三大交互范式,精准破解商品创建、多线程经营、客服接待等核心场景的使用痛点;同时构建 “视觉 + 多感” 的智能化感知体系,从根本上解决商家 “不会用、不敢信” 的体验困境。
 
从业务价值来看,本次升级实现了发品效率、经营问题解决率、服务满意度的全方位提升;从设计价值来看,项目沉淀的 **“场景 - 范式 - 视觉”** 设计方法论与标准化组件资产,为直播带货、智能投放等更多电商场景的 AI 赋能提供了可复用的落地模板。
 
未来,我们将持续围绕商家实际经营需求迭代优化产品,推动 AI 技术深度融入电商经营全链路,以设计驱动产品长效升级,助力商家实现降本提效,为百度优选商家生态的高质量发展注入持续动力。
本文为转载
 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

16 个高转化 UX/UI 设计技巧:驱动产品增长的实用指南

涛涛 用户研究

UX/UI 设计不仅是美学的呈现,更是转化效率与用户体验的平衡艺术。好的设计能降低用户操作成本、减少决策阻力,最终推动产品核心指标增长。以下 16 个经过实践验证的设计技巧,覆盖按钮设计、信息呈现、交互逻辑等关键场景,帮你在设计中少走弯路,精准触达用户需求。

交互设计七大核心定律:解锁高效体验的设计密码

涛涛 交互设计及用户体验

交互设计的本质,是搭建人与产品之间的顺畅桥梁。正如 “交互设计之父” 阿兰・库珀所言:“除非有更好的选择,否则就遵从标准”。那些经过时间验证的交互设计定律,正是这样的 “标准”—— 它们从人类认知规律、行为习惯出发,为产品设计者提供了可落地的指导原则,帮助规避可用性问题,提升操作效率与用户满意度。以下是对七大核心定律的深度解析与实践应用指南。

设计的双重维度:理性奠基与感性赋能

涛涛 设计思维

设计的本质是什么?是冰冷的逻辑推演,还是温暖的情感共鸣?关于 “设计应感性主导” 还是 “理性为王” 的争论,在设计圈从未停歇。有人将设计等同于艺术创作,执着于个人情感的抒发;也有人将设计视为工程任务,严守逻辑与规则的边界。实则,这场争论的核心误区在于混淆了设计的两个核心维度 —— 设计决策与设计表达。真正成熟的设计,从来不是非此即彼的选择,而是以理性为根基,以感性为羽翼,二者层层嵌套、相辅相成的完整体系。

从 UX 视角拆解加载设计:3 种核心状态与 5 类场景化模式

涛涛 系统UI设计文章及欣赏

在产品交互中,加载是用户操作与系统反馈之间的关键衔接环节。无论是 App 的启动加载、页面切换时的内容刷新,还是按钮点击后的功能响应,加载体验直接影响用户对产品的感知 —— 流畅的加载能让用户沉浸于功能本身,而糟糕的加载设计则容易引发烦躁与流失。因此,针对不同场景选择适配的加载状态与模式,是提升 UX 设计质感的重要细节。本文将从加载的核心状态分类、场景化模式选择两个维度,结合实际应用场景展开分析,为设计实践提供参考。

10 个惊喜感设计案例:解锁产品体验的细节魔法

涛涛 用户研究

在产品同质化日益严重的当下,真正打动用户的往往不是颠覆性的功能,而是藏在交互里的 “亿点点惊喜”。一句戳心的文案、一个有趣的动效、一次贴心的反馈,都能让用户感受到设计的温度,进而加深对产品的好感度与粘性。本文精选 10 个极具巧思的产品设计案例,拆解其背后的设计逻辑,为创作者提供灵感启发。

B 端表单页设计:从核心逻辑到落地实践

涛涛 B端ui设计文章及欣赏

在 B 端产品中,表单页是连接用户与系统的关键桥梁,它承载着信息录入、数据提交、功能配置等核心任务,其设计合理性直接影响用户操作效率与系统数据质量。优质的 B 端表单页不仅能降低用户填写成本,更能助力系统实现精准的数据管理,为产品核心价值赋能。本文将从设计逻辑、核心原则、布局策略到复杂场景解决方案,全面拆解 B 端表单页的设计要点。

移动端弹窗交互设计规范:从类型到落地的全维度指南

涛涛 移动端UI设计文章及欣赏

弹窗作为移动端交互的核心控件,承担着信息提示、操作引导、功能选择等关键作用。但不合理的弹窗设计往往成为用户体验的 “重灾区”—— 过度打扰、操作模糊、场景错位等问题,会直接降低用户对产品的好感度。基于 iOS 人机交互指南及实际应用场景,本文系统梳理移动端弹窗的核心类型、设计规范与落地技巧,让弹窗真正服务于用户需求,而非成为交互障碍。

质感筑信:金融产品界面材质设计新解

涛涛 设计思维

在数字交互日益频繁的今天,金融产品的界面早已超越了单纯的功能承载,成为用户与财富对话的重要桥梁。不同于电商的消费刺激、社交的氛围营造、游戏的沉浸体验,金融产品的核心诉求始终围绕 “信任” 展开 —— 如何让无形的资金流转、抽象的风险收益,通过视觉材质转化为可感知的安全与专业?材质作为界面设计的核心语言,正是构建这份信任的关键所在。

日历

链接

个人资料

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

存档