新浪網(wǎng)產(chǎn)品設(shè)計指南（含UI規(guī)范）

先看新浪產(chǎn)品設(shè)計指南的大致介紹：

以下分各模塊介紹。

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

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

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

設(shè)計理念

精于心 簡于形

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

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

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

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

擴(kuò)展性

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

統(tǒng)一性

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

本地化

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

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

頁面外觀

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

   

類型說明：

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

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

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

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

指導(dǎo)原則：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面導(dǎo)航

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

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

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

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

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

版式結(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類模塊
種類說明：以下圖例除特殊注明外，所指距離均包括模塊邊框線
① 焦點(diǎn)圖

② 頭條區(qū)

③ 模塊標(biāo)題

④ 模塊內(nèi)容

⑤ 圖片列表和圖文混排

⑥ 段落關(guān)系

⑦ 段落格式

文字規(guī)范

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

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

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

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

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

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

         　 ① 導(dǎo)航類

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

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

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

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

         　 ② 標(biāo)題類

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

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

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

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

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

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

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

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

③ 信息類

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

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

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

④ 功能類

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

全文：[全文]
詳細(xì)：[詳細(xì)]
評論：[評論]
翻頁功能：[上一頁]

⑤ 注釋類

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

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

圖片規(guī)范

片類型： ① 橫圖  ② 豎圖  ③ 方圖  ④ 專題圖 類型說明： ① 橫圖　  比例 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ù)選框   ⑥ 單選框 類型說明： 表單形式建議采用WIN2000默認(rèn)外觀。

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

色彩規(guī)范

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

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

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

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

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

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

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

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

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

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

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

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

選擇色盤時請考慮功能性的顏色

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

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

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

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

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

功能模塊

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