Web設計規(guī)范2012-10-5目錄一、基礎規(guī)范01

網頁寬度02搜索框設計規(guī)范

基礎規(guī)范

應用場景03

頁碼設計規(guī)范

普通頁碼翻頁

小型頁碼翻頁04廣告設計規(guī)范

05文字的編排與設計

文字大小

文字顏色

文字行距

英文字體規(guī)范

文字鏈接06整齊的概念和應用07模塊化表現08頁腳信息二、參考指南01

頁面修飾

簡單的光影效果

質感的表現

透明效果的應用

02

個性皮膚的應用

03

圖標的統(tǒng)一使用

04圖標表意一、網頁寬度最新顯示器分辨率比例調查：目前主流分辨率1024X768，在此狀態(tài)下，默認使用960的網頁寬度，與騰訊網首頁統(tǒng)一尺寸。特殊情況1.信息量或圖片量過大的情況，可以考慮加寬承載，給出兩個參考尺寸：950（paipai，Qbar等)990（QQshow，游戲產品等)2.搜索類信息頁面，采用自適應屏幕方式（比如soso搜索產品)

二、搜索框設計規(guī)范d.圖標形式（放大鏡）和文字形式可搭配使用，會出現如下三種情況：文字形式：搭配使用：圖形形式：

c.搜索button規(guī)范文字為“搜索”避免采用其他描述。比如：

使用SOSO引擎的可考慮在搜索框前加SOSOLOGO同一個web產品中搜索的位置和表現形式盡量保持一致二、搜索框設計規(guī)范2.應用場景強表現方式：

加大搜索框的顯示，輸入框內采用大字體（14號）突出搜索button的表現，更直觀，更有點擊欲位置放在頁頭的中間并明顯標示二、搜索框設計規(guī)范2.應用場景弱表現方式：輸入框內采用小字體（12號）長度大約以剛好放完提示文字為基準

弱化搜索button的表現，可考慮用icon（圖標格式

）代替搜索框通常放在頁頭的右上角三、頁碼設計規(guī)范1.普通頁碼翻頁的表現方法：頁碼由三部分構成：一為頁碼狀態(tài)區(qū)，表明頁碼在當前第幾頁位置以及共有多少頁；二為頁碼翻頁區(qū)，由上下翻頁按鈕與頁碼顯示區(qū)構成；三為跳轉翻頁區(qū)。三部分組成頁碼翻頁區(qū)域位于產品右下角，三部分距離不可分開過大。

鏈接頁碼的設計力求簡明獨立，頁碼與頁碼之間的間距不小于鼠標手型的距離，如圖所示三、頁碼設計規(guī)范鏈接頁碼為簡明獨立，不加任何修飾的數字形式

鏈接顏色由當前頁面設計決定數字大小建議為12-14px,以易于點擊為原則.2.小型頁碼翻頁的表現方法：五、文字的編排與設計文字大?。航ㄗh使用12號+14號字體的混合搭配，13號也可酌情考慮，因為13號字體的不對稱性，目前非主流。需突出的內容部分、新聞標題、欄目標題等多使用14號字體

廣告內容、輔助信息或介紹性文字等多使用12號字體

避免大面積使用加粗字體總體原則：提高文字的辨識性和頁面的易讀性五、文字的編排與設計2．文字顏色：同一網站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文字顏色特別注意：菜單盡量不使用12號加粗，這樣會導致復雜的文字難以辨認。多采用14號加粗

