致有愛的設計師（前端開發者的一封信）

親愛的設計師，

這封信已經醞釀多年。 很長一段時間以來，它的部分內容已經通過演講和書面形式傳達給了不同的設計師。

然而，我一直害怕發布它，因為擔心它會牽連到我正在與之合作的當前設計師或客戶。 所以在我繼續之前，我想強調這不是一個具體的不滿，而是一個 18 年分歧的逐項清單。

我們已經合作了將近二十年，您發送給我的每個 PSD 文件（或多或少）都存在相同的問題。 那麼請原諒我試圖教你工作的不雅行為。

我不打算教你圖形或美學。 我不會深入研究排版、易讀性或空白的使用。

相反，我想解釋一下你的勞動成果如何影響我的。

我想提醒您將設計複製為像素完美的網頁需要什麼。 我想告訴您您的設計文件將如何用於文檔，以及您創建的圖像如何確定所使用的技術——直至可擴展性和性能的最基本級別。

此外，我想演示什麼可以快速輕鬆地完成，什麼會產生開銷，從而拖累整個製作過程。

最重要的是，我想提醒你，你現在正在創作的圖片將變成一個活生生的東西，它可以互動和回應，可以與成千上萬不同的人交流，需要教他們，從他們身上學習他們以最輕鬆的方式。 既為它，也為他們。

文檔設計

首先，我想提醒您的是，您製作的 PSD 文件不僅是供客戶批准的圖像來源，它們也是供開發人員使用的技術文檔和源材料。 因此，請保持您的圖層和組整潔、有條理並命名。

註釋您的設計。 使用您使用的約定創建一個單獨的文件，或者在單獨的隱藏層中記錄它們。

告訴我你用過哪些字體。 讓我知道要使用哪些顏色、間距和上下文。 我需要知道。

如果沒有針對特定功能進行設計，我還需要知道如何推斷。

我想我想說的是：如果可能的話，為你正在設計的產品創建一個簡短的風格指南。

為了我們雙方的利益，在添加標准文本塊（例如標題）時，在它們後面添加一個矩形以指示它們周圍的間距。 這應該使您每次都能始終如一地放置它們。 如果這工作量太大，至少要指出文檔中的哪個示例是佳能。

我無法告訴你我發現標題是用肉眼放置的頻率，因此它們在視覺上適合放置它們的單個實例，但在測量時，會發現每個標題都有自己的間距。

內容塊也是如此。 如果您有不同內容塊的列表，請始終將它們隔開。

我將在內容設計部分告訴你更多信息，但請不要假設你的標題總是在一行中，並在文件中使用該信息。

我不斷遇到這些字體大小為 22px 且行高為 92px 的標題（顯然是從主頁標題複製和粘貼的）。 您選擇的設置是相關的，即使它們不會在視覺上更改導出的文件。

為技術而設計

這有兩個方面：可以做什麼以及適合媒體的內容。

雖然我們正在快速達到網站開發在技術上一切皆有可能的地步（如果沒有別的，我仍然可以使用畫布逐個像素地繪製出來），但其中許多解決方案還沒有準備好生產。

您找到了一個示例，其中有人成功地將 WebGL 3D 與 CSS 模糊以及濾鏡蒙版組合用於演示頁面，但這並不意味著您可以將其用作單頁面應用程序中的全窗口視差面板。

如果您真的想走在最前沿，請在提交設計以供批准之前諮詢您的開發人員。 否則，很難讓客戶接受更少。

但是，如果您真的想測試邊緣，並且想嘗試一下，請私下與我聯繫。 我和你一樣喜歡創造這樣的東西。 只是不要將這些東西放入預算的生產項目中。

除了這些事情——除了測試可以做的事情的極限之外，試著對應該做的事情保持敏感和理智。

您不是圖形藝術家； 你不止於此，你是一名設計師。

您不僅要設計它以某種方式看起來，還必須將其設計為以某種方式運行，以某種方式進行交流和行為。

隨處可見設計師熟悉的陳詞濫調：如果沒有人可以坐在華麗的椅子上，這有什麼用？

您必須在設計中結合加載速度、執行速度和易用性，才能使其成為設計而不是圖片。

