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