简单方便适合零基础小白的在线设计工具

操作简单，套用素材模板，快速高清出图，涵盖大量行业

免费体验

互联网平面设计的尺寸大全——保持更新！

本报告旨在提供一份全面且持续更新的互联网设计尺寸指南，这对于确保在多样化的数字环境中实现最佳用户体验、无障碍访问和技术合规性至关重要。在多设备访问日益普及的时代，遵循精确的设计规范是创建具有视觉吸引力且功能完善的数字产品的基石。

用户对“保持更新”的明确要求，揭示了互联网设计领域的一个根本特征。研究资料显示，屏幕分辨率在不断演变 1，新的社交媒体格式层出不穷 3，以及平台指南持续更新 5。这种动态环境意味着设计尺寸并非一成不变的规则，而是随着技术和用户行为而调整的流动性建议。因此，设计人员和开发人员必须秉持持续学习和适应的心态，定期审视和更新其规范知识，以保持相关性和有效性。本报告旨在成为一份“活”的文档，强调了持续警惕的必要性。

互联网设计尺寸的演变与响应式设计

从固定宽度布局向响应式网页设计（RWD）的转变，从根本上改变了尺寸的处理方式。RWD 是一种旨在使网页内容无论设备分辨率如何都能正确显示的設計方法，它利用流体网格、弹性图片和媒体查询来动态调整布局 9。这一演变是由各种屏幕尺寸和分辨率设备的激增所驱动的，设计考量已超越了简单的“桌面或移动”范畴，扩展到一个包含智能手机、平板电脑和桌面设备在内的庞大生态系统 11。

多份研究资料反复强调了无障碍性，例如触控目标尺寸、可读文本和动态字体 6。无障碍性与核心设计原则甚至搜索引擎优化紧密相关 9。这表明无障碍性不再是一个独立的核对清单项目，而是良好设计固有的、不可协商的方面，它与尺寸选择深度融合。设计流程必须从一开始就将无障碍性考量融入其中，影响诸如单位选择（相对单位与绝对单位）、最小交互元素尺寸和排版比例等基本决策。未能做到这一点可能导致相当一部分用户群体获得糟糕的用户体验，并可能引发合规性问题。

II. 响应式网页设计基础

核心原则：流体网格、弹性图片、断点与媒体查询

响应式网页设计的基础在于几个核心原则，它们共同确保了内容在不同设备上的无缝适应。

流体网格是响应式设计的基石，它通过使用百分比等相对单位而非像素等固定单位来适应任何屏幕尺寸 9。这种方法使得布局能够动态调整，从而在各种设备上提供一致的体验。例如，CSS Grid布局可以使用

repeat(auto-fit, minmax(200px, 1fr))来调整列以适应屏幕尺寸 12。研究资料明确指出，由于设备尺寸各异，“绝对尺寸方法”不再适用 9。因此，响应式设计转向使用相对尺寸。这种因果关系显而易见：设备屏幕尺寸多样性的问题，导致了对灵活布局的需求，进而促使设计从绝对单位转向相对单位。设计人员和开发人员必须深入理解相对单位及其行为，超越像素完美思维，转向更具适应性和比例性的方法。这不仅影响布局，也影响排版和间距。

弹性图片要求图片在其容器内调整大小，以避免破坏布局，并通过CSS属性如max-width: 100%; height: auto; object-fit: cover;来保持其宽高比并适应容器 12。优先使用可缩放矢量图形（SVGs）也被推荐，因为它们具有固有的可伸缩性 9。

断点是设计适应不同屏幕尺寸和分辨率的定义点，通常基于内容和目标受众使用的特定设备 9。建议包含三个或更多断点 9。

媒体查询是根据设备属性（如宽度、高度或方向）调整样式的CSS规则 9。一个例子是

@media (min-width: 1024px) { body { font-size: 18px; } }，它可以在大屏幕上增加字体大小 12。

视口配置通过<meta name="viewport" content="width=device-width, initial-scale=1">元标签实现，这对于响应式缩放至关重要，确保内容在移动浏览器上正确显示 11。

CSS单位详解：像素(px)、em、rem、视口单位(vw/vh)与百分比(%)

CSS单位用于定义网页元素的大小，提供不同程度的灵活性和控制。

绝对单位如px（像素）是最常见的绝对单位，表示屏幕上的一个固定大小的点。它不随屏幕尺寸调整 31。

px适用于需要精确控制布局的固定元素，如边框、边距、内边距或图标 32。其他绝对单位（pt、cm、mm、in、pc）通常用于印刷设计 31。

相对单位则根据其他元素或视口的大小进行调整，这使得它们在响应式设计中不可或缺：

  • %（百分比）：相对于父元素的大小。它非常适合流体布局，其中元素大小应适应其父容器 31。
  • em：相对于父元素的字体大小。如果父元素字体大小为16px，那么1em等于16px 31。当需要根据当前字体大小缩放元素时使用 32。
  • rem（根em）：类似于em，但它相对于根元素（通常是<html>元素）的字体大小，使其在整个文档中保持一致 31。在大多数浏览器中，1rem默认设置为16px 31。它有助于响应式设计，其中根字体大小可以根据不同屏幕尺寸进行调整 32。
  • vw（视口宽度）：相对于视口宽度的1%。例如，50vw将占据视口宽度的一半，无论设备或屏幕尺寸如何 31。它适用于全宽元素或动态缩放排版 32。
  • vh（视口高度）：相对于视口高度的1%。例如，100vh将是浏览器窗口的完整高度 31。它适用于全屏部分或页眉 32。
  • vmin/vmax：分别相对于视口较小/较大尺寸的1% 32。
  • ch/ex：相对于字体特性 32。

CSS单位的选择直接影响响应式设计和无障碍性。虽然px提供精确控制，但其固定性质会阻碍适应性 32。像

