如何為開發人員進行設計

即使他們可能從事相同的項目和產品，開發人員和設計師也經常在各自為政的情況下彼此分開工作。 開發人員通常認為設計是次要的，與產品的功能相比並不重要。

這種想法可能會損害開發人員與設計師的關係。 沒有對設計的基本掌握可能會阻礙開發人員的職業生涯，或者僅僅因為他們沒有設計師參與就阻止他們進行項目。

為什麼開發人員應該學習設計

雖然設計和開發通常被認為是獨立的學科，但也有人同時掌握了這兩個學科。 即使某人只對成為設計師或開發人員感興趣——而不是兩者兼而有之——至少學習其他學科的基礎知識也是很有價值的。

開發人員可能想要學習設計，或者至少培養設計知識的基本基礎有幾個原因。

首先，小團隊可能沒有專門的設計師。 此外，有些開發人員想要完全自己處理項目，他們無力聘請設計師（或者想把錢花在其他地方）。 學習設計自己的產品，至少在可以聘請設計師之前過得很好，這是一種寶貴的資源。

開發人員學習設計的另一個重要原因是他們可以更有效地與設計師合作。 對於設計師來說，為網站或應用程序交出完全設計的文件，他們希望在成品中達到像素完美，卻發現他們的設計已經被開發人員編碼發生了重大變化，這令人難以置信的沮喪。

如果開發人員不了解設計的基礎知識，他們可能會忽略使 UI 特別用戶友好的小細節，並且無意中破壞了項目的用戶體驗。 當設計師發回大量更正時，它可能會使開發人員與設計師的關係緊張，更不用說減慢項目的完成速度。

為了改善跨學科團隊之間的關係和團隊合作，開發人員會幫自己一個忙，學會通過“設計師的眼睛”來看待設計，而不是純粹從開發的角度看待設計——掌握這項技能將大大改善他們的項目。

打造設計思維

很多時候，學習設計的開發人員過於關注他們喜歡和想要效仿的設計美學，而不是支持這些設計的基本原則。 他們看到按鈕的顏色和大小、特定字體或邊框的使用方式等內容，卻不了解這些選擇背後的原因。

他們開始在牆壁上噴漆並裝飾空間，而不了解他們正在裝飾的空間的目的（或者甚至確保完成管道和電氣工作之類的事情），可以這麼說。

理解和尊重設計師做出決定背後的原則非常重要。 任何剛接觸設計的人都需要牢牢掌握構成良好設計的原則和理論——例如格式塔原則和基本的視覺層次——然後才開始潛入並開始到處噴漆。

也就是說，對於新設計師來說，無論他們是否有開發背景，在理論上都陷入困境也是很常見的。 他們花了很多時間學習和思考他們從未真正應用所學知識的事情。

設計師和開發人員都傾向於完美主義者。 但是在設計完美之前推出（因為它們可能永遠不會完美）對於這個過程很重要。 尤其是新設計師，需要克服他們的不安全感，把他們的工作放在那裡，並從他們收到的反饋中學習。

真正學習設計的最好方法之一是嘗試重新創建他人的設計。 區分哪些有效，哪些無效，並弄清楚為什麼特定設計具有吸引力是新設計師或開發人員可以學習的最有價值的技能之一。 對現有設計進行獨特的旋轉在業內很常見（Dribbble 的“反彈”功能就是明證）。

在瀏覽器中設計

許多設計師拒絕直接在瀏覽器中進行設計，因為這通常意味著他們需要至少能夠輕鬆編寫基本的 HTML 和 CSS 代碼。 這就是為什麼它通常非常適合從事設計的開發人員的確切原因——他們已經習慣了編寫代碼。

有一些工具可以幫助在瀏覽器中進行設計，並且可以讓設計人員和開發人員的生活更輕鬆。 簡單的瀏覽器插件可用於從選擇調色板到探索另一個站點的 CSS 和 HTML 代碼的所有內容。

還有像 Figma 這樣更複雜的工具，它們在瀏覽器中就像一個功能齊全的設計工具。 Figma 允許設計師進行協作，將資產發送給利益相關者（甚至讓他們更改設計的內容和副本），並讓開發人員可以實時訪問實際設計。 對於想要創建可隨時間擴展的設計和設計系統的開發人員設計師來說，這是一個很好的選擇。

Webflow 是在開發人員可能喜歡的瀏覽器中進行設計的另一種選擇。 雖然設計界面是可視的，但導出的代碼是乾淨的、語義的 CSS 和 HTML，開發人員會欣賞（並非所有可視化設計工具都導出乾淨的代碼）。 Webflow 包括用於設計和佈局的工具，以及內置的 CMS 和電子商務工具，以及託管選項。

