小程序已在我們的生活場(chǎng)景中不斷應(yīng)用，在繼微信小程序正式推出后，國內(nèi)互聯(lián)網(wǎng)巨頭都陸續(xù)推出了自家的小程序平臺(tái)，如：支付寶小程序、百度小程序、抖音小程序、頭條小程序等；當(dāng)然每個(gè)平臺(tái)的小程序都有屬于自己的設(shè)計(jì)規(guī)范，今天我們來看看支付寶小程序的設(shè)計(jì)規(guī)范。

如需要學(xué)習(xí)微信小程序設(shè)計(jì)規(guī)范，請(qǐng)戳藍(lán)色鏈接查看

《微信小程序設(shè)計(jì)規(guī)范（附PSD+sketch源文件）》

一、圖標(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)來進(jìn)行設(shè)計(jì)。

2、系統(tǒng)圖標(biāo)設(shè)計(jì)原則：

圓角：廣泛使用圓角，避免突兀和鋸齒感。以放大 36x36px 尺寸的圖標(biāo)為例，線條結(jié)構(gòu) 3px，外圓角弧度為 4px。

3、狀態(tài)圖標(biāo)：主要用于結(jié)果頁的狀態(tài)顯示。

二、顏色

1、字體顏色

2、背景色

3、分割線顏色

三、按鈕?Button

用戶在和你的應(yīng)用交互的過程中，經(jīng)常需要輸入、編輯、刪除某些信息。多樣化且有針對(duì)性的輸入組件可以幫助用戶快速明確的完成任務(wù)，提升產(chǎn)品的用戶體驗(yàn)。

按鈕用于開始一個(gè)即時(shí)操作，提交表單中的一組輸入數(shù)據(jù)。

1、定義 & 原則：

按鈕作為頁面中的主要行動(dòng)點(diǎn)，引導(dǎo)用戶進(jìn)行相應(yīng)的主要操作。行動(dòng)按鈕應(yīng)該醒目突出，有吸引用戶點(diǎn)擊的沖動(dòng)，并且在用戶進(jìn)行相應(yīng)的點(diǎn)擊操作后有相應(yīng)的反饋。

主按鈕：一個(gè)頁面中只能出現(xiàn)一個(gè)主按鈕，表示當(dāng)前最主要的用戶轉(zhuǎn)化點(diǎn)。

次按鈕：一個(gè)頁面中可以有多個(gè)次按鈕，作為當(dāng)前場(chǎng)景的補(bǔ)充操作。

輔助按鈕：位于列表右側(cè)的操作按鈕，通過按鈕的形式更強(qiáng)烈的引導(dǎo)用戶點(diǎn)擊列表。

2、視覺樣式

大按鈕

大按鈕出現(xiàn)主要目的為鼓勵(lì)用戶進(jìn)行操作行為的按鈕。按鈕文字需上下左右居中。

大按鈕高度固定為 94px(47pt)，圓角為10px(5pt)。

注意頁面主按鈕在一個(gè)頁面內(nèi)只能出現(xiàn)一次。

小按鈕

小按鈕用于頁面內(nèi)某項(xiàng)內(nèi)容或是選項(xiàng)的操作/選擇， 同時(shí)可以被重復(fù)使用。

按鈕文字需上下左右居中。

小按鈕高度固定為 60px(30pt)，最小寬度為 112px(56pt)，邊框粗為 2px(1pt)，圓角為 6px(3pt)。

按鈕內(nèi)文字與邊框間距為 30px(15pt)，文字不夠放則左右延伸寬度。

3、案例示意

按鈕一般需要和頁面內(nèi)容一起呈現(xiàn)才有意義。

主按鈕

輔助按鈕

四、多選框?Checkbox?

多選控件讓用戶可以同時(shí)選擇多個(gè)元素。

定義 & 原則

多選控件一般出現(xiàn)在需要編輯的列表中，當(dāng)用戶選擇完成以后統(tǒng)一對(duì)選中的元素進(jìn)行編輯處理。多選分為選中和未選中兩種狀態(tài)。

五、文本輸入框?InputItem?

最簡(jiǎn)單的輸入組件就是文本輸入框，它允許用戶通過鍵盤、選擇器等組件錄入單行的數(shù)據(jù)。

1、定義 & 原則

單行輸入框都有信息輸入長度的限制，通常最多 15 個(gè)字符。你還可以有針對(duì)性的限制輸入框可輸入的信息類型，如，中文、英文、數(shù)字、郵箱地址等；

激活不同類型的輸入框的同時(shí)，需要彈出相應(yīng)類型的鍵盤：文字鍵盤、英文鍵盤、數(shù)字鍵盤、郵箱鍵盤等；這樣有利于提高用戶的輸入效率。

輸入框一般有“標(biāo)簽區(qū)”、“輸入?yún)^(qū)”、“輔助操作區(qū)”三個(gè)部分組成?！皹?biāo)簽區(qū)”有字?jǐn)?shù)限制，最多 4 個(gè)字；“輸入?yún)^(qū)”一般會(huì)設(shè)置“暗提示”；“輔助操作區(qū)”可以放輔助輸入的操作按鈕，或者更詳細(xì)的輸入說明按鈕。

如果輸入的數(shù)據(jù)內(nèi)容為敏感信息，應(yīng)該進(jìn)行脫敏處理，如：密碼、手機(jī)號(hào)等。

2、視覺樣式

