CO下載騰訊網(wǎng)Web面設(shè)計(jì)規(guī)范

Web設(shè)計(jì)規(guī)范V1.3

CDCWUI

2008/10/29目錄一、基礎(chǔ)規(guī)范01

網(wǎng)頁寬度02搜索框設(shè)計(jì)規(guī)范

基礎(chǔ)規(guī)范

應(yīng)用場(chǎng)景03

頁碼設(shè)計(jì)規(guī)范

普通頁碼翻頁

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

05文字的編排與設(shè)計(jì)

文字大小

文字顏色

文字行距

英文字體規(guī)范

文字鏈接06整齊的概念和應(yīng)用07模塊化表現(xiàn)08頁腳信息二、參考指南01

頁面修飾

簡(jiǎn)單的光影效果

質(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)頁寬度，與騰訊網(wǎng)首頁統(tǒng)一尺寸。特殊情況1.信息量或圖片量過大的情況，可以考慮加寬承載，給出兩個(gè)參考尺寸：950（paipai，Qbar等)990（QQshow，游戲產(chǎn)品等)2.搜索類信息頁面，采用自適應(yīng)屏幕方式（比如soso搜索產(chǎn)品)

一、網(wǎng)頁寬度不同瀏覽器，不同分辨率下網(wǎng)頁第一屏最大可視區(qū)域：有效可視區(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)1005(+19)629(+139)1261(+19)885(+139)說明：比如1024×768下IE7.0的可視面積是（1024-21）×（768-148）

綜合上面所有的數(shù)據(jù)，結(jié)論如下：

最保守的一屏大小是IE6下800×600：779×432

最廣泛使用的一屏大小是IE6下1024×768：1003×600

二、搜索框設(shè)計(jì)規(guī)范1.基礎(chǔ)規(guī)范文本框a.搜索框文本框的長(zhǎng)度應(yīng)適中，至少應(yīng)提供顯示10個(gè)中文字符的寬度b.搜索組件中使用的文本框必須為單行文本框c.文本框的長(zhǎng)度不得少于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)簡(jiǎn)明扼要，文字一般用于內(nèi)容、用途、搜索范圍等對(duì)用戶有真正幫助的提示，”請(qǐng)輸入關(guān)鍵詞”這樣的提示不應(yīng)出現(xiàn).

搜索按鈕a.搜索按鈕一般包含圖標(biāo)形式和文字形式兩種b.使用圖標(biāo)形式時(shí)只能使用放大鏡的圖標(biāo)，而不能采用其他元素。

二、搜索框設(shè)計(jì)規(guī)范d.圖標(biāo)形式（放大鏡）和文字形式可搭配使用，會(huì)出現(xiàn)如下三種情況：文字形式：搭配使用：圖形形式：

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

使用SOSO引擎的可考慮在搜索框前加SOSOLOGO同一個(gè)web產(chǎn)品中搜索的位置和表現(xiàn)形式盡量保持一致二、搜索框設(shè)計(jì)規(guī)范2.應(yīng)用場(chǎ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)）長(zhǎng)度大約以剛好放完提示文字為基準(zhǔn)

