Sketch 设计 iPhone 6 尺寸画板：界面规范与实战教程35

您好！作为一名资深设计软件专家，我非常乐意为您详细阐述如何在Sketch中精准创建并高效利用iPhone 6尺寸的画板进行设计。尽管iPhone 6已非最新机型，但其经典的尺寸（375x667pt）依然是许多移动应用设计的起点，是理解iOS设计规范的基石。本文将带您从零开始，逐步掌握Sketch中iPhone 6尺寸画板的建立、相关设计规范的运用，以及提升工作效率的最佳实践。

iPhone 6，作为苹果公司历史上销量最高的手机之一，其所确立的屏幕尺寸和分辨率标准，在移动设计领域占据着举足轻重的地位。对于UI/UX设计师而言，无论是进行新项目的探索，还是复盘旧有设计，掌握如何精确地在设计工具中创建并应用iPhone 6的尺寸规范都是一项基本且核心的技能。Sketch作为一款专为UI/UX设计而生的矢量编辑软件，凭借其直观的界面、强大的功能和对iOS设计规范的良好支持，成为了无数设计师的首选。

本教程将深入浅出地引导您在Sketch中建立iPhone 6尺寸的画板，并在此基础上，探索与该尺寸相关的设计规范、布局技巧及高效工作流程，帮助您不仅能“建”出大小，更能“用”好大小。

一、理解 iPhone 6 的尺寸与分辨率：设计的基石

在动手创建画板之前，我们首先需要理解iPhone 6的屏幕尺寸和分辨率背后的奥秘。这对于后续的界面设计至关重要。

1.1 物理尺寸与逻辑尺寸 (Points vs. Pixels)

iPhone 6的物理屏幕尺寸是4.7英寸。然而，在UI设计中，我们通常不直接使用英寸，而是关注其像素（Pixels）和点（Points）的概念。
物理像素 (Physical Pixels)： iPhone 6的实际屏幕分辨率是 750 x 1334 像素。这意味着屏幕横向有750个物理发光点，纵向有1334个。
逻辑像素 / 点 (Logical Points)： 为了兼容不同分辨率的屏幕并简化设计师的工作，Apple引入了“点”（Points）的概念。设计师在Sketch中创建界面时，通常以“点”为单位进行设计。iPhone 6的逻辑尺寸是 375 x 667 点 (pt)。
@2x 适配： iPhone 6属于“Retina”屏幕，其显示倍率为@2x。这意味着1个逻辑点（pt）在iPhone 6的屏幕上对应2x2=4个物理像素。所以，375 pt x 2 = 750 px，667 pt x 2 = 1334 px。这完美解释了逻辑尺寸和物理尺寸的关系。设计师只需在375x667pt的画板上进行设计，Sketch在导出图片资产时可以自动生成@2x尺寸的图片。

核心要点： 在Sketch中，我们始终以逻辑点（375x667pt）为单位进行设计。这是理解一切后续操作的关键。

二、在 Sketch 中创建 iPhone 6 尺寸画板的两种方法

掌握了尺寸概念后，我们就可以在Sketch中动手创建画板了。Sketch提供了两种主要的方法。

2.1 方法一：使用预设模板（推荐）

这是最快速、最推荐的方式，尤其适合初学者。
打开 Sketch： 启动Sketch软件，创建一个新的文档（File > New）。
插入画板： 在菜单栏选择 `Insert (插入)` > `Artboard (画板)`，或者直接点击工具栏上的 `A` 键。
选择预设： 在画布右侧的检查器（Inspector）面板中，您会看到一个“Presets”（预设）区域。在“iOS Devices”（iOS设备）分类下，找到并点击 `iPhone 8` 或 `iPhone 6/7/8`。

是的，您没有看错，Sketch通常将iPhone 6、iPhone 7和iPhone 8归为同一尺寸预设，因为它们在逻辑点上的屏幕尺寸都是375 x 667 pt。点击后，一个名为“iPhone 8”或“iPhone 6/7/8”的画板将自动出现在您的画布上，其尺寸正是 375 x 667 pt。

