《致設計師》來自前端工程師

親愛的設計師，

這封信已經醞釀了很多年，並且它的部分內容已經通過口頭或書面形式交付給了各種設計師。

然而，我總猶豫是否發布它，因為它可能會牽連到正和我對接的設計師或是我正為之服務的客戶。所以在此之前，我想強調一下，我並不是針對誰（^_^ 我是說在座的各位），而是泛指這 18 年所有的分歧。

我們已經在一起工作了近二十年了，你發給我的每個 PSD 文件或多或少存在相同的問題。以下，我想闡述下我個人的見解，如有不禮貌的地方，還請原諒。

我不打算和你探討圖形或美學，也不會深入到排版、可讀性或使用留白之類的。

相反，我想談談你設計的文件該如何對接給我。

我想讓你了解，前端是如何像素級還原設計的網頁。我想告訴你如何將你的設計文件用於文檔，以及你如何確定創建的圖像所使用的技術，並做到保證可擴展性和性能的基礎水平。

另外，我想展示什麼樣的設計可以快速、輕鬆的實現，而什麼會產生額外開發成本，會拖延項目進度。

但最重要的是，你現在創造的畫面將被實現成包含互動和響應的產品，上千不同人在上面交流，需要教會他們如何使用，並且是以最輕鬆的方式。

設計文檔

首先，我想提醒你，生成的 PSD 文件不僅是為了輸出圖片，供客戶確認，它們也是開發人員的技術文檔和源材料。因此，請保持你的圖層和組整齊，並且有設計及命名規範。（圖層 520 副本副本 這層不要了）

親愛的設計師，你發給我的每個 PSD 文件或多或少存在相同的問題

注釋你的設計。無論是你單獨新建一個文件，或是把他們注釋在一個獨立的隱藏圖層上。

告訴我你使用了什麼字體，使用了哪種顏色，間距以及上下文。我需要知道。

我還需要知道那些特定功能進行交互後的內容。

其實我想說的是：如果可能的話，請為你設計的產品創建一個簡短的設計說明。

舉個例子，當添加標準文本塊如標題時，在其後添加一個矩形以指示其周圍的間距，這能保證你每次規範統一地使用它們。如果這是太多的工作，至少指示文檔中的哪個示例能說明。

我真不好意思說，我經常發現有的設計師標題是通過眼睛放置的，所以他們只要覺得看起來位置合適，就會隨意放置。當我測量時，每個標題都有它自己的單獨間距（我整個人都斯巴達了）。

內容塊也是如此，如果你有不同內容塊的列表，請確保他們的間距一致。

更多事例我會在「為內容設計」章節中講解，比如請不要假定你的標題只有一行的情況。

我們繼續來聊標題，字體大小 22px 和行高 92px，這些設置應該是對應的，即使在導出的文件中不能明顯看出來。

技術設計

這裡有兩方面要將：什麼能被實現和什麼是適合的方法。

雖然我們已經到達了，在技術上很多都能實現的時代（我仍然可以使用 Canvas 逐像素繪製），但是，很多這些解決方案不是為了產品準備的。

事實上，你發現了一個例子，人們成功地將 WebGL 3D 與 CSS 模糊以及濾鏡同時應用在 Demo 頁面，並不意味著你應該在單頁面的應用程序中使用他們作為全屏視差面板。

如果你真的想嘗試尚存風險的前沿技術，請在提交設計批准之前諮詢你的開發商。否則，很容易造成客戶成本增加。

如果你真的對前沿技術感興趣並想測試他們，請私底下與我聯繫。我也像你一樣喜歡創造這樣的東西。只是不要把這些東西放進一個含預算的產品項目中。

除了注意以上幾點之外，你還要清楚的意識到：

你不是一個圖形藝術家；你是一個設計師。

你不僅要考慮採用什麼設計方法，你還必須考慮它如何運行，它的交互方式是怎樣。

常言道：如果沒有人可以坐在那裡，那麼椅子再華麗又有啥用呢？

你必須在設計中考慮載入速度，執行速度和易用性，使其成為產品而不是圖片。

盡量只使用 HTML 和 CSS 來實現。

避免使用只能在 Photoshop 中展現的花哨功能。不要在沒合併的圖層中使用混合選項！不要使用仿粗體和仿斜體。

除非你打算將控制項轉成圖片，否則不要使用濾鏡，除了最簡單的陰影。

如果你使用了混合顏色填充，不要讓我計算或選擇顏色。請不要使用圖層混合中的疊加模式來偽造透明圖像（提交源文件前請合併）；我需要一個真正透明的圖像。

如果我們使用一個前端框架，如 Bootstrap，很多問題都已經提前解決了，所以你要了解它的工作方式以及如何修改它。不要設計一些用不上的東西。

如果你的設計不符合框架，你的設計是無法被實現的。不然的話，如果一半是框架內的，一半是框架以外的，那麼工作負載是加倍，而不是減半。

最後，在網站上不要使用三種以上的字體或字體變體。如果你需要使用六個不同的粗細，每個都有自己的常規和斜體變體，那不是在為網路設計。

交互設計

下面談的是重點，這封信最初是為這個主題而寫的。你真的需要了解掌握用戶和功能交互的所有方式。

