本文由作者?孟冬初寒月?于社區發布

本文較長，建議收藏

微信小程序是一種不用下載就能使用的微應用，也是一項應用創新發明，經過三年的發展，已經構造了新的微信小程序開發環境和開發者生態。小程序也是這么多年來中國互聯網行業里一個真正能夠影響到普通程序員的創新成果。

那么，掌握微信小程序設計技能和設計規范也是產品經理的技能樹之一。

微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

小程序提供了一個簡單、高效的應用開發框架和豐富的組件及API，幫助開發者在微信中開發具有原生 APP 體驗的服務。

基于微信小程序輕快的特點，小程序擬定了界面設計指南和建議。設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內，建立友好、高效、一致的用戶體驗，同時最大程度適應和支持不同需求，實現用戶與小程序服務方的共贏。

1

小程序概述

一個小程序頁面組成，如下：

為了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

1、小程序的工作原理

首先，我們來簡單了解下小程序的運行環境。小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層采用JsCore線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會采用Native來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型下圖所示。

2、小程序的本質

所以，小程序的編碼方式實際上是使用前端的語言進行編寫的。從理解的角度，小程序可以認為是運行在微信的瀏覽器容器中，遵從了一套從設計到組件的WeUI規范，的Web程序。

我們稱微信客戶端給小程序所提供的環境為宿主環境。小程序借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能。為了讓開發者可以很方便的調起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發者去使用。需要注意的是：多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題。

3、WeUI頁面元素所屬層級、層級順序及組合規范

WeUI頁面元素所屬層級、層級順序及組合規范（低到高）：Content、Navigation、Mask、Popout四層。

預覽地址：https://weui.io/#layers

1）Content

內容層：承載頁面主要內容。

2）Navigation

導航層：位于內容層之上，在用戶滑動內容層時可保持位置不動，通常用于承載導航欄等需要固定在頁面的元素。

3）Mask

蒙層：配合Popout層使用，用于鎖定內容層和導航層操作，不單獨使用。

4）Popout

彈出層，作為內容層和導航層的補充，用于承載彈窗通知、操作菜單、菜單、成功或加載中等狀態的Toast，表單報錯提示等彈出內容。

4、小程序運行機制

1）小程序啟動

小程序啟動會有兩種情況，一種是「冷啟動」，一種是「熱啟動」。

熱啟動：假如用戶已經打開過某小程序，然后在一定時間內再次打開該小程序，此時無需重新啟動，只需將后臺的小程序切換到前臺，這個過程就是熱啟動；

冷啟動：用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動，即冷啟動。

小程序沒有重啟的概念。

2）前臺/后臺狀態

當用戶點擊右上角膠囊按鈕關閉小程序，或者按了設備 Home 鍵離開微信時，小程序并沒有直接銷毀，而是進入了后臺狀態；

當用戶再次進入微信或再次打開小程序，小程序又會從后臺進入前臺。

3）小程序銷毀

需要注意的是：只有當小程序進入后臺一定時間，或者系統資源占用過高，才會被真正的銷毀。

• 當小程序進入后臺，客戶端會維持一段時間的運行狀態，超過一定時間后（目前是5分鐘）小程序會被微信主動銷毀。

• 當小程序占用系統資源過高，可能會被系統銷毀或被微信客戶端主動回收。

在 iOS 上，當微信客戶端在一定時間間隔內（目前是 5 秒）連續收到兩次及以上系統內存告警時，會主動進行小程序的銷毀，并提示用戶 「該小程序可能導致微信響應變慢被終止」。建議小程序在必要時使用wx.onMemoryWarning 監聽內存告警事件，進行必要的內存清理。

5、小程序更新機制

1）未啟動時更新

開發者在管理后臺發布新版本的小程序之后，如果某個用戶本地有小程序的歷史版本，此時打開的可能還是舊版本。微信客戶端會有若干個時機去檢查本地緩存的小程序有沒有更新版本，如果有則會靜默更新到新版本。

總的來說，開發者在后臺發布新版本之后，無法立刻影響到所有現網用戶，但最差情況下，也在發布之后 24 小時之內下發新版本信息到用戶。用戶下次打開時會先更新最新版本再打開。

