资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

UI设计画布尺寸问题，一篇搞定！

创作时间:

作者:

@小白创作中心

UI设计画布尺寸问题，一篇搞定！

引用

来源

https://m.zcool.com.cn/article/ZMTYyNzM5Mg==.html

在UI设计中，画布尺寸的选择是一个基础但至关重要的问题。本文将从分辨率的基础知识出发，结合实际应用场景，为读者提供全面的画布尺寸选择指南。

分辨率的基础知识认知

1.1 关于分辨率

在日常生活中，我们会接触到很多类型的分辨率设备，例如手机、智能手表、电脑等。这些设备在分辨率的细分上更是多种多样。在刚入门时很多设计师认为我们根据要做的设备、项目和系统类型，将所有设备分辨率列个清单，一个一个建立画布做就好（包括我自己）。但在实际的工作流程中完全不是这样，即使是同一个系统（例如iOS），其分辨率也是多种多样的，下图是figma中建立画布时的部分设备画布尺寸预览。

为什么设计软件中的手机画布的尺寸和我们平常听到的1080p分辨率不太一样？这就涉及到我们今天要分享的一个知识——

逻辑分辨率和物理分辨率

1.2 关于物理和逻辑分辨率

我们平常说的2K、4K其实是设备的物理分辨率，这里就拿苹果官网的设备来举例。可以看到iPhone15的像素分辨率是2556*1179，即代表这块屏幕在横向上有1179个像素点，纵向有2556个像素点。这是显示屏固有的参数，从每块屏幕出厂时这些像素点就被集成在屏幕中，是不能调节的。官网标注的就是这块屏幕的物理分辨率。

而逻辑分辨率则是应用通过软件或系统渲染到我们屏幕上的分辨率，例如平常我们放大缩小图片，游戏中改变游戏窗口大小，这些改变的都是逻辑分辨率，不会改变屏幕本身的分辨率。

在软件开发中，开发者们都会避开设备的物理分辨率，从而使用逻辑分辨率单位（例如dp、pt、px）进行开发。而这些逻辑单位都是矢量单位，所以UI设计软件也都是矢量软件。所以使用的画布大小也就和各类厂商标注的分辨率不一样。

系统会根据算法把我们做好的软件渲染到各种不同分辨率的设备上，由此诞生了1x、2x、3x、这样的倍图概念。例如iPhone15的25561179分辨率屏幕，就是通过393852的基础逻辑分辨率放大3倍来显示的。

1.3 响应式和多平台适配

说完了基本的分辨率之间的关系，再来讲一下建立画布的一个前提。在很多情况下，我们都不会按照官方给我们的分辨率去做，而且很多官方的设计文档中给我们的也只是栅格系统的建议，而不是具体的分辨率。

在早年web设计时，页面确实是以适配特定的屏幕大小为考量创建的，但随着人们使用的屏幕尺寸的种类越来越多，尤其是在B端系统中，用户可能在各种各样的设备上访问你的应用，因此就出现了尤为重要的响应式设计概念。如下图。

只要在项目开始时确定了用户不仅仅只在同一种设备类型上访问应用，就一定要注意尺寸适配的问题。由此引申出的响应式设计，有一个非常重要的原则：

从小适配大屏容易，从大屏适配小屏非常困难。

如果响应式设计没有考虑适配多端就会出现下面的情况，页面左侧和Hearder部分都出现了设计灾难，甚至按钮控件直接分裂。在信息量和组件都非常复杂的B端应用中，这种情况会更加严重，甚至在某些设备上干脆就没法用了。

为什么要以小的尺寸来进行设计？假设建立720px的画布，要放大到2560px大小，适配起来是很方便的，但是反过来如果用大画布去适应小屏，其中很多模块控件就会出现没法显示的情况，就必然要做折叠、隐藏、大小缩小等操作，无异于增加了我们的工作量。所以一开始就用稍微偏小一些的画布去处理，等于一开始就考虑到小屏的适配了。

所以，在实际工作中，为了确保设计在各种屏幕尺寸上都能良好展现，我们往往会选择中等偏小一些的画布进行设计。

1.4 目标群体设备的定位

在上文我们说，因为响应式设计理念的存在，我们会从中等偏小的画布去设计，但是这里我们仍然需要考量的就是我们应用的服务对象。比如说，我们的项目就是针对地铁里面某一块屏幕进行设计，而且这个屏幕是定制的，功能是定制的，尺寸几乎也不会有变化，而且这些屏幕往往分辨率不会太高，我们就直接根据这块屏幕的尺寸建立画布就好。再比如某些工业控制面板，往往定制化的程度也会很高，只要确定这个界面基本不会用于其他设备，我们都可以直接根据屏幕分辨率建立画布。

