Halide: Contrôles professionnels rendus accessibles

Pourquoi Halide a remporté l'Apple Design Award 2022 : contrôle caméra gestuel, activation intelligente et UX inspirée du film. Avec motifs d'implémentation SwiftUI.

6 min de lecture • 1154 mots
Halide: Contrôles professionnels rendus accessibles screenshot

Halide : Des commandes professionnelles rendues accessibles

« La complexité est là—elle ne va simplement pas vous submerger. Quand on vous offre une voie d'accès relativement accessible à cet univers, cela peut éveiller l'enthousiasme sans l'intimidation. »

Halide prouve que les outils professionnels n'ont pas besoin d'interfaces professionnelles. Lauréat de l'Apple Design Award 2022, il dissimule des commandes de niveau reflex derrière des gestes intuitifs, ne révélant leur puissance que lorsque vous en avez besoin.

Pourquoi Halide est important

Créé par l'ancien designer Apple Sebastiaan de With et l'ancien ingénieur Twitter Ben Sandofsky, Halide comble le fossé entre l'application photo simple d'Apple et les applications pro intimidantes.

Réalisations clés : - Apple Design Award 2022 - A rendu la photographie RAW accessible avec Instant RAW - A popularisé les commandes d'appareil photo basées sur les gestes - Utilisation à une main sur tous les formats d'iPhone - Plus de 10 000 avis 5 étoiles

Points clés à retenir

  1. Masquer la complexité, ne pas la supprimer - Les fonctionnalités professionnelles existent mais restent invisibles jusqu'à ce qu'on les invoque ; l'interface « simulateur de vol » n'est pas la seule façon d'exposer la puissance
  2. L'activation intelligente bat les boutons bascule - Les outils qui apparaissent lors de l'interaction (loupe de mise au point pendant le glissement) sont plus intuitifs que les commandes manuelles afficher/masquer
  3. Les gestes doivent sembler physiques - Le balayage vertical pour l'exposition, horizontal pour la mise au point correspond directement au comportement des molettes d'un vrai appareil photo
  4. Enseigner pendant l'utilisation - De brèves étiquettes lors des changements d'état aident les utilisateurs à apprendre naturellement la terminologie photographique, sans tutoriel séparé
  5. L'utilisation à une main est une contrainte de conception - Concevoir pour l'accessibilité au pouce impose une bonne hiérarchie de l'information et priorise les commandes essentielles

Philosophie de conception fondamentale

« Rester en retrait »

Le principe directeur de Halide : les outils doivent apparaître quand on en a besoin, disparaître quand ce n'est pas le cas.

AUTRES APPS PHOTO PRO                 APPROCHE DE HALIDE
───────────────────────────────────────────────────────────────────
Interface « simulateur de vol »       Viseur épuré
Toutes les commandes toujours visibles Les commandes apparaissent à la demande
Apprendre l'interface avant d'utiliser Apprendre en utilisant
Disposition fixe                      Barre d'outils personnalisable
Flux de travail uniquement manuel     Mode auto + manuel disponibles

Insight clé : « Les autres applications photo ressemblaient à des simulateurs de vol avec plein de cadrans, ce qui était intimidant, même pour quelqu'un comme moi qui adore les appareils argentiques. »

Inspiration des appareils argentiques

Halide transpose la joie tactile des appareils analogiques en gestes sur écran tactile.

APPAREIL ARGENTIQUE                  TRADUCTION HALIDE
───────────────────────────────────────────────────────────────────
Rotation de la bague d'ouverture     Balayage vertical pour l'exposition
Rotation de la bague de mise au point Balayage horizontal pour la mise au point
Clics mécaniques                     Retour haptique
Viseur physique                      Composition plein écran
Aiguille du posemètre                Histogramme numérique
Commutateur Manuel/Auto              Bascule du bouton AF

Objectif de conception : « Donnez un appareil photo à un enfant et il jouera avec la bague d'ouverture, les molettes et les interrupteurs. Peut-être pouvons-nous apporter un semblant de ce plaisir à une application sur un morceau de verre. »

Bibliothèque de patterns

1. Activation intelligente

Les commandes apparaissent contextuellement quand on en a besoin, puis disparaissent. Pas besoin d'afficher/masquer manuellement.

Exemple : Loupe de mise au point

