2340×1080 移动端设计规范全解
在移动设备分辨率日益多样化的当下，2340×1080 凭借 :9 的黄金宽高比，成为 英寸安卓机
型的主流选择。这一分辨率既保证了视觉呈现的清晰度，又为内容布局提供了更充裕的纵向空间，适配从日常
应用到专业工具的各类场景。掌握其设计规范，是打造优质移动端视觉体验的关键。
一、基础参数：设计的核心基准
2340×1080 分辨率的设计核心，在于以逻辑像素为基准实现多设备适配，同时兼顾视觉效果与性能优化。
其物理分辨率为宽 1080px× 高 2340px，对应的逻辑分辨率为 360dp×780dp，遵循 @3X 缩放规则，即
1dp 等于 3px。这一设定以 MDPI 160dpi 为基准，确保设计元素在不同像素密度的设备上呈现一致的视觉大
小。
从屏幕素质来看，该分辨率机型的像素密度（PPI）通常在 400-450 之间， 英寸屏约为 402 PPI，
英寸屏约为 387 PPI，远超视网膜屏幕的标准，能呈现清晰细腻的图像与文字，无明显颗粒感。
安全区域的设定是避免内容被遮挡的关键。竖屏状态下，左右边距可设为 0dp，上下需预留不小于 48dp
的空间，避开状态栏与导航栏；横屏时，左右边距不小于 48dp，上下不小于 24dp。对于挖孔屏或刘海屏机型，
需额外在对应位置预留 32dp 的空白区域，确保核心内容完整呈现。
色彩与刷新率方面，主流机型采用 AMOLED 屏幕，支持 sRGB 或 Display P3 色域，亮度可达 500 cd/m²
以上，部分机型还支持 HDR10，能呈现更饱满的色彩与更丰富的明暗层次。刷新率则覆盖 60Hz、90Hz 至
120Hz，设计时需针对不同刷新率优化动态内容，平衡视觉流畅度与功耗。
二、界面设计：从布局到元素的规范落地
界面设计需围绕用户体验展开，通过统一的栅格、字体、控件规范，打造简洁、易用且视觉协调的界面。
（一）栅格与边距：构建有序布局
栅格系统是界面布局的骨架，2340×1080 分辨率适配 12 列等宽栅格，每列宽度为 24dp（72px），列间
距为 8dp（24px），页面左右内边距标准为 16dp（48px），可根据内容类型在 12-24dp 之间灵活调整。这一
设定确保了元素排列的整齐性，同时预留出充足的视觉呼吸感。
内容区块的间距需保持统一标准，普通内容区块间距为 8-16dp，重要模块之间可适当增加间距至 24dp，
以区分信息层级。在横屏模式下，保持列宽不变，将列间距调整至 16dp，适配更宽的屏幕显示。
触控目标尺寸需符合人体工学，按钮、列表项等可交互元素的最小高度为 48dp，输入框高度为 44dp，确
保用户在移动场景下能精准操作，避免误触。
（二）字体与排版：提升阅读体验
字体选择与排版直接影响内容的可读性，需遵循清晰、层级分明的原则。全局字体优先选用无衬线体，如
思源黑体（Noto Sans SC），其笔画均匀，在小字号下仍保持清晰，适合长时间阅读。
文本层级需明确区分，标题 1 字号为 24sp（72px），字重 700，行高 32sp，用于页面大标题；标题 2
字号 20sp（60px），字重 700，行高 28sp，适用于模块标题；标题 3 字号 18sp（54px），字重 600，行高
24sp，用于卡片标题；正文字号 16sp（48px），字重 400，行高 24sp，为主要内容文本；辅助文本 14sp
（42px），字重 400，行高 20sp，用于说明、标签；小字 12sp（36px），字重 400，行高 16sp，适用于备
注、版权信息。
排版时需注意行高与字间距的匹配，正文行高建议为字号的 倍，确保文字不会过于拥挤。同时，避
免使用小于 12sp 的字号，保证在不同光线条件下的可读性。
（三）图标与控件：统一视觉语言
图标与控件是用户与界面交互的核心，需保持风格统一、尺寸规范。
图标尺寸需根据使用场景设定，导航栏图标标准为 24×24dp（72×72px），操作图标为 20×20dp
（60×60px），大按钮图标为 32×32dp（96×96px）。图标线条粗细统一为 2dp（6px），确保视觉一致性，同
时避免线条过细导致显示模糊。
控件设计需遵循简洁实用的原则，主按钮尺寸为宽 280dp（840px）× 高 48dp（144px），圆角 8dp
（24px），采用主色背景搭配白色文字，字重 600，字号 16sp，突出视觉焦点；次要按钮尺寸与主按钮一致，
采用白色背景加主色边框，搭配主色文字，与主按钮形成区分；图标按钮为 48×48dp 的圆形，内部图标
24×24dp，支持点击态变色，提供清晰的交互反馈。
输入框设计中，基础输入框宽 328dp（984px）× 高 44dp（132px），圆角 8dp，灰色边框，内部左边距 16dp，
字号 16sp，提示文字 14sp 灰色；带图标输入框在基础输入框左侧添加 24×24dp 图标，图标与输入文字间距
8dp，提升易用性。
卡片组件作为常用的内容承载元素，标准尺寸为宽 328dp× 自适应高度，圆角 12dp（36px），白色背景
搭配阴影效果，阴影层级分为两级：低层级为 2dp 偏移、8dp 模糊、透明度 12%；中层级为 4dp 偏移、12dp
模糊、透明度 16%，通过阴影区分元素层级，增强界面立体感。
三、适配与性能：跨设备的体验保障
2340×1080 作为主流分辨率，需兼顾向下与向上适配，同时优化性能，确保在不同设备上均能流畅运行。
（一）多分辨率适配
设计稿输出以 360×780dp（@3X）为基准，对应 1080×2340px 的物理尺寸。向下适配 720×1560px
（@2X）时，保持布局结构不变，按比例缩小元素尺寸；向上适配 1440×2960px（@4X）时，优化图像资源，
确保高清显示。
适配过程中，需严格使用相对单位，长度用 dp，字体用 sp，避免使用绝对 px 值，防止在不同分辨率设
备上出现布局错乱。图片资源优先采用.webp 格式，支持自适应宽高，同时提供不同倍率的图片版本，适配不
同像素密度的屏幕。布局实现上，推荐使用 ConstraintLayout 或 Flexbox 布局，避免固定宽高，确保元素能
根据屏幕尺寸自动调整位置与大小。
（二）性能与动效优化
性能优化是提升用户体验的关键，需从资源与动效两方面入手。
资源优化方面，图片压缩率需达到 85% 以上，单张图片大小不超过 200KB，减少安装包体积与内存占
用。图标优先使用 VectorDrawable 矢量格式，避免位图缩放导致的失真问题，同时降低资源文件大小。
动效设计需兼顾流畅度与性能，动画时长控制在 200-300ms，缓动效果优先选用 ease-out，营造自然的过
渡感。滚动帧率需保持在 60fps 以上，避免过度叠加动画导致卡顿。对于支持高刷新率的设备，可针对滚动、
切换等动态内容优化至 90Hz 或 120Hz，提升视觉流畅度；静态内容则保持 60Hz，平衡功耗与体验。
四、场景化设计：不同页面的适配要点
不同类型的页面在 2340×1080 分辨率下，需结合其功能特点进行针对性设计。
（一）首页：突出核心功能
首页作为应用的入口，需清晰展示核心功能与关键信息。顶部导航栏高度 48dp，左侧放置返回图标
24×24dp，中间为 18sp 字重 600 的标题，右侧为操作图标 24×24dp，背景采用白色，保证视觉简洁。
轮播图区域宽 360dp× 高 180dp，设置自动轮播，切换动画时长 300ms，底部添加直径 12px 的指示器
圆点，选中态使用主色，未选中态为灰色，引导用户浏览。
功能入口区采用 2 行 3 列的网格布局，每个入口包含 48×48dp 图标与 14sp 文字，图标与文字间距 8dp，
入口之间间距 16dp，方便用户快速识别与操作。
内容列表区纵向排列 3 个标准卡片，卡片间距 16dp，每个卡片包含 18sp 标题、14sp 正文与右侧箭头，
展示核心内容推荐。底部导航栏高度 48dp，设置 5 个图标 + 文字入口，图标 24×24dp，文字 12sp，选中态
主色，未选中态灰色，明确当前页面位置。
（二）登录页：简化操作流程
登录页需聚焦核心功能，减少干扰元素。页面顶部放置应用 logo，尺寸为 96×96dp，居中显示，增强品
牌识别。
登录表单区域居中布局，包含账号、密码两个带图标输入框，输入框间距 16dp，下方设置 “忘记密码”
辅助文本，采用 14sp 灰色字体。主按钮放置在输入框下方，距离输入框 24dp，确保视觉焦点。
页面底部添加 “注册账号”“第三方登录” 等辅助入口，文字 14sp，颜色为辅助色，提供多样化的登录选
择。整体背景采用浅灰色，突出表单区域，提升用户操作专注度。
（三）商品列表页：优化信息展示
商品列表页需在有限空间内展示更多商品信息，同时保证浏览舒适度。采用双列卡片布局，每张卡片宽
168dp× 高 220dp，圆角 8dp，包含商品图片、标题、价格三个核心元素。
商品图片区域占卡片高度的 60%，宽 168dp× 高 132dp，采用居中裁剪显示，确保图片清晰。标题文字
14sp，最多显示 2 行，超出部分用省略号代替；价格文字 16sp，字重 600，主色显示，突出核心信息。
卡片之间间距 12dp，纵向间距 16dp，保持布局整齐。顶部添加搜索栏与筛选按钮，搜索栏宽 328dp× 高
44dp，筛选按钮采用图标 + 文字组合，方便用户快速查找商品。
五、交付规范：确保设计落地一致性
设计交付需提供完整的资源与文档，确保开发过程中准确还原设计意图。
（一）切图规范
切图按 @3X（1080×2340）为主，同时导出 @2X（720×1560）和 @4X（1440×3120）版本，适配不同
分辨率设备。命名格式遵循 “模块_功能_状态_尺寸.png/.webp”，如 “”，便于开
发人员识别与使用。
图标类资源优先导出 SVG 格式，位图资源采用 WebP 格式，透明图片使用 PNG 8 位格式，平衡画质
与文件大小。切图完成后，需提供切图清单，标注每个切图的用途、尺寸与倍率。
（二）交付物清单
完整的交付物应包含四类内容：一是设计源文件，如 Figma 或 Sketch 文件，内含栅格系统、组件库、
样式规范，方便后续修改与迭代；二是切图包，按 @2X/@3X/@4X 分类整理，附带切图清单；三是标注文档，
明确 dp 与 px 的对应关系、颜色值（HEX/RGB）、字体样式等关键信息；四是适配说明，重点标注安全区
域、横屏适配与特殊机型（如挖孔屏、折叠屏）的处理方式，指导开发人员完成适配。
