微信小程序設(shè)計的基本原則是微信設(shè)計中心總結(jié)的設(shè)計指南和建議。

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

首先，要有禮貌

為了避免用戶在微信中使用小程序服務(wù)時被周圍復(fù)雜環(huán)境干擾，小程序應(yīng)注意減少無關(guān)設(shè)計元素對用戶目標(biāo)的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶操作。

1.重點突出

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

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

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

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

2.流程明確

為了讓用戶順利使用頁面，在用戶執(zhí)行某個操作過程時，應(yīng)避免出現(xiàn)在用戶目標(biāo)過程之外的內(nèi)容，并打斷用戶。

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

二是清晰明了

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

1.導(dǎo)航清晰，來去自由

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

微信導(dǎo)航欄

微信導(dǎo)航欄直接繼承給客戶端。除了導(dǎo)航欄的顏色，開發(fā)人員不需要也不能定制內(nèi)容。但開發(fā)人員需要規(guī)定小程序每個頁面的跳轉(zhuǎn)關(guān)系，使導(dǎo)航系統(tǒng)能夠以合理的方式工作。

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

導(dǎo)航區(qū)（iOS）

導(dǎo)航區(qū)通常只有一個操作，即返回上一級界面。開發(fā)人員可以定義其內(nèi)容，而不是修改樣式。

導(dǎo)航區(qū)（Android）

通常，系統(tǒng)導(dǎo)航左側(cè)的唯一操作是“離開小程序，回到微信，程序后臺運(yùn)行”。

當(dāng)用戶進(jìn)入小程序級頁面時，我們建議小程序本身可以設(shè)計返回操作，同事用戶也可以通過Android系統(tǒng)的硬件返回按鈕返回上一級。

選色方案

小程序?qū)Ш綑谥С只镜谋尘邦伾ㄖ乒δ?，所選顏色在滿足可用性的前提下需要和諧搭配。微信建議參考以下顏色選擇效果：

頁面內(nèi)導(dǎo)航

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

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

2.減少等待，及時反饋

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

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

本頁將突出小程序的品牌特點和加載狀態(tài)。

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

下拉標(biāo)示區(qū)

所有微信小程序頁面下拉時都會出現(xiàn)微信統(tǒng)一設(shè)計的標(biāo)志區(qū)。品牌展示區(qū)由品牌名稱和微信小程序提示組成，旨在加強(qiáng)品牌和用戶對小程序的產(chǎn)品感知。

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

下拉標(biāo)示（Android深淺兩色方案)

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

頁面刷新交互（iOS）

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

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

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

頁面刷新交互（Android）

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

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

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