ÉTAT PAR DÉFAUT
┌─────────────────────────────────────────────┐
│                                             │
│              [Viseur]                       │
│                                             │
│                                             │
│                                             │
│  [Molette de mise au point en bas]          │
└─────────────────────────────────────────────┘

QUAND L'UTILISATEUR TOUCHE LA MOLETTE DE MISE AU POINT
┌─────────────────────────────────────────────┐
│  ┌──────────┐                               │
│  │ LOUPE    │  ← La loupe de mise au point  │
│  │ MISE AU  │    apparaît automatiquement   │
│  │ POINT    │                               │
│  └──────────┘                               │
│                                             │
│  [Molette de mise au point active]          │
└─────────────────────────────────────────────┘

QUAND L'UTILISATEUR RELÂCHE
┌─────────────────────────────────────────────┐
│                                             │
│              [Viseur]                       │
│                   ↑                         │
│         La loupe s'estompe                  │
│                                             │
│  [Molette de mise au point au repos]        │
└─────────────────────────────────────────────┘

Concept d'implémentation SwiftUI :

struct IntelligentActivation<Content: View, Tool: View>: View {
    @Binding var isInteracting: Bool
    let content: Content
    let tool: Tool

    var body: some View {
        ZStack {
            content

            tool
                .opacity(isInteracting ? 1 : 0)
                .animation(.easeInOut(duration: 0.2), value: isInteracting)
        }
    }
}

struct FocusControl: View {
    @State private var isDragging = false
    @State private var focusValue: Double = 0.5

    var body: some View {
        ZStack {
            // Viseur
            CameraPreview()

            // Loupe de mise au point - apparaît pendant le glissement
            IntelligentActivation(isInteracting: $isDragging, content: EmptyView()) {
                FocusLoupeView(zoomLevel: 3.0)
                    .frame(width: 120, height: 120)
                    .position(x: 80, y: 80)
            }

            // Molette de mise au point
            VStack {
                Spacer()
                FocusDial(value: $focusValue)
                    .gesture(
                        DragGesture()
                            .onChanged { _ in
                                isDragging = true
                            }
                            .onEnded { _ in
                                isDragging = false
                            }
                    )
            }
        }
    }
}

2. Divulgation progressive

Simple par défaut, complexe quand nécessaire. L'interface se transforme selon le mode.

Transformation de mode :

MODE AUTO (Par défaut)
┌─────────────────────────────────────────────┐
│                                             │
│              [Viseur]                       │
│                                             │
│                                             │
│ ┌───┐                               ┌───┐   │
│ │ [F] │                               │ AF │   │
│ └───┘                               └───┘   │
│              ┌───────────┐                  │
│              │   (●)     │  ← Déclencheur   │
│              └───────────┘                  │
└─────────────────────────────────────────────┘
Commandes minimales. Photographiez, tout simplement.

MODE MANUEL (Après avoir appuyé sur « AF » → « MF »)
┌─────────────────────────────────────────────┐
│  [Histogramme]                 [Focus Peak] │
│                                             │
│              [Viseur]                       │
│                                             │
│ ┌───┐ ┌───┐ ┌───┐              ┌────┐      │
│ │ [F] │ │WB │ │ISO│              │ MF │      │
│ └───┘ └───┘ └───┘              └────┘      │
│              ┌───────────┐                  │
│  [────────────────●───────] ← Molette MAP  │
│              │   (●)     │                  │
│              └───────────┘                  │
└─────────────────────────────────────────────┘
Toutes les commandes révélées. Outils pro accessibles.

Implémentation :

enum CameraMode {
    case auto
    case manual

    var visibleControls: [CameraControl] {
        switch self {
        case .auto:
            return [.flash, .shutter, .autoFocus]
        case .manual:
            return [.flash, .whiteBalance, .iso, .shutter,
                    .manualFocus, .histogram, .focusPeaking]
        }
    }
}

struct AdaptiveToolbar: View {
    @Binding var mode: CameraMode

    var body: some View {
        HStack {
            ForEach(mode.visibleControls, id: \.self) { control in
                ControlButton(control: control)
                    .transition(.asymmetric(
                        insertion: .scale.combined(with: .opacity),
                        removal: .scale.combined(with: .opacity)
                    ))
            }
        }
        .animation(.spring(response: 0.3), value: mode)
    }
}

3. Contrôles basés sur les gestes

L'exposition et la mise au point sont contrôlées par des glissements, comme les molettes d'un appareil photo physique.

