为什么要“移动优先”（且永远如此）

“移动优先”并非是一时的流行，而是一种生存策略。在现实世界中，一般的用户不都是用 5K 显示器。他们可能在用廉价的安卓手机、摔裂的苹果手机、平板电脑和可折叠设备。

移动优先设计意味着：

• 尽早解决限制条件：更少的像素 = 更严格的决策 = 更好的优先级排序。

• 用户界面自然地扩展：在 360x640 的清晰紧凑设计在 1440x3200 的屏幕上也能轻松呈现。

• 培养同理心：并非所有人都拥有最新款的 iPhone Pro。为较小的屏幕和较慢的设备进行优化设计就是将用户真正放在心上。

基准：最小的公分母

对于安卓系统，典型的基准是 360 x 640 像素，代表最小的标准屏幕尺寸。以这个画布进行设计会迫使我们保持清晰：可用空间有限，这促使我们优先考虑关键要素。每个元素都必须有其存在的价值。

屏幕尺寸与屏幕密度

“所有大屏幕都意味着更多空间”这是一个谬论。即便屏幕很大，但像素密度极高的话，你仍会感到局促。

? 屏幕尺寸

以逻辑像素为单位进行测量（例如，360×640）。这些是我们在 Figma 或 Sketch 等工具中使用的“设计单位”。

? 屏幕密度

以 PPI（每英寸像素数）或 DPI（每英寸点数）来衡量。这是指像素的密集程度。像素越多 = 屏幕越清晰 = 每个像素的物理尺寸越小。

理解屏幕密度：像素、DP 和缩放比例

在为多种设备进行设计时，屏幕尺寸并非是唯一关键因素，屏幕密度也起着至关重要的作用。屏幕密度以 PPI（每英寸像素）或 DPI（每英寸点数）来衡量，反映了每一英寸屏幕内所容纳的像素数量。

密度分组

Android 将设备分为不同的密度分组，这些分组决定了设计如何缩放和扩展：

• mdpi（1x）：约 160 PPI（像素/英寸）

• hdpi（1.5x）：约 240 PPI（像素/英寸）

• xhdpi（2x）：约 320 PPI（像素/英寸）

• xxhdpi（3x）：约 480 PPI（像素/英寸）

• xxxhdpi（4x）：约 640 PPI（像素/英寸）

假设我们设计了一个 24×24 dp 的图标。在不同的设备上，它会呈现为：

• 在 mdpi （中密度屏）上为 24 像素

• 在 hdpi（高密度屏）上为 36 像素

• 在 xhdpi（超高密度屏）上为 48 像素

• 在 xxhdpi（超超高密度屏）上为 72 像素

• 在 xxxhdpi（超超超高密度屏）上为 96 像素

计算公式：dp × 缩放比例 = 实际（物理）像素

如果您提供了多种尺寸的资源，Android 会自动选择最接近的匹配项。

? 设计洞察：您无需为每个分辨率重新设计。只需设计一次，然后导出 1x、2x、3x 和 4x 的资源。Android 会为设备选择最佳版本。

dp vs px vs sp 布局语言

dp（与密度无关的像素）

Android 中的标准布局单位。

• 保持不同屏幕密度设备上的用户界面元素一致。

• 在 mdpi （中等密度）下，1dp = 1px 。在更高的密度下，它会按比例缩放。

sp（与尺寸无关的像素）

用于文本大小。与 dp 类似，但会尊重用户的字体大小偏好。

• 在 mdpi 屏幕上，14sp  = 14 px

• 在 xhdpi 屏幕上，14sp  = 28 px

• 如果用户在辅助功能设置中设置了更大的文本，sp 会进行调整。

px（像素）

屏幕上实际的物理像素。现在 我们几乎不会再用原始像素进行设计了。

? 布局使用 dp 单位，文本使用 sp 单位，除非是进行像素级的图像处理，否则不要使用 px 单位。

约束条件：响应式设计的支柱

响应式设计意味着要准备好让布局适应不同的屏幕尺寸而不出现错乱。这正是像 Figma 这样的工具中的约束条件变得至关重要的地方。

在 Figma 中约束如何工作

约束功能（Constraints）可让我们将元素相对于其父级框架进行固定。

例如：

• 将按钮固定在底部可确保其位置不变，即使框架高度发生变化。

• 将标题栏固定在左右两侧可确保其随屏幕宽度变化而拉伸。