rem和em这样的相对单位对于可伸缩文本至关重要 31，而可伸缩文本是核心无障碍性原则 12。如果文本不缩放就难以阅读 12，或者移动设备上的文本输入小于16px 16，就会造成可用性问题。这揭示了一个直接的因果关系：使用相对单位能够实现动态缩放，从而改善无障碍性和用户体验，尤其是在各种设备上。因此，设计人员应优先为大多数元素，特别是排版，使用相对单位，以确保固有的响应性和无障碍性。绝对单位应保留给需要固定、精确尺寸的元素，但即使在这种情况下，也必须考虑它们对整体响应性的影响。

CSS单位类型单位描述典型用例
绝对单位px像素，屏幕上的一个固定点。不随屏幕尺寸调整。边框、小图标、需要精确固定尺寸的元素
pt点，1/72英寸。主要用于印刷。印刷设计
cm, mm, in厘米，毫米，英寸。主要用于印刷。印刷设计
相对单位%相对于父元素的大小。流体布局、网格系统中的列宽
em相对于父元素的字体大小。文本大小、内边距、边距（相对于父文本）
rem相对于根元素 (<html>) 的字体大小。全局文本大小、组件间距（保持一致性）
vw相对于视口宽度的1%。全屏元素、响应式排版（根据视口宽度缩放）
vh相对于视口高度的1%。全屏部分、固定高度的页眉
vmin相对于视口较小尺寸的1%。确保元素在横向和纵向模式下都可见
vmax相对于视口较大尺寸的1%。确保元素在横向和纵向模式下都可见
ch相对于当前字体中“0”字符的宽度。固定宽度文本块
ex相对于当前字体中“x”字母的高度。垂直对齐

常见屏幕分辨率：桌面、平板与移动设备

了解常见屏幕分辨率对于定义有效的断点和确保内容在最常用设备上良好显示至关重要 2。

桌面设备 (2024年数据)：

  • 1920×1080 (全高清) 是最流行的分辨率（23.89%），广泛用于桌面电脑、笔记本电脑和较大尺寸的智能手机 1。
  • 1366×768（8.79%）常见于经济型笔记本电脑和旧款显示器 1。
  • 1536×864（8.32%）在一些中端笔记本电脑中可见 1。
  • 1280×720 (高清)（5.46%）是低端笔记本电脑的标准分辨率 1。
  • 其他重要的桌面分辨率包括：1440×900（5.46%）、1600×900、2560×1440 (QHD) 和 3840×2160 (4K UHD) 1。

移动设备 (2024年数据)：

  • 390×844（15.56%）是最常见的，反映了较新的iPhone型号 1。
  • 393×852（7.38%）日益普及 2。
  • 430×932（7.12%）也日益普及 2。
  • 其他常见的移动分辨率包括：360×800、393×873、412×915、414×896、375×812 1。
  • 移动设备通常具有高像素密度（260-600+ ppi）1。

平板设备 (2024年数据)：

  • 768×1024（17.84%）仍然占据主导地位 1。
  • 810×1080（11.82%）2。
  • 800×1280（8.95%）1。
  • 其他常见的平板分辨率包括：1280×800、820×1180、1024×1366 1。
  • 平板设备的像素密度中等（170-350 ppi）1。

移动屏幕分辨率的普遍性以及将“移动优先方法”作为最佳实践的明确提及 9，两者之间存在直接关联。数据表明，很大一部分网页浏览发生在移动设备上。这一趋势使得设计人员必须优先考虑移动体验，这意味着布局、内容和性能必须首先针对小屏幕进行优化，然后才扩展到大屏幕显示器。因此，在设计时，应从移动设备的限制（有限的屏幕空间、触控交互、可能较慢的网络连接）开始，然后逐步向上构建。这确保了为所有用户提供了坚实的基础，并避免了将复杂的桌面设计强行适配到小屏幕上，这通常会导致糟糕的用户体验。

设备类型常见分辨率（宽 x 高）典型方向像素密度 (ppi)
桌面1920×1080, 1366×768, 1536×864, 1280×720, 1440×900, 1600×900横向（主要）低到高 (100 – 300+)
移动390×844, 393×852, 430×932, 360×800, 393×873, 412×915, 414×896, 375×812纵向（主要）高 (260 – 600+)
平板768×1024, 810×1080, 800×1280, 1280×800, 820×1180, 1024×1366纵向（常见）中 (170 – 350)

网页布局元素尺寸：头部、内容区、侧边栏、底部

网页布局的结构化对于内容呈现和用户导航至关重要。

通用布局通常包括两列（主内容区+侧边栏）或三列（主内容区+两个侧边栏），并辅以页眉和页脚 33。在过去，

固定宽度布局很常见，例如页眉和页脚通常设置为960像素宽，内容区和侧边栏的宽度总和也为960像素 33。

然而，现代最佳实践强调流体和响应式布局，利用百分比等相对单位来定义宽度，使元素能够适应可用空间 9。主要元素如页眉、导航和页脚可以拉伸以适应页面宽度，而内部内容则可以通过容器类居中 33。

头部是访问者进入网站首先看到的部分，位于页面顶部，通常在首屏（无需滚动即可见的部分）上方。它作为第一印象，应清晰、有组织且易于导航，代表网站或品牌 34。

内容区是信息的主要区域。在多列布局中，其宽度相对于整体容器 33。

侧边栏用于补充内容或导航。在响应式设计中，其宽度也是相对的并能自适应 33。

底部位于主要内容下方，在多列布局中通常用于清除浮动 33。它应具有功能性和信息性，包含必要的链接和行动号召 27。

从固定960像素布局 33 到流体网格 9 的转变，是设备多样化环境的直接结果 1。这意味着布局尺寸不再是僵化的像素值，而是关于内容如何适应可用空间。媒体查询中强调“内容和受众使用的特定设备”来定义断点 12，进一步强化了设计决策是由用户需求和内容层级驱动的，而非任意的像素值。因此，设计人员应专注于内容优先策略，让内容本身决定布局调整，而不是强迫内容适应预定义的固定容器。这需要深入理解内容层级以及元素如何在不同屏幕尺寸上重排或被优先显示。

