淘寶網(wǎng)設(shè)計(jì)規(guī)范&設(shè)計(jì)禁忌淘寶北京UED岱巖2012.03.01of142視覺設(shè)計(jì)規(guī)范of242淘寶北京UED岱巖1.淘寶字體：視覺設(shè)計(jì)規(guī)范中文：英文：淘寶北京UED岱巖of3422.淘寶網(wǎng)Logo使用規(guī)范：視覺設(shè)計(jì)規(guī)范淘寶網(wǎng)主品牌Logo：淘寶北京UED岱巖of4422.淘寶網(wǎng)Logo使用規(guī)范：視覺設(shè)計(jì)規(guī)范淘寶網(wǎng)頻道Logo：淘寶字體+橙色+域名主體+頻道/類目/產(chǎn)品名機(jī)票淘寶北京UED岱巖of5422.淘寶網(wǎng)Logo使用規(guī)范：視覺設(shè)計(jì)規(guī)范其他特殊業(yè)務(wù)：圖形化/字體+個(gè)性化顏色+域名淘寶北京UED岱巖of6423.柵格規(guī)范：視覺設(shè)計(jì)規(guī)范什么是柵格系統(tǒng)：淘寶北京UED岱巖of7423.柵格規(guī)范：視覺設(shè)計(jì)規(guī)范柵格系統(tǒng)的應(yīng)用：12x80的應(yīng)用24x40的應(yīng)用16x60的應(yīng)用淘寶北京UED岱巖of8423.柵格規(guī)范：視覺設(shè)計(jì)規(guī)范淘寶網(wǎng)柵格系統(tǒng)：（40*n）-10=W（50*n）-10=W淘寶北京UED岱巖of9423.柵格規(guī)范：視覺設(shè)計(jì)規(guī)范建議使用的柵格結(jié)構(gòu)：950寬度990寬度190750230710270670270470190950190790240740190990240540淘寶北京UED岱巖of10424.

30%原則：視覺設(shè)計(jì)規(guī)范5%吊頂+10%頭部+10%導(dǎo)航+5%底部導(dǎo)航+搜索淘寶北京UED岱巖of11424.

30%原則：視覺設(shè)計(jì)規(guī)范5%吊頂淘寶北京UED岱巖of12424.

30%原則：視覺設(shè)計(jì)規(guī)范20%頭部+導(dǎo)航淘寶北京UED岱巖of13424.

30%原則：視覺設(shè)計(jì)規(guī)范5%底部淘寶北京UED岱巖of14425.

Banner設(shè)計(jì)規(guī)范：視覺設(shè)計(jì)規(guī)范文案標(biāo)準(zhǔn)字體使用體驗(yàn)一致色彩協(xié)調(diào)圖片限制淘寶北京UED岱巖of15425.

Banner設(shè)計(jì)規(guī)范：視覺設(shè)計(jì)規(guī)范文案標(biāo)準(zhǔn)簡(jiǎn)潔，閱讀順暢；少用英文，確保拼寫正確；中文不可出現(xiàn)錯(cuò)別字；淘寶北京UED岱巖of16425.

Banner設(shè)計(jì)規(guī)范：視覺設(shè)計(jì)規(guī)范字體使用最多不超過3種字體；只能使用授權(quán)字體-方正字體；文字清晰可讀；淘寶北京UED岱巖of17425.

Banner設(shè)計(jì)規(guī)范：視覺設(shè)計(jì)規(guī)范體驗(yàn)一致設(shè)計(jì)形式與點(diǎn)擊預(yù)期保持一致；淘寶北京UED岱巖of18425.

Banner設(shè)計(jì)規(guī)范：視覺設(shè)計(jì)規(guī)范色彩協(xié)調(diào)明亮，干凈，與整體頁(yè)面協(xié)調(diào)；淘寶北京UED岱巖of19425.

