微信是目前最多人使用且使用頻率最高的一款軟件，因此微信的ui設計是有非常大的市場的，學習微信ui設計的人也很多，下面我們跟隨小編一起來了解一下微信ui設計規范的相關資料吧。

微信ui設計規范

一、尺寸

　　微信開發尺寸是rpx(responsive pixel)，可以實現一稿適配所有屏幕尺寸，微信編譯后，rpx會做一次px換算。換算是以375個物理像素為基準，也就是在一個寬度為375物理像素的屏幕下，1rpx = 1px。這里了解就行，設計稿尺寸375px或750px都沒問題。

　　二、官方微信菜單

　　a.全局性的，不可自定義，位置固定

　　菜單位于所有界面(包括內嵌的網頁和插件)，且位置固定，開發者不可對其內容進行自定義，只能選擇深淺兩種配色方案，設計時要預留出該位置區域，若要在微信菜單附近放置可交互元素，要注意與微信菜單不沖突，可識別，易操作。

　　b.常見的三種狀態

　　微信菜單常見的三種狀態：全局菜單、調用錄音、獲取地理位置。

（圖片來自網絡）

　　三、標題導航欄設計（Title bar）

　　標題導航樣式設計時要與微信微信菜單樣式保持一定差異性，便于區分。另外標題導航的背景可以自定義背景顏色或圖片(這里注意給開發小哥時需要把圖切出來)，還可以設置不透明度，是不是很帥。

　　二級頁面要設計有返回鍵，要讓用戶知道自己在哪，怎么回去。如果頁面層級太多有個一鍵返回首頁按鈕在體驗上會友好很多，如知乎二級頁面。

　　四、標簽分頁導航設計（Tab bar）

　　標簽分頁導航分為：頂部標簽導航和底部標簽導航，官方建議標簽數量為2-5個。不過對頂部導航來說關系不大可以根據具體項目需要來設計，底部導航最好還是按照規范來。

　　a.頂部標簽導航

　　頂部標簽導航可以自定義顏色和樣式，可以點擊也支持沿X軸滑動，也就是說點擊不是頂部標簽欄唯一的交互方式。

　　b.底部標簽導航

　　底部標簽導航提供了四種不同圖形的設計規范，滿足了圓形、方形、高矩形和寬矩形四種形狀類型。根據規范設計可以更方便進行視覺修正，保持圖標的統一性。數量上3-4個最常見。或者直接去掉底部標簽導航，如微信讀書。

（圖片來自網絡）

　　五、內容設計

　　內容部分和app設計差不多，app設計規范在這里也適用。

　　a.微信彈窗優先級并不是最高的。官方微信菜單的層級優先級是最高的。即使在app中優先級最高的彈窗到這里層級也得在微信菜單之下，即便沉浸式體驗也不例外。而且標題欄和底部標簽欄優先級也是在彈窗之上的。

　　b.視頻位置。微信內視頻是固定位置浮動的，滑動頁面視頻不會沿Y軸移動，如優酷視頻。不過也有技術比較厲害的突破了這一限制支持視頻Y軸滑動，如騰訊視頻、愛奇藝。測試了六款主流視頻app，全都是固定位置。所以，實在不好搞就不要難為程序小哥了。

　　六、加載樣式

　　若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。

　　載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。

　　不要在同一個頁面同時使用超過1個加載動畫。

　　模態的加載樣式將覆蓋整個頁面的，由于無法明確告知具體加載的位置或內容將可能引起用戶的焦慮感，應謹慎使用。

　　“頁面內加載反饋”可以自定義，其余加載樣式微信提供統一標準，無需自行開發。

（圖片來自網絡）

　　七、全局操作結果反饋

　　圖標型彈出提示適用于輕量級的成功提示，1.5秒后自動消失，并不打斷流程，對用戶影響較小，適用于不需要強調的操作提醒，例如成功提示。

　　文字型彈出提示適用于需要輕量化地用文字解釋當前狀態或提醒不嚴重的錯誤。1.5秒后自動消失，不打斷流程，對用戶影響較小。

　　對于需要用戶明確知曉的操作結果狀態可通過模態對話框來提示，并可附帶下一步操作指引。

　　對于操作結果已經是當前流程的終結的情況，可使用操作結果頁來反饋。

　　其實小編覺得只要掌握了微信ui設計規范的內容，你也可以輕松設計出界面簡單大氣的微信ui設計，讓微信的ui設計變得更加簡單哦!