14、iOS应用外观与用户体验优化指南-优快云博客

本文链接：https://blog.youkuaiyun.com/ipfs8storage/article/details/151162597

iOS应用外观与用户体验优化指南

1. 启动屏幕设计

1.1 启动屏幕的重要性

如果你的应用有品牌，那么尽快让用户看到品牌至关重要。除了应用图标，应用的启动屏幕是展示品牌的绝佳位置。

1.2 设计准则

使用内置故事板 ：利用项目中的 LaunchScreen.storyboard ，尽量避免使用静态图像。故事板可以适应iOS设备支持的各种屏幕尺寸和方向。
模拟快速启动 ：如果故事板看起来与应用的初始主屏幕非常相似，它可以模拟应用的快速启动，避免用户察觉到应用启动的缓慢。
支持暗黑模式 ：启动屏幕应支持暗黑模式。
避免本地化 ：iOS渲染启动屏幕内容的方式与项目中的其他故事板不同，且不会改变，因此iOS不会对该故事板上的任何文本进行本地化。

1.3 操作步骤

打开项目中的 Launchboard.storyboard 。
按下 Command-Shift-L 调出Xcode库，添加一个视图控制器。暂时保留带有图像的现有视图控制器。
再次从库中拖动一个标签栏和导航栏，分别放置在底部和顶部。
从导航栏中移除文本，并将标签栏项目的图标设置为与主应用中的图标相匹配，使用带有位置SF符号的自定义项目和带有放大镜SF符号的自定义项目。
在属性检查器中将此视图控制器设置为该故事板的初始视图控制器。

1.4 效果与考虑

构建并在模拟器中运行应用，现在模拟器会显示一个类似于主屏幕但没有内容的屏幕。这个新屏幕在启动到实际主页的外观和感觉上提供了更好的过渡，但它与首次启动时打开的引导模块不太匹配，因为背景不同。这可能是在设计应用时可以做出的一个“足够好”的设计决策，你和设计师需要共同决定。

2. 引导模块的使用

2.1 引导模块的作用

使用iOS功能（如位置跟踪、HealthKit访问和设备运动）需要用户授予应用访问该数据的权限。将这些提示放在引导模块中是更好的方法。

2.2 使用原则

快速进入应用 ：用户不想长时间浏览引导材料，应尽快获取所需信息并让用户进入应用。
避免许可协议 ：避免在引导模块中显示许可协议和其他法律条款，如果绝对必要，可以将其放在应用的其他位置。
仅运行一次 ：引导模块应在应用首次启动时执行，后续启动应直接进入应用的主屏幕。如果可能，将设置存储在云端，以便用户在设备上重新安装应用时，应用可以从云端获取尽可能多的信息，并在需要时仅重新提示用户提供其他信息。

2.3 PetSave引导模块分析

PetSave的引导模块表现良好，简单明了，能快速向用户介绍应用的高级功能，并且展示了应用的设计语言。但它与启动屏幕不太一致，后续还需要考虑暗黑模式的适配问题。

3. 字体选择与使用

3.1 系统字体的优势

易于阅读 ：苹果设计的旧金山（SF）和纽约（NY）系统字体在各种尺寸、粗细和样式下都易于阅读。
支持多种语言 ：iOS系统字体内置支持超过一百种语言，方便应用进行本地化。

3.2 使用系统字体的准则

强调重要性 ：可以通过加粗或斜体来强调单词或短语的重要性。
尽量少用字体 ：在应用中频繁切换不同字体可能会使应用显得不连贯，给用户带来不理想的体验。
检查自定义字体 ：如果使用自定义字体，确保其清晰可读，并能适应无障碍功能。

3.3 安装自定义字体的步骤

将字体文件添加到项目中。例如，使用名为 Sheep Sans 的字体，可从 DaFont.com 下载。
将字体添加到 PetSave 和 PetSaveTests 目标中。
在 Info.plist 中添加一个名为 Fonts provided by application 的新条目，在该条目下，将 Item 0 的值设置为字体文件的名称，如 sheep_sans.ttf 。

3.4 使用自定义字体的代码示例

Text(animalName)
  .multilineTextAlignment(.center)
  .font(Font.custom("sheep_sans", size: 18, relativeTo: .title3))
  .accessibilityLabel(animalName)

Text(animalBreedAndType)
  .font(Font.custom("sheep_sans", size: 15, relativeTo: .callout))
  .accessibilityLabel(animalBreedAndType)
  .accessibilityHidden(true)

3.5 字体使用的注意事项

独特的字体可以使设计语言更独特，但过于独特的字体可能会影响用户体验。字体的样式（如加粗或斜体）也会影响可读性，设计语言应确保字体在各种样式下都清晰可读。

4. 暗黑模式适配

