建站資(zī)訊

Web設計可能具有欺騙性，因爲它涉及到實現一(yī)個既實用又(yòu)令人愉悅的設計，沈陽網頁設計德泰諾提供信息和建立品牌，在技術上是健全的，而且在視覺上是一(yī)緻的。此外(wài)，許多網頁設計師(包括我(wǒ)自己)都是自學的，網頁設計仍然很新穎，在許多設計機構中(zhōng)隻是一(yī)個次要的學科，而且媒介的變化和底層技術一(yī)樣頻(pín)繁。

1.優先(引導眼睛)

好的Web設計，甚至可能比其他類型的設計更多的是關于信息的。在你的武器庫中(zhōng)，其中(zhōng)一(yī)個最大(dà)的工(gōng)具就是優先...當浏覽一(yī)個好的設計時，用戶應該由設計者帶領在屏幕周圍。我(wǒ)稱之爲優先權，它是關于設計中(zhōng)不同部分(fēn)的視覺重量。

優先級的一(yī)個簡單例子是，在大(dà)多數站點中(zhōng)，您首先看到的是徽标。這通常是因爲它很大(dà)，并且在研究中(zhōng)表明它是人們首先看的地方(左上角)。他的是一(yī)件好事，因爲你可能希望用戶立即知(zhī)道他們正在查看的網站。

但優先權應該更進一(yī)步。您應該引導用戶的眼睛通過一(yī)系列的步驟。例如，您可能希望您的用戶從徽标/品牌轉到主定位語句，旁邊是一(yī)個有沖擊力的圖像(以賦予站點的個性)，然後是主體(tǐ)文本，導航和側邊欄在序列中(zhōng)占據次要位置。

你的用戶應該看什麽是由你，網頁設計師，找出。

爲了獲得優先權，您可以使用許多工(gōng)具：

位置-頁面上某物(wù)的位置明顯影響用戶看到它的順序。

顔色-使用粗體(tǐ)和微妙的顔色是一(yī)種簡單的方式來告訴你的用戶在哪裏看。

反差-與衆不同使事情變得突出，而同樣的情況則使它們處于次要地位。

大(dà)小(xiǎo)-大(dà)優先于小(xiǎo)(除非一(yī)切都很大(dà)，在這種情況下(xià)，由于對比，幾乎沒有什麽能脫穎而出)

設計要素-如果有一(yī)個巨大(dà)的箭頭指向某物(wù)，猜猜用戶會看哪裏？

兔課網——網頁設計9種基本原則技巧

2.間距

當我(wǒ)第一(yī)次開(kāi)始設計的時候，我(wǒ)想把所有可用的空間都填滿。空曠的空間似乎是浪費(fèi)的。事實上，事實恰恰相反。

間隔使事情更清晰。在Web設計中(zhōng)，您應該考慮空間的三個方面：

行距

在布局文本時，行之間的空格直接影響到它的可讀性。空間太小(xiǎo)使你的眼睛很容易從一(yī)行延伸到另一(yī)行，太大(dà)的空間意味着當你完成一(yī)行文字并轉到下(xià)一(yī)行時，你的眼睛可能會迷路。所以你需要找到一(yī)個快樂的媒介。您可以用“線高”選擇器控制CSS中(zhōng)的行間距。一(yī)般來說，我(wǒ)發現默認值通常是間隔太小(xiǎo)。行距在技術上稱爲先導(發音爲“Ledding”)，它源于打印機在過去(qù)的日子裏用來分(fēn)隔文本行的過程--在線條之間放(fàng)置鉛條。

填充物(wù)

一(yī)般來說，文本不應觸及其他要素。例如，圖像不應該觸及文本，邊框或表格也不應該。填充是元素和文本之間的空格。這裏的簡單規則是你應該總在那裏有空間。當然也有例外(wài)，特别是如果文本是某種标題/圖形。

空白(bái)