小贴士： 选中画板后，在右侧检查器面板的“Name”字段可以将其重命名为“iPhone 6”或其他更有辨识度的名称。

2.2 方法二：手动绘制与精确输入尺寸

如果您想更深入地了解画板的创建过程，或者需要创建自定义尺寸的画板，可以采用手动方式。
打开 Sketch： 启动Sketch软件，创建一个新的文档。
激活画板工具： 在菜单栏选择 `Insert (插入)` > `Artboard (画板)`，或者直接点击工具栏上的 `A` 键。
绘制画板： 鼠标光标会变成十字形状。在画布上点击并拖动，绘制出一个任意大小的矩形区域。这个区域就是您的画板。
设置精确尺寸： 选中您刚刚绘制的画板。在右侧的检查器（Inspector）面板中，找到“W”（宽度）和“H”（高度）输入框。

在“W”输入框中输入 `375`。
在“H”输入框中输入 `667`。

此时，您的画板将精确调整为375 x 667 pt。
重命名画板： 在检查器面板顶部的“Name”字段中，将其重命名为“iPhone 6”。

这两种方法都能达到相同的目的，但预设方法无疑更为高效。

三、iPhone 6 界面设计规范：在尺寸之上构建

仅仅建立了正确尺寸的画板是不够的。真正的设计专家会在此基础上，遵循iOS的设计规范，构建出高质量、符合用户习惯的界面。

3.1 iOS 安全区域 (Safe Areas) 与关键元素尺寸

了解屏幕上哪些区域是“安全”的，可以避免您的内容被系统UI（如状态栏、导航栏）遮挡。
状态栏 (Status Bar)： 20pt高。位于屏幕顶部，显示时间、信号、电量等信息。您的内容应在此下方开始。
导航栏 (Navigation Bar)： 44pt高。位于状态栏下方，通常包含页面标题、返回按钮和操作按钮。与状态栏组合在一起时，总高度为64pt。
选项卡栏 / 底部导航栏 (Tab Bar)： 49pt高。位于屏幕底部，用于在应用的不同主要功能模块间切换。
工具栏 (Toolbar)： 44pt高。可以替代或与Tab Bar配合使用，提供上下文操作。

在设计时，您可以利用Sketch的 `Layout Grid (布局网格)` 和 `Square Grid (方格网格)` 功能来辅助定位这些区域。

设置布局网格示例：
选中iPhone 6画板。
在右侧检查器面板，找到“Grids”区域，点击 `Layout Settings (布局设置)`。
您可以设置列数（例如，为了响应式设计可以设置为12列或8列），以及Gutters（间距）和Margins（外边距）。例如，左右外边距常设置为16pt。
您也可以添加行网格（Square Grid），并设置网格大小为8pt或4pt，以辅助垂直对齐和间距控制。

3.2 字体排版 (Typography)

Apple为iOS提供了原生字体“San Francisco”（SF Pro），强烈建议在设计中使用它，以确保与系统的一致性。
系统字体： SF Pro Text（适用于小于20pt的文字），SF Pro Display（适用于大于等于20pt的文字）。
常用字号：

标题：24pt, 20pt, 17pt
正文：17pt (默认), 15pt
辅助文字/小字：13pt, 12pt
按钮：17pt


行高： 通常建议行高为字号的1.2-1.5倍，或者使用基于8pt/4pt基线的倍数，以确保文本可读性。

在Sketch中，利用 `Text Styles (文本样式)` 功能可以高效管理字体，确保整个项目字体的统一性。

3.3 图标与图像资产 (Icons & Image Assets)

由于iPhone 6是@2x屏幕，您设计的矢量图标和图像在导出时需要特别注意。
矢量优先： 尽可能使用矢量图形（如Sketch中的形状、路径），这样在放大或缩小尺寸时不会失真，也能轻松导出@2x甚至@3x（如果需要适配更高分辨率屏幕）。
导出设置： 在Sketch中，选中您要导出的图层或切片（Slice），在右侧检查器面板的“Export (导出)”区域，点击“+”添加导出预设。默认情况下，Sketch会为您提供`@1x`, `@2x`, `@3x`等选项，直接选择`@2x`并导出即可。如果您的设计以375x667pt为基准，那么@2x导出的图片将是750x1334px。
图片类型： PNG（带透明背景的位图，适合图标）、JPG（适用于照片）、SVG（矢量图）。

