百度智能小程序 瀏覽體驗(yàn)

如何提升小程序?yàn)g覽體驗(yàn)

在小程序大力發(fā)展的浪潮之下，用戶(hù)會(huì)選擇體驗(yàn)更好，更易用的小程序，平臺(tái)也更愿意扶持優(yōu)質(zhì)小程序的發(fā)展，以此來(lái)營(yíng)造健康繁榮的小程序生態(tài)。期待開(kāi)發(fā)者們結(jié)合自身產(chǎn)品特色，打造出優(yōu)秀、易用、好用、充滿(mǎn)情感關(guān)懷獨(dú)具特色的小程序。我們建議從以下幾個(gè)方面開(kāi)始：

一、選用合適的導(dǎo)航欄
二、建立舒適的閱讀體驗(yàn)
三、使用友好的色彩系統(tǒng)
四、設(shè)置易識(shí)別的小程序名稱(chēng)及 LOGO
五、運(yùn)用多媒體互動(dòng)能力增加情感化體驗(yàn)

一、選用合適的導(dǎo)航欄

開(kāi)發(fā)者應(yīng)該選擇符合小程序定位和內(nèi)容展現(xiàn)的頂部導(dǎo)航欄，使小程序內(nèi)的瀏覽體驗(yàn)更符合用戶(hù)認(rèn)知和操作習(xí)慣。

智能小程序提供 3 種可選頂部導(dǎo)航欄：頂部導(dǎo)航/基礎(chǔ)、頂部導(dǎo)航/基礎(chǔ)/可配置顏色、頂部導(dǎo)航/自定義。（了解更多）

1. 頂部導(dǎo)航/基礎(chǔ)：建議瀏覽型、資訊型場(chǎng)景使用

使用注意：標(biāo)題字?jǐn)?shù)建議不超過(guò) 8 個(gè)中文字符

2. 頂部導(dǎo)航/基礎(chǔ)/可配置顏色：建議強(qiáng)烈品牌展示型場(chǎng)景使用

黑色元素適合顏色較淺的容器背景（1），白色元素適合顏色較深的容器背景（2）。

使用注意：標(biāo)題字?jǐn)?shù)建議不超過(guò) 8 個(gè)中文字符；顏色應(yīng)對(duì)比鮮明，確保內(nèi)容可讀性

3. 頂部導(dǎo)航/自定義：建議娛樂(lè)型、內(nèi)容沉浸型場(chǎng)景使用

黑色元素適合顏色較淺的容器背景（1），白色元素適合顏色較深的容器背景（2）。

使用注意：布局內(nèi)容時(shí)，避免與右側(cè)框架控制功能區(qū)交疊

二、建立舒適的閱讀體驗(yàn)

建議開(kāi)發(fā)者在設(shè)計(jì)小程序時(shí)通過(guò)文字、布局排版和適配，建立舒適的視覺(jué)閱讀體驗(yàn)，讓用戶(hù)可以快速辨認(rèn)和獲取所需內(nèi)容。

1. 文字

文字是頁(yè)面信息最重要的載體，合理的文字排版布局可以決定基礎(chǔ)的閱讀體驗(yàn)。（了解更多）

使用注意：標(biāo)題、輔助信息、正文、可跳轉(zhuǎn)鏈接，應(yīng)使用不同的字號(hào)、字重和字色，拉開(kāi)層次

示例：百度文庫(kù)（1）、百度知道（2）的頁(yè)面標(biāo)題、正文字號(hào)、字重有明確區(qū)分，閱讀體驗(yàn)好。

你可直接使用智能小程序相關(guān)體驗(yàn)資產(chǎn)。（下載設(shè)計(jì)資源 | 查看開(kāi)發(fā)文檔）

2. 排版

排版會(huì)影響閱讀體驗(yàn)，建議開(kāi)發(fā)者在組織和呈現(xiàn)信息的時(shí)候通過(guò)適合的間距和布局方式，讓用戶(hù)可以快速辨認(rèn)和獲取所需內(nèi)容。（了解更多）

使用注意：通過(guò)適合的間距和布局方式，拉開(kāi)頁(yè)面間的信息層級(jí)

示例：寶寶知道（1）、TA說(shuō)（2）的間距布局合理，信息呈現(xiàn)清晰。

三、使用友好的色彩系統(tǒng)

建議開(kāi)發(fā)者通過(guò)友好的顏色運(yùn)用，確保內(nèi)容識(shí)別無(wú)障礙，表達(dá)最有效的功能信息，為內(nèi)容提供更好的展現(xiàn)空間。

1. 品牌感知顏色

建議開(kāi)發(fā)者在頁(yè)面的關(guān)鍵位置，重要的操作命令和重要信息通過(guò)品牌色進(jìn)行強(qiáng)調(diào)。

2. 功能輔助顏色

用于傳達(dá)信息，區(qū)分狀態(tài)，建議在完成/通過(guò)，警示/出錯(cuò)，提醒等場(chǎng)景，運(yùn)用符合用戶(hù)常規(guī)認(rèn)知的色彩。

四、設(shè)置易識(shí)別的小程序名稱(chēng)及 LOGO

LOGO 就是小程序遞給用戶(hù)的第一張名片，優(yōu)秀的 LOGO 能讓用戶(hù)在快速一瞥間對(duì)產(chǎn)品留下良好印象。

1. 小程序名稱(chēng)設(shè)定

名稱(chēng)需保證其所在領(lǐng)域具有唯一識(shí)別性和客觀性，禁止侵權(quán)。

