久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

40個(gè)獨(dú)樹一幟的創(chuàng)新式布局網(wǎng)頁設(shè)計(jì)

 聞竹韻賞清音 2014-02-27

40個(gè)獨(dú)樹一幟的創(chuàng)新式布局網(wǎng)頁設(shè)計(jì)

@MartinRGB 網(wǎng)站的基礎(chǔ)在于布局,。它能夠很好起到引導(dǎo)用戶的作用,為用戶提供可選擇的選項(xiàng),,且能夠告訴用戶網(wǎng)站的重點(diǎn)所在。同時(shí)布局影響到了網(wǎng)站的美感,。因此,,我們在布局設(shè)計(jì)上要非常謹(jǐn)慎。

獨(dú)家的,、創(chuàng)新的布局能夠大幅提高用戶的瀏覽體驗(yàn),。通常,我們都會(huì)揣摩用戶的心理,,我們會(huì)把自己當(dāng)作用戶,,然后審視一番自己的網(wǎng)站,問自己”如果我是用戶,,我進(jìn)入網(wǎng)站最想看到什么,?”"如何與用戶更好的交流?”在設(shè)計(jì)尚未開始前,,我們便要做足這方面的功課,,充分了解用戶的動(dòng)機(jī)、需求以及心理,,因?yàn)椴季帜軌驔Q定設(shè)計(jì)的”形狀”,。

好吧,下面我們來一起看一下一些不同尋常的網(wǎng)站布局,。它們不一定完美無缺,,但是各自有各自的風(fēng)格?;蛟S,,它們的布局能夠激發(fā)你靈感的火花。

Beurre & Sel

美麗無比,。頂端的紅白導(dǎo)航條配以照片選用考究的滾動(dòng)欄,。當(dāng)你向下滑動(dòng)頁面時(shí),導(dǎo)航欄略微縮小,但是依然固定在頂部,。而圖片滾動(dòng)欄下方多彩的列表,,其實(shí)代表該公司烘制的不同風(fēng)味的曲奇餅干,可以將它們看成子菜單中的按鈕,。點(diǎn)擊不同的口味,,信息便會(huì)在子菜單面板中覆蓋式滑出,三欄式布局也方便吸引用戶注意力,。

Beurre & Sel

Hackery, Maths & Design

優(yōu)雅的線條動(dòng)效隨著頁面的讀取進(jìn)度而漸漸在屏幕上展開,。箭頭象征著運(yùn)動(dòng)與流體之美,鼓勵(lì)著用戶滑動(dòng)頁面,,瀏覽內(nèi)容,。下方的內(nèi)容采用三欄式布局,兩欄用以顯示內(nèi)容,,一欄側(cè)邊欄,。然而卻沒有一種呆板的感覺,反倒讓用戶感到非常開放,、大氣——這是因?yàn)閳D像大量使用了圓角,,且空間寬敞。該網(wǎng)站的布局讓用戶感到非常舒服,。

Hackery, Maths & Design

The Drawing Room

個(gè)人非常喜歡這款布局,,簡單,但視覺效果不簡單,。該工作室的作品以鉆石的形狀排列,,且有大有小。中間的那塊”鉆石”顯示了該工作室的標(biāo)識(shí),,黑白的配色,,使之從眾多作品中脫穎而出。當(dāng)指針在每塊”鉆石”上懸停時(shí),,會(huì)顯示出該作品的簡潔,。單頁頁面有著獨(dú)創(chuàng)且清爽的布局,非常易于用戶操作,。

The Drawing Room

We Love Noise

Luke Finch的作品集網(wǎng)站布局非常有趣且非常的有好,。看起來雖然很雜亂無章,,但是完全另辟蹊徑,。能夠通過圖像告訴你作品的一些信息,通過箭頭來進(jìn)行導(dǎo)航,。而左上角的小心臟,,是整個(gè)網(wǎng)站的導(dǎo)航。當(dāng)光標(biāo)在作品上懸停時(shí),其他作品”黯然失色”,,非常好的突出效果,。

We Love Noise

Ende

動(dòng)態(tài)式布局。在載入頁面,,提供了一個(gè)非常怪異的歡迎頁面,,用以提示你向下滾動(dòng),導(dǎo)航條固定在頂部,。我特別喜歡這種透明式的導(dǎo)航條,,能夠迅速的跳轉(zhuǎn)至相關(guān)的內(nèi)容。盡管整個(gè)網(wǎng)站確實(shí)存在布局設(shè)計(jì),,但內(nèi)容在頁面中顯得有些散亂,。每個(gè)環(huán)節(jié)的背景顏色都不盡相同。三欄式布局非常容易識(shí)別,,但是設(shè)計(jì)團(tuán)隊(duì)將布局的成規(guī)打破,,采用了更自由的方式,顯示效果也更加有趣,。

