互聯(lián)網(wǎng)網(wǎng)頁界面中的信息設(shè)計研究

員勃

摘要：研究了信息設(shè)計是如何在網(wǎng)頁界面設(shè)計中運用情況。通過闡述信息設(shè)計的涵義，分析信息設(shè)計對于現(xiàn)今網(wǎng)頁界面設(shè)計的重要意義，并結(jié)合現(xiàn)有的網(wǎng)站界面案例中對信息的處理經(jīng)驗，論述了如何進行網(wǎng)頁界面中信息的設(shè)計方法。提出了要創(chuàng)造互聯(lián)網(wǎng)信息快速、靈活的線上交流必須確保網(wǎng)頁界面中的信息構(gòu)架層次清楚，繁瑣信息內(nèi)容圖形化，以及視覺色彩的合理劃分。

關(guān)鍵詞：見面界面；信息設(shè)計

中圖分類號：F49文獻標識碼：A文章編號：16723198（2014）07017303

據(jù)中國工程院院士鄔賀銓統(tǒng)計表示互聯(lián)網(wǎng)上一天產(chǎn)生的信息量約有800EB，如果裝在DVD光盤中要裝1.68億張、裝在硬盤中要裝80萬個。互聯(lián)網(wǎng)的網(wǎng)頁界面里每天容納著海量的訊息、圖片和視頻。那么面對如此巨大的信息量，各個網(wǎng)站的網(wǎng)頁界面該作出怎樣的變化，讓瀏覽者能夠快速輕松的尋找到他們希望了解的網(wǎng)絡(luò)資訊呢？這就需要對網(wǎng)頁中的信息進行設(shè)計。

1信息設(shè)計的涵義

信息設(shè)計的概念大約出現(xiàn)在20世紀70年代，是指用合理的設(shè)計方式分析并組織數(shù)據(jù)和信息，讓數(shù)據(jù)、信息以合理的方式傳播，讓復(fù)雜難懂的數(shù)據(jù)易于理解。信息設(shè)計涵蓋的范圍很廣，各種媒介中出現(xiàn)的信息數(shù)據(jù)以及相關(guān)內(nèi)容都包含在內(nèi)，其中視覺是信息設(shè)計最主要的表現(xiàn)形式。

信息設(shè)計需要把篩選過的數(shù)據(jù)按照一定邏輯思維展現(xiàn)出來，并且保證數(shù)據(jù)的真實性。它可以以不同的方式來陳述信息內(nèi)容，比如圖片、聲音、材質(zhì)或媒介等，讓信息變得更有條理和針對性。

2信息設(shè)計對于媒體網(wǎng)頁界面的重要意義

互聯(lián)網(wǎng)正在進入一個新時代。電腦技術(shù)、網(wǎng)絡(luò)、手機讓收集數(shù)據(jù)變得越來越容易，現(xiàn)在我們每天通過網(wǎng)絡(luò)接觸到的信息量大到無法想象，通過電腦網(wǎng)頁界面或移動手機界面我們獲取全球資訊、網(wǎng)絡(luò)購物、天氣查詢、在線訂票…。

對于媒體網(wǎng)站來說，一個基本現(xiàn)實就是：用戶界面是面向用戶的。用戶需要網(wǎng)站界面滿足需求并易于使用，于是信息設(shè)計在網(wǎng)頁界面的建設(shè)中具有重要意義。其一，大量信息在互聯(lián)網(wǎng)網(wǎng)站界面中傳輸，假使沒有合理的安排，信息的有效處理，網(wǎng)頁界面上呈現(xiàn)出來的就會像一個沒有抽屜而堆滿各種物件的凌亂大櫥柜。相同的空間雖然儲存量沒有變，但是查找辨認度減弱很多，對信息的整理就是在給這個儲存信息的大廚柜安裝抽屜，設(shè)置編碼。通過劃分區(qū)域、圖形、色彩的識別度，方便受眾在最短時間里獲取必須的信息資源。