III. 网页图片与多媒体尺寸指南

通用图片尺寸：背景图、英雄图、博客特色图、缩略图

在网页设计中，选择合适的图片尺寸对于视觉质量和加载速度至关重要。

推荐宽高比包括16:9、9:16、1:1、3:2、4:5 35。

背景图建议尺寸为1920 x 1080像素（16:9宽高比），以确保质量同时避免过长的加载时间 35。

英雄图/横幅图是网站上显著显示的大图，通常位于页眉或首屏。建议最小分辨率为1280 x 720像素（16:9宽高比），以平衡质量和速度 35。根据网站设计，宽度可达1800像素 36。其他可选尺寸包括：1920 x 1080像素、1366 x 768像素、1440 x 900像素、1536 x 864像素 35。

博客特色图通常为1200 x 630像素（3:2宽高比）35。

幻灯片画廊的推荐尺寸为1280 x 720像素 35。

缩略图的推荐尺寸是150 x 150像素（1:1宽高比）35。产品图片缩略图可以更大，达到300 x 300像素 36。

全屏灯箱图片的尺寸为1100 x 800像素（16:9）36。

图标与Logo尺寸：Favicon、网站Logo

Favicon是浏览器标签页中的小图标，用于识别网站。推荐尺寸为32 x 32像素或16 x 16像素（1:1宽高比），通常为PNG格式 35。Google开发者建议使用大于48 x 48像素的尺寸（例如32×32像素或96×96像素），以便在所有设备上更好地显示 36。

网站Logo的矩形版本尺寸范围从250 x 150像素到400 x 100像素 35。垂直版本通常为160 x 160像素 35。标准Logo尺寸宽度在250到400像素之间，可以是方形（1:1）或矩形（3:2）36。PNG格式因支持透明度而被推荐 36。

图片优化与文件大小建议

图片优化对于提升网页加载速度至关重要。建议图片宽度在1280-1920像素之间，同时文件大小保持在200KB以下，以实现最佳页面速度 36。压缩图片和精简CSS/JS对于性能至关重要 12。图片分辨率应至少保持在72 PPI（每英寸像素）36。

为了实现响应式图片，应使用<picture>元素和srcset属性，根据用户设备和屏幕分辨率提供适当尺寸的图片 10。

多份研究资料强调了“优化性能”和“减少加载时间”的重要性 10。这通过图片压缩、代码精简和选择适当的图片尺寸来实现。其中的因果关系清晰可见：大文件尺寸会导致加载时间缓慢，进而导致糟糕的用户体验并对搜索引擎优化产生负面影响 12。因此，图片尺寸的选择不仅是美学考量，更与技术性能紧密相关。设计人员必须与开发人员紧密合作，了解其视觉选择的技术影响。优先使用高效的图片格式（例如WebP）、实施延迟加载，并确保图片尺寸与其上下文相符，这些都与视觉吸引力同等重要。

网站图片类型推荐尺寸（宽 x 高）宽高比备注
背景图1920 x 1080 像素16:9确保质量，文件大小适中
英雄图/横幅图1280 x 720 像素（最小）16:9平衡质量与加载速度，可达1800px宽
博客特色图1200 x 630 像素3:2
幻灯片画廊1280 x 720 像素16:9
缩略图150 x 150 像素1:1产品缩略图可达300x300px
灯箱图片（全屏）1100 x 800 像素16:9
Favicon32 x 32 像素 或 16 x 16 像素1:1建议使用PNG，Google推荐大于48x48px
网站Logo（矩形）250 x 150 像素 到 400 x 100 像素3:2建议使用PNG格式以支持透明度
网站Logo（方形）100 x 100 像素1:1

IV. 移动应用设计尺寸

A. iOS 应用设计规范

iOS应用设计遵循Apple人机界面指南（Human Interface Guidelines, HIG），旨在提供直观、一致的用户体验 7。

应用图标与UI图标尺寸对于品牌识别和应用导航至关重要：

  • App Store 图标：提交到App Store的图标尺寸为1024 x 1024像素（PNG或JPEG格式）5。Apple HIG要求图标设计简洁分层，不含透明度 5。
  • Spotlight 搜索图标：120 x 120像素 38。
  • 设置图标：87 x 87像素 38。
  • 通知中心图标：40 x 40像素 38。
  • Apple Watch 主屏幕图标：172 x 172像素 38。
  • 通用UI图标：虽然没有严格的尺寸规定，但应用内部图标的关键在于保持一致性 39。常见尺寸包括256×256像素@1x、512×512像素@2x；128×128像素@1x、256×256像素@2x；32×32像素@1x、64×64像素@2x；16×16像素@1x、32×32像素@2x 39。图标应在各种尺寸下都易于识别 40。

触控目标尺寸与可访问性是确保所有用户都能轻松操作应用的关键：

  • 推荐尺寸：Apple HIG建议交互元素（如按钮、链接和图标）的最小触控目标尺寸为44 x 44 pt 17。这有助于防止误触，特别是对于手指较大或有运动障碍的用户 13。
  • WCAG 指南：网页内容无障碍指南（WCAG）2.5.5（目标尺寸）也规定了最小44×44 CSS像素，但对内联文本、用户代理控制或必要呈现有例外情况 24。

