數(shù)學(xué)在網(wǎng)站信息架構(gòu)設(shè)計(jì)中的應(yīng)用研究

佟延秋

(重慶交通大學(xué)人文學(xué)院，重慶 400074)

物質(zhì)、能量、信息是構(gòu)成人類社會生活的3個(gè)基本要素，當(dāng)今社會豐富的信息資源和廣泛的信息渠道，使信息變得像空氣一樣無處不在且又非常重要［1］。網(wǎng)站是現(xiàn)代社會獲取信息的重要途徑。然而，隨著網(wǎng)站數(shù)量的增加與規(guī)模的不斷擴(kuò)大，其結(jié)構(gòu)也變得日趨復(fù)雜［2］。對于網(wǎng)站使用者來說，要想找到相關(guān)信息則變得越發(fā)困難［3］。搜索引擎的出現(xiàn)僅僅是解決了如何找到信息入口的問題。而信息架構(gòu)才是問題的最后一公里所在。為了解決信息爆炸和信息不相關(guān)等問題，需要在不影響用戶訪問體驗(yàn)的同時(shí)，對這些復(fù)雜信息進(jìn)行分類與組織，采用與網(wǎng)站內(nèi)容相關(guān)聯(lián)的視覺語言詮釋用戶需求與網(wǎng)站功能［4］。

一、信息架構(gòu)

信息架構(gòu)(Information Architecture，IA)的概念源自數(shù)據(jù)庫設(shè)計(jì)領(lǐng)域，由美國建筑師沃爾曼理查德·所羅·烏曼于1976年首次提出。它是組織信息與設(shè)計(jì)信息環(huán)境、信息空間與信息體系結(jié)構(gòu)的一門科學(xué)和藝術(shù)，其核心思想是讓信息易于訪問和理解。信息架構(gòu)關(guān)注內(nèi)容結(jié)構(gòu)，即如何將信息內(nèi)容組織好并進(jìn)行標(biāo)注以便用戶容易找到所需的信息［5］。

在網(wǎng)站項(xiàng)目計(jì)劃階段，信息架構(gòu)設(shè)計(jì)主要包括:內(nèi)容分類計(jì)劃、一致的網(wǎng)站屬性、整體網(wǎng)站的內(nèi)容框架。信息架構(gòu)設(shè)計(jì)的結(jié)果是制作出頁面“線框圖”，同時(shí)采用圖表頁網(wǎng)格來說明頁面不同區(qū)域的功能，尤其要標(biāo)明網(wǎng)站導(dǎo)航和頁面內(nèi)容［6］。線框圖作為信息架構(gòu)的一種可視化表示，是表達(dá)抽象網(wǎng)站設(shè)計(jì)理念的重要方式。線框圖能夠?qū)撁娌煌瑓^(qū)域的功能進(jìn)行描述，如圖1所示為某網(wǎng)站信息架構(gòu)線框圖。

信息架構(gòu)的設(shè)計(jì)涉及到情境、使用者和內(nèi)容三大要素，是一個(gè)信息整理、信息系統(tǒng)技術(shù)設(shè)計(jì)與使用者需求分析的過程，主要是將信息變成一個(gè)經(jīng)過組織、歸類以及具有瀏覽體系的組合結(jié)構(gòu)［7］。文獻(xiàn)分析表明，現(xiàn)有的關(guān)于網(wǎng)站信息架構(gòu)設(shè)計(jì)的研究主要集中在兩個(gè)方面:一是基于設(shè)計(jì)的視角;二是基于系統(tǒng)化的視角。前者主要采用視覺設(shè)計(jì)的方法;后者則應(yīng)用計(jì)算機(jī)算法。本研究將采用數(shù)與圖相結(jié)合的方法對網(wǎng)站信息架構(gòu)設(shè)計(jì)進(jìn)行研究。

二、數(shù)學(xué)用于信息架構(gòu)設(shè)計(jì)的可能性

每當(dāng)提及數(shù)學(xué)，很多人會將其看作是數(shù)字和方程。然而，在自然界和宇宙中，小到一片貝殼、大到宇宙星系，在其美麗背后均隱藏著數(shù)學(xué)特性。誠如伽利略所言:“自然這部大書只能被那些通曉其中所寫語言的人閱讀，這種語言就是數(shù)學(xué)。”

