A 交互規(guī)范

A1 使用說(shuō)明

• • 本文檔定義了微博第三方產(chǎn)品的交互框架結(jié)構(gòu)，相關(guān)內(nèi)容的尺寸定義和視覺(jué)樣式請(qǐng)查閱微博視覺(jué)規(guī)范和PSD源文件。本文檔中02、03、04部分為必選項(xiàng)，貴方設(shè)計(jì)產(chǎn)品時(shí)必須遵守。05部分為可選項(xiàng)，列舉了微博現(xiàn)有的布局、組件/控件樣式，供設(shè)計(jì)時(shí)參考。

A2 交互設(shè)計(jì)原則

• • 第三方產(chǎn)品在設(shè)計(jì)方案除了遵循本文檔所列的通用規(guī)范外，有較大的設(shè)計(jì)自由。微博設(shè)計(jì)部提供以下交互設(shè)計(jì)原則做參考：

• • 統(tǒng)一性和標(biāo)準(zhǔn)性
  • 同類(lèi)型頁(yè)面采用相同或相似布局結(jié)構(gòu)，同類(lèi)操作的響應(yīng)方式保持一致；
  • 導(dǎo)航類(lèi)結(jié)構(gòu)保持一致，包括全局導(dǎo)航、搜索、篩選等；
  • 文案表述方式統(tǒng)一且易懂，包括信息提示、稱(chēng)謂、菜單、語(yǔ)法標(biāo)點(diǎn)、功能名稱(chēng)等；

• • 信息清晰、導(dǎo)向明確
  • 主次內(nèi)容布局合理，各類(lèi)型信息組織邏輯清晰；
  • 清楚知道當(dāng)前頁(yè)面狀態(tài)，二級(jí)及以下頁(yè)面要有清晰的導(dǎo)航層次，例如統(tǒng)一導(dǎo)航、面包屑等；

• • 反饋及時(shí)有效
  • 對(duì)用戶操作及時(shí)反饋；
  • 反饋信息準(zhǔn)確、簡(jiǎn)潔、直白，并對(duì)用戶操作具有指導(dǎo)性；

• • 錯(cuò)誤及安全預(yù)防
  • 對(duì)有嚴(yán)重后果的操作提供必要提醒；
  • 提供預(yù)防或糾正錯(cuò)誤的方式；
  • 提供隱私保護(hù)措施；

A3 獨(dú)立第三方產(chǎn)品的框架規(guī)范

A3.1 整體框架布局

• • 第三方產(chǎn)品需嚴(yán)格包含以下五部分：微博頂導(dǎo)、頁(yè)頭、內(nèi)容、底導(dǎo)及微博頁(yè)尾。其中，微博頂導(dǎo)和頁(yè)尾請(qǐng)直接調(diào)用接口，頁(yè)頭、內(nèi)容及底導(dǎo)請(qǐng)貴方依據(jù)交互框架原則，自行設(shè)計(jì)具體結(jié)構(gòu)內(nèi)容。
  • 

A3.2 微博頂導(dǎo)

• • 原則上第三方產(chǎn)品請(qǐng)直接調(diào)用微博簡(jiǎn)版頂導(dǎo)。如果有特殊需要想使用全版頂導(dǎo)，請(qǐng)聯(lián)系微博相關(guān)接口人確認(rèn)。
  • 

A3.3 頁(yè)頭

• • 頁(yè)頭是整個(gè)產(chǎn)品的全局導(dǎo)航區(qū)域，必須包含產(chǎn)品的Logo和標(biāo)題。其他元素，例如Slogan、品牌頭圖展示、搜索框、運(yùn)營(yíng)位等，在不破壞頁(yè)頭整體結(jié)構(gòu)的前提下，請(qǐng)自行布局。
  • 

• • 頁(yè)頭有兩種尺寸可選擇：標(biāo)準(zhǔn)頁(yè)頭和窄版頁(yè)頭。標(biāo)準(zhǔn)頁(yè)頭適用于產(chǎn)品的一級(jí)頁(yè)面，窄版頁(yè)頭適用于二級(jí)頁(yè)面。設(shè)計(jì)窄版頁(yè)頭的目的是為了在二級(jí)頁(yè)面能更多地展示內(nèi)容，所以把頁(yè)頭高度壓低。在具體產(chǎn)品中，請(qǐng)遵循以下原則，產(chǎn)品頁(yè)面不可以只使用窄版頁(yè)頭，產(chǎn)品的一級(jí)頁(yè)面也不可以使用窄版頁(yè)頭。

