兔課網：網頁設計的9種基本原則，教你如何學會網頁設計！Web設計可能具有欺騙性，因為它涉及到實現一個既實用又令人愉悅的設計，提供信息和建立品牌，在技術上是健全的，而且在視覺上是一致的。
此外，許多網頁設計師(包括我自己)都是自學的，網頁設計仍然很新穎，在許多設計機構中只是一個次要的學科，而且媒介的變化和底層技術一樣頻繁。
所以今天我把我的9個原則良好的網頁設計...這些只是我的觀點，我試著聯繫到更多關於主題的閱讀，這樣你就不會只聽到我的聲音了。顯然，我有很多免責聲明：規則是用來打破的，不同類型的設計工作不同，而且我並不總是遵守我自己的建議。所以請按照他們的意圖讀這些--只是一些我要分享的觀察.
1.優先(引導眼睛)
好的Web設計，甚至可能比其他類型的設計更多的是關於信息的。在你的武器庫中，其中一個最大的工具就是優先...當瀏覽一個好的設計時，用戶應該由設計者帶領在屏幕周圍。我稱之為優先權，它是關於設計中不同部分的視覺重量。
優先級的一個簡單例子是，在大多數站點中，您首先看到的是徽標。這通常是因為它很大，並且在研究中表明它是人們首先看的地方(左上角)。他的是一件好事，因為你可能希望用戶立即知道他們正在查看的網站。
但優先權應該更進一步。您應該引導用戶的眼睛通過一系列的步驟。例如，您可能希望您的用戶從徽標/品牌轉到主定位語句，旁邊是一個有衝擊力的圖像(以賦予站點的個性)，然後是主體文本，導航和側邊欄在序列中佔據次要位置。
你的用戶應該看什麼是由你，網頁設計師，找出。
為了獲得優先權，您可以使用許多工具：
位置-頁面上某物的位置明顯影響用戶看到它的順序。
顏色-使用粗體和微妙的顏色是一種簡單的方式來告訴你的用戶在哪裡看。
反差-與眾不同使事情變得突出，而同樣的情況則使它們處於次要地位。
大小-大優先於小(除非一切都很大，在這種情況下，由於對比，幾乎沒有什麼能脫穎而出)
設計要素-如果有一個巨大的箭頭指向某物，猜猜用戶會看哪裡？
2.間距
當我第一次開始設計的時候，我想把所有可用的空間都填滿。空曠的空間似乎是浪費的。事實上，事實恰恰相反。
間隔使事情更清晰。在Web設計中，您應該考慮空間的三個方面：
行距
在布局文本時，行之間的空格直接影響到它的可讀性。空間太小使你的眼睛很容易從一行延伸到另一行，太大的空間意味著當你完成一行文字並轉到下一行時，你的眼睛可能會迷路。所以你需要找到一個快樂的媒介。您可以用「線高」選擇器控制CSS中的行間距。一般來說，我發現默認值通常是間隔太小。行距在技術上稱為先導(發音為「Ledding」)，它源於印表機在過去的日子裡用來分隔文本行的過程--在線條之間放置鉛條。
填充物
一般來說，文本不應觸及其他要素。例如，圖像不應該觸及文本，邊框或表格也不應該。填充是元素和文本之間的空格。這裡的簡單規則是你應該總在那裡有空間。當然也有例外，特別是如果文本是某種標題/圖形。
空白
首先，空白不需要是白色的。這個術語僅僅是指頁面上的空空間(或者有時稱為負空間)。空白是用來給出平衡，比例和對比的一頁。大量的空白往往會使事物看起來更加優雅和高檔，因此，例如，如果您選擇一個昂貴的建築工地你幾乎總能看到很多地方。如果你想學習如何有效地使用空格，請瀏覽一本雜誌，看看廣告的布局。大型品牌的手錶和汽車等廣告往往會有大量的空白空間作為設計元素。
3.通航
你在網站上最令人沮喪的經歷之一就是找不出去哪裡或你在哪裡。我認為對於大多數Web設計人員來說，導航是一個我們已經掌握的概念，但我仍然找到了一些非常糟糕的例子。要記住導航的兩個方面：
導航-你能去哪裡？
這裡有一些常識規則需要記住。在網站周圍移動的按鈕應該很容易找到--靠近頁面的頂部，並且很容易識別。它們應該看起來像導航按鈕，並且應該有很好的描述。按鈕的文字應該非常清楚它將把你帶到哪裡。除了常識之外，使導航可用也很重要。例如，如果您有一個滾動子菜單，確保一個人能夠到達子菜單項目而不失去滾動是很重要的。同樣，對用戶來說，改變滾動上的顏色或圖像是很好的反饋。
定向-你現在在哪裡？
有很多方法，你可以定位一個用戶，所以沒有藉口不。在小網站中，它可能只是一個大標題的問題，或者是菜單中適當按鈕的「向下」版本。在較大的站點中，您可以使用麵包屑，副標題和網站地圖的真正丟失。
4.建築設計
自從Web設計人員過渡到CSS布局以來，生活變得輕鬆多了，但是即使是現在，當你還在Photoshop的時候，思考如何構建一個站點仍然是很重要的。考慮如下：
真的能做到嗎？
你可能已經為你的身體副本選擇了一個很棒的字體，但是它實際上是一個標準的HTML字體嗎？您可能有一個設計，看起來很漂亮，但是1100 px寬，並將產生一個水平滾動為大多數用戶。重要的是要知道什麼可以做什麼不能做，這就是為什麼我相信所有的網站設計師也應該建立網站，至少有時如此。
當屏幕調整大小時會發生什麼？
你需要重複背景嗎？它們將如何工作？設計是以設計為中心還是以左對齊？
你做了什麼技術上困難的事嗎？
即使使用CSS定位，一些東西，如垂直對齊仍然有點痛苦，有時最好避免。
你的設計中的小改動能大大簡化你如何構建它嗎？
有時，在設計中移動對象會對以後編寫CSS代碼的方式產生很大影響。特別是，當設計元素相互交叉時，它為構建增加了一些複雜性。因此，如果您的設計有三個元素，並且每個元素是完全獨立的，那麼構建起來就非常容易。另一方面，如果這三者相互重疊，它可能仍然很容易，但可能會更複雜一些。您應該在看起來好的和可以簡化您的構建的小更改之間找到一個平衡。
特別是對於大型網站，你能簡化嗎？
有一段時間，我經常為我的網站製作圖像按鈕。例如，如果有一個下載按鈕，我會製作一個下載圖像。在過去的一年左右，我已經切換到使用CSS來做我的按鈕，從來沒有回頭。當然，這意味著我的按鈕並不總是有我想要的靈活性，但是不用製作幾十個按鈕圖像可以節省構建時間。
5.排版
文字是設計中最常見的元素，所以對它進行大量的思考也就不足為奇了。重要的是要考慮這樣的事情：
字體選擇-不同類型的字體對設計有不同的看法。有些看上去很現代，有些看起來很復古。確保你在工作中使用了正確的工具。
字體大小-幾年前，使用非常小的文本是一種時髦的做法。令人高興的是，現在人們已經開始意識到，文本是用來閱讀的，而不僅僅是閱讀。確保你的文本大小是一致的，足夠大，可以閱讀，並按比例，以便標題和副標題突出適當。
間隔-如前所述，行與遠離其他對象之間的間隔是很重要的考慮因素。您還應該考慮字母之間的間隔，儘管在Web上這一點不太重要，因為您沒有太多的控制能力。
線長-沒有硬性的規則，但一般來說，你的文字行不應該太長。他們越長，他們就越難閱讀。小欄目的文字效果要好得多(想想報紙是如何布置文本的)。
顏色-我最壞的習慣之一就是做低對比度的文字。它看上去不錯，但讀得不太好，不幸的是。儘管如此，我似乎對我做過的每一個網站設計都是這樣做的。
分段-在我開始設計之前，我喜歡在每件事上證明這篇文章是正確的。它在我的段落兩邊都有很好的邊緣。不幸的是，正確的文本往往會在單詞之間造成奇怪的空白。當你閱讀的時候，這對你的眼睛不太好，所以，除非你碰巧有一個神奇的文本身體，恰好是完美的空間，否則就堅持左對齊。
6.可用性
網頁設計不僅僅是關於漂亮的圖片。在網站上有這麼多的信息和交互，重要的是你，設計師，提供它的一切。這意味著使您的網站設計可用。
我們已經討論了可用性的一些方面-導航、優先級和文本。以下是三個更重要的問題：
遵守標準
有些事情是人們所期望的，而不給予它們則會引起混亂。例如，如果文本有下劃線，那麼您希望它是一個連結。不這樣做是不好的可用性實踐。當然，你可以打破一些約定，但是你的大多數網站都應該按照人們的期望去做！
想想用戶到底會做什麼
原型是設計中使用的一種常用工具，用於實際「試用」某項設計。這樣做是因為當你實際使用一個設計的時候，你會注意到一些小的東西會產生很大的不同。一段時間前，阿拉有一篇文章叫做當您的意思是撤消時，不要使用警告。，這是一個很好的例子，說明了一個小的界面設計決策，它會讓用戶的生活變得糟糕。
考慮用戶任務
當一個用戶來到你的網站時，他們到底想做什麼？列出人們在一個站點上可能完成的不同類型的任務，他們將如何實現這些任務，以及您希望為他們完成這些任務有多容易。這可能意味著你的主頁上有非常常見的任務(例如「開始購物」、「了解我們做什麼」等等)。或者，這可能意味著確保像搜索框這樣的東西總是容易訪問。最後，您的Web設計是一個供人們使用的工具，而且人們不喜歡使用煩人的工具！
7.對齊
在網頁設計和印刷設計中，保持整齊是同樣重要的。這並不是說一切應該是一條直線，但你應該通過，並試圖保持在一頁上一致的東西。調整使您的設計更有序和可消化，以及使它看起來更拋光。
您也可能希望將您的設計建立在特定的網格上。我必須承認，我並沒有意識到這一點--儘管很明顯，像Psdtuts+這樣的站點確實有一個非常牢固的網格結構。今年，我看到了一些關於網格設計的非常好的文章，包括SmashingMagazine的基於網格的設計方法一份分開的清單網格外思維...事實上，如果您對網格設計感興趣，一定要訪問DesignByGrid.com無所不包的家。
表現主義的網站是清晰的靈魂。一切都很乾淨。
8.清晰(銳度)
保持您的設計簡潔和銳利是非常重要的網頁設計...當涉及到清晰度的時候，這一切都是關於像素的。
在你的CSS中，所有的東西都是像素完美的，所以沒有什麼好擔心的，但在Photoshop中並非如此。要實現敏銳的設計，您必須：
將形狀邊緣保持為像素。如果您要在Photoshop中創建形狀、線條和框，則可能需要手動清理它們。
確保使用適當的反混疊設置創建任何文本。我經常用夏普。
確保這種對比很高，以便明確界定邊界。
過分強調邊界只是稍微誇大了對比。
9.一致性
一致性意味著使一切都匹配。標題大小，字體選擇，顏色，按鈕樣式，間距，設計元素，插圖樣式，照片選擇等等。所有的東西都應該是主題，以使你的設計在頁面之間和頁面上保持一致。
保持你的設計一致是關於專業的。設計中的不一致就像文章中的拼寫錯誤。他們只是降低了對質量的感知。不管你的設計是什麼樣子，保持它的一致性總是會使你的設計提高一個檔次。即使這是一個糟糕的設計，至少讓它成為一個一致的，糟糕的設計。
保持一致性的最簡單的方法是儘早做出決定並堅持下去。然而，有了一個非常大的站點，設計過程中的事情就會發生變化。當我設計FlashDen例如，這個過程花了幾個月的時間，到最後，我對按鈕和圖像的一些想法已經改變了，所以我不得不回去修改以前的頁面，以便與後面的頁面完全匹配。
擁有一組很好的CSS樣式表也可以幫助您進行一致的設計。嘗試定義諸如<h1>和<p>這樣的核心標記，以便使您的預設值正確匹配，並避免始終記住特定的類名。