Ende

Edward Carvalho Monaghan

生活很枯燥,?給你點(diǎn)顏色吧,!這個(gè)作品集網(wǎng)站極具個(gè)性,,作品生動(dòng)、大氣,。頁面中左右的圖像均為動(dòng)態(tài),。主題非常一致的網(wǎng)站,既能夠代表設(shè)計(jì)師,,又能獨(dú)立作為作品集存在——這就是作品集網(wǎng)站的要點(diǎn)所在,。標(biāo)識(shí)非常的多彩,而且動(dòng)效給整個(gè)網(wǎng)站帶來一種活力,。

Edward Carvalho Monaghan

Huys

獨(dú)樹一幟的布局,,右面的頁碼固定的風(fēng)格略像信頭。而左邊提供了方便使用的導(dǎo)航,。頁面最上方展示出他們建造公寓的簡圖,。

Huys

KathArt(強(qiáng)烈推薦!)

KathArt采用了優(yōu)秀的視頻式布局,。網(wǎng)站非常具有個(gè)性,,而且非常高效,讓你感覺好像在和設(shè)計(jì)團(tuán)隊(duì)面對面的聊天,。設(shè)計(jì)團(tuán)隊(duì)在視頻中介紹他們的工作,,讓你感覺你好像在和他們一道探討產(chǎn)品!導(dǎo)航采用了時(shí)間線的風(fēng)格,非常聰明,,可以改變視頻的進(jìn)度,。

KathArt

Wacom

Wacom適用于專業(yè)用戶,也適用于非專業(yè)用戶,。布局是設(shè)計(jì)整體的一部分,,且營造了一種對用戶友好的感覺。當(dāng)懸停在導(dǎo)航欄處,,導(dǎo)航欄就會(huì)縮小,,然后顯示出每個(gè)選項(xiàng)中的子菜單,用戶可以自由選擇,。非常非常的整潔,,能夠讓用戶迅速的找到所需。我喜歡他們的那條手繪線,。

Wacom

Amsterdam Dance Event

布局體現(xiàn)了項(xiàng)目的精神與態(tài)度,。導(dǎo)航欄在頁面的左邊且固定。有著強(qiáng)烈視覺沖擊風(fēng)格的滑動(dòng)欄圖像,。令人對這場舞蹈節(jié)印象深刻,。

Amsterdam Dance Event

Cropp

寬大、粗放的布局,。當(dāng)懸停在圖標(biāo)上時(shí),,圖像的像素便無法識(shí)別,這樣就能引起你的注意,。頂部的導(dǎo)航欄固定,。整個(gè)布局非常的沖擊傳統(tǒng),照片也非常漂亮,。

Cropp

Neue Yorke

布局非常簡約——因此對于用戶來說非常直接,,非常易于操作,每個(gè)頁面僅僅只有兩種顏色,,且與其他頁面的”兩種顏色”完全不同,。當(dāng)你點(diǎn)擊其中一項(xiàng)作品時(shí),這項(xiàng)作品會(huì)占據(jù)主要頁面,,然后導(dǎo)航會(huì)縮小為右面板,。個(gè)性化又能很好的展示作品,贊,!

Neue Yorke

Juliana Bicycles

非常規(guī),、創(chuàng)新的自行車商店設(shè)計(jì)。熱情,、富有魅力的自行車照片伴隨著頁面的加載,。整個(gè)頁面由4部分組成,。非常能夠打動(dòng)女性,字體非常的粗獷,,而且自行車的3D化也使產(chǎn)品更有層次感,。

Juliana Bicycles

Esquire

簡約,可達(dá)性好,。Logo標(biāo)識(shí)采用黑白這種色彩,。然而文章圖片卻色彩斑斕。導(dǎo)航條在頁面的中部,,能夠引起用戶對內(nèi)容的興趣,。

Esquire

Institut Choiseul

非常引人注目的卡片式布局。一塊又一塊的厚色片幫助整體網(wǎng)站完成了有序的布局,。而底部的布局稍顯傳統(tǒng),,通過這種卡片式區(qū)塊布局,創(chuàng)造了一種動(dòng)態(tài)式的美感,。不同的顏色,,代表了網(wǎng)站的不同環(huán)節(jié),讓內(nèi)容易于導(dǎo)航,,也易于閱讀,。

Institut Choiseul

Award

黑白風(fēng)帶來的中性設(shè)計(jì),突出了內(nèi)容,。沒有為網(wǎng)格線布局粉飾過多,,反而顯得非常干凈。懸停效果蠻有趣,,內(nèi)容卡片會(huì)向左上方浮動(dòng),,右側(cè)和下方會(huì)出現(xiàn)一圈像素快,。導(dǎo)航固定在左側(cè),,搜索和內(nèi)容過濾固定在頂部。

