要不要學(xué)習(xí)開發(fā)知識(shí)，是個(gè)非常常見但又要認(rèn)真對(duì)待的問題，而我給出的答案是 —— 需要。

下面我就圍繞這個(gè)議題做一次更新，為什么作為設(shè)計(jì)師需要 “懂技術(shù)”。

更多相關(guān)討論：

一、設(shè)計(jì)要懂技術(shù)的原因

作為 B 端設(shè)計(jì)師，“懂技術(shù)”的意思并不是指要掌握編程和相關(guān)計(jì)算機(jī)專業(yè)知識(shí)自己打代碼，而是從框架角度理解特定的技術(shù)原理、運(yùn)行邏輯、以及相關(guān)限制等。

這個(gè)要求并不只是 UI 設(shè)計(jì)師獨(dú)有，而是對(duì)整個(gè)設(shè)計(jì)行業(yè)都非常普遍的專業(yè)要求。因?yàn)樵O(shè)計(jì)本質(zhì)上是一種方案策劃過程，需要經(jīng)過特定的實(shí)施才能落地成為最終的結(jié)果，比如平面設(shè)計(jì)要經(jīng)過打印、工業(yè)設(shè)計(jì)要經(jīng)過制造、室內(nèi)設(shè)計(jì)要經(jīng)過施工等。

不同行業(yè)的施工方式都會(huì)有各自的要求和技術(shù)要點(diǎn)，不符合這種標(biāo)準(zhǔn)的設(shè)計(jì)方案就無法被實(shí)現(xiàn)出來，比如汽車設(shè)計(jì)師要設(shè)計(jì)出低風(fēng)阻又結(jié)實(shí)安全的汽車，就必須要深入學(xué)習(xí)空氣動(dòng)力學(xué)和材料學(xué)，而不是憑空設(shè)計(jì)出無法被實(shí)現(xiàn)出來的方案。

這種完全不了解技術(shù)原理也不考慮實(shí)施標(biāo)準(zhǔn)的方案，被我們稱為 —— 飛機(jī)稿。

所以想成為專業(yè) UI 設(shè)計(jì)師，了解技術(shù)知識(shí)是非常重要的，它是我們輸出有效設(shè)計(jì)方案的重要前提。否則我們?cè)O(shè)計(jì)的很多設(shè)計(jì)稿會(huì)在可實(shí)現(xiàn)的問題上被否決并打回，大大降低項(xiàng)目的效率。

除了能不能實(shí)現(xiàn)這一個(gè)標(biāo)準(zhǔn)之外，對(duì)技術(shù)的認(rèn)識(shí)還能促進(jìn)我們更深入的思考設(shè)計(jì)和項(xiàng)目的關(guān)系，尤其是預(yù)判設(shè)計(jì)方案的實(shí)現(xiàn)難度，以及和前端進(jìn)行交付和對(duì)接的方式。

想必很多同學(xué)即使沒工作經(jīng)驗(yàn)，也聽說過設(shè)計(jì)師和前端工程師矛盾重重，而矛盾很大一部分就源自設(shè)計(jì)師不懂技術(shù)導(dǎo)致的，往往我們給對(duì)方提供的設(shè)計(jì)稿就是一個(gè)無法實(shí)現(xiàn)或非常麻煩的方案，就像產(chǎn)品經(jīng)理提出要讓我們?cè)O(shè)計(jì)五彩斑斕的黑一樣，完全不考慮設(shè)計(jì)的限制和配色的基本要求。

一個(gè)懂技術(shù)和不懂技術(shù)的 UI 設(shè)計(jì)師在項(xiàng)目推進(jìn)過程中會(huì)展現(xiàn)完全不同的效率，這也是懂技術(shù)的設(shè)計(jì)師有職業(yè)競爭力且更受歡迎的原因。

除了推進(jìn)項(xiàng)目外，懂技術(shù)對(duì)于 B 端設(shè)計(jì)師來說還有更重要且特殊的意義，那就是 B 端有大量的行業(yè)是—— 面向技術(shù)領(lǐng)域提供服務(wù) 的。

簡單做個(gè)解釋，一般的 B 端服務(wù)是沒有技術(shù)背景的商業(yè)用戶就可以正常使用的，比如倉庫管理員登錄 ERP 系統(tǒng)查詢庫存，職員到 OA 辦公系統(tǒng)內(nèi)提交工單等。而技術(shù)領(lǐng)域提供服務(wù)，則是專門面向企業(yè)開發(fā)環(huán)節(jié)提供的服務(wù)，需要程序員來使用從而提升效率降低成本。

