如何設計微信小程序微信小程序設計指南
摘要基於微信小程序的輕快特性，我們起草了小程序界面設計的指南和建議。設計指南建立在充分尊重用戶知情權和操作權的基礎上。旨在微信生態內建立友好、高效、壹致的用戶體驗，同時最大程度地適應和支持不同需求，實現用戶和小程序服務商的***贏。
友好的禮貌
在微信上使用小程序服務時，為了避免用戶的註意力被周圍復雜的環境幹擾，小程序的設計要減少無關的設計元素對用戶目標的幹擾，禮貌地向用戶展示程序提供的服務，引導用戶友好地操作。
突出重點
每個頁面都應該有壹個清晰的焦點，這樣用戶每次進入新的頁面都能快速理解頁面的內容。在確定重點的前提下，盡量避免頁面上出現其他與用戶決策和操作無關的幹擾因素。
反例
這個頁面的主題是查詢，但是加入了很多與查詢無關的業務條目，與用戶的目標無關，容易導致用戶迷失。
校正信號
去掉任何與用戶目標無關的內容，明確頁面主題，在技術和頁面控制的前提下，提供有幫助的內容，比如最近的搜索詞，可以幫助用戶決策和操作。
反例
沒有主次操作，讓用戶別無選擇。
校正信號
首先，要避免並列過多操作供用戶選擇。當多個操作必須並列時，需要區分主次操作，以降低用戶選擇的難度。
清除流程
為了讓用戶流暢地使用頁面，當用戶正在進行某個操作過程時，要避免被用戶目標過程之外的內容打斷用戶。
反例
用戶意圖搜索，但在進入頁面時被突然出現的模態抽獎框打斷；對抽獎不感興趣的用戶是非常不友好的幹擾；即使部分用戶真的被“誘人”的抽獎所吸引，也可能在離開主流程進行抽獎後忘記了最初的目標，進而失去對產品真正價值的利用和理解。
明確
用戶壹旦進入我們的小程序頁面，我們就有責任和義務明確告知用戶他在哪裏，可以去哪裏，並保證用戶可以輕松穿梭頁面而不會迷路，從而為用戶提供安全愉悅的體驗。
導航清晰，來去自如。
導航是保證用戶在網頁瀏覽和跳轉時不會迷路的最關鍵因素。導航需要告訴用戶他們在哪裏，可以去哪裏，怎麽回去。首先，微信系統中所有小程序的所有頁面，都會有微信提供的自己的導航欄，解決去哪裏，怎麽回去的問題。微信層面的導航保持了體驗的壹致性，有助於用戶在微信內部形成統壹的體驗和交互認知，不會在小程序和其他微信頁面的切換中增加新的學習成本或改變使用習慣。
微信導航欄
微信導航條直接繼承自客戶端。除了導航欄顏色，開發者不需要自定義內容。但是開發者需要指定小程序每個頁面的跳轉關系，這樣導航系統才能以合理的方式工作。
微信導航欄分為導航區、標題區和操作區。導航區域控制程序頁面進程。目前導航欄分為兩種基本顏色:淺色和深色。
導航區域(iOS)
微信進入小程序首頁時，導航區通常只有壹個操作——“返回”，就是返回到進入小程序前的微信頁面。小程序後進入二級頁面，導航區的操作是——“返回”和“關閉”。“返回”，即返回到之前的小程序界面或微信界面。“關閉”是指在當前界面直接退出小程序，回到進入小程序前的微信頁面。
導航區域(Android)
導航區只有壹個獨特的操作——直接退出小程序，回到微信或系統桌面再進入小程序。Android手機自帶的硬件返回鍵執行返回上壹頁的操作。
Android中導航有壹種特殊情況:當用戶通過操作區的菜單向Android桌面添加小程序，並從Android桌面打開小程序時，小程序的首頁不顯示導航按鈕。僅顯示小程序標題和操作區域。在小程序的二級頁面上，導航區只有返回上壹頁的操作，點擊安卓手機自帶的硬件返回鍵也起到同樣的作用。
微信導航欄自定義顏色規則(iOS和Android)
小程序的導航欄支持背景色的基礎自定義功能，選擇的顏色需要在滿足可用性的前提下搭配微信提供的兩套主導航欄圖標。請參考以下顏色選擇效果:
顏色選擇方案示例
頁面內導航
開發者可以根據自己的功能設計需求，在頁面中添加自己的導航。並保持不同頁面之間的導航壹致。但是由於手機屏幕尺寸的限制，小程序頁面的導航要盡量簡單。如果只是壹般的線性瀏覽頁面，建議只用微信導航欄。
開發人員可以選擇applet頁面來添加選項卡導航。標簽欄可以固定在頁面的頂部或底部，方便用戶在不同標簽間切換。標簽的數量不應少於2個，也不應多於5個。為保證點擊面積，建議標簽數量不要超過4個。壹頁上不應有壹組以上的選項卡分頁列。
其中，小程序首頁可以選擇微信提供的原生底部標簽頁分頁樣式，該樣式僅針對小程序首頁。開發時，可以自定義圖標樣式、標簽復制和復制顏色等。圖標大小等具體設置，請參考開發文檔和WeUI基礎控件庫。
頂部選項卡分頁欄的顏色可以自定義。在自定義顏色選擇中，保持分頁欄選項卡的可用性、可見性和可操作性很重要。
減少等待，及時反饋。
頁面等待時間長會造成用戶心情不好，微信小程序提供的技術可以大大縮短等待時間。即便如此，當加載和等待不可避免地發生時，也需要及時反饋，緩解用戶等待的不良情緒。
開始頁面加載
小程序啟動頁面是小程序在微信中壹定程度上展現品牌特色的頁面之壹。本頁將突出小程序的品牌特征和加載狀態。除了品牌Logo顯示，頁面上其他所有元素，比如加載進度指示，都是微信統壹提供的，不能更改，不需要開發者開發。
頁面下拉刷新加載
在微信小程序內部，微信提供了標準的頁面下拉刷新加載能力和樣式，開發者無需自行開發。
微信下拉刷新錯誤用例
請避免以下誤用情況，確保信息的可視性和頁面的可用性。
頁面加載反饋
開發者可以自定義小程序中頁面內容的加載樣式。建議無論是使用局部加載還是全局加載，自定義加載樣式都要盡量簡潔，用簡單的動畫告知用戶加載過程。開發者也可以使用微信提供的統壹頁面加載樣式，如圖中的例子所示。
模態載荷
模態加載樣式會覆蓋整個頁面，由於無法明確說出具體的加載位置或內容，可能會引起用戶的焦慮，所以要謹慎使用。除非在某些全局操作中，否則不要使用模態加載。
局部負載反饋
本地加載反饋意味著只反饋頁面中觸發加載的本地部分。這種反饋機制更有針對性，頁面彈跳小。是微信推薦的壹種反饋方式。例如:
加載反饋註意事項
如果加載時間很長，應提供取消操作，並使用進度條顯示加載進度。
加載過程中，保持動畫效果；沒有動畫效果的加載很容易給人界面卡頓的錯覺。
不要在同壹頁面上同時使用1個以上的加載動畫。
結果反饋
除了在用戶等待過程中及時反饋，還需要對操作結果給出明確的反饋。根據實際情況，可以選擇不同的結果反饋風格。對於頁面的局部操作，可以在操作區直接給出反饋，對於頁面級操作的結果，可以使用彈出提示(Toast)、模態對話框或者結果頁面顯示。
頁面本地操作結果反饋
對於頁面的局部操作，可以在操作區直接給出反饋，如下圖點擊多選控件前後。對於常用控件，微信設計中心會提供壹個控件庫，其中所有控件都已經提供了完整的操作反饋。
全局頁面操作結果-彈出提示(Toast)
彈出提示(Toast)適用於輕量級成功提示，1.5秒後自動消失。它不會中斷進程，對用戶的影響也很小。適用於不需要強調的操作提醒，比如成功提示。特別註意這種形式，不適合錯誤提示，因為錯誤提示需要明確告知用戶，所以不適合使用flash彈出提示。
頁面全局操作結果-模式對話框
對於需要用戶清楚了解的操作結果狀態，可以通過模態對話框提示，也可以伴隨下壹步操作指令。
頁面全局操作結果-結果頁面
如果操作結果是當前流程的結束，可以使用操作結果頁面進行反饋。這樣最強烈、最明確地告知用戶操作已經完成，可以根據實際情況指導下壹步操作。
格外可控，有出路。
在設計任何任務和流程的時候，異常的狀態和流程往往會被忽略，而這些異常的場景往往是用戶最郁悶最需要幫助的時候。所以要特別註意異常狀態的設計，出現異常時要給用戶必要的狀態提示，並告知解決方法，讓他們有出路。
要杜絕用戶百思不得其解，無處可去，非正常狀態下停滯在某個頁面的情況。上面提到的模態對話框和結果頁可以作為異常狀態的提醒。此外，在表單頁面中，尤其是表單項較多的頁面，應該明確指出錯誤項，以便用戶修改。
異常形式錯誤
報告錯誤，在表單頂部告知錯誤原因，並標識錯誤字段以提示用戶修改。
方便又優雅
從PC時代的實體鍵盤鼠標到移動時代的手指，雖然輸入設備大大簡化，但手指操作的準確度遠不如鍵盤鼠標準確。為了適應這種變化，開發者需要在設計過程中充分利用手機的特性，讓用戶方便優雅地控制界面。
減少投入
由於手機鍵盤面積小且密集，輸入困難，容易造成輸入錯誤。因此，在設計小程序頁面時，利用已有的界面或其他易於操作的選擇控件來改善用戶輸入體驗。
比如下圖，添加銀行卡時，用攝像頭識別接口幫助用戶輸入。此外，微信團隊還對外開放了地理位置接口等多種微信小程序接口。充分利用這些界面，會大大提高用戶輸入的效率和準確性，從而優化體驗。
除了使用界面之外，當用戶不得不進行手動輸入時，應盡量選擇代替鍵盤輸入。壹方面，回憶容易記憶，用戶從有限的選項中選擇通常比記憶輸入更容易。另壹方面，還是認為手機鍵盤密集的單鍵輸入容易導致輸入錯誤。例如，在圖中，在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速搜索，同時減少或避免不必要的鍵盤輸入。
避免誤操作。
因為我們在手機上是用手指觸摸屏幕來控制界面的，所以手指的點擊精度遠不如鼠標。因此，在設計頁面上要點擊的控件時，我們需要充分考慮熱點區域，避免可點擊區域過小或過密導致的誤操作。將原本在電腦屏幕上使用的界面簡單移植到手機上，不做任何適配，往往會出現這種問題。由於手機屏幕分辨率不同，點擊的最佳像素大小也不完全相同，但換算成物理尺寸後大致在7mm-9mm之間。在微信提供的標準組件庫中，各類控件元素已經兼顧了頁面點擊效果和不同屏幕的適配，建議再次使用或模仿標準控件大小進行設計。
使用界面提高性能
微信設計中心已經推出了壹套網頁標準控件庫，包括素描設計控件庫和Photoshop設計控件庫，未來還會完善小程序組件。這些控件已經充分考慮了移動頁面的特點，能夠保證其在移動頁面上的可用性和操作性能；同時，微信開發團隊也在不斷完善和擴展微信小程序接口，並提供微信公***庫。利用這些資源不僅可以為用戶提供更快捷的服務，還可以大大提升頁面性能，無形中提升用戶體驗。
壹致
除了上述原則，建議接入微信的小程序要時刻註意不同頁面的統壹性和連續性，盡量在不同頁面使用相同的控件和交互方式。
統壹的頁面體驗和連續的界面元素，有助於以最低的學習成本達到使用目標，減少頁面跳轉帶來的不適感。正因如此，小程序可以根據需要使用微信提供的標準控件，達到統壹穩定的目的。
視覺規範
字體規格
微信內部字體與運行系統字體壹致。常見的字號有20，18，17，16，1413，11(pt，13，11(PT)。使用場景如下:
字體顏色
主要內容為黑色，次要內容為灰色；時間戳的默認值是淺灰色；大段的描述內容和它所屬的主要內容都用半黑色。
藍色是鏈接顏色，綠色是完成顏色，紅色是錯誤顏色。按下和禁用狀態的透明度分別降低20%和10%。
列表視覺規格
表單輸入可視規格
微信申領失業補助金步驟？
1.在支付中點擊城市服務
在微信的我界面點擊支付，然後點擊城市服務。
2.在五險壹金中點擊社保進去城市服務之後，點擊五險壹金下方的社保。
3.點擊電子社保卡進去之後，點擊電子社保卡，點擊卡面服務。
4點擊失業保險待遇申領
進去卡面服務之後，點擊失業保險待遇申領。
5填寫信息進行申領
點擊失業補助金旁邊的去申領，填寫信息進行申領即可。
哈爾濱社保網上繳費流程？
流程如下
壹是關註“哈爾濱醫保”微信公眾號後，點擊：醫保查詢—居民醫保參保查詢—城鄉居民參保，繼續按照步驟操作完成參保登記；
二是關註“哈爾濱銀行”微信公眾號後，點擊：薈·生活—醫保專區—城鄉居民醫保參保，繼續按照步驟操作完成參保登記。
三是登錄黑龍江省醫療保障局官網，點擊：網上服務—醫保網上服務大廳，註冊、登錄後，繼續按照步驟操作完成參保登記。
哈爾濱壹卡通怎麽辦理？
第壹種方式：
需要帶著身份證及戶口本去附近的壹卡通辦理點進行辦理親。辦理的地址:1.外區承德街196號
2．南崗區國民街93號
3．在第壹市立醫院側門對面，道裏區石島街70號
第二種方式：網上辦
1、微信搜索關註哈爾濱本地寶（hebbdb）微信公眾號，回復“城市通”即可獲取哈爾濱手機掃碼乘車操作指南、公交卡（老年卡、學生卡、壹卡通）辦理指南等信息
2、註意事項：在哈市使用“交通聯合”IC卡乘坐公交、地鐵和輪渡領域支付應用時，可享受普通卡優惠政策。在國內已完成交通壹卡通互聯互通升級改造的城市出行時，不享受當地優惠乘車政策。同時，在異地使用“交通聯合”IC卡時，需要用戶在異地辦理充值業務
哈爾濱社保局網上辦理流程？
1、申請
2、信息采集
3、領卡
點擊“在線申辦”，用手機掃描二維碼，下載安裝哈爾濱智慧人社APP(安卓版)。進入APP，選擇“業務經辦”—“社保卡網上申報”，輸入16周歲以下參保人員姓名、證件類型、證件號，進行初次校驗，通過後進入社保卡辦理具體頁面，按要求上傳照片並填寫內容，確認無誤點擊“提交”。
自作出受理決定之日起，在30工作日內作出批準或不予批準決定。
溫馨提醒：關註哈爾濱本地寶微信公眾號，回復社保，獲取社保查詢入口和申辦入口。
哈爾濱銀行如何綁定微信提醒業務？
對於哈爾濱銀行綁定微信提醒業務，可以按以下的方式來進行。
在微信中搜索哈爾濱銀行，關註哈爾濱銀行。然後把自己的銀行卡添加到哈爾濱銀行APP。之後，哈爾濱銀行綁定的APP在余額發生變動的情況下，在微信中就有提醒了。這樣操作是非常方便的。