Award

Harry’s

非常細(xì)膩有愛的用戶體驗(yàn),。網(wǎng)格線使用的非常嚴(yán)謹(jǐn),,出售的產(chǎn)品非常的有復(fù)古風(fēng),古色古香,,打造經(jīng)典,,這種簡潔、大氣的感覺令人窒息,。Harry的剃須刀網(wǎng)站的用圖也非??季俊?/p>

Harry's

The King’s of Summer

這個(gè)Tumblr網(wǎng)站,,通過照片體現(xiàn)出電影的魅力,,偶然跳出一個(gè)GIF動(dòng)畫或者白色徽章,,充滿趣味性,而標(biāo)識(shí)采用了潦草的手寫體,,讓人有一種歲月碎片之念,。內(nèi)容區(qū)塊的怪異布局反而營造了一種有趣的視覺效果。時(shí)隱時(shí)現(xiàn)的GIF動(dòng)畫,,讓用戶感到眼花繚亂,。非常有個(gè)性的電影網(wǎng)站。

The King's Of Summer

World Baking Day

這款頁面需要用戶與之交互才能繼續(xù)進(jìn)行,,在頁面載入時(shí),,便提供一個(gè)選項(xiàng)來選擇烘焙級(jí)別。先會(huì)出現(xiàn)一款美食的精致大圖,,再點(diǎn)一下,,左面會(huì)彈出一個(gè)食譜覆蓋了全部頁面,酷!

World Baking Day

Paper & Paint

獨(dú)特的交互性和布局,。當(dāng)你在滑動(dòng)時(shí),,頁面中所有的圖像都在進(jìn)行視差滾動(dòng)。對于該網(wǎng)站主推的產(chǎn)品來說,,這種布局非常合適,,導(dǎo)航條隱藏在右上角,當(dāng)你點(diǎn)擊,,便可進(jìn)行選擇,。

Paper & Paint

Newsweek

布局非常的不同尋常。通過背景圖像來引導(dǎo)內(nèi)容,。采用了標(biāo)準(zhǔn)的網(wǎng)格線,,但是布局上卻力求新意,完全不采用重復(fù)的布局,。

Newsweek

Abby Putinski

作為富有創(chuàng)意的插畫師和圖形設(shè)計(jì)師,,Abby Putinski的作品集網(wǎng)站也是獨(dú)具一格。在在載入的時(shí)候,,便有一個(gè)動(dòng)效來介紹網(wǎng)站內(nèi)容,,邀請用戶來瀏覽他的作品。一旦關(guān)閉這個(gè)窗口,,就可以開始你的大冒險(xiǎn),。這個(gè)網(wǎng)站幾乎沒有布局,非常的自由開放,,無拘無束,。這使得瀏覽起來體驗(yàn)非常有趣。

Abby Putinski

Baumastisch

緊密的網(wǎng)格線布局,,非常利于大量作品的展示,。光標(biāo)懸停在不同部分時(shí),,會(huì)顯示出每件作品的標(biāo)題,點(diǎn)擊之后,,便進(jìn)入了采用水平滾動(dòng)的作品展示頁面,。展示了大量做的設(shè)計(jì)信息。

Baumastisch

Norwich University of the Arts

映入眼簾的超炫大圖,,瀑布流的布局風(fēng)格,。醒目的黃色標(biāo)簽,效果突出,、采用Helvetica字體的LOGO,。

Trask Industries

X-Men系列預(yù)告網(wǎng)站,簡單,、實(shí)用,。分成三欄,導(dǎo)航固定在做,,視頻劇中,,內(nèi)容垂直滾動(dòng)居右。導(dǎo)航欄選項(xiàng)點(diǎn)擊的動(dòng)效很不錯(cuò),。清爽,,又能很直觀的呈遞內(nèi)容。

Trask Industries

Adam Hartwig

沒有布局,,便是布局,?創(chuàng)造了一種類似FLash的動(dòng)效字體設(shè)計(jì),一直自動(dòng)播放,。就算不瀏覽網(wǎng)頁的內(nèi)容,,滾動(dòng)欄中多種多樣的字體就夠用戶欣賞很久了。

Adam Hartwig

Contad

CSS+HTML+JS+SVG會(huì)有什么效果呢,?請瀏覽Contad

Contad

National Academy Museum

布局層次分明,,模塊化的感覺。不同元素彼此重疊,。很是顛覆傳統(tǒng),。

National Academy Museum

Andrew McCarthy

奔跑,、變換色彩的貓科動(dòng)物,。在奔跑的過程中內(nèi)容一覽無余,非常有趣的定格像素圖像,。

Andrew McCarthy

Mikael Edwards

