ui设计中为什么常用750
2025-05-15 00:28:36
吴老师
已认证
已认证吴老师为您分享以下优质知识
在移动UI设计中，750px作为设计稿常用宽度，主要基于以下原因：
一、历史与技术基础
iPhone 6的标志性尺寸
iPhone 6的屏幕分辨率为750×1334px，其逻辑像素（pt）为375×666（即1pt=2px）。由于后续iPhone机型（如iPhone 7/8）在物理像素上延续了这一比例（750×1334），导致750px成为移动端设计的标准宽度。
物理像素与逻辑像素的差异
- 物理像素是屏幕实际显示的像素点数量（如750px）。
- 逻辑像素（pt）是CSS中使用的抽象单位，1pt=2px。设计稿使用物理像素能保证在高分辨率屏幕上显示清晰，而CSS像素（1px）在Retina屏幕上可能显示模糊。
二、视觉体验与适配需求
人类视觉的局限性
人类视觉对细节的分辨能力有限，超过750px的设计稿在手机屏幕上无法呈现明显差异，反而可能因文件过大导致加载缓慢。
适配多设备的效率
- 使用750px设计稿时，高分辨率屏幕（如iPhone 6/7/8）可直接输出@2x图像资源，简化了开发流程。
- 对于低分辨率设备（如iPhone 4/5），系统会自动以2倍比例缩放@2x资源，无需额外处理。
三、开发与工具支持
相对单位的应用
通过CSS的rem单位（如`font-size: 62.5%；`对应iPhone 6的375pt），可动态适配不同屏幕尺寸，避免为每个设备单独制作设计稿。
双倍图设计的便利性
750px是375px的两倍，便于设计师和开发者保持元素尺寸一致，减少手动换算的工作量。
总结
750px作为移动端设计稿的默认宽度，是历史技术、视觉体验和开发效率共同作用的结果。尽管现在有更高分辨率的屏幕（如iPhone 12系列），但750px仍被广泛采用，因为它在平衡清晰度、适配性和开发效率方面具有显著优势。
