微信小程序設(shè)計(jì)的基本原則是微信設(shè)計(jì)中心總結(jié)的設(shè)計(jì)指南和建議。
以下設(shè)計(jì)原則是基于對(duì)用戶的尊重，旨在建立有序、高效、一致的用戶體驗(yàn)，最大限度地滿足和支持業(yè)務(wù)需求設(shè)計(jì)，實(shí)現(xiàn)用戶與開(kāi)發(fā)者的雙贏局面。
首先，要有禮貌
為了避免用戶在微信中使用小程序服務(wù)時(shí)被周?chē)鷱?fù)雜環(huán)境干擾，小程序應(yīng)注意減少無(wú)關(guān)設(shè)計(jì)元素對(duì)用戶目標(biāo)的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶操作。
1.重點(diǎn)突出
每個(gè)頁(yè)面都應(yīng)該有明確的關(guān)鍵點(diǎn)，以便用戶在進(jìn)入新頁(yè)面時(shí)快速理解頁(yè)面內(nèi)容。在確定關(guān)鍵點(diǎn)的前提下，應(yīng)盡量避免頁(yè)面上其他干擾項(xiàng)目影響用戶的決策和操作。
刪除任何與用戶目標(biāo)無(wú)關(guān)的內(nèi)容，澄清頁(yè)面主題，并在技術(shù)和頁(yè)面控制允許的前提下為用戶目標(biāo)提供幫助，如最近的搜索詞、常用的搜索詞等。
操作沒(méi)有主次，讓用戶無(wú)法選擇。
首先要避免并列操作過(guò)多讓用戶選擇，在不得不并列多個(gè)操作時(shí)，要區(qū)分主次操作，降低用戶選擇的難度。
2.流程明確
為了讓用戶順利使用頁(yè)面，在用戶執(zhí)行某個(gè)操作過(guò)程時(shí)，應(yīng)避免出現(xiàn)在用戶目標(biāo)過(guò)程之外的內(nèi)容，并打斷用戶。
用戶計(jì)劃搜索，但在進(jìn)入頁(yè)面時(shí)突然被彩票彈出窗口打斷；對(duì)彩票不感興趣的用戶非常不友好，增加了對(duì)開(kāi)發(fā)團(tuán)隊(duì)的憤怒；即使有些用戶真的被打斷了“誘人”在抽獎(jiǎng)活動(dòng)的吸引下，離開(kāi)抽獎(jiǎng)的主要過(guò)程后，你可能會(huì)忘記原來(lái)的目標(biāo)，然后失去對(duì)產(chǎn)品真正價(jià)值的利用和理解。
二是清晰明了
作為一個(gè)負(fù)責(zé)任的開(kāi)發(fā)人員，一旦用戶進(jìn)入我們的小程序頁(yè)面，他們就有責(zé)任和義務(wù)清楚地告訴用戶他們?cè)谀睦?，他們可以去哪里，以確保用戶在頁(yè)面上輕松穿梭而不迷失，從而為用戶提供安全愉快的體驗(yàn)。
1.導(dǎo)航清晰，來(lái)去自由
導(dǎo)航是確保用戶在瀏覽和跳轉(zhuǎn)網(wǎng)頁(yè)時(shí)不會(huì)迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶我在哪里，我可以去哪里，如何回去。首先，微信系統(tǒng)中所有小程序的所有頁(yè)面都會(huì)帶來(lái)微信提供的導(dǎo)航欄，統(tǒng)一解決我在哪里、如何回去的問(wèn)題。在微信層面保持一致的導(dǎo)航體驗(yàn)，有利于用戶在微信中形成更統(tǒng)一的體驗(yàn)和互動(dòng)認(rèn)知，無(wú)需在小程序和微信切換中增加新的學(xué)習(xí)成本或使用習(xí)慣。
微信導(dǎo)航欄
微信導(dǎo)航欄直接繼承給客戶端。除了導(dǎo)航欄的顏色，開(kāi)發(fā)人員不需要也不能定制內(nèi)容。但開(kāi)發(fā)人員需要規(guī)定小程序每個(gè)頁(yè)面的跳轉(zhuǎn)關(guān)系，使導(dǎo)航系統(tǒng)能夠以合理的方式工作。
微信導(dǎo)航欄分為導(dǎo)航區(qū)、標(biāo)題區(qū)和操作區(qū)。其中，導(dǎo)航區(qū)域控制程序頁(yè)面過(guò)程。目前，導(dǎo)航欄分為兩種基本顏色，即深度iOS和Android顯示不同。
導(dǎo)航區(qū)（iOS）
導(dǎo)航區(qū)通常只有一個(gè)操作，即返回上一級(jí)界面。開(kāi)發(fā)人員可以定義其內(nèi)容，而不是修改樣式。
導(dǎo)航區(qū)（Android）
通常，系統(tǒng)導(dǎo)航左側(cè)的唯一操作是“離開(kāi)小程序，回到微信，程序后臺(tái)運(yùn)行”。
當(dāng)用戶進(jìn)入小程序級(jí)頁(yè)面時(shí)，我們建議小程序本身可以設(shè)計(jì)返回操作，同事用戶也可以通過(guò)Android系統(tǒng)的硬件返回按鈕返回上一級(jí)。
選色方案
小程序?qū)Ш綑谥С只镜谋尘邦伾ㄖ乒δ埽x顏色在滿足可用性的前提下需要和諧搭配。微信建議參考以下顏色選擇效果：
頁(yè)面內(nèi)導(dǎo)航
開(kāi)發(fā)人員可以根據(jù)自己的功能和需要在頁(yè)面中添加自己的導(dǎo)航，并在不同的頁(yè)面之間保持一致的導(dǎo)航。但由于手機(jī)屏幕尺寸的限制，小程序頁(yè)面的導(dǎo)航應(yīng)盡可能簡(jiǎn)單。如果只是一般的線性頁(yè)面，建議只使用微信導(dǎo)航欄。
提供微信控件庫(kù)tab導(dǎo)航供開(kāi)發(fā)者選擇，tab欄可以固定在頁(yè)面的頂部或底部，方便用戶在不同的頁(yè)面上tab切換頁(yè)面間。確保點(diǎn)擊區(qū)域，tab項(xiàng)目不得超過(guò)4項(xiàng)，頁(yè)面不得出現(xiàn)一組以上tab欄。
2.減少等待，及時(shí)反饋
頁(yè)面等待時(shí)間過(guò)長(zhǎng)會(huì)引起用戶的不良情緒，使用微信小程序項(xiàng)目提供的技術(shù)可以大大縮短等待時(shí)間。即便如此，當(dāng)不可避免地出現(xiàn)加載和等待時(shí)，需要及時(shí)反饋，以緩解用戶等待的不良情緒。
小程序啟動(dòng)也是小程序在一定程度上展示微信內(nèi)容品牌特色的頁(yè)面之一。
本頁(yè)將突出小程序的品牌特點(diǎn)和加載狀態(tài)。
啟動(dòng)頁(yè)除LOGO除品牌展示外，頁(yè)面上的所有其他元素，如加載進(jìn)度指示，均由微信提供，不能更改。無(wú)需開(kāi)發(fā)人員開(kāi)發(fā)。
下拉標(biāo)示區(qū)
所有微信小程序頁(yè)面下拉時(shí)都會(huì)出現(xiàn)微信統(tǒng)一設(shè)計(jì)的標(biāo)志區(qū)。品牌展示區(qū)由品牌名稱和微信小程序提示組成，旨在加強(qiáng)品牌和用戶對(duì)小程序的產(chǎn)品感知。
微信提供了兩套顏色匹配方案，如此標(biāo)記所示，文本顏色不能自定義，開(kāi)發(fā)人員應(yīng)注意確保下拉標(biāo)記的識(shí)別。
下拉標(biāo)示（Android深淺兩色方案)
微信下拉提示用于給用戶一個(gè)明確的小程序所有者，以防止欺詐和欺騙。這里有兩套方案，文本顏色不能自定義，開(kāi)發(fā)人員應(yīng)注意確保下拉標(biāo)志的識(shí)別。
頁(yè)面刷新交互（iOS）
開(kāi)發(fā)人員可以定制需要通過(guò)下拉交互完成刷新的頁(yè)面，這將提供標(biāo)準(zhǔn)能力和風(fēng)格。在風(fēng)格上，刷新圖標(biāo)與下拉標(biāo)志的顏色匹配已經(jīng)捆綁在一起，分為兩組方案。開(kāi)發(fā)人員在使用時(shí)應(yīng)注意頭部文本、下拉標(biāo)志和刷新圖標(biāo)的和諧統(tǒng)一。但當(dāng)用戶在此類頁(yè)面上進(jìn)行下拉交互時(shí)，微信小程序頁(yè)面標(biāo)準(zhǔn)加載動(dòng)畫(huà)。開(kāi)發(fā)人員不需要開(kāi)發(fā)自己的風(fēng)格。
開(kāi)發(fā)者沒(méi)有在頁(yè)面頂部設(shè)計(jì)tab在這種情況下，如果定義頁(yè)面可以通過(guò)下拉動(dòng)作刷新，則小程序品牌顯示區(qū)域出現(xiàn)在標(biāo)題欄下，頁(yè)面頂部。開(kāi)發(fā)人員暫時(shí)無(wú)法定義這種加載效果。
開(kāi)發(fā)者定義頁(yè)面頂部tab并定義該tab下面的內(nèi)容頁(yè)面可以通過(guò)下拉動(dòng)作刷新，然后刷新后加載狀態(tài)提示語(yǔ)小程序品牌展示區(qū)出現(xiàn)在頂部tab此外，只刷新當(dāng)前頁(yè)面內(nèi)容。開(kāi)發(fā)人員暫時(shí)無(wú)法定義這種加載效果。
頁(yè)面刷新交互（Android）
與iOS同樣的風(fēng)格，Android下刷新圖標(biāo)與下拉標(biāo)志的顏色匹配已捆綁，分為兩套方案。開(kāi)發(fā)人員在使用時(shí)應(yīng)注意頭部文本、下拉標(biāo)志和刷新圖標(biāo)的和諧統(tǒng)一。
微信控件庫(kù)提供深度tab開(kāi)發(fā)者可以選擇導(dǎo)航方案。tab欄需要固定在頁(yè)面頂部，方便用戶在不同的頁(yè)面上tab切換頁(yè)面間。確保點(diǎn)擊區(qū)域，tab項(xiàng)目不得超過(guò)4項(xiàng)，頁(yè)面不得出現(xiàn)一組以上tab欄。
tab默認(rèn)情況下，欄選中態(tài)為100%實(shí)色，未選中態(tài)為60%不透明，選中態(tài)顏色可自定義。在自定義顏色選擇中，一定要保持tab可用性、可視性和可操作性。