Banner設(shè)計(jì)規(guī)范：視覺設(shè)計(jì)規(guī)范圖片限制選擇切合主題的圖片；不可使用有版權(quán)糾紛的圖片和違禁圖片（色情，反動(dòng)等...）淘寶北京UED岱巖of20426.常用控件介紹：視覺設(shè)計(jì)規(guī)范色彩圖片文字留白BarTab彈出層輸入反饋表單分頁(yè)面包屑斑馬線步驟條加載中級(jí)聯(lián)列表淘寶北京UED岱巖of21426.常用控件介紹：視覺設(shè)計(jì)規(guī)范色彩交易線主色交易線輔色商戶平臺(tái)主色商戶平臺(tái)輔色淘寶北京UED岱巖of22426.常用控件介紹：視覺設(shè)計(jì)規(guī)范圖片商品圖片使用基本原則：圖片比例為1:1；廣告位：參考柵格規(guī)則；淘寶北京UED岱巖of23426.常用控件介紹：視覺設(shè)計(jì)規(guī)范文字文本文字：鏈接文字：深灰為基本文字顏色，當(dāng)文字內(nèi)容有主次等級(jí)時(shí)，應(yīng)用輔助顏色;文字大?。禾詫毐本︰ED岱巖of24426.常用控件介紹：視覺設(shè)計(jì)規(guī)范留白1.板塊間距留白為10px；2.板塊與內(nèi)容間距留白為10px；3.內(nèi)容單元與單元之間留白為10px；4.內(nèi)容的間距為10px；注：以上原則從1到4優(yōu)先等級(jí)從高到低，原則1、2必須遵守，原則3、4可根據(jù)實(shí)際情況調(diào)整；淘寶北京UED岱巖of25426.常用控件介紹：視覺設(shè)計(jì)規(guī)范Bar樣式舉例：淘寶北京UED岱巖of26426.常用控件介紹：視覺設(shè)計(jì)規(guī)范Tab樣式舉例：淘寶北京UED岱巖of27426.常用控件介紹：視覺設(shè)計(jì)規(guī)范彈出層樣式舉例：淘寶北京UED岱巖of28426.常用控件介紹：視覺設(shè)計(jì)規(guī)范輸入反饋淘寶北京UED岱巖of29426.常用控件介紹：視覺設(shè)計(jì)規(guī)范表單控件淘寶北京UED岱巖of30426.常用控件介紹：視覺設(shè)計(jì)規(guī)范分頁(yè)控件通用樣式：適用場(chǎng)景：淘寶產(chǎn)品的列表和搜索結(jié)果頁(yè)面。小分頁(yè)：適用場(chǎng)景：空間小、結(jié)構(gòu)較緊密的列表頁(yè)面。淘寶北京UED岱巖of31426.常用控件介紹：視覺設(shè)計(jì)規(guī)范面包屑樣式舉例：淘寶北京UED岱巖of32426.常用控件介紹：視覺設(shè)計(jì)規(guī)范斑馬線樣式舉例：淘寶北京UED岱巖of33426.常用控件介紹：視覺設(shè)計(jì)規(guī)范步驟條淘寶北京UED岱巖of34426.常用控件介紹：視覺設(shè)計(jì)規(guī)范加載中適用場(chǎng)景：加載頁(yè)面、上傳圖片、文件時(shí)出現(xiàn)，從無內(nèi)容到有內(nèi)容的場(chǎng)景。樣式舉例：淘寶北京UED岱巖of35426.常用控件介紹：視覺設(shè)計(jì)規(guī)范級(jí)聯(lián)列表淘寶北京UED岱巖of3642設(shè)計(jì)禁忌淘寶北京UED岱巖交互設(shè)計(jì)3大禁忌；推廣設(shè)計(jì)基本禁忌6條；of37421.頁(yè)面信息拼寫或內(nèi)容錯(cuò)誤：設(shè)計(jì)禁忌—交互設(shè)計(jì)3大禁忌案例A：頁(yè)面信息拼寫錯(cuò)誤：案例B：頁(yè)面內(nèi)容錯(cuò)誤：淘寶北京UED岱巖of38422.操作產(chǎn)生無效或錯(cuò)誤反饋：設(shè)計(jì)禁忌—交互設(shè)計(jì)3大禁忌案例A：由設(shè)計(jì)缺陷造成的鏈接無效或懸停無反應(yīng):由于整個(gè)交互操作范圍超出了一屏，因此會(huì)讓用戶感覺鏈接無效等錯(cuò)誤發(fā)生：淘寶北京UED岱巖of39423.操作完成后與預(yù)期不符：設(shè)計(jì)禁忌—交互設(shè)計(jì)3大禁忌案例A：如左右滾動(dòng)按鈕操作后結(jié)果是上下滾動(dòng)：淘寶北京UED岱巖of4042設(shè)計(jì)禁忌—推廣設(shè)計(jì)基本禁忌1.合法。2.顯示正常。3.反饋明顯且有效。4.貼合主題。5.控制體積和大小。6.拼寫正確。淘寶北京UE