1、Web設(shè)計(jì)規(guī)范 V1.3,CDC WUI 2008/10/29,目錄,一、 基礎(chǔ)規(guī)范,01 網(wǎng)頁寬度 02 搜索框設(shè)計(jì)規(guī)范 基礎(chǔ)規(guī)范 應(yīng)用場景 03 頁碼設(shè)計(jì)規(guī)范 普通頁碼翻頁 小型頁碼翻頁 04 廣告設(shè)計(jì)規(guī)范 05 文字的編排與設(shè)計(jì) 文字大小 文字顏色 文字行距 英文字體規(guī)范 文字鏈接 06 整齊的概念和應(yīng)用 07 模塊化表現(xiàn) 08 頁腳信息,二、參考指南,01 頁面修飾 簡單的光影效果 質(zhì)感的表現(xiàn) 透明效果的應(yīng)用 02 個(gè)性皮膚的應(yīng)用 03 圖標(biāo)的統(tǒng)一使用 04 圖標(biāo)表意,一、網(wǎng)頁寬度,最新顯示器分辨率比例調(diào)查： 目前主流分辨率 1024X768，在此狀態(tài)下，默認(rèn)使用910的網(wǎng)頁寬度，與騰

2、訊網(wǎng)首頁統(tǒng)一尺寸。,特殊情況 1 . 信息量或圖片量過大的情況，可以考慮加寬承載，給出兩個(gè)參考尺寸： 950（paipai，Qbar等) 990（QQshow，游戲產(chǎn)品等) 2. 搜索類信息頁面，采用自適應(yīng)屏幕方式（比如soso搜索產(chǎn)品),一、網(wǎng)頁寬度,不同瀏覽器，不同分辨率下網(wǎng)頁第一屏最大可視區(qū)域：,說明： 比如1024768下IE7.0的可視面積是（1024-21）（768-148）綜合上面所有的數(shù)據(jù)，結(jié)論如下：最保守的一屏大小是IE6下800600：779432最廣泛使用的一屏大小是IE6下1024768 ：1003600,二、搜索框設(shè)計(jì)規(guī)范,1.基礎(chǔ)規(guī)范,文本框 a. 搜索框文本框的長

3、度應(yīng)適中，至少應(yīng)提供顯示10個(gè)中文字符的寬度 b. 搜索組件中使用的文本框必須為單行文本框 c. 文本框的長度不得少于130個(gè)像素 高度不得低于18個(gè)像素,幫助信息 a. 幫助信息一般包括三塊內(nèi)容：限定標(biāo)簽提示、標(biāo)示性文字、熱門關(guān)鍵詞提示等， b. “限定標(biāo)簽提示”一般放在搜索框的上面 c. “熱門關(guān)鍵詞提示”一般放在搜索框下面 d. “標(biāo)示性文字” 可設(shè)置灰色(#cccccc)顯示，點(diǎn)擊輸入框后提示文字消失。提示文字應(yīng)簡明扼要，文字一般用于內(nèi)容、用途、搜索范圍等對(duì)用戶有真正幫助的提示，”請(qǐng)輸入關(guān)鍵詞”這樣的提示不應(yīng)出現(xiàn).,搜索按鈕 a. 搜索按鈕一般包含圖標(biāo)形式和文字形式兩種 b. 使用圖標(biāo)

4、形式時(shí)只能使用放大鏡的圖標(biāo)，而不能采用其他元素。,二、搜索框設(shè)計(jì)規(guī)范,d. 圖標(biāo)形式（放大鏡）和文字形式可搭配使用，會(huì)出現(xiàn)如下三種情況：,文字形式： 搭配使用： 圖形形式：,c. 搜索button規(guī)范文字為“搜索”避免采用其他描述。比如：,使用SOSO引擎的可考慮在搜索框前加SOSO LOGO,同一個(gè)web產(chǎn)品中搜索的位置和表現(xiàn)形式盡量保持一致,二、搜索框設(shè)計(jì)規(guī)范,2. 應(yīng)用場景 強(qiáng)表現(xiàn)方式：,加大搜索框的顯示，輸入框內(nèi)采用大字體（14號(hào)） 突出搜索button的表現(xiàn)，更直觀，更有點(diǎn)擊欲 位置放在頁頭的中間并明顯標(biāo)示,二、搜索框設(shè)計(jì)規(guī)范,輸入框內(nèi)采用小字體（12號(hào)） 長度大約以剛好放完提示文字

5、為基準(zhǔn) 弱化搜索button的表現(xiàn)，可考慮用icon代替 搜索框通常放在頁頭的右上角,2. 應(yīng)用場景 弱表現(xiàn)方式：,三、頁碼設(shè)計(jì)規(guī)范,1.普通頁碼翻頁的表現(xiàn)方法： 頁碼由三部分構(gòu)成：一為頁碼狀態(tài)區(qū)，表明頁碼在當(dāng)前第幾頁位置以及共有多少頁；二為頁碼翻頁區(qū)，由上下翻頁按鈕與頁碼顯示區(qū)構(gòu)成；三為跳轉(zhuǎn)翻頁區(qū)。三部分組成頁碼翻頁區(qū)域位于產(chǎn)品右下角，三部分距離不可分開過大。,鏈接頁碼的設(shè)計(jì)力求簡明獨(dú)立，頁碼與頁碼之間的間距不小于鼠標(biāo)手型的距離，如圖所示,三、頁碼設(shè)計(jì)規(guī)范,鏈接頁碼為簡明獨(dú)立，不加任何修飾的數(shù)字形式 鏈接顏色由當(dāng)前頁面設(shè)計(jì)決定 數(shù)字大小建議為12-14px ,以易于點(diǎn)擊為原則.,2. 小型頁

6、碼翻頁的表現(xiàn)方法：,詳見產(chǎn)品頁碼翻頁普用標(biāo)準(zhǔn),四、廣告設(shè)計(jì)規(guī)范,禁止模仿任何windows標(biāo)準(zhǔn)控件，windows標(biāo)準(zhǔn)控件包括但不限于：鼠標(biāo)指針、按鈕以及窗口控制按鈕等。,可參考廣告、營銷消息與營銷郵件體驗(yàn)規(guī)范,不要使用按鈕作長句廣告： 錯(cuò)誤案例： 騰訊網(wǎng)避免出現(xiàn)企鵝形象廣告,五、文字的編排與設(shè)計(jì),文字大?。航ㄗh使用12號(hào)+14號(hào)字體的混合搭配，13號(hào)也可酌情考慮，因?yàn)?3號(hào)字體的不對(duì)稱性，目前非主流。 需突出的內(nèi)容部分、新聞標(biāo)題、欄目標(biāo)題等多使用14號(hào)字體 廣告內(nèi)容、輔助信息或介紹性文字等多使用12號(hào)字體 避免大面積使用加粗字體,總體原則：提高文字的辨識(shí)性和頁面的易讀性,五、文字的編排與設(shè)計(jì)

