網(wǎng)頁設(shè)計(jì)規(guī)范

1、Web設(shè)計(jì)規(guī)范 2012-10-5目錄一、 基礎(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)使用960的網(wǎng)頁寬度，與騰訊網(wǎng)首頁統(tǒng)一尺寸。特殊情況1 . 信息量或圖片量過大的情況

2、，可以考慮加寬承載，給出兩個(gè)參考尺寸：950（paipai，Qbar等)990（QQshow，游戲產(chǎn)品等)2. 搜索類信息頁面，采用自適應(yīng)屏幕方式（比如soso搜索產(chǎn)品) 二、搜索框設(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)擊欲 位

3、置放在頁頭的中間并明顯標(biāo)示二、搜索框設(shè)計(jì)規(guī)范2. 應(yīng)用場景弱表現(xiàn)方式： 輸入框內(nèi)采用小字體（12號(hào)）長度大約以剛好放完提示文字為基準(zhǔn) 弱化搜索button的表現(xiàn)，可考慮用icon（圖標(biāo)格式 ）代替搜索框通常放在頁頭的右上角三、頁碼設(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ú)立，不加任何修飾的

4、數(shù)字形式 鏈接顏色由當(dāng)前頁面設(shè)計(jì)決定 數(shù)字大小建議為12-14px ,以易于點(diǎn)擊為原則.2. 小型頁碼翻頁的表現(xiàn)方法： 五、文字的編排與設(shè)計(jì)1.文字大?。航ㄗ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ì)2文字顏色： 同一網(wǎng)站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文字顏色特別注意：菜單盡量不使用12號(hào)加粗，這樣會(huì)導(dǎo)致復(fù)雜的文字難以辨認(rèn)。多采用14號(hào)加

5、粗 一般情況下字體變化不要超過三種，若有需要，可以盡量采用統(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)色或深灰色。在討論顏色前，首先要明確一這個(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í)

6、候，根據(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)宋體，我們一般使用的行距為10-11個(gè)像素。正文多采用14號(hào)字，行距可適當(dāng)調(diào)整為10-16個(gè)像素。4英文字體的使用：英文建議使用Arial：Arial與Helvetica / Univers并列為目前的標(biāo)準(zhǔn)無襯線字

7、體（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)點(diǎn):字寬較闊,字母間距較窄，恒定1px（閱讀單個(gè)字母有困難）形態(tài)上符合漢字“方塊字”點(diǎn)陣字；能區(qū)分大寫I與小寫L缺點(diǎn):12號(hào)字有下劃線貼邊的問題；Q字有尾巴；字高不整齊下劃線:五、文字的編排與設(shè)計(jì)Verdana字體優(yōu)點(diǎn):

8、沒有下劃線貼邊的問題,能區(qū)分大寫I與小寫L缺點(diǎn):字體較寬，間距大，字型圓同一寬度可顯示字節(jié)比其他字體少得多 ; Q字有尾巴；字高不整齊下劃線:應(yīng)用案例五、文字的編排與設(shè)計(jì)隱性鏈接：對(duì)于混雜在頁面文字中零散出現(xiàn)的文字鏈接，為了便于識(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)站中尤為重要。如何去分割和組織大量繁雜的信

9、息？將文字塊當(dāng)作圖片一樣來排版優(yōu)化，來平衡頁面。 對(duì)齊網(wǎng)頁設(shè)計(jì)中的”對(duì)齊”同傳統(tǒng)的印刷排版中的對(duì)齊概念是一樣的，并且同等重要。并不是說一切都應(yīng)該在一條直線上，而是盡可能的保持一貫的整齊，不僅左對(duì)齊，也要盡量右對(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)信

10、息“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ì)

11、感表現(xiàn)基本采用簡單的漸變，不需要繁雜的修飾一、頁面修飾3. 透明效果四、圖標(biāo)表意詳細(xì)參考圖標(biāo)設(shè)計(jì)規(guī)范四、圖標(biāo)表意詳細(xì)參考圖標(biāo)設(shè)計(jì)規(guī)范四、圖標(biāo)表意詳細(xì)參考圖標(biāo)設(shè)計(jì)規(guī)范五， PS加強(qiáng)網(wǎng)頁設(shè)計(jì)中像素化細(xì)節(jié)的技巧在網(wǎng)頁設(shè)計(jì)中細(xì)節(jié)的處理十分重要，我個(gè)人也經(jīng)常觀摩外國佬的網(wǎng)站，發(fā)現(xiàn)優(yōu)秀的網(wǎng)站設(shè)計(jì)在細(xì)節(jié)方面的處理都是照顧十分周全的。今天在這里分享給大家的小技巧很簡單，但是卻可以很好滴增強(qiáng)整個(gè)網(wǎng)站的細(xì)節(jié)。所以我自我認(rèn)為這些技巧對(duì)提升你的網(wǎng)站設(shè)計(jì)水平也是有幫助的。并且你會(huì)留意到這些技巧都圍繞一個(gè)詞，就是“像素化”，簡單地說就是一些1px，2px的小線。好吧，我們開始。1.像素分隔線像素分隔線1.選取鉛筆工具（不要選錯(cuò)為畫筆）,大小調(diào)為1px2.選取一個(gè)較背景色更深的顏色，如圖中的深藍(lán)色，按住Shift畫 出一條直線3.選取一個(gè)較淺的顏色，再畫一條直線。OK分隔線技巧的例子分隔線技巧的例子2.像素邊緣首先我們看一張沒有加“像素邊緣”的原圖：接下來是加上后的：看出來區(qū)別了嗎？沒關(guān)系，接下來請(qǐng)看放大下的圖片：.可以看到在黑色塊的下面畫了一條1px的純白色線。而這條線讓下面的白色塊的邊緣不再平淡無奇，而有一種燈光反射（高亮）的效果。使得白色塊的邊緣更加突出。而方法跟第1個(gè)技巧是一樣的，就是用鉛筆工具畫1px的線。需要注意顏色的選擇，一般選擇比背景色更淺的顏色，才能制造高亮的