• 原文地址：A developer's guide to web design for non-designers
• 原文作者：Patrik Krupar
• 譯者：Zheng7426

---

一份開發寫給非設計師的網頁設計指南

在我 14 歲的時候寫了第一個網頁，那是學校的一個作業。 任務很簡單： 建立一個有些文字、圖片和一個表格的簡易網站。對於學校的作業，我一般都是先拋之於腦後，然後在最後一刻想出一些解決的方法。然而那一次，我全情投入。

在首次建立網頁之後，一直以來我都把美化網站的外觀放在第一位。無論你承認與否，這是個看臉的社會。如果你寫的網頁看起來好看，人們往往會更相信你，因為你知道自己在做什麼，事情就是這樣。

在做業餘專案的這些年裡，我把重心逐漸轉移到了提升設計能力上，而不是一味地去完善我的程式設計。你會發現，成為一名編寫演算法的老手也就那麼回事。而當你追尋著用 bootstrap 設計一個賺錢的業餘專案的夢想時，你將不得不幹很多不同的活。成為一名設計師就是其中之一。就像 Cross-fit 的運動員那樣，獨自創業的人們必須面面俱到才能表現出色。（譯者注：Cross-fit 是一套高強度運動方法。）

精湛的設計不一定是在 Dribble 上獲贊最多的，而是你一開始並不會注意到的，是 “老奶奶也可以做出來” 和 “哇，這簡直炫得飛起” 之間的完美平衡。設計可以成為你的競爭優勢，亦能成為棺材板上的釘子。

這無關天賦

我小時候玩 Minecraft 花了很多時間。在遊戲裡，我見過很多玩家們造的美輪美奐的建築物。但是當我做點什麼東西時，它看起來就像一個盒子，醜陋且沒有風格。在 Minecraft 裡你咋能做出漂亮的東西呢，對吧？

之後，我在 Youtube 上找了一個傢伙，然後完美地山寨了他的建築物。幾周之後，我已經發展出自己的風格，可以自立門戶了。突然間，我發現自己的作品看起來不像垃圾了。嘿，我甚至還贏了一場建築競賽。

設計是一項技能，它就像任何別的技能一樣，是可以習得的。

找準你的金剛鑽

在程式設計時，你使用 Notepad 寫出來的應用程式可能和使用一個完備的 IDE 寫出來的一樣好……雖然用 Notepad 寫的時候你可能會苦不堪言，而且很可能會花更多時間。在網頁設計的世界裡，MS Paint 將扮演 Notepad 的角色，就像 Notepad 一樣，很少有人真的用它來設計……希望如此。

最流行的網頁設計工具：

• Sketch，一個只適用於 MacOS 的工具，就像 React 一樣，似乎會出現在每一個招聘要求上。它的價格是 99 美元一年。
• Adobe XD，一款免費的跨平臺工具，相當於前端中 Vue 的角色。它的社群較小，然而非常容易上手。
• Adobe Photoshop，家喻戶曉的針對設計任務的瑞士軍刀。它相當於……你猜到了，jQuery。它的價格是 9.99 美元一個月。

使用 Sublime 或 VS Code 編寫應用程式幾乎沒有分別，就如同你用 React 還是 Vue 來寫前端一樣，說到底這只是個人偏好問題。設計工具也是如此，因為每個工具都有其長處和短處。

我用的是 Adobe XD。我的主要原因在於它是跨平臺的，所以我不會被 Apple 的生態系統綁架。這個軟體背後有 Adobe 支援，所以短時間內沒理由被淘汰掉。對於新手來說最棒的事情莫過於，自 2018 年 5 月開始， Adobe XD 可以被免費使用，除了很少的一些功能不可以免費使用（你也不太可能會遇到那些功能的）。

調整你的思維方式

對我來說，進入網頁設計這一行所面臨的最大挑戰是調整自己的思維方式。我習慣於編寫網站時一貫的設計思維。所有的元素都有先後順序，其流動的方向是從左到右，以及從上到下。事實上，這樣的方式會讓你成為一個更糟糕的設計師。

