首頁?>?知識?資訊?>?打破你的網(wǎng)頁設(shè)計的設(shè)計習慣!?>?正文

打破你的網(wǎng)頁設(shè)計的設(shè)計習慣!

2011/10/30 0:00:00 · 稿源:傳誠信

10網(wǎng)頁設(shè)計的規(guī)則,你可以打破

設(shè)計靈感,網(wǎng)頁設(shè)計


由于一般的網(wǎng)頁設(shè)計和設(shè)計的演變,規(guī)則已經(jīng)確立,以確保一致和可用的設(shè)計。

其中一些規(guī)則,僅僅是因為網(wǎng)站的創(chuàng)造者濫用沒有顧及他們的用戶一定的原則。

但這些規(guī)則不執(zhí)行,任何人都和在必要時應(yīng)該被打破,特別是打破他們時,會導(dǎo)致一個驚人的設(shè)計。

在這篇文章中,我們目前的10條規(guī)則,你可以休息,如果它適合你的設(shè)計需要。

規(guī)則#1:不顯示水平滾動條

相當數(shù)量的小鼠沒有水平的鼠標滾輪。這使得尷尬的滾動左或右時,一個網(wǎng)頁的內(nèi)容,過去瀏覽器的兩側(cè)延伸。

它可以是惱人把鼠標光標的窗口底部,拖動滾動條以上只看到一兩句話,在于超出了頁面的可視面積。這就是說,這里是一些精心設(shè)計的網(wǎng)站,把滾動條來工作的有效途徑。

Benek

Benek使用JavaScript來改變鼠標滾輪的滾動方向從垂直到水平 。Benek的投資組合中的每個項目分為自己的列 。該網(wǎng)站有一個令人驚訝的耳目一新的感覺和暢順。

Benek

擦鞋師

擦鞋師獲取與水平滾動,因為它需要人們在看鞋的優(yōu)勢 。人們看看,從上到下的大多數(shù)產(chǎn)品,但鞋是不同的。人們的眼睛通??缭叫拈L度 。這個習慣使用它的優(yōu)勢,擦鞋大師使得其網(wǎng)站的設(shè)計流程,在同一方向的議案,感受自然。

Shoe Guru

斯特凡Tartelin

斯特凡Tartelin使用水平滾動條,使他的作品看起來像是一個藝術(shù)畫廊 。雖然垂直鼠標滾輪功能不喜歡在上面的例子,效果出奇的好作品。你甚至可以說,效果會減弱,如果鼠標滾輪水平滾動重新編碼 。

Tartelin

圖形治療

雖然圖形治療不其網(wǎng)頁上顯示水平滾動條,它仍然允許在屏幕上點擊和拖動水平滾動。圖形理論水平導(dǎo)航,因為它的圖像都是相同的高度,但不相同的寬度。水平導(dǎo)航幫助網(wǎng)站流量順利。

Graphic Theory

水平方向

水平方式使用水平滾動的網(wǎng)站是一個展示。蹩腳的圖形是美麗的,并盡可能CSS畫廊去這個網(wǎng)站是獨一無二的 。

The Horizontal Way

規(guī)則#2:使用的字體面的最小數(shù)量

字體太多,通常相互沖突和壓倒觀眾。每種字體有一種個性,太多的個性,可以創(chuàng)建障礙。

為了有效地利用不僅僅是一個字體夫婦,設(shè)計非常面向文本,和設(shè)計的其余部分需要相對安靜的。下面是使用這個意義上的沖突和混亂,從事用戶網(wǎng)站的一些例子。

鏈接洛杉磯

鏈接LA使用非線性布局的多種字體創(chuàng)建的能量感 。頁是難以快速閱讀,但提請用戶英寸這也是值得注意的,字體沒有過分裝飾;每個字清晰可辨,保持設(shè)計的清脆和干凈。

Links LA

地理要素設(shè)計工作室

