百度APP移動搜索落地頁體驗白皮書5.0-交互操作規范
4.3. 交互操作規范
4.3.1 滑動順暢
為保證搜索用戶瀏覽頁面的便捷性,頁面上下滑動及tab模塊切換等操作需順暢不卡頓。
4.3.2 功能友好
4.3.2.1 用戶可以快速直達目標頁面或使用功能,操作簡易,回退自如,避免繁瑣步驟或重復點擊等行為。
特別提醒:為給用戶形成統一便捷的用戶體驗,百度智能小程序提供的返回功能統一位于頁面左上方,建議不要放置其他位置。
案例1:
如:選擇感興趣的商品,先到達商品詳情頁,還需要再次點擊才可到達購買頁,這種造成用戶多余操作的情況是不允許出現的。
錯誤:選擇感興趣的商品——>商品詳情頁(多余操作操作繁雜)——>商品詳情頁,可下單購買
正確:選擇感興趣的商品——>商品詳情頁,可直接點擊購買
上圖:購買路徑繁瑣,不符合要求
案例2:
上圖:小程序頁面的返回按鈕位于頁面左上方,回退自如
4.3.2.2 功能設置要簡單易用,符合用戶操作習慣,同一功能在同一頁面只能出現一次,不可重復設置。具體要求如下:
4.3.2.2.1 功能位置必須固定,不可抖動或閃爍,與頁面其他內容模塊(如廣告)要有一定間距,不可重疊,避免用戶誤操作;
4.3.2.2.2 同一頁面上功能按鈕面積不可超過一屏面積的10%;
4.3.2.2.3功能必須實際可用,操作友好便捷,且實際功能與文字描述需完全一致,不可出現誘導信息或引導跳轉第三方頁面;
4.3.2.2.4 功能可設置成嵌入樣式也可設置成懸浮樣式,但設置懸浮功能時要注意面積不能過大,不可遮擋用戶瀏覽頁面內容或進行其他功能操作。
案例1:
上圖:功能按鈕未放置在底部,不符合用戶習慣
案例2:
上圖:功能按鈕抖動,不符合要求
4.3.2.3 咨詢類功能在當前頁只能出現一次,且位置不允許出現在頂部;在用戶未主動點擊的情況下,咨詢的對話窗口不可自動彈出;咨詢按鈕可在底部或側面懸浮,但面積不宜過大干擾用戶瀏覽。
案例1:
上圖:咨詢功能自動彈窗且與底部的咨詢按鈕重復,不符合要求
案例2:
上圖:咨詢功能懸浮在頁面底部,面積小于一屏10%,符合規范
案例3:
上圖:咨詢功能懸浮在頁面右側,面積較小,符合規范
4.3.3 操作便捷化
落地頁的交互操作應符合用戶日常使用習慣,簡單方便。
4.3.3.1 頁面的文本內容應支持長按可復制,鏈接可點擊。
案例1:
上圖:文字長按可調起復制,符合要求
4.3.3.2 詳情頁的主體內容在包含圖片的情況下,圖片應支持點擊調起查看大圖,點擊返回,雙指按捏放大縮小功能使用自如,在有多張圖片的情況下,手勢支持左右滑動,自由切換圖片。
案例1:
上圖:圖片可點擊查看并退回,雙指按捏進行縮放,左右滑動進行圖片切換
4.3.3.3視頻播放時,進度條應可被拖拽;視頻可以全屏播放,豎屏視頻在全屏播放時,應保持豎屏模式的全屏播放;視頻不可出現抖動、顫抖、卡頓多次的情況,避免傷害用戶體驗。
案例1:
上圖:小程序中的豎屏視頻全屏不支持豎屏播放,用戶觀看體驗差
4.3.3.4 音頻播放時,進度條可以被拖拽。歌詞需要與歌曲有映射關系,保持同步。
案例1:
上圖:音頻進度條不可拖拽
4.3.3.5用戶在H5站或智能小程序內有地點查詢等需求時,應支持用戶使用地圖查看地點,獲取地點周邊信息、調起主流地圖進行路線規劃和目的地導航。
4.3.3.6 用戶高頻使用的電話、咨詢、QQ等功能應實現組件化,用戶點擊功能后能快速進入溝通交流頁面。如用戶點擊電話,實現電話撥打操作;用戶點擊咨詢功能,可直接進入咨詢對話框;用戶點擊QQ,可直接進入QQ對話框。
案例1:
上圖:線上咨詢功能點擊后直接進入咨詢對話框,符合規范
注明:當前百度智能小程序提供的框架能力可支持文本、圖片、視頻以及音頻等資源交互操作,小程序開發者可自由選用,若開發者自行設置多媒體資源的交互能力,需遵守上述規范。
目錄
1.引言
2.信息獲取&頁面瀏覽規范
3.交互操作規范
4.服務規范
5.體驗算法&相關文檔
來源:百度搜索資源平臺 百度搜索學堂