動(dòng)效應(yīng)用廣泛,,很好的全濕了內(nèi)容。Mikael Edwards的動(dòng)效使用既具有功能性,,也具有視覺效應(yīng),。他的理念是,,既然是有別于傳統(tǒng)媒介的網(wǎng)頁設(shè)計(jì),那么就一定要有網(wǎng)頁自己的特點(diǎn),,不可一味的圖像+文字,。

Mikael

Designer’s Friend

和你期待中的設(shè)計(jì)師網(wǎng)站有所不同對嗎?這不像是個(gè)網(wǎng)站,,更像是一個(gè)網(wǎng)站的HTML代碼,,雖然略有高端,但是新意十足,。

Designer's Friend

Hatched

頁腳處提供了跳轉(zhuǎn)至頁的功能,,導(dǎo)航和選項(xiàng)在用字、配色上都很棒,,讓人感覺大氣,、開放,采用了響應(yīng)式設(shè)計(jì)的導(dǎo)航欄,。

Hatched

Institute for Emerging Issues

內(nèi)容一致,。結(jié)構(gòu)嚴(yán)謹(jǐn),映入眼簾的圓環(huán)讓人感覺非常友好,,用戶會(huì)順其引導(dǎo),,繼續(xù)瀏覽下面的內(nèi)容。而下方的具體內(nèi)容摘要做的也很棒,,鼠標(biāo)懸停,,標(biāo)題會(huì)上浮,顯示出一系列相關(guān)內(nèi)容,。

Institute for Emmerging Issues

Into The Arctic

通過布局鼓勵(lì)用戶來進(jìn)行交互,。背景中的視頻讓用戶感到著迷,導(dǎo)航非常有趣,,當(dāng)你懸停在導(dǎo)航處時(shí),,導(dǎo)航會(huì)彈出更多的信息。字體選用非常棒,。

Into The Artic

John Jacob

水平滾動(dòng),,非常另類,點(diǎn)擊具體項(xiàng),,只占據(jù)頁面中央,,且只占據(jù)整個(gè)頁面的一半。簡介簡短,、直接,。而且這種設(shè)計(jì)的好處在于,不用跳轉(zhuǎn)到其他頁面,,一個(gè)水平滾動(dòng)的單頁面就能大致了解網(wǎng)站內(nèi)容,,左上角顯示了設(shè)計(jì)師各種鏈?zhǔn)椒绞?,右下角顯示了設(shè)計(jì)師陳列作品的一些平臺(tái)。

Postable

Impress

留白區(qū)域讓網(wǎng)站感覺非常的大氣,、友好,,能夠讓用戶更好的閱讀、導(dǎo)航,、高效瀏覽,。懸停效果與眾不同,像開門一樣,,只打開一半,,非常有趣。

Impress

Postable

非??蓯鄣母拍?,它會(huì)電郵你一張非常漂亮的、具有設(shè)計(jì)感的明信片,,而且有傳統(tǒng)信件古色古香的外觀,。布局服從于整體的概念而進(jìn)行設(shè)計(jì)。背景采用了紙質(zhì),,而邊線采用了復(fù)古風(fēng)格的封線,。非常具有復(fù)古感。

Postable

National LGBT Museum

單頁布局,,滾動(dòng)的效果非???。頁面會(huì)分裂成兩半,,然后背向而馳,創(chuàng)造出一種動(dòng)態(tài)效果,。
National LGBT Museum

Lucas Nikitczuk

這個(gè)作品集網(wǎng)站充分展現(xiàn)了設(shè)計(jì)師的個(gè)人技巧,,直奔主題,,簡明扼要的介紹了設(shè)計(jì)師及其作品。圓形的采用創(chuàng)造了一種流動(dòng),、友好型的沒學(xué),。而背景的溢流圖案給整體增加了一種自由、開放感,。導(dǎo)航條非常簡單,,就在頁面的右邊,像只是器一樣,。
Lucas Nikitczuk

INT

不斷翻轉(zhuǎn)的標(biāo)識(shí),,優(yōu)秀的視差滾動(dòng)。

Int

結(jié)論

布局是網(wǎng)頁設(shè)計(jì)的基礎(chǔ),,也決定了網(wǎng)頁設(shè)計(jì)的走向,。多為用戶著想,多用交互性上考慮,,改善布局,。創(chuàng)新的目的不是為了給用戶帶來個(gè)性化瀏覽體驗(yàn),讓用戶有一種耳目一新的感覺,,看完這些,,你是否有靈感了呢?

優(yōu)設(shè)網(wǎng)編輯:@MartinRGB
原文地址:http://www./2013/08/29/innovative-appraoches-web-layout/

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,,所有內(nèi)容均由用戶發(fā)布,,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請遵守用戶 評(píng)論公約

    類似文章 更多