ios-hig-reference

📁 beshkenadze/claude-skills-marketplace 📅 Feb 1, 2026
10
总安装量
10
周安装量
#30785
全站排名
安装命令
npx skills add https://github.com/beshkenadze/claude-skills-marketplace --skill ios-hig-reference

Agent 安装分布

opencode 10
gemini-cli 10
github-copilot 10
codex 10
claude-code 8
cursor 8

Skill 文档

iOS HIG Reference

Quick reference for Apple Human Interface Guidelines (iOS/iPadOS).

When to Use

  • Need iOS design guidelines
  • Looking up HIG requirements
  • Checking Apple design best practices
  • Understanding iOS design patterns

Core Principles

Clarity

  • Content takes priority
  • Legible text at every size
  • Precise, purposeful icons
  • Subtle, appropriate adornments

Deference

  • UI supports content, never competes
  • Fluid motion for understanding
  • Translucency hints at more content

Depth

  • Visual layers convey hierarchy
  • Realistic motion creates understanding
  • Touch and discoverability through depth

Foundations

Colors

Type Light Dark Usage
systemBackground White Black Primary background
secondarySystemBackground Gray6 Gray5 Grouped content
label Black White Primary text
secondaryLabel Gray Gray Secondary text
separator Gray4 Gray4 Dividers
systemBlue #007AFF #0A84FF Links, actions

Typography

Style Size Weight Usage
largeTitle 34pt Regular Screen titles
title 28pt Regular Section headers
title2 22pt Regular Subsections
title3 20pt Regular Minor headers
headline 17pt Semibold Emphasis
body 17pt Regular Main content
callout 16pt Regular Secondary info
subheadline 15pt Regular Captions
footnote 13pt Regular Small text
caption 12pt Regular Labels
caption2 11pt Regular Tiny labels

Spacing & Layout

  • Margins: 16pt (compact), 20pt (regular)
  • Content spacing: 8pt (tight), 16pt (standard), 24pt (loose)
  • Touch targets: Minimum 44×44pt
  • Button spacing: 12-24pt between tappable elements

Components

Navigation

Tab Bar

  • 2-5 items only
  • Primary destinations, not actions
  • Icons + labels
  • Selected state clearly indicated

Navigation Bar

  • Title centered or large
  • Back button on left
  • Actions on right (max 2-3)

Controls

Buttons

  • Filled: Primary actions
  • Bordered: Secondary actions
  • Plain: Tertiary actions
  • Minimum height: 44pt

Text Fields

  • Clear button when content present
  • Placeholder text for hints
  • Appropriate keyboard type
  • Secure entry for passwords

Toggles

  • Immediate effect (no save needed)
  • Green = on, gray = off
  • Label describes on-state

Lists

Standard

  • Disclosure indicator → navigates to detail
  • Checkmark → selection
  • Detail disclosure → shows info

Swipe Actions

  • Trailing: destructive (delete)
  • Leading: constructive (archive, favorite)

Accessibility

Requirements

Feature Requirement
VoiceOver Labels for all interactive elements
Dynamic Type Support 200% text scaling
Color Contrast 4.5:1 (normal), 7:1 (small text)
Motion Respect reduce motion preference
Touch 44×44pt minimum targets

VoiceOver Labels

// Icon-only button
Button { } label: { Image(systemName: "trash") }
    .accessibilityLabel("Delete")

// Combined elements
HStack { Image(...); Text(...) }
    .accessibilityElement(children: .combine)

// Decorative
Image("decoration")
    .accessibilityHidden(true)

SF Symbols

Rendering Modes

Mode Usage
Monochrome Single color, default
Hierarchical Depth through opacity
Palette 2-3 custom colors
Multicolor Predefined colors

Common Symbols

Category Symbols
Navigation house, magnifyingglass, person, gear
Actions plus, minus, xmark, checkmark
Status star, heart, bookmark, bell
Media play, pause, forward, backward
Editing pencil, trash, square.and.arrow.up

Dark Mode

Must Support

  • All custom colors need light/dark variants
  • Images may need separate dark versions
  • Avoid pure black (#000) — use system colors
  • Test vibrancy and materials

Quick Links

Related Skills

  • ios-swiftui-generator — Generate HIG-compliant code
  • ios-design-review — Validate HIG compliance