通常使用多種字體傳達了能源和混亂的感覺,但地理要素的設(shè)計工作室的網(wǎng)站是非常公開和廉潔 。每種字體是給自己的空間,讓觀者不關(guān)聯(lián)與另一種字體 。背景天空的形象,有助于強化開放的意識。

GeoElements Design

理查德Stelmach

不同的是最后一個例子,理查德Stelmach推他的不同的字體緊密結(jié)合起來 。設(shè)計作品,因為只有一個字體不看手繪,和其他兩個工作以及與插圖。手工繪制的字體通常在一起,即使有許多不同的字體 。

Richard Stelmach

薩都

薩都似乎有很多不同的字體,但實際上只有3個(不包括體育局組合項目 )。間距一切小心,薩都聯(lián)營公司的某些行與對方的文本,即使文本可能會在不同的字體。

標志的標題是一個字體,和兩個子標題,每個人都有自己的字體,但觀眾自然群體這三個文本項目。薩都是能夠創(chuàng)造能源與個性的頁面沒有壓倒。

Satsu Design

規(guī)則#3:不要使用太多的顏色

設(shè)計太遠的恐懼是什么分離新秀和新秀從忘卻的專業(yè)人員。漠視嘗試極端盡可能使他們的設(shè)計,消防,閃爍文字的話,盡可能多的顏色。

新秀要保持自己的設(shè)計微妙,容易對眼睛,但最終他們的設(shè)計有時可以看死氣沉沉。以下賞心悅目的設(shè)計是由那些打擦邊球的一些真正的專業(yè)人士。

馬特Mullenweg

馬特Mullenweg的精美彩色設(shè)計,看起來像一幅水彩畫(網(wǎng)站已經(jīng)更新,因為這篇文章是書面) 。所有背景顏色會抓住任何人的注意。

一般來說,良好的設(shè)計與顏色噸將有這些顏色的背景,與前面的簡單調(diào)色板。讀文本時的東西太多會是非常困難的。

Matt Mullenweg

Travic艾薩克斯

特拉維斯-薩克斯的設(shè)計有一個豐富 多彩的背景,使得設(shè)計顯得豐富多彩整個垂直梯度。本網(wǎng)站有明亮的粉紅色作為其鏈接的顏色,這是一個偉大的選擇設(shè)計師要創(chuàng)造一個豐富 多彩的效果 。

Travis Isaacs

詹姆斯安吉利斯

詹姆斯安吉利斯網(wǎng)站顯示文本可以沒有菜鳥對面五顏六色。設(shè)計是非常備件,標語肯定是中心舞臺。

James De Angelis

規(guī)則#4:使你的網(wǎng)站的目標明顯

的東西,真正得到塞進耳朵的年輕設(shè)計師設(shè)計應(yīng)該立即告訴觀眾,他們正在尋找他們閱讀任何文本之前。

大公司的品牌知名度是很重要的,但有時規(guī)模較小的家伙需要一點更聰明,得到觀眾的注意力。隱瞞信息可以陰謀想了解更多的觀眾和“逗”的人。

將這種技術(shù)應(yīng)用到網(wǎng)頁設(shè)計,可以大大提高用戶在您的網(wǎng)站上停留的時間。

Cetrotrees

今天在大多數(shù)組合,自由職業(yè)者或公司通常介紹自己,并解釋他們的工作。Cerotreees,而不是將其權(quán)利的工作,在左邊和樣品一些隱約標記的鏈接,但沒有解釋它背后的想法或人。

周圍的網(wǎng)站引誘用戶之謎的空氣留下來。

c e r o t r e e e s

最后Mixtape作者

最后Mixtape作者是另一個組合,顯示其工作,僅此而已。這樣的設(shè)計散發(fā)出一種極端的信心的感覺。他們從來沒有嘗試推銷自己,他們只是希望用戶被吹走,來乞求的合同。

The Last Mixtape

彼得皮爾遜

使用閃屏是一個很好的的方法來減緩用戶的思維過程,并啟發(fā)他們深入挖掘。初始頁面的目標通常是解釋照片或文字的短位的網(wǎng)站迅速。

