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

1. Heco Partners

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

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

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

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

2. The Goonies

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

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

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

3. Nelu Cebotari’s portfolio

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

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

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

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

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

4. Soul Jazz Records

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

布局：基于網(wǎng)格設(shè)計的實體唱片存儲體驗的復(fù)制品。

進(jìn)入這個網(wǎng)站，仿佛進(jìn)入了一家實體唱片店，在這里，你可以找到晦澀的放克，爵士樂和朋克音樂，聽到可能不會引起太多關(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è)時間和票務(wù)信息），而SFMOMA在展示這些信息方面做得更好，而且還有不一樣的體驗。

6. R2D3

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

布局：兩列Z模式，帶有大量動畫圖。

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

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

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

7. Lauren Wickware’s portfolio

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

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

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

8. Poulos Collective

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

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

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

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

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

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