B 端設(shè)計師為何要懂技術(shù)？該懂哪些技術(shù)？
對于 B 端設(shè)計師來說，“懂技術(shù)” 并非意味著要掌握編程、親自寫代碼，而是要從框架層面理解特定技術(shù)的原理、運行邏輯，以及落地實現(xiàn)的相關(guān)限制。這從來不是 UI 設(shè)計師的專屬要求，而是整個設(shè)計行業(yè)的通用專業(yè)準(zhǔn)則 —— 設(shè)計的核心本就是解決方案的策劃，任何設(shè)計最終都要通過具體的實施環(huán)節(jié)落地。就像平面設(shè)計要適配印刷標(biāo)準(zhǔn)、工業(yè)設(shè)計需契合制造工藝、室內(nèi)設(shè)計要銜接施工規(guī)范，脫離落地標(biāo)準(zhǔn)的設(shè)計，終究只會變成無法落地的 “飛機(jī)稿”。蘭亭妙微深耕 UI 設(shè)計與開發(fā)領(lǐng)域，團(tuán)隊設(shè)計師始終保持持續(xù)學(xué)習(xí)、穩(wěn)步成長的狀態(tài)，在 B 端UI設(shè)計上積累了豐富實踐，相關(guān)作品案例可在我們的官方網(wǎng)站查看。
作為專業(yè)的 UI 設(shè)計師，了解技術(shù)是輸出有效設(shè)計方案的核心前提。若忽視技術(shù)限制，設(shè)計稿極易因無法實現(xiàn)被駁回，嚴(yán)重拖慢項目推進(jìn)效率。除此之外，對技術(shù)的認(rèn)知還能幫助設(shè)計師更深度地思考設(shè)計與項目的關(guān)聯(lián)，精準(zhǔn)預(yù)判方案實現(xiàn)難度，優(yōu)化與前端的交付對接方式。設(shè)計師與前端工程師的溝通矛盾，很大一部分根源就在于設(shè)計師對技術(shù)的不了解，輸出的方案要么無法實現(xiàn)，要么實現(xiàn)成本極高，如同產(chǎn)品經(jīng)理要求設(shè)計 “五彩斑斕的黑” 一般，忽視了對方的專業(yè)限制。懂技術(shù)與不懂技術(shù)的設(shè)計師，在項目推進(jìn)效率上差距顯著，這也是懂技術(shù)的設(shè)計師更具職業(yè)競爭力、更受行業(yè)認(rèn)可的關(guān)鍵原因。
而對于 B 端設(shè)計師，懂技術(shù)還有著更為特殊且重要的意義：B 端領(lǐng)域中，有大量產(chǎn)品是面向技術(shù)領(lǐng)域提供服務(wù)的。常規(guī) B 端服務(wù)面向無技術(shù)背景的商業(yè)用戶，如倉庫管理員用 ERP 查庫存、職員用 OA 提交工單；但面向技術(shù)領(lǐng)域的 B 端產(chǎn)品，主要服務(wù)于企業(yè)開發(fā)環(huán)節(jié)，需程序員操作以提效降本，比如云服務(wù)供應(yīng)商的產(chǎn)品，只有具備專業(yè)技術(shù)知識的程序員才能熟練使用。
云服務(wù)只是其中一個方向，區(qū)塊鏈、數(shù)據(jù)大屏等領(lǐng)域的 B 端產(chǎn)品也均是如此，即便操作使用者是程序員，其界面設(shè)計仍需專業(yè)設(shè)計師完成。只有具備一定技術(shù)知識積累的設(shè)計師，才能精準(zhǔn)理解這類產(chǎn)品的需求，而非單純跟著產(chǎn)品原型畫圖、對設(shè)計內(nèi)容一無所知。尤其近年 AI 技術(shù)快速崛起，AI 相關(guān) B 端服務(wù)數(shù)量大幅增長，這類產(chǎn)品依托技術(shù)搭建，需要用戶完成特定配置才能實現(xiàn)服務(wù)，若設(shè)計師不了解 AI 及基礎(chǔ)技術(shù)原理，根本無法開展有效設(shè)計。如今行業(yè)新增的 “B 端 AI 設(shè)計師”，并非指用 AI 生成設(shè)計，而是指專門設(shè)計 AI 類產(chǎn)品、且具備一定 AI 技術(shù)認(rèn)知的設(shè)計師?？梢?，懂技術(shù)不僅是 B 端設(shè)計師完成日常工作的基本要求，更是拓展職業(yè)邊界、抓住行業(yè)新機(jī)遇的重要助力。
一、B 端設(shè)計師該懂哪些技術(shù)？
明確懂技術(shù)的重要性后，設(shè)計師需要掌握的技術(shù)知識，并非零散的編程技巧，而是能搭建起技術(shù)認(rèn)知框架的核心方向，具體可總結(jié)為五類：
- 前端界面的實現(xiàn)邏輯
- 后端的功能框架和服務(wù)
- 前后端聯(lián)調(diào)的過程
- 產(chǎn)品的部署和運維
- AI 的生成和處理流程
接下來將對每個方向的核心概念、學(xué)習(xí)價值及入門方法做簡單解析，幫助設(shè)計師快速建立基礎(chǔ)認(rèn)知。
二、各技術(shù)方向核心解析與學(xué)習(xí)建議
（一）前端界面的實現(xiàn)邏輯
這是與 UI 設(shè)計師關(guān)聯(lián)最緊密、距離最近的技術(shù)內(nèi)容，指前端實現(xiàn)界面樣式、交互與動畫的底層邏輯，這里的前端是廣義概念，涵蓋網(wǎng)頁、iOS、Android、小程序、桌面端等所有系統(tǒng)的用戶界面。
不同系統(tǒng)的開發(fā)語言雖有差異，但實現(xiàn)前端界面的核心邏輯大體一致，因此設(shè)計師只需吃透其中一種，便可觸類旁通。對 B 端設(shè)計師而言，網(wǎng)頁前端是最佳學(xué)習(xí)對象：一方面，B 端工作中接觸最多的就是網(wǎng)頁項目；另一方面，網(wǎng)頁前端是所有前端類型中最簡單、最易上手的。
網(wǎng)頁前端的核心由 HTML、CSS、JS 三種語言構(gòu)成：HTML 和 CSS 是搭建網(wǎng)頁框架、定義樣式的標(biāo)記語言，JS 則用于實現(xiàn)邏輯運算與交互處理。對設(shè)計師來說，重點系統(tǒng)學(xué)習(xí)并動手實操HTML 和 CSS即可 —— 從程序員的視角，二者并非真正的編程語言，只是標(biāo)記和樣式語言，學(xué)習(xí)門檻極低，實操卻能帶來極大價值：既能深度理解界面的實現(xiàn)過程，搞清楚為何相同參數(shù)下，開發(fā)效果與設(shè)計稿會存在偏差；也能快速建立正確的前端認(rèn)知，明白樣式與邏輯是前端工作的兩個獨立部分，實現(xiàn)界面效果只是前端工作的一小部分。
（二）后端的功能框架和服務(wù)
這一方向要求設(shè)計師建立對服務(wù)器層面的認(rèn)知，了解產(chǎn)品的運行機(jī)制，以及后端程序員的核心工作內(nèi)容。這對設(shè)計師理解界面中復(fù)雜的字段、數(shù)據(jù)邏輯至關(guān)重要，部分復(fù)雜的 B 端交互設(shè)計，更是需要基于對后端服務(wù)和數(shù)據(jù)的理解才能完成。
設(shè)計師可從 B 端服務(wù)的框架圖切入學(xué)習(xí)，B 端的 SaaS、PaaS、IaaS 類服務(wù)，均是對后端技術(shù)架構(gòu)拆解后形成的產(chǎn)物。若遇到陌生專業(yè)名詞，可借助 GPT 工具快速查詢解析。同時需重點理解：后端代碼的存儲位置、運行方式，以及代碼與數(shù)據(jù)庫之間的關(guān)聯(lián)邏輯，這是理解后端工作的核心基礎(chǔ)。
（三）前后端聯(lián)調(diào)的過程
前后端聯(lián)調(diào)，即讓前端程序與后端程序建立連接、實現(xiàn)數(shù)據(jù)傳輸?shù)倪^程。前端與后端程序是運行在不同硬件上的獨立程序，默認(rèn)無任何關(guān)聯(lián)，需要開發(fā)人員通過技術(shù)手段為其搭建溝通橋梁，這就像將主機(jī)與顯示器、鼠標(biāo)、鍵盤連接，才能形成一個可正常運作的整體。
聯(lián)調(diào)的核心概念是API 接口，這是前后端程序連接的關(guān)鍵節(jié)點，如同主機(jī)后側(cè)的各類插口 ——3.5mm 圓形插口、USB 插口、Type-C 插口，不同插口對應(yīng)不同的 API，只有搭配適配的 “接頭”，才能實現(xiàn)數(shù)據(jù)通信。
API 是項目中的核心技術(shù)點，產(chǎn)品經(jīng)理、前后端工程師都會投入大量時間處理 API 文檔、推進(jìn) API 聯(lián)調(diào)，也是項目會議中的高頻討論內(nèi)容，直接影響產(chǎn)品需求的落地。建議借助 GPT 工具對 API 進(jìn)行深度解析掃盲，理解這一概念后，設(shè)計師便能聽懂項目會議中大部分開發(fā)術(shù)語，避免陷入認(rèn)知盲區(qū)。
（四）產(chǎn)品的部署和運維
前端、后端、聯(lián)調(diào)知識，能支撐起一個基礎(chǔ)的互聯(lián)網(wǎng)產(chǎn)品，但隨著技術(shù)發(fā)展，后端架構(gòu)愈發(fā)復(fù)雜，云服務(wù)平臺的產(chǎn)品與服務(wù)類型也隨之豐富，想要理解這些復(fù)雜的后端服務(wù)，設(shè)計師必須具備一定的運維知識。
如今的后端崗位（不含算法）主要分為兩類：后端程序開發(fā)與運維。后端開發(fā)的核心是實現(xiàn)產(chǎn)品的各項功能，而運維的核心是搭建網(wǎng)絡(luò)運行環(huán)境，將開發(fā)好的代碼部署到服務(wù)器中，確保產(chǎn)品能正常、穩(wěn)定運轉(zhuǎn)。若想理解二者的分工與價值，可參考相關(guān)的 DevOps 掃盲資料，建立基礎(chǔ)認(rèn)知。
理解運維知識，不僅能讓設(shè)計師對互聯(lián)網(wǎng)產(chǎn)品的運行機(jī)制有全新認(rèn)知，更能精準(zhǔn)理解云服務(wù)、區(qū)塊鏈等技術(shù)類 B 端產(chǎn)品的服務(wù)本質(zhì)，知道這類產(chǎn)品能解決哪些實際問題。若時間充裕，建議打開大型云服務(wù)平臺，查看其產(chǎn)品列表，對陌生的產(chǎn)品與服務(wù)名詞逐一查詢掃盲，快速積累行業(yè)知識。
（五）AI 的生成和處理流程
AI 技術(shù)的應(yīng)用愈發(fā)廣泛，而幾乎所有 AI 應(yīng)用都離不開 B 端界面的支持，緊跟時代發(fā)展，理解 AI 的生成與處理流程，是 B 端設(shè)計師的必備能力，尤其是對主攻 AI 類 B 端產(chǎn)品的設(shè)計師而言，這一知識更是核心剛需。
理解 AI 技術(shù)應(yīng)用，首先要區(qū)分 AI 大模型的種類與應(yīng)用方向，從外行視角，可將大模型簡單分為四類：
- 計算機(jī)視覺模型：對圖像進(jìn)行生成、檢測、分類，文生圖是最常見的應(yīng)用；
- 自然語言處理模型：對文字進(jìn)行分析并返回文字結(jié)果，ChatGPT 是典型代表；
- 語音處理模型：實現(xiàn)語音識別、合成、輸出，如短視頻的合成人聲；
- 多模態(tài)模型：處理圖文、音視頻等多種混合數(shù)據(jù)，應(yīng)用于圖文檢索、視頻總結(jié)等場景。
AI 大模型是各類 AI 應(yīng)用的內(nèi)核，能幫助我們完成復(fù)雜的信息處理與數(shù)據(jù)返回，省去大量開發(fā)環(huán)節(jié)，設(shè)計師可借助這一機(jī)制，將 AI 融入設(shè)計與產(chǎn)品工作流。比如電商新品發(fā)布，可搭建 AI 工作流：輸入產(chǎn)品攝影圖、標(biāo)題、基礎(chǔ)介紹，讓 AI 優(yōu)化生成封面圖、商品展示圖，適配不同平臺生成標(biāo)題，甚至擴(kuò)寫產(chǎn)品介紹、給出介紹圖的生成與排版建議。
這類 AI 工作流的處理邏輯，可通過 COZE 等平臺學(xué)習(xí)嘗試，查看官方說明文檔便能快速上手，能直觀感受到 AI 在 B 端產(chǎn)品中的實際應(yīng)用方式。理解 AI 的技術(shù)邏輯，不僅能讓設(shè)計師精準(zhǔn)把握 AI 產(chǎn)品的設(shè)計要點，更能清晰認(rèn)識 AI 的優(yōu)勢與能力邊界，避免陷入 “AI 威脅論”，抓住 AI 時代的職業(yè)發(fā)展機(jī)遇。
三、結(jié)語
對 B 端設(shè)計師而言，“懂技術(shù)” 的核心是建立技術(shù)認(rèn)知框架，而非掌握某一門編程語言。以上五大方向，是從零開始理解技術(shù)的核心切入點，雖然實際項目中的技術(shù)細(xì)節(jié)遠(yuǎn)不止于此，但只要吃透這些基礎(chǔ)內(nèi)容，便能形成完整的技術(shù)認(rèn)知體系，后續(xù)遇到新的技術(shù)概念、產(chǎn)品類型，都能做到觸類旁通。
掌握這些技術(shù)知識，不僅能讓設(shè)計師輸出更具落地性的設(shè)計方案，提升項目推進(jìn)效率，更能精準(zhǔn)理解各類 B 端產(chǎn)品的需求本質(zhì)，拓展職業(yè)邊界，在云服務(wù)、AI、區(qū)塊鏈等新興領(lǐng)域找到新的職業(yè)機(jī)遇，成為更具核心競爭力的專業(yè)設(shè)計師。
蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.chenguixiang.net 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。