由于一般的網(wǎng)頁(yè)設(shè)計(jì)和設(shè)計(jì)的演變，規(guī)則已經(jīng)確立，以確保一致和可用的設(shè)計(jì)。
其中一些規(guī)則，僅僅是因?yàn)榫W(wǎng)站的創(chuàng)造者濫用沒(méi)有顧及他們的用戶一定的原則。
但這些規(guī)則不執(zhí)行，任何人都和在必要時(shí)應(yīng)該被打破，特別是打破他們時(shí)，會(huì)導(dǎo)致一個(gè)驚人的設(shè)計(jì)。
在這篇文章中，我們目前的10條規(guī)則，你可以休息，如果它適合你的設(shè)計(jì)需要。
相當(dāng)數(shù)量的小鼠沒(méi)有水平的鼠標(biāo)滾輪。這使得尷尬的滾動(dòng)左或右時(shí)，一個(gè)網(wǎng)頁(yè)的內(nèi)容，過(guò)去瀏覽器的兩側(cè)延伸。
它可以是惱人把鼠標(biāo)光標(biāo)的窗口底部，拖動(dòng)滾動(dòng)條以上只看到一兩句話，在于超出了頁(yè)面的可視面積。這就是說(shuō)，這里是一些精心設(shè)計(jì)的網(wǎng)站，把滾動(dòng)條來(lái)工作的有效途徑。
Benek
Benek使用JavaScript來(lái)改變鼠標(biāo)滾輪的滾動(dòng)方向從垂直到水平 。Benek的投資組合中的每個(gè)項(xiàng)目分為自己的列 。該網(wǎng)站有一個(gè)令人驚訝的耳目一新的感覺(jué)和暢順。
擦鞋師
擦鞋師獲取與水平滾動(dòng)，因?yàn)樗枰藗冊(cè)诳葱膬?yōu)勢(shì) 。人們看看，從上到下的大多數(shù)產(chǎn)品，但鞋是不同的。人們的眼睛通?？缭叫拈L(zhǎng)度 。這個(gè)習(xí)慣使用它的優(yōu)勢(shì)，擦鞋大師使得其網(wǎng)站的設(shè)計(jì)流程，在同一方向的議案，感受自然。
斯特凡Tartelin
斯特凡Tartelin使用水平滾動(dòng)條，使他的作品看起來(lái)像是一個(gè)藝術(shù)畫廊 。雖然垂直鼠標(biāo)滾輪功能不喜歡在上面的例子，效果出奇的好作品。你甚至可以說(shuō)，效果會(huì)減弱，如果鼠標(biāo)滾輪水平滾動(dòng)重新編碼 。
圖形治療
雖然圖形治療不其網(wǎng)頁(yè)上顯示水平滾動(dòng)條，它仍然允許在屏幕上點(diǎn)擊和拖動(dòng)水平滾動(dòng)。圖形理論水平導(dǎo)航，因?yàn)樗膱D像都是相同的高度，但不相同的寬度。水平導(dǎo)航幫助網(wǎng)站流量順利。
水平方向
水平方式使用水平滾動(dòng)的網(wǎng)站是一個(gè)展示。蹩腳的圖形是美麗的，并盡可能CSS畫廊去這個(gè)網(wǎng)站是獨(dú)一無(wú)二的 。
規(guī)則＃2：使用的字體面的最小數(shù)量
字體太多，通常相互沖突和壓倒觀眾。每種字體有一種個(gè)性，太多的個(gè)性，可以創(chuàng)建障礙。
為了有效地利用不僅僅是一個(gè)字體夫婦，設(shè)計(jì)非常面向文本，和設(shè)計(jì)的其余部分需要相對(duì)安靜的。下面是使用這個(gè)意義上的沖突和混亂，從事用戶網(wǎng)站的一些例子。
鏈接洛杉磯
鏈接LA使用非線性布局的多種字體創(chuàng)建的能量感 。頁(yè)是難以快速閱讀，但提請(qǐng)用戶英寸這也是值得注意的，字體沒(méi)有過(guò)分裝飾;每個(gè)字清晰可辨，保持設(shè)計(jì)的清脆和干凈。
地理要素設(shè)計(jì)工作室
通常使用多種字體傳達(dá)了能源和混亂的感覺(jué)，但地理要素的設(shè)計(jì)工作室的網(wǎng)站是非常公開(kāi)和廉潔 。每種字體是給自己的空間，讓觀者不關(guān)聯(lián)與另一種字體 。背景天空的形象，有助于強(qiáng)化開(kāi)放的意識(shí)。
理查德Stelmach
不同的是最后一個(gè)例子，理查德Stelmach推他的不同的字體緊密結(jié)合起來(lái) 。設(shè)計(jì)作品，因?yàn)橹挥幸粋€(gè)字體不看手繪，和其他兩個(gè)工作以及與插圖。手工繪制的字體通常在一起，即使有許多不同的字體 。
薩都
薩都似乎有很多不同的字體，但實(shí)際上只有3個(gè)（不包括體育局組合項(xiàng)目 ）。間距一切小心，薩都聯(lián)營(yíng)公司的某些行與對(duì)方的文本，即使文本可能會(huì)在不同的字體。
標(biāo)志的標(biāo)題是一個(gè)字體，和兩個(gè)子標(biāo)題，每個(gè)人都有自己的字體，但觀眾自然群體這三個(gè)文本項(xiàng)目。薩都是能夠創(chuàng)造能源與個(gè)性的頁(yè)面沒(méi)有壓倒。
規(guī)則＃3：不要使用太多的顏色
設(shè)計(jì)太遠(yuǎn)的恐懼是什么分離新秀和新秀從忘卻的專業(yè)人員。漠視嘗試極端盡可能使他們的設(shè)計(jì)，消防，閃爍文字的話，盡可能多的顏色。
新秀要保持自己的設(shè)計(jì)微妙，容易對(duì)眼睛，但最終他們的設(shè)計(jì)有時(shí)可以看死氣沉沉。以下賞心悅目的設(shè)計(jì)是由那些打擦邊球的一些真正的專業(yè)人士。
馬特Mullenweg
馬特Mullenweg的精美彩色設(shè)計(jì)，看起來(lái)像一幅水彩畫（網(wǎng)站已經(jīng)更新，因?yàn)檫@篇文章是書面） 。所有背景顏色會(huì)抓住任何人的注意。
一般來(lái)說(shuō)，良好的設(shè)計(jì)與顏色噸將有這些顏色的背景，與前面的簡(jiǎn)單調(diào)色板。讀文本時(shí)的東西太多會(huì)是非常困難的。
Travic艾薩克斯
特拉維斯-薩克斯的設(shè)計(jì)有一個(gè)豐富 多彩的背景，使得設(shè)計(jì)顯得豐富多彩整個(gè)垂直梯度。本網(wǎng)站有明亮的粉紅色作為其鏈接的顏色，這是一個(gè)偉大的選擇設(shè)計(jì)師要?jiǎng)?chuàng)造一個(gè)豐富 多彩的效果 。
詹姆斯安吉利斯
詹姆斯安吉利斯網(wǎng)站顯示文本可以沒(méi)有菜鳥對(duì)面五顏六色。設(shè)計(jì)是非常備件，標(biāo)語(yǔ)肯定是中心舞臺(tái)。
規(guī)則＃4：使你的網(wǎng)站的目標(biāo)明顯
的東西，真正得到塞進(jìn)耳朵的年輕設(shè)計(jì)師設(shè)計(jì)應(yīng)該立即告訴觀眾，他們正在尋找他們閱讀任何文本之前。
大公司的品牌知名度是很重要的，但有時(shí)規(guī)模較小的家伙需要一點(diǎn)更聰明，得到觀眾的注意力。隱瞞信息可以陰謀想了解更多的觀眾和“逗”的人。
將這種技術(shù)應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)，可以大大提高用戶在您的網(wǎng)站上停留的時(shí)間。
Cetrotrees
今天在大多數(shù)組合，自由職業(yè)者或公司通常介紹自己，并解釋他們的工作。Cerotreees，而不是將其權(quán)利的工作，在左邊和樣品一些隱約標(biāo)記的鏈接，但沒(méi)有解釋它背后的想法或人。
周圍的網(wǎng)站引誘用戶之謎的空氣留下來(lái)。
最后Mixtape作者
最后Mixtape作者是另一個(gè)組合，顯示其工作，僅此而已。這樣的設(shè)計(jì)散發(fā)出一種極端的信心的感覺(jué)。他們從來(lái)沒(méi)有嘗試推銷自己，他們只是希望用戶被吹走，來(lái)乞求的合同。
彼得皮爾遜
使用閃屏是一個(gè)很好的的方法來(lái)減緩用戶的思維過(guò)程，并啟發(fā)他們深入挖掘。初始頁(yè)面的目標(biāo)通常是解釋照片或文字的短位的網(wǎng)站迅速。
但在彼得Pearson的情況下，其目的是喚起一種感覺(jué)。大的天空和散落的文字效果，喚起好奇心的一個(gè)偉大的工作，因?yàn)檫@些東西通常不會(huì)一起出現(xiàn)。這個(gè)網(wǎng)站還沒(méi)有一個(gè)偉大的工作在繼續(xù)飛濺到實(shí)際內(nèi)容的頁(yè)面創(chuàng)建的情感 。
側(cè)面滾動(dòng)的議案，并按照用戶的動(dòng)畫線是真正有效的。
Piepmatzel
一個(gè)偉大的方式來(lái)解決語(yǔ)言障礙是不使用任何文字。Piepmatzel是一個(gè)CSS畫廊，誰(shuí)見(jiàn)過(guò)一個(gè)CSS畫廊的人可能會(huì)認(rèn)識(shí)到它作為一個(gè)馬上。
那些沒(méi)有可能是好奇，足以讓一些縮略圖點(diǎn)擊希望搞清楚的格局。少量在頁(yè)面底部的文本幫助排序，并且是多余的。
規(guī)則＃5：導(dǎo)航應(yīng)該很容易弄清楚
導(dǎo)航不應(yīng)該是一個(gè)網(wǎng)站的瓶頸。用戶應(yīng)能迅速找到他們想要的東西的。然而，有時(shí)候，直觀而從事導(dǎo)航可以幫助用戶感覺(jué)連接到該網(wǎng)站和它是促進(jìn)。
阿爾文湯
正如在上一節(jié)中提到的，空氣的信心轉(zhuǎn)達(dá)了當(dāng)一個(gè)投資組合不法術(shù)本身。這是在阿爾文唐的攝影組合。當(dāng)首先到達(dá)現(xiàn)場(chǎng)時(shí)，用戶不立即承認(rèn)他們作為鏈接的話 。
這種不確定性促使他們捅了一下周圍。鼠標(biāo)移動(dòng)到一個(gè)字表明，這的確是一個(gè)鏈接，并呼吁一下，一個(gè)華麗的照片加載。照片將吸引用戶繼續(xù)瀏覽。
查看更多圖片，用戶點(diǎn)擊他們的瀏覽器的“后退”按鈕（大多數(shù)人都明白做的東西），然后單擊另一個(gè)鏈接。沒(méi)有手控股，在設(shè)計(jì)和它的作品非常好。這不是傳統(tǒng)的“華麗的設(shè)計(jì)，”但它提供它需要什么。
Kasulo
Kasulo的?導(dǎo)航是不可怕的很難搞清楚，但一般用戶可能不知道到底該怎么做就到達(dá)現(xiàn)場(chǎng)后 。不過(guò)，第一次點(diǎn)擊后，一切都變得明顯。
用戶導(dǎo)航的組合件，在3 - D的風(fēng)格的最新資料顯示最接近的開(kāi)始。使用鼠標(biāo)滾輪，更是有趣。
Marcio高根
Marcio高根的網(wǎng)站是另一個(gè)偉大的導(dǎo)航是不會(huì)立即明顯的例子。指令“我拖”是難以抵擋，一旦用戶這樣做，他們的道路上巡航組合項(xiàng)目。鼠標(biāo)懸停預(yù)覽是一個(gè)小細(xì)節(jié)，但確實(shí)令人印象深刻的 。
Ceranco
如果客戶端要問(wèn)一個(gè)設(shè)計(jì)師，使他們的網(wǎng)站在3 - D，像一個(gè)第一人稱射擊視頻游戲，大多數(shù)設(shè)計(jì)師會(huì)默默地笑自己，采取深呼吸，然后慢慢地解釋為什么這會(huì)是一個(gè)壞主意。
雖然網(wǎng)站Ceranco是不完全的3 - D射手的，它可以很容易被混淆為某種獨(dú)立的電腦游戲。用戶進(jìn)行這樣的網(wǎng)站都是偉大的。而長(zhǎng)的加載時(shí)間和較差的搜索引擎優(yōu)化，使這個(gè)不到大多數(shù)項(xiàng)目的理想選擇，它絕對(duì)是值得的第二個(gè)想法。
規(guī)則＃6：使用不同的顏色，文字和背景
也許是這條規(guī)則不寫所有的地方，但很多新秀都那么害怕文本不可讀的，他們不考慮使用相同的基本顏色的背景和字體本身。你可以遵循一些簡(jiǎn)單的技巧，使工作相似的顏色。
Linksys的
Linksys?的網(wǎng)站是整齊的，因?yàn)樗侨绾螢樗械沫h(huán)節(jié)都有一個(gè)藍(lán)色的，即使背景顏色為不同深淺的藍(lán)色。雖然風(fēng)險(xiǎn)和可能不是最大的顏色決定的，它的工作。
布拉德Colbow
布拉德Colbow的設(shè)計(jì)是Linksys的相似，因?yàn)樗{(lán)色背景上的藍(lán)色文本 。上藍(lán)色是難以很好地拉斷，尤其是與這么多不同的藍(lán)色，整個(gè)網(wǎng)站 。
Powerset的
到目前為止，在本節(jié)中，我們已經(jīng)看到了只藍(lán)色的網(wǎng)站，因?yàn)樗{(lán)色文字是最難適合人眼閱讀，如此清晰的藍(lán)色類型總是令人印象深刻。如果文字效果在藍(lán)色的作品，它會(huì)在任何顏色最可能的工作。
Powerset的使用其字體以創(chuàng)建一個(gè)3 - D效果，有效地從背景中分離出來(lái)的文字的一個(gè)凸版風(fēng)格。
設(shè)計(jì)藝術(shù)家
在設(shè)計(jì)藝術(shù)家不僅具有綠色背景和黃色背景上的黃色/米色文本的綠色文字，但文字直接在照片上。
盡管一些個(gè)別的字母可能難以閱讀，作為一個(gè)整體的話仍然清晰可辨。這種類型的效果應(yīng)該幾乎總是中心在設(shè)計(jì)階段。
奧拉西奧貝拉
奧拉西奧貝拉使用另一個(gè)3 - D效果，他的投資組合 。在這種情況下，出現(xiàn)的字母，而不是被削弱向內(nèi)彈出。如果沒(méi)有這種效果，可讀性會(huì)已大大降低 。這里使用的是另一個(gè)很好的效果，從而進(jìn)一步提高了可讀性字母緊字距 。
規(guī)則＃7：不要把你的內(nèi)容動(dòng)畫
認(rèn)真，不彈出小的Flash廣告，正確的用戶閱讀。同樣適用于這些調(diào)查框表明，每當(dāng)用戶在一個(gè)句子中。用戶不喜歡分心時(shí)，他們通過(guò)一個(gè)句子的中間。除非... ...
這真的很難，不迷戀上小蜘蛛阿壩的網(wǎng)站 。設(shè)計(jì)是干凈的，雖然蜘蛛是一種分心，也沒(méi)關(guān)系。到目前為止，我認(rèn)為這個(gè)網(wǎng)站是唯一的例外。
規(guī)則＃8：堅(jiān)持到Web安全字體
雖然字體替代技術(shù)都還年輕，他們已經(jīng)引起一陣轟動(dòng)。sIFR的第一，并于最近Cufón和Typefasce.js已經(jīng)出現(xiàn)。
Dise?orama
在Dise?orama網(wǎng)站上，紅色的“Recientemente”文本是可選的 。一個(gè)缺點(diǎn)是，如果網(wǎng)站不即刻負(fù)載時(shí)，用戶將簡(jiǎn)要地看到原本平淡的字體 。
另一個(gè)缺點(diǎn)是，如果用戶已禁用JavaScript或閃光，他們將只能看到原來(lái)的字體。所有的事情考慮，它仍然很酷。希望這是一個(gè)在未來(lái)幾年來(lái)預(yù)覽。
Cactuslab
Cactuslab還使用sIFR那樣的藍(lán)子標(biāo)題（如“冬工作”等）。盡管sIFR是最復(fù)雜的字體替代技術(shù)，文字可以復(fù)制和粘貼，給它一個(gè)很大的優(yōu)勢(shì)超過(guò)其他兩個(gè)技術(shù)。
規(guī)則＃9：不要有一個(gè)啟動(dòng)/登陸頁(yè)面
許多設(shè)計(jì)師不得不與他們的客戶相同的舊討論為什么一個(gè)啟動(dòng)頁(yè)面是不是一個(gè)好主意。谷歌往往排名等頁(yè)面較低，他們放慢的用戶得到他們之后的內(nèi)容。但他們可以令人難以置信的美麗和鼓舞人心的的，如果使用得當(dāng)。
光澤后期制作
組合樣品的初始頁(yè)面上出現(xiàn)光澤后期制作的網(wǎng)站的目的是為了引起用戶的情感反應(yīng)。
每次訪問(wèn)后，從投資組合的隨機(jī)照片被加載。點(diǎn)擊照片的尺度上下來(lái)，并放在其網(wǎng)站上的其他投資組合件之間的地方?？s放和運(yùn)動(dòng)的影響提供了延續(xù)和幫助其他公司的工作進(jìn)行用戶的情感。
伊薩倫敦
當(dāng)一個(gè)站點(diǎn)完全是做在Flash中，加載欄，可以作為一個(gè)初始頁(yè)。當(dāng)用戶看到一個(gè)加載的酒吧，他們將關(guān)閉該頁(yè)面，去別的地方或切換到另一個(gè)標(biāo)簽和其他地方，而他們等待瀏覽。
一旦頁(yè)面加載時(shí)，最好等待用戶啟動(dòng)前返回。在伊薩倫敦的情況下，門是一個(gè)完美的比喻說(shuō)，該網(wǎng)站已準(zhǔn)備就緒，用戶可以輸入。
當(dāng)用戶點(diǎn)擊門，門打開(kāi)，并出現(xiàn)各種說(shuō)明模型。初始頁(yè)面上使用的大門，是一個(gè)偉大的設(shè)計(jì)理念，因?yàn)橐坏┻M(jìn)入，用戶感覺(jué)從事。
規(guī)則＃10：不要使用表
任何網(wǎng)頁(yè)設(shè)計(jì)師在其設(shè)計(jì)中使用的表，將立即被稱為一個(gè)由經(jīng)驗(yàn)豐富的設(shè)計(jì)師新秀。表顯示在所有的瀏覽器不一樣，他們可以使源代碼顯得凌亂，但至少你會(huì)知道你在與他們獲得。納入表的設(shè)計(jì)，這里有一些例子。
此表稍微很難看到，但藏有兩把椅子之間的。這是一個(gè)漂亮的小邊桌，但可悲的是沒(méi)有多大幫助這個(gè)網(wǎng)站的設(shè)計(jì)。
表上在播放的工作方式在這種設(shè)計(jì)的背景，但他們保持近在咫尺工人的筆記本電腦和其他物品。如果沒(méi)有這些表，房間會(huì)感到空虛，和背景的照片將不會(huì)有同樣的效果 。
雖然這種設(shè)計(jì)主要是功能椅，一個(gè)可愛(ài)的小表出現(xiàn)在右上角的縮略圖?？雌饋?lái)就像一盆是坐著就可以了。
至于表設(shè)計(jì)，這是最好的之一。兩個(gè)表，在這個(gè)Flash動(dòng)畫功能設(shè)計(jì)，給他們帶來(lái)了很多關(guān)注。這個(gè)網(wǎng)站應(yīng)該是每一個(gè)設(shè)計(jì)師的偉大的設(shè)計(jì)，使用表的列表。
打破規(guī)則！
當(dāng)設(shè)計(jì)要求它打破規(guī)則是好的。審查這里的許多設(shè)計(jì)選擇都不會(huì)被認(rèn)為是由平均設(shè)計(jì)師。這是偉大的設(shè)計(jì)師，從平均的。
那些勇敢地去反對(duì)什么，他們一直在教導(dǎo)總是站出來(lái)。
你打破任何規(guī)則，在您的網(wǎng)頁(yè)設(shè)計(jì)？為什么或?yàn)槭裁床荒?？?qǐng)與我們分享您的意見(jiàn)...
-----------------------------------------------------------------------------------------------------
我們的與眾不同之處：
??? 免費(fèi)網(wǎng)絡(luò)營(yíng)銷顧問(wèn)：我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營(yíng)銷顧問(wèn)服務(wù)，您需要了解關(guān)于如何開(kāi)展網(wǎng)絡(luò)營(yíng)銷，電子商務(wù)，網(wǎng)站設(shè)計(jì)等的事宜，歡迎隨時(shí)聯(lián)系我們。
??? seo友好的網(wǎng)站管理系統(tǒng)：除了優(yōu)質(zhì)的網(wǎng)站空間，網(wǎng)站管理系統(tǒng)，和網(wǎng)站設(shè)計(jì)外，我們的網(wǎng)站管理系統(tǒng)更是seo友好的，包括：自定義欄目名，Google Sitemap自動(dòng)生成，靜態(tài)頁(yè)面生成等等，讓您的網(wǎng)站。
???? 免費(fèi)網(wǎng)絡(luò)營(yíng)銷培訓(xùn)：如何更好的投放網(wǎng)絡(luò)廣告，如何提高網(wǎng)絡(luò)廣告的投資回報(bào)，如何發(fā)帖子，
??? ?如何優(yōu)化網(wǎng)站，我們有豐富的經(jīng)驗(yàn)開(kāi)放給您！祝君成功！
聯(lián)系我們：010-62199213 62122723-808 ?400-697-8610 ?徐小姐
北京網(wǎng)站建設(shè)公司-傳誠(chéng)信網(wǎng)站：js-hbsb.cn?點(diǎn)擊查看經(jīng)典網(wǎng)站案例！
