微信小程序

差異化策略營(yíng)銷解決方案

微信小程序+公眾號(hào)+朋友圈,用連接綻放品牌的精彩

首頁(yè)    >    微信小程序    >    微活動(dòng)    >    

完整的微信H5頁(yè)面設(shè)計(jì)規(guī)范

微信火了H5的專題活動(dòng)頁(yè)面設(shè)計(jì)也越來(lái)越多了,經(jīng)常有朋友問(wèn)H5專題設(shè)計(jì)按什么尺寸來(lái)做,

有沒(méi)有統(tǒng)一的規(guī)范,這里就給大家分享一套非常完整的關(guān)于微信H5活動(dòng)頁(yè)面設(shè)計(jì)的UI視覺(jué)設(shè)計(jì)規(guī)范教程。

希望對(duì)那些剛剛從事微信H5界面設(shè)計(jì)的小伙伴們提供一些幫助。

完整的微信H5頁(yè)面設(shè)計(jì)規(guī)范
上海微信H5活動(dòng)頁(yè)面設(shè)計(jì)規(guī)范

深圳微信H5活動(dòng)頁(yè)面設(shè)計(jì)規(guī)范

• 微信自帶的頂Bar大小是640*108

• 常規(guī)Logo位置:Logo高度45PX,四周間距為30PX。

• 主標(biāo)題文字最大區(qū)間為420*110,如果沒(méi)有副標(biāo)題,最大區(qū)間可以調(diào)整至420*170

• 副標(biāo)題文字最大區(qū)間為420*50

• 主KV區(qū)域最大范圍寬度小于等于580*高度小于等于480,位置整體居中處理

• 按鈕大小為320*80(高度不得小于50)

• 文字按鈕樣式:文字按鈕由文字+線框圖標(biāo)組成,文字選擇黑體,樣式下劃線,大小25px;圖標(biāo)樣式線框圖標(biāo),高度38px,與文字間距13px,與常規(guī)按鈕間距16px。整體與常規(guī)按鈕居中排放。

Logo樣式:3:2或者異形比例Logo高度為80px,寬度不限,與主標(biāo)題間距為4px

以上就是微信APP上的H5界面設(shè)計(jì)規(guī)范。