比如 B 端的云服務(wù)供應(yīng)商，是完全面向技術(shù)領(lǐng)域提供相關(guān)服務(wù)的，需要具備相應(yīng)專業(yè)知識(shí)和操作能力的程序員才知道應(yīng)該如何使用。

云服務(wù)只是個(gè)其中一個(gè)方向，其它面向技術(shù)領(lǐng)域的 B 端產(chǎn)品數(shù)量也非常龐大，雖然操作這些產(chǎn)品的大多是程序員，但也必須要有設(shè)計(jì)師完成界面的設(shè)計(jì)。

所以，本身有一定技術(shù)知識(shí)積累的 UI 設(shè)計(jì)師，才能很好的駕馭這類項(xiàng)目，順利完成需求的理解和設(shè)計(jì)，而不是跟著產(chǎn)品原型畫圖但完全不知道自己在做什么。

并且隨著近年 AI 的崛起，AI 相關(guān) B 端服務(wù)的數(shù)量在大幅增長，而多數(shù) AI 產(chǎn)品也都建立在對(duì)技術(shù)的運(yùn)用之上，需要用戶自己完成特定的配置來實(shí)現(xiàn)服務(wù)。

如果不了解 AI 和基本技術(shù)原理，那么這類應(yīng)用的設(shè)計(jì)也就很難進(jìn)行下去。市面上現(xiàn)在新增很多 B 端 AI 設(shè)計(jì)師，指的不是讓你們用 AI 去生成設(shè)計(jì)，而是專門完成 AI 類產(chǎn)品的設(shè)計(jì)，且要具備一定的 AI 技術(shù)認(rèn)識(shí)才行。

除了 AI 領(lǐng)域以外，B 端還有區(qū)塊鏈、數(shù)據(jù)大屏等領(lǐng)域，也都有相同的要求。

所以作為 B 端設(shè)計(jì)師，懂技術(shù)不僅是完成我們一般工作的要求，也是拓展我們職業(yè)可能性的助力。

二、設(shè)計(jì)要懂哪些技術(shù)

知道為什么要懂技術(shù)以后，接下來就要知道應(yīng)該懂哪些技術(shù)，我把它們簡單總結(jié)成以下幾個(gè)方向：

1. 前端界面的實(shí)現(xiàn)邏輯
2. 后端的功能框架和服務(wù)
3. 前后端聯(lián)調(diào)的過程
4. 產(chǎn)品的部署和運(yùn)維
5. AI 的生成和處理流程

在一篇分享中我們無法把所有內(nèi)容全部寫完，所以下面簡單解釋一下每個(gè)技術(shù)領(lǐng)域的基本概念，了解它們的價(jià)值，以及應(yīng)該怎么學(xué)。

1. 前端界面的實(shí)現(xiàn)邏輯

即前端實(shí)現(xiàn)界面樣式和交互、動(dòng)畫的邏輯，是和 UI 設(shè)計(jì)師關(guān)系最大離得最近的部分。但這里的前端是泛指，包含了網(wǎng)頁、iOS、Android、小程序、桌面端等不同系統(tǒng)的前端用戶界面。

每個(gè)系統(tǒng)的開發(fā)語言不同，但它們實(shí)現(xiàn)前端界面的方式是大體相同的，所以我們只要了解其中一種就可以套用到其它類型上。

而最適合 B 端設(shè)計(jì)師了解的對(duì)象，就是網(wǎng)頁前端。一方面我們工作中接觸最多的項(xiàng)目就是網(wǎng)頁項(xiàng)目，另一方面網(wǎng)頁前端是所有前端中最簡單也最容易上手學(xué)習(xí)的類型。

網(wǎng)頁前端主要包含 HTML + CSS + JS 三種核心的編程語言，HTML 和 CSS 是組成網(wǎng)頁框架和樣式的語言，JS 則是用于實(shí)現(xiàn)特定邏輯運(yùn)算和處理的語言。

對(duì)于設(shè)計(jì)師來說，我們只要關(guān)注 HTML 和 CSS 即可，需要比較系統(tǒng)的學(xué)習(xí)和動(dòng)手去進(jìn)行實(shí)操。之所以要實(shí)操是因?yàn)樗鼈儗?duì) B 端設(shè)計(jì)來說太重要了，同時(shí)它們學(xué)起來也非常容易，站程序員的角度看它們只是標(biāo)記和樣式語言，而不是真正的編程語言。

這個(gè)可以看在 B 站錄制好的課程：

