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

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

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

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

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

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

跳出框架思考

第一個(gè)問(wèn)題：為什么？

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

第二個(gè)問(wèn)題：怎樣與眾不同？

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

基本概念

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

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

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

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

五個(gè)網(wǎng)站實(shí)例

那么怎樣可以把創(chuàng)造性、可讀性和可用性這些特性完美的組合在一起？我們可以看看下面這些網(wǎng)站、他們?cè)谧鲆恍┬路f的、意想不到又相當(dāng)精彩的事情。

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

另外要記住，一些“瘋狂”的想法可能會(huì)失敗。那沒(méi)什么大不了。歸納總結(jié)、不斷學(xué)習(xí)，然后開(kāi)始下一個(gè)偉大的想法。

本文由 騰訊ISUX 版權(quán)所有