8個頁面布局獨特的網站設計賞析

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

1. Heco Partners

網址：http://helloheco.com/

布局設計：流動的動態線條加滾動指示箭頭，滾動頁面後展示一段介紹，然後進入交錯的兩欄項目展示布局。

Heco Partners首頁的流動線條波浪吸引您進入他們的網站

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

2. The Goonies

網址：http://the-goonies.webflow.io/

布局：頭部采用全屏圖像，滾動頁面後進入一係列網格布局的頁面

約瑟夫·貝裏（Joseph Berry）決定將他最喜歡的電影之一（1980年代的經典電影《The Goonies》）轉變為宣傳風格的網站。The Goonies獲得了Awwwards的“年度最佳提名獎和網站獎”，這是用滾動的方式講故事的一個很好的例子。

3. Nelu Cebotari’s portfolio

網址：http://nelucebotari.com/

布局：變化後的三欄設計，可轉換為滾動顯示的導航菜單

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

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

該網站設計的獨特部分是導航的設計。將鼠標懸停在每個按鈕上都可以看到一個從底部向上滑動的盒子。這些方塊中的每個方塊都有一些文字，提示您了解更多或保持聯係。

4. Soul Jazz Records

網址：https://soundsoftheuniverse.com/

布局：基於網格設計的實體唱片存儲體驗的複製品。

進入這個網站，仿佛進入了一家實體唱片店，在這裏，你可以找到晦澀的放克，爵士樂和朋克音樂，聽到可能不會引起太多關注的音樂。

他們的網站很好地代表了他們發布的許多流派。網站還有很多關於藝術家以及聲音樣本的背景信息，更全面的了解他們的聲音。

5. San Francisco Museum of Modern Art

網址：https://www.sfmoma.org/

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

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

6. R2D3

網址：http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

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

網站是一種可以教學的工具，R2D3利用網站來圖解機器學習。

R2D3通過“機器學習的可視化介紹”來科普。通過一係列動畫，他們能夠以相對簡單的方式傳達這個複雜的概念。引人入勝的體驗學習知識比盯著教科書中的單詞和數字更有趣。 

R2D3使用引人注目的動畫向我們展示了機器學習的工作原理

7. Lauren Wickware’s portfolio

網址：http://laurenwickware.com/

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

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

8. Poulos Collective

網址：https://www.poulos.co/

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

Poulos Collective是一家專門從事UX設計和策略的設計谘詢公司。它的站點提供了幹淨簡單且最重要的功能體驗。該網站的簡單性是由Stefan Poulos創建的。顏色令人愉悅，文本易於閱讀，並且輕巧的外觀和感覺使加載速度極快，從而提供了出色的用戶體驗。

尋找靈感並進一步推動自己的設計

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

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