公元前500年左右，古埃及和古巴比倫時(shí)期將數(shù)學(xué)認(rèn)為是有關(guān)數(shù)字(number)的學(xué)問［8］1。而公元前500年到公元300年期間的希臘數(shù)學(xué)時(shí)代，則更關(guān)心幾何學(xué)(geometry)。所以，數(shù)學(xué)不只是研究數(shù)字的學(xué)問，也是有關(guān)形狀(shape)的學(xué)問。現(xiàn)代研究將數(shù)學(xué)認(rèn)為是模式的科學(xué)——數(shù)學(xué)能讓不可見變?yōu)榭梢?Mathematics makes the invisible visible)。劍橋物理學(xué)家約翰·波爾金霍恩(John Polkinhorne)在1986年寫道:數(shù)學(xué)是打開屋里宇宙之鎖的那一把抽象鑰匙［8］11。

在藝術(shù)領(lǐng)域，數(shù)學(xué)一直以來都受到建筑設(shè)計(jì)的青睞。而在音樂領(lǐng)域，人們對數(shù)學(xué)與音樂之間聯(lián)系的研究和認(rèn)識可以說源遠(yuǎn)流長。其中，最早可以追溯到公元前6世紀(jì)。當(dāng)時(shí)畢達(dá)哥拉斯學(xué)派用比率將數(shù)學(xué)與音樂聯(lián)系起來，斐波那契數(shù)列被用于確定音階。號稱樂器之王的鋼琴，它的鍵盤恰好與斐波那契數(shù)列有關(guān)。在鋼琴的鍵盤上，從一個(gè) C鍵到下一個(gè)C鍵就是音樂中的一個(gè)八度音程，如圖2所示。這其中共包括13個(gè)鍵，有8個(gè)白鍵和5個(gè)黑鍵;其中5個(gè)黑鍵分成2組，一組有2個(gè)黑鍵，另一組有3個(gè)黑鍵。2、3、5、8、13恰好就是著名的斐波那契數(shù)列中的前幾個(gè)數(shù)。

在當(dāng)今這個(gè)被信息、通信和計(jì)算機(jī)所支配的時(shí)代，數(shù)學(xué)正在尋找新的鎖來開啟。事實(shí)上，我們生命的任何方面已經(jīng)很少不受到數(shù)學(xué)的影響，唯程度多寡不同而已;抽象的模式正是思維、溝通、社會乃至于生命的本質(zhì)。作為完全的人類創(chuàng)造，數(shù)學(xué)的研究最終將成為人文本身。但從目前來看，數(shù)學(xué)在網(wǎng)站設(shè)計(jì)中卻很少使用。這可能是由于大多數(shù)的人們都將數(shù)學(xué)與創(chuàng)意相對立所致。其實(shí)，數(shù)學(xué)是美麗的。古代最偉大的哲學(xué)家之一，亞里士多德說過:“秩序和對稱是美的重要因素，而這兩點(diǎn)都能在數(shù)學(xué)中找到。”數(shù)學(xué)家普洛克拉斯曾說過:“哪里有數(shù)學(xué)，哪里就有美。”我們可以將數(shù)學(xué)作為制造創(chuàng)意的工具來看待。下面我們將利用幾個(gè)簡單的數(shù)學(xué)原理來說明數(shù)學(xué)是如何被用于網(wǎng)站信息架構(gòu)設(shè)計(jì)的。

三、應(yīng)用數(shù)學(xué)進(jìn)行網(wǎng)站信息架構(gòu)設(shè)計(jì)

(一)基于黃金分割率的信息架構(gòu)

黃金分割率也被稱為神圣比例，它屬于無理數(shù)，其值約為1.618 033 987。如圖3所示，將一條線段分割為a、b兩部分，且a大于b，如果a與b之和與a的比值等于a與b的比值，則稱這個(gè)比值為黃金分割率的數(shù)值(可以是1.618∶1 或 1∶0.618)［9］。

黃金分割率以嚴(yán)格的比例性、藝術(shù)性、和諧性，蘊(yùn)藏著豐富的美學(xué)價(jià)值。而黃金矩形則能夠給畫面帶來美感，令人愉悅。所謂黃金矩形就是矩形的長邊與短邊之比為1.618的矩形。很多藝術(shù)品以及大自然中都能見到黃金矩形，如希臘雅典的巴特農(nóng)神廟、達(dá)芬奇的臉等。

