當前位置:才華齋>設計>網頁設計>

網頁平面設計基本步驟

網頁設計 閱讀(1.47W)

一個不懂得欣賞優秀網頁作品的設計師可能永遠都無法懂得借鑑的真諦;一個無法將優秀作品的精髓融入到現有需求中的設計師可能永遠都無法找到真正的靈感。 即便是那些看似獨創的設計,其靈感也往往來自設計師在長期借鑑過程中的不斷積累。 設計源於靈感,靈感源於借鑑——這是每個網頁設計師都應該牢記的“成功法則”。詳細介紹如下,更多訊息請關注應屆畢業生網!

網頁平面設計基本步驟

  一、用“原型法”細化網站設計需求

用DW在最短的時間內搭出一個可以瀏覽、跳轉的網站,然後與客戶一起體驗並評估這個網站原形的架構、流程、佈局、配色、文字等不同層面。

  二、網頁連結的深度、廣度和耦合程度

超級連結是網頁設計中最重要的資訊組織方式,也是整個Web世界的精髓所在。但糟糕的連結設計——比如過於氾濫和隨意的超級連結——很可能會讓衝浪者迷失在充斥著資訊碎片的海洋裡。

如果將網站首頁視為連結層次中的第一級,那麼,由首頁中的超級連結得到的,在資訊內容上具有從屬關係的站內頁面就是網頁連結層次中的第二級;從每個第二級頁面又可以繼續得出第三級網頁;依此類推,我們多半可以得到一個完整的樹形連結結構。在這個樹形連結結構中,整棵樹的層數可以被稱為(站內)網頁連結的深度,頁面最多的一層中包含的頁面總數可以被稱為(站內)網頁連結的廣度。一般說來,一個網站的連結深度和廣度最好有一個合適的均衡關係,深度過大的網站不利於衝浪者快速獲取相關資訊,廣度過大的網站則容易讓衝浪者在無數並列的超級連結面前不知所措。

當網頁中的某個連結既沒有指向下一級網頁,也沒有指向上一級網頁時,它必然構成了由當前頁面向跨層級網頁或站外URL的“跳轉”,這種跳轉的出現頻率可以被稱為網頁連結的泛耦合程度。泛耦合程度過低的網站無法有效發揮Web衝浪的價值,由此得到的網站過於死板;另一方面,泛耦合程度較高的網站又有可能造成資訊內容的支離破碎,影響衝浪者的正常閱讀。因此,網頁連結的泛耦合程度應該與網站的設計需求相適應——兒童或動漫類的網站應鼓勵那些代表跳躍式思維的泛耦合連結,而一個學術類的網站則應該對泛耦合連結持相對謹慎的態度。

幾乎每個網頁都有導航欄。對同一個網站內的所有網頁來說,導航欄必須在設計風格上力求統一。否則,衝浪者就需要分別適應每個頁面的導航介面風格,這不但會浪費不少時間,也會嚴重影響整個網站的使用美感。

但這裡所說的統一併不是要求我們為每個網頁設計出一模一樣的導航欄。完全相同的導航欄會讓衝浪者在瀏覽過程中由疲憊而麻木、由麻木而喪失對網站的瀏覽興趣。也就是說,我們應該在統一的整體風格下,在每一個或每一組網頁的.導航欄中尋求細節上的變化。

比方說,我們可以在確保所有導航欄形狀、佈局、字型一致性的基礎上,變換不同導航欄的背景顏色;或者,我們可以在統一了色彩、形狀、字型的情況下,變換不同導航欄的相對位置;再或者,我們還可以變換不同頁面中導航欄的背景圖片——當然,所有背景圖片應當從屬於某種統一的風格——同時保持其他設計元素不變。

“在統一的基礎上尋求變化”——除了導航欄以外,網頁設計師在處理同一頁面或同一網站內的其他設計問題時,這句話也同樣有效。

  三、網頁基本佈局

要尋找網頁佈局方面的靈感並不難。我建議大家沒事兒時多做些摺紙練習:隨手拿起一張A4影印紙,然後根據自己的心情好壞,或平行、或斜向、或選擇任意角度將紙片摺疊幾次,再把紙平攤在面前,紙上呈現出來的摺痕沒準兒就是一種相當不錯的網頁佈局呢!