自己動(dòng)手實(shí)操可以很深度的理解界面是怎么被實(shí)現(xiàn)出來的，以及明明用了一樣的參數(shù)實(shí)現(xiàn)的效果卻和設(shè)計(jì)稿有偏差。同時(shí)還可以最快的建立對(duì)前端的正確認(rèn)識(shí)，也就是樣式和邏輯是兩個(gè)部分，實(shí)現(xiàn)界面效果只是前端工作的一小部分。

2. 后端的功能框架和服務(wù)

第二個(gè)部分就是建立對(duì)后端的認(rèn)識(shí)了，也就是服務(wù)器層面產(chǎn)品的運(yùn)行機(jī)制，以及后端程序員主要的工作內(nèi)容是什么。這對(duì)我們理解界面中復(fù)雜的字段和數(shù)據(jù)會(huì)產(chǎn)生非常重要的影響，并且一些復(fù)雜的 B 端交互設(shè)計(jì)，也會(huì)涉及到對(duì)后端服務(wù)和數(shù)據(jù)的理解才能做好。

這里可以從一張框架圖做切入，B 端有 SaaS、PaaS、IaaS 類的服務(wù)，而每個(gè)類型的服務(wù)都是通過對(duì)后端技術(shù)架構(gòu)的拆解得來。

如果覺得解釋的不夠清楚的話也可以把不了解的名詞放進(jìn) GPT 中進(jìn)行查詢，很快就能了解它們的全貌。

同時(shí)，還要重點(diǎn)理解后端程序員開發(fā)的后端代碼，主要存放在什么地方，如何進(jìn)行運(yùn)行的，這些東西和數(shù)據(jù)庫又有什么樣的關(guān)系。

3. 前后端聯(lián)調(diào)的過程

前后端聯(lián)調(diào)，即前端和后端要進(jìn)行連接并實(shí)現(xiàn)數(shù)據(jù)傳輸?shù)倪^程。因?yàn)榍岸顺绦蚝秃蠖顺绦蚨贾皇沁\(yùn)行在不同硬件上的獨(dú)立的程序，它們之間默認(rèn)是沒有任何關(guān)聯(lián)的，所以前后端程序員需要為它們建立聯(lián)系。

打個(gè)比方，你買了一臺(tái)主機(jī)電腦，然后又買了顯示器、鼠標(biāo)、鍵盤、耳機(jī)，你要讓它們成為一個(gè)整體運(yùn)作，就需要完成它們連接的步驟，比如插上 USB 有線插口，或者使用藍(lán)牙進(jìn)行連接等。

聯(lián)調(diào)中有個(gè)非常關(guān)鍵的概念叫 API 接口，也就是前后端程序進(jìn)行連接的關(guān)鍵點(diǎn)。就像機(jī)箱后側(cè)羅列的一系列插口，有 3.5mm 的圓形插口，也有矩形的 USB 插口，還有圓角矩形的 Typec 插口，不同的插口可以理解成不同的 API，需要有對(duì)應(yīng)的接頭才能插入實(shí)現(xiàn)數(shù)據(jù)的通信。

更具體的認(rèn)識(shí)，強(qiáng)烈建議使用 GPT 工具來進(jìn)行深度的解析和掃盲，因?yàn)?API 對(duì)項(xiàng)目至關(guān)重要，不管是產(chǎn)品經(jīng)理還是前后端都會(huì)投入大量的時(shí)間在 API 文檔的處理和聯(lián)調(diào)中，是會(huì)議中會(huì)被高頻討論和直接影響產(chǎn)品需求的技術(shù)點(diǎn)，了解前面的知識(shí)和 API 以后，就可以聽懂會(huì)議中多數(shù)的開發(fā)術(shù)語在討論什么東西，而不是一頭霧水。

4. 產(chǎn)品的部署和運(yùn)維

前面三個(gè)部分可以構(gòu)成一個(gè)最初級(jí)的互聯(lián)網(wǎng)產(chǎn)品，但隨著技術(shù)的發(fā)展，后端變得越來越復(fù)雜，所以云服務(wù)平臺(tái)才有海量的產(chǎn)品和服務(wù)類型供用戶選擇。想要理解這些復(fù)雜的服務(wù)，就必須具備一定的運(yùn)維知識(shí)。

在今天，后端的崗位其實(shí)要分成兩類（不考慮算法），一類是后端的程序開發(fā)，一類是運(yùn)維。后端程序開發(fā)是把項(xiàng)目相關(guān)的功能給做出來，而運(yùn)維則是負(fù)責(zé)搭建網(wǎng)絡(luò)運(yùn)行的環(huán)境，并置入代碼確保它們?cè)诜?wù)器上能被正常運(yùn)轉(zhuǎn)。

