我討厭開發人員“重新設計”我的設計，所以我學會了編碼。設計人員學習編碼的原因很多，其中最重要的是開發出來的東西與自己設計的東西完全不一樣。更糟糕的是，用于設計或市場營銷工作的JD上要求諸如“必須了解HTML，CSS，Javascript和WordPress”之類的東西。如今，設計師“應該”做的事情很多，而且越來越多的人從設計到用戶體驗再到產品管理，很難再重新學習這些基本的但是會為工作加分的真正技能。
這是一個來自一個從事設計和開發團隊多年的人的觀點，也是現在很熱門的一個觀點。
不，設計師不應該學習編碼，但是設計師應該學習如何“交流式”編碼。
有一個類似的場景：如果你要去國外游玩，這時候學會當地購買東西的簡單短語（諸如：您好，X·People先生，我需要一個炸雞飯，謝謝）會對你很有幫助。代碼也是一樣的，你不用很流利的將其描述出來，你只是需要能順利的完成與開發的交流就可以了。原因如下：
想要流暢而又優雅的寫代碼需要幾年時間的沉淀。對于大部分人來說，這并不是真正的附加技能。
作為一個設計，本職也是設計，那么你需要花費更多時間去磨練自己本職的手藝，產出更完美的設計作品，然后找到同樣的需要設計的開發作為伙伴。一起完成這個項目。
就像學習一門外語中的一些關鍵短語一樣，它可以幫助您去查閱文獻，去那個國家旅游，并且也表示對所訪問國家的尊重-學習代碼中的一些關鍵詞也是如此。
前端交流基礎
您可以利用一些空閑的時間學習一些基本知識，以進行“交流式”編碼
了解什么是“ Margin” 和 “ Padding”
“Margin”是指元素周圍的那一塊空間；“Padding”是指元素內部的那一塊空間。使用這些術語，最好就是直接讀出來，不要試圖將其翻譯成中文（像上面的小標題一樣，這只是幫助你理解的），也不要將其換成什么諸如：“裝訂線”或者“空白塊”這樣的設計術語。
margin 是元素之間的空間，padding 是元素周圍的空間
同樣的，顏色描述為十六進制或RGB取決于您的開發人員的開發喜歡或您的設計規范手冊。
了解如何使用瀏覽器的開發工具“檢查器”
讓我們打開Chrome瀏覽器使用一下。
在菜單欄中點擊?“視圖” > “開發者”?> “開發者工具”
您正在查找的“CSS樣式”可以在顯示邊距和填充的彩色框旁邊找到。
在該區域的頂部有一個復選框，顯示“全部顯示” —將其打開，以便您可以看到影響設計的每種樣式。
現在，這個列表確實很長，讓人看得頭有點大，充滿了您可能不認輸的東西（是不是雖然每個英文字母都認識，但是組合在一起可能就不認識了），沒關系。這里面的大多數你都不需要知道。如果您已經開始閱讀列表了，您可以看到很多對你有用的內容，例如有關字體的部分，如下圖。
用設計師使用軟件的思維看一下-您可以看到字體大小為13px，字體系列為系統字體。
到這里，想必您已經知道如何精確檢查要查看的字體和大小，因此當您覺得網站開發的是 “ Arial ” 字體，而開發人員向您保證它是 “ Roboto ” 的時候，你就可以自己去看看是不是像開發說的一樣。
更高級的內容：了解如何使用檢查器更改CSS
使用開發者工具后，您可以直接在標簽中輸入內容以更改值并查看其外觀。剛開始使用這個是會有點困的，但是這個很容易學習，只要你靜下心來。相信我，這比學習編碼做個開發容易多了。
您在這里所做的任何更改都只會發生在您的瀏覽器中。如果您重新加載頁面，它會將所有內容重置為來自服務器重新傳輸過來的內容。隨你亂搞，無論你怎么亂寫，你不會影響到瀏覽器以外的任何事物。
這一次，我們不再關注整個頁面的CSS，而是關注單個元素。
將鼠標懸停在該元素上，然后右鍵單擊它。您將看到 “ 檢查 ” 選項，然后選擇該選項。
將鼠標懸停在元素上，單擊鼠標右鍵，然后選擇“檢查”
現在，此元素是在“檢查器”面板中顯示的元素。
看到字體大小了嗎？假設我們要使字體變大。您可以直接在面板中進行更改。
在這里，我將其設置為16px：
在瀏覽器中修改樣式是進行細微調整然后返回給開發人員的最佳方法，然后說：“您將使字體大小為16px，顏色為：＃D71920 ” ，這比用 “ 使其變大并變大 ，顏色變紅。”更好。
在檢查器中，有一些很有用的小技巧：
進階技巧1: 更改任何樣式
“樣式”部分的頂部框標記有個“ element.style ”，這是放置要測試的東西的最簡單的位置。
是否在列表中找不到相應的字體標簽來放大字體？在“ element.style ”模塊處直接輸入font-size：24px。
重要的是要知道，當您在此框中鍵入內容時，必須使用CSS語言格式。那就是“ property”，然后是一個冒號，然后是您想要元素執行的操作- “value”，然后以分號結尾。
在此示例中，“ font-size”是屬性，“ 24px”是值。整個作品稱為“聲明”。學習這些內容的最佳方法是從“顯示所有樣式”中復制它們。您需要了解的內容會堅持存在。我還將在下面的“草圖”那一部分中向您展示如何找到它們。
進階技巧2: 完全隱藏內容
要完全隱藏某些內容，請使用以下聲明：“ display：none; ” 。將其放在element.style部分中。
進階技巧3: 覆蓋樣式
如果將樣式放入element.style中，但沒有任何反應，則意味著存在某些阻止樣式使用的情況。這就是所謂的樣式替代。通常，您可以通過在值標簽中添加 “! important” 來覆蓋它。（這個語句需要在分號前加入）
進階技巧4: 更改文字
讓我們看看如何更改文本；仍然是在檢查器中，在“style”模塊上的“html”部分中完成了此操作。
將鼠標懸停在要更改的文本上，然后右鍵單擊并選擇“檢查器”。
這次，我們將編輯HTML而不是CSS。您右鍵單擊的部分將在HTML中突出顯示。您可以打開和關閉灰色箭頭，以更深入地研究代碼。
看到上面那個寫著“圖片”的地方了嗎？假設我們想要有更多文本內容。我們可以雙擊并輸入新內容。比如輸入下我的博客網址：“ https://xpeople.design ”(字寫的這么小，應該不算植入廣告吧)
點擊回車，look！你的新文本就出現在界面上了。
改完這些記得要截圖，并將更改好的內容發送給開發小哥哥。
從設計工具中提取代碼
在這段內容中，我們將以Sketch為事例，事實上所有的新一點的UI設計工具都具有這項功能。
我們先在Sketch中創建內容，然后右鍵單擊該元素，然后選擇“ 拷貝CSS屬性”
現在，將此信息粘貼到某處，并查看所擁有的內容：
藍色按鈕的CSS屬性
現在，你可以您可以了解這些與您的工作相關的樣式?，F在，為了好玩，您可以將這些樣式粘貼到element.style中，如果您要進行一些調整并查看它的實時效果。
粘貼?CSS?到?element.style
請注意，在element.style部分中，我從Sketch粘貼了CSS屬性后，添加padding-right：10px；padding-left：10px；padding-top：5px；padding-bottom：5px；來在按鈕中的文本周圍添加空間。
向開發發送更改
有很多辦法可以做到這一點，這取決于你們的溝通方式。當然，當你的伙伴為了完善你的設計而放慢時間時，你需要保持禮貌，和對其保持尊重。我能學習這些代碼知識并且擁有跨職能的能力，也是因為我在早期工作中和開發人員合作，細心了解他們，他們也很愿意解釋他們在做什么，以及怎么做。
我更喜歡將我的所有更改都標記在一個并排的比較中，然后與開發人員修改后的進行比較。
一些設計人員/開發人員更喜歡屏幕共享并將像素推在一起。
無論做什么，都要確保對話與更改請求同步進行。這將幫助你學習，如果你在設計中做的事情，不能被實現，例如，代碼中最小的單位是1px，所以如果你做0.25px分割線，開發實現不了你的設計。如果你使用的是正片疊底或者其他類似ps的疊加方式，這些東西也在代碼里面是沒辦法實現的。
關于“交流式”編碼總結
不，設計師不需要學習編碼。
是的，設計師需要學習一些短語以進行“交流式”編碼。
學習margin，padding和十六進制/ RGBA顏色的語言。
了解如何在瀏覽器上使用檢查器（開發者工具）來測試更改。
通過在設計軟件中復制CSS屬性并理解它們來學習相關的CSS。
與開發人員緊密合作，以了解更多信息并共同創造更好的產品。
以上是“設計人員應該學習代碼嗎？”的全部內容
