支付寶小程序 體驗(yàn)評(píng)測(cè)規(guī)范

1. :active 偽類來實(shí)現(xiàn)點(diǎn)擊態(tài)檢測(cè)

使用 css :active 偽類來實(shí)現(xiàn)點(diǎn)擊態(tài)，很容易觸發(fā)，并且滾動(dòng)或滑動(dòng)時(shí)點(diǎn)擊態(tài)不會(huì)消失，體驗(yàn)較差。建議使用小程序內(nèi)置組件的 hover-* 屬性來實(shí)現(xiàn)。

2. 開啟慣性滾動(dòng)檢測(cè)

慣性滾動(dòng)會(huì)使?jié)L動(dòng)比較順暢，在安卓下默認(rèn)有慣性滾動(dòng)，而在 iOS 下需要額外設(shè)置 -webkit-overflow-scrolling: touch 的樣式。

3. 保持圖片大小比例檢測(cè)

如果圖片未按原圖寬高比例顯示，可能會(huì)導(dǎo)致圖片拉伸變形，不美觀，甚至造成用戶識(shí)別困難。建議根據(jù)實(shí)際情況設(shè)置 image 組件的 mode 屬性，以保持原圖寬高比。

4. 可點(diǎn)擊元素的響應(yīng)區(qū)域檢測(cè)

應(yīng)該合理地設(shè)置好可點(diǎn)擊元素的響應(yīng)區(qū)域大小，如果過小會(huì)導(dǎo)致用戶很難點(diǎn)中，體驗(yàn)很差。

5. 無效頁面檢測(cè)

加載一個(gè)沒有內(nèi)容的頁面，沒有實(shí)際業(yè)務(wù)意義，而且會(huì)影響用戶體驗(yàn)，建議移除。

6. 彈屏使用頻次檢測(cè)

一般情況下，彈屏都是模態(tài)的，模態(tài)彈框會(huì)打斷用戶的當(dāng)前操作流程，強(qiáng)制用戶交互，如果首頁中多次使用，體驗(yàn)較差，建議盡量將彈屏融入到業(yè)務(wù)中，讓用戶對(duì)小程序有一定的了解之后，再給到用戶。

7. iPhone X 兼容性檢測(cè)

對(duì)于 position: fixed 的可交互組件，如果渲染在 iPhone X 的安全區(qū)域外，容易誤觸 Home Indicator，應(yīng)當(dāng)把可交互的部分都渲染到安全區(qū)域內(nèi)。

8. 導(dǎo)航組件樣式檢測(cè)

導(dǎo)航組件只有白色背景才可使用黑色的標(biāo)題和按鈕，彩色背景要使用透明樣式（文案和按鈕為白色）。此外，不可使用顏色過淺的彩色背景，以保證導(dǎo)航內(nèi)容清晰可見。

9. 合理的顏色搭配和字體樣式檢測(cè)

文字顏色與背景色需要搭配得當(dāng)，適宜的顏色對(duì)比度和字體樣式可以讓用戶更好地閱讀，提升小程序的用戶體驗(yàn)。