2）啟動時更新

小程序每次冷啟動時，都會檢查是否有更新版本，如果發現有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動，即新版本的小程序需要等下一次冷啟動才會應用上。

如果需要馬上應用最新版本，可以使用 wx.getUpdateManager API 進行處理。

6、插件

插件，是可被添加到小程序內直接使用的功能組件。開發者可以像開發小程序一樣開發一個插件，供其他小程序使用。同時，小程序開發者可直接在小程序內使用插件，無需重復開發，為用戶提供更豐富的服務。

7、小程序成員管理

不同項目成員擁有不同的權限，從而保證小程序開發安全有序。

2

開放接口與設備

3

小程序設計規范

1）重點突出案例

每個頁面都應有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下，應盡量避免頁面上出現其它與用戶的決策和操作無關的干擾因素。

2）流程明確案例

為了讓用戶順暢地使用頁面，在用戶進行某一個操作流程時，應避免出現用戶目標流程之外的內容而打斷用戶。

3）異常狀態——表單出錯案例

表單報錯，在表單頂部告知錯誤原因，并標識出錯誤字段提示用戶修改。

4）減少輸入案例

由于手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁面時應盡量減少用戶輸入，利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。

例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。

4

小程序基礎設計

1、小程序菜單深淺配色方案（iOS和Android）

開發者可在滿足可用性的前提下，從微信提供的深淺兩套配色的小程序菜單中選擇合適的方案，以適應小程序頁面設計風格。?

2、小程序菜單

小程序的所有頁面，包括小程序內嵌網頁和插件，微信都會在其右上角放置官方小程序菜單，樣式如圖。

開發者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁面設計風格。官方小程序菜單將放置在界面固定位置，開發者在設計界面時請預留出該區域空間，若需要在此區域附近放置可交互元素，要特別注意交互事件是否會沖突，操作是否容易被使用。

3、品牌標志（Logo）設計

小程序啟動頁是小程序在微信內一定程度上展現品牌特征的頁面之一。本頁面將突出展示小程序品牌特征和加載狀態。啟動頁除品牌標志（Logo）展示外，頁面上的其他所有元素如加載進度指示，均由微信統一提供且不能更改，無需開發者開發。

5

小程序導航與布局設計

1、導航區域與標題區域

開發者可根據自身功能設計需要在頁面內添加自有導航。并保持不同頁面間導航一致，指向清晰，有路可退。受限于手機屏幕尺寸的限制，小程序頁面的導航應盡量簡單。建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。?

2、標簽分頁（Tab）導航

開發者可為小程序頁面添加標簽分頁（Tab）導航。標簽分頁欄可固定在頁面頂部或者底部，便于用戶在不同的分頁間做切換。標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項。一個頁面也不應出現一組以上的標簽分頁欄。

首頁原生底部標簽

其中小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。開發時可自定義圖標樣式、標簽文案以及文案顏色等，具體設置項如圖標尺寸等參考可參考開發文檔和WeUI基礎控件庫。

頂部標簽

頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中，務必注意保持分頁欄標簽的可用性、可視性和可操作性。

3、頁腳（Footer組件）

6

小程序頁面加載設計

加載反饋注意事項

若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。

載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。

不要在同一個頁面同時使用超過1個加載動畫。

結果反饋

除了在用戶等待的過程中需予以及時反饋外，對操作的結果也需要予以明確反饋。根據實際情況，可選擇不同的結果反饋樣式。對于頁面局部的操作，可在操作區域予以直接反饋，對于頁面級操作結果，可使用彈出式提示、模態對話框或結果頁面展示。對于常用控件，微信設計中心將提供控件庫，其中的控件都已提供完整操作反饋。

1、啟動頁加載

小程序啟動頁是小程序在微信內一定程度上展現品牌特征的頁面之一。本頁面將突出展示小程序品牌特征和加載狀態。頁面上的其他所有元素如加載進度指示，均由微信統一提供。

2、頁面下拉刷新加載

在微信小程序內，微信提供標準的頁面下拉刷新加載能力和樣式，開發者無需自行開發。

