開發者的十大前端設計規則

作為前端開發人員，我們的工作本質上是通過代碼將設計變為現實。 理解並勝任設計是其中的重要組成部分。 不幸的是，真正理解前端設計說起來容易做起來難。 編碼和美學設計需要一些完全不同的技能。 正因為如此，一些前端開發人員在設計方面沒有達到應有的水平，因此，他們的工作受到了影響。

我的目標是為您提供一些易於遵循的規則和概念，從一個前端開發人員到另一個前端開發人員，這將幫助您從頭到尾完成一個項目，而不會弄亂您的設計師如此努力的工作（或者可能甚至允許您設計自己的項目並取得不錯的結果）。

當然，這些規則不會讓你在閱讀一篇文章的時間裡從糟糕到出色，但如果你將它們應用到你的工作中，它們應該會產生很大的不同。

在圖形程序中做事

完成一個項目並從頭到尾同時保持設計文件中的每一個美學變化的情況確實很少見。 而且，不幸的是，設計師並不總是到處跑來快速解決問題。

因此，在任何前端工作中總會有一個點，您最終不得不進行一些與美學相關的調整。 無論是選中復選框時顯示的複選標記，還是製作 PSD 遺漏的頁面佈局，前端人員通常最終都會處理這些看似微不足道的任務。 當然，在一個完美的世界中不會這樣，但我還沒有找到一個完美的世界，因此我們需要靈活。

對於這些情況，您應該始終使用圖形程序來製作模型。 我不在乎您選擇哪種工具：Photoshop、Illustrator、Fireworks、GIMP 等等。 只是不要試圖從您的代碼中進行設計。 花一分鐘時間啟動一個真正的圖形程序並弄清楚它應該是什麼樣子，然後轉到代碼並實現它。 您可能不是專家設計師，但您仍然會得到更好的結果。

匹配設計，不要試圖打敗它

你的工作不是讓你的複選標記的獨特性給人留下深刻印象； 您的工作是將其與設計的其餘部分相匹配。

那些沒有太多設計經驗的人很容易被誘惑在項目上留下看似微不足道的細節。 請把它留給設計師。

而不是問“我的複選標記看起來很棒嗎？” 您應該問：“我的複選標記與設計的匹配程度如何？”

您的重點應該始終放在設計上，而不是試圖超越它。

排版使一切變得不同

你會驚訝地知道設計的最終外觀有多少受到排版的影響。 你會驚訝地發現設計師花了多少時間在上面。 這不是“一勞永逸”的努力，需要投入大量的時間和精力。

如果你最終不得不選擇排版，你應該花很多時間來做這件事。 上網並研究好的字體配對。 花幾個小時嘗試這些配對，並確保您最終獲得項目的最佳排版。

如果您正在使用設計，請確保遵循設計師的排版選擇。 這也不僅僅意味著選擇字體。 注意行距、字母間距等。 不要忽視與設計的排版相匹配的重要性。

另外，請確保在正確的位置使用正確的字體。 如果設計人員僅將 Georgia 用於標題，而將 Open Sans 用於正文，那麼您不應該將 Georgia 用於正文，將 Open Sans 用於標題。 排版可以很容易地創造或破壞美學。 花足夠的時間確保您與設計師的排版相匹配。 這將是美好的時光。

前端設計不能容忍隧道視覺

您可能會製作整體設計的一小部分。

我一直在使用的一個示例是對包含自定義復選框的設計進行複選標記，而不顯示它們已選中。 重要的是要記住，您正在製作的零件只是整體設計的一小部分。 使您的檢查與頁面上的複選標記一樣重要，看起來不多也不少。 不要對你的一小部分有狹隘的看法，讓它成為不應該的東西。

事實上，這樣做的一個好方法是截取到目前為止的程序或設計文件的屏幕截圖，並在其中設計，在將要使用的上下文中。 這樣，您就可以真正看到它如何影響頁面上的其他設計元素，以及它是否適合其角色。

關係和層次結構

特別注意設計如何與層次結構一起工作。 標題與正文的距離有多近？ 它們與上面的文字相距多遠？ 設計師似乎是如何指示哪些元素/標題/文本主體相關而哪些不相關？ 他們通常會通過將相關內容組合在一起、使用不同的空白來指示關係、使用相似或對比色來指示相關/不相關內容等來完成這些事情。

您的工作是確保您認識到設計實現關係和層次結構的方式，並確保這些概念反映在最終產品中（包括非專門設計的內容和/或動態內容）。 這是另一個領域（如排版），需要額外的時間來確保你做得很好。

對空白和對齊保持挑剔

這是改進您的設計和/或更好地實施其他設計的一個很好的提示：如果設計似乎使用 20 個單位、40 個單位等的間距，那麼請確保每個間距都是 20 個單位的倍數。

對於沒有審美眼光的人來說，這是一種非常簡單的方法，可以快速做出重大改進。 確保您的元素向下對齊到像素，並且每個元素的每個邊緣周圍的間距盡可能均勻。 在您不能這樣做的地方（例如需要額外空間來指示層次結構的地方），使它們與您在其他地方使用的間距完全相同，例如兩倍於您的默認值以創建一些分隔，三倍以創建更多， 等等。

許多開發人員針對設計文件中的特定內容實現了這一點，但是當涉及到添加/編輯內容或實現動態內容時，間距可能會遍布整個地方，因為他們並不真正了解他們正在實現的內容。

盡力了解設計師如何使用空格並在構建中遵循這些概念。 是的，花時間在這上面。 一旦您認為您的工作已經完成，請返回並測量間距以確保您已盡可能對齊並均勻間隔所有內容，然後嘗試具有大量不同內容的代碼以確保其靈活。

如果你不知道自己在做什麼，那就少做點