CONTRÔLE D'EXPOSITION (Glissement vertical n'importe où)
           ↑ Glisser vers le haut = plus lumineux
           │
    ───────┼─────── Exposition actuelle
           │
           ↓ Glisser vers le bas = plus sombre

CONTRÔLE DE MISE AU POINT (Glissement horizontal sur la molette)
    Proche ←────────●────────→ Loin
                  │
            Mise au point actuelle

ACTIONS RAPIDES (Glissements depuis les bords)
    ← Bord gauche : Accéder à la photothèque
    → Bord droit : Ouvrir le panneau des contrôles manuels

Implémentation :

struct GestureCamera: View {
    @State private var exposure: Double = 0
    @State private var focus: Double = 0.5

    var body: some View {
        ZStack {
            CameraPreview()

            // Geste d'exposition (n'importe où sur l'écran)
            Color.clear
                .contentShape(Rectangle())
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            // La translation verticale correspond à l'exposition
                            let delta = -value.translation.height / 500
                            exposure = max(-2, min(2, exposure + delta))
                            HapticsEngine.impact(.light)
                        }
                )

            // Retour visuel
            VStack {
                Spacer()
                ExposureIndicator(value: exposure)
                    .opacity(exposure != 0 ? 1 : 0)
            }
        }
    }
}

struct ExposureIndicator: View {
    let value: Double

    var body: some View {
        HStack {
            Image(systemName: value > 0 ? "sun.max.fill" : "moon.fill")
            Text(String(format: "%+.1f", value))
                .monospacedDigit()
        }
        .font(.caption)
        .padding(8)
        .background(.ultraThinMaterial)
        .clipShape(Capsule())
    }
}

4. Micro-textes pédagogiques

Lorsque les utilisateurs interagissent avec les contrôles, de brèves étiquettes leur enseignent la terminologie.

L'UTILISATEUR APPUIE SUR « AF » → Passe en « MF »
┌────────────────────────────────┐
│  Mise au point manuelle        │  ← Apparaît brièvement
│  Glissez pour ajuster          │
│  la distance                   │
└────────────────────────────────┘
   Disparaît après 2 secondes

L'UTILISATEUR ACTIVE LE FOCUS PEAKING
┌────────────────────────────────┐
│  Focus Peaking                 │
│  Surbrillance rouge = net      │
└────────────────────────────────┘

Implémentation :

struct EducationalToast: View {
    let title: String
    let description: String
    @Binding var isVisible: Bool

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(title)
                .font(.headline)
            Text(description)
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .padding()
        .background(.ultraThinMaterial)
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .opacity(isVisible ? 1 : 0)
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                withAnimation { isVisible = false }
            }
        }
    }
}

// Usage
struct FocusModeToggle: View {
    @State private var showToast = false
    @Binding var isManual: Bool

    var body: some View {
        Button(isManual ? "MF" : "AF") {
            isManual.toggle()
            showToast = true
        }
        .overlay(alignment: .top) {
            EducationalToast(
                title: isManual ? "Manual Focus" : "Auto Focus",
                description: isManual
                    ? "Swipe to adjust distance"
                    : "Tap to focus on subject",
                isVisible: $showToast
            )
            .offset(y: -60)
        }
    }
}

5. Outils Pro (Histogramme, Focus Peaking, Zebras)

Des outils de visualisation professionnels disponibles sans surcharger l'interface.

Options d'histogramme :

PLACEMENT OPTIONS
┌─────────────────────────────────────────────┐
│ [▁▂▃▅▇█▅▃▁]                                 │  ← Top corner (minimal)
│                                             │
│              [Viewfinder]                   │
│                                             │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│              [Viewfinder]                   │
│                                             │
│   ┌─────────────────────────────────────┐   │
│   │ ▁▂▃▅▇██▅▃▂▁ RGB                     │   │  ← Bottom (detailed)
│   └─────────────────────────────────────┘   │
└─────────────────────────────────────────────┘

HISTOGRAM TYPES (cycle by tapping)
1. Luminance (monochrome)
2. RGB (color channels)
3. Waveform (vertical distribution)

Overlay de focus peaking :

struct FocusPeakingOverlay: View {
    let enabled: Bool
    let peakingColor: Color = .red

    var body: some View {
        if enabled {
            // Metal shader would be used in production
            // Highlights edges at focus plane
            GeometryReader { _ in
                // Overlay that highlights in-focus areas
                // Based on edge detection at current focus distance
            }
            .blendMode(.plusLighter)
        }
    }
}

