首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

北京微信小程序设计尺寸规范及标准详解

1.屏幕分辨率宽度

我们只看PC端,根据现在屏幕大小的分布统计

北京微信小程序开发过程中绝大多数屏幕的分辨率已经超过1366*768,这是个屏幕逐渐变大的趋势,几年前我们还需要考虑在1024*768这个非常普遍的分辨率下的显示效果,现在基本上不需要单独对其做处理了。

这个分辨率值只是上限参考,你不可能把页面的实际显示内容区搞到这个值,因为在Windows等部分浏览器上,滚动条等也要占据宽度,同时过分的贴边在设计上是不被推荐的。

理解了这个我们就能清楚的知道一个基准值的参考范围。

2.栅格与响应式设计

这里需要理解一个概念,通常为了布局方便我们将内容区域划分为12或者24格,并在栅格间增加通用间距来处理绝大多数情况下的垂直排列问题,12或24的好处是能够被2、3、4整除,更方便来处理2:1,1:2:1等常见间距。

计算方式

到这里基本上就知道为什么我们常见的值会是1180。这个值叫做典型设计参照,以往的设计平面稿是没办法动态适配各种宽度的,用典型值来作为设计稿基准尺寸能够表达典型效果,并在页面实现时更容易还原。

响应式布局是最近几年比较流行的概念,在微信小程序页面渲染时,能够根据视窗宽度自动对Layout及页面元素进行重新排列。比较常见的Bootstrap响应式部分的介绍:

以及栅格部分的详细描述:

关于微信小程序页面字体大小等问题,也可以参考上面比较经典的设计规范约定。常见的内容段落文字大小约定为14px。我这边在做的规范,关于排版的约定如下:

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询