其二，網(wǎng)站界面除了信息清晰以外，還需要用美化的外觀吸引用戶，大量信息通過什么樣的形式呈現(xiàn)成為核心問題。比如，用戶在網(wǎng)上淘寶時，總希望以最快的速度得到某些信息，例如銷售排名、成分、價格、物流情況、好評情況等等，大段的文字表述和評論總結(jié)，不如運用生動的圖表、有趣的插畫讓信息顯得醒目而有計劃性，讓大量數(shù)據(jù)可視化，使網(wǎng)站界面的互動更加靈活、快速。

3網(wǎng)站界面中的信息設(shè)計

3.1構(gòu)建信息層次

網(wǎng)站的構(gòu)架可以代表一個網(wǎng)站的定位，并且方便用戶瀏覽使用。進入一個網(wǎng)站就好比我們走進一個陌生的大型購物商場，很容易不知所措，不清楚商場銷售的品牌、商場售賣的產(chǎn)品分區(qū)。此時，我們第一反應(yīng)是查看樓層的布局圖，了解每層樓的信息，以及電梯通道的位置。

信息整理乃是籍由導入立場、窮究問題本質(zhì)，以達成真正解決問題的目標。信息層次構(gòu)建的關(guān)鍵是建立設(shè)計原因、作用、順序，以及所涉及的對象，以此確保用戶的體驗可以理解設(shè)計師所要傳達的內(nèi)容。對于網(wǎng)站界面信息的整理和構(gòu)建安排也需要如此，將網(wǎng)站元素高密度融合在一起的同時，需要對網(wǎng)站的定位、瀏覽主要人群、界面中不同內(nèi)容版塊、標題欄層次、鏈接等等信息進行分析、篩選、分類，以使得重要信息能夠優(yōu)先出現(xiàn)，成為網(wǎng)頁首要鏈接以及出現(xiàn)的部分，見圖1。對于現(xiàn)今比較流行的超長網(wǎng)頁設(shè)計來說更是如此。長網(wǎng)頁會堆積更多的內(nèi)容，框架式信息分區(qū)設(shè)計可以基于內(nèi)容的優(yōu)先級來精簡、刪除及隱藏，使核心內(nèi)容、次要內(nèi)容或者非重要內(nèi)容層次清晰，幫助用戶走出迷宮，協(xié)助用戶在滾動網(wǎng)頁上行動自如。

圖1信息層次整理示意圖由于網(wǎng)絡(luò)的信息傳遞越來越多，所以在整理好信息內(nèi)容層次的同時，還需要設(shè)計好界面空間層次。預(yù)計未來網(wǎng)站頁面中的內(nèi)容會以Twitter風格的短內(nèi)容呈現(xiàn)，內(nèi)容會根據(jù)關(guān)注度進行篩選壓縮。目標會過濾感知：與目標無關(guān)的東西會被提前過濾掉，而不會進入到意識層面。例如，超市中同類商品的貨架臺，主打品牌往往會放置在貨架中間位置，也就是顧客伸手可得的位置，方便顧客的快速購買。而放在頂部或貨架最下端的商品往往會被顧客屏蔽掉，這就是空間層次的導向作用。

在網(wǎng)站信息空間構(gòu)建層次時，可以根據(jù)定性和定量研究，并通過頭腦風暴、情景建立等方法對用戶進行功能需求分析，得出用戶的主要需求。經(jīng)過篩選，以最適宜的結(jié)構(gòu)展現(xiàn)訪問信息內(nèi)容可以使導向和所指內(nèi)容不受阻礙地呈現(xiàn)。例如，愛迪生發(fā)明基金的網(wǎng)頁界面內(nèi)容就由不同的抽象排列模型框架組成。其中一個子頁面的界面，主題信息是要展示出愛迪生的每一個專利情況，于是設(shè)計者根據(jù)每個發(fā)明的時間運用螺旋型列表框架進行展現(xiàn)。用戶在瀏覽網(wǎng)站時，鼠標移動時標題會被旋轉(zhuǎn)，跳出目錄提供關(guān)于這個發(fā)明的PDF文件，旋轉(zhuǎn)式的目錄排列排除了許多不必要的圖片以及文字解說，瀏覽者可以根據(jù)自己的興趣最快速度的查找自己想了解的相關(guān)信息，見圖2。

