員勃

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

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

中圖分類號(hào)：F49文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：16723198（2014）07017303

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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