當前位置: 首頁 > 設(shè)計資訊 > 理論文摘 > 正文

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

2013-08-18 18952 0
  設(shè)想并構(gòu)建出區(qū)別于常見網(wǎng)站布局的創(chuàng)新式設(shè)計是一件很難的事情,但是一旦把這件事做好,就可以設(shè)計出那些最富有趣味又令人著迷的網(wǎng)站。

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

  你幾乎每天都可以見到這些網(wǎng)站,每次看到他們,你都會感慨到:“多希望我當初能夠想到這個點子?!痹O(shè)計師們正在完成一項了不起的工作,設(shè)計出一系列精美的網(wǎng)頁元素并將其組合在一起,這些網(wǎng)頁不但具備可用性,同時又富有新鮮感和原創(chuàng)味道。

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

  這些網(wǎng)站也同樣難以設(shè)想和構(gòu)建。

  但是你永遠不知道什么可能會引領(lǐng)一場新的趨勢,帶來大量的點擊或者以一種你無法想象的方式“工作“。對于設(shè)計師和開發(fā)人員而言,在網(wǎng)頁設(shè)計中最需要記住的是無論外觀多么富有吸引力,一定要保證可用性及效率。在設(shè)計過程中結(jié)合創(chuàng)造性的思考,仔細分析關(guān)鍵因素,這樣每天都會產(chǎn)生新奇而吸引人的好點子。

跳出框架思考

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互


  第一個問題:為什么?

  勾畫網(wǎng)站草圖時,我們?yōu)槭裁纯偸怯镁匦??為什么總是用某類特定的顏色或字體?為什么照片都是同樣完美的4*6的長寬比?

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

  越來越多的網(wǎng)站通過選擇富有趣味的創(chuàng)新的布局來回答第二個問題,使用帶有圓角的形狀、富有戲劇效果的圖像、可能并不顯眼的顏色,以這種新的方式來進行頁面的導(dǎo)航和滾動設(shè)計。

基本概念

  當我們發(fā)展一些新的概念時,打破既有模式的關(guān)鍵點在于牢記基本概念。無論網(wǎng)站看起來有多么酷炫,一定要滿足可讀性和可用性,否則用戶無法瀏覽訪問網(wǎng)站并與內(nèi)容產(chǎn)生互動。

  設(shè)計過程中要時刻思考用戶的行為,想想他們是如何理解和使用網(wǎng)站的。如果你的用戶是超級技術(shù)達人,那么導(dǎo)航或者滾動設(shè)計只要有一點點的小問題就會被凸顯出來。但是如果你的用戶是電腦小白,那么你可能只需要關(guān)注最基本的導(dǎo)航工具。

  用戶訪問你的網(wǎng)站是有目的性的。當他們進入網(wǎng)站時,他們想要的一定要表現(xiàn)的足夠突出。確保你的設(shè)計可以表達出網(wǎng)站的真正用途-提供信息咨詢、娛樂、商業(yè)等等。

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

五個網(wǎng)站實例

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

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

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

  網(wǎng)站地址:https://lowdi.com/

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

  Steve Vorass在他的個人作品網(wǎng)站上采用了流行的 “隱藏式導(dǎo)航“ 進行設(shè)計。網(wǎng)站在屏幕的頂部簡單的展示了項目、作品、聯(lián)系方式幾個模塊的導(dǎo)航,但是頁面中的圖片也同樣具有導(dǎo)航功能。每張不同的圖片都會跳轉(zhuǎn)到不同的項目。更為重要的是,當你的鼠標懸停在圖片上方時,每張圖片都會提示點擊后打開的內(nèi)容。整個網(wǎng)站的設(shè)計十分簡潔,這些意想不到的動畫效果同樣如此。

  網(wǎng)站地址:http://stevevorass.com/

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

  Caava Design在圖片的選擇和圖形的趣味化上都有出眾的表現(xiàn),但更富具創(chuàng)意之處在于滾動的設(shè)計。整個網(wǎng)站的設(shè)計基于時間軸這一表現(xiàn)形式。點擊每張圖片都會展示另一維度的信息內(nèi)容。其特別之處在于你甚至不需要通過時間軸來進行導(dǎo)航和了解網(wǎng)站。網(wǎng)站結(jié)構(gòu)清晰,設(shè)計精良。

  網(wǎng)站地址:http://www.caavadesign.com/

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

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

  網(wǎng)站地址:http://www.jointlondon.com/

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

網(wǎng)頁設(shè)計創(chuàng)新式布局與交互

  Ballantyne將精美的圖片、有趣的圖形和酷炫的滾動效果結(jié)果在一起,來吸引用戶的注意。這個時尚零售網(wǎng)站的案例告訴我們在展示海量產(chǎn)品的同時如何有趣的展示公司信息。每次向上滾動三張圖片時,下方會展示一張新的圖片。滾動會持續(xù)在幾屏內(nèi),讓你忍不住去看接下來會出現(xiàn)什么。除此之外,這種富有個性的斜邊造型令整個圖片流的呈現(xiàn)更具有線性,也更有趣味。

  網(wǎng)站地址:http://www.ballantyne.it/

總結(jié)

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

  另外要記住,一些“瘋狂”的想法可能會失敗。那沒什么大不了。歸納總結(jié)、不斷學(xué)習,然后開始下一個偉大的想法。
215
評論區(qū)(0)
正在加載評論...