新浪網(wǎng)產(chǎn)品設計指南（含UI規范）
Posted on 2011 年 10 月 17 日, 18:59, by issachy, under
產(chǎn)品設計.
先看新浪產(chǎn)品設計指南的大致介紹：
以下分各模塊介紹。
設計規范介紹
什么是設計規范？
《產(chǎn)品設計部·人機交互界面設計規范 》適用用于WEB產(chǎn)品線(xiàn)的人機交互界面設計方面的指導手冊。
貫穿以用戶(hù)為中心的設計指導方向，根據新浪產(chǎn)品自身的特點(diǎn)制定出的一套規范，以達到提升用戶(hù)體驗，控制產(chǎn)品設計質(zhì)量，提高設計效率的目的。
誰(shuí)去讀設計規范？
設計規范手冊適合界面設計師，用戶(hù)體驗設計師，前臺技術(shù)工程師，發(fā)布支持人員，運營(yíng)編輯人員的參照。
設計理念
精于心 簡(jiǎn)于形
通過(guò)精心簡(jiǎn)約的設計,傳達先進(jìn)的技術(shù)給用戶(hù)提供便捷簡(jiǎn)單的使用體驗
設計指導原則
A 設計規范 邏輯性
設計為內容服務(wù)，根據邏輯關(guān)系通過(guò)視覺(jué)表現引導用戶(hù)使用
例如：google yahoo搜索結果頁(yè)通過(guò)字體的顏色大小突出重要度
擴展性
采取模塊化設計的可擴展性，減少修改和再開(kāi)發(fā)的成本。
例如：奧運項目左右模塊尺寸的統一可以方便編輯隨時(shí)調用修改內容的位置
統一性
用統一的視覺(jué)規范，變化不能超越統一的尺度，個(gè)性化內容要有統一風(fēng)格的繼承
例如：無(wú)論每個(gè)頻道如何追求個(gè)性不能脫離新浪整體風(fēng)格，要有繼承和延續保持從屬關(guān)系 個(gè)案除外，個(gè)案量應有百分比，
本地化
考慮用戶(hù)的文化背景及習慣，做到設計上本地化。體現人文關(guān)懷 例如：google，被搜索文字連接采用紅色，及中國傳統節日的logo體現。設計上不照搬英文站應根據中文特色，體現中文之美
遵循視覺(jué)設計原理
頁(yè)面外觀(guān)
頁(yè)面類(lèi)型： ① 普通頁(yè)面 ② 寬帶頁(yè)面 ③ 自適應頁(yè)面 ④ 其他頁(yè)面
類(lèi)型說(shuō)明：
① 普通頁(yè)面
基本屬性：寬度 750px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：新浪首頁(yè) 頻道首頁(yè) 頻道二級 頻道各級 正文頁(yè)面等及其他非寬帶產(chǎn)品線(xiàn)
② 寬帶頁(yè)面
基本屬性：寬度 900px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：寬帶頻道首頁(yè)和各級頁(yè)面 不包括正文頁(yè)，及其他寬帶產(chǎn)品線(xiàn)
③ 自適應
基本屬性：寬度 100 % ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：論壇 聊天 直播 等頁(yè)面
④ 其他頁(yè)面
基本屬性：寬度 500px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 邊距 上 5px；下 20px；左 0 px；右 0 px
適用范圍：提示報錯頁(yè)面
指導原則：
屬性中寬度、位置、邊距為不可變數據。
屬性中背景白色為常用色值，對于特殊個(gè)性化頻道可根據特殊要求變更色彩或者使用背景圖。
背景色彩遵循原則選擇顏色盡量少用飽和度高的顏色， 減少用戶(hù)視覺(jué)疲勞。
背景圖片遵循原則盡量選擇可復用的圖片，減少頁(yè)面文件量。如果遇到頁(yè)面整體外描邊效果參照圖例(01)。
頁(yè)面結構
基本結構： ① 標準頭 ② 內容區 ③ 標準尾
標準頭分為：新浪首頁(yè)標準頭 \ 新聞中心標準頭 \ 頻道首頁(yè)標準頭 \ 頻道二級標準頭 \ 正文頁(yè)面標準頭 \ 產(chǎn)品頁(yè)面標準頭
具體樣式參見(jiàn)
標準頭規范標準尾分為：新浪首頁(yè)標準尾 \ 普通標準尾
具體樣式參見(jiàn)
標準尾規范導航分為： 頻道導航 \ 二級導航 \ 專(zhuān)題導航&專(zhuān)題圖 \ 三級導航 \ 導航指向
具體樣式參見(jiàn)
導航規范內容版面：具體樣式參見(jiàn)
版式結構類(lèi)型通欄廣告：具體樣式參見(jiàn)廣告規范
結構應用： ① 新浪首頁(yè) ② 新聞頻道 ③ 普通頻道 ④ 頻道二級 ⑤ 專(zhuān)題頁(yè)面 ⑥ 三級頁(yè)面 ⑦ 正文頁(yè)面 ⑧ 產(chǎn)品頁(yè)面
標準頭部
類(lèi)型分類(lèi)：① 新浪首頁(yè)標準頭 ② 新聞中心標準頭 ③ 頻道首頁(yè)標準頭 ④ 頻道二級標準頭 ⑤ 正文頁(yè)面標準頭 ⑥ 產(chǎn)品頁(yè)面標準頭
類(lèi)型說(shuō)明：① 新浪首頁(yè)標準頭
組成部分：新浪網(wǎng)LOGO ┊ 產(chǎn)品功能區 ┊ 整體網(wǎng)站導航
適用范圍：新浪首頁(yè)
② 新聞中心標準頭
基本屬性：產(chǎn)品功能區 ┊ 整體網(wǎng)站導航 ┊ 廣告區域
適用范圍：新聞中心
③ 頻道首頁(yè)標準頭
基本屬性：產(chǎn)品功能區 ┊ 整體網(wǎng)站導航 ┊ 廣告區
適用范圍：各頻道首頁(yè)
④ 頻道二級標準頭
基本屬性：頻道LOGO ┊ 產(chǎn)品功能區
適用范圍：各頻道首頁(yè)
⑤ 正文頁(yè)面標準頭
基本屬性：正文導航 ┊ 搜索功能
適用范圍：頻道二極三級和專(zhuān)題頁(yè)面
標準尾
類(lèi)型分類(lèi)： ① 首頁(yè)標準頭尾 ② 通用標準尾 類(lèi)型說(shuō)明： ① 首頁(yè)標準尾
基本屬性：相關(guān)導航 ┊ 版權信息 ┊ 相關(guān)許可證號
適用范圍：新浪首頁(yè)
② 通用標準尾
基本屬性：本頻道信息┊ 相關(guān)導航 ┊ 版權信息
適用范圍：頻道首頁(yè) 頻道二極三級和專(zhuān)題頁(yè)面 正文頁(yè)面
頁(yè)面導航
類(lèi)型分類(lèi)： ① 頻道導航 ② 二級導航 ③ 專(zhuān)題導航&專(zhuān)題圖 ④ 三級導航 ⑤ 導航指向
類(lèi)型說(shuō)明： ① 頻道導航
組成部分：頻道LOGO ┊ 功能性導航 ┊ 主導航位置區 ┊ 次要導航位置區
適用范圍：新聞中心、頻道首頁(yè)及產(chǎn)品頁(yè)面均可使用
② 二級導航
組成部分：二級導航
適用范圍：所有頻道二級均可使用
③ 專(zhuān)題導航
組成部分：專(zhuān)題圖 ┊ 導航
適用范圍：專(zhuān)題頁(yè)面 ，可根據需要添加刪除專(zhuān)題導航
④ 三級導航
組成部分：指向導航
適用范圍：三級頁(yè)面
⑤ 正文導航
基本屬性：頻道LOGO ┊ 指向導航
適用范圍：正文頁(yè)面
版式結構：
版塊基本元素：
版塊組合形式： 版塊元素之間距為8px 同名版塊元素間的距離為6px （例如EEC中 EE距離為6 EC距離為8px H2等分版式為6px）
ABC版塊 AF版塊 DC版塊 EEC版塊
CFC版塊 FA版塊 CD版式 CEE版式
H1通欄版式 H2等分版式 H3等分版式 H4等分版式
H(N)分版式
模塊類(lèi)型
標題種類(lèi)：① 焦點(diǎn)圖 ② 頭條區 ③ A類(lèi)模塊 ④ B類(lèi)模塊 ⑤ c類(lèi)模塊
種類(lèi)說(shuō)明：以下圖例除特殊注明外，所指距離均包括模塊邊框線(xiàn)
① 焦點(diǎn)圖
② 頭條區
③ 模塊標題
④ 模塊內容
⑤ 圖片列表和圖文混排
⑥ 段落關(guān)系
⑦ 段落格式
文字規范
樣式類(lèi)庫： ① 文字格式 ② 連接樣式 ③ 項目符號
注：所有文字設計均依據下列樣式組合
① 文字格式
12號字格式： 字號 12 px ┊字體 宋體&Arial ┊ 行距 21 px ┊ 粗體&細體 ┊
14號字格式： 字號 14 px ┊字體 宋體&Arial ┊ 行距 24 px ┊ 粗體&細體 ┊
10號字格式： 字號 10 px ┊字體 Arial ┊ 行距 無(wú) ┊ 細體 ┊
20號字格式： 字號 20 px ┊字體 黑體&Arial ┊ 行距 無(wú) ┊ 細體 ┊
說(shuō)明：10號字格式，12號字格式，14號字格式中的數字英文字母為Arial，中文為宋體
② 連接樣式
動(dòng)態(tài)鏈接樣式： 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #660066 ■ ┊狀態(tài) 下劃線(xiàn) __
靜態(tài)連接樣式： 鼠標初始： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
重要鏈接樣式： 鼠標初始： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
③ 項目符號：
點(diǎn)狀項目符號： 點(diǎn) ·
數字項目符號： 數字 01 02 03 04 05 06 07 08 09 10
形狀項目符號： 自定義
應用組合：① 導航類(lèi) ② 標題類(lèi) ③ 信息類(lèi) ④ 段落類(lèi) ⑤ 功能類(lèi) ⑥注釋類(lèi) ⑥ 表單類(lèi)
① 導航類(lèi)
a 統一導航： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■┊ 行距 21 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #333333 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #333333 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #333333 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #333333 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用豎杠符號 | 間隔
b 本頁(yè)導航： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 21 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用豎杠符號 | 間隔
c 標題導航： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 21 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用橫杠符號 - 間隔
d 導航指向： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 21 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 關(guān)鍵詞句之間用大于號符號 > 間隔
② 標題類(lèi)
a 版塊標題： 20號文字格式 = 字號 20 px ┊ 字體 黑體 ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 無(wú)
靜態(tài)連接樣式 = 鼠標初始： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #自定義 □ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #自定義 □ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 標題文字位置前可選擇性修飾符號和圖片,默認為無(wú)
a 一類(lèi)標題： 14號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 粗體 ┊ 顏色 #自定義 □ ┊ 行距 無(wú)
靜態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 標題文字位置前可選擇性修飾符號和圖片,默認為三角形符號
a 二類(lèi)標題： 14號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 24 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)
a 三類(lèi)標題： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 粗體 ┊ 顏色 #自定義 □ ┊ 行距 21 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)
a 四類(lèi)標題： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 21 px
靜態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)
c 頭條標題： 20號文字格式 = 字號 20 px ┊ 字體 黑體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 無(wú)
靜態(tài)連接樣式 = 鼠標初始： 顏色 #CC0000 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #CC0000 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 無(wú)
c 正文標題： 20號文字格式 = 字號 20 px ┊ 字體 黑體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú)
文字其它說(shuō)明 = 無(wú)
e 段落標題： 14號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 24 px
文字其它說(shuō)明 = 無(wú)
③ 信息類(lèi)
a 14項目列表： 14號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 24 px
動(dòng)態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #660066 ■ ┊狀態(tài) 無(wú)
文字項目符號 = 點(diǎn)狀· & 數字01 & 無(wú)符號
文字其它說(shuō)明 = 正常默認為點(diǎn)狀符號，排行性質(zhì)為數字符號，詞語(yǔ)或者小空間區域可采用無(wú)符號
b 12項目列表： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #自定義 □ ┊ 行距 21 px
動(dòng)態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #660066 ■ ┊狀態(tài) 無(wú)
文字項目符號 = 點(diǎn)狀· & 數字01 & 無(wú)符號
文字其它說(shuō)明 = 正常默認為點(diǎn)狀符號，排行性質(zhì)為數字符號，詞語(yǔ)或者小空間區域可采用無(wú)符號
b 圖片列表： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體&粗體 ┊ 顏色 #自定義 □ ┊ 行距 無(wú)
動(dòng)態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #660066 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 正常圖片列表默認為細體，焦點(diǎn)圖處采用粗體
④ 功能類(lèi)
a 普通功能文字： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #000099 ■ ┊ 行距 無(wú)
靜態(tài)連接樣式 = 鼠標初始： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
鼠標經(jīng)過(guò)： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標點(diǎn)擊： 顏色 #CC0000 ■ ┊狀態(tài) 下劃線(xiàn) __
鼠標結束： 顏色 #000099 ■ ┊狀態(tài) 無(wú)
文字其它說(shuō)明 = 以下為各種功能文字應用形態(tài)
更多：更多>> 更多應用于深背景連接連接色彩采用反白,連接顏色可自定義
全文：[全文]
詳細：[詳細]
評論：[評論]
翻頁(yè)功能：[上一頁(yè)]
⑤ 注釋類(lèi)
a 時(shí)間： 12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú)
b 投票： 12號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú)
c 點(diǎn)擊： 12號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú) ⑥ 表單類(lèi)
a 表單文字：12號文字格式 = 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■┊ 行距 無(wú)
⑦ 正文類(lèi)
正文文字：14號文字格式 = 字號 14 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■┊ 行距 無(wú)
圖片規范
片類(lèi)型： ① 橫圖 ② 豎圖 ③ 方圖 ④ 專(zhuān)題圖 類(lèi)型說(shuō)明： ① 橫圖 比例 4:3 ┊ 尺寸種類(lèi) 280*210 ┊ 應用 焦點(diǎn)圖
130*98 ┊ 應用 通欄圖片列表
120*90 ┊ 應用 圖文混排 圖片列表
100*75 ┊ 應用 圖片列表
77*58 ┊ 應用 圖片列表
56*41 ┊ 應用 圖片列表
比例 3:2 ┊ 尺寸種類(lèi) 130*87 ┊ 應用 通欄圖片列表
120*80 ┊ 應用 圖片列表
比例 2:1 ┊ 尺寸種類(lèi) 120*60 ┊ 應用 廣告性圖片 ② 豎圖 比例 3:4 ┊ 尺寸種類(lèi) 75*100 ┊ 應用 圖片列表
55*73 ┊ 應用 圖文混排 ③ 方圖 比例 1:1 ┊ 尺寸種類(lèi) 55*55 ┊ 應用 圖文混排
38*38 ┊ 應用 圖文混排 ④ 專(zhuān)題圖 普通專(zhuān)題 ┊ 尺寸種類(lèi) 750*100 ┊ 應用 普通專(zhuān)題
特殊專(zhuān)題 ┊ 尺寸種類(lèi) 750*200 ┊ 應用 特殊專(zhuān)題
表單規范
圖片類(lèi)型： ① 按紐 ② 輸入框 ③ 文本框 ④ 菜單 ⑤ 復選框 ⑥ 單選框 類(lèi)型說(shuō)明： 表單形式建議采用WIN2000默認外觀(guān)。
① 按紐 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上4px 下5px 左20px 右20px ② 輸入框 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上3px 下5px 左3px 右3px ③ 文本框 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333 ■ ┊ 行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上5px 下5px 左5px 右5px ④ 復選框 WIN2000默認外觀(guān)。 ④ 單選框 WIN2000默認外觀(guān)。 ④ 菜單 字號 12 px ┊ 字體 宋體&Arial ┊ 細體 ┊ 顏色 #333333■ ┊ 行距 無(wú)
按紐高度 20px┊文字居中┊ 文字邊距 上3px 下5px 左3px 右3px
色彩規范
基本結構：
白色 正面：雪花，純靜，清白，和平，輕盈, 純潔、天真、潔凈、真理、
反面：寒冷，受傷，弱點(diǎn)，放棄, 冷淡、貧乏，死寂
白色在中華文化中也代表著(zhù)死亡的顏色。
黑色 正面：夜晚，煤碳，能力，穩定，拘謹，可靠，能力，精致
反面：害怕，無(wú)效，死亡，秘密，陰險，邪惡，病態(tài)
灰色 正面：智能，成熟，財富，尊嚴，貢獻, 抑制
否定：混亂，衰變，具體，陰影，沮喪, 厭煩
紅色 正面：勝利 激情 愛(ài) 力 精力 性別 熱情、浪漫
否定：血 戰爭 火 危險 怒 撒旦火焰、暴力、侵略
紅色在很多文化中代表的是停止的訊號，用于警告或禁止一些動(dòng)作
黃色 正面：明亮、光輝、黃金 收獲 改革
否定：懦弱 叛逆 嫉妒 冒險 疾病 愚蠢
紫色 正面：懦弱，叛逆，妒忌，危機，
否定：疾病, 愚蠢 創(chuàng )造、謎、忠誠、神秘、稀有
創(chuàng )造、謎、忠誠、神秘、稀有
綠色 正面：植物，自然，春天，肥沃，希望, 安全 自然、穩定、成長(cháng)、
反面：衰變，無(wú)經(jīng)驗，羨慕，貪欲，逃避現實(shí), 壞的運氣
在北美文化中，綠色代表的是「行」，與環(huán)保意識有關(guān)，也經(jīng)常被連結到有關(guān)財政方面的事物。
藍色 正面：天空，海洋，精神性，定度，和平, 個(gè)體 忠誠、安全、保守、寧靜、冷漠、悲傷
否定： 寒冷，沮喪，憂(yōu)郁，淫穢，神秘, 保守主義
白色在中華文化中也代表著(zhù)死亡的顏色
Culture
Red
Blue
Green
Yellow
White
USA, EuropeDangerManliness, sweet, calm, AuthoritySafety, safe, sourCaution, CowardicePurity
FranceNobilityFreedom, PeaceCriminalitypreliminaryNeutrality
Egypt, Arab NationsDeathVirtue, Faith, TruthFertility, StrengthHappiness, Welfare or WealthJoy
IndiaLife, CreativityWelfare or Wealth, FertilitySuccessDeath, Purity
JapanAnger, DangerShame, DespicablenessFuture, Youth, EnergyGrace, Dignity, Nobility, childish, joyfulDeath
ChinaHappiness, Joy, FestivitySky, CloudsMing dynasty, royal, HonorBirth, Wealth, Strength or Power?
彩色愛(ài)好
的西方成人的彩色 ” 通用 ” 命令:
(1) 藍色的,(2)紅色，格林,(4)紫色的，黃色的,(6)橘色
色彩盡量采用標準色216網(wǎng)絡(luò )安全色
選擇色盤(pán)時(shí)請考慮功能性的顏色
色彩調和 共性調和 面積調和
色彩構成（Interaction of color），可以理解為色彩的作用，是在色彩科學(xué)體系的基礎上，研究符合人們知覺(jué)和心理原則的配色。配色有三類(lèi)要素：光學(xué)要素（明度、色相、純度），存在條件（面積、形狀、肌理、位置），心理因素（冷暖、進(jìn)退、輕重、軟硬、樸素華麗），設計的時(shí)候運用邏輯思維選擇合適的色彩搭配，產(chǎn)生恰當的色彩構成。最優(yōu)秀的配色范本是自然界里的配色，我們觀(guān)察自然界里的配色，通過(guò)理性的提煉最終獲得我們所需要的東西。
小面積用強色，大面積用弱色
面積調和的原則是：色彩面積的大小可以改變對比效果，對比色雙方面積越大，調和效果越弱；反之，雙方面積越小，調和效果越強。對比雙方面積均等，調和效果越弱；對比雙方面積相差越大；調和效果越強。只有恰當的面積比才能取得最好的視覺(jué)平衡，形成最好的視覺(jué)效果。
純度對比調和。 色相對比調和 多個(gè)色相對比調和 兩個(gè)補色對比調和 兩個(gè)類(lèi)似色對比調和 兩個(gè)同一色對比調和 灰色與高純度黃色調和 小面積用強色，大面積用弱色”。
功能模塊
基本結構：無(wú)。