當然,網頁設計師還是要儘量熟悉那些典型網頁的基本佈局方式,以根據客戶的需要選擇使用。比如,門戶類網頁為了儘可能多地展現資訊內容,通常都會設計成三欄甚至四欄的縱向佈局;公司首頁為了展現強大的企業實力,往往會選擇“視野”更寬闊的橫向佈局;個人主頁為了展示網站主人的個性,其網頁佈局方式也會千差萬別,像軸向佈局、網格佈局、斜角佈局、放射佈局、多中心佈局、離散佈局、對比佈局等等都是常見的個人主頁佈局方式。

  四、網頁空間中的視覺導向

每個網頁都是一個神奇的視覺空間。像我們熟悉的四維時空一樣,網頁空間也有深度、廣度和時間流逝的感覺,甚至還會在設計元素引發的“力”的作用下產生運動或扭曲。

每當我們開啟一個新的網頁後,我們的視線首先會聚焦在網頁中最引人注意的那一點上——我們通常稱其為視覺焦點。隨後,我們的思路會受到視覺焦點周邊設計元素的形狀和分佈方式的影響,並在不知不覺中把視線轉移到另一個值得停留的地方(例如,一段醒目的線條,一種色彩到其近似色的漸變,它們都會讓我們的視線按照設計師預先安排的軌跡移動)。如此繼續下去,視線經過的所有關注點可以連線成一條完整的視覺路徑。

使用視覺路徑引導衝浪者按某種內在的邏輯順序瀏覽網頁資訊的過程可以被稱為網頁空間中的視覺導向。是否能自發、自覺地使用視覺導向的設計方法並根據視覺路徑的走向排列關鍵資訊,這是區別專業網頁設計師和業餘網頁設計師的一個重要依據。

  五、網頁空間的秩序及運動趨勢

網頁空間的秩序是網頁中所有視覺元素相互作用的結果。分析某個特定網頁空間的秩序時,最好把視覺元素抽象為“點”、“線”、“面”三大類,然後分別考察每一類元素之間以及不同型別元素之間的相互作用。

在設計師眼中,每一個視覺元素都可以被看成是“力”的源泉。不同視覺元素釋放出來的“力”的方向和大小不同。一個向右傾斜的三角形可以同時釋放出類似“重力”的垂直作用力和向右的水平作用力。視覺元素和視覺元素通過“力”相互作用,共同影響著整個網頁的空間秩序。

當網頁空間中所有作用力處於平衡狀態時,空間秩序最為穩定,整個網頁看起來比較和諧、均衡;反之,當所有作用力可以在某個方向上形成合力時,空間秩序就會處於不穩定的狀態,整個網頁看起來則會充滿動感和活力。

  六、網頁中的留白

網頁中的留白就像情感小說中的心理描寫或是動作電影中的抒情段落一樣,可以讓網頁的視覺效果更加自由、流暢。很遺憾,許多網頁設計師都不懂得這個淺顯的道理,他們或是在客戶需求的壓力下,或是在不良設計習慣的驅使下,將整個頁面塞滿了圖片、文字、連結或是廣告,以至於所有視覺元素都不得不在擁擠的空間內苟延殘喘、痛苦掙扎。

留白並不特指網頁中的白色區域。事實上,網頁中凡是沒有前景元素干擾的視覺區域都可以被稱為留白。橫向通欄的留白可以讓網頁擁有一種水平的流動感;縱向的留白可以平衡文字、導航欄等視覺元素在水平方向的作用力;標題區域的大面積留白可以突出公司名稱或網頁標題資訊;正文區域內的大面積留白既可以豐富頁面佈局的內涵,也可以緩解衝浪者在閱讀時可能產生的視覺疲勞。

  七、文字資訊的設計和編排

編排網頁上的文字資訊時需要考慮字型、字號、字元間距和行間距、段落版式、段間距等許多要素。從美學觀點看,既保證網頁整體視覺效果的和諧、統一,又保證所有文字資訊的醒目和易於識別,這是評價此類工作的最高標準。從技術方面來說,今天的網頁設計師大多使用CSS樣式來控制和編排文字資訊,但在使用某種客戶端未必安裝的特殊字型時,設計師通常會將文字資訊儲存為圖片或Flash物件,以確保所有設計元素在客戶端瀏覽器中的正確展現。

