微信是目前最多人使用且使用頻率最高的一款軟件,因此微信的ui設(shè)計(jì)是有非常大的市場(chǎng)的,學(xué)習(xí)微信ui設(shè)計(jì)的人也很多,下面我們跟隨小編一起來了解一下微信ui設(shè)計(jì)規(guī)范的相關(guān)資料吧。
微信ui設(shè)計(jì)規(guī)范
一、尺寸
微信開發(fā)尺寸是rpx(responsive pixel),可以實(shí)現(xiàn)一稿適配所有屏幕尺寸,微信編譯后,rpx會(huì)做一次px換算。換算是以375個(gè)物理像素為基準(zhǔn),也就是在一個(gè)寬度為375物理像素的屏幕下,1rpx = 1px。這里了解就行,設(shè)計(jì)稿尺寸375px或750px都沒問題。
二、官方微信菜單
a.全局性的,不可自定義,位置固定
菜單位于所有界面(包括內(nèi)嵌的網(wǎng)頁和插件),且位置固定,開發(fā)者不可對(duì)其內(nèi)容進(jìn)行自定義,只能選擇深淺兩種配色方案,設(shè)計(jì)時(shí)要預(yù)留出該位置區(qū)域,若要在微信菜單附近放置可交互元素,要注意與微信菜單不沖突,可識(shí)別,易操作。
b.常見的三種狀態(tài)
微信菜單常見的三種狀態(tài):全局菜單、調(diào)用錄音、獲取地理位置。
(圖片來自網(wǎng)絡(luò))
三、標(biāo)題導(dǎo)航欄設(shè)計(jì)(Title bar)
標(biāo)題導(dǎo)航樣式設(shè)計(jì)時(shí)要與微信微信菜單樣式保持一定差異性,便于區(qū)分。另外標(biāo)題導(dǎo)航的背景可以自定義背景顏色或圖片(這里注意給開發(fā)小哥時(shí)需要把圖切出來),還可以設(shè)置不透明度,是不是很帥。
二級(jí)頁面要設(shè)計(jì)有返回鍵,要讓用戶知道自己在哪,怎么回去。如果頁面層級(jí)太多有個(gè)一鍵返回首頁按鈕在體驗(yàn)上會(huì)友好很多,如知乎二級(jí)頁面。
四、標(biāo)簽分頁導(dǎo)航設(shè)計(jì)(Tab bar)
標(biāo)簽分頁導(dǎo)航分為:頂部標(biāo)簽導(dǎo)航和底部標(biāo)簽導(dǎo)航,官方建議標(biāo)簽數(shù)量為2-5個(gè)。不過對(duì)頂部導(dǎo)航來說關(guān)系不大可以根據(jù)具體項(xiàng)目需要來設(shè)計(jì),底部導(dǎo)航最好還是按照規(guī)范來。
a.頂部標(biāo)簽導(dǎo)航
頂部標(biāo)簽導(dǎo)航可以自定義顏色和樣式,可以點(diǎn)擊也支持沿X軸滑動(dòng),也就是說點(diǎn)擊不是頂部標(biāo)簽欄唯一的交互方式。
b.底部標(biāo)簽導(dǎo)航
底部標(biāo)簽導(dǎo)航提供了四種不同圖形的設(shè)計(jì)規(guī)范,滿足了圓形、方形、高矩形和寬矩形四種形狀類型。根據(jù)規(guī)范設(shè)計(jì)可以更方便進(jìn)行視覺修正,保持圖標(biāo)的統(tǒng)一性。數(shù)量上3-4個(gè)最常見?;蛘咧苯尤サ舻撞繕?biāo)簽導(dǎo)航,如微信讀書。
(圖片來自網(wǎng)絡(luò))
五、內(nèi)容設(shè)計(jì)
內(nèi)容部分和app設(shè)計(jì)差不多,app設(shè)計(jì)規(guī)范在這里也適用。
a.微信彈窗優(yōu)先級(jí)并不是最高的。官方微信菜單的層級(jí)優(yōu)先級(jí)是最高的。即使在app中優(yōu)先級(jí)最高的彈窗到這里層級(jí)也得在微信菜單之下,即便沉浸式體驗(yàn)也不例外。而且標(biāo)題欄和底部標(biāo)簽欄優(yōu)先級(jí)也是在彈窗之上的。
b.視頻位置。微信內(nèi)視頻是固定位置浮動(dòng)的,滑動(dòng)頁面視頻不會(huì)沿Y軸移動(dòng),如優(yōu)酷視頻。不過也有技術(shù)比較厲害的突破了這一限制支持視頻Y軸滑動(dòng),如騰訊視頻、愛奇藝。測(cè)試了六款主流視頻app,全都是固定位置。所以,實(shí)在不好搞就不要難為程序小哥了。
六、加載樣式
若載入時(shí)間較長(zhǎng),應(yīng)提供取消操作,并使用進(jìn)度條顯示載入的進(jìn)度。
載入過程中,應(yīng)保持動(dòng)畫效果 ; 無動(dòng)畫效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺。
不要在同一個(gè)頁面同時(shí)使用超過1個(gè)加載動(dòng)畫。
模態(tài)的加載樣式將覆蓋整個(gè)頁面的,由于無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感,應(yīng)謹(jǐn)慎使用。
“頁面內(nèi)加載反饋”可以自定義,其余加載樣式微信提供統(tǒng)一標(biāo)準(zhǔn),無需自行開發(fā)。
(圖片來自網(wǎng)絡(luò))
七、全局操作結(jié)果反饋
圖標(biāo)型彈出提示適用于輕量級(jí)的成功提示,1.5秒后自動(dòng)消失,并不打斷流程,對(duì)用戶影響較小,適用于不需要強(qiáng)調(diào)的操作提醒,例如成功提示。
文字型彈出提示適用于需要輕量化地用文字解釋當(dāng)前狀態(tài)或提醒不嚴(yán)重的錯(cuò)誤。1.5秒后自動(dòng)消失,不打斷流程,對(duì)用戶影響較小。
對(duì)于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對(duì)話框來提示,并可附帶下一步操作指引。
對(duì)于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況,可使用操作結(jié)果頁來反饋。
其實(shí)小編覺得只要掌握了微信ui設(shè)計(jì)規(guī)范的內(nèi)容,你也可以輕松設(shè)計(jì)出界面簡(jiǎn)單大氣的微信ui設(shè)計(jì),讓微信的ui設(shè)計(jì)變得更加簡(jiǎn)單哦!