struct ZebraOverlay: View {
    let threshold: Double  // 0.0 to 1.0
    let pattern: ZebraPattern = .diagonal

    enum ZebraPattern {
        case diagonal
        case horizontal
    }

    var body: some View {
        // Striped overlay on overexposed areas
        // Helps identify clipping before capture
    }
}

6. Barre d'outils personnalisable

Les utilisateurs peuvent réorganiser les outils pour correspondre à leur flux de travail.

DEFAULT TOOLBAR
[Flash] [Grid] [Timer] ─(●)─ [RAW] [AF] [Settings]

LONG-PRESS TO CUSTOMIZE
┌─────────────────────────────────────────────┐
│  Drag to reorder                            │
│                                             │
│  [Flash]   [Grid]   [Timer]                 │
│     ↕         ↕         ↕                   │
│  [RAW]    [Macro]  [Settings]               │
│                                             │
│  Hidden:                                    │
│  [Zebra] [Waveform] [Depth]                 │
│                                             │
│  [Reset to Default]           [Done]        │
└─────────────────────────────────────────────┘

Implémentation :

struct CustomizableToolbar: View {
    @State private var tools: [CameraTool] = CameraTool.defaults
    @State private var isEditing = false

    var body: some View {
        HStack {
            ForEach(tools) { tool in
                ToolButton(tool: tool)
                    .draggable(tool) // iOS 16+
            }
        }
        .onLongPressGesture {
            isEditing = true
        }
        .sheet(isPresented: $isEditing) {
            ToolbarEditor(tools: $tools)
        }
    }
}

struct ToolbarEditor: View {
    @Binding var tools: [CameraTool]

    var body: some View {
        NavigationStack {
            List {
                Section("Active Tools") {
                    ForEach($tools) { $tool in
                        ToolRow(tool: tool)
                    }
                    .onMove { from, to in
                        tools.move(fromOffsets: from, toOffset: to)
                    }
                }

                Section("Available Tools") {
                    ForEach(CameraTool.hidden(from: tools)) { tool in
                        ToolRow(tool: tool)
                            .onTapGesture {
                                tools.append(tool)
                            }
                    }
                }
            }
            .navigationTitle("Customize Toolbar")
            .toolbar {
                Button("Done") { /* dismiss */ }
            }
        }
    }
}

Système de Design Visuel

Palette de Couleurs

extension Color {
    // Halide utilise un minimum de couleurs pour le chrome de l'interface
    static let halideBlack = Color(hex: "#000000")
    static let halideWhite = Color(hex: "#FFFFFF")
    static let halideGray = Color(hex: "#8E8E93")

    // Accent pour les états actifs
    static let halideYellow = Color(hex: "#FFD60A")  // Indicateurs actifs

    // Focus peaking
    static let halideFocusPeak = Color(hex: "#FF3B30")  // Superposition rouge
    static let halideZebra = Color(hex: "#FFFFFF").opacity(0.5)
}

Typographie

struct HalideTypography {
    // Labels d'interface (petits, majuscules)
    static let controlLabel = Font.system(size: 10, weight: .bold, design: .rounded)
        .smallCaps()

    // Valeurs (monospace pour les chiffres)
    static let valueDisplay = Font.system(size: 14, weight: .medium, design: .monospaced)

    // Infobulles pédagogiques
    static let tooltipTitle = Font.system(size: 14, weight: .semibold)
    static let tooltipBody = Font.system(size: 12, weight: .regular)
}

Animation et Retour Haptique

Système de Retour Haptique

struct HapticsEngine {
    static func impact(_ style: UIImpactFeedbackGenerator.FeedbackStyle) {
        let generator = UIImpactFeedbackGenerator(style: style)
        generator.impactOccurred()
    }

    static func exposureChange() {
        // Impact léger lors de l'ajustement de l'exposition
        impact(.light)
    }

    static func focusLock() {
        // Impact moyen lors du verrouillage de la mise au point
        impact(.medium)
    }

    static func shutterPress() {
        // Impact fort pour le déclencheur
        impact(.heavy)
    }

    static func modeSwitch() {
        // Retour de sélection pour les changements de mode
        let generator = UISelectionFeedbackGenerator()
        generator.selectionChanged()
    }
}

Animations des Contrôles

// Animation de rotation du cadran
struct FocusDial: View {
    @Binding var value: Double