設計工具都是混亂的，因為它們迫使你在每一個元素都被絕對定位的條件下進行設計。你需要接受這個思維方式上的變化。這將給你帶來快速調整事物的自由，並且讓試驗變得更加簡單。這一點至關重要，因為設計是一個持續的過程。在得到一個很棒的結果之前往往你需要做很多的改動。

學習一些工具

寫程式碼時，你會用到像 div、span 以及 input 這些 HTML 元素，並且讓瀏覽器渲染，然後才能看見它們。而對於設計工具來說，你完全可以跳過中間的步驟，而直接使用像形狀或文字這樣的視覺化元素。

我選出了 4 種最常用的設計工具，方便你花更少的時間學習、花更多的時間去設計。這樣一來，你可以儘快地開始練習。下面，我來給你展示這些工具的工作原理及使用方法。

矩形工具

矩形是最普遍的形狀。你會發覺自己總是在使用它們。把矩形當成是一個 div。它簡直是萬精油，從建立文字到建立容器都很有用。

文字工具（標籤）

文字工具，名副其實，是讓你建立文字的。然而事情並沒有這麼簡單，因為文字工具有兩種狀態：一種用於單行文字，另一種用於多個段落。幸運的是，學會正確使用它們是非常容易的。

第一種狀態是單行文字容器，可根據文字大小調整自身的範圍大小。它就相當於 <span> ，但除非你切換到下一行，它是不會自己換行的。這種狀態的好處就在於，文字框的大小會根據行高和字型大小而自行進行調整。

要建立單行文字容器，只需單擊選中的文字工具並輸入文字即可。經驗表明，這種狀態適用於所有不需要具體寬度而且只佔一行的文字。比方說單行標題和標籤。

文字工具（段落）

第二種狀態是有具體大小的文字容器，它的行為類似於有著具體寬度的 <p> 或是在網格系統中一列之間的 <p> 標籤。這種狀態的好處在於你可以控制文字框的大小。要建立段落，你只需點選選中的文字工具並長按來進行選擇。經驗表明，這種狀態適用於佔了不知一行的段落和標題。

選取工具

這個工具的用途是移動、調整大小以及複製。那些粉色線條顯示了與周圍元素的距離。藍色線條可以幫助你無誤地對齊元素。

直線工具

有的時候一條線可以有效地將設計的一些部分分隔開來。這就是直線工具存在的原因。從技術上來說，你也完全可以使用矩形工具，嘿嘿，這就好比說 div 可以用於任何事情。

設計的小帖士和技巧

佈局

在網頁開發中，佈局通常被描述為標題、選單、內容和頁尾。其實這些只是一部分而已，佈局可不止如此。它實際上是所有元素呈現出來的方式。

舉個例子，當我為 Sidemail 設計專案資訊時，我在卡片的內部均勻地分佈了元素，使其感覺更完整，看起來也更加乾淨。

色彩

為了幫助你為下一個專案找到完美的顏色，你可以考慮一下色彩心理學(colorpsychology.org)。Paleton 是一個基於你的原色來找到完美顏色組合的實用工具。

使用原色及文字顏色的色調來建立視覺層次。使用彩色背景時，你可以針對文字嘗試更深或更淺的色調。

文字設計

字型很大程度上影響了你專案的品牌形象，所以得機智地進行抉擇。高階字型往往比谷歌字型更好看，但你剛涉足這個領域的話，先別急著買。就算是在谷歌字型裡，也有些隱藏的好東西呢。

我常常用來在視覺上分解文字的一個技巧是把標籤給大寫化，並且加上更多的字母間距。大寫字母構成的文字因為對稱的緣故，從視覺角度上看起來更棒，但是不要過度地使用它，否則會令人不容易閱讀。

設計一個主頁（或登入頁面）

我總是試圖去避免一個誘惑，那就是設計當下流行的元素，並且把我想傳達的資訊滿滿地塞進去。相反地，我想出一些優勢（而非特點），把它們放進故事裡，然後通過視覺上有吸引力的頁面來講述故事。

