支付寶小程序 體驗

1. 避免使用 :active 偽類來實現(xiàn)點擊態(tài)

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

得分條件：不使用 :active 偽類，使用 hover-class 替換 :active

2. 開啟慣性滾動

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

得分條件：css 中帶有 overflow: scroll 的元素，在 iOS 下需要設置 -webkit-overflow-scrolling: touch 樣式

3. 保持圖片大小比例

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

得分條件：顯示的高/寬與原圖的高/寬不超過 15%

4. 可點擊元素響應區(qū)域

應該合理地設置好可點擊元素的響應區(qū)域大小，如果過小會導致用戶很難點中，體驗很差。

得分條件：可點擊元素的寬高都不小于 20px

5. 無效頁面

加載一個沒有內(nèi)容的頁面，沒有實際業(yè)務意義，而且還影響用戶體驗，建議移除。

得分條件：小程序中沒有無效頁面

6. 首頁彈屏

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

得分條件：首頁彈屏使用次數(shù)不超過 1 次

7. iPhone X 兼容

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

得分條件：position: fixed 的可交互組件渲染在安全區(qū)域內(nèi)

8. 導航組件顏色搭配

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

得分條件：顏色明度達到一定的區(qū)間時，相同明度不同色相清晰度差異較大，且飽和度也影響肉眼識別感知，因此針對導航欄的背景色約定的得分條件如下：

• 如果明度小于 95，可得分；
• 如果明度大于等于 95：
  • 色相在 0~55 之間，飽和度小于 20，則不得分；
  • 色相在 50~100 之間，飽和度小于 60，則不得分；
  • 色相在 100~190 之間，飽和度小于 40，則不得分；
  • 色相在 190~360 之間，飽和度小于 15，則不得分；

9. 合理的顏色搭配和字體樣式

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

得分條件：字體大小不低于 20px，文字顏色和背景顏色的對比度不小于 1.4