排版指南：字体大小、行高与动态字体确保文本清晰可读：

  • 默认与最小字体大小：iOS/iPadOS的默认正文文本大小为17 pt，最小为11 pt 19。
  • 可读性：应使用大多数人容易阅读的字体大小。建议优先使用常规（Regular）、中等（Medium）、半粗体（Semibold）或粗体（Bold）字重，避免使用超细（Ultralight）、细体（Thin）和浅色（Light）字重，尤其是在文本较小的情况下 19。
  • 动态字体：iOS支持动态字体（Dynamic Type），允许用户调整文本大小以提高可读性 19。应用必须适应所有字体大小的布局，确保文本和字形清晰可读 19。启用“更大辅助功能文本大小”进行测试至关重要 19。
  • 行高：较长文本的行高应至少为1.5倍字体大小 15。
  • 字体选择：建议使用SF Pro等系统字体，以保持熟悉度和优化性能 26。

导航元素尺寸：标签栏与导航栏图标：

  • 标签栏：容器尺寸为390×49 42。常规标签栏的图标尺寸为25×25 pt，紧凑标签栏为18×18 pt 42。对于方形字形，常规标签栏为23×23 pt，紧凑标签栏为17×17 pt 42。图标应清晰，并常伴有标签 42。
  • 导航栏：导航栏中使用的图标画布尺寸应为30 x 30 pt 45。

严格的44x44pt触控目标最小尺寸 17 与WCAG指南 24 和运动障碍用户的用户体验 13 直接相关。动态字体 19 进一步增加了复杂性，因为文本大小可以增加，可能影响元素的间距和有效触控区域。如果按钮的视觉尺寸因动态字体而增大，其触控目标仍必须保持足够大，且不与相邻元素重叠。这会产生连锁效应：无障碍性指南规定了最小触控尺寸，这影响了布局和间距，并要求排版选择（如动态字体）以一种保留这些关键触控目标的方式进行处理。因此，设计人员不仅要满足最小触控目标尺寸，还要考虑动态内容（如可伸缩文本）可能如何影响感知和实际的触控区域。主动启用无障碍功能进行测试对于识别和缓解潜在的可用性问题至关重要。

样式字重尺寸 (点)行高 (点)
默认 (Large)
Large TitleRegular3441
Title 1Regular2834
Title 2Regular2228
Title 3Regular2025
HeadlineSemibold1722
BodyRegular1722
CalloutRegular1621
SubheadRegular1520
FootnoteRegular1318
Caption 1Regular1216
Caption 2Regular1113
辅助功能尺寸 (xLarge)
Large TitleRegular3643
Title 1Regular3037
Title 2Regular2430
Title 3Regular2228
HeadlineSemibold1924
BodyRegular1924
CalloutRegular1823
SubheadRegular1722
FootnoteRegular1520
Caption 1Regular1419
Caption 2Regular1318

B. Android 应用设计规范

Android应用设计主要遵循Material Design指南，强调一致性、可访问性和适应性 8。

应用图标与UI图标尺寸对于Google Play商店的展示和应用内部的视觉统一至关重要：

  • Google Play 商店图标：最终尺寸为512 x 512像素，32位PNG格式，sRGB色彩空间，最大文件大小1024KB 47。Google Play会自动应用20%的圆角和阴影 47。设计的重要部分应在384×384像素内 39。
  • 通用UI图标：标准（基线）图标尺寸为24x24dp 39。支持的其他尺寸包括20dp（用于小型视觉元素）、40dp和48dp（用于显示或标题类型，以及更大的屏幕）39。图标应使用关键线形状保持一致的视觉比例 50。
  • 自适应图标：Android使用自适应图标，包含前景和背景层，可根据设备启动器调整为不同的形状（圆形、方形、圆角方形）48。可见区域为108 x 108 dp；完整资产尺寸为162 x 162 dp 48。

触控目标尺寸与可访问性是Android设计中的核心要素：

  • 推荐尺寸：Material Design指南建议触控目标至少为48 x 48 dp 12。这相当于约9毫米的物理尺寸，符合触控屏对象7-10毫米的推荐目标尺寸 20。
  • 间距：触控目标之间应至少间隔8dp，以确保信息密度和可用性的平衡 20。
  • 实现：Material组件如复选框（Checkbox）或开关（Switch）会自动添加内边距以满足48x48dp的最小要求 20。

排版指南：字体大小、行高与Material Design排版系统：

  • 默认字体：Roboto通常用作Material Design的默认字体 51。
  • 排版系统：Material Design的排版比例包含13-21种对比鲜明的样式（如标题、副标题、正文、按钮、说明文字、上划线、显示、标签、数字、弧形），每种都有其预期的应用和含义 29。每个角色都有大、中、小三种尺寸 29。
  • 字体大小：
    • 正文文本：桌面端16-18px，移动端14-16px 26。Material Design的Body 1为16px，Body 2为14px 51。
    • 主标题（H1）：桌面端32-40px，移动端28-34px 26。Material Design的Headline 1-6范围从96px到20px 51。
    • 副标题（H2）：桌面端24-32px，移动端22-28px 26。Material Design的Subtitle 1为16px，Subtitle 2为14px 51。
    • 文本输入字体大小应至少为16px，以防止移动浏览器自动缩放 16。
  • 行高：正文文本建议行高为字体大小的1.5倍 15。对于较大文本（标题、主标题、显示），建议行高为字体大小的1.2倍 29。
  • 字重：主标题使用粗体（700+），副标题使用中等（500-600），正文使用常规（400）26。
  • 动态字体与缩放：Android允许用户将字体大小调整至200% 28。设计必须确保文本在调整大小时不会破坏布局 26。由于Wear OS屏幕空间有限，20sp及以上字体不允许缩放 52。
  • 对比度：Material Design的目标是大型文本对比度为3:1，小型文本为4.5:1 29。

Android的Material Design大量依赖“dp”（密度无关像素）来定义尺寸 20。这种设计明确旨在确保UI元素无论屏幕像素密度如何，都能以一致的物理尺寸（例如48x48dp转换为约9毫米）显示 20。这解决了Android设备屏幕多样性的挑战 1，允许设计人员一次性指定尺寸，并在各种设备上实现一致的渲染。因此，对于Android设计而言，以

