一、網頁整體布局標準

1、網頁頁面整體分A區（包含廣告一區和主體內容區）和B區（包含廣告二區、推薦區、廣告三區以及服務區）頁面標準示意圖見右圖：

2、其中A區（主體內容區和廣告一區）由站長開發，主體內容區標準樣式參考后面章節

3、如主體內容區域超長，超過1.5倍屏幕的內容通過折疊的方式進行折疊

4、B區（廣告二、推薦區、廣告三以及服務區）內容采用13頁提供的技術組件

注釋：主體內容區可以認為是頁面Z想表達的內容總和，主體內容指從標題開始至正文內容結束；文章后的分享、推薦等不視為主體內容

總圖示如下：

主體內容區三種類型：文章_基礎樣式

主體內容區三種類型：問答_基礎樣式

主體內容區三種類型：視頻_基礎樣式

文章_擴展樣式：兼容縮緊、加粗、無段落

文章_擴展樣式：展開狀態

文章_擴展樣式：TAG推薦

文章_擴展樣式：音頻樣式

問答_擴展樣式：患者追問

問答_擴展樣式：咨詢記錄

問答_擴展樣式：多種回答聚合

問答_擴展樣式：IM對話展示

模塊_樣式標注：組件樣式

模塊_樣式標注：模塊標注

模塊_樣式標注：特殊樣式

模塊_樣式標注：圖文樣式

二、主體內容區內容觸達標準

1、視頻/音頻可直接播放，并可達到視頻類app當前播放效果，禁止使用讓用戶獲 取信息需要ji大的權限成本，例如強制登錄才能瀏覽和使用、需要下載APP才能獲取等，相關內容頁面展示示意標準圖如下：

2、文字類型的可直接閱讀，禁止出現外部跳轉或者需要下載APP才能繼續閱讀等，頁面展示示意標準圖如下：

三、主體內容區內容質量標準

1、無作弊、第質和詐騙類信息

2、頁面主體辨識容易，排版合理，段落分明，文本內容和背景顏色區分清晰

3、頁面主體突出明確，主體內容位于頁面靠前(首屏)且最新的位置，頁面無廣告或通過頁面標簽/頁面布局能清楚地區分頁面主體信息后的ji少量廣告，對主體信息無任何干擾影響

4、獲取頁面主體信息的時候沒有多余的干擾和成本，持續找到所需，并通過頁面布局，持續了解頁面各模塊的主要內容

5、內容布局圖標準示意圖：

四、主體內容區瀏覽體驗標準

1、獲取成本：速度、廣告、權限、上下范圍邊框等

    1）頁面打開速度不超過3秒

    2）廣告均為定制化模塊，嚴格遵守醫療廣告樣式，詳見下一章節

    3）上下范圍邊框等，參考下圖：

2、瀏覽順暢：排版字色、字號、段落

字號                                                  

72PX  文章標題          

54PX  模塊標題         

48PX 文章內容           

39PX  輔助信息            

字色

#02b7ca  醫療用色 

#1f1f1f    黑色文字

#757575  灰色文字

#a3a3a3   淺灰文字

段落

90PX  文章段落

36PX  文章行距

24PX  摘要行距

五、廣告一區廣告標準

1、廣告面積：廣告一區廣告面積不超過10%

2、廣告內容：內容符合gj廣告法的標準和百度廣告審核準入標準，不可以出現第俗（灰色廣告從嚴）、賭博、法律規定的違禁品或服務（包括純文字的任何形式廣告）不可以出現誘導、欺騙、虛假廣告

3、廣告樣式：不可以懸浮彈窗廣告（遮屏、置底、兩側懸?。?；不可以廣告閃動/抖動不固定；廣告與功能按鈕Z疊；廣告自動播放或者自動下載；不允許有引導打開APP或者下載APP的遮屏交互；不可以放在用戶容易誤點的區域（如播放、購買功能按鈕有Z疊）；不可以出現廣告自動播放或自動下載等；廣告有明確顯示此條內容屬于廣告，并且廣告有關閉按鈕；具體廣告樣式標準如下圖：

六、技術實現標準

1、技術實現采用開源MIP框架 https://www.mipengine.org

2、B區（包含推薦區、廣告二區、廣告三區以及服務區）采用基于開源MIP的組件機制

3、技術解決方案文檔見：https://pan.baidu.com/s/1bpMyksn

4、技術咨詢請聯系QQ : 876118118