讓我們從最簡單的事情說起：鏈接。

鏈接不只有兩個狀態。

在我收到的導航設計文件中，你總是只提供鏈接和 active 鏈接的設計。

而其他控制項，你通常只提供基本和懸停狀態。

如果你想對注重細節的用戶友好，你應該設計不同的懸停和焦點狀態。同理，導航、鏈接和 active 鏈接也應具有這些狀態。

哦對了，別改控制項各狀態的布局（僅限改變邊框寬度，填充等）。

由於我們要在移動設備上使用它，請確保在每個控制項之間有足夠的間距，並且每個點擊區域都足夠大。我認為每個長寬至少有 42px。

繪製一個隱藏的矩形來表示點擊區域，請確保它們不重疊，以確保用戶交互是明確的。

上述問題如果出現在表單設計里，那麼問題就更大了。

要說最常見的還是單選按鈕和複選框的問題。標準的確實是丑啊！所以，你自己設計了一套，也不知道檢查沒檢查，並且還覺得自己已經完成了。

然而，對於複選框，存在全部狀態的多維表，並且每個都應該明確的展示給用戶。

我們有以下狀態：

• 已選中/未選中
• 懸停/未懸停
• 聚焦/未聚焦
• 啟用/禁用
• 錯誤/非錯誤

每一個狀態又可以與其他狀態關聯。

我們最終有 16 個啟用和 4 個禁用狀態，總共至少有 20 個不同的狀態。

也許其他控制項沒有 選中/未選中 狀態，但可能存在 空/不為空（顯示佔位符文本）的狀態。它們還可能具有更複雜的狀態，像是 錯誤/非錯誤 或像是 一般/警告/錯誤/成功。

除此之外，你應該有必填或可選的提示，以及標籤、輸入提示和錯誤提示的設計。

而且，如果你真的想讓產品變得友好，你需要設置錯誤警告，提示用戶沒有填寫數據，或數據已經存儲過了，或更改後尚未存儲。

如果你想改變單選按鈕的外觀，設計上注意需要明顯區分出已選和未選。

關於設計交互性的一個最後一點：一種交互控制項不要出現多種含義。

內容設計

每個填充了虛構文本的理想化布局的圖片，足以獲得客戶對視覺風格的批准。但是，設計還沒結束。

你設計的內容布局只是個大概的樣子，請別忘了內容是動態的。

你必須檢查是否設計了另外兩種情況：

• 如果有內容太多的話怎麼辦？
• 如果內容太少了（或者內容為空）怎麼辦？

檢查如果標題是極短或超長，會發生什麼。如果關鍵元素出錯沒顯示，內容塊會是什麼樣子？如果沒有圖片怎麼辦？

如果頁面某部分沒有內容，我們會刪除整個版塊（標題，容器和全部）；或者保留該部分，並顯示以下內容：「沒有文章，稍後再查看？」 或更好的「您希望有新內容時收到通知嗎？請註冊我們的消息提醒！「

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

如果你要設計從外部或動態來源載入的 Feed 或內容，請不要忘記包含所有錯誤提示和通知。

避免使用固定寬度的按鈕和固定高度的文本塊。不要認為它總是一行文本！立即檢查一下，用最佳的方式設計多行時的樣式。

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

如果同級標題在多個地方出現，請不要在一個案例中加粗一個字，而在其他地方不加粗。

不要在一個位置手動斷行，而在另一個位置是自動斷行。其實，根本不應該手動斷行！

手動斷行可能會使你的設計更好看，但請記住，內容很可能是通過後台輸入，輸入的人不能直觀看到哪裡應該斷行，直到發布，並且甚至可能後台就沒有手動斷行的功能。

設計應該提供字數限制並確保統一，最終，文本內容是寬度固定並且自動換行的。如果它看起來丑，只能說明設計不行（這鍋甩的漂亮）。

響應式設計

響應式設計越來越多的被使用，尤其是在移動端上。有一些簡單的原則，你必須知道。

首先，移動端和網頁端不是相互獨立的頁面，它們是同一頁面的兩種展現形式。

簡單地說，它就像左對齊的段落文本。句子不會改變單詞或字母的順序，只是因為你把它放在一個較小的容器中。

此外，內容組的布局應是一致的，並確保內容組相互之間的列間距是一致的。

再說一個，對於不同寬度的頁面，都應遵循相同的結構。這意味著，如果兩個組件在網頁端上看起來相同，它們在移動設備上應該也是相同的。

哦對了，如果你想要視差效果，請提供一個比靜態展示更大的圖片來確保能做出移動效果。如果你提供了裁剪後的圖片，它只是在你的設計文件里合適，然而在實際頁面中是無法移動的。

很高興你咬牙讀完了這封信，下一次我們一起工作時你應該試著想起這些提示。 我希望它們對你的工作有幫助。 我想讓你明白我們的關係對我很重要，我不是為了打擊你，而是為了使我們的關係更好。此致

敬禮！

你的前端程序員

作者：VEDRAN ABERLE TOKI?

來源：To Designers With Love (A Letter From a Front-end Developer)

譯者：SketchU&I（很慚愧，發一個微小的廣告）

推薦閱讀：