7、,2文字顏色： 同一網(wǎng)站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文字顏色,特別注意：菜單盡量不使用12號(hào)加粗，這樣會(huì)導(dǎo)致復(fù)雜的文字難以辨認(rèn)。多采用14號(hào)加粗,一般情況下字體變化不要超過三種，若有需要，可以盡量采用統(tǒng)一字體的不同字族。,五、文字的編排與設(shè)計(jì),灰黑色 當(dāng)使用灰色為文字顏色時(shí)，正灰色的明度數(shù)值（B）不大于30%。 當(dāng)使用帶有色彩傾向的灰色時(shí)，根據(jù)色相不同，應(yīng)對(duì)明度值（B）作相應(yīng)調(diào)整。 因?yàn)椴煌兩炼炔煌?，黃色亮度最高，藍(lán)色/紫色亮度最底，其他色相則屬中間亮度。因此使用亮度越高的色彩，其明度值（B）應(yīng)該越低。,正文的文字顏色多采用深藍(lán)色或深灰色。在討論顏色前，首先要明確一這

8、個(gè)判斷的衡量標(biāo)準(zhǔn)。我們是以Ps的顏色系統(tǒng)為討論基礎(chǔ)的。,建議使用：,五、文字的編排與設(shè)計(jì),深藍(lán)色 當(dāng)使用純藍(lán)色為文字顏色時(shí)，明度數(shù)值（B）不大于60%。當(dāng)藍(lán)色介于純藍(lán)往天藍(lán)之間的時(shí)候，根據(jù)色相不同，應(yīng)對(duì)明度值（B）作相應(yīng)調(diào)整。 當(dāng)色相越接近天藍(lán)時(shí)，（B）值應(yīng)該越低。 很多門戶網(wǎng)站使用藍(lán)色為文字顏色，常用的有,建議使用天藍(lán)色的： 純藍(lán)色：,五、文字的編排與設(shè)計(jì),其他顏色 當(dāng)使用其他顏色作為正文主色調(diào)時(shí)，安全起見可采用明度數(shù)值（B）不大于30%的顏色。,五、文字的編排與設(shè)計(jì),3文字行距： 視覺最佳行距是字體大小的1.3-1.6倍 12號(hào)宋體，我們一般使用的行距為8-9個(gè)像素。 14號(hào)宋體，我們一般

9、使用的行距為10-11個(gè)像素。 正文多采用14號(hào)字，行距可適當(dāng)調(diào)整為10-16個(gè)像素。,4英文字體的使用： 英文建議使用Arial：Arial與Helvetica / Univers并列為目前的標(biāo)準(zhǔn)無襯線字體（Sans Serif），字型依據(jù)Unicode標(biāo)準(zhǔn)包含多國語言文字在內(nèi)。 Arial比例及字重和Helvetica(mac上用的字體)極之相近,系統(tǒng)自帶并能與漢字匹配的點(diǎn)陣字比較:,五、文字的編排與設(shè)計(jì),Arial字體 優(yōu)點(diǎn):比例及字重（weight）和Helvetica極之相近 ; 沒有下劃線貼邊的問題；Q字沒尾巴；字高整齊 缺點(diǎn):大寫I與小寫L無法區(qū)分 下劃線:,Tahoma字體 優(yōu)