• • 如果產(chǎn)品的一級(jí)導(dǎo)航放在頁(yè)頭區(qū)域，請(qǐng)靠右對(duì)齊，參考以下結(jié)構(gòu)：
  • 

A3.4 內(nèi)容

• • 內(nèi)容區(qū)的布局有多種分欄結(jié)構(gòu)供使用：三欄版、兩欄版（左窄右寬、右寬左窄）、通欄版。柵格系統(tǒng)尺寸請(qǐng)查閱視覺(jué)規(guī)范定義。產(chǎn)品可以依據(jù)自身結(jié)構(gòu)特性，選擇適當(dāng)?shù)牟季职媸健?/li>

• • 三欄版
  • 左側(cè)為導(dǎo)航，中間為主內(nèi)容區(qū)，右側(cè)為推薦、幫助等次要內(nèi)容。
  • 

• • 兩欄版-左窄右寬
  • 左側(cè)為導(dǎo)航，右側(cè)為內(nèi)容區(qū)。依據(jù)產(chǎn)品內(nèi)容可以選擇以下四種左窄右寬的兩欄布局。
  • 

• • 兩欄版-左寬右窄
  • 左側(cè)為內(nèi)容區(qū)，右側(cè)為導(dǎo)航。依據(jù)產(chǎn)品內(nèi)容可以選擇以下四種左寬右窄的兩欄布局。
  • 

• • 通欄版
  • 通欄結(jié)構(gòu)對(duì)于導(dǎo)航和主次內(nèi)容沒(méi)有明確規(guī)范，請(qǐng)自行設(shè)計(jì)。原則，信息結(jié)構(gòu)清晰、導(dǎo)航指引明確。
  • 
  • 如果上述分欄結(jié)構(gòu)無(wú)法滿足產(chǎn)品實(shí)際需要，可以在此柵格系統(tǒng)基礎(chǔ)上，以30px為模數(shù)單位進(jìn)行變化，如720/260。

A3.5 底導(dǎo)

• • 底導(dǎo)是作為該產(chǎn)品周邊相關(guān)的外部導(dǎo)航入口，例如第三方其他產(chǎn)品的鏈接、移動(dòng)端下載鏈接等。請(qǐng)參考以下結(jié)構(gòu)：
  • 

A3.6 微博頁(yè)尾

• • 第三方產(chǎn)品請(qǐng)直接調(diào)用微博頁(yè)尾。
  • 

A4 嵌入微博個(gè)人主頁(yè)的應(yīng)用框架規(guī)范

A4.1 整體框架布局

• • 下圖虛線框選的部分是內(nèi)嵌應(yīng)用的內(nèi)容區(qū)。與獨(dú)立網(wǎng)頁(yè)的設(shè)計(jì)不同，內(nèi)嵌應(yīng)用的交互組件/控件、視覺(jué)樣式需嚴(yán)格遵守微博的設(shè)計(jì)規(guī)范，重用部分請(qǐng)直接調(diào)用微博的相關(guān)接口。

A4.2 應(yīng)用內(nèi)容區(qū)分欄布局

• • 應(yīng)用內(nèi)容區(qū)建議使用兩種分欄布局：560-20-380的兩欄，940的通欄。

A5 通用組件及控件規(guī)范

A5.1 登錄頁(yè)及登錄浮層

• • 登錄，有兩種形式，頁(yè)面和對(duì)話框。
  • 當(dāng)需要使用登錄頁(yè)面時(shí)，請(qǐng)調(diào)用微博Mini登錄頁(yè)面，該頁(yè)面除了運(yùn)營(yíng)區(qū)可以自定義，其余部分不能改動(dòng)。
  • 

• • 當(dāng)需要使用登錄對(duì)話框時(shí)，請(qǐng)調(diào)用微博登錄面板。
  • 

A5.2 微博發(fā)布器

• • 當(dāng)在第三方產(chǎn)品中需要使用分享微博的地方，請(qǐng)調(diào)用微博發(fā)布器，該發(fā)布器中的元素不允許修改。
  • 

A5.3 對(duì)話框和彈層

• • 對(duì)話框和彈層都是用來(lái)完成某些信息提示或任務(wù)的交互載體，不同的是，對(duì)話框偏向于更加重要的操作或信息行為，居頁(yè)面中間出現(xiàn)或在操作對(duì)象附近出現(xiàn)，是強(qiáng)制打斷用戶當(dāng)前任務(wù)。而彈層更偏向于快捷的操作或信息行為，在操作對(duì)象的附近出現(xiàn)，希望盡可能少的打斷用戶當(dāng)前任務(wù)。

• • 對(duì)話框
  • 如下是對(duì)話框的基本結(jié)構(gòu)：
  • 