具體為什么要做出這種區(qū)分也可以看我之前做的相關(guān)掃盲：

理解完運(yùn)維，你就會(huì)對(duì)互聯(lián)網(wǎng)產(chǎn)品在今天運(yùn)作的機(jī)制有全新的認(rèn)識(shí)和理解。同時(shí)，能真正讓我們認(rèn)識(shí)到這些特殊的 B 端技術(shù)類服務(wù)提供的都是什么服務(wù)，能解決哪些具體的問題。

如果時(shí)間充分的話，我強(qiáng)烈建議大家可以打開某大型云端服務(wù)平臺(tái)，然后點(diǎn)開它的產(chǎn)品列表，把上面羅列的每個(gè)產(chǎn)品和服務(wù)名詞查一遍做個(gè)掃盲。

5. AI 的生成和處理流程

AI 已經(jīng)在越來越多的行業(yè)和領(lǐng)域中開始應(yīng)用，而它所有的應(yīng)用基本都離不開 B 端界面的支持。我們不僅要緊跟時(shí)代的發(fā)展，也要對(duì)我們未來會(huì)負(fù)責(zé)的工作內(nèi)容有更深的了解。

了解 AI 的技術(shù)應(yīng)用首先要理解 AI 大模型的種類和應(yīng)用方向，從外行的角度來說大模型可以被簡單劃分成四個(gè)大類：

1. 計(jì)算機(jī)視覺模型：對(duì)圖像進(jìn)行生成、檢測、分類等處理，最常見的應(yīng)用就是文生圖
2. 自然語言處理模型：進(jìn)行文字分析并返回文字結(jié)果的模型，最常見的工具就是 ChatGPT
3. 語音處理模型：進(jìn)行語音識(shí)別、合成、輸出等處理，比如現(xiàn)在短視頻的合成人聲
4. 多模態(tài)模型：處理多種信息混合的數(shù)據(jù)類型，如應(yīng)用于圖文檢索、視頻總結(jié)等

模型做為內(nèi)核，來完成對(duì)信息的理解并返回特定的數(shù)據(jù)，免去了我們一系列的開發(fā)環(huán)節(jié)，于是我們就可以利用這種機(jī)制讓它為我們完成更復(fù)雜的工作，將它應(yīng)用到工作流去。

比如電商要發(fā)布一個(gè)新品，我們可以創(chuàng)建一個(gè)工作流，給出正面攝影圖例，標(biāo)題，介紹。然后它給我們輸出進(jìn)行優(yōu)化重新生成封面圖、商品展示圖，然后給我們生成不同平臺(tái)適用的標(biāo)題，最后再根據(jù)介紹自己擴(kuò)寫以及給出介紹圖的生成和排版建議等。

這種工作流的處理邏輯可以通過 COZE 這類平臺(tái)來學(xué)習(xí)和嘗試，可以通過查看它官方說明文檔快速上手，你們就會(huì)發(fā)現(xiàn)應(yīng)用 AI 輸出一些程序變得非常的簡單，而這個(gè)操作每天也發(fā)生在各個(gè)細(xì)分領(lǐng)域的 B 端產(chǎn)品中。

理解 AI 是什么和應(yīng)用的技術(shù)邏輯，對(duì)每個(gè) UI 設(shè)計(jì)師都很重要，這樣我們才能知道它的優(yōu)勢和能力的邊界在哪里，不會(huì)每天陷入假想的 AI 威脅論中錯(cuò)過職業(yè)的發(fā)展機(jī)遇。

以上就是我認(rèn)為從零開始理解技術(shù)的最好的方法，雖然實(shí)際項(xiàng)目中包含的細(xì)節(jié)要點(diǎn)遠(yuǎn)遠(yuǎn)不止這些，但只要理解這些內(nèi)容我們就可以建立起對(duì)技術(shù)的認(rèn)知框架，后續(xù)不管碰到什么新東西都能做到觸類旁通。

這才是“懂技術(shù)”的真正概念，而不是掌握一門編程語言而已。

結(jié)尾

如果大家點(diǎn)贊轉(zhuǎn)發(fā)的意愿高，那么后續(xù)還會(huì)增加額外的技術(shù)類說明的分享。同時(shí)，在項(xiàng)目中具體怎么結(jié)合對(duì)技術(shù)的理解應(yīng)用到設(shè)計(jì)和交互中，我們會(huì)在內(nèi)部課程做更多的分享和說明。

我們下篇再賤~