dp为单位进行思考至关重要。它抽象化了不同像素密度的复杂性，使设计人员能够专注于在碎片化的Android生态系统中实现一致的视觉和交互体验。这也简化了向开发人员的交接，因为他们可以直接实现dp值。

导航元素尺寸：操作栏与底部导航栏图标：

  • 操作栏/工具栏：图标通常为24x24dp 53。可触控元素的最小尺寸为48dp，因此按钮会额外增加12dp的内边距 53。工具栏高度可以是56dp或64dp 53。
  • 底部导航栏：高度为56dp 54。图标为24x24dp 54。每个操作的宽度：视图宽度除以操作数量（最大168dp，最小80dp）54。文本标签：Roboto Regular 14sp（激活状态），12sp（非激活状态）54。
排版角色字体字重尺寸 (px)字间距 (px)
Headline 1RobotoLight96-1.5
Headline 2RobotoLight60-0.5
Headline 3RobotoNormal480
Headline 4RobotoNormal340.25
Headline 5RobotoNormal240
Headline 6RobotoMedium200.15
Subtitle 1RobotoNormal160.15
Subtitle 2RobotoMedium140.1
Body 1RobotoNormal160.5
Body 2RobotoNormal140.25
ButtonRobotoMedium141.25
CaptionRobotoNormal120.4
OverlineRobotoNormal101.5

V. 社交媒体平台尺寸

在Facebook、Instagram、TikTok和YouTube等主要社交媒体平台上，内容消费模式的演变，特别是移动设备的普及，导致了对9:16宽高比的“快拍”（Stories）和“短视频”（Reels）内容的强烈且持续的偏好 3。这种垂直格式最大限度地利用了屏幕空间，提供了沉浸式的观看体验，因为用户通常以纵向方式握持手机。虽然其他宽高比（如1:1、16:9）也受支持，但垂直格式往往受到平台算法的优先推荐 3，或能带来更好的互动效果 4。这促使内容创作者专门制作垂直内容，而不是简单地重复利用横向视频。因此，数字营销人员和内容创作者必须根据每个平台的具体消费模式调整其视觉资产。一刀切的方法将导致表现不佳（例如，在垂直信息流中显示的小型横向视频）。投资于垂直内容创作对于有效的社交媒体存在而言，已不再是可选项。

Facebook：图片与视频尺寸

Facebook作为全球最大的社交媒体平台之一，其内容尺寸规范旨在优化用户在不同设备上的体验。

  • 个人资料照片：推荐尺寸为170 x 170像素，但为获得更好质量，建议上传400 x 400像素（1:1宽高比）的图片。由于最终显示为圆形，重要细节应保持居中 57。
  • 封面照片：尺寸为851 x 315像素（2.7:1宽高比）。由于桌面和移动设备显示可能存在差异，重要文本不应靠近边缘 57。
  • 动态图片（Feed Post Image）：为确保清晰显示，推荐尺寸为1200 x 630像素（1.91:1宽高比）57。最小尺寸为1080 x 1080像素 62。也支持1:1或4:5（垂直）63。最大文件大小为30MB 62。
  • 链接预览图片：1200 x 630像素（1.91:1宽高比）57。
  • 快拍图片与视频：1080 x 1920像素（9:16宽高比），用于全屏显示。重要元素应避免靠近边缘 57。最大文件大小4GB 62。
  • 活动封面图片：推荐尺寸为1200 x 628像素（1.91:1宽高比）57。
  • 视频广告：
    • 动态消息：至少1080 x 1080像素（推荐1:1宽高比，支持1.91:1到4:5）。最大文件大小4GB，时长1秒到241分钟 62。
    • 快拍/短视频：1080 x 1920像素（9:16宽高比）。最大文件大小4GB，快拍时长1秒到2分钟，短视频最长90秒 3。
    • 轮播广告：1080 x 1080像素（1:1宽高比），可包含2-10张图片/视频 62。

Instagram：图片与视频尺寸

Instagram以其视觉内容为主导，对图片和视频尺寸有特定要求。

  • 个人资料照片：320 x 320像素 35。
  • 照片帖子：方形（1:1）1080 x 1080像素，或纵向（4:5）1080 x 1350像素 4。横向（16:9）1080 x 566像素 4。
  • 缩略图：161 x 161像素（显示），上传尺寸为1080像素宽 35。
  • 快拍/短视频（Reels）：1080 x 1920像素（9:16宽高比），用于垂直全屏显示 3。最大文件大小4GB 3。快拍：每段15秒，总长最长60秒 3。短视频：最长90秒 3。
  • 视频帖子（Feed Video）：
    • 方形（1:1）：1080 x 1080像素。
    • 纵向（4:5）：1080 x 1350像素。
    • 横向（16:9）：1080 x 566像素 4。
    • 最长时长：60秒（认证账户可达2分钟）3，短视频可达15分钟，视频标签页可达60分钟 4。最大文件大小4GB 3。
  • 视频格式：MP4或MOV，H.264视频编码，AAC音频编码，推荐30fps 3。

X (Twitter)：图片与视频尺寸