但在彼得Pearson的情況下,其目的是喚起一種感覺。大的天空和散落的文字效果,喚起好奇心的一個偉大的工作,因為這些東西通常不會一起出現(xiàn)。這個網(wǎng)站還沒有一個偉大的工作在繼續(xù)飛濺到實際內(nèi)容的頁面創(chuàng)建的情感 。

側(cè)面滾動的議案,并按照用戶的動畫線是真正有效的。

Peter Pearson

Piepmatzel

一個偉大的方式來解決語言障礙是不使用任何文字。Piepmatzel是一個CSS畫廊,誰見過一個CSS畫廊的人可能會認識到它作為一個馬上。

那些沒有可能是好奇,足以讓一些縮略圖點擊希望搞清楚的格局。少量在頁面底部的文本幫助排序,并且是多余的。

Piepmatzel

規(guī)則#5:導(dǎo)航應(yīng)該很容易弄清楚

導(dǎo)航不應(yīng)該是一個網(wǎng)站的瓶頸。用戶應(yīng)能迅速找到他們想要的東西的。然而,有時候,直觀而從事導(dǎo)航可以幫助用戶感覺連接到該網(wǎng)站和它是促進。

阿爾文湯

正如在上一節(jié)中提到的,空氣的信心轉(zhuǎn)達了當一個投資組合不法術(shù)本身。這是在阿爾文唐的攝影組合。當首先到達現(xiàn)場時,用戶不立即承認他們作為鏈接的話 。

這種不確定性促使他們捅了一下周圍。鼠標移動到一個字表明,這的確是一個鏈接,并呼吁一下,一個華麗的照片加載。照片將吸引用戶繼續(xù)瀏覽。

查看更多圖片,用戶點擊他們的瀏覽器的“后退”按鈕(大多數(shù)人都明白做的東西),然后單擊另一個鏈接。沒有手控股,在設(shè)計和它的作品非常好。這不是傳統(tǒng)的“華麗的設(shè)計,”但它提供它需要什么。

alvin tang photographer

Kasulo

Kasulo?導(dǎo)航是不可怕的很難搞清楚,但一般用戶可能不知道到底該怎么做就到達現(xiàn)場后 。不過,第一次點擊后,一切都變得明顯。

用戶導(dǎo)航的組合件,在3 - D的風格的最新資料顯示最接近的開始。使用鼠標滾輪,更是有趣。

Kasulo

Marcio高根

Marcio高根的網(wǎng)站是另一個偉大的導(dǎo)航是不會立即明顯的例子。指令“我拖”是難以抵擋,一旦用戶這樣做,他們的道路上巡航組合項目。鼠標懸停預(yù)覽是一個小細節(jié),但確實令人印象深刻的 。

Marcio Kogan

Ceranco

如果客戶端要問一個設(shè)計師,使他們的網(wǎng)站在3 - D,像一個第一人稱射擊視頻游戲,大多數(shù)設(shè)計師會默默地笑自己,采取深呼吸,然后慢慢地解釋為什么這會是一個壞主意。

雖然網(wǎng)站Ceranco是不完全的3 - D射手的,它可以很容易被混淆為某種獨立的電腦游戲。用戶進行這樣的網(wǎng)站都是偉大的。而長的加載時間和較差的搜索引擎優(yōu)化,使這個不到大多數(shù)項目的理想選擇,它絕對是值得的第二個想法。

Ceranco

規(guī)則#6:使用不同的顏色,文字和背景

也許是這條規(guī)則不寫所有的地方,但很多新秀都那么害怕文本不可讀的,他們不考慮使用相同的基本顏色的背景和字體本身。你可以遵循一些簡單的技巧,使工作相似的顏色。

Linksys的

Linksys?網(wǎng)站是整齊的,因為它是如何為它所有的環(huán)節(jié)都有一個藍色的,即使背景顏色為不同深淺的藍色。雖然風險和可能不是最大的顏色決定的,它的工作。

Linksys

布拉德Colbow

