微信小程序設計規範

由于(yú)微信小程序生态體系清晰明确、便捷優雅的(de)設計規範，從而(ér)造就(jiù)了(le／liǎo)微信小程序輕快便捷，用完即走的(de)使用體驗特點，也(yě)是(shì)因爲(wéi / wèi)微信小程序開發者們秉承着高質量的(de)設計作風，才能達到(dào)媲美App版面的(de)高度，今天給大(dà)家了(le／liǎo)解分析一(yī / yì ／yí)下微信小程序的(de)設計規範：

爲(wéi / wèi)了(le／liǎo)減少遊客浏覽微信小程序時(shí)的(de)浏覽體驗，影響遊客注意力，開發者們需要(yào / yāo)注意，小程序在(zài)設計時(shí)就(jiù)應該注意減少無關的(de)設計元素對浏覽者的(de)幹擾，應該友好地(dì / de)引導遊客進行浏覽操作。頁面有明确的(de)中心，以(yǐ)便于(yú)遊客浏覽頁面的(de)時(shí)候能夠直接知曉頁面所包含的(de)内容。

比如，搜索功能頁面：

從上(shàng)圖中，不(bù)難看出(chū)左邊相對于(yú)又邊來(lái)說(shuō)頁面簡介扼要(yào / yāo)，重點突出(chū)明顯，沒有過多的(de)幹擾項，而(ér)右邊則焦點過多，沒有突出(chū)的(de)重點在(zài)哪裏，邏輯不(bù)清晰。

再比如，按鈕選擇：

上(shàng)圖中，在(zài)并列的(de)多個(gè)操作按鈕是(shì)，需要(yào / yāo)有主次之(zhī)分，比如顔色提醒之(zhī)類，右圖則毫無着重強調，讓浏覽者無法選擇。

操作明确：

爲(wéi / wèi)了(le／liǎo)讓遊客能夠順暢地(dì / de)使用頁面，得到(dào)一(yī / yì ／yí)個(gè)良好的(de)操作反饋，在(zài)遊客進行某一(yī / yì ／yí)項流程操作時(shí)，就(jiù)要(yào / yāo)避免出(chū)現打斷遊客浏覽内容的(de)問題。

如上(shàng)圖，遊客在(zài)輸入内容點擊搜索時(shí)，結果跳出(chū)與搜索結果不(bù)相符的(de)内容，這(zhè)樣就(jiù)增加了(le／liǎo)與流程無關的(de)阻斷操作，導緻流程不(bù)順暢，影響使用體驗。

頁面明确：

遊客進入微信小程序頁面，就(jiù)應該清晰明确地(dì / de)告知遊客身在(zài)何處、又可以(yǐ)往何處去，确保遊客在(zài)微信小程序頁面中遊刃有餘地(dì / de)浏覽，這(zhè)樣才符合微信小程序的(de)簡單明确的(de)浏覽體驗。

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

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

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

頂部導航顔色可自定義。開發者需要(yào / yāo)注意的(de)是(shì)，顔色選擇中，需要(yào / yāo)留意分頁欄顔色的(de)區分，需要(yào / yāo)保持文字與選中狀态有足夠的(de)區分度，下圖右邊則文字部分與選中狀态區分不(bù)明确，不(bù)好辨認：

反饋及時(shí)：

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

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

問題可控：

要(yào / yāo)杜絕在(zài)遊客使用異常的(de)情況下束手無策，最後停滞在(zài)某一(yī / yì ／yí)個(gè)頁面。特别在(zài)填寫表單的(de)頁面中，應明确指出(chū)出(chū)錯項目，提示遊客以(yǐ)便修改。

便捷優雅：

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

例如下圖中，右側攝像頭識别接口來(lái)輔助遊客輸入：

在(zài)一(yī / yì ／yí)些需要(yào / yāo)讓遊客進行手動輸入的(de)頁面時(shí)，可以(yǐ)保留輸入曆史，讓遊客進行選擇，避免手機鍵盤密集造成反複輸入錯誤。

統一(yī / yì ／yí)穩定：

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