顏色、排版和佈局的使用

在深入探討顏色、排版和佈局的視覺原則之前，重要的是要談談基本的可用性。 世界上最賞心悅目的設計如果不可用，也是毫無用處的。

最重要的可用性原則之一是一致性或可預測性的概念。 設計應該足夠可預測，以便用戶能夠直觀地理解如何使用它們。 例如，可點擊鏈接的藍色下劃線文本、完整且標記良好的導航菜單等。元素之間的間距、排版和配色方案也應保持一致。

在每個設計項目中都應考慮的其他可用性原則包括諸如錯誤預防（以及在確實發生錯誤時提供信息性錯誤消息）、熟悉的語言（使用人們習慣的語言，而不是“可愛”或可能不清楚的創造性替代方案)、靈活性和效率，以及容易獲得的幫助。 Nielsen Norman Group 還應牢記額外的可用性啟發式方法。

可用性評估應在整個設計和開發過程中進行，以確保產品按照設計和開發團隊的預期運行，並且不會讓用戶感到困惑。 啟發式評估涉及將產品應遵循的預定義設計原則列表與實際產品進行比較，以查看哪裡出現了偏差（然後修復這些偏差）。

一旦徹底了解了與手頭產品相關的可用性，設計師-開發人員就可以轉向設計的更多視覺方面。

基本色彩理論

色彩理論是視覺設計中最複雜的方面之一。 稍微改變色調可以完全改變顏色的視覺衝擊和情感效果。 這也是許多從事該行業多年的設計師仍在與色彩作鬥爭的原因之一。

雖然已經寫了很多關於色彩理論的書籍，但設計師和開發人員可以學習一些非常基本的原則來開始使用。 將這些與任何可用的多種顏色設計工具結合起來，可以相當容易地創建一個令人愉悅的調色板。

一、暖色、冷色、中性色的區別。 暖色包括紅色、橙色和黃色。 暖色通常會充滿活力和活力。 冷色包括綠色、藍色和紫色。 這些顏色通常更平靜和放鬆。

中性色包括白色、黑色、灰色、棕色和米色。 在暖色或冷色中添加白色、黑色或灰色會改變它們的含義和影響。 白色會使顏色變淺，通常會使它們的效果不那麼強烈或更積極（例如，紫色被認為是一種神秘、富麗堂皇的顏色，而丁香色通常與春天和幸福有關）。 灰色會使顏色變得柔和，並可以減輕它們的影響。 黑色會使顏色變暗並使它們看起來更保守（考慮亮藍色和海軍藍等顏色的不同影響）。

一旦設計師對顏色的含義有了基本的了解，他們就可以使用 Coolors、Design Seeds 或 Colormind 等工具為他們的設計提供最終的、協調的調色板。

使用 HSL 顏色

當設計師想到網頁顏色時，他們通常會考慮十六進制值。 雖然這已成為 Web 顏色方面的行業標準，但開發人員可能會發現使用 HSL 顏色值更有意義。

對於大多數人（包括設計師）來說，十六進制值似乎彼此之間沒有關聯。 看起來非常相似的兩種顏色可能具有完全不同的十六進制值。 例如，#68B4D4 和#92C8E0 是非常相似的藍色陰影（一個只是比另一個更亮更輕），但它們的十六進制值沒有明顯的相關性。

然而，它們的 HSL 值顯示了它們之間的密切關係：#68B4D4 變為 HSL (198, 58%, 62%)，#92C8E0 變為 HSL (198, 56%, 73%)。 序列中的第一個數字（在本例中為 198）表示特定的色調。 第二個數字是飽和度百分比（顏色的亮度或鮮豔度）。 第三個數字是顏色的亮度（或添加的白色）百分比。

由於使用 HSL 與 hex 很容易看出顏色值之間的相關性，因此開發人員經常發現使用 HSL 通過代碼操作顏色要容易得多。

排版原則

排版是另一個甚至可以讓經驗豐富的設計師絆倒的領域。 但就像色彩理論一樣，有一些很棒的工具可以提供幫助。

排版層次結構是設計師-開發者應該首先學習的東西之一。 設計中不同類型元素之間的關係對於使該設計更實用至關重要。

至少，設計應該具有三個層次的排版結構：標題、副標題和正文字體。 標題應該是視覺上最突出的，其次是字幕，然後是正文字體，應該是高度可讀的。

