B端设计师要懂哪些开发知识？先掌握这5个！

要不要学习开发知识，是个非常常见但又要认真对待的问题，而我给出的答案是 —— 需要。

下面我就围绕这个议题做一次更新，为什么作为设计师需要 “懂技术”。

一、设计要懂技术的原因

作为 B 端设计师，“懂技术”的意思并不是指要掌握编程和相关计算机专业知识自己打代码，而是从框架角度理解特定的技术原理、运行逻辑、以及相关限制等。

这个要求并不只是 UI 设计师独有，而是对整个设计行业都非常普遍的专业要求。因为设计本质上是一种方案策划过程，需要经过特定的实施才能落地成为最终的结果，比如平面设计要经过打印、工业设计要经过制造、室内设计要经过施工等。

不同行业的施工方式都会有各自的要求和技术要点，不符合这种标准的设计方案就无法被实现出来，比如汽车设计师要设计出低风阻又结实安全的汽车，就必须要深入学习空气动力学和材料学，而不是凭空设计出无法被实现出来的方案。

这种完全不了解技术原理也不考虑实施标准的方案，被我们称为 —— 飞机稿。

所以想成为专业 UI 设计师，了解技术知识是非常重要的，它是我们输出有效设计方案的重要前提。否则我们设计的很多设计稿会在可实现的问题上被否决并打回，大大降低项目的效率。

除了能不能实现这一个标准之外，对技术的认识还能促进我们更深入的思考设计和项目的关系，尤其是预判设计方案的实现难度，以及和前端进行交付和对接的方式。

想必很多同学即使没工作经验，也听说过设计师和前端工程师矛盾重重，而矛盾很大一部分就源自设计师不懂技术导致的，往往我们给对方提供的设计稿就是一个无法实现或非常麻烦的方案，就像产品经理提出要让我们设计五彩斑斓的黑一样，完全不考虑设计的限制和配色的基本要求。

一个懂技术和不懂技术的 UI 设计师在项目推进过程中会展现完全不同的效率，这也是懂技术的设计师有职业竞争力且更受欢迎的原因。

除了推进项目外，懂技术对于 B 端设计师来说还有更重要且特殊的意义，那就是 B 端有大量的行业是—— 面向技术领域提供服务 的。

简单做个解释，一般的 B 端服务是没有技术背景的商业用户就可以正常使用的，比如仓库管理员登录 ERP 系统查询库存，职员到 OA 办公系统内提交工单等。而技术领域提供服务，则是专门面向企业开发环节提供的服务，需要程序员来使用从而提升效率降低成本。

比如 B 端的云服务供应商，是完全面向技术领域提供相关服务的，需要具备相应专业知识和操作能力的程序员才知道应该如何使用。

云服务只是个其中一个方向，其它面向技术领域的 B 端产品数量也非常庞大，虽然操作这些产品的大多是程序员，但也必须要有设计师完成界面的设计。

所以，本身有一定技术知识积累的 UI 设计师，才能很好的驾驭这类项目，顺利完成需求的理解和设计，而不是跟着产品原型画图但完全不知道自己在做什么。

并且随着近年 AI 的崛起，AI 相关 B 端服务的数量在大幅增长，而多数 AI 产品也都建立在对技术的运用之上，需要用户自己完成特定的配置来实现服务。

如果不了解 AI 和基本技术原理，那么这类应用的设计也就很难进行下去。市面上现在新增很多 B 端 AI 设计师，指的不是让你们用 AI 去生成设计，而是专门完成 AI 类产品的设计，且要具备一定的 AI 技术认识才行。

除了 AI 领域以外，B 端还有区块链、数据大屏等领域，也都有相同的要求。

所以作为 B 端设计师，懂技术不仅是完成我们一般工作的要求，也是拓展我们职业可能性的助力。

二、设计要懂哪些技术

知道为什么要懂技术以后，接下来就要知道应该懂哪些技术，我把它们简单总结成以下几个方向：

1. 前端界面的实现逻辑
2. 后端的功能框架和服务
3. 前后端联调的过程
4. 产品的部署和运维
5. AI 的生成和处理流程

在一篇分享中我们无法把所有内容全部写完，所以下面简单解释一下每个技术领域的基本概念，了解它们的价值，以及应该怎么学。

1. 前端界面的实现逻辑

即前端实现界面样式和交互、动画的逻辑，是和 UI 设计师关系最大离得最近的部分。但这里的前端是泛指，包含了网页、iOS、Android、小程序、桌面端等不同系统的前端用户界面。

每个系统的开发语言不同，但它们实现前端界面的方式是大体相同的，所以我们只要了解其中一种就可以套用到其它类型上。

而最适合 B 端设计师了解的对象，就是网页前端。一方面我们工作中接触最多的项目就是网页项目，另一方面网页前端是所有前端中最简单也最容易上手学习的类型。

网页前端主要包含 HTML + CSS + JS 三种核心的编程语言，HTML 和 CSS 是组成网页框架和样式的语言，JS 则是用于实现特定逻辑运算和处理的语言。

对于设计师来说，我们只要关注 HTML 和 CSS 即可，需要比较系统的学习和动手去进行实操。之所以要实操是因为它们对 B 端设计来说太重要了，同时它们学起来也非常容易，站程序员的角度看它们只是标记和样式语言，而不是真正的编程语言。

这个可以看在 B 站录制好的课程：

https://player.bilibili.com/player.html?bvid=BV1ng4y1v75q&as_wide=1