3.2內(nèi)容信息的圖形化

信息圖形化是用視覺化的方式表達數(shù)據(jù)、信息，采用圖片、符號、顏色和文字等要素組織信息，根據(jù)信息內(nèi)容通過設(shè)計師的理解向大眾更好地進行傳達。在網(wǎng)站界面設(shè)計中可以運用視覺化的方式代替以往以大量枯燥文字為主的閱讀方式。通過信息的組織、派生、濃縮、過濾和轉(zhuǎn)換把復(fù)雜數(shù)據(jù)轉(zhuǎn)換成視覺“信息”。

視覺是人類接受外部信息的主要途徑，據(jù)統(tǒng)計有大約75%的外界信息從視覺進入大腦。視覺思維對平面信息獲取效率遠遠高于深度信息。將枯燥的深度數(shù)據(jù)信息解讀成平面化生動的圖表分析講解，將復(fù)雜的規(guī)則描述成易懂的圖片信息內(nèi)容，越來越受用戶的歡迎。人們現(xiàn)在對閱讀的體驗變得越來越挑剔，希望利用有限時間更快速地獲取信息，信息圖形化設(shè)計是在講述超越數(shù)據(jù)的故事，讓數(shù)據(jù)更好地轉(zhuǎn)化成信息、知識。

在網(wǎng)絡(luò)界面中，通常一段內(nèi)容用文字表示，很難突出需要傳達信息的內(nèi)在結(jié)構(gòu)和內(nèi)容重點。圖形化的內(nèi)容不僅能以結(jié)構(gòu)化的形式更好地讓用戶理解，而且在移動平臺上的瀏覽體驗會更加有趣，通過對深度的內(nèi)容加工，將內(nèi)容用合適的形式表現(xiàn)出來，從而更容易打動用戶。在我們熟悉的淘寶網(wǎng)站界面上，常?？梢钥吹綄⒎彪s信息概括為圖表或抽象圖形進行信息傳遞。例如天貓網(wǎng)站上也買酒品牌網(wǎng)站，就通過簡單的流程圖表示了該品牌層層挑選優(yōu)質(zhì)葡萄酒的全過程。對比運用大量文字解說品牌的選酒過程，簡單明確的圖列說明讓顧客一目了然地了解了商品的篩選全過程，同時加強了顧客對于商品價值的可信度，見圖3。在對沖鋒衣的網(wǎng)站介紹上，淘寶運動的界面中也采用環(huán)形圖表的方式將多個品牌在市場上的銷售狀況，以及資金成交情況非常直接的傳遞給了購買客戶。大大節(jié)約了客戶在網(wǎng)上進行篩選、比較信息上所浪費的時間，見圖4。內(nèi)容信息圖形化是對已掌握的信息再加工，通過優(yōu)化設(shè)計符合媒介傳播的需要，它不僅可以展示實物無法看到的部分或細節(jié)，更重要的是還可以幫助顧客做好市場調(diào)查、分類和篩選，將主要信息一目了然的提供給用戶，也使生硬的信息看起來比較柔和。

圖3淘寶網(wǎng)“也買酒”選酒流程圖圖4淘寶網(wǎng)沖鋒衣銷量對比圖表3.3內(nèi)容信息的色彩引導