標(biāo)簽、圖標(biāo)、輔助輸入按鈕不同的部件組成了多種樣式的輸入框。

3、案例

根據(jù)輸入數(shù)據(jù)類型喚起相應(yīng)的系統(tǒng)鍵盤，iOS、Android 系統(tǒng)都為不同類型的信息輸入準(zhǔn)備了相應(yīng)的鍵盤，用戶的輸入效率會(huì)提升很多，相應(yīng)的用戶體驗(yàn)也就提升了。

六、選擇器?Picker?

選擇器提供一組預(yù)設(shè)的數(shù)據(jù)，讓用戶通過選擇完成輸入或者設(shè)置。

定義 & 原則

通過點(diǎn)擊頁面中的某個(gè)輸入框會(huì)觸發(fā)選擇器，選擇器出現(xiàn)的時(shí)候應(yīng)該在頁面上蓋上一層半透明的蒙層，讓用戶聚焦到選擇器的選擇上。

選擇器中的數(shù)據(jù)最好是有一定邏輯關(guān)系的，符合用戶預(yù)期的。因?yàn)檫x擇中可能一下子不能展示全部數(shù)據(jù)，需要用戶滑動(dòng)選擇，符合用戶預(yù)期的邏輯順序能幫助用戶快速找到想要的選型。

選擇器可以設(shè)置多列數(shù)據(jù)的組合選擇，一列、兩列、三列，最多四列，但是最長列的文字不能超過寬度限制。

日期選擇器

時(shí)間選擇器可以讓用戶快速選擇某個(gè)時(shí)間，從年、月、日到小時(shí)、分鐘、秒，都可以設(shè)置。

七、單選框?Radio?

單選控件讓用戶選擇一個(gè)元素

定義 & 原則

單選控件一般出現(xiàn)在列表的右側(cè)，出現(xiàn)一個(gè)對(duì)勾表示當(dāng)前選中的選項(xiàng)。

八、搜索欄?Searchbar?

搜索欄讓用戶可以在大量的信息中快速找到自己想要的內(nèi)容。

定義 & 原則

搜索欄一般位于 NavBar 下方，點(diǎn)擊激活的時(shí)候喚起系統(tǒng)鍵盤，通過『取消』按鈕退出激活狀態(tài)。

如果默認(rèn)展示輸入框，可以提供暗提示文案，幫助用戶輸入，如：關(guān)鍵詞、搜索美食。

在搜索欄下方，可提供有用的標(biāo)簽文案，幫助用戶通過點(diǎn)擊直接完成輸入，如：最近搜索的內(nèi)容。

九、滑動(dòng)開關(guān)?Switch?

開關(guān)是將兩種狀態(tài)可視化表達(dá)的一種控件。

定義 & 原則

開關(guān)控件只能在列表中使用，所以開關(guān)只能在列表中出現(xiàn)；用來表示兩個(gè)互斥的選項(xiàng)。

十、小程序標(biāo)題欄

小程序會(huì)有一個(gè)通用的頂部標(biāo)題欄，對(duì)于平臺(tái)內(nèi)的小程序有一定的要求和限制

用法

導(dǎo)航區(qū)：通常只有一個(gè)操作，即返回上一級(jí)界面（二級(jí)頁面會(huì)出現(xiàn)）

標(biāo)題區(qū)：頁面標(biāo)題可以定義，但需控制長度，超出長度則會(huì)省略。缺省則默認(rèn)顯示小程序/內(nèi)容模塊的名稱（可以不顯示）

操作區(qū)：關(guān)閉小程序會(huì)將小程序默認(rèn)進(jìn)入后臺(tái)最小化；更多會(huì)引出針對(duì)當(dāng)前小程序的操作（不允許自定義功能）

背景自定義：小程序?qū)Ш皆试S自定義背景顏色

更多菜單：小程序更多提供了推薦、收藏、添加到桌面等功能，幫助用戶分享和保存路徑（不允許自定義）；

十一、底部標(biāo)簽欄 Tab bar

應(yīng)用屏幕底部會(huì)顯示一個(gè)標(biāo)簽欄，并提供在應(yīng)用的不同部分之間快速切換的功能。標(biāo)簽欄在所有屏幕方向上保持相同的高度，并在顯示鍵盤時(shí)隱藏。

類型

用法

選項(xiàng)數(shù)量：

選項(xiàng)卡欄可以包含任意數(shù)量的選項(xiàng)卡，但可見選項(xiàng)卡的數(shù)量根據(jù)設(shè)備大小和方向而有所不同。

當(dāng)前提供了常用的3~5個(gè)選項(xiàng)。

如果某些選項(xiàng)卡由于水平空間有限而無法顯示，則最終的可見選項(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)頁面內(nèi)容描述不可用的原因。

選項(xiàng)卡提示：

您可以在選項(xiàng)卡上顯示提示 - 包含白色文本和數(shù)字或感嘆號(hào)的紅色橢圓，以指示新信息與該視圖或模式相關(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ì)師進(jìn)行快速設(shè)計(jì)：

Sketch組件庫：小程序通用.sketch

Photoshop組件庫：小程序組件psd.zip

嚴(yán)哥已為大家打包準(zhǔn)備好了GUI源文件包

請(qǐng)點(diǎn)擊下載“下載組件”帶走

文章來自：支付寶開放平臺(tái)

?(https://opendocs.alipay.com/mini/design）