雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

微信ui設(shè)計(jì)的規(guī)范具體有哪些,最新的微信ui設(shè)計(jì)改版你喜歡嗎

Time: 2021-04-06

說(shuō)起微信,相信如今智能手機(jī)普及的今天,幾乎很多人都有這個(gè)軟件,并且都有一定程度的使用。為什么大家都喜歡使用微信,那是因?yàn)槲⑿舥i設(shè)計(jì)切合大家心理,而這離不開(kāi)微信的ui設(shè)計(jì)規(guī)范。微信ui設(shè)計(jì)的規(guī)范具體有哪些?最新的微信ui設(shè)計(jì)改版你喜歡嗎?今天就讓faceui為大家介紹。

  微信ui設(shè)計(jì)的規(guī)范具體有哪些

  一、尺寸

  微信開(kāi)發(fā)尺寸是rpx(responsive pixel),可以實(shí)現(xiàn)一稿適配所有屏幕尺寸,微信編譯后,rpx會(huì)做一次px換算。換算是以375個(gè)物理像素為基準(zhǔn),也就是在一個(gè)寬度為375物理像素的屏幕下,1rpx = 1px。這里了解就行,設(shè)計(jì)稿尺寸375px或750px都沒(méi)問(wèn)題。

  二、官方微信菜單

  1、全局性的,不可自定義,位置固定:菜單位于所有界面(包括內(nèi)嵌的網(wǎng)頁(yè)和插件),且位置固定,開(kāi)發(fā)者不可對(duì)其內(nèi)容進(jìn)行自定義,只能選擇深淺兩種配色方案,設(shè)計(jì)時(shí)要預(yù)留出該位置區(qū)域,若要在微信菜單附近放置可交互元素,要注意與微信菜單不沖突,可識(shí)別,易操作。

  2、常見(jiàn)的三種狀態(tài):微信菜單常見(jiàn)的三種狀態(tài):全局菜單、調(diào)用錄音、獲取地理位置。

  三、標(biāo)題導(dǎo)航欄設(shè)計(jì)(Title bar)

  標(biāo)題導(dǎo)航樣式設(shè)計(jì)時(shí)要與微信微信菜單樣式保持一定差異性,便于區(qū)分。另外標(biāo)題導(dǎo)航的背景可以自定義背景顏色或圖片(這里注意給開(kāi)發(fā)小哥時(shí)需要把圖切出來(lái)),還可以設(shè)置不透明度,是不是很帥。

  二級(jí)頁(yè)面要設(shè)計(jì)有返回鍵,要讓用戶知道自己在哪,怎么回去。如果頁(yè)面層級(jí)太多有個(gè)一鍵返回首頁(yè)按鈕在體驗(yàn)上會(huì)友好很多,如知乎二級(jí)頁(yè)面。

微信ui設(shè)計(jì)

微信ui設(shè)計(jì)(圖片來(lái)自網(wǎng)絡(luò))


  四、標(biāo)簽分頁(yè)導(dǎo)航設(shè)計(jì)(Tab bar)

  標(biāo)簽分頁(yè)導(dǎo)航分為:頂部標(biāo)簽導(dǎo)航和底部標(biāo)簽導(dǎo)航,官方建議標(biāo)簽數(shù)量為2-5個(gè)。不過(guò)對(duì)頂部導(dǎo)航來(lái)說(shuō)關(guān)系不大可以根據(jù)具體項(xiàng)目需要來(lái)設(shè)計(jì),底部導(dǎo)航最好還是按照規(guī)范來(lái)。

  1、頂部標(biāo)簽導(dǎo)航:頂部標(biāo)簽導(dǎo)航可以自定義顏色和樣式,可以點(diǎn)擊也支持沿X軸滑動(dòng),也就是說(shuō)點(diǎn)擊不是頂部標(biāo)簽欄唯一的交互方式。

  2、底部標(biāo)簽導(dǎo)航:底部標(biāo)簽導(dǎo)航提供了四種不同圖形的設(shè)計(jì)規(guī)范,滿足了圓形、方形、高矩形和寬矩形四種形狀類型。根據(jù)規(guī)范設(shè)計(jì)可以更方便進(jìn)行視覺(jué)修正,保持圖標(biāo)的統(tǒng)一性。數(shù)量上3-4個(gè)最常見(jiàn)?;蛘咧苯尤サ舻撞繕?biāo)簽導(dǎo)航,如微信讀書(shū)。

  五、內(nèi)容設(shè)計(jì)

  內(nèi)容部分和app設(shè)計(jì)差不多,app設(shè)計(jì)規(guī)范在這里也適用。

  1、微信彈窗優(yōu)先級(jí)并不是最高的。官方微信菜單的層級(jí)優(yōu)先級(jí)是最高的。即使在app中優(yōu)先級(jí)最高的彈窗到這里層級(jí)也得在微信菜單之下,即便沉浸式體驗(yàn)也不例外。而且標(biāo)題欄和底部標(biāo)簽欄優(yōu)先級(jí)也是在彈窗之上的。

  2、視頻位置。微信內(nèi)視頻是固定位置浮動(dòng)的,滑動(dòng)頁(yè)面視頻不會(huì)沿Y軸移動(dòng),如優(yōu)酷視頻。不過(guò)也有技術(shù)比較厲害的突破了這一限制支持視頻Y軸滑動(dòng),如騰訊視頻、愛(ài)奇藝。測(cè)試了六款主流視頻app,全都是固定位置。所以,實(shí)在不好搞就不要難為程序小哥了。

  六、加載樣式

  若載入時(shí)間較長(zhǎng),應(yīng)提供取消操作,并使用進(jìn)度條顯示載入的進(jìn)度。載入過(guò)程中,應(yīng)保持動(dòng)畫效果 ; 無(wú)動(dòng)畫效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺(jué)。不要在同一個(gè)頁(yè)面同時(shí)使用超過(guò)1個(gè)加載動(dòng)畫。模態(tài)的加載樣式將覆蓋整個(gè)頁(yè)面的,由于無(wú)法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感,應(yīng)謹(jǐn)慎使用。“頁(yè)面內(nèi)加載反饋”可以自定義,其余加載樣式微信提供統(tǒng)一標(biāo)準(zhǔn),無(wú)需自行開(kāi)發(fā)。

  七、全局操作結(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)可通過(guò)模態(tài)對(duì)話框來(lái)提示,并可附帶下一步操作指引。對(duì)于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況,可使用操作結(jié)果頁(yè)來(lái)反饋。

