原創及創新網頁佈局設計

原创及创新网页布局设计
佈局是網站的基石。其作用是指引用戶瀏覽網站各組成部分、指明關鍵內容。佈局同時也是網站外觀的關鍵。因此,內容的佈局需要認真仔細的思索。今天Designrock分享一篇說明每個網頁佈局思維不同處的文章給妳喔!


一套原創且新穎的佈局能夠顯著提升網站的用戶體驗,但也不要讓創意影響到了網站的可用性。和往常一樣,我們要設身處地的站在用戶的角度進行思考:我們希望他們最先看到什麼?應當如何最有效地傳達訊息?在設計開始前,以上的問題是必須要提出來的,因為佈局將負責形成設計的其餘方面。

下面的幾​​個網站的佈局不走尋常路,儘管稱不上完美,不過瀏覽這些網站,興許能夠給你帶來創意的火花。

The Drawing Room

個人非常喜歡這個佈局,簡單但又不失有趣。這家工作室將自己的作品以大小不同,相互堆砌的菱形展示於頁面之上。最中央的菱形為公司標誌,表現並不突兀,不會分散對作品的注意力。把鼠標懸停在任意一個菱形上時,其中會顯示該作品的說明介紹。這個簡單的單頁網站佈局簡約而不失創意,同時使用簡單方便。

瀏覽網址:http://acko.net/

Ende

這個佈局極具動態效果。在加載時,首先映入眼簾的是一副古怪的照片,同時頁面會提示你向下滾動。滾動後會顯示導航欄並隨後固定於頁面頂部。個人非常喜歡它的透明導航欄,能夠更進一步打開頁面,展現其後方的內容。網站的內容四散在頁面各處,儘管網站有著一定的結構,但其中每個部分都採用了不同的背景色。這個網站非常顯眼地使用了三欄網格,但有關團隊成員的部分卻突破了網格,以一種異常有趣的方式運用了屏幕空間。

瀏覽網址:http://www.somosende.com/

Wacom

Wacom 的目標受眾廣泛,其中既包括專業人員,也包括非專業的創意人員。作為網站不可或缺的組成部分,其佈局營造出了用戶友好的體驗。左側的導航欄在鼠標懸停時會最小化,並可展示各種不同的可使用內容。用戶可隨心操縱控制,選擇自己想要看的產品,不會被強迫觀看任何銷售辭令。主頁佈局簡單,並可引導用戶查看最適合自己需求的產品。我個人很喜歡網站上伴隨產品的巧妙手繪元素。

瀏覽網址:http://www.wacom.com/zh-tw/

Amsterdam Dance Event

這個網站的佈局非常有助於展現網站所涉及活動的態度和精神。導航欄一直延伸到頁面左側,形成橫跨整個網站的參考節點。以強烈並具有視覺刺激性的圖片組成的幻燈片採用旋轉效果,同時展現有關網站活動的節慶、場地和會議宣傳導讀。從激勵用戶的角度來說,這個方法行之有效。

瀏覽網址:http://www.amsterdam-dance-event.nl/live/

隨著你向下滾動,下方的內容會滑過幻燈片,並將子菜單從底部帶到頂部。網站的每個部分都有橫跨屏幕的banner,作為當前部分具有視覺吸引力的介紹。文章的其餘部分都在網格中呈現。網格中的各行排列並不完美;每列起頭都比上一列略矮一些,堪稱又一個細微但有效的視覺設置。

Cropp

Cropp 具有大膽張狂的個性,正如其佈局所展現。鼠標懸停在任意圖片上時,圖片會像素畫並變得難以識別,從而牢牢抓住人的注意力。頂部的導航欄在所有頁面均保持一致,而主頁則基本上就是導航欄中各個選項的高調視覺呈現。這個網站的佈局牢牢抓住了像素化這一創意,其所有照片和視頻都以方塊形式安置,很像是經過像素化後的圖片。

瀏覽網址:http://www.cropp.com/pl/en/

Neue Yorke

Davy Rudolph 作品集的網格佈局簡單、簡約,讓用戶感到非常直接而自然。其每個頁面都只有兩種顏色,並且為當前頁面所獨用。在點擊任一項目作品後,作品展示將變成頁面主角,同時主導航面會消失。對於一個作品集網站採用這種方法,我個人最讚賞的是其既有個性,同時個性又不至於搶占設計師作品的風頭。

瀏覽網址:http://neueyorke.com/

Esquire

這個網站的佈局簡單、清爽、易於理解。 Esquire的大標題就是單調的黑與白。其文章導讀使用彩色,能夠吸引讀者眼球。懸停特效也很簡單,在導讀標題下方有說明內容。導航欄位於網站中間位置,功能上很類似報紙通過摺頁位置上方的內容引起讀者的興趣。其圖像、顏色和簡介標題也很能吸引用戶注意。

瀏覽網址:http://www.esquire.co.uk/

Institut Choiseul

Intitut Choiseul 採用了很有趣的塊狀佈局,彼此之間就像拼圖一樣契合。層疊式外觀以及色塊能夠有效確立風格。繼續向頁面下方滾動,其佈局轉換成比較傳統的網格形式,但其實每個故事都位於一個大小各不相同的塊內,營造出一種有趣而動態的美感。不同的色塊標誌著網站的不同內容,因此比較方便導航和閱讀。這家網站從質量上說比較精良,和自身設立目的相符。

瀏覽網址:http://choiseul.info/

Award

