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