那些富有趣味令人著迷的網站 網頁設計創新式佈局與交互

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

設想並構建出區別于常見網站佈局的創新式設計是一件很難的事情，但是一旦把這件事做好，就可以設計出那些最富有趣味又令人著迷的網站。

你幾乎每天都可以見到這些網站，每次看到他們，你都會感慨到：「多希望我當初能夠想到這個點子。 」設計師們正在完成一項了不起的工作，設計出一系列精美的網頁元素並將其組合在一起，這些網頁不但具備可用性，同時又富有新鮮感和原創味道。

奇特的造型、顏色的組合搭配和新穎的導航工具可以設計出那些最富有趣味又令人著迷的網站。

這些網站也同樣難以設想和構建。

但是你永遠不知道什麼可能會引領一場新的趨勢，帶來大量的點擊或者以一種你無法想像的方式「工作「。 對於設計師和開發人員而言，在網頁設計中最需要記住的是無論外觀多麼富有吸引力，一定要保證可用性及效率。 在設計過程中結合創造性的思考，仔細分析關鍵因素，這樣每天都會產生新奇而吸引人的好點子。

跳出框架思考

第一個問題：為什麼?

勾畫網站草圖時，我們為什麼總是用矩形?為什麼總是用某類特定的顏色或字體?為什麼照片都是同樣完美的4*6的長寬比?

第二個問題：怎樣與眾不同?

越來越多的網站通過選擇富有趣味的創新的佈局來回答第二個問題，使用帶有圓角的形狀、富有戲劇效果的圖像、可能並不顯眼的顏色，以這種新的方式來進行頁面的導航和滾動設計。

基本概念

當我們發展一些新的概念時，打破既有模式的關鍵點在於牢記基本概念。 無論網站看起來有多麼酷炫，一定要滿足可讀性和可用性，否則使用者無法流覽訪問網站並與內容產生互動。

設計過程中要時刻思考使用者的行為，想想他們是如何理解和使用網站的。 如果你的使用者是超級技術達人，那麼導航或者滾動設計只要有一點點的小問題就會被凸顯出來。 但是如果你的使用者是電腦小白，那麼你可能只需要關注最基本的導航工具。

使用者訪問你的網站是有目的性的。 當他們進入網站時，他們想要的一定要表現的足夠突出。 確保你的設計可以表達出網站的真正用途-提供資訊諮詢、娛樂、商業等等。

不要嘗試做很多。 挑選一個有趣的想法然後做下去，但是不要嘗試同時做很多事情。 記住，如果你的網站上有太多的東西的話，使用者不會在上面逗留的。 找到一條有趣而獨特的方式與他們溝通互動。

五個網站實例

那麼怎樣可以把創造性、可讀性和可用性這些特性完美的組合在一起?我們可以看看下面這些網站、他們在做一些新穎的、意想不到又相當精彩的事情。

Lowdi正在做一件了不起的工作，通過一些不同尋常的圖形打造視覺的趣味性。 每個色塊不僅有一些特定形式的圓角(或是反向的圓角)，同時這些色塊的形狀也和公司所銷售的產品相似。 即使你不去看螢幕上的Lowdi盒子，你也會想到他。 通過滾動，這個盒子(實際上是一個揚聲器系統)通過一系列彈出式氣泡與你進行交流。 這個想法有趣、新鮮，引人入勝。

網站位址：HTTPs://lowdi.com/

Steve Vorass在他的個人作品網站上採用了流行的 「隱藏式導航「 進行設計。 網站在螢幕的頂部簡單的展示了專案、作品、連絡方式幾個模組的導航，但是頁面中的圖片也同樣具有導航功能。 每張不同的圖片都會跳轉到不同的專案。 更為重要的是，當你的滑鼠懸停在圖片上方時，每張圖片都會提示點擊後打開的內容。 整個網站的設計十分簡潔，這些意想不到的動畫效果同樣如此。

網站位址：HTTP://stevevorass.com/

Caava Design在圖片的選擇和圖形的趣味化上都有出眾的表現，但更富具創意之處在于滾動的設計。 整個網站的設計基於時間軸這一表現形式。 點擊每張圖片都會展示另一維度的資訊內容。 其特別之處在于你甚至不需要通過時間軸來進行導航和瞭解網站。 網站結構清晰，設計精良。

網站位址：HTTP://www.caavadesign.com/

Joint自身定位為創新的商業設計。 而他的網站說明了這一點。 每個頁面都提供了可點擊的選擇區域來進行導航。 設計簡潔，僅僅使用了灰白色系(不包括博客中的彩色照片)，但是滑鼠懸停動畫效果和網站的可讀性是令人驚歎的。 當你在選擇如何流覽網站時，這會令你想要不斷地進行點擊。

網站位址：HTTP://www.jointlondon.com/

Ballantyne將精美的圖片、有趣的圖形和酷炫的滾動效果結果在一起，來吸引使用者的注意。 這個時尚零售網站的案例告訴我們在展示海量產品的同時如何有趣的展示公司資訊。 每次向上滾動三張圖片時，下方會展示一張新的圖片。 滾動會持續在幾屏內，讓你忍不住去看接下來會出現什麼。 除此之外，這種富有個性的斜邊造型令整個圖片流的呈現更具有線性，也更有趣味。

網站位址：HTTP://www.ballantyne.it/

總結

多年以來，我一直聽到設計師在說：不會再有什麼原創理念了。 這種想法很糟糕。 每一天，新的技術和設備都在改變著我們對於網頁設計和設計流程的思考。 離開舒適的位置，走出去來一場頭腦風暴，然後把想法帶回到工作中，要確保包含可用性所必不可少的全部元素。

另外要記住，一些「瘋狂」的想法可能會失敗。 那沒什麼大不了。 歸納總結、不斷學習，然後開始下一個偉大的想法。

原文作者： CARRIE COUSINS

原文連結：HTTP://tympanus.net/codrops/2013/01/24/creative-layouts-and-interactions-in-web-design/

感謝你的閱讀，本文由 騰訊ISUX 版權所有，轉載時請注明出處，違者必究，謝謝你的合作。

注明出處格式：騰訊ISUX (HTTP://isux.tencent.com/creative-web-design.html)