字節(jié)跳動(dòng)小程序 組件

布局組件

底部導(dǎo)航欄

• 概述大部分應(yīng)用底部會(huì)有一個(gè)篤定的導(dǎo)航欄，方便用戶在不同功能頁(yè)面進(jìn)行切換跳轉(zhuǎn)。導(dǎo)航欄應(yīng)該在所有頁(yè)面保證一致高度，且在所有一級(jí)界面顯示給與用戶明確導(dǎo)航指引。
• 示例

• 用法導(dǎo)航欄可以包含2-5個(gè)選項(xiàng)。每個(gè)導(dǎo)航點(diǎn)擊后進(jìn)行頁(yè)面切換，如引某些原因無(wú)對(duì)應(yīng)內(nèi)容，應(yīng)引導(dǎo)用戶進(jìn)入異常界面。引導(dǎo)：如果有新功能可以在icon后進(jìn)行標(biāo)紅提示。

上傳附件

• 概述開發(fā)者可以控制用戶上傳附件的來源or數(shù)量.，上傳頁(yè)面會(huì)復(fù)用線上公用控件，可以避免重復(fù)開發(fā)。
• 示例

表單

按鈕

• 概述主要用于引導(dǎo)用戶進(jìn)行操作、入口引導(dǎo)等
• 示例常規(guī)按鈕：

? 狀態(tài)按鈕：

• 用法按鈕支持加載狀態(tài)，同時(shí)對(duì)于狀態(tài)按鈕支持點(diǎn)擊切換前后狀態(tài)，如：關(guān)注-已關(guān)注

浮層操作

操作面板actionsheets

• 概述響應(yīng)用戶當(dāng)前操作的呼出控件，Android和iOS樣式不同均保持原生的樣式。
• 示例

選擇器

• 概述選擇器支持1-4項(xiàng)內(nèi)容的滾動(dòng)列表，可以同時(shí)查看多個(gè)數(shù)值。通常用戶點(diǎn)擊表單等按鈕，選擇器會(huì)從屏幕底部呼出。
• 示例

• 用法如多項(xiàng)選擇器：從某月某日到某月某日。某年某月某日，某城市某區(qū)域，某項(xiàng)————UI補(bǔ)充圖的樣式

音頻/背景音樂播放

• 概述小程序&小游戲支持后臺(tái)播放音樂。當(dāng)用戶點(diǎn)擊圖標(biāo)即可快速喚回小程序。
• 示例

• 用法小程序包含音頻播放，用戶在右上角關(guān)閉（最小化）后，用戶可在其他頁(yè)面（除視頻播放等特定頁(yè)面）繼續(xù)聽音頻，也可以隨時(shí)喚回小程序。

狀態(tài)反饋&操作請(qǐng)求

彈窗&提示

• 概述對(duì)當(dāng)前用戶當(dāng)前行為進(jìn)行請(qǐng)求詢問或者是警示提醒是，可以使用彈窗控件。彈窗控件會(huì)打斷用戶當(dāng)前操作，建議盡量減少此類操作
• 示例

Toast

• 概述Toast與彈窗進(jìn)行區(qū)分，適用于短暫快速的提示，較輕的對(duì)用戶當(dāng)前行為進(jìn)行反饋&告知。注：重要警示性操作建議使用彈窗而不用Toast
• 示例

• 用法Toast主要有三種形式：?jiǎn)涡形淖郑涸诒ＷC左右凈量間距20px基礎(chǔ)上；文字字?jǐn)?shù)少的情況整體居中。兩行文字：在保證左右凈量間距32px基礎(chǔ)上若在規(guī)定寬度內(nèi)字?jǐn)?shù)無(wú)法全展示，考慮折行圖+文字：圖標(biāo)與文字間距為4px，文字+圖標(biāo)整體居中對(duì)齊

加載&緩沖

• 概述小程序只有豎屏加載，加載時(shí)只展示小程序標(biāo)題。加載時(shí)外露小icon。小游戲有橫豎屏兩種加載方式，加載時(shí)間超過3s后，須顯示加載進(jìn)度百分比。
• 示例

常用頁(yè)面

異常狀態(tài)

• 概述難免會(huì)有異常狀態(tài)，小程序提供系統(tǒng)界面提示用戶對(duì)應(yīng)操作。如提示用戶更新，享受新版本能力；小程序暫停使用時(shí)的提示。
• 示例

公用界面組件

• 概述：小程序&小游戲在調(diào)用頭條APP系統(tǒng)公用頁(yè)面時(shí)，會(huì)以新開頁(yè)面進(jìn)出動(dòng)畫應(yīng)該是保持左右

地址&地圖

• 概述如果開發(fā)者需要使用地址，地圖等功能。可以復(fù)用頭條現(xiàn)有公用頁(yè)面。
• 示例

小游戲輸入組件

• 概述小游戲不支持頁(yè)面實(shí)時(shí)顯示輸入結(jié)果，需要在鍵盤上增加實(shí)時(shí)輸入框，可以多行增加高度顯示；
• 示例

• 用法點(diǎn)擊鍵盤&輸入框外的區(qū)域鍵盤收起，收起后書寫框輸入內(nèi)容在當(dāng)前頁(yè)面保留；點(diǎn)完成會(huì)把輸入內(nèi)容同步到頁(yè)面上，書寫框不保留輸入內(nèi)容；