新浪SEA開放平臺開發(fā)文檔
/ 應用設計規(guī)范
應用設計規(guī)范
A 交互規(guī)范
A1 使用說明
- 本文檔定義了微博第三方產品的交互框架結構，相關內容的尺寸定義和視覺樣式請查閱微博視覺規(guī)范和PSD源文件。本文檔中02、03、04部分為必選項，貴方設計產品時必須遵守。05部分為可選項，列舉了微博現(xiàn)有的布局、組件/控件樣式，供設計時參考。
A2 交互設計原則
- 第三方產品在設計方案除了遵循本文檔所列的通用規(guī)范外，有較大的設計自由。微博設計部提供以下交互設計原則做參考：
- 統(tǒng)一性和標準性
- 同類型頁面采用相同或相似布局結構，同類操作的響應方式保持一致；
- 導航類結構保持一致，包括全局導航、搜索、篩選等；
- 文案表述方式統(tǒng)一且易懂，包括信息提示、稱謂、菜單、語法標點、功能名稱等；
- 信息清晰、導向明確
- 主次內容布局合理，各類型信息組織邏輯清晰；
- 清楚知道當前頁面狀態(tài)，二級及以下頁面要有清晰的導航層次，例如統(tǒng)一導航、面包屑等；
- 反饋及時有效
- 對用戶操作及時反饋；
- 反饋信息準確、簡潔、直白，并對用戶操作具有指導性；
- 錯誤及安全預防
- 對有嚴重后果的操作提供必要提醒；
- 提供預防或糾正錯誤的方式；
- 提供隱私保護措施；
A3 獨立第三方產品的框架規(guī)范
A3.1 整體框架布局
- 第三方產品需嚴格包含以下五部分：微博頂導、頁頭、內容、底導及微博頁尾。其中，微博頂導和頁尾請直接調用接口，頁頭、內容及底導請貴方依據(jù)交互框架原則，自行設計具體結構內容。
A3.2 微博頂導
- 原則上第三方產品請直接調用微博簡版頂導。如果有特殊需要想使用全版頂導，請聯(lián)系微博相關接口人確認。
A3.3 頁頭
- 頁頭是整個產品的全局導航區(qū)域，必須包含產品的Logo和標題。其他元素，例如Slogan、品牌頭圖展示、搜索框、運營位等，在不破壞頁頭整體結構的前提下，請自行布局。
- 頁頭有兩種尺寸可選擇：標準頁頭和窄版頁頭。標準頁頭適用于產品的一級頁面，窄版頁頭適用于二級頁面。設計窄版頁頭的目的是為了在二級頁面能更多地展示內容，所以把頁頭高度壓低。在具體產品中，請遵循以下原則，產品頁面不可以只使用窄版頁頭，產品的一級頁面也不可以使用窄版頁頭。
- 如果產品的一級導航放在頁頭區(qū)域，請靠右對齊，參考以下結構：
A3.4 內容
- 內容區(qū)的布局有多種分欄結構供使用：三欄版、兩欄版（左窄右寬、右寬左窄）、通欄版。柵格系統(tǒng)尺寸請查閱視覺規(guī)范定義。產品可以依據(jù)自身結構特性，選擇適當?shù)牟季职媸健?/li>
- 三欄版
- 左側為導航，中間為主內容區(qū)，右側為推薦、幫助等次要內容。
- 兩欄版-左窄右寬
- 左側為導航，右側為內容區(qū)。依據(jù)產品內容可以選擇以下四種左窄右寬的兩欄布局。
- 兩欄版-左寬右窄
- 左側為內容區(qū)，右側為導航。依據(jù)產品內容可以選擇以下四種左寬右窄的兩欄布局。
- 通欄版
- 通欄結構對于導航和主次內容沒有明確規(guī)范，請自行設計。原則，信息結構清晰、導航指引明確。
- 如果上述分欄結構無法滿足產品實際需要，可以在此柵格系統(tǒng)基礎上，以30px為模數(shù)單位進行變化，如720/260。
A3.5 底導
- 底導是作為該產品周邊相關的外部導航入口，例如第三方其他產品的鏈接、移動端下載鏈接等。請參考以下結構：
A3.6 微博頁尾
- 第三方產品請直接調用微博頁尾。
A4 嵌入微博個人主頁的應用框架規(guī)范
A4.1 整體框架布局
- 下圖虛線框選的部分是內嵌應用的內容區(qū)。與獨立網頁的設計不同，內嵌應用的交互組件/控件、視覺樣式需嚴格遵守微博的設計規(guī)范，重用部分請直接調用微博的相關接口。
A4.2 應用內容區(qū)分欄布局
- 應用內容區(qū)建議使用兩種分欄布局：560-20-380的兩欄，940的通欄。
A5 通用組件及控件規(guī)范
A5.1 登錄頁及登錄浮層
- 登錄，有兩種形式，頁面和對話框。
- 當需要使用登錄頁面時，請調用微博Mini登錄頁面，該頁面除了運營區(qū)可以自定義，其余部分不能改動。
- 當需要使用登錄對話框時，請調用微博登錄面板。
A5.2 微博發(fā)布器
- 當在第三方產品中需要使用分享微博的地方，請調用微博發(fā)布器，該發(fā)布器中的元素不允許修改。
A5.3 對話框和彈層
- 對話框和彈層都是用來完成某些信息提示或任務的交互載體，不同的是，對話框偏向于更加重要的操作或信息行為，居頁面中間出現(xiàn)或在操作對象附近出現(xiàn)，是強制打斷用戶當前任務。而彈層更偏向于快捷的操作或信息行為，在操作對象的附近出現(xiàn)，希望盡可能少的打斷用戶當前任務。
- 對話框
- 如下是對話框的基本結構：
- 對話框必須含有標題、“X”按鈕、內容和命令。標題和內容左對齊，關閉和命令右對齊。命令區(qū)必須含有關閉對話框的操作。原則上，對話框高度不允許太高以至超出用戶屏幕之外。
- 對話框主要分兩類：信息類對話框和任務類對話框。
- 信息類對話框適用于重要提示、確認、警告、反饋等場景，其內容區(qū)主要是文本信息描述。要求文本信息左側需有類型圖標，例如刪除、確認、警告操作要使用不同的圖標做類型區(qū)分。任務類對話框適用于對象選擇、表單填寫等場景。
- 彈層
- 彈層在操作對象的附近出現(xiàn)，如下是彈層的兩個基本結構：
- 帶命令彈層適用于任務類的行為，不帶命令彈層適用于成功提示的反饋。不帶命令彈層會自動消失，所以，此提示文案不是用戶必須看到的。
B 視覺規(guī)范
B1 使用說明
- B視覺規(guī)范定義了微博第三方產品的柵格系統(tǒng)、框架性視覺尺寸及樣式。相關源文件可下載微博提供的PSD文檔。
- 視覺規(guī)范中使用了三種單元尺寸塊，綠色為10px，紅色為15px，紫色為20px。
B2 柵格系統(tǒng)
B3 導航
B3.1 微博頂導
- 頂部導航居中，高度：25px。
B3.2 頁頭
- 標準頁頭
- 窄版頁頭
B3.3 頁尾
B4 微博發(fā)布器
B5 基本控件
B5.1 加關注按鈕
B5.2 頭像
B6 嵌入微博個人主頁的應用規(guī)范
B6.1 個人主頁頁卡icon規(guī)范
- Icon限定高度：20px，高度含投影應在22*22px以內
B6.2 頁面模塊間距
B6.3 右側模塊規(guī)范
B6.4 右側模塊設計示例（可選）
- a 用戶關系類內容
- b 多媒體內容
- c 話題類內容
- d 微博類內容
B7 對話框和彈層
B7.1 對話框和彈層尺寸定義
- 標準對話框
- 模態(tài)對話框（強制壓黑背景）
- 彈層
B7.2 設計示例（可選）
- 模版選擇對話框
- 微博發(fā)布器附件選擇彈層
B8 Logo規(guī)范
B8.1 Logo比例及光源
- 中英文域名組合比例關系（此為推薦組合）：
- 無域名組合比例關系：
- 光源位置為正上方90度
B8.2 Logo圖形主體及延展區(qū)安全范圍
- 如圖所示，以Logo主體高度為基準，其延展范圍不得超過主體高度的20%。
B8.3 Logo字體
- 背景明度范圍B70~B100時，使用以下規(guī)范：
- 背景明度范圍B0~B60時，使用以下規(guī)范：
B8.4 Logo設計風格建議
- 建議的設計風格為：輕薄化、平面化。應避免使用過重的漸變質感、水晶和發(fā)光。
- 以下是微應用和微盤前后的設計對比，供參考：
