当前位置:首页设计文章B端设计师要懂哪些开发知识?先掌握这5个!

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

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

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

一、设计要懂技术的原因

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、设计要懂哪些技术

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

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

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

1. 前端界面的实现逻辑

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

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

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

而最适合 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 类的服务,而每个类型的服务都是通过对后端技术架构的拆解得来。

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

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

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

3. 前后端联调的过程

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

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

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

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

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

4. 产品的部署和运维

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

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

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

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

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

5. AI 的生成和处理流程

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

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

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

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

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

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

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

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

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

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

结尾

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

设计文章

想做好会员体系设计?来看百度APP的案例复盘!

2025-11-19 17:02:23

平面图形

业务日程火箭3D概念插画 (PNG,PSD)

2025-6-7 0:58:35

版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

✅ 你有新的私信

👉 请务必要查看您的私信哟~