“對比”是另一個設計和編排文字資訊時必須考慮的問題。不同的字型、不同的字號、不同的文字顏色、不同的字元間距在視覺效果上都可以形成強烈的對比。精心設計的文字對比可以為網頁空間增添活力,而過於氾濫的對比因素也會讓整個網頁混亂不堪。

  八、圖片和動畫

在網頁中使用圖片時,同樣需要考慮美學和技術兩方面的問題。首先,圖片的色彩、形狀、風格等一定要與網頁的整體風格相適應,圖片所要傳達的理念或資訊內容應當儘可能清晰、準確——這是美學方面的考量。其次,網頁設計師必須知道二值、灰度、256色及真彩色圖片之間的差異,懂得向量圖片和點陣圖片各自的優缺點,並儘量優化圖片的位元大小以減少網頁的傳輸時間——這是技術方面的考量。只有在美學和技術兩方面都讓人滿意的圖片才有資格出現在網頁的整體設計中。

動畫元素通常可以很自然地成為網頁上最吸引人的視覺焦點,因為運動的東西總是比靜止的東西更容易抓住人們的眼球。也正是基於這樣的原因,我們需要用更為慎重的態度來決定在何時或何地使用動畫元素。我見過太多被動畫元素搞“砸”的網頁,那些網頁的設計師無一例外地犯了濫用動畫的錯誤。其實,要判斷一個動畫元素是否有存在的必要,大家可以使用下面這個簡單的法則:如果某個動畫元素只具有裝飾網頁的作用,而無法讓資訊的展示更清晰或更生動,那麼,你應該毫不猶豫地刪掉它。

  九、網頁空間中的運動趨勢線

許多網頁的視覺空間中都隱藏了一條富有活力的運動趨勢線。當你觀察某個頁面時,如果你的直覺不斷告訴你,頁面中的某些設計元素(比如某些連線在一起的色塊,某些相互影響的圖片,特別是某些具有強烈暗示作用的線條)構成了一個隱約可見的、朝某個方向運動的元素集合,那麼,你不妨直接用畫筆勾出一條能夠反映該元素集合運動趨勢的線條,就像畫家在做人體寫生時通常要先畫出一條反映人體運動趨勢的線條一樣——我們可以把這條線叫做網頁空間中的運動趨勢線。

從運動趨勢線的方向和形狀出發,我們可以很容易地找出每一個視覺元素與整體視覺空間的互動關係。一旦我們發現,某個視覺元素並沒有為運動趨勢線做出任何貢獻,反而有可能阻礙運動趨勢線的流暢延伸,那麼,這個視覺元素多半就沒有任何存在的必要。

此外,在開始一個新的網頁設計前,如果設計師能根據靈感的暗示,在紙上首先畫出一條運動趨勢線,然後根據運動趨勢線的延伸規律設計所有視覺元素的形狀、色彩和位置,如此得到的網頁設計就更有可能表現出非同一般的視覺效果來。

  十、使用Web標準設計網頁

很多網頁設計師只考慮網頁的視覺效果,卻從不關心網頁的具體實現技術。結果,現在的Web世界裡有太多太多足夠漂亮但卻不符合技術標準的網頁,它們要麼無法支援Firefox、Safari等非IE瀏覽器,要麼不能在使用者改變預設字型大小時保持原貌。更可怕的是,這些不符合技術標準的網頁內部多半是一堆充斥著 、標籤的“義大利麵條”,沒有哪個瀏覽器會喜歡這些下載和顯示效率都異常低下的程式碼,也沒有哪個程式設計師會願意維護這些毫無頭緒可言的數字垃圾。

目前被業界普遍認可的客戶端網頁技術標準是XHTML+CSS+JavaScript。但即便是使用了這些標準的技術,我們也不能保證自己的設計一定會符合最好的設計習慣。有關利用Web標準進行設計,以及培養良好設計習慣的問題。

另一方面,Web標準總是處於發展和更新之中。每個網頁設計師都應該定期關注W3C網站上的相關內容(儘管W3C的網站在視覺效果上糟糕得一塌糊塗)。