Award 崇尚創意,其中性的設計美學為設計師的作品搭建起了有效的展現平台。網格化佈局沒有任何會轉移人注意力或產生衝突的邊邊角角,一切以設計師為主角。但其有趣的懸停效果採用了不錯的像素化投射陰影。導航欄固定在頁面左側,搜索和篩選功能固定在頂部。這一導航佈局非常適合於展示網站內容。

瀏覽網址:http://awardonline.com/

The King’s Of Summer

這個Tumblr網站的佈局通過照片、偶現的GIF和電影中的古怪台詞充分展現出了這部電影的魅力。其採用了結構化但並不統一的佈局,滾動瀏覽時頗為有趣。手寫風格的標題也有助於打造類似剪貼簿的感覺。獨特的內容塊佈局形成了很有意思的視覺效果,照片和GIF彼此時而重疊,引導用戶的眼光穿梭於網站之中。作為這部電影的相關網站,其應當能傳遞出這部長篇電影複雜的個性。雖然我沒看過這部電影,但通過這個網站卻能對其略知一二。

瀏覽網址:http://thekingsofsummermovie.com/

World Baking Day

World Baking Day的佈局需要用戶從初入網站開始就進行交互。在頁面加載時,會有一個手繪的動畫箭頭提示你選擇自己的烘烤水平。如果你選擇查看全部水平的所有食譜而不是一次查看一種,則會全屏顯示各種令人食指大動的美食食譜。

瀏覽網址:http://worldbakingday.com/en/

網站佈局把食物打造的有如藝術品一般,其大多數頁面上均展示有烘烤食物的照片,並會引導你前往下一頁面查看食譜信息。食譜信息整齊地分佈在三欄內:食材在左邊、做法在中間、有關提供者的信息在右邊。

Adam Hartwig

這個網站的有趣之處在於它似有似無的佈局。網站使用類似於Flash的動畫文字打造,動畫效果會在整個網站內持續自動播放。即便不點擊查看各個不同內容分類,用戶也能通過動畫幻燈片了解到設計師的作品情況。其動畫效果貫穿始終,同時展示效果也很可愛,充分錶現出了設計師極具創意的個性。

瀏覽網址:http://www.adamhartwig.co.uk/

National Academy Museum

這個佈局比較有層次感,表現出了模塊化的風格。頁面上不同的元素看似彼此重疊,例如,導航欄幾乎占到了整個頁面的四分之三。照片放置於導航欄下方,各個按鈕和標題均使用彩色方塊表現,更能增添模塊化的層疊美感。另外,我比較喜歡導航欄中下拉菜單的投射陰影效果,其具有一種很有趣味的深度。

瀏覽網址:http://www.nationalacademy.org/

Andrew McCarthy

Andrew McCarthy的作品集採用了獨具一格的佈局方式。頁面上充斥著彩色的條帶,有關設計師的詳細信息則需要向下滾動鼠標查看。滾動鼠標時,會有一個像素化的貓形定格動畫隨之運動。這一簡單的創意所帶來的動感讓我大愛不已。另外,這個網站也需要依仗用戶的交互操作。

瀏覽網址:http://andrevv.com/

Designer’s Friend

跟你腦子裡想的設計師網站有點不一樣是吧。 Designer’s Friend看起來更像是網站背後的HTML代碼。你所需知道的所有內容都含在代碼裡,標籤則是標題。其中“Tip of the Day”這個方框的設置非常巧妙,其能夠引導用戶瀏覽整個網站。

瀏覽網址:http://designersfriend.co.uk/

John Jacob

這個作品集網站採用了水平滾動的方式,非常少見。點擊查看任一作品時,其會展開放置到屏幕中央,並顯示為大圖,並配有簡短的介紹說明。說明和作品清單都簡短扼要,不會讓你覺得一直在不同的頁面之間翻來翻去。我很喜歡它的導航欄,所有元素都堆在左上角,設計師的社交網絡鏈接放在右下角,形成了對整個頁面的包裹。設計師對空間的運用非常到位,另外變形效果也很有意思。

瀏覽網址:http://johnjacob.ca/

National LGBT Museum

這個網站給單頁佈局帶來了新的創意。其鼠標滾動方式非常巧妙;滾動時頁面會分成兩半,而兩半則會分別向著相反的方向移動,極具動感效果。各部分都採用了不同的配色,隨著鼠標滾動會拼接到一起。

瀏覽網址:http://nationallgbtmuseum.org/#/home/

Lucas Nikitczuk

我個人非常喜歡Lucas Nikitczuk作品集的佈局,原因就在於其表現出了Lucas的水平。網站開門見山,​​主頁是設計師的簡短自傳以及作品。圓圈圖形帶來了友好和流程的美感。背景上潑濺的油漆奠定了網站的開放和自由特色。導航欄簡單好用,在整個網站內保持一致。另一個值得稱道的地方是,用戶可以使用方向鍵進行導航,這一點對於筆記本用戶來說非常方便。

瀏覽網址:http://www.lucasnikitczuk.com.ar/

最後

佈局是一個網站的基石,同時也是創意工作的重要組成部分。我們應當多多考慮用戶的情況以及他們與網站進行交互的情況。他們是只使用移動設備訪問你的網站嗎?這一點又對佈局有何影響?我希望我所蒐集到的這些信息能夠激發你自己的佈局設計靈感!

原文:http://www.smashingmagazine.com/2013/08/29/innovative-appraoches-web-layout/

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s