淺談網(wǎng)頁設(shè)計(jì)

1、淺談By Margaret網(wǎng)頁設(shè)計(jì) 基本元素 基本規(guī)范 參考指南 案例欣賞目 錄基本元素基本規(guī)范1. 網(wǎng)頁基本寬度有效可視區(qū)域（單位：Px）屏幕一二三800600102476812801024IE6.0779（+21）432（+168）1003（+21）600（+168）1259（+21）856（+168）IE7.0779（+21）452（+148）1003（+21）620（+148）1259（+21）876（+148）Firefox2.0783(+17)417(+183)1007(+17)585(+183)1263(+17)841(+183)Opera9.0781(+19)461(+139)

2、1005(+19)629(+139)1261(+19)885(+139)保守設(shè)置（1024x768臺式電腦 & 平板電腦）：960px一般設(shè)置（1280 x800、1366x768筆記本）：1000px大屏設(shè)置（分辨率大于1280 x800 ）：1200px案例：淘寶（1000px），京東（1210px），花瓣（1407px）基本規(guī)范2. 文字&文本規(guī)范總體原則：提高文字的辨識性和頁面的易讀性1. 文字大小：建議使用12號+14號字體的混合搭配，13號也可酌情考慮，因?yàn)?3號字體的不對稱性，目前非主流。 需突出的內(nèi)容部分、新聞標(biāo)題、欄目標(biāo)題等多使用14號字體1. 廣告內(nèi)容、輔助

3、信息或介紹性文字等多使用12號字體2. 避免大面積使用加粗字體特別注意：菜單盡量不使用12號加粗，這樣會導(dǎo)致復(fù)雜的文字難以辨認(rèn)。多采用14號加粗基本規(guī)范2. 文字&文本規(guī)范總體原則：提高文字的辨識性和頁面的易讀性2文字顏色： 同一網(wǎng)站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文字顏色 一般情況下字體變化不要超過三種，若有需要，可以盡量采用統(tǒng)一字體的不同字族。 正文的文字顏色多采用深藍(lán)色或深灰色。當(dāng)使用其他顏色作為正文主色調(diào)時(shí)，安全起見可采用明度數(shù)值（B）不大于30%的顏色建議使用：基本規(guī)范2. 文字&文本規(guī)范總體原則：提高文字的辨識性和頁面的易讀性4.字體的選擇中文字體

4、：宋體，微軟雅黑，幼圓英文字體： Arial(比例及字重（weight）和Helvetica極之相近 ; 沒有下劃線貼邊的問題；Q字沒尾巴；字高整齊)基本規(guī)范2. 文字&文本規(guī)范總體原則：提高文字的辨識性和頁面的易讀性5文字鏈接：文字鏈接形式不得超過3種顏色（規(guī)定其中一種為主鏈接色）。顯性鏈接：大面積鏈接的網(wǎng)站，比如門戶首頁、內(nèi)容列表頁。多采取灰黑色、藍(lán)色做全篇的鏈接色，默認(rèn)時(shí)不顯示下劃線，光標(biāo)經(jīng)過時(shí)才顯示下劃線。隱性鏈接：對于混雜在頁面文字中零散出現(xiàn)的文字鏈接，為了便于識別，默認(rèn)時(shí)候可以出現(xiàn)下劃線或使用輔助鏈接色，光標(biāo)經(jīng)過的時(shí)候，樣式不變?；疽?guī)范2. 文字&文本規(guī)范總體原則

5、：提高文字的辨識性和頁面的易讀性6 對齊網(wǎng)頁設(shè)計(jì)中的”對齊”同傳統(tǒng)的印刷排版中的對齊概念是一樣的，并且同等重要。并不是說一切都應(yīng)該在一條直線上，而是盡可能的保持一貫的整齊，不僅左對齊，也要盡量右對齊。首頁上摘要無須空格。內(nèi)容正文應(yīng)該空兩格。“豆腐塊”四周應(yīng)該空留均勻適當(dāng)?shù)拈g隔基本規(guī)范3. 模塊化表現(xiàn)總體原則：同一個(gè)網(wǎng)站采用的模塊化表現(xiàn)應(yīng)該是全部統(tǒng)一的。模塊化的幾類參考表現(xiàn)： 單線 3-5個(gè)像素的圓角 內(nèi)邊修飾基本規(guī)范4.頁腳信息 頁腳信息按照從上到下的排列次序?yàn)? 1、內(nèi)部導(dǎo)航 2、外部導(dǎo)航 3、各類許可證、授權(quán)聲明 4、英文版權(quán)信息“Copyright ” 5、中文版權(quán)信息 6、各類網(wǎng)絡(luò)安全