四、提升效率的最佳实践

设计不仅仅是画板和像素，更是高效的工作流程和可维护的设计系统。

4.1 使用 Sketch 组件 (Symbols)

对于重复出现的UI元素（如按钮、输入框、导航栏、列表项等），将其创建为Symbol。这样，您只需修改一次Symbol的主组件，所有实例都会自动更新，极大地节省时间并确保一致性。

创建方法： 选中一个或一组图层，右键选择 `Create Symbol (创建 Symbol)` 或使用快捷键 `⌘⇧K`。

4.2 文本样式与图层样式 (Text Styles & Layer Styles)

与Symbol类似，Text Styles 和 Layer Styles 可以帮助您统一管理项目的文本格式（字体、字号、颜色、行高）和图层样式（填充、描边、阴影）。这对于维护设计系统和快速迭代至关重要。

创建方法： 选中应用了您想要保存样式的图层，在右侧检查器面板中找到“Text Style”或“Layer Style”下拉菜单，点击 `Create New Text Style (创建新文本样式)` 或 `Create New Layer Style (创建新图层样式)`。

4.3 善用页面 (Pages) 和画板命名

保持您的Sketch文件整洁有序非常重要。
页面组织： 使用页面（Pages）来组织您的设计。例如，可以有“UI Library”（组件库）、“Flow A”（流程A）、“Flow B”（流程B）、“Explorations”（探索性设计）等页面。
画板命名： 遵循一致的命名规范，例如 `[页面名称]/[功能名称]/[状态]`（如：`Home/Feed/LoggedIn`，`Profile/Settings/Default`）。

4.4 利用插件 (Plugins)

Sketch拥有强大的插件生态系统，可以进一步提升您的工作效率。
Runner： 快速搜索并执行命令、插件、Symbol等。
Anima App： 实现响应式布局、导出HTML/CSS代码，甚至创建高保真原型。
Abstract / Version Control： 对于团队协作，使用Abstract或其他版本控制工具管理Sketch文件，确保设计版本清晰，协作流畅。
Content Generator： 快速填充头像、姓名、文本等假数据，省去手动填充的麻烦。
Auto Layout： 帮助您创建响应式布局，应对不同屏幕尺寸。

4.5 原型制作 (Prototyping)

Sketch内置了简单的原型功能，可以连接不同的画板，模拟用户点击和页面跳转。这有助于在设计早期验证用户流程。

使用方法： 选中一个图层或画板，在右侧检查器面板中切换到“Prototype”标签，然后拖动连接线到目标画板。

五、总结与展望

通过本文，您不仅掌握了在Sketch中精确创建iPhone 6尺寸（375x667pt）画板的方法，更深入了解了其背后的iOS设计规范，包括安全区域、字体排版、资产导出等关键知识点。同时，我们也探讨了如何利用Sketch的强大功能，如Symbol、Text Styles、Layer Styles以及各类插件，来优化您的设计流程，提升工作效率。

iPhone 6的尺寸虽然经典，但如今的iOS设备尺寸日益多样化（从iPhone SE到iPhone 15 Pro Max）。理解iPhone 6的设计逻辑（特别是@2x的概念和点（pt）的使用）是您未来适应其他尺寸屏幕设计的基础。在实践中不断摸索，结合实际项目需求，您将能够灵活运用这些知识，在Sketch中创造出色的移动应用界面。

祝您在Sketch的设计之旅中，充满乐趣，创意无限！

2025-10-31

上一篇：Sketch PDF优化导出：告别大文件，高效共享你的设计稿！

下一篇：SketchUp 2016：掌握组件精确缩放的多种方法与技巧