單欄或是多欄

鄭建鵬

十七世紀(jì)末期，熱衷文化改革的法國路易十四國王立志要在當(dāng)時先進的印刷業(yè)中展現(xiàn)法蘭西王國的榮耀，他命令成立皇家印刷管理委員會，并設(shè)計專門字體，以規(guī)范皇家所用的各種印刷材料。在數(shù)學(xué)家Nicolas Jaugeon的帶領(lǐng)下，委員會以羅馬字體為基礎(chǔ)，采用64×64方格的形式設(shè)計每一個字母。這即是平面設(shè)計柵格系統(tǒng)的最早緣起。及至二十世紀(jì)四十年代，在瑞士平面設(shè)計派的大力倡導(dǎo)下，柵格系統(tǒng)及在其基礎(chǔ)上形成的網(wǎng)格化平面設(shè)計模式風(fēng)靡全世界，并且直到現(xiàn)在還影響著網(wǎng)頁設(shè)計的形態(tài)。

在網(wǎng)格化的平面設(shè)計觀念下，整個網(wǎng)頁被劃分為一個或多個方格，網(wǎng)頁設(shè)計稱之為“欄”，而網(wǎng)頁由單欄還是多欄構(gòu)成也逐漸成為影響網(wǎng)頁信息傳達的直接要素之一。從單純數(shù)量角度看，單欄似乎比多欄更能體現(xiàn)簡潔明快的設(shè)計潮流，但實際情況并非如此，隨著媒體終端屏幕大小與顯示分辨率高低的不斷變化，以及現(xiàn)代社會人們對信息獲取速度和效率的無限渴求，如何在短時間內(nèi)獲得更多的信息量成為人們考核媒體質(zhì)量優(yōu)劣的重要指標(biāo)。從這一角度看，多欄網(wǎng)頁似乎能在某一時段內(nèi)傳達更大的信息容量，呈現(xiàn)更多的信息內(nèi)涵，多欄也順理成章地成為比單欄更簡潔、更高效的網(wǎng)頁創(chuàng)意與設(shè)計方式。

多欄網(wǎng)站在信息可讀性、內(nèi)容集中性和視覺吸引力方面具有得天獨厚的優(yōu)勢。就內(nèi)容可讀性來看，當(dāng)我們把網(wǎng)站內(nèi)容分為兩欄、三欄甚至更多欄時，其內(nèi)容可以很容易地在各種顯示器上實現(xiàn)。而且以多個窄條形態(tài)出現(xiàn)的內(nèi)容，從認(rèn)知的整體性特征來講，也更容易被瀏覽者快速認(rèn)知和閱讀。就內(nèi)容集中性來看，多欄網(wǎng)站使用較短的行或列，成組的內(nèi)容使得瀏覽者可以很容易地讀完大量相對完整的內(nèi)容，而不至于被旁邊的圖片、廣告轉(zhuǎn)移注意力。從視覺吸引力角度看，多欄設(shè)計能夠使文本、圖片、橫幅廣告、Flash、視頻等內(nèi)容各自獨立呈現(xiàn)，形成錯綜多彩的視覺效果。

The Web Showroom是澳大利亞一家網(wǎng)絡(luò)設(shè)計公司，其專長在于綜合性的網(wǎng)站設(shè)計、制作和運營能力。公司官方網(wǎng)站運用清晰簡潔的多欄形態(tài)向瀏覽者展示團隊基本情況、所獲獎項、媒體報道、業(yè)務(wù)內(nèi)容、操作案例等諸多內(nèi)容。網(wǎng)站沒有采用單一的分欄方式，而是根據(jù)內(nèi)容分類和表達需要自上而下綜合使用單欄、兩欄、四欄等多種形態(tài)。這種多欄的交叉運用，使網(wǎng)頁避免了單調(diào)乏味，更顯活潑生動與個性化。

部分多欄網(wǎng)站的分欄方式并不會像上述案例那樣自上而下產(chǎn)生多樣復(fù)雜的變化，它們更喜歡采用欄與欄之間高度、寬度相等或具有固定比例關(guān)系的上下貫通式的分欄方法，使頁面看起來更加簡潔明快，不同內(nèi)容之間也更加涇渭分明?！禨F Arts》是一本反映舊金山藝術(shù)領(lǐng)域狀態(tài)的雜志，其網(wǎng)站被設(shè)計為上下貫通的四欄，自左至右，首欄作為展示標(biāo)題性內(nèi)容的空間，其寬度是其他三欄的兩倍。網(wǎng)站的簡潔化分欄設(shè)計很好地照顧到了iPad、iPhone等移動設(shè)備使用者的瀏覽體驗。

