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