微信小程序設計的基本原則是微信設計中心總結的設計指南和建議。

以下設計原則是基于對用戶的尊重，旨在建立有序、高效、一致的用戶體驗，最大限度地滿足和支持業務需求設計，實現用戶與開發者的雙贏局面。

首先，要有禮貌

為了避免用戶在微信中使用小程序服務時被周圍復雜環境干擾，小程序應注意減少無關設計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶操作。

1.重點突出

每個頁面都應該有明確的關鍵點，以便用戶在進入新頁面時快速理解頁面內容。在確定關鍵點的前提下，應盡量避免頁面上其他干擾項目影響用戶的決策和操作。

刪除任何與用戶目標無關的內容，澄清頁面主題，并在技術和頁面控制允許的前提下為用戶目標提供幫助，如最近的搜索詞、常用的搜索詞等。

操作沒有主次，讓用戶無法選擇。

首先要避免并列操作過多讓用戶選擇，在不得不并列多個操作時，要區分主次操作，降低用戶選擇的難度。

2.流程明確

為了讓用戶順利使用頁面，在用戶執行某個操作過程時，應避免出現在用戶目標過程之外的內容，并打斷用戶。

用戶計劃搜索，但在進入頁面時突然被彩票彈出窗口打斷；對彩票不感興趣的用戶非常不友好，增加了對開發團隊的憤怒；即使有些用戶真的被打斷了“誘人”在抽獎活動的吸引下，離開抽獎的主要過程后，你可能會忘記原來的目標，然后失去對產品真正價值的利用和理解。

二是清晰明了

作為一個負責任的開發人員，一旦用戶進入我們的小程序頁面，他們就有責任和義務清楚地告訴用戶他們在哪里，他們可以去哪里，以確保用戶在頁面上輕松穿梭而不迷失，從而為用戶提供安全愉快的體驗。

1.導航清晰，來去自由

導航是確保用戶在瀏覽和跳轉網頁時不會迷路的最關鍵因素。導航需要告訴用戶我在哪里，我可以去哪里，如何回去。首先，微信系統中所有小程序的所有頁面都會帶來微信提供的導航欄，統一解決我在哪里、如何回去的問題。在微信層面保持一致的導航體驗，有利于用戶在微信中形成更統一的體驗和互動認知，無需在小程序和微信切換中增加新的學習成本或使用習慣。

微信導航欄

微信導航欄直接繼承給客戶端。除了導航欄的顏色，開發人員不需要也不能定制內容。但開發人員需要規定小程序每個頁面的跳轉關系，使導航系統能夠以合理的方式工作。

微信導航欄分為導航區、標題區和操作區。其中，導航區域控制程序頁面過程。目前，導航欄分為兩種基本顏色，即深度iOS和Android顯示不同。

導航區（iOS）

導航區通常只有一個操作，即返回上一級界面。開發人員可以定義其內容，而不是修改樣式。

導航區（Android）

通常，系統導航左側的唯一操作是“離開小程序，回到微信，程序后臺運行”。

當用戶進入小程序級頁面時，我們建議小程序本身可以設計返回操作，同事用戶也可以通過Android系統的硬件返回按鈕返回上一級。

選色方案

小程序導航欄支持基本的背景顏色定制功能，所選顏色在滿足可用性的前提下需要和諧搭配。微信建議參考以下顏色選擇效果：

頁面內導航

開發人員可以根據自己的功能和需要在頁面中添加自己的導航，并在不同的頁面之間保持一致的導航。但由于手機屏幕尺寸的限制，小程序頁面的導航應盡可能簡單。如果只是一般的線性頁面，建議只使用微信導航欄。

提供微信控件庫tab導航供開發者選擇，tab欄可以固定在頁面的頂部或底部，方便用戶在不同的頁面上tab切換頁面間。確保點擊區域，tab項目不得超過4項，頁面不得出現一組以上tab欄。

2.減少等待，及時反饋

頁面等待時間過長會引起用戶的不良情緒，使用微信小程序項目提供的技術可以大大縮短等待時間。即便如此，當不可避免地出現加載和等待時，需要及時反饋，以緩解用戶等待的不良情緒。

小程序啟動也是小程序在一定程度上展示微信內容品牌特色的頁面之一。

本頁將突出小程序的品牌特點和加載狀態。

啟動頁除LOGO除品牌展示外，頁面上的所有其他元素，如加載進度指示，均由微信提供，不能更改。無需開發人員開發。

下拉標示區

所有微信小程序頁面下拉時都會出現微信統一設計的標志區。品牌展示區由品牌名稱和微信小程序提示組成，旨在加強品牌和用戶對小程序的產品感知。

微信提供了兩套顏色匹配方案，如此標記所示，文本顏色不能自定義，開發人員應注意確保下拉標記的識別。

下拉標示（Android深淺兩色方案)

微信下拉提示用于給用戶一個明確的小程序所有者，以防止欺詐和欺騙。這里有兩套方案，文本顏色不能自定義，開發人員應注意確保下拉標志的識別。

頁面刷新交互（iOS）

開發人員可以定制需要通過下拉交互完成刷新的頁面，這將提供標準能力和風格。在風格上，刷新圖標與下拉標志的顏色匹配已經捆綁在一起，分為兩組方案。開發人員在使用時應注意頭部文本、下拉標志和刷新圖標的和諧統一。但當用戶在此類頁面上進行下拉交互時，微信小程序頁面標準加載動畫。開發人員不需要開發自己的風格。

開發者沒有在頁面頂部設計tab在這種情況下，如果定義頁面可以通過下拉動作刷新，則小程序品牌顯示區域出現在標題欄下，頁面頂部。開發人員暫時無法定義這種加載效果。

開發者定義頁面頂部tab并定義該tab下面的內容頁面可以通過下拉動作刷新，然后刷新后加載狀態提示語小程序品牌展示區出現在頂部tab此外，只刷新當前頁面內容。開發人員暫時無法定義這種加載效果。

頁面刷新交互（Android）

與iOS同樣的風格，Android下刷新圖標與下拉標志的顏色匹配已捆綁，分為兩套方案。開發人員在使用時應注意頭部文本、下拉標志和刷新圖標的和諧統一。

微信控件庫提供深度tab開發者可以選擇導航方案。tab欄需要固定在頁面頂部，方便用戶在不同的頁面上tab切換頁面間。確保點擊區域，tab項目不得超過4項，頁面不得出現一組以上tab欄。

tab默認情況下，欄選中態為100%實色，未選中態為60%不透明，選中態顏色可自定義。在自定義顏色選擇中，一定要保持tab可用性、可視性和可操作性。