設計(jì)版而就像傳統的(de)報刊雜志編輯樣, 将網頁看做一張報紙(zhǐ)、本雜志 來進行(xíng)捧版布局。雖然動态網頁技術(shù)的(de)發展使得我們開(kāi)始 始趨向于學習(xí)場(chǎng)景編劇,但(dàn)是固定的(de)網頁版面設計(jì)基礎依然是必須學習(xí)和(hé)掌握的(de)。 它們的(de)基本原理(lǐ)是互通的(de),讀(dú)者可(kě)以領會(huì)其要點,舉一反三。
版而指的(de)是浏覽器(qì)看到(dào)的(de)完整的(de)一個(gè)頁面 (可(kě)以包含框架和(hé)層次)。因爲每個(gè)人(rén)的(de)顯示器(qì)分(fēn)辨率不同,所以同一 個(gè)頁面的(de)大(dà)小(xiǎo)可(kě)能(néng)出現640X480像素、80X600像01024X 768像素等不同尺寸。
版面布局的(de)步驟
(1)草(cǎo)案。這屬于創造階段,不講究細膩工(gōng)整,也(yě)不必考慮細節功能(néng),隻以粗陋的(de)線條勾畫出創意的(de)輪廓即可(kě)。盡可(kě)能(néng)多畫幾張,最後選定一幅滿意的(de)作爲繼續創作的(de)腳本,
(2)粗略布局。在草(cǎo)案的(de)基礎上(shàng),将需要放(fàng)置的(de)功能(néng)模塊安排到(dào)頁面上(shàng)。功能(néng)模塊主要包含網站标志、主菜單、新聞、搜索、友(yǒu)情鏈接、廣告條、郵件(jiàn)列表、計(jì)數器(qì)和(hé)版權信息等。注意,這裏我們必須遵循突出重點、平衡諧調的(de)原則,将網站标志、主菜單等最重要的(de)模塊放(fàng)在最顯眼、最突出的(de)位置,然後再考慮次要模塊的(de)排放(fàng)。
(3)定案。将粗略布局精細化、具體化,最後達到(dào)滿意定案。
對于版面布局的(de)設計(jì),應當重視如(rú)下原則:加強視覺效果:加強文(wén)案的(de)可(kě)視度和(hé)可(kě)讀(dú)性:統一感的(de)視覺;新鮮和(hé)個(gè)性是布局的(de)最高(gāo)境界。網頁設計(jì)作爲種視覺語言,當然要講究編排和(hé)布局,雖然網頁設計(jì)不等同于平面設計(jì),但(dàn)它們有(yǒu)許多相(xiàng)近之處,應充分(fēn)加以利用(yòng)和(hé)借鑒。
版式設計(jì)通過文(wén)字及圖形的(de)空間組合,表達出和(hé)諧與美(měi)。一個(gè)優秀的(de)網頁設計(jì)者目 該知道哪一-段文(wén)字及某個(gè)圖形該落于何處, 才能(néng)使整個(gè)網頁生輝。網頁設計(jì)者應努力做到(dào) 整體布局合理(lǐ)化、有(yǒu)序化、整體化。優秀之作善于以巧妙、合理(lǐ)的(de)視覺方式使一些語言無 法表達的(de)思想得以闡述,做到(dào)豐富多樣,而又(yòu)簡潔明(míng)了。 多頁面站點的(de)編排設計(jì)要求從頁面之間的(de)有(yǒu)機聯系反映出來,這裏主要的(de)問題是則
面之間和(hé)頁面内的(de)秩序與内容的(de)關系。 爲了達到(dào)最佳的(de)視覺表現效果,應講究整體布局的(de) 合理(lǐ)性。特别是關系十分(fēn)緊。便于浏覽者可(kě)以來回仔細研讀(dú)。 的(de)有(yǒu)上(shàng)下文(wén)關系的(de)頁面,一定要設計(jì)有(yǒu)向前和(hé)間後的(de)按鈕,
常用(yòng)版面布局的(de)形式
(1)“T”結構布局。所謂“T”結構就是指頁面項部爲橫條網站标志十廣告條, 下方 在面爲主菜單,在面品示内容的(de)布局,因爲菜單條背跟較課,整體效果類似英文(wén)字母- 所以稱爲“T”形布局。這是網頁設計(jì)中使用(yòng)最廣泛的(de)種布局方式, 這種布局的(de)優點是頁面結向清晰、主次分(fēn)明(míng),且是勿學者最容易掌握的(de)布局方法, 缺點是規矩呆闆,如(rú)果色彩細節上(shàng)再不注意,很容易讓人(rén)看後乏味,
(2)"工(gōng)”形布局,這是一個(gè)象形的(de)說法,就是頁面般上(shàng)下各有(yǒu)個(gè)廣告條,左面 是主菜單,右面放(fàng)友(yǒu)情鏈接等,中間是主要内容。這種布局的(de)優點是充分(fēn)利用(yòng)版面,信息量大(dà)。缺點是頁面擁擠,不夠靈活。也(yě)有(yǒu)将四邊空出,隻用(yòng)中間的(de)窗口型設計(jì),例如(rú)網易的(de)壁紙(zhǐ)站。
(3)“三”形布局。這種布局多用(yòng)于國外站點,國内使用(yòng)的(de)不多:[特點是頁面上(shàng)橫向有(yǒu)兩條色塊将頁面整體分(fēn)割爲三部分(fēn),色塊中大(dà)多放(fàng)廣告條。
(4)對稱對比布局。顧名思義,采取左右或者上(shàng)下對稱的(de)布局,一半深色:另一半淺色,一般用(yòng)于設計(jì)型站點。優點是視覺沖擊力強,缺點是将兩部分(fēn)有(yǒu)機地(dì)結合比較困難。
(5)POP布局。POP引自廣告術(shù)語,就是指頁面布局像張宣傳海(hǎi)報,以一張精美(měi)圖片作爲頁面的(de)設計(jì)中心。此類布局常用(yòng)于時尚類站點,比如(rú)ELLE.com。優點是顯而易見,漂亮吸引人(rén)。缺點是速度慢(màn)。
以上(shàng)總結了目前網絡上(shàng)常見的(de)幾種布局,此外還有(yǒu)許許多多别具格的(de)布局,關鍵在于網站本身的(de)創意和(hé)設計(jì)。
頁面美(měi)術(shù)設計(jì)
專業(yè)美(měi)術(shù)設計(jì)人(rén)員的(de)幫助對企業(yè)站點的(de)成功設計(jì)是至關重要的(de)。即便是一個(gè)沒有(yǒu)一點網頁設計(jì)經驗的(de)專業(yè)美(měi)術(shù)設計(jì)人(rén)員,也(yě)能(néng)提供很多關于排版、色彩等方面的(de)建議。實際上(shàng),很多傳統出版行(xíng)業(yè)的(de)規則和(hé)禁忌,也(yě)大(dà)都(dōu)适用(yòng)于網頁的(de)設計(jì)。
網頁設計(jì)與其他(tā)出版設計(jì) 最大(dà)的(de)不同表現在以下三個(gè)方面:
(1)傳播的(de)媒介不同。許多用(yòng)戶是用(yòng)Modem上(shàng)網的(de),考慮到(dào)用(yòng)戶的(de)容量程度, 圖形 一般不宜太大(dà):通常每個(gè)圖應小(xiǎo)于30KB.每個(gè)頁面圖形總量應小(xiǎo)于50KB.
(2)最終的(de)發布媒體不同。多數用(yòng)戶是通過Windows或MAC機L上(shàng)網的(de) 而且當前通用(yòng)的(de)分(fēn)辨率是低于800X 600 因此,美(měi)術(shù)設計(jì)人(rén)員的(de)發揮天地(dì)是13~15英寸顯示器(qì)所能(néng)展示的(de)區域。
(3)所能(néng)采用(yòng)的(de)文(wén)件(jiàn)格式的(de)限制(zhì)。 對通用(yòng)浏覽器(qì)來說,能(néng)識别的(de)圖像格式僅爲JPEG和(hé)GIF.這兩者又(yòu)各有(yǒu)不同的(de)特點和(hé)适用(yòng)環境。 正。這兩者義負複有(yǒu)良好的(de)合作,網站制(zhì)作首先應該能(néng)向他(tā)們提供前面所說的(de)内容和(hé)邏輯結