首先，空白(bái)不需要是白(bái)色的。這個術語僅僅是指頁面上的空空間(或者有時稱爲負空間)。空白(bái)是用來給出平衡，比例和對比的一(yī)頁。大(dà)量的空白(bái)往往會使事物(wù)看起來更加優雅和高檔，因此，例如，如果您選擇一(yī)個昂貴的建築工(gōng)地你幾乎總能看到很多地方。如果你想學習如何有效地使用空格，請浏覽一(yī)本雜(zá)志(zhì)，看看廣告的布局。大(dà)型品牌的手表和汽車(chē)等廣告往往會有大(dà)量的空白(bái)空間作爲設計元素。

兔課網——網頁設計9種基本原則技巧

3.通航

你在網站上最令人沮喪的經曆之一(yī)就是找不出去(qù)哪裏或你在哪裏。我(wǒ)認爲對于大(dà)多數Web設計人員(yuán)來說，導航是一(yī)個我(wǒ)們已經掌握的概念，但我(wǒ)仍然找到了一(yī)些非常糟糕的例子。要記住導航的兩個方面：

導航-你能去(qù)哪裏？

這裏有一(yī)些常識規則需要記住。在網站周圍移動的按鈕應該很容易找到--靠近頁面的頂部，并且很容易識别。它們應該看起來像導航按鈕，并且應該有很好的描述。按鈕的文字應該非常清楚它将把你帶到哪裏。除了常識之外(wài)，使導航可用也很重要。例如，如果您有一(yī)個滾動子菜單，确保一(yī)個人能夠到達子菜單項目而不失去(qù)滾動是很重要的。同樣，對用戶來說，改變滾動上的顔色或圖像是很好的反饋。

定向-你現在在哪裏？

有很多方法，你可以定位一(yī)個用戶，所以沒有借口不。在小(xiǎo)網站中(zhōng)，它可能隻是一(yī)個大(dà)标題的問題，或者是菜單中(zhōng)适當按鈕的“向下(xià)”版本。在較大(dà)的站點中(zhōng)，您可以使用面包屑，副标題和網站地圖的真正丢失。

4.建築設計

自從Web設計人員(yuán)過渡到CSS布局以來，生(shēng)活變得輕松多了，但是即使是現在，當你還在Photoshop的時候，思考如何構建一(yī)個站點仍然是很重要的。考慮如下(xià)：

真的能做到嗎(ma)？

你可能已經爲你的身體(tǐ)副本選擇了一(yī)個很棒的字體(tǐ)，但是它實際上是一(yī)個标準的HTML字體(tǐ)嗎(ma)？您可能有一(yī)個設計，看起來很漂亮，但是1100 px寬，并将産生(shēng)一(yī)個水平滾動爲大(dà)多數用戶。重要的是要知(zhī)道什麽可以做什麽不能做，這就是爲什麽我(wǒ)相信所有的網站設計師也應該建立網站，至少有時如此。

當屏幕調整大(dà)小(xiǎo)時會發生(shēng)什麽？

你需要重複背景嗎(ma)？它們将如何工(gōng)作？設計是以設計爲中(zhōng)心還是以左對齊？

你做了什麽技術上困難的事嗎(ma)？

即使使用CSS定位，一(yī)些東西，如垂直對齊仍然有點痛苦，有時最好避免。

你的設計中(zhōng)的小(xiǎo)改動能大(dà)大(dà)簡化你如何構建它嗎(ma)？

有時，在設計中(zhōng)移動對象會對以後編寫CSS代碼的方式産生(shēng)很大(dà)影響。特别是，當設計元素相互交叉時，它爲構建增加了一(yī)些複雜(zá)性。因此，如果您的設計有三個元素，并且每個元素是完全獨立的，那麽構建起來就非常容易。另一(yī)方面，如果這三者相互重疊，它可能仍然很容易，但可能會更複雜(zá)一(yī)些。您應該在看起來好的和可以簡化您的構建的小(xiǎo)更改之間找到一(yī)個平衡。

特别是對于大(dà)型網站，你能簡化嗎(ma)？