3、全局加載反饋

1）使用標題欄提示加載小程序頁面內容的過程

開發者可以參考圖中樣式，使用標題欄提示加載小程序頁面內容的過程。例如：

2）模態加載

模態的加載樣式將覆蓋整個頁面的，由于無法明確告知具體加載的位置或內容將可能引起用戶的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態的加載。

3）自定義頁面內容的加載樣式

開發者可在小程序里自定義頁面內容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應該盡可能簡潔，并使用簡單動畫告知用戶加載過程。

4）Loadmore組件

4、局部加載

局部加載反饋即只在觸發加載的頁面局部進行反饋，這樣的反饋機制更加有針對性，頁面跳動小，是微信推薦的反饋方式。例如：

7

小程序頁面Content設計

小程序頁面Content設計，實際上就是依據我們的業務設計，將小程序組件和我們自己設計的組件，按照小程序設計規范與視覺規范有序的組合和排版的過程。

1、小程序組件庫

組件預覽地址：https://weui.io/

2、小程序視覺規范

1）字體大小

微信內字體的使用與所運行的系統字體保持一致，常用字號為20, 18, 17, 16,14 13, 11(pt)，使用場景具體如下：

2）字體顏色

①主要顏色：

#09BB07 #353535 #888888 #576b95 #e64340 RGB(9,187,7) RGB(53,53,53) RGB(136,136,136) RGB(87,107,149) RGB(230,67,64)

②主內容 Black 黑色，次要內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段的說明內容而且屬于主要內容用 Semi 黑。

Light Gray Semi Black #b2b2b2 #888888 #353535 #000000

③藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色 Press 與 Disable 狀態分別降低透明度為20%與10%。

Naormal Press（20%） Disabled（10%） #576b95 #09BB07 #e64340

3）列表

4）表單

5）按鈕

6）圖標

尺寸：100*100 pX

一般用于結果頁面狀態提示，根據結果的情況選擇對應的 icon。

7）小程序titlebar按鈕

8

反饋設計-Popout

1、操作反饋

1）圖標型彈出提示

圖標型彈出提示適用于輕量級的成功提示，1.5秒后自動消失，并不打斷流程，對用戶影響較小，適用于不需要強調的操作提醒，例如成功提示。特別注意該形式不適用于錯誤提示，因為錯誤提示需明確告知用戶，因而不適合使用一閃而過的彈出式提示。

2)文字型彈出提示

文字型彈出提示適用于需要輕量化地用文字解釋當前狀態或提醒不嚴重的錯誤。1.5秒后自動消失，不打斷流程，對用戶影響較小。

3）模態對話框

對于需要用戶明確知曉的操作結果狀態可通過模態對話框來提示，并可附帶下一步操作指引。

4）結果頁（非Popout）

對于操作結果已經是當前流程的終結的情況，可使用操作結果頁來反饋。這種方式最為強烈和明確的告知用戶操作已經完成，并可根據實際情況給出下一步操作的指引。

5）異常狀態——表單出錯（非Popout）

表單報錯，在表單頂部告知錯誤原因，并標識出錯誤字段提示用戶修改。

6）Dialog（對話框）

?????

7）ActionSheet（彈出式菜單）

? ?? ?

IOS? ?? vs? ? Android

8）Half-screen Dialog（半屏組件）

? ?

9）Picker（多列選擇器）

? ? ??

10）Toast（彈窗式提示）

? ??

9

小程序數據分析

1、功能概述

小程序數據分析，是面向小程序開發者、運營者的數據分析工具，提供關鍵指標統計、實時訪問監控、自定義分析等，幫助小程序產品迭代優化和運營。主要功能包括每日例行統計的標準分析，以及滿足用戶個性化需求的自定義分析。

1）名詞解釋

用戶：使用過小程序的微信用戶，根據openid來判斷。

頁面：小程序的頁面，以頁面路徑表示，如index, ?product/list。

受訪頁：用戶訪問的所有小程序頁面均可稱為受訪頁。

入口頁：用戶打開小程序時首先進入的頁面稱為入口頁，例如用戶從頁面A進入小程序，跳轉到頁面B，A為入口頁，B不是。