盡量只使用 HTML 和 CSS 來實現。 避免使用 Photoshop 中提供的漂亮功能。 不要使用混合！ 不要使用仿粗體和仿斜體。

除非您打算將元素作為圖像，否則根本不要使用過濾器——除了最簡單的陰影。

不要讓我計算或選擇顏色，因為您使用了混合顏色填充。 請不要使用疊加混合來偽造透明圖像； 我實際上需要現場透明圖像。

如果我們使用前端框架，例如 Bootstrap，這些問題中的許多問題已經解決了，所以了解它是如何完成的以及如何修改它。 不要隨便設計一些不相關的東西。

如果您的設計與框架的功能不符，那麼實施它就不是實施設計。 相反，我們最終選擇性地覆蓋了框架，因此它不會干擾我們的設計，然後從頭開始實現它。 工作量增加了一倍而不是減半。

最後，不要在網站上使用超過三種字體或字體變體。 如果您需要六種不同的權重，每一種都有自己的常規和斜體變體，那麼您就不再是為 Web 設計了。

交互設計

這是一個巨大的。 而這封信最初是專門為這個話題而寫的。 您確實必須了解和理解用戶和功能可以交互的所有方式。

讓我們從最簡單的事情開始：鏈接。

鏈接不只有兩種狀態。

在我收到的導航中，您始終提供鏈接和活動鏈接（當前頁面）的設計。

在其他情況下，您通常提供基本和懸停狀態。

如果你想對用戶友好一點，你應該對基本、懸停和焦點狀態有不同的設計（訪問和活動對於 UX 來說也是不錯的）。 而對於導航，一個鏈接和一個活動鏈接都具有上述所有狀態。

哦，你不敢改變狀態之間的鏈接佈局（改變邊框寬度、填充等）。

同樣，如果它看起來不像一個按鈕，它就沒有背景。 時期。 填充內聯文本元素是一團糟，未填充的文本背景永遠不會這樣做。

由於我們將在移動設備上使用它，請確保單獨的交互元素之間有足夠的空白，並且每個 hitbox 足夠大。 我認為每個軸上至少 42px 是常態。

繪製一個不可見的矩形，或者一個顯示命中框的隱藏層； 確保它們不重疊並且用戶交互是明確的。

表單元素更糟糕。

我看到的最常見的情況是單選按鈕和復選框。 標準的太醜了！ 所以，你設計你自己的，給我一個檢查和未檢查的狀態，然後認為你已經完成了。

但是，複選框有一個完整的多維狀態表，每個狀態都應該直觀地顯示給用戶。

我們有以下狀態：

• 選中或未選中
• 懸停與否
• 專注與否
• 啟用或禁用
• 錯誤與否

其中每一個都可以與其他組合。

禁用會阻止某些組合（禁用時懸停和焦點通常無關緊要）但不是全部（checked-disabled-error 是複選框的完全有效且信息豐富的狀態）。 所以我們最終得到了 16 個啟用狀態和 4 個禁用狀態，總共至少有 20 個不同的狀態。 例如，在該設置中，您通常給我的狀態是checked-not-not-enabled-not 和 unchecked-not-not-enabled-not。

其他表單元素可能沒有選中-未選中狀態，但可以為空或非空（顯示佔位符文本）。 它們還可以具有更複雜的信息狀態，因此錯誤與否的情況可以像中性警告錯誤成功一樣複雜。

然後，最重要的是，您應該有強制性或可選的指示符，以及標籤、輸入幫助和錯誤文本的明確定義的佈局和設計。

而且，如果你真的想對用戶友好，你需要 pristine-set-dirty states，表示用戶從未提供過數據，或者數據已經存儲，或者已經更改但尚未存儲。

我要說的是：為交互性設計是困難的。 如果您想更改單選按鈕的外觀，請不要在兩種狀態下輕鬆地做到這一點。

關於交互性設計的最後一點：確定交互的樣子。 意思是，決定你要為交互元素使用什麼約定，不要在其他任何東西上使用它們。

不，您不能使用您的主要品牌顏色來指示鏈接，特別是如果您將使用相同的解決方案來突出重要內容！

內容設計

每個充滿lipsum內容的元素的理想佈局足以向客戶展示圖片以獲得視覺風格的認可。 但內容設計既不是從那裡開始也不是在那裡結束。

