小程序已在我們的生活場景中不斷應用，在繼微信小程序正式推出後，國內互聯網巨頭都陸續推出了自家的小程序平臺，如：支付寶小程序、百度小程序、抖音小程序、頭條小程序等；當然每個平臺的小程序都有屬於自己的設計規範，今天我們來看看支付寶小程序的設計規範。
如需要學習微信小程序設計規範，請戳藍色鏈接查看
《微信小程序設計規範（附PSD+sketch源文件）》
一、圖標
圖標是圖形界面中的重要組成部分，具有高度濃縮並快速傳達、便於記憶的特性。爲讓用戶能更容易辨識圖標信息且達成圖標設計的一致性，支付寶提供統一風格的 icon設計原則。
原則
1、設計原則：需形狀鮮明，將信息化繁爲簡；採用幾何形狀、設計對稱、且一致的圖標來進行設計。
2、系統圖標設計原則：
圓角：廣泛使用圓角，避免突兀和鋸齒感。以放大 36x36px 尺寸的圖標爲例，線條結構 3px，外圓角弧度爲 4px。
3、狀態圖標：主要用於結果頁的狀態顯示。
二、顏色
1、字體顏色
2、背景色
3、分割線顏色
三、按鈕 Button
用戶在和你的應用交互的過程中，經常需要輸入、編輯、刪除某些信息。多樣化且有針對性的輸入組件可以幫助用戶快速明確的完成任務，提升產品的用戶體驗。
按鈕用於開始一個即時操作，提交表單中的一組輸入數據。
1、定義 & 原則：
按鈕作爲頁面中的主要行動點，引導用戶進行相應的主要操作。行動按鈕應該醒目突出，有吸引用戶點擊的衝動，並且在用戶進行相應的點擊操作後有相應的反饋。
主按鈕：一個頁面中只能出現一個主按鈕，表示當前最主要的用戶轉化點。
次按鈕：一個頁面中可以有多個次按鈕，作爲當前場景的補充操作。
輔助按鈕：位於列表右側的操作按鈕，通過按鈕的形式更強烈的引導用戶點擊列表。
2、視覺樣式
大按鈕
大按鈕出現主要目的爲鼓勵用戶進行操作行爲的按鈕。按鈕文字需上下左右居中。
大按鈕高度固定爲 94px(47pt)，圓角爲10px(5pt)。
注意頁面主按鈕在一個頁面內只能出現一次。
小按鈕
小按鈕用於頁面內某項內容或是選項的操作/選擇， 同時可以被重複使用。
按鈕文字需上下左右居中。
小按鈕高度固定爲 60px(30pt)，最小寬度爲 112px(56pt)，邊框粗爲 2px(1pt)，圓角爲 6px(3pt)。
按鈕內文字與邊框間距爲 30px(15pt)，文字不夠放則左右延伸寬度。
3、案例示意
按鈕一般需要和頁面內容一起呈現纔有意義。
主按鈕
輔助按鈕
四、多選框 Checkbox
多選控件讓用戶可以同時選擇多個元素。
定義 & 原則
多選控件一般出現在需要編輯的列表中，當用戶選擇完成以後統一對選中的元素進行編輯處理。多選分爲選中和未選中兩種狀態。
五、文本輸入框 InputItem
最簡單的輸入組件就是文本輸入框，它允許用戶通過鍵盤、選擇器等組件錄入單行的數據。
1、定義 & 原則
單行輸入框都有信息輸入長度的限制，通常最多 15 個字符。你還可以有針對性的限制輸入框可輸入的信息類型，如，中文、英文、數字、郵箱地址等；
激活不同類型的輸入框的同時，需要彈出相應類型的鍵盤：文字鍵盤、英文鍵盤、數字鍵盤、郵箱鍵盤等；這樣有利於提高用戶的輸入效率。
輸入框一般有“標籤區”、“輸入區”、“輔助操作區”三個部分組成。“標籤區”有字數限制，最多 4 個字；“輸入區”一般會設置“暗提示”；“輔助操作區”可以放輔助輸入的操作按鈕，或者更詳細的輸入說明按鈕。
如果輸入的數據內容爲敏感信息，應該進行脫敏處理，如：密碼、手機號等。
2、視覺樣式
標籤、圖標、輔助輸入按鈕不同的部件組成了多種樣式的輸入框。
3、案例
根據輸入數據類型喚起相應的系統鍵盤，iOS、Android 系統都爲不同類型的信息輸入準備了相應的鍵盤，用戶的輸入效率會提升很多，相應的用戶體驗也就提升了。
六、選擇器 Picker
選擇器提供一組預設的數據，讓用戶通過選擇完成輸入或者設置。
定義 & 原則
通過點擊頁面中的某個輸入框會觸發選擇器，選擇器出現的時候應該在頁面上蓋上一層半透明的蒙層，讓用戶聚焦到選擇器的選擇上。
選擇器中的數據最好是有一定邏輯關係的，符合用戶預期的。因爲選擇中可能一下子不能展示全部數據，需要用戶滑動選擇，符合用戶預期的邏輯順序能幫助用戶快速找到想要的選型。
選擇器可以設置多列數據的組合選擇，一列、兩列、三列，最多四列，但是最長列的文字不能超過寬度限制。
日期選擇器
時間選擇器可以讓用戶快速選擇某個時間，從年、月、日到小時、分鐘、秒，都可以設置。
七、單選框 Radio
單選控件讓用戶選擇一個元素
定義 & 原則
單選控件一般出現在列表的右側，出現一個對勾表示當前選中的選項。
八、搜索欄 Searchbar
搜索欄讓用戶可以在大量的信息中快速找到自己想要的內容。
定義 & 原則
搜索欄一般位於 NavBar 下方，點擊激活的時候喚起系統鍵盤，通過『取消』按鈕退出激活狀態。
如果默認展示輸入框，可以提供暗提示文案，幫助用戶輸入，如：關鍵詞、搜索美食。
在搜索欄下方，可提供有用的標籤文案，幫助用戶通過點擊直接完成輸入，如：最近搜索的內容。
九、滑動開關 Switch
開關是將兩種狀態可視化表達的一種控件。
定義 & 原則
開關控件只能在列表中使用，所以開關只能在列表中出現；用來表示兩個互斥的選項。
十、小程序標題欄
小程序會有一個通用的頂部標題欄，對於平臺內的小程序有一定的要求和限制
用法
導航區：通常只有一個操作，即返回上一級界面（二級頁面會出現）
標題區：頁面標題可以定義，但需控制長度，超出長度則會省略。缺省則默認顯示小程序/內容模塊的名稱（可以不顯示）
操作區：關閉小程序會將小程序默認進入後臺最小化；更多會引出針對當前小程序的操作（不允許自定義功能）
背景自定義：小程序導航允許自定義背景顏色
更多菜單：小程序更多提供了推薦、收藏、添加到桌面等功能，幫助用戶分享和保存路徑（不允許自定義）；
十一、底部標籤欄 Tab bar
應用屏幕底部會顯示一個標籤欄，並提供在應用的不同部分之間快速切換的功能。標籤欄在所有屏幕方向上保持相同的高度，並在顯示鍵盤時隱藏。
類型
用法
選項數量：
選項卡欄可以包含任意數量的選項卡，但可見選項卡的數量根據設備大小和方向而有所不同。
當前提供了常用的3~5個選項。
如果某些選項卡由於水平空間有限而無法顯示，則最終的可見選項卡將成爲“更多”選項卡，這會在單獨的屏幕上顯示列表中的其他選項卡。
當其功能不可用時，不要刪除或禁用選項卡：
如果選項卡在某些情況下可用，但在其他情況下不可用，則應用程序的界面變得不穩定和不可預測。確保始終啓用所有選項卡，並解釋在選項卡對應頁面內容描述不可用的原因。
選項卡提示：
您可以在選項卡上顯示提示 - 包含白色文本和數字或感嘆號的紅色橢圓，以指示新信息與該視圖或模式相關聯。
十二、數字金額字體
支付寶小程序所有數字金額字體均使用 AlipayNumber-Regular字體，如圖：
AlipayNumber-Regular字體下載地址（複製鏈接到瀏覽器打開即可下載）：https://gw.alipayobjects.com/os/skylark-tools/public/files/35a48f033ead33f9f76c2619c166e90d.zip
十二、小程序GUI源文件下載
官方提供了一套組件庫，幫助設計師進行快速設計：
Sketch組件庫：小程序通用.sketch
Photoshop組件庫：小程序組件psd.zip
嚴哥已爲大家打包準備好了GUI源文件包
請點擊下載“下載組件”帶走
文章來自：支付寶開放平臺
(https://opendocs.alipay.com/mini/design）