退出頁：用戶離開小程序時最后訪問的頁面稱為退出頁，例如用戶從頁面A跳轉到頁面B，從頁面B退出小程序，B為退出頁，A不是。

場景：用戶打開小程序的方式，如通過掃描二維碼打開小程序，場景為二維碼。

訪問：用戶瀏覽小程序頁面的行為。

添加：用戶將小程序添加到“我的小程序”的行為。

分享：用戶點擊小程序內或小程序外菜單，將小程序及其頁面分享給好友的行為。

新增：用戶首次訪問小程序頁面，即稱為新增。

活躍：用戶在一段時間內訪問過小程序即稱為活躍。

停留：用戶從打開小程序內頁面，到主動關閉或超時退出小程序的過程。切換到后臺、顯示到聊天頂部或浮窗，均不算停留在小程序。

留存：某個時間段內新增或活躍的用戶，經過一段時間后仍然使用小程序，即稱為留存，區分新增留存和活躍留存。

事件：自定義分析中進行用戶行為數據收集和分析的模型，表示某個用戶行為。

漏斗：自定義分析中由一系列事件組成的數據分析模型，用于分析業務流程中每個步驟的用戶轉化與流失。

2）指標解釋

①訪問

累計訪問人數：歷史累計訪問小程序的用戶數，同一用戶多次訪問不重復計。

新訪問人數：首次訪問小程序頁面的用戶數，同一用戶多次訪問不重復計。

打開次數：打開小程序的總次數。用戶從打開小程序到主動關閉或超時退出小程序的過程，計為一次。

訪問次數：訪問小程序頁面的總次數。多個頁面之間跳轉、同一頁面的重復訪問計為多次訪問。

訪問人數：訪問小程序頁面的總用戶數，同一用戶多次訪問不重復計。

人均停留時長：平均每個用戶停留在小程序頁面的總時長（單位為秒），即總停留時長/訪問人數。

次均停留時長：平均每次打開小程序停留在小程序頁面的總時長（單位為秒），即總停留時長/打開次數。

平均訪問深度：平均每次打開小程序訪問的去重頁面數。

月活躍用戶：30天內有訪問行為，且當天訪問的用戶。

沉默回流用戶：在過去30天內無訪問，90天內有訪問（流失期在30~90天內），且當天訪問的用戶。

流失回流用戶：在過去90天內無訪問，歷史上有訪問（流失期在90天以上），且當天訪問的用戶。

②分享

分享次數：分享小程序頁面的總次數。

分享人數：分享小程序頁面的總人數，同一用戶多次分享不重復計。

③添加

總添加人數：歷史累計將小程序添加為“我的小程序”的總用戶數（去除已取消添加人數）。

新添加人數：昨日較前日相比，新增添加到“我的小程序”的用戶數 。

④留存

新增留存：指定時間新增（即首次訪問小程序）的用戶，在之后的第N天（或周、月），再次訪問小程序的用戶數占比。

活躍留存：指定時間活躍（即訪問小程序）的用戶，在之后的第N天（或周、月），再次訪問小程序的用戶數占比。

⑤支付

累計支付金額：截止至昨日，小程序歷史非免密支付總體累計金額。

支付筆數：小程序內非免密支付成功次數。

支付金額：小程序內非免密支付成功總金額。

單均支付金額：小程序內每筆非免密支付的平均金額，即小程序內非免密支付成功總金額/小程序內非免密支付成功次數。

支付人數：小程序內非免密支付成功人數，同一用戶多次支付不重復計算。

人均消費次數：小程序內完成非免密支付用戶的平均支付次數，即小程序內非免密支付成功次數/小程序內非免密支付成功人數。

首次支付人數：當日首次在小程序內完成支付的用戶數，同一用戶多次支付不重復計算。

復購人數：非當日首次在小程序內完成支付的用戶數，同一用戶多次支付不重復計算。

支付次數轉化率：在小程序內，完成非免密支付轉化的小程序打開次數占比，即小程序內非免密支付成功次數/小程序打開次數。

