百度智能小程序 按鈕

按鈕

按鈕允許用戶點(diǎn)擊，并觸發(fā)對(duì)應(yīng)的操作。

開發(fā)文檔說明詳見 button。

大按鈕

大按鈕高度固定為 88px，圓角大小固定 8px。自定義配置：按鈕文案（建議不超過 8 個(gè)中文字符）。

小按鈕

小按鈕高度固定為 56px，寬度最小 114px，圓角大小固定 6px。按鈕內(nèi)邊距最小 30px，文字較長(zhǎng)時(shí)，按鈕可按所需寬度拉伸適配。

懸浮按鈕

開發(fā)者可以在智能小程序頁面放置懸浮按鈕，為了減少對(duì)內(nèi)容遮擋和用戶閱讀體驗(yàn)的影響，我們建議使用 88px 的懸浮按鈕。在 視覺資源下載 中，我們提供了懸浮按鈕示例源文件，開發(fā)者也可以根據(jù)需要，替換懸浮按鈕的功能及圖標(biāo)。

1. 視覺組件庫中的設(shè)計(jì)示例；2. 替換圖標(biāo)時(shí)，新圖標(biāo)大小建議占懸浮按鈕整體寬度的50%；3. 功能名稱無法用圖標(biāo)表達(dá)，可以使用文字表達(dá)，不建議超過8個(gè)中文字符。

頁面布局

懸浮按鈕右側(cè)和底部間距最少 34px，任何情況下均不與頁面內(nèi)的其他元素重疊。

懸浮按鈕的點(diǎn)擊區(qū)域通常為與按鈕等寬高的正方形。

懸浮按鈕的點(diǎn)擊區(qū)域。

注意事項(xiàng)

1. 懸浮按鈕應(yīng)用于承載當(dāng)前頁面相關(guān)的功能，如“回頂部”“章節(jié)目錄”等，請(qǐng)注意與框架已有的圖標(biāo)表意做區(qū)分。任何時(shí)候，均不可重復(fù)放置框架上已有的功能，包括“返回”、“關(guān)閉”等。

   

   正確

   懸浮按鈕“頁面快捷菜單”圖標(biāo)與框架樣式不同，幫助用戶正確區(qū)分。

   

   錯(cuò)誤

   框架已有統(tǒng)一返回，不可在懸浮按鈕放置返回功能。

2. 懸浮按鈕可用于跳轉(zhuǎn)與當(dāng)前內(nèi)容有關(guān)頁面，如用于按順序查看下一個(gè)，或者相關(guān)推薦。

   
   

   正確

   懸浮按鈕用于跳轉(zhuǎn)相關(guān)頁面，如“下一條回答”。

   

   正確

   懸浮按鈕用于推薦相關(guān)頁面，如“查看更多相關(guān)內(nèi)容”。

   禁止使用懸浮按鈕承載與當(dāng)前頁面無關(guān)的內(nèi)容入口，以免遮擋內(nèi)容會(huì)影響用戶閱讀體驗(yàn)。

   

   錯(cuò)誤

   懸浮按鈕不可用于跳轉(zhuǎn)回首頁。

   

   錯(cuò)誤

   懸浮按鈕不可用于展現(xiàn)廣告，或者作為廣告頁面的跳轉(zhuǎn)入口。

3. 結(jié)合其使用場(chǎng)景，綜合考慮懸浮按鈕的展現(xiàn)策略，盡量減少對(duì)閱讀內(nèi)容的遮擋。

   例如：我們建議懸浮按鈕“回到頂部”策略：默認(rèn)及上滑時(shí)不顯示，下拉漸顯，無操作 500ms 漸隱。因?yàn)轫撁婺J(rèn)展現(xiàn)及用戶上滑以瀏覽內(nèi)容的情況，應(yīng)以用戶閱讀為優(yōu)先，不應(yīng)顯示遮擋內(nèi)容；而用戶下拉往上翻內(nèi)容時(shí)，提供快捷“回到頂部”的操作更為合適。

   你的瀏覽器不支持該視頻播放

   溫馨提示：如果你的瀏覽器無法正常播放，請(qǐng)嘗試 Chrome 瀏覽器。