一、網(wǎng)頁整體布局標準

1、網(wǎng)頁頁面整體分A區(qū)（包含廣告一區(qū)和主體內(nèi)容區(qū)）和B區(qū)（包含廣告二區(qū)、推薦區(qū)、廣告三區(qū)以及服務(wù)區(qū)）頁面標準示意圖見右圖：

2、其中A區(qū)（主體內(nèi)容區(qū)和廣告一區(qū)）由站長開發(fā)，主體內(nèi)容區(qū)標準樣式參考后面章節(jié)

3、如主體內(nèi)容區(qū)域超長，超過1.5倍屏幕的內(nèi)容通過折疊的方式進行折疊

4、B區(qū)（廣告二、推薦區(qū)、廣告三以及服務(wù)區(qū)）內(nèi)容采用13頁提供的技術(shù)組件

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

總圖示如下：

主體內(nèi)容區(qū)三種類型：文章_基礎(chǔ)樣式

主體內(nèi)容區(qū)三種類型：問答_基礎(chǔ)樣式

主體內(nèi)容區(qū)三種類型：視頻_基礎(chǔ)樣式

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

文章_擴展樣式：展開狀態(tài)

文章_擴展樣式：TAG推薦

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

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

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

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

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

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

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

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

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

二、主體內(nèi)容區(qū)內(nèi)容觸達標準

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

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

三、主體內(nèi)容區(qū)內(nèi)容質(zhì)量標準

1、無作弊、第質(zhì)和詐騙類信息

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

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

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

5、內(nèi)容布局圖標準示意圖：

四、主體內(nèi)容區(qū)瀏覽體驗標準

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

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

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

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

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

字號                                                  

72PX  文章標題          

54PX  模塊標題         

48PX 文章內(nèi)容           

39PX  輔助信息            

字色

#02b7ca  醫(yī)療用色 

#1f1f1f    黑色文字

#757575  灰色文字

#a3a3a3   淺灰文字

段落

90PX  文章段落

36PX  文章行距

24PX  摘要行距

五、廣告一區(qū)廣告標準

1、廣告面積：廣告一區(qū)廣告面積不超過10%

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

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

六、技術(shù)實現(xiàn)標準

1、技術(shù)實現(xiàn)采用開源MIP框架 https://www.mipengine.org

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

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

4、技術(shù)咨詢請聯(lián)系QQ : 876118118