自己动手实操可以很深度的理解界面是怎么被实现出来的，以及明明用了一样的参数实现的效果却和设计稿有偏差。同时还可以最快的建立对前端的正确认识，也就是样式和逻辑是两个部分，实现界面效果只是前端工作的一小部分。

2. 后端的功能框架和服务

第二个部分就是建立对后端的认识了，也就是服务器层面产品的运行机制，以及后端程序员主要的工作内容是什么。这对我们理解界面中复杂的字段和数据会产生非常重要的影响，并且一些复杂的 B 端交互设计，也会涉及到对后端服务和数据的理解才能做好。

这里可以从一张框架图做切入，B 端有 SaaS、PaaS、IaaS 类的服务，而每个类型的服务都是通过对后端技术架构的拆解得来。

如果觉得解释的不够清楚的话也可以把不了解的名词放进 GPT 中进行查询，很快就能了解它们的全貌。

同时，还要重点理解后端程序员开发的后端代码，主要存放在什么地方，如何进行运行的，这些东西和数据库又有什么样的关系。

3. 前后端联调的过程

前后端联调，即前端和后端要进行连接并实现数据传输的过程。因为前端程序和后端程序都只是运行在不同硬件上的独立的程序，它们之间默认是没有任何关联的，所以前后端程序员需要为它们建立联系。

打个比方，你买了一台主机电脑，然后又买了显示器、鼠标、键盘、耳机，你要让它们成为一个整体运作，就需要完成它们连接的步骤，比如插上 USB 有线插口，或者使用蓝牙进行连接等。

联调中有个非常关键的概念叫 API 接口，也就是前后端程序进行连接的关键点。就像机箱后侧罗列的一系列插口，有 3.5mm 的圆形插口，也有矩形的 USB 插口，还有圆角矩形的 Typec 插口，不同的插口可以理解成不同的 API，需要有对应的接头才能插入实现数据的通信。

更具体的认识，强烈建议使用 GPT 工具来进行深度的解析和扫盲，因为 API 对项目至关重要，不管是产品经理还是前后端都会投入大量的时间在 API 文档的处理和联调中，是会议中会被高频讨论和直接影响产品需求的技术点，了解前面的知识和 API 以后，就可以听懂会议中多数的开发术语在讨论什么东西，而不是一头雾水。

4. 产品的部署和运维

前面三个部分可以构成一个最初级的互联网产品，但随着技术的发展，后端变得越来越复杂，所以云服务平台才有海量的产品和服务类型供用户选择。想要理解这些复杂的服务，就必须具备一定的运维知识。

在今天，后端的岗位其实要分成两类（不考虑算法），一类是后端的程序开发，一类是运维。后端程序开发是把项目相关的功能给做出来，而运维则是负责搭建网络运行的环境，并置入代码确保它们在服务器上能被正常运转。

理解完运维，你就会对互联网产品在今天运作的机制有全新的认识和理解。同时，能真正让我们认识到这些特殊的 B 端技术类服务提供的都是什么服务，能解决哪些具体的问题。

如果时间充分的话，我强烈建议大家可以打开某大型云端服务平台，然后点开它的产品列表，把上面罗列的每个产品和服务名词查一遍做个扫盲。

5. AI 的生成和处理流程

AI 已经在越来越多的行业和领域中开始应用，而它所有的应用基本都离不开 B 端界面的支持。我们不仅要紧跟时代的发展，也要对我们未来会负责的工作内容有更深的了解。

了解 AI 的技术应用首先要理解 AI 大模型的种类和应用方向，从外行的角度来说大模型可以被简单划分成四个大类：

1. 计算机视觉模型：对图像进行生成、检测、分类等处理，最常见的应用就是文生图
2. 自然语言处理模型：进行文字分析并返回文字结果的模型，最常见的工具就是 ChatGPT
3. 语音处理模型：进行语音识别、合成、输出等处理，比如现在短视频的合成人声
4. 多模态模型：处理多种信息混合的数据类型，如应用于图文检索、视频总结等

模型做为内核，来完成对信息的理解并返回特定的数据，免去了我们一系列的开发环节，于是我们就可以利用这种机制让它为我们完成更复杂的工作，将它应用到工作流去。

比如电商要发布一个新品，我们可以创建一个工作流，给出正面摄影图例，标题，介绍。然后它给我们输出进行优化重新生成封面图、商品展示图，然后给我们生成不同平台适用的标题，最后再根据介绍自己扩写以及给出介绍图的生成和排版建议等。

这种工作流的处理逻辑可以通过 COZE 这类平台来学习和尝试，可以通过查看它官方说明文档快速上手，你们就会发现应用 AI 输出一些程序变得非常的简单，而这个操作每天也发生在各个细分领域的 B 端产品中。

理解 AI 是什么和应用的技术逻辑，对每个 UI 设计师都很重要，这样我们才能知道它的优势和能力的边界在哪里，不会每天陷入假想的 AI 威胁论中错过职业的发展机遇。

以上就是我认为从零开始理解技术的最好的方法，虽然实际项目中包含的细节要点远远不止这些，但只要理解这些内容我们就可以建立起对技术的认知框架，后续不管碰到什么新东西都能做到触类旁通。

这才是“懂技术”的真正概念，而不是掌握一门编程语言而已。

结尾

如果大家点赞转发的意愿高，那么后续还会增加额外的技术类说明的分享。同时，在项目中具体怎么结合对技术的理解应用到设计和交互中，我们会在内部课程做更多的分享和说明。