以下分各模塊介紹。

設(shè)計(jì)規(guī)范介紹

什么是設(shè)計(jì)規(guī)范？
《產(chǎn)品設(shè)計(jì)部·人機(jī)交互界面設(shè)計(jì)規(guī)范 》適用用于WEB產(chǎn)品線的人機(jī)交互界面設(shè)計(jì)方面的指導(dǎo)手冊(cè)。
貫穿以用戶為中心的設(shè)計(jì)指導(dǎo)方向，根據(jù)新浪產(chǎn)品自身的特點(diǎn)制定出的一套規(guī)范，以達(dá)到提升用戶體驗(yàn)，控制產(chǎn)品設(shè)計(jì)質(zhì)量，提高設(shè)計(jì)效率的目的。

誰(shuí)去讀設(shè)計(jì)規(guī)范？
設(shè)計(jì)規(guī)范手冊(cè)適合界面設(shè)計(jì)師，用戶體驗(yàn)設(shè)計(jì)師，前臺(tái)技術(shù)工程師，發(fā)布支持人員，運(yùn)營(yíng)編輯人員的參照。

設(shè)計(jì)理念

精于心 簡(jiǎn)于形

通過(guò)精心簡(jiǎn)約的設(shè)計(jì),傳達(dá)先進(jìn)的技術(shù)給用戶提供便捷簡(jiǎn)單的使用體驗(yàn)

設(shè)計(jì)指導(dǎo)原則

A 設(shè)計(jì)規(guī)范?邏輯性

設(shè)計(jì)為內(nèi)容服務(wù)，根據(jù)邏輯關(guān)系通過(guò)視覺表現(xiàn)引導(dǎo)用戶使用
例如：google yahoo搜索結(jié)果頁(yè)通過(guò)字體的顏色大小突出重要度

擴(kuò)展性

采取模塊化設(shè)計(jì)的可擴(kuò)展性，減少修改和再開發(fā)的成本。
例如：奧運(yùn)項(xiàng)目左右模塊尺寸的統(tǒng)一可以方便編輯隨時(shí)調(diào)用修改內(nèi)容的位置

統(tǒng)一性

用統(tǒng)一的視覺規(guī)范，變化不能超越統(tǒng)一的尺度，個(gè)性化內(nèi)容要有統(tǒng)一風(fēng)格的繼承
例如：無(wú)論每個(gè)頻道如何追求個(gè)性不能脫離新浪整體風(fēng)格，要有繼承和延續(xù)保持從屬關(guān)系 個(gè)案除外，個(gè)案量應(yīng)有百分比，

本地化

考慮用戶的文化背景及習(xí)慣，做到設(shè)計(jì)上本地化。體現(xiàn)人文關(guān)懷例如：google，被搜索文字連接采用紅色，及中國(guó)傳統(tǒng)節(jié)日的logo體現(xiàn)。設(shè)計(jì)上不照搬英文站應(yīng)根據(jù)中文特色，體現(xiàn)中文之美

遵循視覺設(shè)計(jì)原理

頁(yè)面外觀

頁(yè)面類型：?① 普通頁(yè)面 ????② 寬帶頁(yè)面 ????③ 自適應(yīng)頁(yè)面 ????④ 其他頁(yè)面

???

類型說(shuō)明：

①?普通頁(yè)面
基本屬性：寬度?750px ┊?背景 白色#FFFFFF?┊?位置 居中?┊?邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：新浪首頁(yè) 頻道首頁(yè) 頻道二級(jí) 頻道各級(jí) 正文頁(yè)面等及其他非寬帶產(chǎn)品線

② 寬帶頁(yè)面
基本屬性：寬度?900px ┊?背景 白色#FFFFFF?┊?位置 居中?┊?邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：寬帶頻道首頁(yè)和各級(jí)頁(yè)面 不包括正文頁(yè)，及其他寬帶產(chǎn)品線

③ 自適應(yīng)
基本屬性：寬度?100 % ┊?背景 白色#FFFFFF?┊?位置 居中?┊?邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：論壇 聊天 直播 等頁(yè)面

④ 其他頁(yè)面
基本屬性：寬度?500px ┊?背景 白色#FFFFFF?┊?位置 居中?┊?邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：提示報(bào)錯(cuò)頁(yè)面

