多终端产品 - 解析原型画布尺寸和界面尺寸（上）-京东云开发者社区

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/8a9198a7-a2b0-493f-9933-b80023eddbdc20210122103750.gif)</center>

### 写在前面

当我们打开Sketch或Photoshop开始设计产品界面时，首先会习惯性地设置一个画布尺寸，这是我们设计师最习以为常的一个操作，以至于我们几乎从未质疑过画布尺寸的大小，像Sketch软件已经为设计师配置好了各种设计场景下的界面画布尺寸。

当我们进行设计评审或进入前端开发阶段时，前端开发工程师可能会提出一些关于界面实现的问题，比如：网页标准宽度是多少？提供的画布尺寸就是页面的标准宽度吗？网页最大宽度和最小宽度又是多少？产品界面是响应式的吗？如果是响应式界面设计，界面在多少宽度时需要断点展示，需要几个断点？产品界面如何兼容全部终端设备类型？

作为用户体验设计师，以上问题需要我们设计师在开始制作产品界面之前就要思考清楚。在日常设计工作中，我们遇到最多的设计项目就是web产品和APP，从设备终端来看，分别是PC端和移动端产品，所以下面我从PC端和移动端两大维度来分析用户界面设计中的尺寸。

### 画布和界面的区别

首先区分一下画布和界面。画布和界面都是承载信息的载体，但是画布不能当作界面，两者有一定的区别，因为我们无法通过画布尺寸来预测终端设备屏幕尺寸。

##### 画布是用来绘画的地方，在做图软件中，画布就是位于图层最下方的图层。

如下图所示，我们使用设计软件新建空白文档后必须要新建画布，所有的产品界面都是在画布之上展开设计的，但是画布尺寸并不能等同于产品界面尺寸。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/f1657b7a-4965-4213-8733-a842a37162ec20210122100509.png)</center>

<center>图：Photoshop新建文档-新建画布</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/ebcd762d-6772-4690-93ad-e6823553ef0720210122100555.png)</center>

<center>图：Sketch新建文档-新建画板</center>

本文所说的尺寸会区分画布尺寸和界面尺寸。

#### 简单来说，画布尺寸就是我们制作产品界面原型时显示的尺寸，界面尺寸则是在所有不同设备上实际展的尺寸。简单来说，画布尺寸就是我们制作产品界面原型时显示的尺寸，界面尺寸则是在所有不同设备上实际展的尺寸。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/1618157f-65f4-416b-b4d6-f83c1c018bc420210122101017.png)</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/18c32aed-2b5e-4cec-94ac-4274aaac5c0c20210122101106.png)
</center>