sidebar 设计规范

https://developer.apple.com/design/human-interface-guidelines/sidebars

摘要 #

本文档详细介绍了Apple各平台（iOS、iPadOS、macOS、tvOS、visionOS）中侧边栏的设计与使用规范。侧边栏主要用于帮助用户快速导航到应用的关键区域或顶级内容集合，但因其占用大量空间，开发者应根据平台特性选择合适的导航方式。文档还提供了最佳实践建议，如允许用户自定义侧边栏内容、隐藏侧边栏以及使用简洁的标签等，以确保用户体验的优化。

关键点 #

侧边栏占用大量垂直和水平空间，开发者应根据屏幕空间选择合适的导航方式。
从iOS 18、iPadOS 18、macOS 15、tvOS 14和visionOS 2开始，sidebarAdaptable样式提供了不同平台下的导航行为。
侧边栏应帮助用户快速导航到应用的关键区域或顶级内容集合，如文件夹和播放列表。
允许用户自定义侧边栏内容，以决定哪些区域最重要及其显示顺序。
考虑让用户隐藏侧边栏，以腾出更多空间显示内容或减少干扰。
侧边栏通常不应显示超过两级的层次结构，深层次结构应使用分割视图界面。
在macOS中，侧边栏的行高、文本和符号大小取决于其整体大小，用户可以通过设置调整。

如何在不同平台下优化侧边栏的显示效果？ #

在不同平台下优化侧边栏的显示效果，需要根据各平台的特性和用户习惯进行针对性设计。以下是针对iOS、iPadOS、macOS、tvOS和visionOS的优化建议：

1. iOS #

避免使用侧边栏：由于iOS屏幕空间有限，尤其是在竖屏模式下，侧边栏会占用过多空间。建议使用标签栏（Tab Bar），它在横竖屏下都能保持可见，且占用空间更小。
替代方案：使用NavigationSplitView或UISplitViewController来管理导航，确保在有限空间内提供高效的导航体验。

2. iPadOS #

灵活切换侧边栏和标签栏：从iPadOS 18开始，可以使用sidebarAdaptable样式，允许用户在侧边栏和标签栏之间切换。默认情况下，建议优先使用标签栏，以提供全屏浏览体验。
自定义外观：如果使用UIKit而非SwiftUI，可以通过UICollectionLayoutListConfiguration.Appearance.sidebar来设置侧边栏的外观，确保其符合平台设计规范。

3. macOS #

自适应侧边栏大小：macOS中的侧边栏支持小、中、大三种尺寸，用户可以在系统设置中调整。开发者应确保侧边栏的图标、文本和行高在不同尺寸下都能清晰显示。
使用熟悉的符号：推荐使用SF Symbols来表示侧边栏中的项目，确保图标风格与系统一致。避免为所有图标固定颜色，应使用用户选择的强调色。
自动隐藏侧边栏：在窗口调整大小时，考虑自动隐藏侧边栏，以便为内容腾出更多空间。例如，邮件应用在窗口缩小时会自动折叠侧边栏。

4. tvOS #

直接使用侧边栏：tvOS的屏幕空间较大，适合直接使用侧边栏进行导航。确保侧边栏的设计简洁，避免过多层级，以提升用户的操作效率。

5. visionOS #

在标签栏中使用侧边栏：如果应用的层级较深，可以在标签栏的某个标签内使用侧边栏进行二级导航。确保侧边栏的选择不会改变当前打开的标签。
窗口扩展：visionOS中的窗口通常会扩展以容纳侧边栏，因此用户很少需要手动隐藏侧边栏。确保侧边栏的默认可见性，以便用户轻松发现和使用。

通用最佳实践 #

允许用户自定义侧边栏内容：让用户决定哪些区域最重要及其显示顺序，提升个性化体验。
支持隐藏侧边栏：提供平台特定的交互方式（如iPadOS的边缘滑动手势或macOS的显示/隐藏按钮），让用户可以根据需要隐藏侧边栏。
简洁的标签：侧边栏中的标签应简短且描述性强，避免不必要的文字。
避免过多层级：侧边栏通常不应显示超过两级的层次结构，深层次结构应使用分割视图界面。

通过以上优化策略，可以在不同平台下提供一致且高效的侧边栏体验，同时兼顾用户的操作习惯和屏幕空间的合理利用。

在深层次结构中，如何设计有效的导航方式以替代侧边栏？ #

在深层次结构中，设计有效的导航方式以替代侧边栏时，可以考虑以下策略和最佳实践：

1. 使用分割视图（Split View） #

分割视图界面：在深层次结构中，分割视图是一种有效的替代方案。它通常包括一个侧边栏、一个内容列表和一个详细视图。侧边栏用于显示顶级导航项，内容列表用于显示二级导航项，而详细视图则展示具体内容。
示例：在macOS中，邮件应用使用分割视图来显示邮箱列表（侧边栏）、邮件列表（内容列表）和邮件内容（详细视图）。

2. 标签栏（Tab Bar） #