在我構建了想要傳達的資訊之後，通常會去尋找一些靈感的啟迪。有一個很好的資源是 land-book.com，一個人們可以投票並且滿是漂亮的登入頁面的網站。關於設計靈感的另一個很讚的網頁是 interfaces.pro，你可以按類別過濾找到相關的頁面，比如說價格、404 或者是 “關於我們” 這些類別。我一般就是各種瀏覽，直到找到足夠多的讓我覺得符合我想要的風格的網站。

真正困難的部分是將它們融合在一起。不幸的是，沒有捷徑可言。你必須得不斷地嘗試，直到你得到自己喜歡的結果。

你可能會遇到這樣的情況 —— 你突然覺得一週前的設計看起來不夠好，甚至有些難看，可一週以前自己還很滿意。這樣的情況其實相當正常，而且還是件好事呢。這主要是因為你成長、學習，並且變得更厲害了。舊日的挑戰放在今日已經不再那麼有挑戰性了。要記住這一點，這樣你才不會在激烈的競爭中無能為力。

小帖士：

• 獨到的字型能有奇效
• 圖形非常重要，去嘗試使用一些插圖或影象
• 通過運用多種色調來突出視覺上的重點。單純的文字和三原色是不夠的。
• 不要使用太寬的容器 —— 大概 1100 px 就夠寬了
• 善用留白
• 要談論優勢，而不是特點
• 如果遇到瓶頸，去觀察不同的事物尋找靈感

設計一個網頁應用（或是一個控制檯）

就像設計登入頁面一樣，不要悶頭開始設計的階段。這一次，你不是去講一個故事。恰恰相反，易用性才是王道。拿好你的筆和紙，開始計劃一下你的 app 有怎樣的功能、它將依賴於什麼，以及如何容易地在頁面中引導使用者。

如果有必要的話，只做一些草圖或者線框。你可以選一個競爭對手，針對其設計做一次適當的勘查，藉此看看自己缺乏什麼，哪些地方可以做得更好，甚至可能變成競爭優勢。有的時候，最好在做好計劃之後休息一下，然後再開始設計。

在不針對具體的專案時，我可以給出的最好建議就是選擇一個合適的頁面佈局。通常來說，所有網頁應用根據其目的會用到這兩種頁面佈局：固定寬度的容器，抑或是填滿整個螢幕的流動容器。

固定容器

我更喜歡固定容器，因為固定容器避免了不必要的眼球運動，所以在使用時你更容易專注於一塊緊密的區域。然而，由於寬度較小，使用固定容器的 app 會更難設計。

例子: Twitter, Buffer, DigitalOcean, Netlify, GitHub

流動容器

對於聊天應用、電子表格應用及螢幕上必須有很多內容的應用來說，流動容器是不二選擇。但請注意，螢幕上的海量資料可能會使使用者感到眼花繚亂。

例子: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

選對容器相當重要，因為你整個頁面的佈局將會取決於你選擇的容器，而且以後再更改容器的型別會比較累人。每一個專案都是獨一無二的，當然也需要獨一無二的解決方案。所以呢，不要害怕去嘗試！

小帖士：

• 把事物簡單化
• 使用易讀字型
• 顯示海量資料時，用到視覺層次
• 利用好競爭對手糟糕的設計選擇

結語

請記住，設計可以成為你的競爭優勢 —— 所以使用它並製作出美妙的事物吧。

你可以獲取一份我自己最新專案的登入頁面的 Adobe XD 模版 來開始你的設計之旅。只需 訂閱我全新的郵箱列表，這份模版就會出現在你的郵箱裡了。

不但如此，你將會在第一時間收到我下一篇文章的通知，我將在 Sidemail 上分享 69 天以來的進展 —— 關乎我正在研究的 SaaS 專案。它將囊括訂閱者計數、網站訪問量、花銷和設計草稿等內容。不言而喻，我保證你不會收到來自我的垃圾郵件，我根本沒時間整那破玩意兒。

我的推特私訊是開著的，所以說如果你在設計過程中遇到困難，或對這篇文章有什麼別的疑問，完全可以私訊我。

---

*譯者注：本文徵得原文作者同意後翻譯，如需轉載請註明原文作者的名字及原文連結，請尊重原作者的智慧財產權。如有翻譯上的不妥之處，還望指出，以便更改，謝謝。