有一(yī)段時間，我(wǒ)經常爲我(wǒ)的網站制作圖像按鈕。例如，如果有一(yī)個下(xià)載按鈕，我(wǒ)會制作一(yī)個下(xià)載圖像。在過去(qù)的一(yī)年左右，我(wǒ)已經切換到使用CSS來做我(wǒ)的按鈕，從來沒有回頭。當然，這意味着我(wǒ)的按鈕并不總是有我(wǒ)想要的靈活性，但是不用制作幾十個按鈕圖像可以節省構建時間。

兔課網——網頁設計9種基本原則技巧

5.排版

文字是設計中(zhōng)最常見的元素，所以對它進行大(dà)量的思考也就不足爲奇了。重要的是要考慮這樣的事情：

字體(tǐ)選擇-不同類型的字體(tǐ)對設計有不同的看法。有些看上去(qù)很現代，有些看起來很複古。确保你在工(gōng)作中(zhōng)使用了正确的工(gōng)具。

字體(tǐ)大(dà)小(xiǎo)-幾年前，使用非常小(xiǎo)的文本是一(yī)種時髦的做法。令人高興的是，現在人們已經開(kāi)始意識到，文本是用來閱讀的，而不僅僅是閱讀。确保你的文本大(dà)小(xiǎo)是一(yī)緻的，足夠大(dà)，可以閱讀，并按比例，以便标題和副标題突出适當。

間隔-如前所述，行與遠離(lí)其他對象之間的間隔是很重要的考慮因素。您還應該考慮字母之間的間隔，盡管在Web上這一(yī)點不太重要，因爲您沒有太多的控制能力。

線長-沒有硬性的規則，但一(yī)般來說，你的文字行不應該太長。他們越長，他們就越難閱讀。小(xiǎo)欄目的文字效果要好得多(想想報紙(zhǐ)是如何布置文本的)。

顔色-我(wǒ)最壞的習慣之一(yī)就是做低對比度的文字。它看上去(qù)不錯，但讀得不太好，不幸的是。盡管如此，我(wǒ)似乎對我(wǒ)做過的每一(yī)個網站設計都是這樣做的。

分(fēn)段-在我(wǒ)開(kāi)始設計之前，我(wǒ)喜歡在每件事上證明這篇文章是正确的。它在我(wǒ)的段落兩邊都有很好的邊緣。不幸的是，正确的文本往往會在單詞之間造成奇怪的空白(bái)。當你閱讀的時候，這對你的眼睛不太好，所以，除非你碰巧有一(yī)個神奇的文本身體(tǐ)，恰好是完美的空間，否則就堅持左對齊。

兔課網——網頁設計9種基本原則技巧

6.可用性

網頁設計不僅僅是關于漂亮的圖片。在網站上有這麽多的信息和交互，重要的是你，設計師，提供它的一(yī)切。這意味着使您的網站設計可用。

我(wǒ)們已經讨論了可用性的一(yī)些方面-導航、優先級和文本。以下(xià)是三個更重要的問題：

遵守标準

有些事情是人們所期望的，而不給予它們則會引起混亂。例如，如果文本有下(xià)劃線，那麽您希望它是一(yī)個鏈接。不這樣做是不好的可用性實踐。當然，你可以打破一(yī)些約定，但是你的大(dà)多數網站都應該按照人們的期望去(qù)做！

想想用戶到底會做什麽

原型是設計中(zhōng)使用的一(yī)種常用工(gōng)具，用于實際“試用”某項設計。這樣做是因爲當你實際使用一(yī)個設計的時候，你會注意到一(yī)些小(xiǎo)的東西會産生(shēng)很大(dà)的不同。一(yī)段時間前，阿拉有一(yī)篇文章叫做當您的意思是撤消時，不要使用警告。，這是一(yī)個很好的例子，說明了一(yī)個小(xiǎo)的界面設計決策，它會讓用戶的生(shēng)活變得糟糕。

考慮用戶任務