    var body: some View {
        GeometryReader { geo in
            // Dial visual with tick marks
            Circle()
                .stroke(Color.white.opacity(0.3), lineWidth: 2)
                .overlay {
                    // Tick marks rotate with value
                    ForEach(0..<12) { i in
                        Rectangle()
                            .fill(Color.white)
                            .frame(width: 2, height: 10)
                            .offset(y: -geo.size.height / 2 + 15)
                            .rotationEffect(.degrees(Double(i) * 30))
                    }
                }
                .rotationEffect(.degrees(value * 360))
                .animation(.spring(response: 0.2, dampingFraction: 0.8), value: value)
        }
    }
}

Leçons pour notre travail

1. Masquer la complexité, ne pas la supprimer

Les fonctionnalités avancées existent mais restent hors de vue jusqu’à ce qu’on les invoque.

2. Activation intelligente > Boutons à bascule

Des outils qui apparaissent lors de l’interaction (loupe de mise au point pendant le glissement) sont préférables à des affichages/masquages manuels.

3. Les gestes doivent sembler physiques

Glissement vertical pour l’exposition, horizontal pour la mise au point—cela correspond aux molettes réelles des appareils photo.

4. Enseigner pendant l’utilisation

De brèves étiquettes lors des changements d’état aident les utilisateurs à apprendre la terminologie naturellement.

5. L’utilisation à une main est une contrainte de conception

Concevoir pour l’accessibilité au pouce impose une bonne hiérarchie de l’information.

Questions fréquemment posées

En quoi Halide diffère-t-il des autres applications photo professionnelles ?

La plupart des applications photo professionnelles affichent tous les contrôles en même temps, créant ce que les créateurs de Halide appellent des interfaces « simulateur de vol ». Halide commence avec un viseur épuré et ne révèle les contrôles que lorsque nécessaire. Le mode automatique affiche une interface minimale ; passer en mode manuel révèle progressivement l’histogramme, le focus peaking, l’ISO et les contrôles de balance des blancs. Cette approche rend les fonctionnalités de niveau reflex accessibles sans submerger les nouveaux utilisateurs.

Qu’est-ce que l’activation intelligente et pourquoi est-ce important ?

L’activation intelligente signifie que les outils apparaissent automatiquement lorsque vous interagissez avec les contrôles associés, puis disparaissent lorsque vous cessez. Par exemple, la loupe de mise au point apparaît lorsque vous touchez la molette de mise au point et s’estompe lorsque vous relâchez. Cela élimine le besoin de boutons à bascule pour afficher/masquer les vues d’aide, réduisant l’encombrement visuel et la charge cognitive tout en garantissant que les outils sont toujours disponibles quand nécessaire.

Comment fonctionnent les contrôles gestuels de Halide ?

Halide associe les gestes sur écran tactile aux commandes physiques des appareils photo. Un glissement vertical n’importe où sur l’écran ajuste l’exposition (comme une bague de diaphragme), un glissement horizontal sur la molette de mise au point ajuste la distance de mise au point (comme une bague de mise au point). Ces gestes incluent un retour haptique qui imite les crans mécaniques des molettes réelles des appareils photo. Les glissements depuis les bords offrent un accès rapide à la photothèque et au panneau des commandes manuelles.

Quels outils de visualisation professionnels Halide inclut-il ?

Halide propose un histogramme (modes luminance, RVB ou forme d’onde), le focus peaking (surbrillances rouges sur les bords nets), et les zébrures (lignes diagonales sur les zones surexposées). Ces outils apparaissent en superposition sur le viseur et peuvent être positionnés à différents endroits. Chaque outil est optionnel et accessible depuis une barre d’outils personnalisable que les utilisateurs peuvent réorganiser selon leur flux de travail.

Pourquoi Halide utilise-t-il des métaphores d’appareils photo argentiques pour son interface ?

Les designers de Halide ont observé que les enfants jouent instinctivement avec les bagues de diaphragme, les molettes et les interrupteurs des appareils photo analogiques. Ce plaisir tactile est absent des applications sur écran tactile. En transposant les commandes mécaniques des appareils photo en gestes de glissement avec retour haptique, Halide recrée une partie de cette dimension physique. Cette approche exploite également des décennies d’évolution de l’UX des appareils photo, utilisant des modèles mentaux familiers plutôt que d’inventer de nouveaux paradigmes.