在下面的銀河系星云信息展示網(wǎng)站中，它由多個(gè)信息塊構(gòu)成，每個(gè)塊包括星云名稱、星云照片、距地球距離、直徑、質(zhì)量、編號、發(fā)現(xiàn)時(shí)間、發(fā)現(xiàn)者。在由文字及圖片構(gòu)成的星云信息集合的尺寸為346×214像素，它們的長寬比346/214約等于1.618，這符合黃金比例。在如圖4所示的頁面布局中，雖然在每個(gè)由文字及圖片所構(gòu)成的黃金矩形區(qū)域內(nèi)，僅使用很少的顏色，且所有塊僅是簡單的排列，但通過一個(gè)簡單的水平滾動條卻創(chuàng)造出非常顯著的用戶體驗(yàn)。

基于黃金矩形的信息架構(gòu)的核心在于信息塊的構(gòu)建，而單純的黃金矩形集合并不能帶來一個(gè)專業(yè)、美觀的設(shè)計(jì)。因此，在具體的設(shè)計(jì)過程中還需要緊密結(jié)合網(wǎng)格、對齊、接近和強(qiáng)調(diào)等設(shè)計(jì)原則，來實(shí)現(xiàn)這種架構(gòu)的主要目標(biāo)。如果再加上一個(gè)基于專業(yè)的交互性框架(比如jQuery)，對于黃金矩形將是一個(gè)很大的幫助。

(二)基于斐波納契數(shù)列的信息架構(gòu)

根據(jù)定義，斐波那契數(shù)列的前兩個(gè)數(shù)字是0和1，而余下的每一個(gè)數(shù)字是前兩個(gè)數(shù)字之和。斐波那契序列越高，它的數(shù)字之間的相互關(guān)系就越接近黃金分割率。在下面的斐波那契序列中，最后兩個(gè)數(shù)值337與233的比值約為1.618，接近黃金分割率。

0，1，1，2，3，5，8，13，21，34，55，89，144，233，377……

在網(wǎng)站信息架構(gòu)設(shè)計(jì)中，我們依然可以利用斐波那契數(shù)列進(jìn)行內(nèi)容與形式方面的設(shè)計(jì)。但是，如果按照斐波納契數(shù)列進(jìn)行視覺設(shè)計(jì)的話，你會發(fā)現(xiàn)它的設(shè)計(jì)過于呆板且難以閱讀和瀏覽。事實(shí)上，數(shù)學(xué)僅是為我們提供了一個(gè)指導(dǎo)原則，在網(wǎng)站信息架構(gòu)設(shè)計(jì)中我們需要?jiǎng)?chuàng)造性地應(yīng)用數(shù)學(xué)，而不是盲目遵從規(guī)則。

在矩形中按照黃金比率旋進(jìn)漸進(jìn)無限分割，切點(diǎn)的連線形成對數(shù)螺旋線。黃金螺旋源自斐波那契數(shù)列，利用邊長為1的正方形，變成另一個(gè)邊長為2的正方形，且不斷的遞歸，就可以形成所謂的黃金矩形，再以每一個(gè)正方形的對角線為半徑畫圓弧，連接而成就是黃金螺旋。按照黃金螺旋進(jìn)行頁面布局的效果如圖5所示。

隱藏在這種設(shè)計(jì)背后的主要思想是，當(dāng)確定內(nèi)容區(qū)域或者頁面?zhèn)冗厵诘臅r(shí)候就可以使用斐波那契數(shù)列。而黃金分割率和斐波納契數(shù)列能夠讓設(shè)計(jì)師構(gòu)建穩(wěn)定的頁面容器或者頁面容器中的區(qū)塊。在一般情況下，使用斐波那契數(shù)列構(gòu)建網(wǎng)站信息架構(gòu)是很容易的。首先，創(chuàng)建一個(gè)基本寬度/高度。然后，再根據(jù)這個(gè)基本寬度/高度，在斐波那契數(shù)列中確定其他區(qū)塊的寬度/高度。根據(jù)計(jì)算結(jié)果，將它們設(shè)定為頁面中的網(wǎng)頁塊。讓我們來看下面的例子，一個(gè)基于斐波納契數(shù)列的頁面布局，如圖6所示。