X（原Twitter）的内容尺寸旨在适应其快速流动的消息流。

  • 个人资料照片：理想尺寸为400 x 400像素，最小200 x 200像素（1:1宽高比）。最大文件大小2MB 65。显示为圆形 66。
  • 标题图片（Header Size）：理想尺寸为1500 x 500像素（3:1宽高比）。为避免裁剪，Logo或文本应避免靠近边缘 65。
  • 推文图片：
    • 单张图片：1200 x 675像素（16:9宽高比），在桌面和移动设备上显示效果良好 66。支持桌面端2:1到1:1的任意宽高比，移动端支持2:1、3:4、16:9 65。最大文件大小5MB 65。
    • 两张图片：每张700 x 800像素（7:8宽高比），并排显示 65。
    • 三张图片：第一张700 x 800像素（7:8），其余两张1200 x 686像素（4:7），垂直分割 65。
    • 四张图片：每张约1200 x 600像素（网格布局）66。
  • 推文视频：
    • 推荐横向：1280 x 720像素。纵向：720 x 1280像素 59。方形：720 x 720像素 65。
    • 最大文件大小：非高级用户512MB 65，高级用户8GB 65。
    • 最长时长：非高级用户140秒 65，高级用户最长约3小时 65。移动设备上传：2分20秒 65。
    • 推荐比特率：5-8 Mbps。最大帧率：60 FPS 65。
  • 视频缩略图：1280 x 720像素 66。最大文件大小5MB 66。
  • 广告图片：
    • 1:1宽高比：1200 x 1200像素。
    • 1.91:1宽高比：1200 x 628像素。最大文件大小5MB 65。
  • 广告视频：
    • 1:1宽高比：1200 x 1200像素。
    • 16:9宽高比：1920 x 1080像素。最大1GB（推荐30MB以下）65。
    • 时长：建议15秒或更短，支持最长2分20秒 65。
  • 轮播广告：2-6张图片/视频。
    • 图片：800 x 418像素（1.91:1）或800 x 800像素（1:1）65。
    • 视频：800 x 450像素（16:9）或800 x 800像素（1:1）65。

LinkedIn：图片与视频尺寸

LinkedIn作为专业社交平台，其内容尺寸旨在优化商业和职业内容展示。

  • 个人资料照片：400 x 400像素 67。
  • 背景/横幅图片：1584 x 396像素 68。
  • 公司页面Logo：300 x 300像素 68。
  • 标准帖子图片：1200 x 627像素（横向），在桌面和移动设备上显示效果最佳 67。也支持1080 x 1080像素（方形）和627 x 1200像素（纵向）67。
  • 文章特色图片：1200 x 644像素（显示在信息流中）67。
  • 文章横幅图片：600 x 322像素（显示在文章顶部）67。
  • 视频上传：
    • 分辨率范围：256 x 144像素到4096 x 2304像素 59。
    • 推荐高清：1280 x 720像素。全高清：1920 x 1080像素 67。
    • 宽高比：1:2.4到2.4:1 59。最佳宽高比：4:5、9:16（垂直）；16:9（横向）；1:1（方形）67。
    • 最大文件大小：5GB 59。最长时长：10分钟 59。
  • 赞助内容广告：
    • 单图广告：1200 x 627像素 67。
    • 轮播广告：1080 x 1080像素 67。

YouTube：图片与视频尺寸

YouTube作为全球最大的视频平台，支持广泛的视频分辨率和格式。

  • 个人资料照片：800 x 800像素 35。
  • 频道横幅：2048 x 1152像素 35。
  • 自定义缩略图：最小1280 x 720像素 35。
  • 视频分辨率与尺寸：YouTube支持从240p到4320p（8K UHD）的广泛分辨率 58。桌面端推荐至少720p，智能手机推荐480p 58。
    • 标准视频（16:9宽高比）：
      • 1920 x 1080像素（1080p / 全高清）——适用于大屏幕清晰显示 35。
      • 1280 x 720像素（720p / 高清）——在小屏幕上显示清晰 35。
      • 其他分辨率：2560 x 1440像素（2K FHD）、3840 x 2160像素（4K UHD）、7680 x 4320像素（8K UHD）35。
    • YouTube Shorts（9:16宽高比）：
      • 1080 x 1920像素（全高清）——推荐垂直格式 35。
      • 最小720 x 1280像素 59。
      • 最长时长：60秒 35。最大文件大小：10MB 59。
    • 方形视频（1:1宽高比）：1080 x 1080像素 59。
    • 视频文件大小与时长：最大128GB或12小时 59。推荐格式：MP4，H.264视频编码，AAC-LC音频编码 58。
  • 视频广告：
    • 宽高比：16:9（横向）、9:16（纵向）或1:1（方形）58。
    • 分辨率：推荐1080p（横向1920×1080像素，纵向1080×1920像素，方形1080×1080像素）58。720p也可接受，标清不推荐 58。
    • 最大文件大小：128GB 58。
    • 时长：可跳过广告（15秒-无限制），不可跳过广告（最长15秒），导视广告（6秒）64。

TikTok：视频尺寸

TikTok以其短视频和垂直内容而闻名，对视频尺寸有特定要求。

  • 推荐分辨率与宽高比：1080 x 1920像素（全高清），9:16宽高比，以获得最佳视觉效果和全屏垂直观看体验 60。
  • 支持的宽高比：TikTok支持9:16（垂直）、1:1（方形）和16:9（横向）60。
  • 文件大小：视频文件最大287.6MB（iOS），72MB（Android）60。信息流视频广告最大500MB 60。
  • 视频时长：1秒到10分钟 60。广告视频理想时长为9-15秒，效果更佳 60。标准视频最长可达60分钟 61。
  • 帧率：支持30 FPS到60 FPS 60。
  • 文件格式：推荐MP4或MOV 60。也支持AVI、GIF 60。
