微信小程序

为您定制小程序开发及微信运营方案

微信小程序开发+公众号+朋友圈,量身定制+独立部署

首页 > 微活动

完整的微信H5页面设计规范

微信火【huǒ】了H5的【de】专题活动页【yè】面【miàn】设【shè】计也越来越多了,经常有朋【péng】友问H5专题设计按什么尺寸【cùn】来【lái】做,

有没有统一的规范,这【zhè】里【lǐ】就给大家分享一套非常完整的【de】关于【yú】微【wēi】信H5活【huó】动页面设计的【de】UI视觉设计规范教程。

希望对那些刚刚从事微信H5界面设计的小伙伴们提供一些帮助。

H5活动页面
微信H5活动页面设计规范

微信H5活动页面设计规范

• 微信自带的顶Bar大小是640*108

• 常【cháng】规Logo位【wèi】置:Logo高度45PX,四周间距【jù】为30PX。

• 主【zhǔ】标题文字【zì】最大区间为420*110,如果【guǒ】没有【yǒu】副标题,最大区间可以调整至【zhì】420*170

• 副标题文字最大区间为420*50

• 主KV区域最【zuì】大范【fàn】围宽【kuān】度小于等于580*高度小【xiǎo】于等于480,位置整体【tǐ】居中处理

• 按钮大小为320*80(高度不得小于50)

• 文字按钮样式【shì】:文【wén】字按钮由文字+线【xiàn】框图标组成【chéng】,文字选【xuǎn】择黑体【tǐ】,样式下划线,大小25px;图标样式【shì】线框图标,高度38px,与【yǔ】文字间距13px,与常规按钮间【jiān】距16px。整体与【yǔ】常规按钮居中【zhōng】排放。

Logo样式:3:2或【huò】者异形【xíng】比例Logo高度为80px,宽度不限,与主【zhǔ】标题间距【jù】为4px

以上就是微信APP上的H5界面设计规范。