許多新設計師在創建層次結構時過於關注字體大小，而對字體樣式關注不夠。 有時，不是使標題明顯大於副標題，例如，標題可以加粗或大寫，而副標題保留標題大小寫和正常粗細。 顏色也可以用來區分字幕和標題，以及這些元素和正文。

組合不同的字體也會讓許多設計師感到困惑，但這是創建視覺層次結構的常用方法。 它們包括選擇互補字體（相反的字體經常吸引，但在一定程度上，字體組合的好壞必鬚根據隨著時間的推移磨練出來的直覺來確定），選擇合適的字體（不要在法律文件中使用 Comic Sans，因為例如，體型的顯示字體在較小的尺寸下不清晰），並在字體之間創建對比（不要使用兩個非常相似的字體）。

組合字體的另一種簡單方法是從大型字體系列中選擇字體。 甚至還有一些家族，包括顯示、襯線和無襯線版本，它們可以很好地協同工作（例如 Mrs Eaves 和 Mr Eaves、Fedra 或 Museo 和 Museo Sans）。 這可能是開始真正嘗試組合字體的最簡單方法，因為它們被設計為看起來很好。

在處理較大的排版層次結構時（例如添加 H1、H2、H3、H4 等），在排版比例中遵循某種原因很重要。 斐波那契數列是一種可能的開始尺度，儘管還有其他已建立的印刷尺度。

在兩種排版（以及通常在設計佈局中）中使用的一種常見比例包括 4、8、16、24、36、48、72、108 等。這些數字可以以各種方式組合以創建具有令人愉悅的視覺效果的設計比例（例如，24 像素字體與 36 像素行高組合）。

基本佈局原則

自從 Web 誕生以來，就出現了某些佈局模式作為“標準”。 示例包括頂部的主導航、帶有附加信息或導航選項的左側或右側邊欄，以及佔據剩餘空間的正文內容。

雖然與這個基本佈局有一定的偏差（不是頂部導航、沒有側邊欄、兩個側邊欄等），但在創建新佈局時這通常是一個相當安全的選擇。 偏離這個基本模式只能有目的，尤其是新的和沒有經驗的設計師-開發者。

創建可預測的設計——這通常意味著一致——對產品的可用性有很大幫助。 只有在可用性收益大於損失時，才應該偏離用戶在使用產品時所期望看到的內容。

對於相同類型的內容，最好不要在一頁上使用 72 像素粗體藍色標題，然後在另一頁上使用 36 像素紅色標題，因為佈局一致性是關鍵。 同樣，標題和正文之間的間距（填充）在一個部分中為 36 像素，然後在另一部分中為 32 像素，這會造成視覺上的不一致。 雖然一個人可能不會立即理解為什麼差異會如此不和諧，但他們會感覺到。

與上面提到的印刷比例類似，4、8、16、24、36、48、72 或 108 像素的間距元素將創建視覺上令人愉悅的設計。 在元素之間使用足夠的空間是個好主意，給它們呼吸的空間； 較新的設計師通常會避免留白，最終會得到看起來雜亂無章的設計。

有些人可能會質疑為什麼比例尺是這樣隔開的。 為什麼前兩個數字之間只有 4 個像素的差異，而後兩個數字之間卻有 36 個像素的跳躍？ 原因很簡單：在小尺度下，4 像素的增加很容易識別（8 像素是 4 的兩倍，很容易識別）。 但是對於較大的數字，72 像素和 76 像素之間的差異並不容易看出。 隨著尺寸的增加，更容易看到更大的差異。

一致的間距是基於網格的設計方法如此流行的原因之一。 從網格開始（通常為 12、16 或 24 列）為設計人員提供了一個工作框架，使所有內容保持一致。 列之間的內置排水溝也有助於確保不同的設計元素和其中的內容有一些喘息的空間。

結論

設計師和開發人員都應該專注於擴展他們的技能，以進一步發展他們的職業生涯。 開發人員花在學習設計基本原理上的時間將在未來與設計師合作或創建自己的產品時節省時間。

了解設計的基本原則——可用性原則、色彩理論、排版、佈局和用戶體驗——也將使開發人員更擅長開發。 當他們了解設計師做出選擇的原因時，開發人員可以與設計師更好地合作，創造出真正出色的產品。

進一步閱讀 Toptal 設計博客：

• 設計原則及其重要性
• 設計師應該知道多少編碼？
• 可能性範圍：首選 UI 顏色指南
• 使用這些成功的交互設計原則提升您的用戶體驗
• 設計基礎——視覺層次結構指南（附信息圖）