微信小程序設計規(guī)范

由于微信小程序生態(tài)體系清晰明確、便捷優(yōu)雅的設計規(guī)范，從而造就了微信小程序輕快便捷，用完即走的使用體驗特點，也是因為微信小程序開發(fā)者們秉承著高質量的設計作風，才能達到媲美App版面的高度，今天給大家了解分析一下微信小程序的設計規(guī)范：

為了減少游客瀏覽微信小程序時的瀏覽體驗，影響游客注意力，開發(fā)者們需要注意，小程序在設計時就應該注意減少無關的設計元素對瀏覽者的干擾，應該友好地引導游客進行瀏覽操作。頁面有明確的中心，以便于游客瀏覽頁面的時候能夠直接知曉頁面所包含的內(nèi)容。

比如，搜索功能頁面：

從上圖中，不難看出左邊相對于又邊來說頁面簡介扼要，重點突出明顯，沒有過多的干擾項，而右邊則焦點過多，沒有突出的重點在哪里，邏輯不清晰。

再比如，按鈕選擇：

上圖中，在并列的多個操作按鈕是，需要有主次之分，比如顏色提醒之類，右圖則毫無著重強調(diào)，讓瀏覽者無法選擇。

操作明確：

為了讓游客能夠順暢地使用頁面，得到一個良好的操作反饋，在游客進行某一項流程操作時，就要避免出現(xiàn)打斷游客瀏覽內(nèi)容的問題。

如上圖，游客在輸入內(nèi)容點擊搜索時，結果跳出與搜索結果不相符的內(nèi)容，這樣就增加了與流程無關的阻斷操作，導致流程不順暢，影響使用體驗。

頁面明確：

游客進入微信小程序頁面，就應該清晰明確地告知游客身在何處、又可以往何處去，確保游客在微信小程序頁面中游刃有余地瀏覽，這樣才符合微信小程序的簡單明確的瀏覽體驗。

首先，需要導航清晰明確，導航是游客在瀏覽微信小程序的時候能夠起到指引的作用，導航最主要的責任就是要告訴游戲，當前頁面在哪，可以去哪個頁面等。開發(fā)者在設計導航時要注意次級頁面界面導航左上角提供返回上級頁面按鈕。

開發(fā)者可根據(jù)自身頁面設計風格，添加導航。需要不同頁面間導航保持一致，指向清晰明確。單由于手機屏幕尺寸的限制，小程序頁面的導航應盡量簡單、大方，最好與小程序原有標題有區(qū)分。

在底部導航的選擇上，開發(fā)者可以選擇微信提供的原生導航標簽。但也可自定義圖標樣式以及顏色等：

頂部導航顏色可自定義。開發(fā)者需要注意的是，顏色選擇中，需要留意分頁欄顏色的區(qū)分，需要保持文字與選中狀態(tài)有足夠的區(qū)分度，下圖右邊則文字部分與選中狀態(tài)區(qū)分不明確，不好辨認：

反饋及時：

大家都知道，在瀏覽頁面的時候，如果頁面的過長時間的等待會引起不耐煩的情緒，目前微信小程序提供的技術支持大程度彌補這一缺陷。即使是如此，也不能出現(xiàn)避免加載等待的時候。其中，啟動頁能夠在一定程度上展現(xiàn)品牌特征。啟動頁可以突出展示小程序品牌。加載進度指示，均由微信統(tǒng)一提供的，不需要開發(fā)者開發(fā)。

其余的加載反饋包括，下拉刷新加載，也是有微信提供，頁面內(nèi)的局部加載反饋等。

問題可控：

要杜絕在游客使用異常的情況下束手無策，最后停滯在某一個頁面。特別在填寫表單的頁面中，應明確指出出錯項目，提示游客以便修改。

便捷優(yōu)雅：

減少輸入，考慮到手機輸入鍵盤小且密集的特點，容易導致輸入錯誤，則需要盡量減少游客輸入，提升使用體驗。

例如下圖中，右側攝像頭識別接口來輔助游客輸入：

在一些需要讓游客進行手動輸入的頁面時，可以保留輸入歷史，讓游客進行選擇，避免手機鍵盤密集造成反復輸入錯誤。

統(tǒng)一穩(wěn)定：

除了上面幾個方面所提到的種種規(guī)范，小程序還應該時刻注意視覺上的統(tǒng)一，不同頁面間的統(tǒng)一性包括字體統(tǒng)一、色塊的使用以及圖片顏色搭配風格統(tǒng)一，在不同的頁面使用統(tǒng)一的控件和交互方式，小編在這里就不一一羅列了，從延伸的角度來看，微信小程序的設計規(guī)范也適用于支付寶小程序和百度智能小程序?？傊跓o特殊設計要求的情況下，盡量選擇微信提供的組件，能夠保持頁面的統(tǒng)一以及瀏覽體驗。