标签栏导航：标签栏是一种紧凑的导航方式，适合在屏幕空间有限的情况下使用。它可以在屏幕底部显示多个标签，每个标签对应一个顶级导航项。
示例：在iOS中，标签栏常用于应用的底部，提供对主要功能的快速访问。

层级导航：导航栏支持层级导航，用户可以通过点击导航栏中的“返回”按钮逐步返回上一级。这种方式适合在深层次结构中逐步深入和返回。
示例：在iOS中，设置应用使用导航栏来管理多层次的设置选项。

4. 内容列表（Content List） #

内容列表导航：在分割视图中，内容列表可以用于显示二级导航项。用户可以通过点击列表项进入详细视图。
示例：在iPadOS中，文件应用使用内容列表来显示文件夹中的文件和子文件夹。

5. 上下文菜单和操作菜单 #

上下文菜单：在深层次结构中，可以通过长按或右键点击项目来显示上下文菜单，提供快速操作和导航选项。
操作菜单：在导航栏或工具栏中添加操作菜单，提供额外的导航和操作选项。

6. 动态导航 #

动态导航控件：根据用户的操作和上下文动态调整导航控件。例如，在用户深入某个层次时，自动显示相关的导航选项。
示例：在visionOS中，可以在标签栏的某个标签内使用侧边栏进行二级导航，确保侧边栏的选择不会改变当前打开的标签。

7. 用户自定义导航 #

自定义导航内容：允许用户自定义导航内容，决定哪些导航项最重要及其显示顺序。这可以提高用户的导航效率和满意度。
示例：在macOS中，用户可以通过拖动来重新排列侧边栏中的项目。

8. 自动隐藏和显示导航控件 #

自动隐藏：在屏幕空间有限的情况下，自动隐藏导航控件以腾出更多空间显示内容。用户可以通过手势或按钮来显示隐藏的导航控件。
示例：在iPadOS中，用户可以通过边缘滑动手势来显示或隐藏侧边栏。

通过以上策略，可以在深层次结构中设计出高效且用户友好的导航方式，替代或补充侧边栏的功能，确保用户能够轻松地浏览和操作应用内容。

侧边栏的隐藏和显示功能如何影响用户体验？ #

侧边栏的隐藏和显示功能对用户体验有显著影响，主要体现在以下几个方面：

1. 屏幕空间的优化 #

隐藏侧边栏：当用户需要更多空间来查看内容或减少干扰时，隐藏侧边栏可以腾出宝贵的屏幕空间。这对于屏幕较小的设备（如iPad在竖屏模式下）或需要专注于内容的场景（如阅读、编辑）尤为重要。
显示侧边栏：当用户需要快速导航或访问应用的关键功能时，显示侧边栏可以提供便捷的访问路径，提升操作效率。

2. 用户控制与个性化 #

自定义显示：允许用户根据需要隐藏或显示侧边栏，赋予用户更多的控制权，提升个性化体验。例如，用户可以根据当前任务选择是否显示侧边栏，以适应不同的使用场景。
平台特定的交互：在不同平台上，用户对隐藏和显示侧边栏的交互方式有不同的期望。例如，在iPadOS中，用户习惯使用边缘滑动手势来显示或隐藏侧边栏；在macOS中，用户可以通过点击按钮或使用菜单命令来操作侧边栏。遵循这些平台特定的交互方式，可以提升用户的熟悉感和操作流畅度。

3. 减少干扰 #

专注模式：隐藏侧边栏可以减少视觉干扰，帮助用户专注于当前任务。例如，在阅读或编辑文档时，隐藏侧边栏可以让用户更专注于内容本身，提升专注度和工作效率。
简化界面：对于不需要频繁导航的场景，隐藏侧边栏可以简化界面，减少不必要的元素，使界面更加简洁和直观。

4. 可访问性与发现性 #

默认可见性：在visionOS等平台上，窗口通常会扩展以容纳侧边栏，因此用户很少需要手动隐藏侧边栏。在这种情况下，默认显示侧边栏可以确保其容易被发现，提升可访问性。
自动隐藏：在某些情况下，自动隐藏侧边栏（如窗口缩小时）可以为内容腾出更多空间，同时确保用户仍然可以通过简单的操作（如点击按钮或滑动手势）重新显示侧边栏。

5. 导航效率 #

快速切换：在iPadOS 18及更高版本中，sidebarAdaptable样式允许用户在侧边栏和标签栏之间快速切换。这种灵活性可以根据用户的需求和当前任务动态调整导航方式，提升导航效率。
层级管理：在深层次结构中，隐藏侧边栏并使用其他导航方式（如分割视图或标签栏）可以简化导航路径，避免用户迷失在复杂的层级中。

总结 #

侧边栏的隐藏和显示功能通过优化屏幕空间、赋予用户控制权、减少干扰、提升可访问性和导航效率，显著影响用户体验。设计时应根据平台特性和用户需求，提供灵活且直观的隐藏和显示机制，以确保用户在不同场景下都能获得最佳的使用体验。