多欄網(wǎng)站的劣勢也很明顯，首先網(wǎng)站多欄化設(shè)計是受報紙版面影響的，但報紙的閱讀方式和網(wǎng)頁不同。同一個頁面，因為顯示器尺寸問題，網(wǎng)站瀏覽者可能會存在自上而下閱讀完一欄后，還要滑動鼠標(biāo)滾輪，回到頁面上端開始第二欄閱讀的不便。而報紙并不存在這種情況，人們只要攤開報紙就可以一眼看到所有的內(nèi)容。其次，隨著多媒體終端的日益多樣化和移動互聯(lián)技術(shù)的飛速進步，人們不再僅僅只在PC上瀏覽網(wǎng)頁，平板電腦、智能手機等各種形式的顯示設(shè)備越來越普及，相應(yīng)的，網(wǎng)站可適應(yīng)性成為衡量網(wǎng)站設(shè)計現(xiàn)代化的一大標(biāo)準(zhǔn)。對于多欄網(wǎng)站來說，豐富的文本內(nèi)容可能無法在平板電腦、智能手機等小屏幕顯示器上完整呈現(xiàn)。不過，這倒激發(fā)了多欄網(wǎng)站規(guī)劃與設(shè)計的動力，能夠在多種顯示終端上完美呈現(xiàn)內(nèi)容，并且更利于這種網(wǎng)站的設(shè)計者規(guī)劃和傳達重點內(nèi)容，而非面面俱到。一些網(wǎng)站甚至已經(jīng)開始變被動地適應(yīng)小屏為主動迎合小屏，簡潔而醒目的雙欄內(nèi)容設(shè)計不再是平板電腦等顯示屏的專屬，而是成為網(wǎng)站設(shè)計的標(biāo)配。

在網(wǎng)站設(shè)計中，單欄還是多欄，優(yōu)劣勢并存。正如從現(xiàn)代主義的“l(fā)ess is more”發(fā)展到后現(xiàn)代主義的“l(fā)ess is bore”一樣，也許數(shù)量從來都不是衡量簡潔現(xiàn)代與否的真正標(biāo)準(zhǔn)，更別說是唯一標(biāo)準(zhǔn)。對網(wǎng)頁設(shè)計來說，“現(xiàn)代”的含義更應(yīng)該是信息獲取、處理與加工的便利，是人們在網(wǎng)頁瀏覽過程中感受到的愉悅的個性化體驗。

鏈接

www.sanga-ryokan.com

日本黑川溫泉山河旅店網(wǎng)站。上下貫通式的雙欄設(shè)計，左右兩欄寬度相等，平分整個頁面，左欄作為標(biāo)題欄和導(dǎo)航欄，右欄則作為圖片內(nèi)容展示欄。整個首頁簡單明了，左欄為白色背景加簡單文字，大量留白，右欄則充滿圖片，一實一虛，對比鮮明。

www.v76.com

男士美發(fā)品牌V76官方網(wǎng)站。橫欄與豎欄混合的網(wǎng)站設(shè)計，首頁先被自左而右地分為三個豎欄區(qū)域，首欄寬度為其余兩個區(qū)域的兩倍，不過在后兩個區(qū)域內(nèi)又劃分出多個橫欄，展現(xiàn)不同主題內(nèi)容。所有分欄都以圖片作為展示主體，配以簡單文字，頁面整潔規(guī)范，層次清晰。

huaban.com

花瓣網(wǎng)。瀑布流式網(wǎng)站布局的代表，這種多欄網(wǎng)站的設(shè)計方式最早源自Pinterest，現(xiàn)在已在國內(nèi)蔓延開來。瀑布流網(wǎng)站多數(shù)為小清新風(fēng)格的網(wǎng)站。形式上為多個參差不齊的文圖配合的豎形分欄，整體上看來像瀑布一樣。

sberbank1.ru

俄羅斯聯(lián)邦儲蓄銀行網(wǎng)站。首頁以大圖片為背景，以點狀細線將頁面劃分為六個上下貫通但寬度不等的豎欄。欄內(nèi)文字內(nèi)容多少不一，但都以不同色塊襯托。隨著鼠標(biāo)滑動，頁面內(nèi)容出現(xiàn)變化時，六個豎欄的寬度還會隨著區(qū)域內(nèi)文字的多少而出現(xiàn)相應(yīng)變化。

outdatedbrowser.com

瀏覽器對比網(wǎng)站。網(wǎng)站收集了時下人們使用較多的五種瀏覽器：Chrome、火狐、IE、Safari和歐朋，并提供每種瀏覽器的最新版本下載。網(wǎng)站為每個瀏覽器設(shè)計了一個上下貫通的分欄，并配以不同背景色彩。無鼠標(biāo)接觸時，各分欄寬度相等；有鼠標(biāo)接觸時，相應(yīng)分欄寬度變?yōu)槠渌謾诘膬杀?。endprint