從圖6中可以看到，頁面被分成三行。每一行對應(yīng)一個(gè)斐波那契數(shù)。這樣的設(shè)計(jì)，第一行的寬度為190像素，第二行的高度為80像素，第三行的寬度為110像素。在使用斐波那契數(shù)列時(shí)，不一定要嚴(yán)格按照數(shù)列進(jìn)行，否則會顯得設(shè)計(jì)過于死板。在如圖6所示的布局中，3個(gè)行高就沒有嚴(yán)格按照斐波那契數(shù)列的順序進(jìn)行布局。

(三)基于坤德里幾何的信息架構(gòu)

坤德里幾何是一種簡單的圖形。它是將一個(gè)正方形的兩條對角線連接后，再連接正方形每條邊上的中點(diǎn)，便得到坤德里圖形，如圖7所示［10］。

我們依然可以基于坤德里幾何構(gòu)建我們的網(wǎng)站信息架構(gòu)［11］。如圖8所示的家居展示網(wǎng)站，便是基于坤德里幾何的信息架構(gòu)。通過點(diǎn)擊頁面中4個(gè)元素，便可以顯示更多相關(guān)的信息。如果想讓交互效果更加生動的話，可以使用jQuery、Dojo或者是Ex JS4等Javascrip框架。

四、結(jié)束語

隨著網(wǎng)站的高速發(fā)展和最佳實(shí)踐的不斷深入，網(wǎng)站建設(shè)方法也在日益成熟，信息架構(gòu)提供了完善的網(wǎng)站信息系統(tǒng)建設(shè)的理論與方法。信息架構(gòu)已經(jīng)成為網(wǎng)站交互設(shè)計(jì)的一個(gè)重要部分，在增強(qiáng)用戶體驗(yàn)方面具有重要作用。因此，設(shè)計(jì)師要對多種不同的信息架構(gòu)方式深入了解，明晰各種架構(gòu)方式的特色、優(yōu)點(diǎn)與局限，有的放矢地應(yīng)用，設(shè)計(jì)出符合用戶預(yù)期的產(chǎn)品，為用戶提供高水平、高質(zhì)量的信息和服務(wù)。

［1］Lorigo L，Haridasan M，Brynjarsdóttir H，et al.Eye Tracking and Online Search:Lessons Learned and Challenges Ahead［J］.Journal of the American Society for Information Science and Technology，2008，59(7):1041－1052.

［2］Huang T K，F(xiàn)u L.Understanding user interface needs of e-commerce web sites［J］.Behaviour ＆ Information Technology，2009，28(5):461－469.

［3］Chiou W C，Lin C C，Perng C.A strategic framework for website evaluation based on a review of the literature from 1992－2006［J］.Information ＆ Management，2010，47(5－6):282－292.

［4］Ting I H，Kimble C，Kudenko D.Finding unexpected navigation behavior in clickstream data for website design improment［J］.Journal of Web Engineering 2009，8(1):71－92.

［5］［美］莫洛根.信息架構(gòu)學(xué)［M］.詹青龍，吳戰(zhàn)杰，譯.上海:華東大學(xué)出版社，2008:23.

［6］Partrick J.Lynch S H .優(yōu)秀網(wǎng)站設(shè)計(jì)［M］.李靜，譯.北京:機(jī)械工業(yè)出版社，2012:4.

［7］Peter M，Louis R.Web信息架構(gòu)［M］.陳健勛，譯.北京:電子工業(yè)出版社，2008:32.

［8］(美)齊斯﹒德福林.數(shù)學(xué)的語言［M］.洪萬生，譯.桂林:廣西師范大學(xué)出版社，2013.

［9］維基百科.黃金分割率［EB/OL］.http://zh.wikipedia.org/zh/%E9%BB%83%E9%87%91%E5%88%86%E5%89%B2%E6%95%B8.

［10］Steven B.How To Use Size，Scale，And Proportion In Web Design ［EB/OL］.http://www.vanseodesign.com/webdesign/size-scale-proportion.

［11］Carrie C.Intentional or Not:Mathematical Theory in Design［EB/OL］.http://designsha-ck.net/articles/i-ntentional-or-not-mathematical-theory-in-design.