6、/工商證明/技術(shù)支持 LOGO 各鏈接間隔統(tǒng)一使用”| ” 建議采用12號字， 禁止使用加粗字體基本規(guī)范5. 搜索框設(shè)計(jì)規(guī)范文本框a. 搜索框文本框的長度應(yīng)適中，至少應(yīng)提供顯示10個(gè)中文字符的寬度b. 搜索組件中使用的文本框必須為單行文本框c. 高度不得低于18個(gè)像素幫助信息限定標(biāo)簽提示、標(biāo)示性文字、熱門關(guān)鍵詞提示搜索按鈕a. 搜索按鈕一般包含圖標(biāo)形式和文字形式兩種b. 使用圖標(biāo)形式時(shí)只能使用放大鏡的圖標(biāo)，而不能采用其他元素。文字形式：搭配使用：圖形形式：基本規(guī)范6. 廣告設(shè)計(jì)規(guī)范禁止模仿任何windows標(biāo)準(zhǔn)控件，windows標(biāo)準(zhǔn)控件包括但不限于：鼠標(biāo)指針、按鈕以及窗口控制按鈕等。 不要使

7、用按鈕作長句廣告參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型一、骨骼型 骨骼型是一種規(guī)范的理性的分割方法。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。在圖片和文字的編排上 則嚴(yán)格按照骨骼比例進(jìn)行編排配置，給人以嚴(yán)謹(jǐn)、和諧、理性的美。骨骼經(jīng)過相互混合后的版式，既理性、條理，又活潑而具彈性。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型二、滿版型 版面以圖象充滿整版，主要以圖象為訴求，視覺傳達(dá)直觀而強(qiáng)烈。文字的配置壓置在上下、左右或中部的圖象上。滿版型給人以大方、舒展的感覺，是商品廣告常用的形式。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型三、上下分割型 把整個(gè)版面分為上下兩個(gè)部分，

8、在上半部或下半部配置圖片，另一部分則配置文案。配置有圖片的部分感性而有活力，而文案部分則理性而靜止。上下部分配置的圖片可以是一幅或多幅。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型四、左右分割型 把整個(gè)版面分割為左右兩個(gè)部分，分別在左或右配置文案。當(dāng)左右兩部分形成強(qiáng)弱對比時(shí)，則造成視覺心理的不平衡。這僅僅是視覺習(xí)慣上的問題，也自然不如上下分割的視覺流程自然。不過，倘若將分割線虛化處理，或用文字進(jìn)行左右重復(fù)或穿插，左右圖文則變得自然和諧。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型五、中軸型 將圖形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面給人穩(wěn)定、安靜、和平與含蓄之感。垂直排列的版面給人強(qiáng)烈的動

9、感。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型六、曲線型 圖片或文字在版面結(jié)構(gòu)上作曲線的編排構(gòu)成，產(chǎn)生節(jié)奏和韻律。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型七、傾斜型 版面主體形象或多幅圖版做傾斜編排，造成版面強(qiáng)烈的動感和不穩(wěn)定因素，引人注目。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型八、對稱型 對稱的版式給人穩(wěn)定、莊重理性的感覺。對稱有絕對對稱和相對對稱。一般多采用相對對稱。以避免過于嚴(yán)謹(jǐn)。對稱一般以相對對稱居多。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型九、中心型 重心有三種概念。1、直接以獨(dú)立而輪廓分明的形象占據(jù)版面中心。2、向心：視覺元素向版面中心聚攏的運(yùn)動。3、離心：猶如將石子投入水中，產(chǎn)生一圈圈向外擴(kuò)散的弧線運(yùn)動

10、。重心型版式產(chǎn)生視覺焦點(diǎn)，使強(qiáng)烈而突出。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型十、三角形 在圓形、四方形、三角形等基本形態(tài)中，正三角形（金字塔形）是最具安全穩(wěn)定因素的形態(tài)，而圓形和倒三角形則給人以動感和不穩(wěn)定感。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型十一、并置形 將相同或不同的圖片作大小相同而位置不同的重復(fù)排列。并置構(gòu)成的版面有比較、說解的意味，給予原本復(fù)雜喧囂的版面以次序、安靜、調(diào)和與節(jié)奏感。參考指南1. 網(wǎng)頁基本版面設(shè)計(jì)類型十二、自由型 自由行結(jié)構(gòu)是無規(guī)律的、隨意的編排構(gòu)成，有活潑、輕快之感。參考指南2. 網(wǎng)頁配色色彩的三要素色相：明度：純度：參考指南2. 網(wǎng)頁配色配色方法 選出主色和輔助色 根據(jù)網(wǎng)站功能、面向?qū)ο蟠_定網(wǎng)站格調(diào) 根據(jù)格調(diào)確定主色和輔助色 改變主色和輔助色的明度和純度，豐富色彩 配合不同明度純度的黑白灰作為補(bǔ)充色 在小范圍內(nèi)選取與主色對比大的顏色作為強(qiáng)調(diào)色參考指南2. 網(wǎng)頁配色對比原則 色相對比（主色與輔助色、強(qiáng)調(diào)色對比） 明暗對比 面積對比參考指南2. 網(wǎng)頁配色對比調(diào)整對比恰當(dāng)對比過強(qiáng)減弱對比增加隔閡分離元素對比過弱對比渾濁加大對比增加隔閡分離元素參考指南2. 網(wǎng)頁配色根據(jù)主題選擇藍(lán)色調(diào)，頁面整體清爽簡潔。色色單色搭配色彩豐富協(xié)調(diào)，橙色、黃色區(qū)塊醒目不突兀色色類似色搭配參考指南2. 網(wǎng)頁配色參考指南2. 網(wǎng)頁