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

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

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

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

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


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

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

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

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

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

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

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

Benek

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

Benek

擦鞋師

擦鞋師獲取與水平滾動(dòng),因?yàn)樗枰藗冊(cè)诳葱膬?yōu)勢(shì) 。人們看看,從上到下的大多數(shù)產(chǎn)品,但鞋是不同的。人們的眼睛通常跨越鞋的長(zhǎng)度 。這個(gè)習(xí)慣使用它的優(yōu)勢(shì),擦鞋大師使得其網(wǎng)站的設(shè)計(jì)流程,在同一方向的議案,感受自然。

Shoe Guru

斯特凡Tartelin

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

Tartelin

圖形治療

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

Graphic Theory

水平方向

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

The Horizontal Way

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

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

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

鏈接洛杉磯

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

Links LA

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

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

GeoElements Design

理查德Stelmach

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

Richard Stelmach

薩都

薩都似乎有很多不同的字體,但實(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è)性的頁面沒有壓倒。

Satsu Design

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

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

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

馬特Mullenweg

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

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

Matt Mullenweg

Travic艾薩克斯

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

Travis Isaacs

詹姆斯安吉利斯

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

James De Angelis

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

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

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

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

Cetrotrees

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

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

c e r o t r e e e s

最后Mixtape作者

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

The Last Mixtape

彼得皮爾遜

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

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

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

Peter Pearson

Piepmatzel

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

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

Piepmatzel

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

導(dǎo)航不應(yīng)該是一個(gè)網(wǎng)站的瓶頸。用戶應(yīng)能迅速找到他們想要的東西的。然而,有時(shí)候,直觀而從事導(dǎo)航可以幫助用戶感覺連接到該網(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è)鏈接。沒有手控股,在設(shè)計(jì)和它的作品非常好。這不是傳統(tǒng)的“華麗的設(shè)計(jì),”但它提供它需要什么。

alvin tang photographer

Kasulo

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

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

Kasulo

Marcio高根

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

Marcio Kogan

Ceranco

如果客戶端要問一個(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è)想法。

Ceranco

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

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

Linksys的

Linksys?網(wǎng)站是整齊的,因?yàn)樗侨绾螢樗械沫h(huán)節(jié)都有一個(gè)藍(lán)色的,即使背景顏色為不同深淺的藍(lán)色。雖然風(fēng)險(xiǎn)和可能不是最大的顏色決定的,它的工作。

Linksys

布拉德Colbow

布拉德Colbow的設(shè)計(jì)是Linksys的相似,因?yàn)樗{(lán)色背景上的藍(lán)色文本 。上藍(lán)色是難以很好地拉斷,尤其是與這么多不同的藍(lán)色,整個(gè)網(wǎng)站 。

Brad Colbow

Powerset的

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

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

Powerset

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

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

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

Artist-In-Design

奧拉西奧貝拉

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

Horacio Bella

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

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

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

aba.bg

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

雖然字體替代技術(shù)都還年輕,他們已經(jīng)引起一陣轟動(dòng)。sIFR的第一,并于最近CufónTypefasce.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或閃光,他們將只能看到原來的字體。所有的事情考慮,它仍然很酷。希望這是一個(gè)在未來幾年來預(yù)覽。

Disenorama

Cactuslab

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

Cactuslab

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

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

光澤后期制作

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

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

Gloss

伊薩倫敦

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

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

當(dāng)用戶點(diǎn)擊門,門打開,并出現(xiàn)各種說明模型。初始頁面上使用的大門,是一個(gè)偉大的設(shè)計(jì)理念,因?yàn)橐坏┻M(jìn)入,用戶感覺從事。

eyessaiditbefore

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

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

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

Abba Salon

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

Work At Play

雖然這種設(shè)計(jì)主要是功能椅,一個(gè)可愛的小表出現(xiàn)在右上角的縮略圖??雌饋砭拖褚慌枋亲涂梢粤恕?

Fiberon Decking

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

LevelTen

打破規(guī)則!

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

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

你打破任何規(guī)則,在您的網(wǎng)頁設(shè)計(jì)?為什么或?yàn)槭裁床荒???qǐng)與我們分享您的意見...

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

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

??? 免費(fèi)網(wǎng)絡(luò)營(yíng)銷顧問:我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營(yíng)銷顧問服務(wù),您需要了解關(guān)于如何開展網(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)頁面生成等等,讓您的網(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)開放給您!祝君成功!

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



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

010-62199213

24小時(shí)咨詢熱線

139-1050-5354