新浪網(wǎng)頁設(shè)計(jì)規(guī)范

《新浪網(wǎng)頁設(shè)計(jì)規(guī)范》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、新浪網(wǎng)產(chǎn)品設(shè)計(jì)指南（含UI規(guī)范）摘要:以下分各模塊介紹。設(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è)...以下分各模塊介紹。設(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ì)量，提高

2、設(shè)計(jì)效率的目的。誰去讀設(shè)計(jì)規(guī)范？設(shè)計(jì)規(guī)范手冊(cè)適合界面設(shè)計(jì)師，用戶體驗(yàn)設(shè)計(jì)師，前臺(tái)技術(shù)工程師，發(fā)布支持人員，運(yùn)營編輯人員的參照。設(shè)計(jì)理念精于心簡(jiǎn)于形通過精心簡(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)系通過視覺表現(xiàn)引導(dǎo)用戶使用例如：googleyahoo搜索結(jié)果頁通過字體的顏色大小突出重要度擴(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)

3、容要有統(tǒng)一風(fēng)格的繼承例如：無論每個(gè)頻道如何追求個(gè)性不能脫離新浪整體風(fēng)格，要有繼承與延續(xù)保持從屬關(guān)系個(gè)案除外，個(gè)案量應(yīng)有百分比，本地化考慮用戶的文化背景及習(xí)慣，做到設(shè)計(jì)上本地化。體現(xiàn)人文關(guān)懷例如：google，被搜索文字連接采用紅色，及中國傳統(tǒng)節(jié)日的logo體現(xiàn)。設(shè)計(jì)上不照搬英文站應(yīng)根據(jù)中文特色，體現(xiàn)中文之美遵循視覺設(shè)計(jì)原理頁面外觀頁面類型：①普通頁面????②寬帶頁面????③自適應(yīng)頁面????④其他頁面類型說明：①?普通頁面基本屬性：寬度?750px┊?背景白色#FFFFFF?┊?位置居中?┊?邊距上5px；下20px；左0

4、px；右0px適用范圍：新浪首頁頻道首頁頻道二級(jí)頻道各級(jí)正文頁面等及其他非寬帶產(chǎn)品線②寬帶頁面基本屬性：寬度?900px┊?背景白色#FFFFFF?┊?位置居中?┊?邊距上5px；下20px；左0px；右0px適用范圍：寬帶頻道首頁與各級(jí)頁面不包括正文頁，及其他寬帶產(chǎn)品線③自適應(yīng)基本屬性：寬度?100%┊?背景白色#FFFFFF?┊?位置居中?┊?邊距上5px；下20px；左0px；右0px適用范圍：論壇聊天直播等頁面④其他頁面基本屬性：寬度?500px┊?背景白色#FFFFFF?┊?位置居中?┊?邊距上5px；下20px；左

5、0px；右0px適用范圍：提示報(bào)錯(cuò)頁面指導(dǎo)原則：屬性中寬度、位置、邊距為不可變數(shù)據(jù)。屬性中背景白色為常用色值，對(duì)于特殊個(gè)性化頻道可根據(jù)特殊要求變更色彩或者使用背景圖。背景色彩遵循原則選擇顏色盡量少用飽與度高的顏色，?減少用戶視覺疲勞。背景圖片遵循原則盡量選擇可復(fù)用的圖片，減少頁面文件量。如果遇到頁面整體外描邊效果參照?qǐng)D例(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)頭?頻道二級(jí)標(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)

6、尾普通標(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)用：①新浪首頁?②新聞?lì)l道?③普通頻道?④頻道二級(jí)?⑤專題頁面?⑥三級(jí)頁面?⑦正文頁面?⑧產(chǎn)品頁面標(biāo)準(zhǔn)頭部類型分類：①新浪首頁標(biāo)準(zhǔn)頭??②新聞中心標(biāo)準(zhǔn)頭??③頻道首頁標(biāo)準(zhǔn)頭??④頻道二級(jí)標(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)航適用范圍：新浪首頁②新聞

7、中心標(biāo)準(zhǔn)頭基本屬性：產(chǎn)品功能區(qū)┊整體網(wǎng)站導(dǎo)航┊廣告區(qū)域適用范圍：新聞中心③頻道首頁標(biāo)準(zhǔn)頭基本屬性：產(chǎn)品功能區(qū)┊?整體網(wǎng)站導(dǎo)航┊?廣告區(qū)適用范圍：各頻道首頁④頻道二級(jí)標(biāo)準(zhǔn)頭基本屬性：頻道LOGO┊產(chǎn)品功能區(qū)適用范圍：各頻道首頁⑤正文頁面標(biāo)準(zhǔn)頭基本屬性：正文導(dǎo)航┊?搜索功能適用范圍：頻道二極三級(jí)與專題頁面標(biāo)準(zhǔn)尾類型分類：①首頁標(biāo)準(zhǔn)頭尾??②通用標(biāo)準(zhǔn)尾?類型說明：①首頁標(biāo)準(zhǔn)尾基本屬性：相關(guān)導(dǎo)航┊?版權(quán)信息┊?相關(guān)許可證號(hào)適用范圍：新浪首頁②通用標(biāo)準(zhǔn)尾基本屬性：本頻道信息┊?相關(guān)導(dǎo)航┊?版權(quán)信息適用范圍：頻道首頁頻道二極三級(jí)與專題頁面

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