指導(dǎo)原則：

屬性中寬度、位置、邊距為不可變數(shù)據(jù)。
屬性中背景白色為常用色值，對(duì)于特殊個(gè)性化頻道可根據(jù)特殊要求變更色彩或者使用背景圖。
背景色彩遵循原則選擇顏色盡量少用飽和度高的顏色，?減少用戶視覺疲勞。
背景圖片遵循原則盡量選擇可復(fù)用的圖片，減少頁(yè)面文件量。如果遇到頁(yè)面整體外描邊效果參照?qǐng)D例(01)。

頁(yè)面結(jié)構(gòu)

基本結(jié)構(gòu)：?① 標(biāo)準(zhǔn)頭 ?② 內(nèi)容區(qū) ?③ 標(biāo)準(zhǔn)尾

標(biāo)準(zhǔn)頭分為：新浪首頁(yè)標(biāo)準(zhǔn)頭 \ 新聞中心標(biāo)準(zhǔn)頭 \ 頻道首頁(yè)標(biāo)準(zhǔn)頭? \ 頻道二級(jí)標(biāo)準(zhǔn)頭 \ 正文頁(yè)面標(biāo)準(zhǔn)頭 \ 產(chǎn)品頁(yè)面標(biāo)準(zhǔn)頭
具體樣式參見標(biāo)準(zhǔn)頭規(guī)范

標(biāo)準(zhǔn)尾分為：新浪首頁(yè)標(biāo)準(zhǔn)尾 \ 普通標(biāo)準(zhǔn)尾
具體樣式參見標(biāo)準(zhǔn)尾規(guī)范

導(dǎo)航分為：?頻道導(dǎo)航 \ 二級(jí)導(dǎo)航 \ 專題導(dǎo)航&專題圖 \ 三級(jí)導(dǎo)航 \ 導(dǎo)航指向?
具體樣式參見導(dǎo)航規(guī)范

內(nèi)容版面：具體樣式參見版式結(jié)構(gòu)類型

通欄廣告：具體樣式參見廣告規(guī)范

結(jié)構(gòu)應(yīng)用：?① 新浪首頁(yè) ?② 新聞?lì)l道 ?③ 普通頻道 ?④ 頻道二級(jí) ?⑤ 專題頁(yè)面 ?⑥ 三級(jí)頁(yè)面 ?⑦ 正文頁(yè)面 ?⑧ 產(chǎn)品頁(yè)面

標(biāo)準(zhǔn)頭部

類型分類：① 新浪首頁(yè)標(biāo)準(zhǔn)頭 ??② 新聞中心標(biāo)準(zhǔn)頭 ??③ 頻道首頁(yè)標(biāo)準(zhǔn)頭?? ④ 頻道二級(jí)標(biāo)準(zhǔn)頭???⑤ 正文頁(yè)面標(biāo)準(zhǔn)頭 ?⑥　產(chǎn)品頁(yè)面標(biāo)準(zhǔn)頭?
類型說(shuō)明：① 新浪首頁(yè)標(biāo)準(zhǔn)頭
組成部分：新浪網(wǎng)LOGO ┊ 產(chǎn)品功能區(qū) ┊ 整體網(wǎng)站導(dǎo)航
適用范圍：新浪首頁(yè)

② 新聞中心標(biāo)準(zhǔn)頭
基本屬性：產(chǎn)品功能區(qū) ┊ 整體網(wǎng)站導(dǎo)航 ┊ 廣告區(qū)域
適用范圍：新聞中心

③ 頻道首頁(yè)標(biāo)準(zhǔn)頭
基本屬性：產(chǎn)品功能區(qū) ┊?整體網(wǎng)站導(dǎo)航 ┊?廣告區(qū)
適用范圍：各頻道首頁(yè)

④ 頻道二級(jí)標(biāo)準(zhǔn)頭
基本屬性：頻道LOGO ┊ 產(chǎn)品功能區(qū)
適用范圍：各頻道首頁(yè)

⑤ 正文頁(yè)面標(biāo)準(zhǔn)頭
基本屬性：正文導(dǎo)航 ┊?搜索功能
適用范圍：頻道二極三級(jí)和專題頁(yè)面