當一(yī)個用戶來到你的網站時，他們到底想做什麽？列出人們在一(yī)個站點上可能完成的不同類型的任務，他們将如何實現這些任務，以及您希望爲他們完成這些任務有多容易。這可能意味着你的主頁上有非常常見的任務(例如“開(kāi)始購物(wù)”、“了解我(wǒ)們做什麽”等等)。或者，這可能意味着确保像搜索框這樣的東西總是容易訪問。最後，您的Web設計是一(yī)個供人們使用的工(gōng)具，而且人們不喜歡使用煩人的工(gōng)具！

兔課網——網頁設計9種基本原則技巧

7.對齊

在網頁設計和印刷設計中(zhōng)，保持整齊是同樣重要的。這并不是說一(yī)切應該是一(yī)條直線，但你應該通過，并試圖保持在一(yī)頁上一(yī)緻的東西。調整使您的設計更有序和可消化，以及使它看起來更抛光。

您也可能希望将您的設計建立在特定的網格上。我(wǒ)必須承認，我(wǒ)并沒有意識到這一(yī)點--盡管很明顯，像Psdtuts+這樣的站點确實有一(yī)個非常牢固的網格結構。今年，我(wǒ)看到了一(yī)些關于網格設計的非常好的文章，包括SmashingMagazine的基于網格的設計方法一(yī)份分(fēn)開(kāi)的清單網格外(wài)思維...事實上，如果您對網格設計感興趣，一(yī)定要訪問DesignByGrid.com無所不包的家。

兔課網——網頁設計9種基本原則技巧

表現主義的網站是清晰的靈魂。一(yī)切都很幹淨。

8.清晰(銳度)

保持您的設計簡潔和銳利是非常重要的網頁設計...當涉及到清晰度的時候，這一(yī)切都是關于像素的。

在你的CSS中(zhōng)，所有的東西都是像素完美的，所以沒有什麽好擔心的，但在Photoshop中(zhōng)并非如此。要實現敏銳的設計，您必須：

将形狀邊緣保持爲像素。如果您要在Photoshop中(zhōng)創建形狀、線條和框，則可能需要手動清理它們。

确保使用适當的反混疊設置創建任何文本。我(wǒ)經常用夏普。

确保這種對比很高，以便明确界定邊界。

過分(fēn)強調邊界隻是稍微誇大(dà)了對比。

兔課網——網頁設計9種基本原則技巧

9.一(yī)緻性

一(yī)緻性意味着使一(yī)切都匹配。标題大(dà)小(xiǎo)，字體(tǐ)選擇，顔色，按鈕樣式，間距，設計元素，插圖樣式，照片選擇等等。所有的東西都應該是主題，以使你的設計在頁面之間和頁面上保持一(yī)緻。

保持你的設計一(yī)緻是關于專業的。設計中(zhōng)的不一(yī)緻就像文章中(zhōng)的拼寫錯誤。他們隻是降低了對質量的感知(zhī)。不管你的設計是什麽樣子，保持它的一(yī)緻性總是會使你的設計提高一(yī)個檔次。即使這是一(yī)個糟糕的設計，至少讓它成爲一(yī)個一(yī)緻的，糟糕的設計。

保持一(yī)緻性的最簡單的方法是盡早做出決定并堅持下(xià)去(qù)。然而，有了一(yī)個非常大(dà)的站點，設計過程中(zhōng)的事情就會發生(shēng)變化。當我(wǒ)設計FlashDen例如，這個過程花了幾個月的時間，到最後，我(wǒ)對按鈕和圖像的一(yī)些想法已經改變了，所以我(wǒ)不得不回去(qù)修改以前的頁面，以便與後面的頁面完全匹配。

擁有一(yī)組很好的CSS樣式表也可以幫助您進行一(yī)緻的設計。嘗試定義諸如

和

這樣的核心标記，以便使您的缺省值正确匹配，并避免始終記住特定的類名。

10.優化型網站設計

沈陽德泰諾科技有限公司提供的網頁設計注重優化設計，絕續符合搜索引擎要求，可以說這一(yī)點是非常重要的，詳情關注本站最新更新動态。