基于微信小程序的亮度，我們開(kāi)發(fā)了一個(gè)小程序接口設(shè)計(jì)指南和建議。設(shè)計(jì)指南基于對(duì)用戶知情權(quán)和操作權(quán)的充分尊重。旨在在微信生態(tài)系統(tǒng)中創(chuàng)建友好，高效和一致的用戶體驗(yàn)，同時(shí)在很大程度上適應(yīng)和支持不同需求，為用戶和小程序服務(wù)提供商實(shí)現(xiàn)雙贏。

首先，友好的禮貌為了避免用戶在微信中使用小程序服務(wù)，注意力受到周圍復(fù)雜環(huán)境的干擾。 小程序應(yīng)注意減少無(wú)關(guān)設(shè)計(jì)元素對(duì)用戶目標(biāo)的干擾，并禮貌地向用戶顯示程序提供的服務(wù)。引導(dǎo)用戶操作友好。 1.專注于每個(gè)頁(yè)面應(yīng)該有一個(gè)明確的焦點(diǎn)，以便用戶可以在每次進(jìn)入新頁(yè)面時(shí)快速了解頁(yè)面內(nèi)容。在確定關(guān)鍵點(diǎn)的前提下，我們應(yīng)該盡量避免頁(yè)面上與用戶決策和操作無(wú)關(guān)的其他干擾因素。反例

此頁(yè)面的主題是查詢，但它添加了許多與查詢無(wú)關(guān)的業(yè)務(wù)門戶。它與用戶的目標(biāo)無(wú)關(guān)，很容易導(dǎo)致用戶迷路。