微信ui設(shè)計(jì)

微信ui設(shè)計(jì)(圖片來(lái)自網(wǎng)絡(luò))


  最新的微信ui設(shè)計(jì)改版你喜歡嗎

  1、開(kāi)屏

  萬(wàn)年不變的開(kāi)屏,在更新之后,用戶首次使用時(shí),使用了視頻方式,給用戶一種全新的感官體驗(yàn)。

  2、界面視覺(jué)

  全新的界面視覺(jué)改版。新版視覺(jué)更加年輕活力,改版后的微信視覺(jué)和QQ很像,在獲得中國(guó)最大的用戶App后,微信的用戶增長(zhǎng)瓶頸到了難以突破的地步,而這次通過(guò)改變,迎合部分qq用戶和新生代人群,可以促進(jìn)用戶數(shù)量的增長(zhǎng)。列表圖標(biāo)樣式從面型變線性。減弱了圖標(biāo)的視覺(jué)感知,和功能文字對(duì)比起來(lái)反而凸顯了文字,使得用戶更聚焦功能文字。

  3、錢包改為支付

  錢包改為支付體現(xiàn)出未來(lái)騰訊在支付領(lǐng)域重視。之前一直叫錢包,帶有明顯的零花錢之意,這也導(dǎo)致用戶在使用微信支付時(shí),將微信就定位為零錢使用,較大金額大部分用戶會(huì)選擇支付寶。同時(shí)用綠色卡片提升視覺(jué)注意力,也再次強(qiáng)調(diào)了支付的重要性。

  4、短視頻

  時(shí)刻視頻,朋友在一天內(nèi)可見(jiàn)。入口在「我」的右上角,另外,通過(guò)「相冊(cè)」也可以看到「時(shí)刻視頻」的記錄。還有一個(gè)入口,在通信錄的「星標(biāo)朋友」這里。微信通過(guò)時(shí)刻視頻在短視頻方向做出積極的嘗試,希望以此改變現(xiàn)狀。

  5、強(qiáng)提醒

  隨著用戶越來(lái)越離不開(kāi)微信,大量的消息涌向用戶。微信如何提升用戶收發(fā)消息的效率這是微信要解決的問(wèn)題。所以這次微信通過(guò)強(qiáng)提醒來(lái)改善這一現(xiàn)狀,用戶通過(guò)設(shè)置強(qiáng)提醒就可以更加容易的看到重要人的信息。

  6、看一看

  在「看一看」里,可以瀏覽朋友們認(rèn)為「好看」(推薦)的文章。通過(guò)好友互動(dòng)查看用戶看興趣的文章,提升用戶查看興趣的效率和粘性,同時(shí)也曝光公眾號(hào)的展現(xiàn)量。

  以上就是faceui為大家介紹的關(guān)于微信ui設(shè)計(jì)的相關(guān)內(nèi)容。微信之所以能受到這么多人的使用和關(guān)注,很大程度上就是在于微信的ui設(shè)計(jì)合理且人性化,更多地關(guān)注使用者的感受和使用習(xí)慣。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)