平台内容类型推荐尺寸（宽 x 高）宽高比最大文件大小/时长
Facebook个人资料照片170 x 170 px (400×400 px 最佳)1:1
封面照片851 x 315 px2.7:1
动态图片1200 x 630 px1.91:130MB
快拍图片/视频1080 x 1920 px9:164GB
视频广告1080 x 1080 px1:14GB / 241分钟
Instagram个人资料照片320 x 320 px1:1
照片帖子1080 x 1080 px (方形) / 1080 x 1350 px (纵向)1:1 / 4:5
快拍/短视频1080 x 1920 px9:164GB / 快拍60秒，短视频90秒
视频帖子1080 x 1080 px (方形) / 1080 x 1350 px (纵向)1:1 / 4:54GB / 60秒 (认证账户2分钟)
X (Twitter)个人资料照片400 x 400 px1:12MB
标题图片1500 x 500 px3:1
单张推文图片1200 x 675 px16:95MB
推文视频1280 x 720 px (横向) / 720 x 1280 px (纵向)16:9 / 9:16512MB (非高级) / 8GB (高级)
广告图片1200 x 1200 px (1:1) / 1200 x 628 px (1.91:1)1:1 / 1.91:15MB
LinkedIn个人资料照片400 x 400 px1:1
背景图片1584 x 396 px4:1
标准帖子图片1200 x 627 px1.91:1
视频上传1280 x 720 px (推荐HD)16:95GB / 10分钟
轮播广告1080 x 1080 px1:1
YouTube个人资料照片800 x 800 px1:1
频道横幅2048 x 1152 px16:9
视频（标准）1920 x 1080 px (FHD) / 1280 x 720 px (HD)16:9128GB / 12小时
YouTube Shorts1080 x 1920 px9:1610MB / 60秒
视频广告1920 x 1080 px16:9128GB
TikTok视频1080 x 1920 px9:16287.6MB (iOS) / 72MB (Android)
视频广告1080 x 1920 px9:16500MB / 10分钟 (推荐9-15秒)

VI. 电子邮件设计尺寸

邮件模板整体宽度

电子邮件设计面临着独特的挑战，因为它必须在各种邮件客户端中保持一致的显示效果，其中一些客户端可能支持较旧的技术标准。

推荐宽度：最佳实践是将电子邮件的整体宽度保持在600–640像素之间 22。这个尺寸能够适应大多数邮件客户端的预览窗口，而无需横向滚动 70。

可接受的更大宽度：将最大宽度扩展到700像素、800像素甚至900像素也是可以接受的，但600像素是实现广泛兼容性的理想选择 71。事务性电子邮件模板的宽度范围可以从600像素到1200像素 71。

与现代网页设计拥抱流动性不同，电子邮件设计仍然遵循相对严格的固定宽度建议（600-640像素）22。这是因为邮件客户端，特别是像Outlook这样的旧版本，具有不一致的渲染引擎和对现代CSS的有限支持 22。需要使用HTML表格元素进行布局 22 和内联CSS 22 进一步突显了这一限制。这意味着电子邮件设计尺寸是由在碎片化且通常过时的渲染环境中实现最大兼容性的需求所决定的。因此，设计人员必须以更保守的心态对待电子邮件设计，优先考虑简单性和健壮、广泛支持的编码实践，而非尖端设计。这通常意味着为最低共同标准进行设计，以确保一致的显示效果。

邮件组件尺寸：头部、内容块、CTA、图片、签名

为了在电子邮件中实现清晰的结构和视觉吸引力，各个组件的尺寸也应遵循特定规范：

  • 头部：宽度建议为600-800像素，高度100-150像素 71。
  • 内容块：宽度通常为600-800像素（可灵活调整），每个内容块的高度为200-300像素（可根据偏好灵活调整）71。内容块应保持简短和重点突出 71。
  • 行动号召（CTA）按钮：理想尺寸约为150-300像素宽，50-75像素高（可灵活调整）71。至关重要的是，触控目标应至少为44×44像素，以确保在移动设备上易于点击 22。
  • 图片/GIF：全幅图片最佳宽度约为600-800像素 71。应明确设置图片的宽度和高度 22。
  • 电子邮件签名：通常宽度范围为300-600像素，高度为150-200像素 71。

移动端优化与文件大小

随着超过70%的电子邮件在移动设备上打开 22，

移动优先设计已成为电子邮件营销不可或缺的一部分。电子邮件应针对320像素到480像素的移动宽度进行优化 71。

字体大小：为确保在移动设备上的可读性，应设置最小字体大小（14–16像素）22。

文件大小：为避免电子邮件被截断（尤其是在Gmail中）或在移动设备上加载缓慢，应将电子邮件的总大小保持在100KB以下 22。图片应压缩至200KB以下，GIF应压缩至500KB以下 71。

图片处理：应假设图片可能被阻止显示；因此，应包含描述性的替代文本，并确保即使没有图片也能传达关键信息 22。应避免发送仅包含大图片而无文本的电子邮件 22。

电子邮件设计面临一个独特的挑战：既要平衡与传统客户端的广泛兼容性（固定宽度、表格布局）22，又要面对移动设备优先消费的现实（70%以上的打开率来自移动设备）22。这导致了一种“流体混合方法”22，将最大宽度限制与条件CSS结合起来。这种因果关系在于，碎片化和过时的电子邮件客户端生态系统导致了对保守设计选择的需求，而移动设备的使用趋势则要求在这些限制内进行响应式调整。因此，电子邮件设计人员必须精通“防弹”HTML和CSS，了解特定客户端的怪癖。他们需要优先确保核心信息传递，即使图片被阻止，并确保触控目标和文本在小屏幕上清晰可读，所有这些都必须在比现代网页设计更严格的结构框架内进行。

组件推荐宽度 (px)推荐高度 (px)备注
头部600-800100-150灵活调整
内容块600-800200-300每个内容块可灵活调整，保持简短聚焦
CTA 按钮150-30050-75灵活调整，触控目标至少44x44px
图片/GIF600-800灵活调整全幅图片，需明确设置宽高，优化文件大小
电子邮件签名300-600150-200灵活调整

VII. 数字广告尺寸

IAB标准广告单元尺寸

数字广告行业通过采用IAB（互动广告局）标准广告单元尺寸，实现了广告在各种平台和网络上的广泛兼容性。

最常用标准尺寸：

  • Leaderboard（横幅）：728 x 90像素——通常放置在网页的页眉或页脚 63。
  • Medium Rectangle（中矩形）：300 x 250像素——广泛使用，略呈方形 63。
  • Skyscraper（摩天大楼）：160 x 600像素——垂直布局，具有高可见性 63。

