微信html5活动页面制作,完整的微信H5活动页面设计规范

微信火了H5的专题页面设计也越来越多了,经常有朋友问H5专题设计按什么尺寸来做,有没有统一的规范,这里就给大家分享一套非常完整的关于微信H5活动页面设计的UI视觉设计规范教程。希望对那些刚刚从事微信H5界面设计的小伙伴们提供一些帮助。

微信H5活动页面设计规范

首页基本布局

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

2、常规Logo位置:Logo高度45PX,四周间距为30PX。

3、主标题文字更大区间为420*110,如果没有副标题,更大区间可以调整至420*170

4、副标题文字更大区间为420*50

5、主KV区域更大范围宽度小于等于580*高度小于等于480,位置整体居中处理

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

f4a8aeb15b4c2c7fa263809a01808cf5.png

按钮样式及选择

42eadd68b4ca306cd34573871a654199.png

文字按钮样式

文字按钮由文字+线框图标组成,文字选择黑体,样式下划线,大小25px;图标样式线框图标,高度38px,与文字间距13px,与常规按钮间距16px。整体与常规按钮居中排放。如图:

6207b3a832753866740a575695b8b42d.png

a46a56083249c6cdf1969225c29d1ab5.png

Logo样式

3:2或者异形比例Logo高度为80px,宽度不限,与主标题间距为4px

b1dc11f3a4fc776d1d928bde8e03402b.png

三个按钮的布局及样式

2866748727e853a2121de7e8cf30aac4.png

四个按钮的布局及样式

74e157cb76747c79a8ea7bb9f7d4e5e6.png

五个按钮的布局及样式

64144e098a482da9258abe65c41287cf.png

各部分文字字体及大小

cdf36b453b58a9800a91d32e165fd7dd.png

活动详情页设计

f5a4b2e347148a8dd4539475ec35ac3d.png

弹框样式及规范

c8a0a62d4266bdb6f75a05c03c3edba2.png

产品列表板式

3b0a76790425c7cdcdea372dca95b3fd.png

标准色使用

6299263a1971bf7eee55f9cc5f6e6bce.png

标准字使用

f915699f8657965ad3d563e36e7c666c.png

一般按钮

cc40bed0d7f0d79f0942dd609d113177.png

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值