網(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)一尺寸。 特殊情況

2、 1 . 信息量或圖片量過大的情況，可以考慮加寬承載，給出兩個(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)采用大字體（1

3、4號） 突出搜索button的表現(xiàn)，更直觀，更有點(diǎn)擊欲 位置放在頁頭的中間并明顯標(biāo)示 二、搜索框設(shè)計(jì)規(guī)范 2. 應(yīng)用場景 弱表現(xiàn)方式： 輸入框內(nèi)采用小字體（12號） 長度大約以剛好放完提示文字為基準(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ú)立，頁碼與頁碼之間的間距不小于鼠

4、標(biāo)手型的距離，如圖所示 三、頁碼設(shè)計(jì)規(guī)范 鏈接頁碼為簡明獨(dú)立，不加任何修飾的數(shù)字形式 鏈接顏色由當(dāng)前頁面設(shè)計(jì)決定 數(shù)字大小建議為12-14px ,以易于點(diǎn)擊為原則. 2. 小型頁碼翻頁的表現(xiàn)方法： 五、文字的編排與設(shè)計(jì) 1.文字大?。航ㄗh使用12號+14號字體的混合搭配，13號也可酌情考慮，因?yàn)?3號字體的不對稱性，目前非主流。 需突出的內(nèi)容部分、新聞標(biāo)題、欄目標(biāo)題等多使用14號字體 廣告內(nèi)容、輔助信息或介紹性文字等多使用12號字體 避免大面積使用加粗字體 總體原則：提高文字的辨識(shí)性和頁面的易讀性 五、文字的編排與設(shè)計(jì) 2文字顏色： 同一網(wǎng)站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文

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

6、的編排與設(shè)計(jì) 深藍(lán)色 當(dāng)使用純藍(lán)色為文字顏色時(shí)，明度數(shù)值（B）不大于60%。當(dāng)藍(lán)色介于純藍(lán)往天藍(lán)之間的時(shí)候，根據(jù)色相不同，應(yīng)對明度值（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號宋體，我們一般使用的行距為8-9個(gè)像素。 14號宋體，我們一般使用的行距為10-11個(gè)像素。 正文多采用14號字，行距可適當(dāng)調(diào)整為10-1

7、6個(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)點(diǎn):字寬較闊,字母間距較窄，恒定1px（閱讀單個(gè)字母有困難）形態(tài)上符合漢字“

8、方塊字”點(diǎn)陣字；能區(qū)分大寫I與小寫L 缺點(diǎn):12號字有下劃線貼邊的問題；Q字有尾巴；字高不整齊 下劃線: 五、文字的編排與設(shè)計(jì) Verdana字體 優(yōu)點(diǎn):沒有下劃線貼邊的問題,能區(qū)分大寫I與小寫L 缺點(diǎn):字體較寬，間距大，字型圓同一寬度可顯示字節(jié)比其他字體少得多 ; Q字有尾巴；字高不整齊 下劃線: 應(yīng)用案例 五、文字的編排與設(shè)計(jì) 隱性鏈接： 對于混雜在頁面文字中零散出現(xiàn)的文字鏈接，為了便于識(shí)別，默認(rèn)時(shí)候可以出現(xiàn)下劃線或使用輔助鏈接色，光標(biāo)經(jīng)過的時(shí)候，樣式不變。 5文字鏈接： 文字鏈接形式不得超過3種顏色（規(guī)定其中一種為主鏈接色）。 顯性鏈接： 大面積鏈接的網(wǎng)站，比如門戶首頁、內(nèi)容列表頁。多采

9、取灰黑色、藍(lán)色做全篇的鏈接色，默認(rèn)時(shí)不顯示下劃線，光標(biāo)經(jīng)過時(shí)才顯示下劃線。 六、整齊的概念和應(yīng)用 類似這樣“豆腐塊”的文字排列，在大型網(wǎng)站中尤為重要。 如何去分割和組織大量繁雜的信息？將文字塊當(dāng)作圖片一樣來排版優(yōu)化，來平衡頁面。 對齊 網(wǎng)頁設(shè)計(jì)中的”對齊”同傳統(tǒng)的印刷排版中的對齊概念是一樣的，并且同等重要。 并不是說一切都應(yīng)該在一條直線上，而是盡可能的保持一貫的整齊，不僅左對齊，也要盡量右對齊。使我們的設(shè)計(jì)更有序。更方便閱讀。 六、整齊的概念和應(yīng)用 首頁上摘要無須空格。 內(nèi)容正文應(yīng)該空兩格。 六、整齊的概念和應(yīng)用 “豆腐塊”四周應(yīng)該空留均勻適當(dāng)?shù)拈g隔 模塊化的幾類參考表現(xiàn)： 單線 3-5個(gè)像素

10、的圓角 內(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號字， 禁止使用加粗字體 八、頁腳信息 目錄 一、 基礎(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ī)范

11、文字鏈接 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) 基本采用簡單的漸變，不需要繁雜的修飾 一、頁面修飾 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é)方面的處理都是照顧十分周全的。今天在這里 分享給大家的小技巧

12、很簡單，但是卻可以很好滴增強(qiáng)整個(gè)網(wǎng)站的細(xì)節(jié)。所以我自我認(rèn)為這些技巧對提升你的網(wǎng)站設(shè)計(jì)水平也是有幫助的。并且你 會(huì)留意到這些技巧都圍繞一個(gè)詞，就是“像素化”，簡單地說就是一些1px，2px的小線。 好吧，我們開始。 1.像素分隔線像素分隔線 1.選取鉛筆工具（不要選錯(cuò)為畫筆）,大小調(diào)為1px 2.選取一個(gè)較背景色更深的顏色，如圖中的深藍(lán)色，按住Shift畫 出一條直線 3.選取一個(gè)較淺的顏色，再畫一條直線。OK 分隔線技巧的例子分隔線技巧的例子 2.像素邊緣 首先我們看一張沒有加“像素邊緣”的 原圖： 接下來是加上后的： 看出來區(qū)別了嗎？沒關(guān)系，接下來 請看放大下的圖片：. 可以看到在黑色塊的下面畫了一條1px的純白色線。而這條線讓下面的白色塊的邊緣不再平淡無奇，而有一種燈光反射（高亮）的效果。使得白色 塊的邊緣更加突出。而方法跟第1個(gè)技巧是一樣的，就是用鉛筆工具畫1px的線。需要注意顏色的選擇，一般選擇比背景色更淺的顏色，才能制造 高亮