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