其他 IAB 认可尺寸：

  • Billboard：970 x 250像素 63。
  • Smartphone Banner：300 x 50像素，320 x 50像素 63。
  • Portrait：300 x 600像素 63。
  • Large Mobile Banner：320 x 100像素 63。
  • Half-Page：300 x 600像素 63。
  • Square：250 x 250像素 63。
  • Small Square：200 x 200像素 63。

文件大小限制：初始加载通常为50-250 KB 72。静态图片（PNG/JPG）最大150-250 KB 63。HTML5广告最大500 KB 63。

IAB标准广告单元尺寸的存在 63 表明了行业对标准化的强烈推动。这种标准化使得广告能够更广泛地覆盖各种广告网络 64。然而，在这些标准之内，持续强调“表现最佳的广告尺寸”72 和“优化性能”63，通常通过响应式格式 63 和严格的文件大小限制 63 来实现。这表明存在双重压力：既要符合兼容性标准，又要在这些限制内进行创新，以实现最大的影响和效率。因此，广告商和设计人员不仅要了解标准尺寸，还要理解如何优化创意资产（例如，响应式展示广告、视频压缩），以在平台特定的技术限制内实现营销目标。这需要结合遵守标准和战略性优化。

格式名称尺寸 (像素)备注
Leaderboard728 x 90最受欢迎的横幅广告，常置于页眉或页脚
Medium Rectangle300 x 250广泛使用的中矩形广告
Skyscraper160 x 600垂直广告，可见性高，利润空间大
Large Rectangle336 x 280
Billboard970 x 250沉浸式体验的广告格式
Smartphone Banner300 x 50 / 320 x 50移动广告最常见尺寸，常用于应用内
Portrait300 x 600
Half-Page300 x 600
Square250 x 250
Small Square200 x 200
Small Banner468 x 60
Vertical Rectangle240 x 400
Panorama980 x 120
Mobile Leaderboard320 x 100
Large Mobile Banner320 x 250

常见视频广告尺寸与宽高比

视频广告在数字营销中扮演着越来越重要的角色，不同平台有其特定的尺寸和规格要求。

Google Display & YouTube Ads：

  • 推荐分辨率：1920 x 1080像素 64。
  • 宽高比：16:9（横向）、9:16（纵向）或1:1（方形）58。
  • 尺寸：横向1920×1080像素，纵向1080×1920像素，方形1080×1080像素 58。
  • 最大文件大小：128GB 64。
  • 时长：可跳过广告（15秒-无限制），不可跳过广告（最长15秒），导视广告（6秒）64。

Facebook & Instagram 视频广告：

  • 推荐尺寸：方形1080 x 1080像素，快拍/短视频垂直1080 x 1920像素 64。
  • 宽高比：1:1（方形）、4:5（纵向）、9:16（垂直）64。
  • 最大文件大小：4GB 64。
  • 时长：Facebook视频广告1秒到241分钟，Instagram快拍1秒到60分钟，Instagram短视频最长90秒 64。

TikTok 视频广告：

  • 推荐分辨率：1080 x 1920像素 60。
  • 宽高比：9:16（推荐垂直）、1:1（方形）和16:9（横向）60。
  • 最大文件大小：500MB 60。
  • 时长：1秒到10分钟 60。理想广告时长为9-15秒 60。

VIII. 结论与未来展望

保持更新的重要性

数字环境处于持续变化之中，新的设备、屏幕分辨率、平台功能和用户行为不断涌现。正如本报告所展示的，设计尺寸并非一成不变；它们随着这些变化而演进。因此，对于设计人员和开发人员而言，持续学习和适应至关重要，以确保其数字产品保持相关性、高性能和用户友好性。定期监测官方平台指南（如Apple HIG 7；Android Material Design 8）和行业最佳实践至关重要 6。

“保持更新”的用户要求，在研究资料中以隐性和显性方式反复出现。这不仅仅是获取当前正确的数值，更是要理解这些数值会发生变化。这使得设计和开发过程必须具有迭代性，其中在真实设备上进行测试 12 和持续监测性能是内置环节。这意味着设计永远不会真正“完成”，而是一个持续改进和适应的过程。因此，数字设计领域的组织和个人必须投资于持续教育，订阅行业更新，并整合灵活的方法论（如敏捷开发），以实现对新尺寸要求的快速迭代和适应。

设计系统与框架在尺寸管理中的作用

随着平台数量和所需尺寸的激增，手动管理设计一致性变得不可持续。这使得设计系统和强大的设计工具成为必需。

设计系统在管理复杂多样的尺寸和确保产品一致性方面具有不可估量的价值 73。它们建立了设计标准（如排版、色彩方案和间距），并提供可重用组件（如按钮、表单和导航元素）的库，这些组件都遵循预设标准，从而确保统一的风格和一致的用户体验 73。

设计工具与框架，如Figma、Sketch和Adobe XD，提供了有助于响应式设计、协作和资产交付的功能 74。Bootstrap、Foundation和Bulma等框架提供了预构建的网格系统和组件，简化了响应式设计过程 10。这些工具帮助设计人员更高效地实现流体网格、管理断点和创建响应式排版 10。

随着平台数量和所需尺寸的激增，手动管理设计一致性变得不可持续。这使得对设计系统和强大设计工具的需求成为必然。设计系统为尺寸和组件提供了一个单一的真相来源 73，减少了冗余和错误。Figma等工具 74 促进了实时协作和响应式设计功能，使团队能够有效地扩展其在复杂、多平台项目中的设计操作。对于任何不断发展的数字产品或团队而言，投资并精心维护一个全面的设计系统至关重要。这不仅确保了尺寸的一致性，还显著提高了效率，减少了技术债务，并使设计人员能够专注于更高层次的用户体验挑战，而非重复的像素调整。