第一部分：理解 iOS 7 设计哲学（灵魂所在）

在打开任何设计软件之前，你必须先理解其背后的设计理念，iOS 7 的图标设计并非简单的“去掉阴影”,而是建立在一套完整的设计语言之上。

如何设计ios7风格图标ui教程
（图片来源网络，侵删）

核心原则：

  1. 极简主义:

    • 去芜存菁：图标只保留最核心、最具辨识度的元素，相机图标就是一个简单的方形加一个圆形,没有任何镜头细节或快门按钮。
    • 负空间利用：图标的形状和轮廓由其“空白”部分定义,同样重要。

  2. 深度与层次感:

    • 这是 iOS 7 最具革命性的特点，它通过半透明模糊、动态视差和分层来创造出一种“漂浮”在背景之上的感觉。
    • 图标不再是扁平的，而是有纵深的，背景会透过图标的半透明部分显露出来，并且当你晃动手机时,图标和背景会产生微妙的相对位移。

  3. 清晰与可读性:

    • 所有图标都采用统一的视角——45 度等轴测投影，这创造了一个连贯、统一的视觉世界。
    • 图标内部的元素清晰、不杂乱,确保在任何尺寸下都能被快速识别。

  4. 一致性:

    如何设计ios7风格图标ui教程
    （图片来源网络，侵删）

    所有图标都遵循相同的设计规则：统一的透视、统一的阴影处理方式、统一的圆角半径,这种一致性让整个系统看起来像一个和谐的整体。

第二部分：iOS 7 图标的视觉解剖（技术规格）

了解了灵魂，我们来看看具体的“身体构造”，一个标准的 iOS 7 图标由以下几个关键部分组成：

基础形状与圆角

  • 形状：正方形。
  • 尺寸：1024x1024 像素（用于 App Store 和 Retina 屏幕）。
  • 圆角半径：180 像素，这是一个非常关键且独特的数值，它创造了一个非常柔和、圆润的方形，是 iOS 7 视觉识别的重要特征。

透视与投影

这是 iOS 7 图标的精髓,图标内部的所有元素都遵循一个固定的透视规则。

  • 透视类型：45 度等轴测投影，想象一下，你从一个 45 度的俯视角度去看一个正方体顶面。
  • 投影：图标有一个柔和的、向右下角偏移的投影，这个投影并非简单的黑色，而是带有颜色的柔和光晕，增强了立体感和深度感。
    • 颜色：通常比图标主色调稍暗,并带有一定的透明度。
    • 偏移：向右下角偏移约 10-15 像素（在 1024x1024 的画布上）。
    • 模糊：投影边缘是柔和的,有轻微的高斯模糊效果。

内部元素设计

图标内部的图形设计也必须遵循透视原则。

如何设计ios7风格图标ui教程
（图片来源网络，侵删）
  • 统一视角：所有内部元素（如相机镜头、日历的日期、音符的旗标）都必须是 45 度视角。
  • 简洁线条：使用清晰的路径和形状，避免复杂的纹理和渐变,颜色通常是纯色或简单的双色。
  • “漂浮感”：通过让图标内部图形与背景的模糊层产生轻微的视差差，来增强其“漂浮”在图标表面之上的感觉。

第三部分：实战教程 - 设计一个“设置”图标

我们将使用 Figma（免费且强大，非常适合 UI 设计）来一步步创建一个 iOS 7 风格的“设置”图标。

准备工作

  1. 打开 Figma,创建一个新画板。
  2. 设置参考尺寸：创建一个 1024x1024 像素的画板。
  3. 显示网格：视图 > 显示网格，并设置网格大小为 32px 或 64px,这样有助于对齐。