字?jǐn)?shù)建議：建議名稱(chēng)字符數(shù)在 3-30 個(gè)字符之間（6 個(gè)漢字以?xún)?nèi)最優(yōu)），僅支持使用中文、數(shù)字、英文，不能使用特殊符號(hào)、繁體字、無(wú)意義的數(shù)字字母。

2. 小程序 LOGO 輸出規(guī)則

小程序 LOGO 將在開(kāi)發(fā)者平臺(tái)、百度 APP、小程序頁(yè)面內(nèi)以圓形外觀展現(xiàn)；請(qǐng)使用清晰、合適大小的 LOGO 切圖，以保證在界面展現(xiàn)上的美觀和完整。（了解更多)

1）裁切規(guī)范：容器裁切，出血區(qū)域至少占整張圖的 20%

2）格式規(guī)范：輸出 144*144px，PNG（背景不能為透明）、BMP、JPEG、JPG 格式的靜態(tài)圖片，小于等于 120kb

注意

使用PNG切圖時(shí)背景透明，導(dǎo)致LOGO在百度APP的暗色模式下，LOGO識(shí)別不清晰。

3）確保清晰：LOGO 不可出現(xiàn)像素點(diǎn)，建議使用矢量圖形，小尺寸下也可以清晰顯示

錯(cuò)誤

切圖尺寸過(guò)小，出現(xiàn)像素點(diǎn)，在前端展現(xiàn)質(zhì)量低。

3. 小程序 LOGO 設(shè)計(jì)建議

小程序 LOGO 將在開(kāi)發(fā)者平臺(tái)、百度 APP、小程序頁(yè)面內(nèi)以圓形外觀展現(xiàn)；LOGO 圖片必須清晰，必須突出主題，不得含有網(wǎng)站、水印、二維碼、聯(lián)系方式等營(yíng)銷(xiāo)信息，并且符合基本設(shè)計(jì)規(guī)范。

1）構(gòu)圖飽滿(mǎn)：LOGO 主體構(gòu)圖填充有效利用，主體元素至少保證占據(jù) 70%-80%空間面積

2）映射產(chǎn)品特點(diǎn)：LOGO 配色及風(fēng)格與界面有所呼應(yīng)，提前向用戶(hù)傳遞產(chǎn)品行業(yè)特點(diǎn)

正確

AI分診助手的LOGO，使用聽(tīng)診器與心形結(jié)合的創(chuàng)意設(shè)計(jì)，簡(jiǎn)潔克制的藍(lán)白配色，彰顯了它作為醫(yī)療屬性工具小程序的專(zhuān)業(yè)和嚴(yán)謹(jǐn)，并且與主頁(yè)面風(fēng)格一致。

3）創(chuàng)意亮點(diǎn)：小程序 LOGO 可以通過(guò)名稱(chēng)、圖形隱喻產(chǎn)品特色，以此給用戶(hù)留下深刻印象

正確

減減鴨小程序LOGO，用基礎(chǔ)的心形，傳遞釋放心理壓力的含義；綠色和黃色，與頁(yè)面色彩風(fēng)格呼應(yīng)；提取減“壓”的諧音減“鴨”，加深用戶(hù)對(duì)產(chǎn)品的印象。

五、運(yùn)用多媒體互動(dòng)能力增加情感化體驗(yàn)

小程序滿(mǎn)足基本使用體驗(yàn)的同時(shí)，適時(shí)適度的增加情感化細(xì)節(jié)，可以進(jìn)一步提升用戶(hù)體驗(yàn)。

1. 運(yùn)用圖文并茂的方式，合理引導(dǎo)操作

在產(chǎn)品新功能、缺省態(tài)的場(chǎng)景用戶(hù)容易困惑的時(shí)候，提供貼心符合品牌特征的插圖引導(dǎo)，可以讓用戶(hù)獲得更好的使用體驗(yàn)，并產(chǎn)生對(duì)產(chǎn)品的好感。

智能小程序提供了常用場(chǎng)景的功能型靜態(tài)圖標(biāo)，開(kāi)發(fā)者可以根據(jù)頁(yè)面功能選用。（了解更多）

你可直接使用智能小程序相關(guān)體驗(yàn)資產(chǎn)。（下載設(shè)計(jì)資源 | 查看開(kāi)發(fā)文檔）

2. 通過(guò)動(dòng)效減少焦慮，豐富互動(dòng)體驗(yàn)

為了更好地實(shí)現(xiàn)流暢的動(dòng)畫(huà)效果，智能小程序支持 Lottie 導(dǎo)出的 json 文件以及位圖。

1）引導(dǎo)交互狀態(tài)：動(dòng)效幫助用戶(hù)理解界面前后變化的邏輯關(guān)系；

2）加強(qiáng)反饋：用戶(hù)的操作行為獲得相應(yīng)的動(dòng)態(tài)反饋，可以為用戶(hù)帶來(lái)安全感；

3）豐富互動(dòng)，提升愉悅感：合理的動(dòng)效能提高產(chǎn)品的「表達(dá)能力」，增加親和力和趣味性。

3. 運(yùn)用多媒體效果打造沉浸氛圍體驗(yàn)

除了 Lottie 動(dòng)畫(huà)（了解更多），智能小程序也支持 AFX 透明視頻播放。

1）品質(zhì)感：豐富合理的動(dòng)效不僅可以提升產(chǎn)品的可用性水平，而且能提升產(chǎn)品的品質(zhì)感；

2）成就感：精彩的動(dòng)效能夠強(qiáng)化產(chǎn)品的功能和體驗(yàn)，讓用戶(hù)獲得成就感，與用戶(hù)構(gòu)建起情感聯(lián)系。