小程序已在我們的生活場(chǎng)景中不斷應(yīng)用，在繼微信小程序正式推出后，國(guó)內(nèi)互聯(lián)網(wǎng)巨頭都陸續(xù)推出了自家的小程序平臺(tái)，如支付寶小程序、百度小程序、抖音小程序、頭條小程序等；當(dāng)然每個(gè)平臺(tái)的小程序都有屬于自己的設(shè)計(jì)規(guī)范，今天我們來(lái)看看支付寶小程序的設(shè)計(jì)規(guī)范。一、圖標(biāo)圖標(biāo)是圖形界面中的重要組成部分，具有高度濃縮并快速傳達(dá)、便于記憶的特性。為讓用戶能更容易辨識(shí)圖標(biāo)信息且達(dá)成圖標(biāo)設(shè)計(jì)的一致性，支付寶提供統(tǒng)一風(fēng)格的icon設(shè)計(jì)原則。原則1、設(shè)計(jì)原則需形狀鮮明，將信息化繁為簡(jiǎn)；采用幾何形狀、設(shè)計(jì)對(duì)稱、且一致的圖標(biāo)來(lái)進(jìn)行設(shè)計(jì)。2、系統(tǒng)圖標(biāo)設(shè)計(jì)原則輔助按鈕多選分為選中和未選中兩種狀態(tài)。五、文本輸入框最簡(jiǎn)單的輸入組件就是文本輸入框，它允許用戶通過(guò)鍵盤、選擇器等組件錄入單行的數(shù)據(jù)。單行輸入框都有信息輸入長(zhǎng)度的限制，通常最多15個(gè)字符。你還可以有針對(duì)性的限制輸入框可輸入的信息類型，如，中文、英文、數(shù)字、激活不同類型的輸入框的同時(shí)，需要彈出相應(yīng)類型的鍵盤文字鍵盤、英文鍵盤、數(shù)字鍵盤、郵箱鍵盤等；這樣有利于提高用戶的輸入效率。通過(guò)點(diǎn)擊頁(yè)面中的某個(gè)輸入框會(huì)觸發(fā)選擇器，選擇器出現(xiàn)的時(shí)候應(yīng)該在頁(yè)面上蓋上一層半透明的蒙層，讓用戶聚焦到選擇器的選擇上。選擇器中的數(shù)據(jù)最好是有一定邏輯關(guān)系的，符合用戶預(yù)期的。因?yàn)檫x擇中可能一下子不能展示全部數(shù)據(jù)，需要用戶滑動(dòng)選擇，符合用戶預(yù)期的邏輯順序能幫助用戶快速找到想要的選型。選擇器可以設(shè)置多列數(shù)據(jù)的組合選擇，一列、兩列、三列，最多四列，但是最長(zhǎng)列的文字不能超過(guò)寬度限制。日期選擇器搜索欄一般位于下方，點(diǎn)擊激活的時(shí)候喚起系統(tǒng)鍵盤，通過(guò)取消按鈕退出激活狀態(tài)。如果默認(rèn)展示輸入框，可以提供暗提示文案，幫助用戶輸入，如關(guān)鍵詞、搜索美食。在搜索欄下方，可提供有用的標(biāo)簽文案，幫助用戶通過(guò)點(diǎn)擊直接完成輸入，如最近搜索的內(nèi)容。九、滑動(dòng)開關(guān)開關(guān)是將兩種狀態(tài)可視化表達(dá)的一種控件。定義&原則導(dǎo)航區(qū)通常只有一個(gè)操作，即返回上一級(jí)界面（二級(jí)頁(yè)面會(huì)出現(xiàn)）標(biāo)題區(qū)頁(yè)面標(biāo)題可以定義，但需控制長(zhǎng)度，超出長(zhǎng)度則會(huì)省略。缺省則默認(rèn)顯示小程序/內(nèi)容模塊的名稱（可以不顯示）操作區(qū)關(guān)閉小程序會(huì)將小程序默認(rèn)進(jìn)入后臺(tái)最小化；更多會(huì)引出針對(duì)當(dāng)前小程序的操作（不允許自定義功能）選項(xiàng)數(shù)量選項(xiàng)卡欄可以包含任意數(shù)量的選項(xiàng)卡，但可見(jiàn)選項(xiàng)卡的數(shù)量根據(jù)設(shè)備大小和方向而有所不同。當(dāng)前提供了常用的3~5個(gè)選項(xiàng)。如果某些選項(xiàng)卡由于水平空間有限而無(wú)法顯示，則最終的可見(jiàn)選項(xiàng)卡將成為“更多”選項(xiàng)卡，這會(huì)在單獨(dú)的屏幕上顯示列表中的其他選項(xiàng)卡。當(dāng)其功能不可用時(shí)，不要?jiǎng)h除或禁用選項(xiàng)卡如果選項(xiàng)卡在某些情況下可用，但在其他情況下不可用，則應(yīng)用程序的界面變得不穩(wěn)定和不可預(yù)測(cè)。確保始終啟用所有選項(xiàng)卡，并解釋在選項(xiàng)卡對(duì)應(yīng)頁(yè)面內(nèi)容描述不可用的原因。選項(xiàng)卡提示您可以在選項(xiàng)卡上顯示提示-包含白色文本和數(shù)字或感嘆號(hào)的紅色橢圓，以指示新信息與該視圖或模式相關(guān)聯(lián)。