基于微信小程序的亮度，我們開發了一個小程序接口設計指南和建議。設計指南基于對用戶知情權和操作權的充分尊重。旨在在微信生態系統中創建友好，高效和一致的用戶體驗，同時在很大程度上適應和支持不同需求，為用戶和小程序服務提供商實現雙贏。

首先，友好的禮貌為了避免用戶在微信中使用小程序服務，注意力受到周圍復雜環境的干擾。 小程序應注意減少無關設計元素對用戶目標的干擾，并禮貌地向用戶顯示程序提供的服務。引導用戶操作友好。 1.專注于每個頁面應該有一個明確的焦點，以便用戶可以在每次進入新頁面時快速了解頁面內容。在確定關鍵點的前提下，我們應該盡量避免頁面上與用戶決策和操作無關的其他干擾因素。反例

此頁面的主題是查詢，但它添加了許多與查詢無關的業務門戶。它與用戶的目標無關，很容易導致用戶迷路。

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