糾正性地刪除與用戶目標(biāo)無(wú)關(guān)的任何內(nèi)容，闡明頁(yè)面主題，并提供幫助用戶做出決策和操作的幫助內(nèi)容，例如技術(shù)和頁(yè)面控件允許的近搜索術(shù)語(yǔ)。反例顯示沒(méi)有主要或次要操作，因此用戶別無(wú)選擇。糾正性地表明您必須避免太多并行操作供用戶選擇。當(dāng)您必須并行安排多個(gè)操作時(shí)，您需要區(qū)分操作主要和次要操作，并降低用戶選擇的難度。 2.過(guò)程是明確的為了使用戶平滑地使用頁(yè)面，當(dāng)用戶執(zhí)行操作過(guò)程時(shí)，應(yīng)該通過(guò)避免用戶的目標(biāo)過(guò)程以外的內(nèi)容來(lái)中斷用戶。反例表明用戶在進(jìn)入頁(yè)面時(shí)打算搜索并被突然的模態(tài)抽獎(jiǎng)箱打斷;對(duì)彩票不感興趣的用戶是非常不友好的干擾;即使一些用戶確實(shí)是“有吸引力”的吸引力被活動(dòng)吸引，在離開(kāi)主要過(guò)程來(lái)抽獎(jiǎng)之后，原始目標(biāo)可能會(huì)被遺忘，并且可能會(huì)失去對(duì)產(chǎn)品真實(shí)價(jià)值的使用和理解。二，清晰明確一旦用戶進(jìn)入我們的小程序頁(yè)面，我們有責(zé)任和義務(wù)清楚明確地告知用戶去哪里和去哪里，以確保用戶能夠在頁(yè)面中自由穿梭而不會(huì)迷路，所以用戶提供安全和愉快的體驗(yàn)。 1.導(dǎo)航清晰，免費(fèi)導(dǎo)航是確保用戶在瀏覽頁(yè)面時(shí)不會(huì)迷路的關(guān)鍵因素。導(dǎo)航需要告訴用戶當(dāng)前的位置，去哪里，如何返回等等。首先，微信系統(tǒng)中的所有小程序頁(yè)面都有一個(gè)由微信提供的導(dǎo)航欄，以解決返回的位置和方法的問(wèn)題。 微信級(jí)導(dǎo)航使體驗(yàn)保持一致，這有助于用戶在微信內(nèi)形成統(tǒng)一的體驗(yàn)和交互感知，而無(wú)需在每個(gè)小程序和其他微信頁(yè)面的切換中增加學(xué)習(xí)成本或改變使用習(xí)慣。 ＆lt; 1.微信導(dǎo)航欄微信導(dǎo)航欄，直接從客戶端繼承，除了導(dǎo)航欄的顏色外，開(kāi)發(fā)人員無(wú)需自定義內(nèi)容。 但是，開(kāi)發(fā)人員需要指定小程序每個(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)航欄分為兩種基本顏色組合。 ＆2。導(dǎo)航區(qū)域（iOS）微信進(jìn)入小程序的頁(yè)面，導(dǎo)航區(qū)域通常只有一個(gè)操作——“返回”，即返回到小程序之前的微信頁(yè)面。在小程序之后進(jìn)入輔助頁(yè)面后，導(dǎo)航區(qū)域的操作是——“返回”和“關(guān)閉”。 “Back”返回前一個(gè)小程序接口或微信接口。 “關(guān)閉”，即直接退出當(dāng)前界面上的小程序，并在進(jìn)入小程序之前返回微信頁(yè)面。 ＆LT; 3。導(dǎo)航區(qū)（Android）導(dǎo)航區(qū)僅存在操作——直接退出小程序，在進(jìn)入小程序之前返回微信或系統(tǒng)桌面，并且Android手機(jī)的硬件返回鍵執(zhí)行返回上一頁(yè)的操作。有一個(gè)特殊的Android導(dǎo)航案例：當(dāng)用戶通過(guò)操作區(qū)菜單將小程序添加到Android桌面，并從Android桌面打開(kāi)小程序時(shí)，小程序的頁(yè)面不顯示導(dǎo)航按鈕。僅顯示小程序標(biāo)題和操作區(qū)域。 小程序輔助頁(yè)面，導(dǎo)航區(qū)域僅返回上一頁(yè)的操作，單擊Android手機(jī)附帶的硬件返回按鈕也起到同樣的作用。 ＆lt; 4.微信導(dǎo)航欄自定義顏色規(guī)則（iOS和Android）小程序導(dǎo)航欄支持基本的背景顏色自定義功能，所選顏色需要在滿足可用性的前提下匹配微信提供的兩組主導(dǎo)航欄圖標(biāo)。建議參考以下顏色選擇效果：顏色選擇方案示例＆lt; 5。頁(yè)內(nèi)導(dǎo)航開(kāi)發(fā)人員可以根據(jù)自己的功能設(shè)計(jì)將自己的導(dǎo)航添加到頁(yè)面中。 并保持不同頁(yè)面之間的導(dǎo)航一致。但是，受移動(dòng)電話屏幕尺寸的限制，小程序頁(yè)面的導(dǎo)航應(yīng)盡可能簡(jiǎn)單。如果僅推薦用于一般線性瀏覽的頁(yè)面，則只能使用微信導(dǎo)航欄。開(kāi)發(fā)人員可以選擇在小程序頁(yè)面上添加選項(xiàng)卡導(dǎo)航（Tab）導(dǎo)航。標(biāo)簽頁(yè)欄可以固定在頁(yè)面的頂部或底部，便于用戶在不同頁(yè)面之間切換。標(biāo)簽數(shù)量不得少于2，且不得超過(guò)5.為確保點(diǎn)擊區(qū)域，建議的標(biāo)簽數(shù)量不超過(guò)4.頁(yè)面也不應(yīng)超過(guò)一組標(biāo)簽。 小程序頁(yè)面可以選擇微信提供的本機(jī)底部標(biāo)簽分頁(yè)樣式，該樣式僅用于小程序頁(yè)面?？梢栽陂_(kāi)發(fā)期間自定義圖標(biāo)樣式，標(biāo)簽副本和副本顏色。有關(guān)圖標(biāo)大小等特定設(shè)置項(xiàng)，請(qǐng)參閱開(kāi)發(fā)文檔和WeUI基本控件庫(kù)。頂部標(biāo)簽頁(yè)欄顏色可以自定義。在自定義顏色選擇中，保持標(biāo)簽欄標(biāo)簽的可用性，可見(jiàn)性和可操作性非常重要。 2.減少等待，等待頁(yè)面長(zhǎng)時(shí)間反饋會(huì)導(dǎo)致用戶心情不好，使用微信小程序項(xiàng)目提供的技術(shù)已經(jīng)能夠大大減少等待時(shí)間。即便如此，當(dāng)不可避免地發(fā)生裝載和等待時(shí)，需要及時(shí)反饋以緩解用戶等待的不良情緒。 ＆。1。慧海頁(yè)面加載小程序匯海頁(yè)面是小程序在微信內(nèi)展示品牌特征的頁(yè)面之一。此頁(yè)面將突出顯示小程序品牌特征和加載狀態(tài)。除了品牌標(biāo)識(shí)顯示外，頁(yè)面上的所有其他元素（如加載進(jìn)度指示器）均由微信統(tǒng)一提供，如果沒(méi)有開(kāi)發(fā)人員開(kāi)發(fā)，則無(wú)法更改。 ＆2。頁(yè)面下拉刷新加載在微信小程序中，微信提供標(biāo)準(zhǔn)頁(yè)面下拉刷新加載能力和樣式，開(kāi)發(fā)人員不需要自己開(kāi)發(fā)。 ＆lt; 3.微信下拉刷新錯(cuò)誤用例請(qǐng)避免以下錯(cuò)誤情況，以確保信息的可見(jiàn)性和頁(yè)面的可用性。 ＆LT; 4。頁(yè)內(nèi)加載反饋開(kāi)發(fā)人員可以在小程序中自定義頁(yè)面內(nèi)容的加載方式。建議自定義加載樣式應(yīng)盡可能簡(jiǎn)潔，無(wú)論是本地使用還是全局使用，并使用簡(jiǎn)單動(dòng)畫通知用戶加載過(guò)程。開(kāi)發(fā)人員還可以使用微信提供的統(tǒng)一頁(yè)面加載樣式，如圖中的示例所示。小于5。模態(tài)加載模態(tài)的加載模式將覆蓋整個(gè)頁(yè)面。由于無(wú)法清楚地指出特定裝載的位置或內(nèi)容，因此可能會(huì)引起用戶的焦慮，因此應(yīng)謹(jǐn)慎使用。除某些全局操作外，不要使用模態(tài)加載。 ＆10 6。部分加載的反饋部分加載的反饋僅是觸發(fā)加載的頁(yè)面上的部分反饋。這種反饋機(jī)制更有針對(duì)性，頁(yè)面抖動(dòng)很小，這是微信推薦的反饋方法。例如：負(fù)載反饋?zhàn)⒁馐马?xiàng)如果加載時(shí)間很長(zhǎng)，則應(yīng)提供取消操作并使用進(jìn)度條顯示負(fù)載的進(jìn)度。在加載過(guò)程中，你應(yīng)該保持動(dòng)畫效果;無(wú)動(dòng)畫加載很容易造成界面卡住的錯(cuò)覺(jué)。不要在同一頁(yè)面上同時(shí)使用多個(gè)加載動(dòng)畫。 ＆LT; 7。結(jié)果反饋除了在用戶等待過(guò)程中及時(shí)反饋外，操作結(jié)果還需要明確反饋?？梢愿鶕?jù)實(shí)際情況選擇不同的結(jié)果反饋樣式。對(duì)于頁(yè)面本地操作，可以在操作區(qū)域中進(jìn)行直接反饋。對(duì)于頁(yè)面級(jí)操作結(jié)果，可以使用彈出提示（Toast），模態(tài)對(duì)話框或結(jié)果頁(yè)面顯示。 ＆LT; 8。頁(yè)面本地操作結(jié)果反饋對(duì)于頁(yè)面的本地操作，可以在操作區(qū)域中給出直接反饋，例如，在單擊多選控件之前和之后，如下所示。對(duì)于通用控件，微信設(shè)計(jì)中心將提供一個(gè)控件庫(kù)，所有控件都提供完整的操作反饋。 ＆lt; 9.Page全局操作結(jié)果——彈出提示（Toast）彈出提示（Toast）適用于輕量級(jí)成功提示，1.5秒后自動(dòng)消失，不中斷進(jìn)程，對(duì)用戶影響較小，適用于不需要強(qiáng)調(diào)的操作提醒，例如成功提示。請(qǐng)務(wù)必注意，此表單不適用于錯(cuò)誤提示，因?yàn)殄e(cuò)誤提示需要清楚地傳達(dá)給用戶，因此使用閃爍過(guò)去的彈出提示是不合適的。 ＆LT; 10。頁(yè)面全局操作結(jié)果——模態(tài)對(duì)話框模態(tài)對(duì)話框可以提示用戶需要清楚知道的操作結(jié)果的狀態(tài)，可以附加下一步操作。 ＆LT; 11。頁(yè)面全局操作結(jié)果 - 結(jié)果頁(yè)面對(duì)于操作結(jié)果已經(jīng)是當(dāng)前過(guò)程結(jié)束的情況，操作結(jié)果頁(yè)面可用于反饋。該方法是一種強(qiáng)有力的，明確的方式，告知用戶操作已經(jīng)完成，并可根據(jù)實(shí)際情況給出下一步的指導(dǎo)。 3.異?？煽?，有退路的方法在設(shè)計(jì)任何任務(wù)和過(guò)程時(shí)，異常狀態(tài)和過(guò)程往往容易被忽視，而這些異常情況往往是在用戶沮喪并需要幫助時(shí)，所以他們需要特別注意異常狀態(tài)。設(shè)計(jì)，在發(fā)生異常時(shí)向用戶提供必要的狀態(tài)提示，并通知解決方案使其可用。為了消除異常狀態(tài)，用戶無(wú)法理解并且無(wú)處可去，并且卡在某個(gè)頁(yè)面上。上面提到的模態(tài)對(duì)話框和結(jié)果頁(yè)面可用作異常狀態(tài)的提醒。另外，在表單頁(yè)面中，特別是在包含更多表單項(xiàng)的頁(yè)面中，應(yīng)該清楚地指出錯(cuò)誤項(xiàng)，以便用戶可以修改它。異常狀態(tài)——表單錯(cuò)誤表單報(bào)告錯(cuò)誤，告知表單頂部的錯(cuò)誤原因，并標(biāo)識(shí)提示用戶修改的錯(cuò)誤字段。三，方便和優(yōu)雅從PC時(shí)代的物理鍵盤和鼠標(biāo)到移動(dòng)端的手指，雖然輸入設(shè)備大大簡(jiǎn)化，但手指操作的準(zhǔn)確性不如鍵盤和鼠標(biāo)精確。為了適應(yīng)這種變化，開(kāi)發(fā)人員需要在設(shè)計(jì)過(guò)程中充分利用手機(jī)功能，使用戶能夠方便，優(yōu)雅地控制界面。 1.減少輸入由于手機(jī)的鍵盤區(qū)域小而密，輸入困難，輸入錯(cuò)誤容易。因此，在設(shè)計(jì)小程序頁(yè)面時(shí)，用戶輸入被最小化，并且現(xiàn)有界面或其他易于操作的選擇控件用于改善用戶輸入。經(jīng)驗(yàn)。例如，在下圖中，添加銀行卡時(shí)，攝像機(jī)識(shí)別界面用于幫助用戶輸入。此外，微信團(tuán)隊(duì)還可以使用各種微信小程序接口，例如地理接口。充分利用這些接口將極大地提高用戶輸入的效率和準(zhǔn)確性并優(yōu)化體驗(yàn)。除了使用界面，當(dāng)你必須讓用戶手動(dòng)輸入時(shí)，你應(yīng)該嘗試讓用戶做出選擇而不是鍵盤輸入。一方面，記憶很容易記住，用戶通常更容易在有限的選項(xiàng)中做出選擇。另一方面，很容易依賴記憶輸入;另一方面，由于手機(jī)鍵盤的密集單按鈕輸入，仍然容易引起輸入錯(cuò)誤。例如，在該圖中，在搜索用戶時(shí)提供搜索歷史快捷方式選項(xiàng)將幫助用戶快速搜索，同時(shí)減少或避免不必要的鍵盤輸入。 2.避免濫用。因?yàn)槲覀冇|摸手機(jī)上的屏幕來(lái)控制界面，所以手指的點(diǎn)擊精度遠(yuǎn)遠(yuǎn)低于鼠標(biāo)的點(diǎn)擊精度。因此，當(dāng)需要在設(shè)計(jì)頁(yè)面上單擊控件時(shí)，應(yīng)充分考慮熱區(qū)域以避免點(diǎn)擊區(qū)域太小或太密集而不會(huì)導(dǎo)致誤操作。當(dāng)簡(jiǎn)單地將最初在計(jì)算機(jī)屏幕上使用的接口移植到移動(dòng)電話而沒(méi)有任何適應(yīng)時(shí)，這些問(wèn)題通常易于發(fā)生。由于移動(dòng)電話的屏幕分辨率不同，所以合適的咔嗒聲的像素尺寸不完全相同，但在轉(zhuǎn)換成物理尺寸后大致在7mm到9mm之間。在微信提供的標(biāo)準(zhǔn)組件庫(kù)中，各種控件都考慮了頁(yè)面點(diǎn)擊效果和不同屏幕的適應(yīng)性，因此建議再次使用或模仿標(biāo)準(zhǔn)控件尺寸。 3.使用界面提高性能微信 Design Center推出了一套web標(biāo)準(zhǔn)控件庫(kù)，包括草圖設(shè)計(jì)控件庫(kù)和Photoshop設(shè)計(jì)控件庫(kù)，并將進(jìn)一步完善小程序組件，這些控件都充分考慮了特性移動(dòng)頁(yè)面，可以保證移動(dòng)頁(yè)面的可用性和操作性能;與此同時(shí)，微信開(kāi)發(fā)團(tuán)隊(duì)不斷改進(jìn)和擴(kuò)展微信小程序接口，并提供微信公共庫(kù)。這些資源不僅可以為用戶提供更快的服務(wù)，還可以提供頁(yè)面性能。這種改進(jìn)效果很好，無(wú)形中增強(qiáng)了用戶體驗(yàn)。四，統(tǒng)一穩(wěn)定性除了上述原則外，建議連接到微信的小程序還應(yīng)注意不同頁(yè)面之間的一致性和連續(xù)性，盡量在不同頁(yè)面上使用一致的控件和交互方法。統(tǒng)一的頁(yè)面體驗(yàn)和連續(xù)的界面元素將有助于實(shí)現(xiàn)使用目標(biāo)，同時(shí)降低學(xué)習(xí)成本，減少頁(yè)面反彈帶來(lái)的不適感。因此，小程序可以根據(jù)需要使用微信提供的標(biāo)準(zhǔn)控件來(lái)實(shí)現(xiàn)統(tǒng)一的穩(wěn)定性。 V.視覺(jué)規(guī)范＆lt; 1。字體規(guī)范微信中字體的使用與正在運(yùn)行的系統(tǒng)字體一致。常用的字體大小為20,18,17,16,14,13（pt），使用場(chǎng)景如下：＆lt; 2.字體顏色主要內(nèi)容黑色黑色，次要內(nèi)容灰色灰色;時(shí)間戳和表格默認(rèn)值淺灰色;大段描述內(nèi)容屬于Semi black的主要內(nèi)容。藍(lán)色是鏈接顏色，綠色是結(jié)束顏色，紅色是錯(cuò)誤顏色。按下和禁用狀態(tài)分別將透明度降低到20％和10％。 ＆LT; 3。列出視覺(jué)規(guī)范＆lt; 4。表格輸入視覺(jué)規(guī)范＆lt; 5。按鈕使用原理＆lt; 6。圖標(biāo)使用原理6.資源下載方便設(shè)計(jì)人員設(shè)計(jì)，微信提供了一套網(wǎng)頁(yè)設(shè)計(jì)和小程序使用的基本控件庫(kù);它還提供便于開(kāi)發(fā)人員調(diào)用的資源。 WeUI_sketch組件庫(kù)下載WeUI_PS組件庫(kù)下載