設計師和開發人員為了一個共同的目標而合作——打造客戶想要或需要的產品和體驗。他們的共同目的是為他們的用戶服務。

為了實現這一共同目標并有效協作，設計師和開發人員應該了解對方的紀律。設計師不必成為編碼員，但了解代碼的基礎知識及其局限性是非常有益的。

就像建筑師必須了解建筑材料才能設計結構一樣，UX 設計師需要HTML、CSS 和一點點 Javascript 等前端代碼的基礎知識——產品設計的基石！

對了解代碼的設計師的好處

學習代碼的設計師沒有什么可失去的，也沒有什么可得到的。好處遠遠超過了低頭學習新技能所需的時間。

與開發人員更好的協作

當設計人員對代碼有基本的了解時，他們可以與開發人員進行更好的溝通。他們還將贏得開發人員的尊重，他們反過來可能會更加努力地理解設計。

設計師、產品團隊和工程師之間的設計交接總是很棘手。為什么？因為他們說不同的語言有不同的限制。通過學習編碼，或者至少是基礎知識，設計人員可以更好地理解代碼的約束和限制，從而更容易與工程師協作解決問題。

了解開發限制

當設計人員知道如何編碼時，就更容易理解限制和解決問題，尤其是在移交后的質量保證 (QA) 期間。例如，如果瀏覽器中的某些內容看起來不正確，設計人員可以使用瀏覽器的開發人員工具來檢查元素的 HTML 和 CSS。

了解技術限制還可以在設計過程中為設計人員節省大量時間，因為他們知道什么是可能的，什么是不可能的——避免超出技術限制的設計決策。

改進原型設計

基于圖像的設計和原型制作工具不提供編碼產品的保真度或功能。限制設計人員在設計過程中可以做的測試和解決問題。

了解 HTML 和 CSS 的設計師可以構建功能原型，其性能優于基于圖像的設計工具。

增加你的價值

科技行業是一個令人興奮的領域，新的角色和機會不斷涌現。通過學習編碼，用戶體驗設計師可以承擔更大的角色，過渡到新的職業，并增加他們對潛在客戶或雇主的價值。

設計師應該學習哪些編程語言？

學習 HTML（超文本標記語言）和 CSS（層疊樣式表）對于想要學習代碼的設計師來說是一個很好的起點。您可以將 HTML 描述為互聯網的線框，而 HTML 和 CSS 的組合相當于設計模型——除了具有更高程度的保真度和功能。

設計工具中的大多數屬性面板都是 CSS 大小、顏色、間距、排版、網格、陰影等。因此，了解該語言將幫助您在代碼中可視化和理解您的設計。另外，您可以與開發人員更好地溝通。

設計師通常停留在 HTML 和 CSS 上，因為這是構建大多數模型和原型所需的全部內容。但是 Javascript 將允許您將事情提升到一個新的水平。

超越基礎

Javascript 是另一種優秀的前端語言。學習起來更具挑戰性，但可以讓您顯著增強基本的 HTML 和 CSS 原型。這就是為什么大多數前端開發人員建議設計人員學習 HTML、CSS 和一些 Javascript。

Javascript 也是有益的，因為它是許多流行的前端框架（如React、Vue、Angular等）的基礎。學習前端框架更具挑戰性和耗時，因此設計師不需要走這條路，除非他們真正享受編碼體驗。

同一團隊的兩個部分

首先，讓我們看一下兩個開發最佳實踐及其等效設計。

1）創建模塊化代碼以提高效率

就像設計師致力于基于組件的設計一樣，程序員應用可重用元素和高效使用 CSS。用于開發的樂高積木方法的擴展性非常好（尤其是對于復雜產品）。

考慮這種情況：客戶有一個聯系表并想要添加一個反饋表。如果開發人員已經為通用表單創建了一個類，那么添加一個新的類并不是什么大問題。由于開發人員天生就是以這種方式思考的——他們不可避免地意識到用戶界面或應用程序的不同方面可以在功能或 UI 方面被重用或重新分配的想法。