在项目前期评审就要把目标用户纳入进去，可以帮助设计团队更快速地做出决策，减少不必要的设计修改和反复。

各种各样不同的屏幕分辨率，图源支付宝小程序官方设计文档

1.5 团队工作流程

在很多时候，我们接触到的可能是上一个设计师留下来的页面，有可能尺寸会和印象中的不太相同，这个时候如果没有特殊要求就按照原有的设计去做就好。比如现在很多移动端应用都还是在用375*812的尺寸去做，只要最终实现能还原UI中设计的效果就可以。

还有一种情况就是你会遇到在用PS做UI的项目...这种项目一旦你要更改画布尺寸，那每一张画布和每一个元素调整的工作量是吓人的，不建议去更改。

作为一名合格的设计师，遇到类似上面的情况，一定要清楚当前画布尺寸的制定是不是合理的，一定要有自己的思考，首先要确保团队设计的一致性，如果有机会再引入更好的方法。

以上就是在建立画布前的一些思考，看着很繁杂，但是这是一名设计师最最基础的能力，通过仔细考虑这些方面，可以为项目建立一个坚实、专业的设计基础。这不仅有助于当前项目的顺利进行，也为未来的迭代和扩展奠定了良好的基础。

切记画布不能死记硬背一个尺寸。

各种设备分辨率的建议

2.1 移动端

移动端目前主流的做法都是先以iPhone手机的尺寸为基础进行设计的，再让Android端的开发工程师去做适配。除非极端情况下你只做iPhone端或Android端，那这个问题就不需要考虑了，直接按照官方的尺寸去做。

随着老款手机的停产，我们会逐渐舍弃iPhone13、14代的尺寸，从而用最新一代iPhone15（393*852像素）进行设计，用更新的分辨率进行设计也有助于我们设计的应用不会太快过时。之所以选iPhone，是因为它型号相对较少，屏幕尺寸和分辨率更加统一，Android设备种类繁多，屏幕尺寸和分辨率变化较大，反向适配会比较困难。再从商业化角度来说，iPhone用户通常有更高的应用使用率和消费能力。

2.2 网页端

网页端目前主流的尺寸一个是19201080，还有一个是1440900。在此推荐选择后者，以19201080的画布进行在适配1440900的尺寸时，有些元素会显得很大，例如对话框。1440这个尺寸无论向上还是向下适配，都会有用户较好的用户体验。

举个例子。在进行网页端设计时，因为电脑屏幕尺寸较大，你会发现大部分以复杂内容为导向的网站往往只有版心是有内容的。这个时候假设以较大的画布（例如19201080）进行设计，那么在适配小屏时，就有可能出现需要左右滑动的情况，以中尺寸1440900既可以把控中间内容不会太少太空，适配小屏的时候也会有更好的用户体验~

在创建网页画布时，我们还需要注意一点，我们平常在浏览网页时，是会有页签、地址栏以及Windows底部的任务栏的，实际上可视区域只有中间部分，所以平常在设计中是要减去这一部分的高度的，为了方便和统一，一般在画布的基础上减去100px即可，即以1440800的尺寸建立画布，或是1920980。

了解完网页端画布设置后，下面是一些推荐的尺寸。

2.3 桌面端的应用尺寸建议

桌面端的应用在这里没有办法给出具体的尺寸建议，因为桌面端的应用类型实在是太多了，没有固定的画布尺寸，有腾讯会议登录页这种小窗口化的，也有钉钉这种可以适配全屏大小的应用。

桌面端的应用在前期立项的时候就要考虑适配性，很多的桌面端应用是支持最大化和窗口化的，况且桌面端也没办法向网页那样左右划动。在做可以放大缩小的桌面端应用时，可以从中小尺寸开始，同时也要和开发团队规定好全屏情况如何进行响应式变化。

2.4 iPad以及平板

在大部分情况下，都不会专门为平板做专属的软件，市面上平板也就分为苹果和其他（是这样的），大部分情况下是为app做平板的适配，所以这里我们可以直接选用官方推荐的分辨率。

2.5 小程序

小程序目前有支付宝、微信、QQ小程序3种，其中在微信小程序的官方文档中，明确规定了手机小程序的基础尺寸为414*736（iPhone8 Plus的尺寸），但是在官方提供的sketch组件库中，宽度375像素和414像素的组件都有，可能是新的组件库还没有设计完，当时看到我就一个：？

图源：微信小程序官方设计文档

而在支付宝和QQ提供的小程序sketch组件库中，画布的宽度都是750像素。但有些组件是通过375667像素（iPhone8的尺寸）乘以2倍得来的、有些是通过375812像素（iPhone13 mini）的尺寸的来的.....实在是太混乱了，这里建议在做小程序的项目时，先与前端开发商量好要用哪个尺寸的，避免出现混乱。以下是一些建议的小程序尺寸。