任何圖形的視覺刺激力與視覺表象大都是由色彩和明度產(chǎn)生的。視覺對形狀的界定是對外輪廓線在色彩與明度方面區(qū)別出決然不同的區(qū)域推導而來的。我們在地鐵換乘的時候都有過這樣的經(jīng)歷，因為地鐵地圖上都會用不同的色彩來區(qū)分各個線路的不同，所以通過地鐵線路的色彩識別就能進行快速的線路選擇。在互聯(lián)網(wǎng)的界面中，色彩也在無聲地引導著瀏覽者進行信息的劃分和選擇。

在互聯(lián)網(wǎng)的各個網(wǎng)站間，我們可以看到不同的信息色彩表達。目前，點擊率較高的網(wǎng)站都會依據(jù)品牌識別系統(tǒng)里的專色顏色進行整個網(wǎng)站的色彩定位，這樣瀏覽者在點擊網(wǎng)頁時一方面可以快速鎖定目標網(wǎng)站，一方面色彩的不斷信息強化會讓瀏覽者通過色彩記憶記住整體網(wǎng)站的設(shè)計風格。例如，我們經(jīng)常瀏覽的新浪微博、美團、淘寶支付寶等等網(wǎng)站來說，都有自己明確的色彩體系。淘寶色彩為橘色，支付寶為藍色，新浪微博為正紅色，美團網(wǎng)則選用的是粉藍綠色。當我們進入不同網(wǎng)站界面時，色彩在第一時間向我們傳遞出網(wǎng)站間的定位區(qū)別，見圖5。

圖5網(wǎng)站標識色彩在同一個網(wǎng)站下，對于不同專欄、內(nèi)容的導航區(qū)分上也常常采用不同色彩的情感訴求來進行區(qū)分。“Rainbow”科技公司的網(wǎng)站按照界面內(nèi)容信息進行“上、中、下”的三部分格局劃分開來，中間的內(nèi)容版塊通過紅色和藍色圖標以及文字的色彩進行分區(qū)化處理，上下部分的導航鏈接根據(jù)“Rainbow”單詞的中文意思“彩虹”對不同鏈接信息進行色彩區(qū)分，打破傳統(tǒng)導航信息并列在界面上方，并且色調(diào)統(tǒng)一的處理方式，使瀏覽者可以通過色彩關(guān)系快速地尋找到自己需要的信息內(nèi)容，見圖6。

圖6“Rainbow”科技公司網(wǎng)站界面4結(jié)語

隨著網(wǎng)絡(luò)信息的不斷擴大，數(shù)據(jù)需要快速地轉(zhuǎn)化成信息才更有意義。面對信息環(huán)境所賦予的重重壓力，人們會更向往輕松快捷的信息接收過程。按既定的目標把信息按一定的形式去表現(xiàn)和設(shè)計，將大量的信息有序分類、排列，并轉(zhuǎn)化為圖像的過程可以節(jié)約我們在網(wǎng)絡(luò)中尋找重要信息所花費的時間，同時更加方便我們的生活和工作。

參考文獻

[1]孫皓瓊.圖形對話——什么是信息設(shè)計[M].北京：清華大學出版社，2013.

[2]周陟.網(wǎng)頁設(shè)計解析[M].北京：清華大學出版社，2009.

[3]（日）佐藤可士和·佐藤可士和的超整理術(shù)[M].南京：江蘇美術(shù)出版社，2013.

[4]程萍，蔣嘵.基于用戶認知的購物網(wǎng)站導航系統(tǒng)交互設(shè)計準則[J].包裝工程，2012，33（14）：73.

[5]張晴，張凌浩.基于移動互聯(lián)網(wǎng)的交互式智能手機Widget設(shè)計研究[J].包裝工程，2012，33（8）：62.

[6]（美）蒂莫西·薩馬拉.完成設(shè)計—從理論到實踐[M].溫迪，譯.南寧：廣西美術(shù)出版社，2010.

[7]WARE Colin.設(shè)計中的視覺思維[M].陳媛媛，譯.北京：機械工業(yè)出版社，2009.

[8]傅小貞，胡甲超，鄭元攏.移動設(shè)計[M].北京：電子工業(yè)出版社，2013.