1.優(yōu)先(引導(dǎo)眼睛)
  好的Web設(shè)計(jì)，甚至可能比其他類型的設(shè)計(jì)更多的是關(guān)于信息的。在你的武器庫中，其中一個(gè)的工具就是優(yōu)先...當(dāng)瀏覽一個(gè)好的設(shè)計(jì)時(shí)，用戶應(yīng)該由設(shè)計(jì)者帶領(lǐng)在屏幕周圍。我稱之為優(yōu)先權(quán)，它是關(guān)于設(shè)計(jì)中不同部分的視覺重量。
  優(yōu)先級(jí)的一個(gè)簡(jiǎn)單例子是，在大多數(shù)站點(diǎn)中，您首先看到的是徽標(biāo)。這通常是因?yàn)樗艽?，并且在研究中表明它是人們首先看的地?左上角)。他的是一件好事，因?yàn)槟憧赡芟Ｍ脩袅⒓粗浪麄冋诓榭吹木W(wǎng)站。
  但優(yōu)先權(quán)應(yīng)該更進(jìn)一步。您應(yīng)該引導(dǎo)用戶的眼睛通過一系列的步驟。例如，您可能希望您的用戶從徽標(biāo)/品牌轉(zhuǎn)到主定位語句，旁邊是一個(gè)有沖擊力的圖像(以賦予站點(diǎn)的個(gè)性)，然后是主體文本，導(dǎo)航和側(cè)邊欄在序列中占據(jù)次要位置。
  你的用戶應(yīng)該看什么是由你，網(wǎng)頁設(shè)計(jì)師，找出。
  為了獲得優(yōu)先權(quán)，您可以使用許多工具：
  位置-頁面上某物的位置明顯影響用戶看到它的順序。
  顏色-使用粗體和微妙的顏色是一種簡(jiǎn)單的方式來告訴你的用戶在哪里看。
  反差-與眾不同使事情變得突出，而同樣的情況則使它們處于次要地位。
  大小-大優(yōu)先于小(除非一切都很大，在這種情況下，由于對(duì)比，幾乎沒有什么能脫穎而出)
  設(shè)計(jì)要素-如果有一個(gè)巨大的箭頭指向某物，猜猜用戶會(huì)看哪里？
  順便在此給大家分享一個(gè)學(xué)平面設(shè)計(jì)的網(wǎng)站“兔課網(wǎng)”，大家可以百度搜一下：兔課網(wǎng)，兔課網(wǎng)是一個(gè)專門學(xué)設(shè)計(jì)的網(wǎng)站，上面有很多的設(shè)計(jì)教程，還有一個(gè)魔鬼特訓(xùn)班，魔鬼特訓(xùn)班大家可以挑戰(zhàn)一下，很多人的學(xué)習(xí)效果都非常不錯(cuò)！
  2.間距
  當(dāng)我次開始設(shè)計(jì)的時(shí)候，我想把所有可用的空間都填滿。空曠的空間似乎是浪費(fèi)的。事實(shí)上，事實(shí)恰恰相反。
  間隔使事情更清晰。在Web設(shè)計(jì)中，您應(yīng)該考慮空間的三個(gè)方面：
  行距
  在布局文本時(shí)，行之間的空格直接影響到它的可讀性。空間太小使你的眼睛很容易從一行延伸到另一行，太大的空間意味著當(dāng)你完成一行文字并轉(zhuǎn)到下一行時(shí)，你的眼睛可能會(huì)迷路。所以你需要找到一個(gè)快樂的媒介。您可以用“線高”選擇器控制CSS中的行間距。一般來說，我發(fā)現(xiàn)默認(rèn)值通常是間隔太小。行距在技術(shù)上稱為先導(dǎo)(發(fā)音為“Ledding”)，它源于打印機(jī)在過去的日子里用來分隔文本行的過程--在線條之間放置鉛條。
  填充物
  一般來說，文本不應(yīng)觸及其他要素。例如，圖像不應(yīng)該觸及文本，邊框或表格也不應(yīng)該。填充是元素和文本之間的空格。這里的簡(jiǎn)單規(guī)則是你應(yīng)該總在那里有空間。當(dāng)然也有例外，特別是如果文本是某種標(biāo)題/圖形。
  空白
  首先，空白不需要是白色的。這個(gè)術(shù)語僅僅是指頁面上的空空間(或者有時(shí)稱為負(fù)空間)?？瞻资怯脕斫o出平衡，比例和對(duì)比的一頁。大量的空白往往會(huì)使事物看起來更加優(yōu)雅和高檔，因此，例如，如果您選擇一個(gè)昂貴的建筑工地你幾乎總能看到很多地方。如果你想學(xué)習(xí)如何有效地使用空格，請(qǐng)瀏覽一本雜志，看看廣告的布局。大型品牌的手表和汽車等廣告往往會(huì)有大量的空白空間作為設(shè)計(jì)元素。
  3.通航
  你在網(wǎng)站上最令人沮喪的經(jīng)歷之一就是找不出去哪里或你在哪里。我認(rèn)為對(duì)于大多數(shù)Web設(shè)計(jì)人員來說，導(dǎo)航是一個(gè)我們已經(jīng)掌握的概念，但我仍然找到了一些非常糟糕的例子。要記住導(dǎo)航的兩個(gè)方面：
  導(dǎo)航-你能去哪里？
  這里有一些常識(shí)規(guī)則需要記住。在網(wǎng)站周圍移動(dòng)的按鈕應(yīng)該很容易找到--靠近頁面的頂部，并且很容易識(shí)別。它們應(yīng)該看起來像導(dǎo)航按鈕，并且應(yīng)該有很好的描述。按鈕的文字應(yīng)該非常清楚它將把你帶到哪里。除了常識(shí)之外，使導(dǎo)航可用也很重要。例如，如果您有一個(gè)滾動(dòng)子菜單，確保一個(gè)人能夠到達(dá)子菜單項(xiàng)目而不失去滾動(dòng)是很重要的。同樣，對(duì)用戶來說，改變滾動(dòng)上的顏色或圖像是很好的反饋。
  定向-你現(xiàn)在在哪里？
  有很多方法，你可以定位一個(gè)用戶，所以沒有借口不。在小網(wǎng)站中，它可能只是一個(gè)大標(biāo)題的問題，或者是菜單中適當(dāng)按鈕的“向下”版本。在較大的站點(diǎn)中，您可以使用面包屑，副標(biāo)題和網(wǎng)站地圖的真正丟失。
  4.建筑設(shè)計(jì)
  自從Web設(shè)計(jì)人員過渡到CSS布局以來，生活變得輕松多了，但是即使是現(xiàn)在，當(dāng)你還在Photoshop的時(shí)候，思考如何構(gòu)建一個(gè)站點(diǎn)仍然是很重要的?？紤]如下：
  真的能做到嗎？
  你可能已經(jīng)為你的身體副本選擇了一個(gè)很棒的字體，但是它實(shí)際上是一個(gè)標(biāo)準(zhǔn)的HTML字體嗎？您可能有一個(gè)設(shè)計(jì)，看起來很漂亮，但是1100 px寬，并將產(chǎn)生一個(gè)水平滾動(dòng)為大多數(shù)用戶。重要的是要知道什么可以做什么不能做，這就是為什么我相信所有的網(wǎng)站設(shè)計(jì)師也應(yīng)該建立網(wǎng)站，至少有時(shí)如此。
  當(dāng)屏幕調(diào)整大小時(shí)會(huì)發(fā)生什么？
  你需要重復(fù)背景嗎？它們將如何？設(shè)計(jì)是以設(shè)計(jì)為中心還是以左對(duì)齊？
  你做了什么技術(shù)上困難的事嗎？
  即使使用CSS定位，一些東西，如垂直對(duì)齊仍然有點(diǎn)痛苦，有時(shí)避免。
  你的設(shè)計(jì)中的小改動(dòng)能大大簡(jiǎn)化你如何構(gòu)建它嗎？
  有時(shí)，在設(shè)計(jì)中移動(dòng)對(duì)象會(huì)對(duì)以后編寫CSS代碼的方式產(chǎn)生很大影響。特別是，當(dāng)設(shè)計(jì)元素相互交叉時(shí)，它為構(gòu)建增加了一些復(fù)雜性。因此，如果您的設(shè)計(jì)有三個(gè)元素，并且每個(gè)元素是完全獨(dú)立的，那么構(gòu)建起來就非常容易。另一方面，如果這三者相互重疊，它可能仍然很容易，但可能會(huì)更復(fù)雜一些。您應(yīng)該在看起來好的和可以簡(jiǎn)化您的構(gòu)建的小更改之間找到一個(gè)平衡。
  特別是對(duì)于大型網(wǎng)站，你能簡(jiǎn)化嗎？
  有一段時(shí)間，我經(jīng)常為我的網(wǎng)站制作圖像按鈕。例如，如果有一個(gè)下載按鈕，我會(huì)制作一個(gè)下載圖像。在過去的一年左右，我已經(jīng)切換到使用CSS來做我的按鈕，從來沒有回頭。當(dāng)然，這意味著我的按鈕并不總是有我想要的靈活性，但是不用制作幾十個(gè)按鈕圖像可以節(jié)省構(gòu)建時(shí)間。
  5.排版
  文字是設(shè)計(jì)中最常見的元素，所以對(duì)它進(jìn)行大量的思考也就不足為奇了。重要的是要考慮這樣的事情：
  字體選擇-不同類型的字體對(duì)設(shè)計(jì)有不同的看法。有些看上去很現(xiàn)代，有些看起來很復(fù)古。確保你在中使用了正確的工具。
  字體大小-幾年前，使用非常小的文本是一種時(shí)髦的做法。令人高興的是，現(xiàn)在人們已經(jīng)開始意識(shí)到，文本是用來閱讀的，而不僅僅是閱讀。確保你的文本大小是一致的，足夠大，可以閱讀，并按比例，以便標(biāo)題和副標(biāo)題突出適當(dāng)。
  間隔-如前所述，行與遠(yuǎn)離其他對(duì)象之間的間隔是很重要的考慮因素。您還應(yīng)該考慮字母之間的間隔，盡管在Web上這一點(diǎn)不太重要，因?yàn)槟鷽]有太多的控制能力。
  線長(zhǎng)-沒有硬性的規(guī)則，但一般來說，你的文字行不應(yīng)該太長(zhǎng)。他們?cè)介L(zhǎng)，他們就越難閱讀。小欄目的文字效果要好得多(想想報(bào)紙是如何布置文本的)。
  顏色-我最壞的習(xí)慣之一就是做低對(duì)比度的文字。它看上去不錯(cuò)，但讀得不太好，不幸的是。盡管如此，我似乎對(duì)我做過的每一個(gè)網(wǎng)站設(shè)計(jì)都是這樣做的。
  分段-在我開始設(shè)計(jì)之前，我喜歡在每件事上證明這篇文章是正確的。它在我的段落兩邊都有很好的邊緣。不幸的是，正確的文本往往會(huì)在單詞之間造成奇怪的空白。當(dāng)你閱讀的時(shí)候，這對(duì)你的眼睛不太好，所以，除非你碰巧有一個(gè)神奇的文本身體，恰好是完美的空間，否則就堅(jiān)持左對(duì)齊。
  6.可用性
  網(wǎng)頁設(shè)計(jì)不僅僅是關(guān)于漂亮的圖片。在網(wǎng)站上有這么多的信息和交互，重要的是你，設(shè)計(jì)師，提供它的一切。這意味著使您的網(wǎng)站設(shè)計(jì)可用。
  我們已經(jīng)討論了可用性的一些方面-導(dǎo)航、優(yōu)先級(jí)和文本。以下是三個(gè)更重要的問題：
  遵守標(biāo)準(zhǔn)
  有些事情是人們所期望的，而不給予它們則會(huì)引起混亂。例如，如果文本有下劃線，那么您希望它是一個(gè)鏈接。不這樣做是不好的可用性實(shí)踐。當(dāng)然，你可以打破一些約定，但是你的大多數(shù)網(wǎng)站都應(yīng)該按照人們的期望去做！
  想想用戶到底會(huì)做什么
  原型是設(shè)計(jì)中使用的一種常用工具，用于實(shí)際“試用”某項(xiàng)設(shè)計(jì)。這樣做是因?yàn)楫?dāng)你實(shí)際使用一個(gè)設(shè)計(jì)的時(shí)候，你會(huì)注意到一些小的東西會(huì)產(chǎn)生很大的不同。一段時(shí)間前，阿拉有一篇文章叫做當(dāng)您的意思是撤消時(shí)，不要使用警告。，這是一個(gè)很好的例子，說明了一個(gè)小的界面設(shè)計(jì)決策，它會(huì)讓用戶的生活變得糟糕。
  考慮用戶任務(wù)
  當(dāng)一個(gè)用戶來到你的網(wǎng)站時(shí)，他們到底想做什么？列出人們?cè)谝粋€(gè)站點(diǎn)上可能完成的不同類型的任務(wù)，他們將如何實(shí)現(xiàn)這些任務(wù)，以及您希望為他們完成這些任務(wù)有多容易。這可能意味著你的主頁上有非常常見的任務(wù)(例如“開始購(gòu)物”、“了解我們做什么”等等)?；蛘撸@可能意味著確保像搜索框這樣的東西總是容易訪問。最后，您的Web設(shè)計(jì)是一個(gè)供人們使用的工具，而且人們不喜歡使用煩人的工具！
  7.對(duì)齊
  在網(wǎng)頁設(shè)計(jì)和印刷設(shè)計(jì)中，保持整齊是同樣重要的。這并不是說一切應(yīng)該是一條直線，但你應(yīng)該通過，并試圖保持在一頁上一致的東西。調(diào)整使您的設(shè)計(jì)更有序和可消化，以及使它看起來更拋光。
  您也可能希望將您的設(shè)計(jì)建立在特定的網(wǎng)格上。我必須承認(rèn)，我并沒有意識(shí)到這一點(diǎn)--盡管很明顯，像Psdtuts+這樣的站點(diǎn)確實(shí)有一個(gè)非常牢固的網(wǎng)格結(jié)構(gòu)。今年，我看到了一些關(guān)于網(wǎng)格設(shè)計(jì)的非常好的文章，包括SmashingMagazine的基于網(wǎng)格的設(shè)計(jì)方法一份分開的清單網(wǎng)格外思維...事實(shí)上，如果您對(duì)網(wǎng)格設(shè)計(jì)感興趣，一定要訪問DesignByGrid.com無所不包的家。
  表現(xiàn)主義的網(wǎng)站是清晰的靈魂。一切都很干凈。
  8.清晰(銳度)
  保持您的設(shè)計(jì)簡(jiǎn)潔和銳利是非常重要的網(wǎng)頁設(shè)計(jì)...當(dāng)涉及到清晰度的時(shí)候，這一切都是關(guān)于像素的。
  在你的CSS中，所有的東西都是像素完美的，所以沒有什么好擔(dān)心的，但在Photoshop中并非如此。要實(shí)現(xiàn)敏銳的設(shè)計(jì)，您必須：
  將形狀邊緣保持為像素。如果您要在Photoshop中創(chuàng)建形狀、線條和框，則可能需要手動(dòng)清理它們。
  確保使用適當(dāng)?shù)姆椿殳B設(shè)置創(chuàng)建任何文本。我經(jīng)常用夏普。
  確保這種對(duì)比很高，以便明確界定邊界。
  過分強(qiáng)調(diào)邊界只是稍微夸大了對(duì)比。
  9.一致性
  一致性意味著使一切都匹配。標(biāo)題大小，字體選擇，顏色，按鈕樣式，間距，設(shè)計(jì)元素，插圖樣式，照片選擇等等。所有的東西都應(yīng)該是主題，以使你的設(shè)計(jì)在頁面之間和頁面上保持一致。
  保持你的設(shè)計(jì)一致是關(guān)于專業(yè)的。設(shè)計(jì)中的不一致就像文章中的拼寫錯(cuò)誤。他們只是降低了對(duì)質(zhì)量的感知。不管你的設(shè)計(jì)是什么樣子，保持它的一致性總是會(huì)使你的設(shè)計(jì)提高一個(gè)檔次。即使這是一個(gè)糟糕的設(shè)計(jì)，至少讓它成為一個(gè)一致的，糟糕的設(shè)計(jì)。
  保持一致性的最簡(jiǎn)單的方法是盡早做出決定并堅(jiān)持下去。然而，有了一個(gè)非常大的站點(diǎn)，設(shè)計(jì)過程中的事情就會(huì)發(fā)生變化。當(dāng)我設(shè)計(jì)FlashDen例如，這個(gè)過程花了幾個(gè)月的時(shí)間，到最后，我對(duì)按鈕和圖像的一些想法已經(jīng)改變了，所以我不得不回去修改以前的頁面，以便與后面的頁面完全匹配。
  擁有一組很好的CSS樣式表也可以幫助您進(jìn)行一致的設(shè)計(jì)。嘗試定義諸如<h1>和<p>這樣的核心標(biāo)記，以便使您的缺省值正確匹配，并避免始終記住特定的類名。