• 使用“居中”约束可使元素始终居中，不受宽度影响。

实际示例：

1. 登录界面

• 徽标位于顶部中央（顶部 + 水平居左）

• 表单输入固定在左右两侧（固定边距）

• 登录按钮固定在底部，间距固定
  

2. 产品卡片

• 图片固定在顶部

• 图片下方带内边距的文本块

• “加入购物车”按钮固定在右下角

专业提示：始终使用 Figma 中的设备框架或“响应式调整大小”等插件预览我们的设计，以测试我们的用户界面如何响应尺寸变化。

资产缩放：按我们的需求导出

设计一次。正确导出。其余工作交由操作系统完成。

尽管分辨率有所不同，但我们的设计不会出现拉伸或像素化，因为 Android 会根据设备的密度级别来缩放资源。只要我们使用正确的导出流程，元素的比例和视觉清晰度都会保持不变。

图标（矢量）

请使用 SVG 格式来处理任何基于矢量的内容。

• 对于 Android 系统，导出 1x、2x、3x、4x 分辨率（drawable-mdpi、-xhdpi 等）。

• 对于 iOS 系统，请使用 PDF（矢量格式）或 PNG 格式，并采用以下命名模式：

• icon.png（1x）

• icon@2x.png

• icon@3x.png

图片（光栅）

• 使用 PNG 或 WebP 格式（文件体积更小）。

• 分别导出 1x 至 4x 分辨率的版本。

• 除非我们更注重文件大小而非清晰度，否则请勿使用 JPG 格式。

? 资源规则：如果内容可缩放（图标、徽标、UI 形状），请使用矢量格式。如果是照片或细节丰富的图片，请使用光栅格式。

为 iOS 设计：相似却不同

iOS 遵循相似的原则，但基准尺寸不同。常见的基准尺寸是 iPhone 8（375 x 667）。

iOS 缩放系数

• 1x：较旧的设备（如今已很少见）

• 2x：视网膜（Retina）显示屏的标准

• 3x：较大的 iPhone（如 iPhone 8 Plus、iPhone X 及以上机型）

例如，一个 30 pt 的图标：

• 在 2x 像素密度下以 60 像素渲染

• 在 3x 像素密度下以 90 像素渲染

iOS 设计注意事项

• iPhone X 及后续机型上的凹槽和主屏幕指示器要求我们遵循安全区域。请勿将按钮或关键元素放置在过于靠近顶部或底部边缘的位置。

• iOS 会自动缩放资源，因此以 @1x、@2x 和 @3x 导出至关重要。

? 示例：为 iPhone 8（375 x 667）设计，以 @3x 导出。iPhone 8 Plus（414 x 736）会将其略微缩小，同时保持清晰度。

字体与色彩：可扩展、易访问、一致性

排版

• Android：使用 sp 单位。

• iOS：使用 pt 单位。

• 在设计系统中设置文本样式（H1、H2、正文、 标题），并严格遵循使用。

颜色

• 使用代币（主色、强调色、错误色、主文本色）而非直接使用十六进制代码。

• 遵循可访问的对比度比例（至少符合 WCAG AA 标准）。

总结：如何像跨平台 UI 专家一样思考

✅ 应该做什么

• 从 360×640 dp 开始。首先在此掌握约束和层级结构。

• 使用矢量设计，智能导出以适应不同密度。

• 使用 dp/sp/pt - 除非做图像工作，否则不要使用像素。

• 在交付前在真实设备或模拟器上预览。

• 创建响应式布局，而非静态模型。

❌ 应该避免什么

• 仅针对一种屏幕尺寸进行设计。

• 使用 px 而非 dp/sp。

• 仅导出 1x 图像。

• 忽略安全区域和操作系统特定的行为。

• 让自动布局完成所有工作，而不理解约束。

关键要点

• 首先在最小尺寸上设计，以便尽早处理约束。

• 理解密度分组和缩放因子以避免资产模糊。

• 使用 dp/sp（Android）和 pt（iOS）与开发人员使用相同的语言。

• 设置约束以构建灵活、响应式的 UI。

• 正确导出资产，以便所有设备上实现可扩展、清晰的设计。
  

响应式设计不只是关于缩小或拉伸我们的界面，而是要在一个分散的设备生态系统中创建适应性强、智能且一致的用户体验。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。