布拉德Colbow的設(shè)計是Linksys的相似,因為藍色背景上的藍色文本 。上藍色是難以很好地拉斷,尤其是與這么多不同的藍色,整個網(wǎng)站 。

Brad Colbow

Powerset的

到目前為止,在本節(jié)中,我們已經(jīng)看到了只藍色的網(wǎng)站,因為藍色文字是最難適合人眼閱讀,如此清晰的藍色類型總是令人印象深刻。如果文字效果在藍色的作品,它會在任何顏色最可能的工作。

Powerset的使用其字體以創(chuàng)建一個3 - D效果,有效地從背景中分離出來的文字的一個凸版風格。

Powerset

設(shè)計藝術(shù)家

在設(shè)計藝術(shù)家不僅具有綠色背景和黃色背景上的黃色/米色文本的綠色文字,但文字直接在照片上。

盡管一些個別的字母可能難以閱讀,作為一個整體的話仍然清晰可辨。這種類型的效果應(yīng)該幾乎總是中心在設(shè)計階段。

Artist-In-Design

奧拉西奧貝拉

奧拉西奧貝拉使用另一個3 - D效果,他的投資組合 。在這種情況下,出現(xiàn)的字母,而不是被削弱向內(nèi)彈出。如果沒有這種效果,可讀性會已大大降低 。這里使用的是另一個很好的效果,從而進一步提高了可讀性字母緊字距 。

Horacio Bella

規(guī)則#7:不要把你的內(nèi)容動畫

認真,不彈出小的Flash廣告,正確的用戶閱讀。同樣適用于這些調(diào)查框表明,每當用戶在一個句子中。用戶不喜歡分心時,他們通過一個句子的中間。除非... ...

這真的很難,不迷戀上小蜘蛛阿壩的網(wǎng)站 。設(shè)計是干凈的,雖然蜘蛛是一種分心,也沒關(guān)系。到目前為止,我認為這個網(wǎng)站是唯一的例外。

aba.bg

規(guī)則#8:堅持到Web安全字體

雖然字體替代技術(shù)都還年輕,他們已經(jīng)引起一陣轟動。sIFR的第一,并于最近CufónTypefasce.js已經(jīng)出現(xiàn)。

Dise?orama

Dise?orama網(wǎng)站上,紅色的“Recientemente”文本是可選的 。一個缺點是,如果網(wǎng)站不即刻負載時,用戶將簡要地看到原本平淡的字體 。

另一個缺點是,如果用戶已禁用JavaScript或閃光,他們將只能看到原來的字體。所有的事情考慮,它仍然很酷。希望這是一個在未來幾年來預(yù)覽。

Disenorama

Cactuslab

Cactuslab還使用sIFR那樣的藍子標題(如“冬工作”等)。盡管sIFR是最復(fù)雜的字體替代技術(shù),文字可以復(fù)制和粘貼,給它一個很大的優(yōu)勢超過其他兩個技術(shù)。

Cactuslab

規(guī)則#9:不要有一個啟動/登陸頁面

許多設(shè)計師不得不與他們的客戶相同的舊討論為什么一個啟動頁面是不是一個好主意。谷歌往往排名等頁面較低,他們放慢的用戶得到他們之后的內(nèi)容。但他們可以令人難以置信的美麗和鼓舞人心的的,如果使用得當。

光澤后期制作

組合樣品的初始頁面上出現(xiàn)光澤后期制作的網(wǎng)站的目的是為了引起用戶的情感反應(yīng)。

每次訪問后,從投資組合的隨機照片被加載。點擊照片的尺度上下來,并放在其網(wǎng)站上的其他投資組合件之間的地方。縮放和運動的影響提供了延續(xù)和幫助其他公司的工作進行用戶的情感。

Gloss

伊薩倫敦

當一個站點完全是做在Flash中,加載欄,可以作為一個初始頁。當用戶看到一個加載的酒吧,他們將關(guān)閉該頁面,去別的地方或切換到另一個標簽和其他地方,而他們等待瀏覽。

一旦頁面加載時,最好等待用戶啟動前返回。在伊薩倫敦的情況下,門是一個完美的比喻說,該網(wǎng)站已準備就緒,用戶可以輸入。