一旦您大致了解要對內容佈局做什麼，請記住您正在使用動態內容。 對於每條內容，您必須檢查兩種情況：

• 如果它太多了怎麼辦？
• 如果它太少（或完全丟失）怎麼辦？

檢查如果標題短得離譜或長得離譜會發生什麼。 如果缺少關鍵元素，內容塊應該是什麼樣子？ 如果沒有圖片怎麼辦？

如果頁面部分沒有內容，我們是刪除整個部分 - 標題、容器和所有部分 - 還是保留該部分，並顯示類似以下內容的內容：“還沒有文章，稍後再回來查看？” 更好的是：“您希望在此內容到達時收到通知嗎？ 註冊我們的通訊！”

做出決定！ 然後設計那些東西！

如果您正在設計從外部或動態源加載的提要或內容，請不要忘記包含所有錯誤和通知。 事實上，設計頁面通知元內容以顯示它在全局範圍內的樣子，然後堅持這些設計約定以在出現問題時通知用戶。

避免使用固定寬度的按鈕和固定高度的文本塊。 而且，如果我之前沒有說過，如果你認為它總是只有一行文字，那你就錯了！ 現在，去檢查使它成為多行的最佳方法。

確保相同的內容具有相同的結構。

如果在多個地方都可以看到相同的標題，請不要在一種情況下加粗一個詞，而在其他地方加粗另一個詞！

事實上，盡量避免在標題中完全格式化結構。 同樣，不要在一個地方手動打斷文本，而是在另一個地方以不同的方式打斷它。 事實上，不要手動中斷文本！

這些東西可能會使您的設計更好，但請記住，內容很可能是通過 CMS 輸入的，輸入內容的人可能在發布之前看不到它的樣子，或者甚至可能沒有手動破解的工具，或者格式化文本。

設計具有與最終內容相同的限制——固定寬度的文本容器和自動換行。 如果這樣看起來很難看，那麼設計就不好。

響應式設計

最近這方面取得了很大進展。 至少在實際設計移動設備的情況下。 越來越多，我們讓引導程序弄清楚，並在裂縫上貼創可貼。

無論如何，您必須了解一些簡單的原則。

首先，移動版和桌面版不是單獨的頁面。 我知道你知道這一點。 它們只是同一頁面的重排。

簡而言之，它與使用左對齊文本相同。 句子不會因為你把它放在一個較小的容器中而改變單詞或字母的順序。

此外，內容組應該在所有佈局之間共享。 添加列時，請確保分欄符是一致的。

此外，對於不同版本的頁面，您的約定應該遵循相同的結構。 這意味著，如果兩個元素在桌面上看起來相同，那麼它們在移動設備上也應該相同。

哦，如果你想要視差，請提供一張大到可以移動的圖片。 如果您適合，或裁剪圖片使其在您向客戶展示的文件上看起來正確，那麼我沒有什麼可移動的。

設計異常

當然，例外總是可能的。 此外，它們對於產品看起來有吸引力和有效是必要的。 但是，不要在第一次逐個傳遞時添加它們。

如果您發現自己一遍又一遍地解決相同的設計問題，這是行不通的，特別是如果您在每個實例中都尋求不同的解決方案。

一旦你完成了上述所有工作，你應該得到一個高效、穩定和一致（如果有點乏味）的設計。 現在是為事情增添趣味的時候了。 將整個頁面視為一個整體，與客戶交談以找出最賺錢的項目——這些項目將為他們帶來最大的收益。

我們已經合作多年，我們的客戶一直對最終結果感到滿意。

當然，如果你錯過了其中的幾點，我會加入，當使用複雜的設計是合理的時，如果需要，我會用 JavaScript 編寫渲染邏輯。

如有必要，我會介入並向客戶證明額外工作的合理性。 哎呀，多年來我一直在設計表單和交互性，所以這不是問題。

我只是希望，讀完這篇文章後，下次我們一起工作時，你會記住其中的一些提示。 我希望他們會在您不知道該怎麼做時為您的工作提供信息並提供指導。 我想讓你明白我們的關係對我很重要，我寫這篇文章不是為了傷害你，而是為了讓我們的關係更好。

有愛，

您的前端開發人員