很多網(wǎng)站仍然在使用老舊的頁面設(shè)計(jì)，比如國內(nèi)一些企業(yè)官網(wǎng)，萬年不變的相類似的模板，外國的則是hero頁面，帶CTA按鈕，三欄式的布局。這些設(shè)計(jì)不能說是不好的設(shè)計(jì)，很實(shí)用，用戶能夠預(yù)測(cè)展示的內(nèi)容，也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測(cè)，用戶沒有新鮮感，沒有期待，所以我們找了一些不僅打破常規(guī)，也依然有良好用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)。

1. Heco Partners

網(wǎng)址：http://helloheco.com/

布局設(shè)計(jì)：流動(dòng)的動(dòng)態(tài)線條加滾動(dòng)指示箭頭，滾動(dòng)頁面后展示一段介紹，然后進(jìn)入交錯(cuò)的兩欄項(xiàng)目展示布局。

Heco Partners首頁的流動(dòng)線條波浪吸引您進(jìn)入他們的網(wǎng)站

當(dāng)我們?cè)L問這家位于芝加哥的設(shè)計(jì)公司官網(wǎng)時(shí)，您會(huì)看到“We turn information into experiences that people care about”這段文字展示在波浪之上。該網(wǎng)站展示了如何將設(shè)計(jì)案例與背景信息相結(jié)合。

2. The Goonies

網(wǎng)址：http://the-goonies.webflow.io/

布局：頭部采用全屏圖像，滾動(dòng)頁面后進(jìn)入一系列網(wǎng)格布局的頁面

約瑟夫·貝里（Joseph Berry）決定將他最喜歡的電影之一（1980年代的經(jīng)典電影《The Goonies》）轉(zhuǎn)變?yōu)樾麄黠L(fēng)格的網(wǎng)站。The Goonies獲得了Awwwards的“年度最佳提名獎(jiǎng)和網(wǎng)站獎(jiǎng)”，這是用滾動(dòng)的方式講故事的一個(gè)很好的例子。

3. Nelu Cebotari’s portfolio

網(wǎng)址：http://nelucebotari.com/

布局：變化后的三欄設(shè)計(jì)，可轉(zhuǎn)換為滾動(dòng)顯示的導(dǎo)航菜單

設(shè)計(jì)作品集不僅為您提供了展示所從事的項(xiàng)目，而且還可以通過頁面本身展示您的設(shè)計(jì)技能。設(shè)計(jì)師Nelu Cebotari就是這樣設(shè)計(jì)自己的個(gè)人網(wǎng)站。

網(wǎng)站使用的黃色背景可能會(huì)有點(diǎn)刺眼，但他為背景添加了柔和的背景紋理，變得不那么刺眼。

該網(wǎng)站設(shè)計(jì)的獨(dú)特部分是導(dǎo)航的設(shè)計(jì)。將鼠標(biāo)懸停在每個(gè)按鈕上都可以看到一個(gè)從底部向上滑動(dòng)的盒子。這些方塊中的每個(gè)方塊都有一些文字，提示您了解更多或保持聯(lián)系。

4. Soul Jazz Records

網(wǎng)址：https://soundsoftheuniverse.com/

布局：基于網(wǎng)格設(shè)計(jì)的實(shí)體唱片存儲(chǔ)體驗(yàn)的復(fù)制品。

進(jìn)入這個(gè)網(wǎng)站，仿佛進(jìn)入了一家實(shí)體唱片店，在這里，你可以找到晦澀的放克，爵士樂和朋克音樂，聽到可能不會(huì)引起太多關(guān)注的音樂。

他們的網(wǎng)站很好地代表了他們發(fā)布的許多流派。網(wǎng)站還有很多關(guān)于藝術(shù)家以及聲音樣本的背景信息，更全面的了解他們的聲音。

5. San Francisco Museum of Modern Art

網(wǎng)址：https://www.sfmoma.org/

布局：全屏背景圖片，帶有指示性的基本鏈接。

博物館里的藝術(shù)激發(fā)和吸引著我們的想象力。他們的網(wǎng)站應(yīng)該做同樣的事情。不過大多數(shù)博物館網(wǎng)站在炫耀特色作品，宣傳當(dāng)前展覽以及提供重要的游客信息（例如營業(yè)時(shí)間和票務(wù)信息），而SFMOMA在展示這些信息方面做得更好，而且還有不一樣的體驗(yàn)。

6. R2D3

網(wǎng)址：http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

布局：兩列Z模式，帶有大量動(dòng)畫圖。

網(wǎng)站是一種可以教學(xué)的工具，R2D3利用網(wǎng)站來圖解機(jī)器學(xué)習(xí)。

R2D3通過“機(jī)器學(xué)習(xí)的可視化介紹”來科普。通過一系列動(dòng)畫，他們能夠以相對(duì)簡(jiǎn)單的方式傳達(dá)這個(gè)復(fù)雜的概念。引人入勝的體驗(yàn)學(xué)習(xí)知識(shí)比盯著教科書中的單詞和數(shù)字更有趣。 

R2D3使用引人注目的動(dòng)畫向我們展示了機(jī)器學(xué)習(xí)的工作原理

7. Lauren Wickware’s portfolio

網(wǎng)址：http://laurenwickware.com/

布局：全面屏頭部頁面切換到分屏顯示設(shè)計(jì)項(xiàng)目。

這是籍設(shè)計(jì)師Lauren Wickware's的個(gè)人作品網(wǎng)站。多維滾動(dòng)創(chuàng)造出令人驚奇的平滑和引人入勝的體驗(yàn)。

8. Poulos Collective

網(wǎng)址：https://www.poulos.co/

布局：磚石風(fēng)格的布局，帶有不同的卡片模塊，隨著滾動(dòng)而逐漸消失。

Poulos Collective是一家專門從事UX設(shè)計(jì)和策略的設(shè)計(jì)咨詢公司。它的站點(diǎn)提供了干凈簡(jiǎn)單且最重要的功能體驗(yàn)。該網(wǎng)站的簡(jiǎn)單性是由Stefan Poulos創(chuàng)建的。顏色令人愉悅，文本易于閱讀，并且輕巧的外觀和感覺使加載速度極快，從而提供了出色的用戶體驗(yàn)。

尋找靈感并進(jìn)一步推動(dòng)自己的設(shè)計(jì)

作為設(shè)計(jì)師，我們知道客戶經(jīng)常只需要經(jīng)過實(shí)踐檢驗(yàn)的真實(shí)解決方案。而且，我們可以輕松滿足他們的要求。完全按照客戶的想法設(shè)計(jì)沒有問題，但是設(shè)計(jì)中還有很大的空間可以嘗試不同的東西。通過采用非傳統(tǒng)的方法，我們可以提出令人難忘的網(wǎng)站設(shè)計(jì)，并且不會(huì)在統(tǒng)一的海洋中迷失方向。

原文地址：https://webflow.com/blog/unique-website-layouts