當用戶點擊門,門打開,并出現(xiàn)各種說明模型。初始頁面上使用的大門,是一個偉大的設(shè)計理念,因為一旦進入,用戶感覺從事。

eyessaiditbefore

規(guī)則#10:不要使用表

任何網(wǎng)頁設(shè)計師在其設(shè)計中使用的表,將立即被稱為一個由經(jīng)驗豐富的設(shè)計師新秀。表顯示在所有的瀏覽器不一樣,他們可以使源代碼顯得凌亂,但至少你會知道你在與他們獲得。納入表的設(shè)計,這里有一些例子。

此表稍微很難看到,但藏有兩把椅子之間的。這是一個漂亮的小邊桌,但可悲的是沒有多大幫助這個網(wǎng)站的設(shè)計。

Abba Salon

表上在播放的工作方式在這種設(shè)計的背景,但他們保持近在咫尺工人的筆記本電腦和其他物品。如果沒有這些表,房間會感到空虛,和背景的照片將不會有同樣的效果 。

Work At Play

雖然這種設(shè)計主要是功能椅,一個可愛的小表出現(xiàn)在右上角的縮略圖。看起來就像一盆是坐著就可以了。

Fiberon Decking

至于表設(shè)計,這是最好的之一。兩個表,在這個Flash動畫功能設(shè)計,給他們帶來了很多關(guān)注。這個網(wǎng)站應(yīng)該是每一個設(shè)計師的偉大的設(shè)計,使用表的列表。

LevelTen

打破規(guī)則!

當設(shè)計要求它打破規(guī)則是好的。審查這里的許多設(shè)計選擇都不會被認為是由平均設(shè)計師。這是偉大的設(shè)計師,從平均的。

那些勇敢地去反對什么,他們一直在教導(dǎo)總是站出來。

你打破任何規(guī)則,在您的網(wǎng)頁設(shè)計?為什么或為什么不呢?請與我們分享您的意見...

選擇北京網(wǎng)站建設(shè)公司-傳誠信,優(yōu)質(zhì)服務(wù),絕對不容錯過 !
1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證?
(配送雙線獨立ip空間,國際A級BGP機房,99.5% 的主機在線時間)?
2. 7年北京網(wǎng)站建設(shè)經(jīng)驗,優(yōu)秀的技術(shù)和設(shè)計水平,更放心?
3. 全程省心服務(wù),不必擔心自己不懂網(wǎng)絡(luò),更省心。?

-----------------------------------------------------------------------------------------------------
我們的與眾不同之處:

??? 免費網(wǎng)絡(luò)營銷顧問:我們?yōu)槟峁┟赓M的網(wǎng)絡(luò)營銷顧問服務(wù),您需要了解關(guān)于如何開展網(wǎng)絡(luò)營銷,電子商務(wù),網(wǎng)站設(shè)計等的事宜,歡迎隨時聯(lián)系我們。

??? seo友好的網(wǎng)站管理系統(tǒng):除了優(yōu)質(zhì)的網(wǎng)站空間,網(wǎng)站管理系統(tǒng),和網(wǎng)站設(shè)計外,我們的網(wǎng)站管理系統(tǒng)更是seo友好的,包括:自定義欄目名,Google Sitemap自動生成,靜態(tài)頁面生成等等,讓您的網(wǎng)站。

???? 免費網(wǎng)絡(luò)營銷培訓:如何更好的投放網(wǎng)絡(luò)廣告,如何提高網(wǎng)絡(luò)廣告的投資回報,如何發(fā)帖子,
??? ?如何優(yōu)化網(wǎng)站,我們有豐富的經(jīng)驗開放給您!祝君成功!

聯(lián)系我們:010-62199213 62122723-808 ?400-697-8610 ?徐小姐
北京網(wǎng)站建設(shè)公司-傳誠信網(wǎng)站:js-hbsb.cn?點擊查看經(jīng)典網(wǎng)站案例!



  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354