支付人數轉化率：在小程序內，完成非免密支付轉化的小程序用戶數占比，即小程序內非免密支付成功人數/小程序打開人數。

⑥頁面

訪問次數：訪問該頁面的總次數。

訪問人數：訪問該頁面的總用戶數，同一用戶多次訪問不重復計。

次均時長：用戶平均每次訪問該頁面的停留時長（單位為秒），即該頁面的總停留時長/訪問次數。

入口頁次數：該頁面作為入口頁的訪問次數，例如一用戶從頁面A進入小程序，則頁面A的入口頁次數+1。

退出頁次數：該頁面作為退出頁的訪問次數，例如一用戶從頁面B退出小程序，則頁面B的退出頁次數+1。

退出率：該頁面作為退出頁的訪問次數占比，即退出頁次數/訪問次數。

分享次數：分享該頁面的總次數。

分享人數：分享該頁面的總人數，同一用戶多次分享不重復計。

2、常規分析

1）概況

提供小程序關鍵指標趨勢以及top頁面訪問數據，快速了解小程序發展概況。例如下圖：

2）訪問分析

提供小程序用戶訪問規模、來源、頻次、時長、深度、留存以及頁面詳情等數據，具體分析用戶新增、活躍和留存情況。例如下圖

3）實時統計

提供小程序實時訪問數據，滿足實時監控需求。例如下圖

4）用戶畫像

提供小程序的用戶畫像數據，包括用戶年齡、性別、地區、終端及機型分布。例如下圖：

3、自定義分析

自定義分析支持靈活多維和近實時的用戶行為分析，可以通過自定義上報，對用戶在小程序內的行為做精細化跟蹤，滿足頁面訪問等標準統計以外的個性化分析需求。例如，電商類小程序通過配置自定義上報，收集數據，可以完成如下分析：

購買商品的人，各省份、城市、年齡、性別的分布如何？不同用戶群購買的商品數量、商品價格有什么差別？

用戶訪問商品頁、查看商品詳情、查看評論、下單、支付、完成購買，逐步的轉化率如何？

不同用戶群的轉化是否有差異？

今天參與線上活動的用戶，各個時段（小時級）的活躍度如何？

登錄https://mp.weixin.qq.com，進入“數據分析” – “自定義分析” - “事件管理”，點擊 “新建事件”。具體配置步驟可參考官方文檔。

4、小程序助手

“小程序數據助手”是微信公眾平臺發布的官方小程序，支持相關的開發和運營人員查看自身小程序的運營數據，掃描下面小程序碼可立即體驗。前提是你的微信賬戶是小程序管理員或者運營者才可登錄體驗。

“小程序數據助手”當前功能模塊包括數據概況、訪問基礎分析（用戶趨勢、來源分析、留存分析、時長分析、頁面詳情）、實時統計和用戶畫像（年齡性別、省份城市、終端機型），數據與小程序后臺常規分析一致。

10

?云開發

開發者可以使用云開發開發微信小程序、小游戲，無需搭建服務器，即可使用云端能力。

云開發為開發者提供完整的原生云端支持和微信服務支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的云服務相互兼容，并不互斥。

云開發提供了幾大基礎能力支持：

能力	作用	說明
云函數	無需自建服務器	在云端運行的代碼，微信私有協議天然鑒權，開發者只需編寫自身業務邏輯代碼
數據庫	無需自建數據庫	一個既可在小程序前端操作，也能在云函數中讀寫的 JSON 數據庫
存儲	無需自建存儲和 CDN	在小程序前端直接上傳/下載云端文件，在云開發控制臺可視化管理
云調用	原生微信服務集成	基于云函數免鑒權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力

小程序開源了，weui-wxss、weui.js和react-weui等，可以使用他們進行Web頁面的設計與開發，它可以運行在任何瀏覽器中。

weui在Git上的地址：https://github.com/Tencent/weui

總結

本文主要總結了微信小程序的工作機制、設計規范以及數據分析相關的內容，筆者水平有限，文中難免會存在疏漏、錯誤的地方，歡迎大家指正，一起溝通學習、共同進步。

------正文分割線------

點個“在看”吧

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的多图指南——微信小程序设计规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。