步骤 1：创建基础图标形状

  1. 绘制正方形：使用矩形工具，按住 Shift 键绘制一个完美的正方形，尺寸为 1024x1024 像素。
  2. 添加圆角：在右侧的检查器中，找到 Corner Radius (圆角) 属性，输入 180。
  3. 填充颜色：为这个形状填充一个代表“设置”的颜色，比如深灰色 (#333333),这就是你的图标背景层。

步骤 2：创建内部图形（齿轮）

这是图标的核心部分，必须遵循 45 度透视。

  1. 绘制齿轮主体：使用椭圆工具，绘制一个正圆形,这将是齿轮的中心。
  2. 绘制齿轮齿：这是最关键的一步，每个齿轮齿都是一个矩形，然后通过旋转和复制来创建完整的齿轮。
    • 绘制一个细长的矩形。
    • 使用 旋转工具，将矩形旋转 45 度。
    • 将旋转后的矩形放置在圆形的边缘。
    • 按住 Alt (Option) 键并拖动旋转中心点,将其移动到圆形的中心。
    • 你可以围绕中心点复制并旋转这个齿，创建出 8 个均匀分布的齿。
  3. 组合齿轮：选中所有齿轮元素，右键选择 Group (编组)，或者使用快捷键 Cmd/Ctrl + G。
  4. 调整齿轮大小和位置：将齿轮组缩小并放置在图标的中心。

步骤 3：创建背景模糊层

这是实现 iOS 7 深感效果的关键。

  1. 创建背景内容：在图标正方形的下方，创建一个比它稍大的矩形，填充一个不同的、鲜艳的颜色（比如蓝色）,模拟一个多彩的系统背景。
  2. 创建模糊效果：
    • 选中那个大背景矩形。
    • 在右侧检查器的 Effects (效果) 面板中，点击 号。
    • 选择 Blur (模糊)，然后选择 Background Blur (背景模糊)。
    • 调整模糊强度（Figma 中默认值效果就不错）。
  3. 调整图层顺序：确保你的图标正方形图层位于模糊背景图层的上方。

步骤 4：添加投影

  1. 选中图标正方形。
  2. 在右侧检查器的 Effects (效果) 面板中，点击 号。
  3. 选择 Drop Shadow (投影)。
  4. 调整投影参数：
    • Color (颜色)：选择一个比图标背景色稍暗的颜色（#222222），并降低其不透明度（50%）。
    • Blur (模糊)：增加模糊值，让投影边缘柔和（20px）。
    • X / Y (偏移)：将 X 和 Y 都设置为正值，X=15, Y=15,模拟右下角的光源。
    • Spread (扩散)：可以适当增加,让投影范围更大一些。

步骤 5：微调与最终效果

  1. 检查透视：审视你的整个图标，确保所有元素（齿轮、投影）都遵循了 45 度的统一视角。
  2. 调整颜色：确保内部图形（白色齿轮）与背景（深灰色）有足够的对比度,以保证清晰可读。
  3. 添加视差差（高级技巧）：为了更逼真，你可以将内部的齿轮再向上和向左轻微移动几个像素，这样，当手机晃动时，它移动的距离会比背景的模糊层更多，强化“漂浮”感。

至此，一个经典的 iOS 7 风格“设置”图标就完成了！

第四部分：设计技巧与注意事项

  • 从模仿开始：最好的学习方式是找一张真实的 iOS 7 图标，尝试用 Figma 或 Sketch 将它 1:1 地复刻一遍。
  • 保持简洁：时刻问自己：“这个元素是必要的吗？” 如果去掉后依然能被识别,那就去掉它。
  • 善用 Figma 的组件：如果你要设计多个图标，可以将投影效果、圆角等设置为组件,以保证整个应用图标风格的一致性。
  • 不要滥用颜色：iOS 7 的颜色通常是鲜艳、纯色的，但也要注意与系统背景的和谐,图标的颜色本身也是一种重要的识别特征。
  • 参考官方资源：苹果开发者网站依然保留了一些 iOS 7 的设计资源,是绝佳的参考资料。

通过这个教程，你不仅学会了如何绘制一个图标，更重要的是理解了 iOS 7 设计背后的深刻逻辑，这种对设计哲学的理解，比任何软件技巧都更加宝贵,祝你设计愉快！