弱化搜索button的表現(xiàn)，可考慮用icon代替搜索框通常放在頁頭的右上角2.應(yīng)用場(chǎng)景弱表現(xiàn)方式：三、稿頁碼嚷設(shè)計(jì)揭規(guī)范1.普通助頁碼懇翻頁的表矩現(xiàn)方棚法：頁碼正由三瞞部分伙構(gòu)成兵：一嗚為頁駝碼狀帳態(tài)區(qū)沈，表某明頁億碼在北當(dāng)前健第幾遠(yuǎn)頁位宏置以器及共賺有多激少頁蹈；二驢為頁腹碼翻跡頁區(qū)戰(zhàn)，由樓上下時(shí)翻頁完按鈕擊與頁坊碼顯憑示區(qū)捉構(gòu)成疤；三厲為跳消轉(zhuǎn)翻袍頁區(qū)律。三賄部分世組成掉頁碼良翻頁辯區(qū)域捧位于虧產(chǎn)品事右下僅角，惹三部寄分距戴離不按可分莫開過伙大。鏈接大頁碼紹的設(shè)宴計(jì)力栽求簡(jiǎn)埋明獨(dú)袖立，頁碼似與頁超碼之院間的紋間距男不小優(yōu)于鼠畝標(biāo)手歇型的混距離影，如滅圖所期示三、光頁碼規(guī)設(shè)計(jì)勁規(guī)范鏈接臟頁碼關(guān)為簡(jiǎn)愧明獨(dú)暴立，網(wǎng)不加襲任何霜修飾肝的數(shù)紐奉字形擋式鏈接翁顏色吐由當(dāng)夾前頁舍面設(shè)季計(jì)決順定數(shù)字軋大小紐奉建議玻為12閉-1腰4p田x呼,以易精于點(diǎn)叢擊為鉤原則.2.小型頁碼喚翻頁的表扎現(xiàn)方尺法：詳見《產(chǎn)品筆頁碼填翻頁損普用拆標(biāo)準(zhǔn)》四、燈廣告怒設(shè)計(jì)蹄規(guī)范禁止標(biāo)模仿茂任何wi睜nd項(xiàng)ow帖s標(biāo)準(zhǔn)習(xí)控件轉(zhuǎn)，wi雷nd谷ow眠s標(biāo)準(zhǔn)洲控件篩包括鋸但不誤限于只：鼠館標(biāo)指右針、編按鈕虎以及繞窗口腸控制躍按鈕盒等?？蓞⒗w考《廣告絲式、營(yíng)奴銷消疤息與鐮營(yíng)銷需郵件偵體驗(yàn)貞規(guī)范》不要沿使用啊按鈕遮作長(zhǎng)臭句廣蜂告：錯(cuò)誤濾案例刪：騰訊片網(wǎng)避蘇免出這現(xiàn)企必鵝形撞象廣腦告五、偏文字鉆的編弄排與暗設(shè)計(jì)文字傘大小葛：建議互使用12號(hào)+1拌4號(hào)字銅體的帳混合坑搭配逐，13號(hào)也拾可酌停情考磨慮，堡因?yàn)?3號(hào)字結(jié)體的擴(kuò)不對(duì)叔稱性顫，目閑前非瘦主流仍。需突誘出的掀內(nèi)容凈部分扛、新西聞標(biāo)特題、瓣欄目饞標(biāo)題憑等多布使用14號(hào)字叼體廣告雷內(nèi)容丹、輔腦助信論息或廁介紹匙性文扛字等畫多使掠用12號(hào)字效體避免德大面廳積使壘用加罷粗字室體總體聾原則臂：提性高文塘字的柏辨識(shí)話性和際頁面筆的易榴讀性五、蔬文字斥的編糕排與巧設(shè)計(jì)2．文收字顏復(fù)色：同一養(yǎng)網(wǎng)站旗需要追定出辨主文夏字顏紐奉色，鞏特殊汪情況飽下可服以有2種左如右的良輔助喪文字舅顏色特別閃注意掩：菜單帶盡量嘉不使勉用12號(hào)加斬粗，這底樣會(huì)曠導(dǎo)致休復(fù)雜珍的文松字難謠以辨勾認(rèn)。勉多采柏用14號(hào)加丙粗一般支情況在下字當(dāng)體變諷化不悶要超跪過三相種，義若有缸需要偏，可砍以盡辜量采漁用統(tǒng)厚一字咳體的霜不同榮字族蒙。五、恒文字物的編即排與宗設(shè)計(jì)灰黑議色當(dāng)使取用灰脾色為授文字糕顏色嫩時(shí)，學(xué)正灰訪色的制明度澤數(shù)值翠（B）不大昨于30潔%。當(dāng)使婆用帶沙有色研彩傾揭向的復(fù)灰色濁時(shí)，凡根據(jù)都色相純不同怖，應(yīng)株對(duì)明左度值秋（B）作相壓應(yīng)調(diào)睜整。因?yàn)榍覆煌诩兩粤炼人共煌危S柳色亮伴度最彩高，液藍(lán)色/紫色慘亮度趨最底貧，其住他色蹦相則褲屬中書間亮驗(yàn)度。寺因此賭使用匪亮度劇越高錯(cuò)的色窮彩，貧其明能度值變（B）應(yīng)該姜越低菌。正文刑的文泥字顏闖色多替采用稅深藍(lán)蛋色或隨深灰其色。目在討泰論顏露色前擔(dān)，首沾先要互明確脊一這原個(gè)判規(guī)斷的廉衡量醬標(biāo)準(zhǔn)占。我清們是粒以Ps的顏史色系迫統(tǒng)為嗚討論益基礎(chǔ)挎的。建議脹使用歷：五、柜文字駁的編左排與則設(shè)計(jì)深藍(lán)教色當(dāng)使禽用純朱藍(lán)色步為文朵字顏凡色時(shí)應(yīng)，明與度數(shù)灘值（B）不大含于60某%。當(dāng)藍(lán)裹色介擔(dān)于純面藍(lán)往如天藍(lán)矩之間慈的時(shí)幸候，怎根據(jù)列色相散不同杠，應(yīng)求對(duì)明撇度值功（B）作相桌應(yīng)調(diào)起整。當(dāng)色瓶相越習(xí)接近約天藍(lán)持時(shí)，抵（B）值應(yīng)殿該越盈低。很多跳門戶祝網(wǎng)站縣使用麥藍(lán)色視為文去字顏凈色，掌常用司的有建議鳴使用薦天藍(lán)鴉色的猾：屯純王藍(lán)色物：五、春文字毒的編殺排與傍設(shè)計(jì)其他島顏色當(dāng)使脈用其觀他顏犧色作母為正譜文主房誠(chéng)色調(diào)瓦時(shí)，兔安全槐起見媽可采械用明監(jiān)度數(shù)檔值（B）不大喚于30奇%的顏修色。五、鐮文字芹的編野排與陳設(shè)計(jì)3．粒文字抗行距偷：視覺艱最佳積行距傾是字糕體大竹小的化1.傳3-璃1.趴6倍12形號(hào)宋估體，魔我們洞一般許使用的行呀距為8-窯9個(gè)像素增。14號(hào)宋飯?bào)w，我們丈一般曉使用的行測(cè)距為10握-1延1個(gè)像素敢。正文歐多采磚用14號(hào)字滲，行失距可牧適當(dāng)譜調(diào)整醬為10-1步6個(gè)像沙素。4．英閉文字另體的慨使用橋：英文攀建議搏使用Ar相ia膨l：Ar眉ia提l與He去lv灘et床ic讀a/Un暈iv敗er假s并列望為目前丑的標(biāo)頭準(zhǔn)無非襯線膜字體凝（Sa諒ns出S喇er陣if），字型御依據(jù)Un善ic獅od耗e標(biāo)準(zhǔn)俊包含乎多國(guó)跪語言扮文字贊在內(nèi)針。Ar亮ia狐l比例馳及字璃重和He歐lv蔑et組ic葛a(筑ma幻玉c上用禁的字曉體)極之視相近系統(tǒng)嘆自帶同并能蘆與漢串字匹臺(tái)配的塵點(diǎn)陣朝字比蒙較:五、泛文字慚的編奮排與靜設(shè)計(jì)Ar題ia芹l字體優(yōu)點(diǎn):比例鈔及字繪重（we賠ig央ht）和He明lv拿et養(yǎng)ic邁a極之坑相近;沒有拒下劃碗線貼牢邊的您問題所；Q字沒尺尾巴眨；字彩高整桐齊缺點(diǎn):大寫I與小距寫L無法添區(qū)分下劃聯(lián)線:Ta蹈ho璃ma字體優(yōu)點(diǎn):字寬礦較闊,字母膛間距業(yè)較窄塘，恒癢定1p撞x（閱足讀單煩個(gè)字惠母有堅(jiān)困難魄）形態(tài)絕上符牛合漢度字“有方塊川字”書點(diǎn)陣峰字；能壺區(qū)分擔(dān)大寫I與小灰寫L缺點(diǎn):12號(hào)字東有下浙劃線綿貼邊早的問兔題；Q字有帶尾巴壞；字抱高不僚整齊下劃粥線:五、斷文字輕的編榆排與其設(shè)計(jì)Ve絡(luò)rd起an矮a字體優(yōu)點(diǎn):沒有跟下劃應(yīng)線貼目邊的血問題,能區(qū)炕分大元寫I與小旗寫L缺點(diǎn):字體趙較寬泥，間脹距大墓，字質(zhì)型圓同一怕寬度車可顯馬示字樂節(jié)比恐其他市字體往少得魔多;啊Q字有犬尾巴侍；字哀高不摔整齊下劃俯線:應(yīng)用奮案例五、滑文字釣的編弟排與您設(shè)計(jì)CS睡S書寫挎規(guī)范各主淺要網(wǎng)袖站字搬體使富用情袖況fo彼nt哄-f恰am班il冶y:銀He款lv魂et隨ic差a,呼Ar維ia乒l,擦si寄ms粘un件;五、腎文字幟的編爪排與晝?cè)O(shè)計(jì)隱性歡鏈接類：對(duì)于灘混雜膠在頁辱面文風(fēng)字中夾零散添出現(xiàn)雹的文燈字鏈宿接，堤為了貿(mào)便于趣識(shí)別饒，默蘋認(rèn)時(shí)但候可宏以出腥現(xiàn)下川劃線紹或使巷用輔區(qū)助鏈鍛接色佩，光頂標(biāo)經(jīng)粉過的乒時(shí)候攤，樣洪式不煌變。5．文華字鏈添接：文字題鏈接語形式裕不得匪超過3種顏固色（械規(guī)定住其中逐一種副為主慢鏈接拼色）皇。顯性漂鏈接芹：大面屢積鏈溜接的執(zhí)網(wǎng)站劣，比戰(zhàn)如門挎戶首焦頁、典內(nèi)容哨列表徑頁。茄多采皂取灰辱黑色樹、藍(lán)運(yùn)色做耽全篇盲的鏈匪接色膚，默餓認(rèn)時(shí)君不顯隆示下犁劃線蓬，光替標(biāo)經(jīng)笨過時(shí)口才顯球示下鑼劃線繳。六、樹整齊織的概顯念和呀應(yīng)用類似挺這樣閉“豆驗(yàn)腐塊風(fēng)”的絕文字籌排列退，在起大型持網(wǎng)站誼中尤砌為重悠要。如何拾去分穗割和振組織眾大量迎繁雜煎的信神息？蠟將文娛字塊卡當(dāng)作竹圖片糧一樣常來排每版優(yōu)棵化，捎來平數(shù)衡頁限面。對(duì)齊網(wǎng)頁效設(shè)計(jì)彈中的”對(duì)齊”同傳坦統(tǒng)的自印刷屈排版產(chǎn)中的嶺對(duì)齊醉概念夠是一禮樣的攀，并刻且同徐等重波要。并不雷是說恭一切止都應(yīng)鴉該在畏一條蔬直線敘上，渠而是泳盡可各能的通保持答一貫桑的整鉆齊，華不僅柱左對(duì)峰齊，造也要狐盡量妹右對(duì)識(shí)齊。妥使我西們的駕設(shè)計(jì)濾更有紀(jì)序。拾更方藍(lán)便閱渡讀。六、揭整齊匠的概咳念和和應(yīng)用首頁趟上摘妥要無還須空姨格。內(nèi)容總正文次應(yīng)該草空兩正格。六、殲整齊叮的概現(xiàn)念和愁應(yīng)用“豆爬腐塊櫻”四胃周應(yīng)構(gòu)該空期留均框勻適旗當(dāng)?shù)奶蓍g隔模塊魔化的冷幾類已參考啦表現(xiàn)些：?jiǎ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、英文優(yōu)版權(quán)賴信息“Co暴py逆ri怕gh祖t爆?”5、中文憑版權(quán)松信息6、各類孤網(wǎng)絡(luò)燦安全/工商親證明/技術(shù)蕩支持LO戚GO各鏈?zhǔn)ソ娱g繪隔統(tǒng)竟一使尋用”|并”建議采用12號(hào)字篩，禁止雹使用肥加粗攀字體八、指頁腳握信息目錄一、戰(zhàn)基礎(chǔ)傭規(guī)范二、森參考棉指南01網(wǎng)頁肺寬度