我不是那種認為每個項目都應該使用極簡設計的人，但如果你對自己的設計能力沒有信心並且需要添加一些東西，那麼少即是多。

設計師負責主要的東西； 你只需要做一些小的填充物。 如果你不是很擅長設計，那麼最好的辦法是盡可能少地完成該元素的工作。 這樣一來，您就可以在設計師的作品中註入更少的自己的設計，並儘可能少地影響它。

讓設計師的工作佔據中心位置，讓您的工作處於次要地位。

時間使我們所有人都成為傻瓜

我要告訴你一個關於設計師的秘密：90%（或更多）他們實際寫在紙上或 Photoshop 畫布上的東西並不是那麼好。

他們丟棄的東西比你看到的要多得多。 通常需要對設計進行多次修改和擺弄，才能讓他們甚至讓隔壁隔間裡的人看到他們的工作，更不用說真正的客戶了。 您通常不會一步一步從空白畫布變成好的設計； 中間有一堆迭代。 在他們理解這一點並在他們的過程中允許它之前，人們很少會做出好的工作。

那麼如何實現呢？ 一種重要的方法是在版本之間花費時間。 工作直到它看起來像你喜歡的東西，然後把它收起來。 給它幾個小時（讓它過夜更好），然後再次打開並查看。 你會驚訝於它與新鮮的眼睛看起來有多麼不同。 你會很快挑選出需要改進的地方。 他們會很清楚，你會想知道你怎麼可能一開始就錯過了他們。

事實上，我認識的一位更好的設計師將這個想法更進一步。 他將從製作三種不同的設計開始。 然後，他會等待至少 24 小時，再次查看它們，然後將它們全部扔掉，然後從頭開始第四次。 接下來，他會在每次迭代之間留出一天，因為它會越來越好。 只有當他有一天早上打開它，並且非常高興，或者至少，像設計師一樣接近完全高興時，他才會將它發送給客戶。 這是他用於他所做的每一個設計的過程，這對他很有幫助。

我不希望你能走得那麼遠，但它確實突出了沒有“關注設計”的時間是多麼有用。 它是設計過程中不可或缺的一部分，可以實現跨越式的改進。

像素很重要

你應該盡你所能在你完成的程序中匹配原始設計，直到最後一個像素。

在某些方面，你不可能做到完美。 例如，您對字母間距的控制可能不如設計師的精確，CSS 陰影可能與 Photoshop 的陰影不完全匹配，但您仍應嘗試盡可能接近。 對於設計的許多方面，您確實可以獲得像素級的精確度。 這樣做可以對最終結果產生很大影響。 一個像素在這里和那裡似乎並不多，但它加起來並比你想像的更影響整體美感。 所以請密切關注。

有許多 [工具] 可以幫助您將原始設計與最終結果進行比較，或者您可以截取屏幕截圖並將其粘貼到設計文件中，以盡可能接近地比較每個元素。 只需將屏幕截圖放在設計上並使其半透明，以便您可以看到差異。 然後你就知道你需要做多少調整才能讓它正確。

得到反饋

很難獲得“設計之眼”。 自己做就更難了。 您應該尋求他人的意見，以真正了解如何進行改進。

我不是建議你找你的鄰居徵求意見，我的意思是你應該諮詢真正的設計師，讓他們批評你的工作並提供建議。

這樣做需要一些勇氣，但歸根結底，這是你可以做的最有力的事情之一，可以在短期內改進項目，從長遠來看提高你的技能水平。

即使您只需要微調一個簡單的複選標記，也有很多人願意幫助您。 無論是設計師朋友，還是在線論壇，尋找合格的人並獲得他們的反饋。

這可能聽起來很耗時，並且可能會在您和您的設計師之間造成摩擦，但從大的計劃來看，這是值得的。 優秀的前端開發人員依賴於設計師的寶貴意見，即使這不是他們喜歡聽到的。

因此，與您的設計師建立並保持建設性的關係至關重要。 你們都在同一條船上，所以為了獲得最好的結果，你必須在每一步進行協作和溝通。 與您的設計師建立聯繫的投資是非常值得的，因為它將幫助每個人做得更好並按時執行一切。

結論

總而言之，這裡是前端開發人員的設計技巧的簡短列表：

• 在圖形程序中設計。 不要從代碼設計，即使是小東西。
• 匹配設計。 注意原始設計，不要試圖改進它，只需匹配它。
• 排版很大。 你花在確保它正確上的時間應該反映它的重要性。
• 避免隧道視野。 確保您添加的內容盡可能突出。 它們並不因為你設計它們而更重要。
• 關係和層次結構：了解它們在設計中的工作方式，以便您可以正確實施它們。
• 空白和對齊很重要。 使它們精確到像素，並使它們均勻地分佈在您添加的任何內容中。
• 如果您對自己的技能沒有信心，請盡可能減少添加的樣式。
• 在修訂之間花點時間。 稍後再回來以全新的眼光看待您的設計作品。
• 盡可能實現像素完美是很重要的。
• 勇敢起來。 尋找有經驗的設計師來評論你的作品。

不是每個前端開發人員都會成為出色的設計師，但每個前端開發人員至少應該在設計方面勝任。

您需要對設計概念有足夠的了解，才能確定正在發生的事情，並將設計正確地應用於您的最終產品。 有時，如果你有一個徹底的設計師（並且如果你足夠注重細節以真正逐個像素地複制它），你可以避免盲目複製。

然而，為了使大型項目在內容的多種變化中大放異彩，您需要對設計師的想法有所了解。 您不僅需要查看設計的外觀，還需要知道為什麼它看起來會這樣，這樣您就可以注意會影響您的工作的技術和美學限制。

因此，即使作為前端開發人員，您定期自我提升的一部分也應該始終包括學習更多關於設計的知識。