佟延秋

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

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

一、信息架構

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

在網站項目計劃階段，信息架構設計主要包括:內容分類計劃、一致的網站屬性、整體網站的內容框架。信息架構設計的結果是制作出頁面“線框圖”，同時采用圖表頁網格來說明頁面不同區(qū)域的功能，尤其要標明網站導航和頁面內容［6］。線框圖作為信息架構的一種可視化表示，是表達抽象網站設計理念的重要方式。線框圖能夠對頁面不同區(qū)域的功能進行描述，如圖1所示為某網站信息架構線框圖。

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

二、數(shù)學用于信息架構設計的可能性

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

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

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

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

三、應用數(shù)學進行網站信息架構設計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結束語

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

［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］［美］莫洛根.信息架構學［M］.詹青龍，吳戰(zhàn)杰，譯.上海:華東大學出版社，2008:23.

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

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

［8］(美)齊斯﹒德福林.數(shù)學的語言［M］.洪萬生，譯.桂林:廣西師范大學出版社，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.