網頁設計基本步驟
2011-12-29
   一個不懂得觀賞優良網頁作品的設想師可以永久都無法懂得鑒戒的真理;一個無法將優良作品的精華融入到現有需求中的設想師可以永久都無法找到真正的靈感。 即使是那些看似首創的設想,其靈感也常常來自設想師在臨時鑒戒進程中的不時積聚。 設想源于靈感,靈感源于鑒戒——這是每個網頁設想師都該當牢記的“勝利法則”。 一、用“原型法”細化網站設想需求 用DW在最短的工夫內搭出一個可以閱讀、跳轉的網站,然后與客戶一同體驗并評價這個網站原形的架構、流程、布局、配色、文字等不同層面。 二、網頁鏈接的深度、廣度和耦合程度 超級鏈接是網頁設想中最主要的消-息組織方式,也是整個Web世界的精華所在。但蹩腳的鏈接設想——比如過于眾多和隨便的超級鏈接——很可以會讓沖浪者丟失在布滿著消-息碎片的陸地里。 假如將網站首頁視為鏈接層次中的第一級,那么,由首頁中的超級鏈接失掉的,在消-息形式上具有附屬聯系的站內頁面就是網頁鏈接層次中的第二級;從每個第二級頁面又可以持續得出第三級網頁;依此類推,我們多半可以失掉一個完好的樹形鏈接構造。在這個樹形鏈接構造中,整棵樹的層數可以被稱為(站內)網頁鏈接的深度,頁面最多的一層中包括的頁面總數可以被稱為(站內)網頁鏈接的廣度。普通說來,一個網站的鏈接深度和廣度最好有一個適宜的平衡聯系,深渡過大的網站有利于沖浪者疾速獲取相關消-息,廣渡過大的網站則輕易讓沖浪者在有數并列的超級鏈接眼前手足無措。 當網頁中的某個鏈接既沒有指向下一級網頁,也沒有指向上一級網頁時,它必定形成了由以后頁面向跨層級網頁或站外URL的“跳轉”,這種跳轉的出現頻次可以被稱為網頁鏈接的泛耦合程度。泛耦合程渡過低的網站無法無效發揚Web沖浪的價值,由此失掉的網站過于板滯;另一方面,泛耦合程度較高的網站又有可以形成消-息形式的四分五裂,影響沖浪者的一般閱讀。因而,網頁鏈接的泛耦合程度該當與網站的設想需求相順應——兒童或動漫類的網站應鼓舞那些代表騰躍式思想的泛耦合鏈接,而一個學術類的網站則該當對泛耦合鏈接持絕對慎重的態度。 簡直每個網頁都有導航欄。對同一個網站內的一切網頁來說,導航欄必需在設想作風上力圖同一。否則,沖浪者就需求辨別順應每個頁面的導航界面作風,這不但會糜費不少工夫,也會嚴峻影響整個網站的運用美感。 但這里所說的同一并不是請求我們為每個網頁設想出如出一轍的導航欄。完整相反的導航欄會讓沖浪者在閱讀進程中由疲乏而麻痹、由麻痹而遺失對網站的閱讀愛好。也就是說,我們該當在同一的全體作風下,在每一個或每一組網頁的導航欄中尋求細節上的變化。 比如說,我們可以在確保一切導航欄外形、布局、字體分歧性的根底上,變換不同導航欄的背景色彩;或許,我們可以在同一了色彩、外形、字體的狀況下,變換不同導航欄的絕對地位;再或許,我們還可以變換不同頁面中導航欄的背景圖片——當然,一切背景圖片該當附屬于某種同一的作風——同時堅持其他設想元素不變。 “在同一的根底上尋求變化”——除了導航欄以外,網頁設想師在處置同一頁面或同一網站內的其他設想題目時,這句話也異樣無效。 三、網頁根本布局 要尋覓網頁布局方面的靈感并不難。我倡議自己沒事兒時多做些折紙練習:順手拿起一張A4復印紙,然后根據本人的心境好壞,或平行、或斜向、或挑選恣意角度將紙片折疊幾次,再把紙平攤在眼前,紙上出現進去的折痕沒準兒就是一種相當不錯的網頁布局呢! 當然,網頁設想師還是要盡量熟習那些典型網頁的根本布局方式,以根據客戶的需求挑選運用。比如,門戶類網頁為了盡可以多地展現消-息形式,普通都會設想成三欄以致四欄的縱向布局;公-司首頁為了展現弱小的企業實力,常常會挑選“視野”更寬廣的橫向布局;團體主頁為了展現網站仆人的特性,其網頁布局方式也會千差萬別,像軸向布局、網格布局、斜角布局、放射布局、多核-心布局、離散布局、比照布局等等都是罕見的團體主頁布局方式。 四、網頁空間中的視覺導向 每個網頁都是一個奇異的視覺空間。像我們熟習的四維時空一樣,網頁空間也有深度、廣度和工夫消逝的覺得,以致還會在設想元素引發的“力”的作用下發生活動或歪曲。 每當我們翻開一個新的網頁后,我們的視野首先集聚焦在網頁中最引人留意的那一點上——我們普通稱其為視覺焦點。隨后,我們的思緒會遭到視覺焦點周邊設想元素的外形和散布方式的影響,并在不知不覺中把視野轉移到另一個值得停止的中央(例如,一段奪手段線條,一種色彩到其近似色的突變,它們都會讓我們的視野依照設想師事后布置的軌跡挪動)。如此持續上去,視野經過的一切關懷點可以銜接成一條完好的視覺途徑。 運用視覺途徑指導沖浪者按某種內在的邏輯次第閱讀網頁消-息的進程可以被稱為網頁空間中的視覺導向。能否能自覺、盲目地運用視覺導向的設想辦法并根據視覺途徑的走向陳列關鍵消-息,這是區別專業網頁設想師和專業網頁設想師的一個主要根據。 五、網頁空間的次序及活動趨向 網頁空間的次序是網頁中一切視覺元素互相作用的后果。剖析某個特定網頁空間的次序時,最好把視覺元素籠統為“點”、“線”、“面”三大類,然后辨別調查每一類元素之間以及不同類型元素之間的互相作用。 在設想師眼中,每一個視覺元素都可以被看成是“力”的源泉。不同視覺元素開釋進去的“力”的方向和大小不同。一個向右傾斜的三角形可以同時開釋出相似“重力”的垂直作用力和向右的程度作用力。視覺元素和視覺元素經過“力”互相作用,單獨影響著整個網頁的空間次序。 當網頁空間中一切作用力處于平衡形態時,空間次序最為波動,整個網頁看起來比擬調和、平衡;反之,當一切作用力可以在某個方向上形成協力時,空間次序就會處于不波動的形態,整個網頁看起來則會布滿動感和生機。 六、網頁中的留白 網頁中的留白就像情感小說中的心思描寫或是舉措電影中的抒懷段落一樣,可以讓網頁的視覺成效愈加自在、流利。很可惜,很多網頁設想師都不懂得這個粗淺的道理,他們或是在客戶需求的壓力下,或是在不良設想習氣的差遣下,將整個頁面塞滿了圖片、文字、鏈接或是廣告,以致于一切視覺元素都不得不在擁堵的空間內茍延殘喘、苦楚掙扎。 留白并不特指網頁中的白色區域。現實上,網頁中但凡沒有遠景元素攪擾的視覺區域都可以被稱為留白。橫向通欄的留白可以讓網頁具有一種程度的活動感;縱向的留白可以平衡文字、導航欄等視覺元素在程度方向的作用力;標題區域的大面積留白可以一般公-司稱號或網頁標題消-息;注釋區域內的大面積留白既可以豐厚頁面布局的外延,也可以緩解沖浪者在閱讀時可以發生的視覺疲乏。 七、文字消-息的設想和編排 編排網頁上的文字消-息時需求思索字體、字號、字符間距和行間距、段落版式、段間距等很多要素。從美學觀念看,既保證網頁全體視覺成效的調和、同一,又保證一切文字消-息的奪目和易于辨認,這是評價此類任務的最高規范。從技術方面來說,明天的網頁設想師大多運用CSS款式來掌握和編排文字消-息,但在運用某種客戶端一定裝置的特地字體時,設想師普通會將文字消-息保管為圖片或Flash對象,以確保一切設想元素在客戶端閱讀器中的準確展現。 “比照”是另一個設想和編排文字消-息時必需思索的題目。不同的字體、不同的字號、不同的文字色彩、不同的字符間距在視覺成效上都可以形成激烈的比照。細心設想的文字比照可以為網頁空間添加生機,而過于眾多的比照要素也會讓整個網頁紊亂不堪。 八、圖片和動畫 在網頁中運用圖片時,異樣需求思索美學和技術兩方面的題目。首先,圖片的色彩、外形、作風等必定要與網頁的全體作風相順應,圖片所要傳達的理念或消-息形式該當盡可以清楚、準確——這是美學方面的考量。其次,網頁設想師必需曉得二值、灰度、256色及真黑色圖片之間的差別,懂得矢量圖片和點陣圖片各自的優缺陷,并盡量優化圖片的比特大小以增加網頁的傳輸工夫——這是技術方面的考量。只要在美學和技術兩方面都讓人滿足的圖片才有資歷出如今網頁的全體設想中。 動畫元素普通可以很天然地成為網頁上最吸收人的視覺焦點,由于活動的東西總是比運動的東西更輕易捉住人們的眼球。也正是基于這樣的緣由,我們需求用更為慎重的態度來決議在何時或何地運用動畫元素。我見過太多主動畫元素搞“砸”的網頁,那些網頁的設想師無一例外地犯了濫用動畫的過失。實在,要判定一個動畫元素能否有具有的必要,自己可以運用上面這個復雜的法則:假如某個動畫元素只具有粉飾網頁的作用,而無法讓消-息的展現更清楚或更活潑,那么,你該當當機立斷地刪掉它。 九、網頁空間中的活動趨向線 很多網頁的視覺空間中都躲藏了一條富饒生機的活動趨向線。當你察看某個頁面時,假如你的直覺不時通-知你,頁面中的某些設想元素(比如某些銜接在一同的色塊,某些互相影響的圖片,特地是某些具有激烈暗示作用的線條)形成了一個模糊可見的、朝某個方向活動的元素匯合,那么,你無妨間接用畫筆勾出一條可以反映該元素匯合活動趨向的線條,就像畫家在做人體寫生時普通要先畫出一條反映人體活動趨向的線條一樣——我們可以把這條線叫做網頁空間中的活動趨向線。 從活動趨向線的方向和外形動身,我們可以很輕易地找出每一個視覺元素與全體視覺空間的交互聯系。一旦我們發覺,某個視覺元素并沒無為活動趨向線做出任何奉獻,反而有可以障礙活動趨向線的流利延長,那么,這個視覺元素多半就沒有任何具有的必要。 此外,在開端一個新的網頁設想前,假如設想師能根據靈感的暗示,在紙上首先畫出一條活動趨向線,然后根據活動趨向線的延長法則設想一切視覺元素的外形、色彩和地位,如此失掉的網頁設想就更有可以表示出非同普通的視覺成效來。 十、運用Web規范設想網頁 很多網頁設想師只思索網頁的視覺成效,卻從不關懷網頁的詳細完成技術。后果,如今的Web世界里有太多太多足夠美麗但卻不契合技術規范的網頁,它們要么無法支撐Firefox、Safari等非IE閱讀器,要么不能在用戶改動缺省字體大小時堅持原貌。更可怕的是,這些不契合技術規范的網頁外部多半是一堆布滿著<TABLE>、<FONT>標簽的“意大利面條”,沒有哪個閱讀器會喜愛這些下載和顯現效率都非常低下的代碼,也沒有哪個順序員會情愿保護這些毫無眉目可言的數字渣滓。 目前被業界普遍認可的客戶端網頁技術規范是XHTML+CSS+JavaScript。但即使是運用了這些規范的技術,我們也不能保證本人的設想必定會契合最好的設想習氣。相關應用Web規范停止設想,以及培育優良設想習氣的題目。 另一方面,Web規范總是處于開展和更新之中。每個網頁設想師都該當活期關懷W3C網站上的相關形式(雖然W3C的網站在視覺成效上蹩腳得一塌懵懂)。 網頁設計
分類:潮流服裝