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

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/2acff4e4-c3fc-4fce-8261-a24659d6bfa820210122112947.gif)</center>

### 移动端产品设计画布尺寸和界面尺寸

根据设备系统，移动端可分为iOS系统和Androd系统的手机设备。设备类型不同，则其屏幕尺寸和分辨率也会不同，我们该如何兼容不同手机设备类型来设计移动端产品界面呢？

### 一、  iOS&Android系统手机设备应用界面设计尺寸

据友盟数据显示，长期以来iOS设备屏幕尺寸使用量最大的前三名分别是5.5英寸（占比36.9%）、4.7英寸（占比34.9%）、5.8英寸（占比12.3%）。根据iOS手机设备屏幕尺寸得知，5.5英寸屏幕的宽高是414 x 736dp、4.7英寸屏幕的宽高是375 x 667dp、5.8英寸屏幕的宽高是375 x 812。为了更好地适配主流终端设备的应用显示，分别向上和向下兼容设计，所以采用4.7英寸屏幕尺寸宽高为375 x 667dp的尺寸来设计产品界面。在移动端，由于用户是无法改变窗口大小和分辨率的，所以设计移动端产品时，画布尺寸等于界面尺寸。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/65049d13-6ea6-4c83-bad0-1c9ba291314920210122113045.png)</center>
<center>2020年2月iOS手机设备屏幕尺寸使用占比·数据来源：友盟+数据智能平台 2020/03/01</center>

![](//img1.jcloudcs.com/developer.jdcloud.com/8f221c4c-e1ca-4dd3-98ab-b1a60621146b20210122113137.png)

<center>图：iOS手机设备屏幕尺寸</center>

同样来自友盟的数据统计，目前手机品牌使用率最高的手机先后顺序分别是vivo、OPPO、苹果、华为、荣耀、小米、魅族、三星等。长期以来Android手机设备屏幕尺寸使用率最高的分别是5.5英寸（占比17.7%）、5.0英寸（占比7.5%）、6.2英寸（占比6.9%），从Android手机屏幕尺寸图可知，5.5英寸对应的宽高尺寸是360 x 640dp，5.0英寸对应的宽高尺寸是360 x 640dp，6.2英寸对应的宽高尺寸是360 x 760dp。根据iOS相同的适配规则，选择5.0英寸宽高尺寸为360 x 640dp。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/3f6a5e06-a480-4394-993b-03a7f954eead20210122115934.png)</center>
<center>2020年2月Android手机设备屏幕尺寸使用占比·数据来源：友盟+数据智能平台 2020/03/01</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a057ab8b-ac23-4559-a980-de8ae6d4955320210122120138.png)</center>
<center>图：Android手机设备屏幕尺寸（部分）</center>

以往由于iOS和Android平台系统差异性很大，所以会分别根据iOS和Android平台设计规范设计产品界面。但是，近几年来，两大平台之间的界面设计差异越来越小，为了减少设计成本，一般只提供一套产品界面，遵循的界面设计尺寸是375 x 667dp（750x1334px），根据iOS设备尺寸来兼容Android系统手机设备的应用展示。

### 二、全面屏设计
当前，手机设备趋向于全面屏，所以在用户界面设计中需要考虑应用在全面屏下的适配。具体适配方案如下：在一倍像素下，状态栏高度44pt(@2X 88px)，标题栏高度44pt(@2X 88px)，底部操作区域34pt(@2X 68px)，底部操作栏除了要考虑视觉美观性，还需考虑界面底部操作区域的可用性问题，一定不能和手机（苹果）设备底部的系统操作出现操作重合的情况，否则，影响产品的使用体验。

### 总结
本篇文章主要阐述了多终端产品设计中的画布尺寸设置，以及应用在不同设备设备类型下的适配。PC端网页设计需考虑固定宽度页面和响应式界面设计，区分设计时的画布大小和页面在真实的设备上的适配情况。移动端界面设计，由于用户无法改变设备窗口大小和分辨率，画布尺寸和界面尺寸一致，从设计成本和为主流设备用户设计原则的考虑，采用375 x 667dp（750x1334px）的界面设计尺寸，分别向上和向下兼容不同手机设备类型。

#### 参考资料：
https://docs.microsoft.com/zh-cn/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design
https://uiiiuiii.com/screen/index.htm
https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
https://compass.umeng.com/#hardwareList

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/cc228beb-b13d-4ce3-91c9-54fccf5fbe9d20210122120318.png)</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a6624ecb-a8b5-4df7-8b58-c95c09aaa24920210122120344.png)</center>