一般情況下字體變化不要超過三種，若有需要，可以盡量采用統(tǒng)一字體的不同字族。五、文字的編排與設計灰黑色當使用灰色為文字顏色時，正灰色的明度數值（B）不大于30%。當使用帶有色彩傾向的灰色時，根據色相不同，應對明度值（B）作相應調整。因為不同純色亮度不同，黃色亮度最高，藍色/紫色亮度最底，其他色相則屬中間亮度。因此使用亮度越高的色彩，其明度值（B）應該越低。正文的文字顏色多采用深藍色或深灰色。在討論顏色前，首先要明確一這個判斷的衡量標準。我們是以Ps的顏色系統(tǒng)為討論基礎的。建議使用：五、文字的編排與設計深藍色當使用純藍色為文字顏色時，明度數值（B）不大于60%。當藍色介于純藍往天藍之間的時候，根據色相不同，應對明度值（B）作相應調整。當色相越接近天藍時，（B）值應該越低。很多門戶網站使用藍色為文字顏色，常用的有建議使用天藍色的：純藍色：五、文字的編排與設計其他顏色當使用其他顏色作為正文主色調時，安全起見可采用明度數值（B）不大于30%的顏色。五、文字的編排與設計3．文字行距：視覺最佳行距是字體大小的1.3-1.6倍12號宋體，我們一般使用的行距為8-9個像素。14號宋體，我們一般使用的行距為10-11個像素。正文多采用14號字，行距可適當調整為10-16個像素。4．英文字體的使用：英文建議使用Arial：Arial與Helvetica/Univers并列為目前的標準無襯線字體（SansSerif），字型依據Unicode標準包含多國語言文字在內。

Arial比例及字重和Helvetica(mac上用的字體)極之相近系統(tǒng)自帶并能與漢字匹配的點陣字比較:五、文字的編排與設計Arial字體優(yōu)點:比例及字重（weight）和Helvetica極之相近;沒有下劃線貼邊的問題；Q字沒尾巴；字高整齊缺點:大寫I與小寫L無法區(qū)分下劃線:Tahoma字體優(yōu)點:字寬較闊,字母間距較窄，恒定1px（閱讀單個字母有困難）形態(tài)上符合漢字“方塊字”點陣字；能區(qū)分大寫I與小寫L缺點:12號字有下劃線貼邊的問題；Q字有尾巴；字高不整齊下劃線:五、文字的編排與設計Verdana字體優(yōu)點:沒有下劃線貼邊的問題,能區(qū)分大寫I與小寫L缺點:字體較寬，間距大，字型圓同一寬度可顯示字節(jié)比其他字體少得多;Q字有尾巴；字高不整齊下劃線:應用案例五、文字的編排與設計隱性鏈接：對于混雜在頁面文字中零散出現的文字鏈接，為了便于識別，默認時候可以出現下劃線或使用輔助鏈接色，光標經過的時候，樣式不變。5．文字鏈接：文字鏈接形式不得超過3種顏色（規(guī)定其中一種為主鏈接色）。顯性鏈接：大面積鏈接的網站，比如門戶首頁、內容列表頁。多采取灰黑色、藍色做全篇的鏈接色，默認時不顯示下劃線，光標經過時才顯示下劃線。六、整齊的概念和應用類似這樣“豆腐塊”的文字排列，在大型網站中尤為重要。如何去分割和組織大量繁雜的信息？將文字塊當作圖片一樣來排版優(yōu)化，來平衡頁面。對齊網頁設計中的”對齊”同傳統(tǒng)的印刷排版中的對齊概念是一樣的，并且同等重要。并不是說一切都應該在一條直線上，而是盡可能的保持一貫的整齊，不僅左對齊，也要盡量右對齊。使我們的設計更有序。更方便閱讀。六、整齊的概念和應用首頁上摘要無須空格。內容正文應該空兩格。六、整齊的概念和應用“豆腐塊”四周應該空留均勻適當的間隔模塊化的幾類參考表現：單線

3-5個像素的圓角內邊修飾……..七、模塊化表現設計準則：同一個網站采用的模塊化表現應該是全部統(tǒng)一的。頁腳信息按照從上到下的排列次序為:

1、內部導航

2、外部導航

3、各類許可證、授權聲明

4、英文版權信息“Copyright?”

5、中文版權信息

6、各類網絡安全/工商證明/技術支持LOGO各鏈接間隔統(tǒng)一使用”|”建議采用12號字，

禁止使用加粗字體八、頁腳信息目錄一、基礎規(guī)范二、參考指南01

網頁寬度02搜索框設計規(guī)范

基礎規(guī)范

應用場景03

頁碼設計規(guī)范

普通頁碼翻頁

小型頁碼翻頁04廣告設計規(guī)范