標(biāo)準(zhǔn)尾

類型分類：?① 首頁(yè)標(biāo)準(zhǔn)頭尾 ??② 通用標(biāo)準(zhǔn)尾?類型說(shuō)明：?① 首頁(yè)標(biāo)準(zhǔn)尾
基本屬性：相關(guān)導(dǎo)航 ┊?版權(quán)信息 ┊?相關(guān)許可證號(hào)
適用范圍：新浪首頁(yè)

② 通用標(biāo)準(zhǔn)尾
基本屬性：本頻道信息┊?相關(guān)導(dǎo)航 ┊?版權(quán)信息
適用范圍：頻道首頁(yè) 頻道二極三級(jí)和專題頁(yè)面 正文頁(yè)面

頁(yè)面導(dǎo)航

類型分類：?① 頻道導(dǎo)航 ?② 二級(jí)導(dǎo)航 ?③?專題導(dǎo)航&專題圖 ?④?三級(jí)導(dǎo)航 ?⑤?導(dǎo)航指向????
類型說(shuō)明：?① 頻道導(dǎo)航
組成部分：頻道LOGO ┊?功能性導(dǎo)航 ┊?主導(dǎo)航位置區(qū) ┊ 次要導(dǎo)航位置區(qū)
適用范圍：新聞中心、頻道首頁(yè)及產(chǎn)品頁(yè)面均可使用

② 二級(jí)導(dǎo)航
組成部分：二級(jí)導(dǎo)航
適用范圍：所有頻道二級(jí)均可使用

③ 專題導(dǎo)航
組成部分：專題圖 ┊?導(dǎo)航
適用范圍：專題頁(yè)面 ，可根據(jù)需要添加刪除專題導(dǎo)航

④ 三級(jí)導(dǎo)航
組成部分：指向?qū)Ш?br /> 適用范圍：三級(jí)頁(yè)面

⑤ 正文導(dǎo)航
基本屬性：頻道LOGO ┊?指向?qū)Ш?br /> 適用范圍：正文頁(yè)面

版式結(jié)構(gòu)：

版塊基本元素：?

版塊組合形式：?版塊元素之間距為8PX??????同名版塊元素間的距離為6PX??（例如EEC中 EE距離為6 EC距離為8PX ?H2等分版式為6PX）

???
ABC版塊??????????????????????????AF版塊??????????????????????????????DC版塊????????????????????????????EEC版塊

???
CFC版塊???????????????????????????????FA版塊?? ??????????????????????????CD版式???????????????????????CEE版式

???
H1通欄版式?????? ??????????????????H2等分版式??????? ??????????????????H3等分版式??????? ????????????????H4等分版式

H(N)分版式

模塊類型

標(biāo)題種類：① 焦點(diǎn)圖 ?②?頭條區(qū) ?③ A類模塊 ?④ B類模塊 ?⑤ C類模塊
種類說(shuō)明：以下圖例除特殊注明外，所指距離均包括模塊邊框線
①?焦點(diǎn)圖

②?頭條區(qū)

③ 模塊標(biāo)題

④ 模塊內(nèi)容

⑤ 圖片列表和圖文混排

⑥ 段落關(guān)系

⑦ 段落格式

文字規(guī)范

樣式類庫(kù)：?① 文字格式 ????② 連接樣式 ????③ 項(xiàng)目符號(hào)
注：所有文字設(shè)計(jì)均依據(jù)下列樣式組合
①?文字格式
12號(hào)字格式： 字號(hào) 12 px ┊字體 宋體&Arial ?┊?行距 21 px ┊?粗體&細(xì)體 ┊
14號(hào)字格式： 字號(hào) 14 px ┊字體 宋體&Arial ?┊?行距 24 px ┊?粗體&細(xì)體 ┊
10號(hào)字格式： 字號(hào) 10 px ┊字體 Arial ??????┊?行距 無(wú) ? ?┊?細(xì)體 ?????┊
20號(hào)字格式： 字號(hào) 20?px ┊字體?黑體&Arial ?┊?行距 無(wú) ?? ┊?細(xì)體 ?????┊