4.1 暗黑模式的要求

从iOS 13开始，苹果为用户提供了暗黑模式选项，应用应遵循该设置，确保在浅色和暗黑模式下都能有良好的外观。

4.2 适配暗黑模式的考虑因素

当前配色方案 ：检查当前配色方案在暗黑主题下的表现，避免出现深色背景上叠加深色元素的情况。
对比度 ：确保在暗黑模式下有足够的对比度，不要忘记检查徽标或图像。
自定义颜色 ：一些颜色和用户界面元素（如 Spacer() ）会自动处理浅色和暗黑模式之间的切换，但自定义颜色需要使用颜色集来处理。

4.3 SwiftUI内置的暗黑模式支持

自适应系统颜色 ：暗黑模式是动态的，当用户界面元素处于前台时，其背景颜色会略有变化，以提供前景和背景之间的视觉差异。自定义颜色不支持这种动态特性，因此建议使用系统背景颜色。
高对比度颜色 ：系统颜色提供了足够的对比度（至少7:1）。
标签颜色支持 ：主要、次要、三级和四级标签颜色会自然响应浅色和暗黑模式的变化。
SF符号支持 ：SF符号支持浅色和暗黑模式。

4.4 查看暗黑模式视图的方法

在SwiftUI预览中，使用 .preferredColorScheme(.dark) 修饰符启用暗黑模式。
如果使用模拟器，通过模拟器的“功能” -> “切换外观”菜单项或 Shift-Command-A 键盘快捷键将整个模拟器设置为暗黑模式。

4.5 解决对比度问题的示例

在PetSave应用中，宠物外套标签字段在暗黑模式下存在对比度问题。可以通过创建颜色集来解决：
1. 打开项目中的资产目录，右键单击现有颜色文件夹，选择“新建颜色集”。
2. 将颜色重命名为 coat-background-color 。
3. 在“任何外观”样本中，提供当前背景颜色，如 systemBrownColor 。
4. 在“暗黑模式”样本中，选择与深色背景形成良好对比的颜色，如 systemYellowColor 。

4.6 更新代码以使用颜色集

if let coat = animal.coat {
  AnimalDetailCard(
    title: "Coat",
    value: coat.rawValue,
    color: Color(UIColor(named: "coat-background-color") ??
      .systemBrown)
  )
}

4.7 暗黑模式适配的总结

虽然暗黑模式易于利用，但可能需要一些工作来确保设计语言与之兼容。在实现暗黑模式更改时，应尽量在整个应用中保持统一的外观和感觉，以维护应用的一致性。

5. 保持设计一致性

5.1 一致性的重要性

一致性是设计语言的重要品质，每个视图的设计应保持一致，让用户感受到他们正在使用你的应用，并将独特的外观和感觉与应用联系起来。

5.2 设计一致性的方面

字体：应保持一致，避免频繁切换。
颜色：设计语言可以规定某些元素（如标题）在浅色和暗黑模式下始终使用特定的绿色色调。
图标：使用SF符号不仅可以在应用内提供图标一致性，还可以与用户设备上的其他应用保持一致。

5.3 SF符号的优势

着色：SF符号着色后效果很好，如果选择应用范围的着色颜色，使用的任何SF符号都会自动调整。
空心与实心 ：许多SF符号有空心和实心两种格式，可以根据背景和整体设计方案选择。
内置暗黑模式支持 ：苹果设计的SF符号在暗黑模式下看起来很棒。

5.4 应用中的图标示例

PetSave应用中的标签视图图标是常见的SF符号，大多数iOS用户应该熟悉。此外， raywenderlich.com 标志作为表格行图像的占位符，为应用提供了微妙的品牌标识。

6. 国际化与本地化

6.1 国际化与本地化的概念

国际化（i18n）是为本地化（l10n）准备应用的过程，可以看作是为应用添加一层国际外观和感觉。

6.2 涉及的方面

本地化资源 ：Xcode支持文本和图像的本地化资源包，并将它们与项目的其他部分分开维护，方便在开发周期后期将它们集成到项目中。
SF符号 ：SF符号具有支持本地化的能力。
Foundation API ：Foundation中的API提供了处理不同日期、价格、货币、长度等的强大功能。
布局支持 ：SwiftUI和UIKit内置支持本地化功能，如从右到左的文本。

6.3 对PetSave应用进行西班牙语本地化的步骤

6.3.1 创建可本地化的字符串文件

右键单击项目，选择“新建文件”，选择“字符串文件”。
将文件命名为 Localizable.strings ，该文件存储应用中文本和给定语言翻译的键值对。

6.3.2 添加语言环境到Xcode

