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 端设计师 ，懂技术不仅是完成我们一般工作的要求 ，也是拓展我们职业可能性的助力。
二、设计要懂哪些技术
知道为什么要懂技术以后 ，接下来就要知道应该懂哪些技术 ，我把它们简单总结成以下几个方向 ：
- 前端界面的实现逻辑
- 后端的功能框架和服务
- 前后端联调的过程
- 产品的部署和运维
- AI 的生成和处理流程
在一篇分享中我们无法把所有内容全部写完，所以下面简单解释一下每个技术领域的基本概念 ，了解它们的价值 ，以及应该怎么学。
1. 前端界面的实现逻辑
即前端实现界面样式和交互 、动画的逻辑 ，是和 UI 设计师关系最大离得最近的部分 。但这里的前端是泛指 ，包含了网页 、iOS 、AndROId 、小程序 、桌面端等不同系统的前端用户界面 。
每个系统的开发语言不同 ，但它们实现前端界面的方式是大体相同的 ，所以我们只要了解其中一种就可以套用到其它类型上 。
而最适合 B 端设计师了解的对象 ，就是网页前端 。一方面我们工作中接触最多的项目就是网页项目，另一方面网页前端是所有前端中最简单也最容易上手学习的类型 。
网页前端主要包含 Html + CSS + JS 三种核心的编程语言 ，HTML 和 CSS 是组成网页框架和样式的语言 ，JS 则是用于实现特定逻辑运算和处理的语言 。
对于设计师来说 ，我们只要关注 HTML 和 CSS 即可 ，需要比较系统的学习和动手去进行实操 。之所以要实操是因为它们对 B 端设计来说太重要了 ，同时它们学起来也非常容易 ，站程序员的角度看它们只是标记和样式语言 ，而不是真正的编程语言 。
这个可以看在 B 站录制好的课程 ：
自己动手实操可以很深度的理解界面是怎么被实现出来的，以及明明用了一样的参数实现的效果却和设计稿有偏差 。同时还可以最快的建立对前端的正确认识 ，也就是样式和逻辑是两个部分 ，实现界面效果只是前端工作的一小部分 。
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 大模型的种类和应用方向，从外行的角度来说大模型可以被简单划分成四个大类 ：
- 计算机视觉模型 ：对图像进行生成、检测、分类等处理 ，最常见的应用就是文生图
- 自然语言处理模型 ：进行文字分析并返回文字结果的模型 ，最常见的工具就是 ChatGPT
- 语音处理模型 ：进行语音识别 、合成 、输出等处理，比如现在短视频的合成人声
- 多模态模型 ：处理多种信息混合的数据类型 ，如应用于图文检索 、视频总结等
模型做为内核 ，来完成对信息的理解并返回特定的数据 ，免去了我们一系列的开发环节 ，于是我们就可以利用这种机制让它为我们完成更复杂的工作，将它应用到工作流去。
比如电商要发布一个新品 ，我们可以创建一个工作流 ，给出正面摄影图例 ，标题，介绍 。然后它给我们输出进行优化重新生成封面图 、商品展示图 ，然后给我们生成不同平台适用的标题 ，最后再根据介绍自己扩写以及给出介绍图的生成和排版建议等。
这种工作流的处理逻辑可以通过 COZE 这类平台来学习和尝试 ，可以通过查看它官方说明文档快速上手 ，你们就会发现应用 AI 输出一些程序变得非常的简单 ，而这个操作每天也发生在各个细分领域的 B 端产品中 。
理解 AI 是什么和应用的技术逻辑 ，对每个 UI 设计师都很重要 ，这样我们才能知道它的优势和能力的边界在哪里 ，不会每天陷入假想的 AI 威胁论中错过职业的发展机遇。
以上就是我认为从零开始理解技术的最好的方法 ，虽然实际项目中包含的细节要点远远不止这些，但只要理解这些内容我们就可以建立起对技术的认知框架 ，后续不管碰到什么新东西都能做到触类旁通 。
这才是“懂技术”的真正概念 ，而不是掌握一门编程语言而已 。
结尾
如果大家点赞转发的意愿高 ，那么后续还会增加额外的技术类说明的分享。同时 ，在项目中具体怎么结合对技术的理解应用到设计和交互中 ，我们会在内部课程做更多的分享和说明 。
作者 ：酸梅干超人