說(shuō)明：10號(hào)字格式，12號(hào)字格式，14號(hào)字格式中的數(shù)字英文字母為Arial，中文為宋體
②?連接樣式
動(dòng)態(tài)鏈接樣式：?鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 下劃線?__
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #660066?■?┊狀態(tài) 下劃線?__

靜態(tài)連接樣式： 鼠標(biāo)初始： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #自定義 □ ┊狀態(tài) 無(wú)

重要鏈接樣式： 鼠標(biāo)初始： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__

③?項(xiàng)目符號(hào)：
點(diǎn)狀項(xiàng)目符號(hào)： 點(diǎn) ????·
數(shù)字項(xiàng)目符號(hào)： 數(shù)字 ??01 02 03 04 05 06 07 08 09 10
形狀項(xiàng)目符號(hào)： 自定義

應(yīng)用組合：① 導(dǎo)航類???② 標(biāo)題類??③ 信息類??④ 段落類??⑤ 功能類 ??⑥注釋類 ?⑥ 表單類

① 導(dǎo)航類

a?統(tǒng)一導(dǎo)航： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■┊?行距 21 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #333333?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #333333?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #333333?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #333333?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用豎杠符號(hào)?| 間隔

b?本頁(yè)導(dǎo)航： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 21 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #自定義?□?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #自定義 □?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用豎杠符號(hào)?| 間隔

c?標(biāo)題導(dǎo)航：?12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 21 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #000099?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用橫杠符號(hào)?– 間隔

d 導(dǎo)航指向： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 21 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #自定義?□?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #自定義 □?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用大于號(hào)符號(hào)?> 間隔

② 標(biāo)題類

a 版塊標(biāo)題： 20號(hào)文字格式 = 字號(hào) 20 px ┊ 字體 黑體 ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 無(wú)
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #自定義?□?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #自定義?□?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #自定義 □?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 標(biāo)題文字位置前可選擇性修飾符號(hào)和圖片,默認(rèn)為無(wú)

a 一類標(biāo)題： 14號(hào)文字格式 = 字號(hào) 14 px ┊ 字體 宋體&Arial ┊?粗體 ┊ 顏色 #自定義?□ ┊?行距 無(wú)
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #000099?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 標(biāo)題文字位置前可選擇性修飾符號(hào)和圖片,默認(rèn)為三角形符號(hào)

a 二類標(biāo)題： 14號(hào)文字格式 = 字號(hào) 14 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 24 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #000099?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)

a 三類標(biāo)題： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?粗體 ┊ 顏色 #自定義?□ ┊?行距 21 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #000099?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)

a 四類標(biāo)題： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 21 px
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #000099?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)

c 頭條標(biāo)題：?20號(hào)文字格式 = 字號(hào) 20 px ┊ 字體 黑體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 無(wú)
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #CC0000?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #CC0000?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)

c 正文標(biāo)題：?20號(hào)文字格式 = 字號(hào) 20 px ┊ 字體 黑體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)
文字其它說(shuō)明 = 無(wú)

e 段落標(biāo)題： 14號(hào)文字格式 = 字號(hào) 14 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 24 px
文字其它說(shuō)明 = 無(wú)

③ 信息類

a?14項(xiàng)目列表：?14號(hào)文字格式 = 字號(hào) 14 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 24 px
動(dòng)態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #660066?■?┊狀態(tài) 無(wú)
文字項(xiàng)目符號(hào)?= 點(diǎn)狀· & ?數(shù)字01 & ?無(wú)符號(hào)
文字其它說(shuō)明?=?正常默認(rèn)為點(diǎn)狀符號(hào)，排行性質(zhì)為數(shù)字符號(hào)，詞語(yǔ)或者小空間區(qū)域可采用無(wú)符號(hào)

b?12項(xiàng)目列表：?12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #自定義?□ ┊?行距 21 px
動(dòng)態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #660066?■?┊狀態(tài) 無(wú)
文字項(xiàng)目符號(hào)?= 點(diǎn)狀· & ?數(shù)字01 & ?無(wú)符號(hào)
文字其它說(shuō)明?=?正常默認(rèn)為點(diǎn)狀符號(hào)，排行性質(zhì)為數(shù)字符號(hào)，詞語(yǔ)或者小空間區(qū)域可采用無(wú)符號(hào)