打开项目文件，在“本地化”下，点击“+”按钮，添加西班牙语环境。
弹出对话框询问要本地化的内容，由于只有 LaunchScreen.storyboard 可用，点击“完成”。
确保创建的 Localizable.strings 文件可本地化，选择该文件，在Xcode的文件检查器中点击“本地化”按钮，从对话框中选择西班牙语，并在文件检查器中启用英语本地化。

6.3.3 添加本地化条目

英语文件 Localizable(English) ：

"Age" = "Age";
"Gender" = "Gender";
"Size" = "Size";
"Coat" = "Coat";
"Adult" = "Adult";
"Male" = "Male";
"Female" = "Female";
"Unknown" = "Unknown";
"Short" = "Short";
"Details" = "Details";
"Contact" = "Contact";
"Location" = "Location";
"Rank me!" = "Rank me!";
"Animals near you" = "Animals near you";
"Near you" = "Near you";
"Search" = "Search";
"Young" = "Young";

西班牙语文件 Localizable(Spanish) ：

"Age" = "Edad";
"Gender" = "Género";
"Size" = "Talla";
"Coat" = "Pelo";
"Adult" = "Adulta";
"Male" = "Masculina";
"Female" = "Femenino";
"Unknown" = "Ignoto";
"Short" = "Corta";
"Details" = "Detalles";
"Contact" = "Contacto";
"Location" = "Posición";
"Rank me!" = "Clasificarme!";
"Animals near you" = "Animales cerca de usted";
"Near you" = "Cerca de usted";
"Search" = "Búsqueda";
"Young" = "Menor";

6.3.4 配置方案的语言环境

打开方案下拉菜单，选择“编辑方案”。
在出现的对话框中，选择“复制方案”。
复制后，将方案重命名为 PetSave (Debug, Spanish) 。
在侧边栏的“运行”条目下，找到“选项”标签，将应用语言更改为西班牙语。

6.3.5 测试项目

从方案选择器中选择 PetSave (Debug, Spanish) 方案，并在模拟器中运行应用。iOS不会翻译所有单词，应用使用的许多数据来自远程API，这些文本仅提供英语版本。但Xcode可以提前翻译其他项目，如标题、固定字符串值和标签栏项目标题，为应用添加了另一层外观和感觉，并扩大了应用的受众范围。

7. 总结

通过优化启动屏幕、合理使用引导模块、选择合适的字体、适配暗黑模式、保持设计一致性以及进行国际化和本地化，能够提升iOS应用的外观和用户体验，使应用更具吸引力和竞争力。在实际开发中，需要根据应用的特点和目标用户群体，综合考虑这些方面，做出最合适的设计决策。

流程图示例

graph TD;
    A[启动屏幕设计] --> B[使用内置故事板];
    A --> C[模拟快速启动];
    A --> D[支持暗黑模式];
    A --> E[避免本地化];
    F[引导模块使用] --> G[快速进入应用];
    F --> H[避免许可协议];
    F --> I[仅运行一次];
    J[字体选择] --> K[系统字体优势];
    J --> L[使用准则];
    J --> M[安装自定义字体];
    N[暗黑模式适配] --> O[考虑因素];
    N --> P[内置支持];
    N --> Q[解决问题示例];
    R[设计一致性] --> S[字体一致];
    R --> T[颜色一致];
    R --> U[图标使用];
    V[国际化与本地化] --> W[涉及方面];
    V --> X[本地化步骤];

表格示例

优化方面	具体内容
启动屏幕设计	使用内置故事板、模拟快速启动、支持暗黑模式、避免本地化
引导模块使用	快速进入应用、避免许可协议、仅运行一次
字体选择	系统字体优势、使用准则、安装自定义字体
暗黑模式适配	考虑因素、内置支持、解决问题示例
设计一致性	字体一致、颜色一致、图标使用
国际化与本地化	涉及方面、本地化步骤

8. 各优化方面的对比分析

为了更清晰地了解各个优化方面的特点和作用，下面通过表格进行对比分析。
| 优化方面 | 主要目标 | 关键操作 | 优势 | 潜在挑战 |
| ---- | ---- | ---- | ---- | ---- |
| 启动屏幕设计 | 快速展示品牌，提供良好启动过渡 | 使用内置故事板，模拟快速启动，支持暗黑模式，避免本地化 | 适应不同屏幕，提升启动速度感，符合系统设置 | 与引导模块可能不匹配 |
| 引导模块使用 | 快速获取权限，引导用户使用 | 快速进入应用，避免许可协议，仅运行一次 | 提高用户使用效率，减少干扰 | 设计与启动屏幕需协调 |
| 字体选择 | 提供清晰可读文本，体现独特设计 | 选择系统或自定义字体，遵循使用准则 | 易于阅读，支持多语言，可定制 | 自定义字体可能影响可读性 |
| 暗黑模式适配 | 确保应用在不同模式下美观 | 考虑配色、对比度，使用颜色集 | 符合系统设置，提供动态效果，高对比度 | 自定义颜色处理复杂 |
| 设计一致性 | 增强用户对应用的辨识度 | 保持字体、颜色、图标一致 | 提升用户体验，与其他应用统一 | 设计调整需全局考虑 |
| 国际化与本地化 | 扩大应用受众范围 | 创建本地化文件，添加语言环境，配置方案 | 支持多语言，适应不同地区 | 部分数据翻译困难 |

