百度智能小程序-如何提升小程序瀏覽體驗
- 威海自媒體運營與推廣 威海百度智能小程序運營
- 1350
在小程序大力發展的浪潮之下，用戶會選擇體驗更好，更易用的小程序，平臺也更愿意扶持優質小程序的發展，以此來營造健康繁榮的小程序生態。
期待開發者們結合自身產品特色，打造出優秀、易用、好用、充滿情感關懷獨具特色的小程序。我們建議從以下幾個方面開始：
一、選用合適的導航欄
開發者應該選擇符合小程序定位和內容展現的頂部導航欄，使小程序內的瀏覽體驗更符合用戶認知和操作習慣。
智能小程序提供 3 種可選頂部導航欄：頂部導航/基礎、頂部導航/基礎/可配置顏色、頂部導航/自定義。（了解更多）
1. 頂部導航/基礎：建議瀏覽型、資訊型場景使用
使用注意：標題字數建議不超過 8 個中文字符
正確
標題字數合理，小程序名稱一目了然。
注意
標題字數過長，截斷導致信息丟失，容易困惑。
2. 頂部導航/基礎/可配置顏色：建議強烈品牌展示型場景使用
黑色元素適合顏色較淺的容器背景（1），白色元素適合顏色較深的容器背景（2）。
使用注意：標題字數建議不超過 8 個中文字符；顏色應對比鮮明，確保內容可讀性
正確
當容器背景顏色較淺時，使用黑色元素，信息可讀性優。
注意
當容器背景顏色較淺時，選用白色元素，信息可讀性差。
3. 頂部導航/自定義：建議娛樂型、內容沉浸型場景使用
黑色元素適合顏色較淺的容器背景（1），白色元素適合顏色較深的容器背景（2）。
使用注意：布局內容時，避免與右側框架控制功能區交疊
正確
使用自定義導航，展現春節紅包小程序沉浸式體驗。
注意
信息內容與右側框架控制功能區交疊，影響閱讀和使用。
二、建立舒適的閱讀體驗
建議開發者在設計小程序時通過文字、布局排版和適配，建立舒適的視覺閱讀體驗，讓用戶可以快速辨認和獲取所需內容。
1. 文字
文字是頁面信息最重要的載體，合理的文字排版布局可以決定基礎的閱讀體驗。（了解更多）
使用注意：標題、輔助信息、正文、可跳轉鏈接，應使用不同的字號、字重和字色，拉開層次
示例：百度文庫（1）、百度知道（2）的頁面標題、正文字號、字重有明確區分，閱讀體驗好。
你可直接使用智能小程序相關體驗資產。（下載設計資源 | 查看開發文檔）
2. 排版
排版會影響閱讀體驗，建議開發者在組織和呈現信息的時候通過適合的間距和布局方式，讓用戶可以快速辨認和獲取所需內容。（了解更多）
使用注意：通過適合的間距和布局方式，拉開頁面間的信息層級
示例：寶寶知道（1）、TA說（2）的間距布局合理，信息呈現清晰。
三、使用友好的色彩系統
建議開發者通過友好的顏色運用，確保內容識別無障礙，表達最有效的功能信息，為內容提供更好的展現空間。
1. 品牌感知顏色
建議開發者在頁面的關鍵位置，重要的操作命令和重要信息通過品牌色進行強調。
2. 功能輔助顏色
用于傳達信息，區分狀態，建議在完成/通過，警示/出錯，提醒等場景，運用符合用戶常規認知的色彩。
使用注意：色彩應該保證內容清晰易讀，并符合用戶理解認知
正確
用呼應品牌清新的綠色作為長隆動物園主色，綠色的鄰近色淺黃色輔助內容呈現。
正確
以藍色作為AI分診小程序的主色，給用戶安全可信賴的感受，藍色對比色橙色凸顯重要按鈕信息。
四、設置易識別的小程序名稱及 LOGO
LOGO 就是小程序遞給用戶的第一張名片，優秀的 LOGO 能讓用戶在快速一瞥間對產品留下良好印象。
1. 小程序名稱設定
名稱需保證其所在領域具有唯一識別性和客觀性，禁止侵權。（了解更多）
字數建議：建議名稱字符數在 3-30 個字符之間（6 個漢字以內最優），僅支持使用中文、數字、英文，不能使用特殊符號、繁體字、無意義的數字字母。
2. 小程序 LOGO 輸出規則
小程序 LOGO 將在開發者平臺、百度 App、小程序頁面內以圓形外觀展現；請使用清晰、合適大小的 LOGO 切圖，以保證在界面展現上的美觀和完整。（了解更多)
1）裁切規范：容器裁切，出血區域至少占整張圖的 20%
正確
出血區域占整張圖20%左右，合適。
錯誤
出血區域過小，無法完整展示。
2）格式規范：輸出尺寸為 180x180px 的正方形，格式為 PNG、JPEG、JPG 靜態圖片，大小不超過 2M，LOGO 背景不能為透明。
注意
使用 PNG 切圖時背景透明，導致 LOGO 在百度 App 的暗色模式下，LOGO 識別不清晰。
3）確保清晰：LOGO 不可出現像素點，建議使用矢量圖形，小尺寸下也可以清晰顯示
錯誤
切圖尺寸過小，出現像素點，在前端展現質量低。
3. 小程序 LOGO 設計建議
小程序 LOGO 將在開發者平臺、百度 App、小程序頁面內以圓形外觀展現；LOGO 圖片必須清晰，必須突出主題，不得含有網站、水印、二維碼、聯系方式等營銷信息，并且符合基本設計規范。
1）構圖飽滿：LOGO 主體構圖填充有效利用，主體元素至少保證占據 70%-80%空間面積
正確
主體元素占空間面積80%，構圖飽滿。
注意
主體元素占空間面積25%，圖形識別性差。
2）映射產品特點：LOGO 配色及風格與界面有所呼應，提前向用戶傳遞產品行業特點
正確
AI分診助手的LOGO，使用聽診器與心形結合的創意設計，簡潔克制的藍白配色，彰顯了它作為醫療屬性工具小程序的專業和嚴謹，并且與主頁面風格一致。
3）創意亮點：小程序 LOGO 可以通過名稱、圖形隱喻產品特色，以此給用戶留下深刻印象
正確
減減鴨小程序LOGO，用基礎的心形，傳遞釋放心理壓力的含義；綠色和黃色，與頁面色彩風格呼應；提取減“壓”的諧音減“鴨”，加深用戶對產品的印象。
五、運用多媒體互動能力增加情感化體驗
小程序滿足基本使用體驗的同時，適時適度的增加情感化細節，可以進一步提升用戶體驗。
1. 運用圖文并茂的方式，合理引導操作
在產品新功能、缺省態的場景用戶容易困惑的時候，提供貼心符合品牌特征的插圖引導，可以讓用戶獲得更好的使用體驗，并產生對產品的好感。
正確
通過插畫營造結果頁氛圍，讓用戶獲得成就感，從產品細節增加用戶好感度。
正確
使用插畫提示用戶當前頁面缺省，并提供“去逛逛”按鈕，引導用戶下一步操作。
智能小程序提供了常用場景的功能型靜態圖標，開發者可以根據頁面功能選用。（了解更多）
你可直接使用智能小程序相關體驗資產。（下載設計資源 | 查看開發文檔）
2. 通過動效減少焦慮，豐富互動體驗
為了更好地實現流暢的動畫效果，智能小程序支持 Lottie 導出的 json 文件以及位圖。(查看開發文檔)
1）引導交互狀態：動效幫助用戶理解界面前后變化的邏輯關系；
2）加強反饋：用戶的操作行為獲得相應的動態反饋，可以為用戶帶來安全感；
3）豐富互動，提升愉悅感：合理的動效能提高產品的「表達能力」，增加親和力和趣味性。
示例1：利用動效，打造生動有趣的點贊互動效果。
示例2：動態彈窗幫助用戶理解功能。
3. 運用多媒體效果打造沉浸氛圍體驗
除了 Lottie 動畫（了解更多），智能小程序也支持 AFX 透明視頻（了解更多）播放。
1）品質感：豐富合理的動效不僅可以提升產品的可用性水平，而且能提升產品的品質感；
2）成就感：精彩的動效能夠強化產品的功能和體驗，讓用戶獲得成就感，與用戶構建起情感聯系。
示例1：通過多媒體，強化產品的功能和體驗，提升品質感。
示例2：通過多媒體營造沉浸式氛圍，讓用戶獲得成就感。
來源：百度智能小程序
