點、線、面是構成視覺空間的基本元素,是表現視覺形象的基本設計語言。網頁設計實際上就是如何經營好三者的關系,因為不管是任何視覺形象或者版式構成,歸結到底,都可以歸納為點、線和面。
一個按鈕,一個文字是一個點。
幾個按鈕或者幾個文字的排列形成線。
線的移動或者數行文字或者一塊空白可以理解為面。
點、線、面相互依存,相互作用;可以組合成各種各樣的視覺形象,千變萬化的視覺空間。
1. 點的視覺構成
在網頁中,一個單獨而細小的形象可以稱之為點。點是相比較而言的,比如一個漢字是由很多筆劃組成的,但是在整個頁面中,他可以稱為一個點。點也可以是一個網頁中相對微小單純的視覺形象,如一個按鈕(BUTTON),一個LOGO等等。
需要說明的是,并不是只有圓的形才叫一個點,方形,三角,自由形都可以作為視覺上的點,點是相對線和面而存在的視覺元素。
點是構成網頁的最基本單位,在網頁設計中,經常需要我們主觀的加些點,如在新聞的標題后加個NEW,在每小行文字的前面加個方或者圓的點。
點在頁面中起到活潑生動的作用,使用得當,甚至可以是畫龍點睛的。
一個網頁往往需要有數量不等,形狀各異的點來構成。點的形狀、方向、大小、位置、聚集,發散,能夠給人帶來不同的心理感受。
下面我們就具體的頁面,談談點的運用和表現。
例一:
http://www.spearedpeanut.com
在這個頁面中,只有唯一的一個點,四周是大量的空白。他馬上成為吸引視線,引發興趣的視覺中心。而這個視覺中心就應該是你想表達的主題,效果是最直接明確的。
在你實際瀏覽這個頁面的時候,這個處于三維空間點(花生)旁邊環繞著一段電腦聯線。三維技術的運用,更突出了這個視覺中心,讓你迫不及待的點擊進入下一級頁面。
http://www.spearedpeanut.com/guts/index_fla3.html
這是同一網站二級頁面中的一個,我們可以將每一組形看做是一個點,如NEWS可以稱做點,右下角還有四個點。所有的點互相呼應,組成不穩定的三角構圖。在這個頁面中,重復出現了用三維動態技術表現,最吸引視線的首頁的點(花生)。
同一視覺形象(點)的不斷重復出現,能夠增加瀏覽者的印象。
例二:
http://www.terra.com/mtv/
在這個頁面的下部,點的水平排列,形成平穩,安詳的線的感覺。
三種形狀相似的點隨著點擊產生的顏色變化,同時在頁面中心位置出現不同的產品圖片,給大家一種跳躍,動蕩,歡快的感受。
在頁面中四處飄蕩的點(TOP10的圖標)和由左至右移動的文字(也是由點組成),加強了頁面的活躍氣氛。
在同一個空間里面體現了兩種不同情緒的動態的對比,這也是網頁相對傳統平面媒體的極大優勢。
做為呼應,設計師特意在頁面的中上部,采用了很多較小的點做底紋,起到了豐富頁面層次的作用。
頁面上下兩段橫向的色條,強調了水平線的穩定情緒,將頁面統一起來。
在這個二級頁面中,右邊垂直排列的圓點(由1到10),起到了引導視線和強調次序的作用。
點的等距垂直排列,在視覺上形成虛擬的豎線。加上段落文字的共同邊距,在視覺上形成豎線,起到分割頁面的作用。
例三:
http://web.one.net.au/~pipshea/
在這個頁面中,點的大小,位置,顏色,聚散的不同變化和組合,產生了輕松,活潑,流動,抒情,愉快的氣氛。
通過優美的弧線的引導,人們的視線最終將集中在"wasabi:sneaker"這幾個由點組成的文字上。自然,這也是設計師所要突出訴求的主題之一。
http://web.one.net.au/~pipshea/frameset.htm
在二級頁面中,設計師采用了流行的FLASH技術,紅點在頁面上歡快的運動,同時進行顏色的漸變;綠色的點加上點綴其中的深色小點,豐富了色彩和層次。整個網頁的流動著歡快和輕松。
在頁面下部,設計師并列運用高低顏色不同的點,若隱若現,突出了頁面以點造型的設計語言。
注意在兩個頁面中都出現了三個斜向排列的帶有漸變色的點。它為頁面增加了動勢和前后的空間層次,實屬不容忽視的精彩之處!
[ 作者:零度網絡科技 類別:設計理論 ]