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

布局組件

底部導航欄

• 概述大部分應用底部會有一個篤定的導航欄，方便用戶在不同功能頁面進行切換跳轉。導航欄應該在所有頁面保證一致高度，且在所有一級界面顯示給與用戶明確導航指引。
• 示例

• 用法導航欄可以包含2-5個選項。每個導航點擊后進行頁面切換，如引某些原因無對應內(nèi)容，應引導用戶進入異常界面。引導：如果有新功能可以在icon后進行標紅提示。

上傳附件

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

表單

按鈕

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

? 狀態(tài)按鈕：

• 用法按鈕支持加載狀態(tài)，同時對于狀態(tài)按鈕支持點擊切換前后狀態(tài)，如：關注-已關注

浮層操作

操作面板actionsheets

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

選擇器

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

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

音頻/背景音樂播放

• 概述小程序&小游戲支持后臺播放音樂。當用戶點擊圖標即可快速喚回小程序。
• 示例

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

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

彈窗&提示

• 概述對當前用戶當前行為進行請求詢問或者是警示提醒是，可以使用彈窗控件。彈窗控件會打斷用戶當前操作，建議盡量減少此類操作
• 示例

Toast

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

• 用法Toast主要有三種形式：單行文字：在保證左右凈量間距20px基礎上；文字字數(shù)少的情況整體居中。兩行文字：在保證左右凈量間距32px基礎上若在規(guī)定寬度內(nèi)字數(shù)無法全展示，考慮折行圖+文字：圖標與文字間距為4px，文字+圖標整體居中對齊

加載&緩沖

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

常用頁面

異常狀態(tài)

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

公用界面組件

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

地址&地圖

• 概述如果開發(fā)者需要使用地址，地圖等功能?？梢詮陀妙^條現(xiàn)有公用頁面。
• 示例

小游戲輸入組件

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

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