單欄或是多欄

鄭建鵬

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

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

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

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

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

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

在網站設計中，單欄還是多欄，優劣勢并存。正如從現代主義的“less is more”發展到后現代主義的“less is bore”一樣，也許數量從來都不是衡量簡潔現代與否的真正標準，更別說是唯一標準。對網頁設計來說，“現代”的含義更應該是信息獲取、處理與加工的便利，是人們在網頁瀏覽過程中感受到的愉悅的個性化體驗。

鏈接

www.sanga-ryokan.com

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

www.v76.com

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

huaban.com

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

sberbank1.ru

俄羅斯聯邦儲蓄銀行網站。首頁以大圖片為背景，以點狀細線將頁面劃分為六個上下貫通但寬度不等的豎欄。欄內文字內容多少不一，但都以不同色塊襯托。隨著鼠標滑動，頁面內容出現變化時，六個豎欄的寬度還會隨著區域內文字的多少而出現相應變化。

outdatedbrowser.com

瀏覽器對比網站。網站收集了時下人們使用較多的五種瀏覽器：Chrome、火狐、IE、Safari和歐朋，并提供每種瀏覽器的最新版本下載。網站為每個瀏覽器設計了一個上下貫通的分欄，并配以不同背景色彩。無鼠標接觸時，各分欄寬度相等；有鼠標接觸時，相應分欄寬度變為其他分欄的兩倍。endprint