• • 對(duì)話框必須含有標(biāo)題、“X”按鈕、內(nèi)容和命令。標(biāo)題和內(nèi)容左對(duì)齊，關(guān)閉和命令右對(duì)齊。命令區(qū)必須含有關(guān)閉對(duì)話框的操作。原則上，對(duì)話框高度不允許太高以至超出用戶屏幕之外。

• • 對(duì)話框主要分兩類(lèi)：信息類(lèi)對(duì)話框和任務(wù)類(lèi)對(duì)話框。
  • 信息類(lèi)對(duì)話框適用于重要提示、確認(rèn)、警告、反饋等場(chǎng)景，其內(nèi)容區(qū)主要是文本信息描述。要求文本信息左側(cè)需有類(lèi)型圖標(biāo)，例如刪除、確認(rèn)、警告操作要使用不同的圖標(biāo)做類(lèi)型區(qū)分。任務(wù)類(lèi)對(duì)話框適用于對(duì)象選擇、表單填寫(xiě)等場(chǎng)景。

• • 彈層
  • 彈層在操作對(duì)象的附近出現(xiàn)，如下是彈層的兩個(gè)基本結(jié)構(gòu)：
  • 

• • 帶命令彈層適用于任務(wù)類(lèi)的行為，不帶命令彈層適用于成功提示的反饋。不帶命令彈層會(huì)自動(dòng)消失，所以，此提示文案不是用戶必須看到的。

B 視覺(jué)規(guī)范

B1 使用說(shuō)明

• • B視覺(jué)規(guī)范定義了微博第三方產(chǎn)品的柵格系統(tǒng)、框架性視覺(jué)尺寸及樣式。相關(guān)源文件可下載微博提供的PSD文檔。
  • 視覺(jué)規(guī)范中使用了三種單元尺寸塊，綠色為10px，紅色為15px，紫色為20px。
  • 

B2 柵格系統(tǒng)

B3 導(dǎo)航

B3.1 微博頂導(dǎo)

• • 頂部導(dǎo)航居中，高度：25px。
  • 

B3.2 頁(yè)頭

• • 標(biāo)準(zhǔn)頁(yè)頭
  • 

• • 窄版頁(yè)頭
  • 

B3.3 頁(yè)尾

B4 微博發(fā)布器

B5 基本控件

B5.1 加關(guān)注按鈕

B5.2 頭像

B6 嵌入微博個(gè)人主頁(yè)的應(yīng)用規(guī)范

B6.1 個(gè)人主頁(yè)頁(yè)卡icon規(guī)范

• • 
  • Icon限定高度：20px，高度含投影應(yīng)在22*22px以內(nèi)
  • 

B6.2 頁(yè)面模塊間距

B6.3 右側(cè)模塊規(guī)范

B6.4 右側(cè)模塊設(shè)計(jì)示例（可選）

• • a 用戶關(guān)系類(lèi)內(nèi)容
  • 
  • b 多媒體內(nèi)容
  • 
  • 

• • c 話題類(lèi)內(nèi)容
  • 

• • d 微博類(lèi)內(nèi)容
  • 

B7 對(duì)話框和彈層

B7.1 對(duì)話框和彈層尺寸定義

• • 標(biāo)準(zhǔn)對(duì)話框
  • 

• • 模態(tài)對(duì)話框（強(qiáng)制壓黑背景）
  • 

• • 彈層
  • 

B7.2 設(shè)計(jì)示例（可選）

• • 模版選擇對(duì)話框
  • 

• • 微博發(fā)布器附件選擇彈層
  • 

B8 Logo規(guī)范

B8.1 Logo比例及光源

• • 中英文域名組合比例關(guān)系（此為推薦組合）：
  • 

• • 無(wú)域名組合比例關(guān)系：
  • 

• • 光源位置為正上方90度
  • 

B8.2 Logo圖形主體及延展區(qū)安全范圍

• • 
  • 如圖所示，以Logo主體高度為基準(zhǔn)，其延展范圍不得超過(guò)主體高度的20%。

B8.3 Logo字體

• • 背景明度范圍B70~B100時(shí)，使用以下規(guī)范：
  • 

• • 背景明度范圍B0~B60時(shí)，使用以下規(guī)范：
  • 

B8.4 Logo設(shè)計(jì)風(fēng)格建議

• • 
  • 建議的設(shè)計(jì)風(fēng)格為：輕薄化、平面化。應(yīng)避免使用過(guò)重的漸變質(zhì)感、水晶和發(fā)光。
  • 以下是微應(yīng)用和微盤(pán)前后的設(shè)計(jì)對(duì)比，供參考：
  •