《騰訊設(shè)計(jì)規(guī)范》PPT課件.ppt

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

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

3、度應(yīng)適中，至少應(yīng)提供顯示10個(gè)中文字符的寬度 b. 搜索組件中使用的文本框必須為單行文本框 c. 文本框的長(zhǎng)度不得少于130個(gè)像素 高度不得低于18個(gè)像素,幫助信息 a. 幫助信息一般包括三塊內(nèi)容：限定標(biāo)簽提示、標(biāo)示性文字、熱門(mén)關(guān)鍵詞提示等， b. “限定標(biāo)簽提示”一般放在搜索框的上面 c. “熱門(mén)關(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)

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)用場(chǎng)景 強(qiáng)表現(xiàn)方式：,加大搜索框的顯示，輸入框內(nèi)采用大字體（14號(hào)） 突出搜索button的表現(xiàn)，更直觀，更有點(diǎn)擊欲 位置放在頁(yè)頭的中間并明顯標(biāo)示,二、搜索框設(shè)計(jì)規(guī)范,輸入框內(nèi)采用小字體（12號(hào)） 長(zhǎng)度大約以剛好放完提示文字

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

6、碼翻頁(yè)的表現(xiàn)方法：,詳見(jiàn)產(chǎn)品頁(yè)碼翻頁(yè)普用標(biāo)準(zhǔn),四、廣告設(shè)計(jì)規(guī)范,禁止模仿任何windows標(biāo)準(zhǔn)控件，windows標(biāo)準(zhǔn)控件包括但不限于：鼠標(biāo)指針、按鈕以及窗口控制按鈕等。,可參考廣告、營(yíng)銷(xiāo)消息與營(yíng)銷(xiāo)郵件體驗(yàn)規(guī)范,不要使用按鈕作長(zhǎng)句廣告： 錯(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í)性和頁(yè)面的易讀性,五、文字的編排與設(shè)計(jì)

7、,2文字顏色： 同一網(wǎng)站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文字顏色,特別注意：菜單盡量不使用12號(hào)加粗，這樣會(huì)導(dǎo)致復(fù)雜的文字難以辨認(rèn)。多采用14號(hào)加粗,一般情況下字體變化不要超過(guò)三種，若有需要，可以盡量采用統(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)該越低。 很多門(mén)戶網(wǎng)站使用藍(lán)色為文字顏色，常用的有,建議使用天藍(lán)色的： 純藍(lán)色：,五、文字的編排與設(shè)計(jì),其他顏色 當(dāng)使用其他顏色作為正文主色調(diào)時(shí)，安全起見(jiàn)可采用明度數(shù)值（B）不大于30%的顏色。,五、文字的編排與設(shè)計(jì),3文字行距： 視覺(jué)最佳行距是字體大小的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)無(wú)襯線字體（Sans Serif），字型依據(jù)Unicode標(biāo)準(zhǔn)包含多國(guó)語(yǔ)言文字在內(nèi)。 Arial比例及字重和Helvetica(mac上用的字體)極之相近,系統(tǒng)自帶并能與漢字匹配的點(diǎn)陣字比較:,五、文字的編排與設(shè)計(jì),Arial字體 優(yōu)點(diǎn):比例及字重（weight）和Helvetica極之相近 ; 沒(méi)有下劃線貼邊的問(wèn)題；Q字沒(méi)尾巴；字高整齊 缺點(diǎn):大寫(xiě)I與小寫(xiě)L無(wú)法區(qū)分 下劃線:,Tahoma字體 優(yōu)

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

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

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