b?圖片列表：???12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體&粗體 ┊ 顏色 #自定義?□ ┊?行距 無(wú)
動(dòng)態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #660066?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明?=?正常圖片列表默認(rèn)為細(xì)體，焦點(diǎn)圖處采用粗體

④ 功能類

a 普通功能文字： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #000099?■?┊?行距 無(wú)
靜態(tài)連接樣式 = 鼠標(biāo)初始： 顏色 #000099?■?┊狀態(tài) 無(wú)
鼠標(biāo)經(jīng)過(guò)： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)點(diǎn)擊： 顏色 #CC0000?■?┊狀態(tài) 下劃線?__
鼠標(biāo)結(jié)束： 顏色 #000099?■?┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 以下為各種功能文字應(yīng)用形態(tài)
更多：更多>> ???更多應(yīng)用于深背景連接連接色彩采用反白,連接顏色可自定義

全文：[全文]
詳細(xì)：[詳細(xì)]
評(píng)論：[評(píng)論]
翻頁(yè)功能：[上一頁(yè)]

⑤ 注釋類

a 時(shí)間： 12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)
b 投票： 12號(hào)文字格式 = 字號(hào) 14 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)
c 點(diǎn)擊： 12號(hào)文字格式 = 字號(hào) 14 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)?????????????⑥ 表單類
a 表單文字：12號(hào)文字格式 = 字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■┊?行距 無(wú)

⑦ 正文類
正文文字：14號(hào)文字格式 = 字號(hào) 14 px ?┊ 字體 宋體&Arial? ┊?細(xì)體 ┊ 顏色 #333333?■┊?行距 無(wú)

圖片規(guī)范

片類型：?① 橫圖? ② 豎圖? ③ 方圖??④ 專題圖?類型說(shuō)明：?①?橫圖　??比例 4:3 ?┊?尺寸種類??280*210?┊?應(yīng)用 焦點(diǎn)圖
130*98??┊?應(yīng)用 通欄圖片列表
120*90??┊?應(yīng)用 圖文混排 圖片列表
100*75??┊?應(yīng)用 圖片列表
77*58 ??┊?應(yīng)用 圖片列表
56*41 ??┊?應(yīng)用 圖片列表
比例 3:2 ?┊?尺寸種類??130*87??┊?應(yīng)用 通欄圖片列表
120*80? ┊?應(yīng)用 圖片列表
比例 2:1 ?┊?尺寸種類??120*60 ?┊?應(yīng)用 廣告性圖片????????????② 豎圖?　??比例 3:4 ?┊?尺寸種類??75*100 ?┊?應(yīng)用 圖片列表
55*73 ??┊?應(yīng)用 圖文混排????????????③ 方圖???? 比例 1:1 ?┊?尺寸種類??55*55???┊ 應(yīng)用 圖文混排
38*38? ?┊?應(yīng)用 圖文混排????????????④ 專題圖 ??普通專題 ?┊?尺寸種類??750*100 ┊?應(yīng)用 普通專題
特殊專題 ?┊?尺寸種類??750*200?┊?應(yīng)用 特殊專題

表單規(guī)范

圖片類型：?① 按紐? ② 輸入框? ③ 文本框??④ 菜單??⑤ 復(fù)選框 ??⑥ 單選框?類型說(shuō)明：?表單形式建議采用WIN2000默認(rèn)外觀。

①?按紐????字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上4px ?下5px ?左20px? 右20px?????????????② 輸入框??字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上3px 下5px 左3px 右3px ?　???????????????③ 文本框??字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333?■?┊?行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上5px 下5px 左5px 右5px ?　?????????????④ 復(fù)選框??WIN2000默認(rèn)外觀。?????????????④ 單選框??WIN2000默認(rèn)外觀。?????????????④ 菜單????字號(hào) 12 px ┊ 字體 宋體&Arial ┊?細(xì)體 ┊ 顏色 #333333■?┊?行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上3px 下5px 左3px 右3px

色彩規(guī)范

基本結(jié)構(gòu)：

白色 ???正面：雪花，純靜，清白，和平，輕盈, 純潔、天真、潔凈、真理、
反面：寒冷，受傷，弱點(diǎn)，放棄, 冷淡、貧乏，死寂
白色在中華文化中也代表著死亡的顏色。

