Was macht Bildvergleich-Schieberegler-System?
Zweck
Das Bildvergleich-Schieberegler-System bietet eine systematische Design- und räumliche Methodik zum Erstellen interaktiver "Vorher und Nachher"-Vergleichskomponenten. Dieses System adressiert die Designherausforderung, zwei überlappende Zustände eines Bildes (z. B. Fotorestaurierung, Farbkorrektur, Design-Mockups, Umweltveränderungen oder medizinische Ergebnisse) so zu präsentieren, dass Benutzer dynamisch schieben, Details enthüllen und vergleichen können. Es verhindert visuelle Desorientierung, bewahrt die Layoutstabilität, stellt sicher, dass Touch-Ziele für Mobilgeräte optimiert sind, und erfüllt die WCAG-AA-Zugänglichkeitsstandards durch strukturierte Tastaturinteraktionen und Screenreader-Ansagen.
Anwendungsfälle
- Kreativ- & Bearbeitungssoftware-Präsentationen: Vergleich unbearbeiteter RAW-Dateien mit endgültig bearbeiteten Fotos, Farbkorrekturvorgaben oder Retuschen.
- Architektur- & Design-Portfolios: Darstellung von Vorher-Nachher-Bauphasen, Umbauprojekten, Innenarchitektur oder Überarbeitungen von Website-Designsystemen.
- E-Commerce & Produkt-Demos: Präsentation von Produkten unter verschiedenen Bedingungen (z. B. wasserdichte Stofftests, Bildschirmschutzfolien, Reinigungsprodukte oder Verschleißvergleiche).
- Umwelt- & wissenschaftliche Visualisierungen: Darstellung von Veränderungen im Laufe der Zeit, wie Satellitenkartierung von Gletscherrückgängen, Stadterweiterungen oder Aufforstungsprojekten.
- Kosmetik- & medizinische Fallstudien: Präsentation hochauflösender Behandlungsergebnisse unter identischen Licht- und räumlichen Bedingungen.
Wann NICHT zu verwenden
- Multi-Item-Entdeckung: Falls Sie diskrete Eigenschaften von 2–5 verschiedenen Produkten vergleichen müssen, verwenden Sie das
comparison-matrix-system. - Allgemeine Bildraster: Für die Standardbildanzeige, Medienkarussells oder Galerien verwenden Sie
imagery-and-media-systemodercarousel-and-slider-system. - Textlastige Vergleiche: Wenn der Hauptinhalt Text oder tabellarische Daten sind (z. B. Softwareversionsfunktionen), verwenden Sie
data-table-ui-systemoder<dl>-Listenelemente. - Subtile Änderungen mit geringem Kontrast: Wenn die visuellen Unterschiede zwischen den beiden Bildern minimal sind und nicht leicht wahrgenommen werden können, ist ein nebeneinander oder gestapeltes Layout mit klaren Bildunterschriften hilfreicher.
Eingaben
- Zwei Kern-Assets: Zwei hochwertige Bilder ("Vorher" und "Nachher"), die aus der exakt gleichen räumlichen Perspektive, dem gleichen Bildausschnitt und der gleichen Auflösung aufgenommen wurden.
- Komponentenabmessungen: Seitenverhältnisse (z. B. 16:9, 4:3 oder 1:1) und Viewport-Grenzen (aus
imagery-and-media-system). - Typografie- und Marken-Tokens: Typografiegrößen und -farben für Beschriftungen, Griffe und Anleitungstexte (aus
fluid-typography-system). - Touch- & Bewegungseinstellungen: Benutzerpräferenzen bezüglich Touch-Gesten und systemseitig reduzierten Bewegungszuständen.
Ausgaben
- Blaupause der Schieberegler-Anatomie: Layoutdefinition, die Container, Hintergrundspur, Clip-Pfad-Overlay, Griffleiste, Greifdaumen und Zustandsbeschriftungen spezifiziert.
- Spezifikation der Tastatursteuerung: Zugängliche Koordinatenverfolgung, die Tasten wie
ArrowLeft,ArrowRight,HomeundEndauf relative Clip-Pfad-Prozentsätze abbildet. - Leitfaden für Mobilgeräte & Touch-Verhalten: Präzise Spezifikationen für Touch-Zielabmessungen, Gesten-Ziehschwellen und Daumenabstände.
- Layout-Erhaltungsregeln: Strukturelle Regeln (z. B. Beibehaltung des Seitenverhältnisses und absolute Größenangaben) zur Verhinderung von Layoutverschiebungen (CLS).
Arbeitsablauf
1. Räumliche Spur und Container einrichten
Seitenverhältnis und strukturelle Ausrichtung beibehalten:
- Seitenverhältnis-Sperrung: Der Container muss ein explizites Seitenverhältnis haben (z. B.
aspect-ratio: 16 / 9oderaspect-ratio: 1 / 1), um Layoutplatz zu reservieren und Cumulative Layout Shift (CLS) zu verhindern. - Absolute Positionierung als Overlay: Setzen Sie den Container auf
position: relative; overflow: hidden;. Platzieren Sie das "Nachher"-Bild als standardmäßigen Hintergrundbildblock (width: 100%; height: 100%; object-fit: cover;). - Clip-Overlay-Block: Positionieren Sie das "Vorher"-Bild in einem absolut positionierten Overlay-Wrapper (
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;). - Bildsynchronisation: Stellen Sie sicher, dass sowohl das Hintergrund- als auch das Overlay-Bild identische Abmessungen, Skalierungseigenschaften (
object-fit: cover) und Ausrichtungen (object-position: center) haben, damit sie exakt überlappen.
2. Enthüllungs-Clip-Pfad implementieren
Verwenden Sie modernes CSS-Clipping anstelle der Größenänderung zweier Bilder, um visuelle Verzerrungen zu vermeiden:
- Clip-Pfad-Wert: Wenden Sie
clip-path: inset(0 calc(100% - var(--exposure-ratio)) 0 0);auf den Overlay-Wrapper an, wobei--exposure-ratioeine benutzerdefinierte CSS-Eigenschaft (z. B.50%) ist, die die Schiebereglerposition darstellt. - Dynamische Variablenbindung: Aktualisieren Sie
--exposure-ratiodynamisch über Maus-, Touch- oder Tastatureingaben. - Bildverzerrung vermeiden: Ändern Sie die Größe der Bilder selbst während des Ziehvorgangs nicht; kürzen Sie nur den Wrapper-Container. Die Bilder müssen relativ zueinander stationär bleiben.
3. Griff und Touch-Daumen entwerfen
Der Griff dient als primäre visuelle Affordanz für die Interaktion:
- Vertikale Trennlinie: Gestalten Sie einen vertikalen Balken, der absolut bei
left: var(--exposure-ratio);positioniert ist. Setzen Sie die Breite auf eine kontrastreiche, dünne Linie (z. B.2pxbis4px) mit einem Schlagschatten, um sich von verschiedenen Bildhintergründen abzuheben. - Greifdaumen-Ziel: Positionieren Sie einen kreisförmigen oder abgerundeten Greifdaumen zentriert auf der vertikalen Linie.
- Visuelle Indikatoren: Betten Sie bidirektionale horizontale Pfeile (← →) oder kontrastierende Texturen im Greifdaumen ein, um horizontale Ziehmöglichkeiten anzuzeigen.
- Touch-Zielgröße (WCAG 2.2 SC 2.5.8): Der interaktive Greifdaumen muss auf Mobil-/Touch-Oberflächen eine physische Touch-Zielgröße von mindestens
44px x 44pxhaben, unabhängig von seiner visuellen Größe. Erreichen Sie dies mit transparenten Pseudoelementen (::after) oder Padding.
4. Zugängliche Textbeschriftungen erstellen
Behalten Sie Benutzerkontext und Orientierung bei:
- Textbeschriftungsposition: Platzieren Sie Beschriftungen (z. B. "VORHER" und "NACHHER") in gegenüberliegenden Ecken des Containers (z. B. "Vorher" oben links, "Nachher" oben rechts).
- Hoher Kontrast: Verwenden Sie halbtransparente dunkle Hintergründe (Scrims) hinter weißen Textbeschriftungen, um ein Mindestkontrastverhältnis von
4.5:1(WCAG AA) unabhängig vom Bildinhalt sicherzustellen. - Interaktives Status-Feedback: Blenden Sie Textbeschriftungen optional aus, wenn der Schieberegler aktiv ist, um visuelle Ablenkung zu minimieren, und stellen Sie sie wieder her, wenn die Interaktion endet.
5. Tastaturnavigation und ARIA-Integration definieren
Die Oberfläche muss vollständig nur mit der Tastatur navigierbar sein:
- Bereichsschieberegler-Hintergrund: Hinterlegen Sie den visuellen Vergleich mit einem nativen, visuell versteckten
<input type="range">-Element. Dies bietet native Bereichsbehandlung, Fokusstatus und ARIA-Rollen. - ARIA-Attribut-Verknüpfung: Weisen Sie
aria-label(z. B. "Vorher und Nachher Bildvergleich"),aria-valuemin="0",aria-valuemax="100"und dynamischesaria-valuenowzu, das den Prozentsatz darstellt. - Tastaturereignis-Zuordnung:
ArrowLeft/ArrowDown: Position um 1 % verringern (oder 5 % für schnellere Bewegung).ArrowRight/ArrowUp: Position um 1 % erhöhen (oder 5 %).PageUp/PageDown: Schiebereglerposition in 10 %-Schritten bewegen.Home: Sofort auf 0 % wechseln (das "Nachher"-Bild vollständig anzeigen).End: Sofort auf 100 % wechseln (das "Vorher"-Bild vollständig anzeigen).
- Fokusindikatoren: Wenn der Schieberegler fokussiert ist, zeigen Sie einen kontrastreichen, deutlich sichtbaren Fokusring um den Greifdaumen. Verstecken Sie niemals Fokus-Stile.
Entscheidungsregeln
Auswahl des Schieberegler-Bewegungsmodus
| Interaktionsmodus | Kriterien für den Anwendungsfall | Implementierungsmethode |
|---|---|---|
| Aktives Klicken/Tippen & Ziehen (Standard) | Hochpräziser Vergleich; am besten für detaillierte Analysen. | Aktualisieren Sie --exposure-ratio bei pointermove nur, wenn die Maus/Berührung auf dem Daumen gedrückt wird. |
| Hover-Folgen | Lässige/Erkundungsvergleiche; reibungslose Landingpage-Funktionen. | Aktualisieren Sie --exposure-ratio direkt, während sich der Cursor über einen beliebigen Teil des Containers bewegt. Nicht als alleinige Methode geeignet; Fallback auf Klicken/Ziehen ist für Mobilgeräte erforderlich. |
| Zwei-Bild-Umschaltung (Überall klicken) | Einfache, schnelle Vergleiche; am besten auf kleinen Bildschirmen mit sehr deutlichen visuellen Veränderungen. | Klicken Sie irgendwo auf den Container, löst einen Übergang zwischen 0 % und 100 % Exposition mit sanftem 0.3s-Easing aus. |
Einschränkungen
- Zugänglichkeit (WCAG AA): Textbeschriftungen müssen das Kontrastverhältnis
4.5:1erfüllen. Der interaktive Controller muss die vollständige Tastaturfokussierung, sichtbare Indikatoren (:focus-visible) und Touch-Ziele von mindestens44px x 44pxunterstützen. - Cumulative Layout Shift (CLS): Beide Bilder und ihr Container müssen das exakt gleiche vordefinierte Seitenverhältnis teilen. Lassen Sie niemals zu, dass der Container auf
0pxHöhe zusammenfällt, während Bilder geladen werden. Verwenden Sie CSSaspect-ratiooder Inline-Padding-Prozentsätze. - Responsive Fluidität: Die Komponente muss dynamisch auf mobile Viewports herunterskalieren. Skalieren Sie auf Bildschirmen
< 480pxdie Beschriftungen proportional oder verschieben Sie sie direkt unter das Bild, um eine Überlappung mit anderen Kernfunktionen zu vermeiden. - Reduzierte Bewegung: Wenn ein Benutzer reduzierte Bewegung bevorzugt (
@media (prefers-reduced-motion: reduce)), deaktivieren Sie sanfte Übergänge bei Verwendung der Tastaturnavigation und vermeiden Sie Hover-Follow-Auslöser zugunsten expliziter Klick-/Tipp-Aktionen.
Häufige Fehlermuster
- Die "Bild-Quetsch"-Falle: Ändern der Größe oder Strecken der Bilder während des Ziehvorgangs anstatt sie zu beschneiden, was zu verformten Bildern führt.
- Der "Zero-CLS-Zusammenbruch": Fehlende Festlegung der Containerabmessungen, wodurch das Layout dramatisch springt, wenn die Bilder schließlich heruntergeladen werden.
- Tastaturausschluss: Erstellen eines Schiebereglers, der nur mit einer Maus gezogen werden kann, was ihn für Tastatur-, Screenreader- und einige Assistenzschalterbenutzer völlig unbrauchbar macht.
- Der "Unsichtbare Daumen" auf hellen Bildern: Fehlender Schlagschatten, Rand oder kontrastreiches Overlay für Griff und Daumen, wodurch sie in hellen/überladenen Bildern vollständig verschwinden.
- Touch-Ziel-Fallen: Den Greifdaumen winzig machen (z. B.
10pxbreit) ohne Touch-Padding, was zu massiver Benutzerfrustration auf Mobilgeräten führt.
Validierungskriterien
- Präzise Overlay-Ausrichtung: Die "Vorher"- und "Nachher"-Bilder sind perfekt ausgerichtet ohne horizontalen Versatz, Quetschung oder Verzerrung während des Schiebens.
- Kein Cumulative Layout Shift: Der Container reserviert Layoutplatz unter Verwendung eines konsistenten Seitenverhältnisses oder expliziter Abmessungen, bevor Bilder geladen werden.
- Mobile Touch-Sicherheit: Das Touch-Ziel des Greifgriffs/Daumens ist auf Mobil-/Touch-Viewports mindestens
44px x 44pxgroß. - Vollständige Tastaturnavigierbarkeit: Benutzer können mit Standardtastaturtasten (
Pfeiltasten,Home,End) navigieren, fokussieren und die Schiebereglerposition anpassen. - ARIA-Standards konform: Der interaktive Controller verwendet semantische Elemente (wie
<input type="range">) oder korrekte ARIA-Rollen (role="slider",aria-valuenow,aria-label). - Kontrast-AA-Konformität: Textbeschriftungen ("Vorher" und "Nachher") und Fokusindikatoren erfüllen das WCAG-Kontrastverhältnis von 4.5:1 gegenüber angrenzenden Oberflächen.
- Bewegungsempfindlichkeit: Das Interaktionsverhalten respektiert Benutzereinstellungen für reduzierte Bewegung (
prefers-reduced-motion: reduce).