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