2) 為可擴展性創建靈活的代碼

就像設計師構建能夠在不斷增長的產品套件中生存的設計語言一樣，開發人員尋求編寫不需要完全重寫即可進行重大更改的代碼。

改變一個元素，更新無處不在。

模塊化方法是相同的——只是表達方式不同。

開發人員邏輯如何加強設計技能

當然，并不是所有的設計師都需要編碼。在今天的敏捷團隊中，我們應該擁抱專業化的力量。

話雖如此，精通代碼的設計師傾向于更好地理解技術含義（對企業產品尤其有用）。他們還獲得了一個更有條理的解決問題的框架。我說這是從開發人員轉為設計師的個人經驗。

在研究生院學習編碼讓我有機會從事入門級的 Web 開發工作，這導致了編程角色，最終發展成為 UX 職業。

我們的開發經驗使我的設計過程與眾不同。編碼讓我們看到了新的思維方式，并解開了創作過程中隱藏的部分。在編碼參數范圍內進行邏輯思考可以使設計問題成為焦點。

例如，在最近一個數據分析產品項目開始時，我面臨的唯一要求是“重塑我們的界面，激勵我們的公司，并在市場上脫穎而出”。

需求如此不明確，我需要將設計思維和代碼思維融合為三個部分。

1) 將這種情況確定為非傳統的探索活動

首先，我認真地聽著。客戶端主要關心用戶界面嗎？不是這樣，在這種情況下。當然，他們的界面需要更新，但更深層次的問題是以一種有意義的方式呈現數據，而不是圖標和顏色。

2) 重構最初的想法

作為一名開發人員，我過去曾通過布置數據模型來支持更豐富的體驗來解決類似的問題。我將同樣的理解應用于客戶對這個項目的需求。當客戶說他們想在特定屏幕上顯示特定的數據時，我理解得更多。他們本質上是在這條數據的重要性與相鄰組件之間建立聯系。此外，我現在了解到，兩個特定的數據組合在一起更強大，并且能夠找到機會在整個應用程序中實現這種類型的“設計關系”。

客戶的問題比“我們需要一個新設計”要深得多。為了支持如此復雜的產品，他們必須為高度的協作和靈活性做好準備。

根據我過去的開發經驗，我知道隨著我們的進展，客戶端會顯示更多的數據和功能。他們只是忙于工作太多，無法在傳統的“需求收集”階段同時傳達所有內容。

因此，我重新構建了自己的想法：必須將整個設計過程視為持續的需求收集。每個人都需要在工作中保持靈活性，否則項目就會分崩離析。

簡而言之，Photoshop、Adobe XD或Figma不會削減它！

3) 創建一個可持續的框架

這種分割界面的方法是代碼思維在起作用。

在進行界面開發項目時，開發人員通常從創建一個框架開始：概括地說，定義較小的部分將存在的區域，并以有意義的方式對這些較小的部分進行分組。

如果在開始深入研究細節（例如特定的 CSS 實現和較小的組件）之前該組織不存在，則開發人員的工作會變得復雜。

同樣，我首先勾勒出一個“UI 框架”來為設計問題指定一些廣泛的用戶目標。當我們深入研究特定交互時，我們通過概述一般原則來保持外觀和感覺的一致性。

在進入原型設計時，我能夠投入必要的時間來完善 UI 組件，因為整體愿景很清晰。由于原型元素被視為模塊，因此從視覺到詳細制作的過渡要容易得多。

結論

編碼是設計過程的重要組成部分，是模塊化和可擴展思維的啟動板，或者是有價值的設計工具。

為確保代碼思考是設計過程的一部分，請考慮以下事項：

在項目規劃和設計活動期間，在不同的檢查點包括一兩個開發人員。

與開發人員就原型技術進行合作，這將使手頭的項目受益。

與開發團隊討論模塊化方法，以了解零碎信息如何對設計產生積極影響。