9. 实际应用中的综合优化流程

在实际开发中，对iOS应用进行外观与用户体验优化可以按照以下流程进行：

graph LR;
    A[启动屏幕设计] --> B[引导模块使用];
    B --> C[字体选择];
    C --> D[暗黑模式适配];
    D --> E[设计一致性维护];
    E --> F[国际化与本地化];
    F --> G[测试与调整];
    G --> A;

9.1 启动屏幕设计阶段

按照前面提到的准则，使用内置故事板创建启动屏幕，模拟快速启动效果，确保支持暗黑模式并避免本地化问题。
例如，在PetSave应用中，替换静态图像启动屏幕，添加视图控制器、标签栏和导航栏，设置初始状态。

9.2 引导模块使用阶段

设计引导模块，遵循快速进入应用、避免许可协议和仅运行一次的原则。
检查引导模块与启动屏幕的一致性，若不一致则进行调整。

9.3 字体选择阶段

优先考虑系统字体的优势，根据需要安装自定义字体。
编写代码使用字体，并在预览中检查效果，确保字体在各种样式下都清晰可读。

9.4 暗黑模式适配阶段

评估当前配色方案在暗黑模式下的表现，检查对比度和自定义颜色。
创建颜色集解决自定义颜色在不同模式下的显示问题，更新代码使用颜色集。

9.5 设计一致性维护阶段

统一应用中的字体、颜色和图标使用，使用SF符号增强一致性。
确保设计语言在整个应用中保持一致，提升用户对应用的辨识度。

9.6 国际化与本地化阶段

创建可本地化的字符串文件，添加所需的语言环境。
添加本地化条目，配置方案的语言环境，进行测试。

9.7 测试与调整阶段

在不同设备、不同模式和不同语言环境下测试应用。
根据测试结果，对各个优化方面进行调整，不断完善应用的外观和用户体验。

10. 常见问题及解决方案

10.1 启动屏幕与引导模块不匹配问题

问题表现 ：启动屏幕和引导模块的背景或风格不一致，给用户带来不连贯的体验。
解决方案 ：重新设计启动屏幕或引导模块，使其在风格和颜色上保持一致。可以参考应用的整体设计语言进行调整。

10.2 自定义字体可读性问题

问题表现 ：自定义字体在某些设备或样式下难以阅读，影响用户体验。
解决方案 ：选择更易读的自定义字体，或者增加字体的大小和对比度。在不同设备和样式下进行充分测试。

10.3 暗黑模式下对比度问题

问题表现 ：在暗黑模式下，某些元素的对比度不足，导致文本或图标难以看清。
解决方案 ：使用颜色集调整元素的颜色，确保在暗黑模式下有足够的对比度。可以参考系统颜色的对比度标准。

10.4 国际化与本地化翻译不完整问题

问题表现 ：部分文本没有被正确翻译，尤其是来自远程API的数据。
解决方案 ：与API提供商沟通，争取提供多语言支持。对于固定文本，确保在本地化文件中添加完整的翻译条目。

11. 总结与展望

通过对iOS应用外观与用户体验的多个方面进行优化，包括启动屏幕设计、引导模块使用、字体选择、暗黑模式适配、设计一致性维护以及国际化与本地化，可以显著提升应用的吸引力和竞争力。在实际开发中，需要综合考虑各个方面，根据应用的特点和目标用户群体做出合适的设计决策。

未来，随着iOS系统的不断更新和用户需求的变化，应用的外观和用户体验优化将面临新的挑战和机遇。例如，可能会出现更多的系统特性需要适配，用户对个性化和沉浸式体验的要求也会越来越高。开发者需要持续关注这些变化，不断探索新的优化方法，为用户提供更加优质的应用体验。

表格示例

常见问题	问题表现	解决方案
启动屏幕与引导模块不匹配	背景或风格不一致，体验不连贯	重新设计，保持风格和颜色一致
自定义字体可读性问题	某些设备或样式下难以阅读	选择易读字体，增加大小和对比度，充分测试
暗黑模式下对比度问题	元素对比度不足，难以看清	使用颜色集调整颜色，参考系统对比度标准
国际化与本地化翻译不完整	部分文本未正确翻译，尤其是API数据	与API提供商沟通，确保本地化文件条目完整