微信小(xiǎo)程序設計規範

由于微信小(xiǎo)程序生(shēng)态體(tǐ)系清晰明确、便捷優雅的設計規範，從而造就了微信小(xiǎo)程序輕快便捷，用完即走的使用體(tǐ)驗特點，也是因爲微信小(xiǎo)程序開(kāi)發者們秉承着高質量的設計作風，才能達到媲美App版面的高度，今天給大(dà)家了解分(fēn)析一(yī)下(xià)微信小(xiǎo)程序的設計規範：

爲了減少遊客浏覽微信小(xiǎo)程序時的浏覽體(tǐ)驗，影響遊客注意力，開(kāi)發者們需要注意，小(xiǎo)程序在設計時就應該注意減少無關的設計元素對浏覽者的幹擾，應該友好地引導遊客進行浏覽操作。頁面有明确的中(zhōng)心，以便于遊客浏覽頁面的時候能夠直接知(zhī)曉頁面所包含的内容。

比如，搜索功能頁面：

從上圖中(zhōng)，不難看出左邊相對于又(yòu)邊來說頁面簡介扼要，重點突出明顯，沒有過多的幹擾項，而右邊則焦點過多，沒有突出的重點在哪裏，邏輯不清晰。

再比如，按鈕選擇：

上圖中(zhōng)，在并列的多個操作按鈕是，需要有主次之分(fēn)，比如顔色提醒之類，右圖則毫無着重強調，讓浏覽者無法選擇。

操作明确：

爲了讓遊客能夠順暢地使用頁面，得到一(yī)個良好的操作反饋，在遊客進行某一(yī)項流程操作時，就要避免出現打斷遊客浏覽内容的問題。

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

頁面明确：

遊客進入微信小(xiǎo)程序頁面，就應該清晰明确地告知(zhī)遊客身在何處、又(yòu)可以往何處去(qù)，确保遊客在微信小(xiǎo)程序頁面中(zhōng)遊刃有餘地浏覽，這樣才符合微信小(xiǎo)程序的簡單明确的浏覽體(tǐ)驗。

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

開(kāi)發者可根據自身頁面設計風格，添加導航。需要不同頁面間導航保持一(yī)緻，指向清晰明确。單由于手機屏幕尺寸的限制，小(xiǎo)程序頁面的導航應盡量簡單、大(dà)方，最好與小(xiǎo)程序原有标題有區分(fēn)。

在底部導航的選擇上，開(kāi)發者可以選擇微信提供的原生(shēng)導航标簽。但也可自定義圖标樣式以及顔色等：

頂部導航顔色可自定義。開(kāi)發者需要注意的是，顔色選擇中(zhōng)，需要留意分(fēn)頁欄顔色的區分(fēn)，需要保持文字與選中(zhōng)狀态有足夠的區分(fēn)度，下(xià)圖右邊則文字部分(fēn)與選中(zhōng)狀态區分(fēn)不明确，不好辨認：

反饋及時：

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

其餘的加載反饋包括，下(xià)拉刷新加載，也是有微信提供，頁面内的局部加載反饋等。

問題可控：

要杜絕在遊客使用異常的情況下(xià)束手無策，最後停滞在某一(yī)個頁面。特别在填寫表單的頁面中(zhōng)，應明确指出出錯項目，提示遊客以便修改。

便捷優雅：

減少輸入，考慮到手機輸入鍵盤小(xiǎo)且密集的特點，容易導緻輸入錯誤，則需要盡量減少遊客輸入，提升使用體(tǐ)驗。

例如下(xià)圖中(zhōng)，右側攝像頭識别接口來輔助遊客輸入：

在一(yī)些需要讓遊客進行手動輸入的頁面時，可以保留輸入曆史，讓遊客進行選擇，避免手機鍵盤密集造成反複輸入錯誤。

統一(yī)穩定：

除了上面幾個方面所提到的種種規範，小(xiǎo)程序還應該時刻注意視覺上的統一(yī)，不同頁面間的統一(yī)性包括字體(tǐ)統一(yī)、色塊的使用以及圖片顔色搭配風格統一(yī)，在不同的頁面使用統一(yī)的控件和交互方式，小(xiǎo)編在這裏就不一(yī)一(yī)羅列了，從延伸的角度來看，微信小(xiǎo)程序的設計規範也适用于支付寶小(xiǎo)程序和百度智能小(xiǎo)程序。總之，在無特殊設計要求的情況下(xià)，盡量選擇微信提供的組件，能夠保持頁面的統一(yī)以及浏覽體(tǐ)驗。