黑色????正面：夜晚，煤碳，能力，穩(wěn)定，拘謹(jǐn)，可靠，能力，精致
反面：害怕，無(wú)效，死亡，秘密，陰險(xiǎn)，邪惡，病態(tài)

灰色??正面：智能，成熟，財(cái)富，尊嚴(yán)，貢獻(xiàn), 抑制
否定：混亂，衰變，具體，陰影，沮喪, 厭煩

紅色??正面：勝利 激情 愛 力 精力 性別?熱情、浪漫
否定：血 戰(zhàn)爭(zhēng) 火 危險(xiǎn) 怒 撒旦火焰、暴力、侵略
紅色在很多文化中代表的是停止的訊號(hào)，用于警告或禁止一些動(dòng)作

黃色????正面：明亮、光輝、黃金 收獲?改革
否定：懦弱?叛逆 嫉妒 冒險(xiǎn) 疾病 愚蠢

紫色????正面：懦弱，叛逆，妒忌，危機(jī)，
否定：疾病, 愚蠢 創(chuàng)造、謎、忠誠(chéng)、神秘、稀有
創(chuàng)造、謎、忠誠(chéng)、神秘、稀有

綠色????正面：植物，自然，春天，肥沃，希望, 安全??自然、穩(wěn)定、成長(zhǎng)、
反面：衰變，無(wú)經(jīng)驗(yàn)，羨慕，貪欲，逃避現(xiàn)實(shí), 壞的運(yùn)氣
在北美文化中，綠色代表的是「行」，與環(huán)保意識(shí)有關(guān)，也經(jīng)常被連結(jié)到有關(guān)財(cái)政方面的事物。

藍(lán)色????正面：天空，海洋，精神性，定度，和平, 個(gè)體 忠誠(chéng)、安全、保守、寧?kù)o、冷漠、悲傷
否定： 寒冷，沮喪，憂郁，淫穢，神秘, 保守主義
白色在中華文化中也代表著死亡的顏色

彩色愛好
的西方成人的彩色 ” 通用 ” 命令:

(1) 藍(lán)色的,(2)紅色，格林,(4)紫色的，黃色的,(6)橘色

色彩盡量采用標(biāo)準(zhǔn)色216網(wǎng)絡(luò)安全色

選擇色盤時(shí)請(qǐng)考慮功能性的顏色

色彩調(diào)和 共性調(diào)和 面積調(diào)和

色彩構(gòu)成（Interaction of color），可以理解為色彩的作用，是在色彩科學(xué)體系的基礎(chǔ)上，研究符合人們知覺和心理原則的配色。配色有三類要素：光學(xué)要素（明度、色相、純度），存在條件（面積、形狀、肌理、位置），心理因素（冷暖、進(jìn)退、輕重、軟硬、樸素華麗），設(shè)計(jì)的時(shí)候運(yùn)用邏輯思維選擇合適的色彩搭配，產(chǎn)生恰當(dāng)?shù)纳蕵?gòu)成。最優(yōu)秀的配色范本是自然界里的配色，我們觀察自然界里的配色，通過(guò)理性的提煉最終獲得我們所需要的東西。

小面積用強(qiáng)色，大面積用弱色

面積調(diào)和的原則是：色彩面積的大小可以改變對(duì)比效果，對(duì)比色雙方面積越大，調(diào)和效果越弱；反之，雙方面積越小，調(diào)和效果越強(qiáng)。對(duì)比雙方面積均等，調(diào)和效果越弱；對(duì)比雙方面積相差越大；調(diào)和效果越強(qiáng)。只有恰當(dāng)?shù)拿娣e比才能取得最好的視覺平衡，形成最好的視覺效果。

純度對(duì)比調(diào)和。 色相對(duì)比調(diào)和 多個(gè)色相對(duì)比調(diào)和 兩個(gè)補(bǔ)色對(duì)比調(diào)和 兩個(gè)類似色對(duì)比調(diào)和 兩個(gè)同一色對(duì)比調(diào)和 灰色與高純度黃色調(diào)和 小面積用強(qiáng)色，大面積用弱色”。

功能模塊

基本結(jié)構(gòu)：無(wú)。

來(lái)源：http://www.iamchengyin.com/?p=157