10、點(diǎn):字寬較闊,字母間距較窄，恒定1px（閱讀單個(gè)字母有困難）形態(tài)上符合漢字“方塊字”點(diǎn)陣字；能區(qū)分大寫I與小寫L 缺點(diǎn):12號(hào)字有下劃線貼邊的問題；Q字有尾巴；字高不整齊 下劃線:,五、文字的編排與設(shè)計(jì),Verdana字體 優(yōu)點(diǎn):沒有下劃線貼邊的問題,能區(qū)分大寫I與小寫L 缺點(diǎn):字體較寬，間距大，字型圓同一寬度可顯示字節(jié)比其他字體少得多 ; Q字有尾巴；字高不整齊 下劃線:,應(yīng)用案例,五、文字的編排與設(shè)計(jì),CSS書寫規(guī)范,各主要網(wǎng)站字體使用情況,font-family:Helvetica,Arial,simsun;,五、文字的編排與設(shè)計(jì),隱性鏈接： 對(duì)于混雜在頁面文字中零散出現(xiàn)的文字鏈接，為了

11、便于識(shí)別，默認(rèn)時(shí)候可以出現(xiàn)下劃線或使用輔助鏈接色，光標(biāo)經(jīng)過的時(shí)候，樣式不變。,5文字鏈接： 文字鏈接形式不得超過3種顏色（規(guī)定其中一種為主鏈接色）。 顯性鏈接： 大面積鏈接的網(wǎng)站，比如門戶首頁、內(nèi)容列表頁。多采取灰黑色、藍(lán)色做全篇的鏈接色，默認(rèn)時(shí)不顯示下劃線，光標(biāo)經(jīng)過時(shí)才顯示下劃線。,六、整齊的概念和應(yīng)用,類似這樣“豆腐塊”的文字排列，在大型網(wǎng)站中尤為重要。 如何去分割和組織大量繁雜的信息？將文字塊當(dāng)作圖片一樣來排版優(yōu)化，來平衡頁面。 對(duì)齊 網(wǎng)頁設(shè)計(jì)中的”對(duì)齊”同傳統(tǒng)的印刷排版中的對(duì)齊概念是一樣的，并且同等重要。 并不是說一切都應(yīng)該在一條直線上，而是盡可能的保持一貫的整齊，不僅左對(duì)齊，也要盡量

12、右對(duì)齊。使我們的設(shè)計(jì)更有序。更方便閱讀。,六、整齊的概念和應(yīng)用,首頁上摘要無須空格。,內(nèi)容正文應(yīng)該空兩格。,六、整齊的概念和應(yīng)用,“豆腐塊”四周應(yīng)該空留均勻適當(dāng)?shù)拈g隔,模塊化的幾類參考表現(xiàn)： 單線 3-5個(gè)像素的圓角 內(nèi)邊修飾 .,七、模塊化表現(xiàn),設(shè)計(jì)準(zhǔn)則：同一個(gè)網(wǎng)站采用的模塊化表現(xiàn)應(yīng)該是全部統(tǒng)一的。,頁腳信息按照從上到下的排列次序?yàn)? 1、內(nèi)部導(dǎo)航 2、外部導(dǎo)航 3、各類許可證、授權(quán)聲明 4、英文版權(quán)信息“Copyright ” 5、中文版權(quán)信息 6、各類網(wǎng)絡(luò)安全/工商證明/技術(shù)支持 LOGO 各鏈接間隔統(tǒng)一使用”| ” 建議采用12號(hào)字， 禁止使用加粗字體,八、頁腳信息,目錄,一、 基礎(chǔ)規(guī)范,二、參考指南,01 網(wǎng)頁寬度 02 搜索框設(shè)計(jì)規(guī)范 基礎(chǔ)規(guī)范 應(yīng)用場景 03 頁碼設(shè)計(jì)規(guī)范 普通頁碼翻頁 小型頁碼翻頁 04 廣告設(shè)計(jì)規(guī)范 05 文字的編排與設(shè)計(jì) 文字大小 文字顏色 文字行距 英文字體規(guī)范 文字鏈接 06 整齊的概念和應(yīng)用 07 模塊化表現(xiàn) 08 頁腳信息,01 頁面修飾 簡單的光影效果 質(zhì)感的表現(xiàn) 透明效果的應(yīng)用 02 個(gè)性皮膚的應(yīng)用 03 圖標(biāo)的統(tǒng)一使用 04 圖標(biāo)表意,一、頁面修飾,1。簡單的光影效果,2。質(zhì)感表現(xiàn),基本采用簡單的漸變