aswin-haridas/apple-guidelines-for-ui

UI-Designrichtlinien (plattformneutral)

119 Referenzseiten in references/ (neben dieser Datei), neu geschrieben aus Apples HIG, um auf jede Plattform anwendbar zu sein. Jede Seite behält eine Source:-Zeile, die auf das Original verweist.

Verwendung

1. Identifizieren Sie die Themen, die die Aufgabe berührt (Komponente, Muster, Grundlage, Eingabe). Wählen Sie aus dem untenstehenden Katalog.
2. Lesen Sie nur die relevanten Seiten mit dem Lese-Tool, z. B. references/buttons.md. Durchsuchen Sie references/ mit einem Stichwort, wenn Sie unsicher sind, welche Seite das Thema abdeckt.
3. Wenden Sie die Anleitung auf die tatsächlich verwendete Plattform an (Web, Android, iOS, Desktop...). Wenn eine Seite plattformübergreifende Äquivalente nennt (Bildschirmlesegeräte, Cmd/Ctrl, Material vs. Systemkonventionen), wählen Sie das für die Zielplattform passende aus; folgen Sie den nativen Konventionen dieser Plattform, wenn sie in Konflikt geraten.
4. Wenn Sie eine UI überprüfen, zitieren Sie die Seite und die spezifische Regel (z. B. „alerts.md: Verwenden Sie einen Abbrechen-Button für destruktive Aktionen“) und sagen Sie konkret, was geändert werden soll.

Wägen Sie bei jeder UI-Arbeit immer design-principles.md (Zweck, Handlungsfähigkeit, Verantwortung, Vertrautheit, Flexibilität, Einfachheit, Handwerkskunst, Freude) und accessibility.md ab.

Indexseiten: index.md, foundations.md, patterns.md, components.md, inputs.md.

Katalog

• accessibility.md — Barrierefreiheit: Barrierefreie Benutzeroberflächen ermöglichen allen Menschen ein großartiges Erlebnis mit Ihrer App oder Ihrem Spiel.
• action-sheets.md — Aktionsblätter: Ein Aktionsblatt (manchmal auch Bestätigungsdialog oder Bottom-Sheet-Menü genannt) ist eine modale Ansicht, die Auswahlmöglichkeiten im Zusammenhang mit einer Aktion präsentiert.
• activity-views.md — Aktivitätsansichten: Eine Aktivitätsansicht – oft als Share-Sheet bezeichnet – präsentiert eine Reihe von Aufgaben, die Personen im aktuellen Kontext ausführen können. Im Web...
• alerts.md — Alarme: Ein Alarm gibt Personen kritische Informationen, die sie sofort benötigen.
• app-icons.md — App-Symbole: Ein einzigartiges, einprägsames Symbol drückt den Zweck und die Persönlichkeit Ihrer App oder Ihres Spiels aus und hilft Personen, es auf einen Blick zu erkennen.
• augmented-reality.md — Erweiterte Realität: Erweiterte Realität (oder AR) ermöglicht es Ihnen, immersive, fesselnde Erlebnisse zu liefern, die virtuelle Objekte nahtlos mit der realen Welt verschmelzen.
• boxes.md — Boxen: Eine Box erstellt eine visuell unterscheidbare Gruppe von logisch zusammenhängenden Informationen und Komponenten.
• branding.md — Branding: Apps und Spiele drücken ihre einzigartige Markenidentität auf eine Weise aus, die sie sofort erkennbar macht und sich gleichzeitig in die Plattform und das...
• buttons.md — Buttons: Ein Button löst eine sofortige Aktion aus.
• charting-data.md — Daten in Diagrammen: Die Darstellung von Daten in einem Diagramm kann Ihnen helfen, Informationen klar und ansprechend zu kommunizieren.
• charts.md — Diagramme: Organisieren Sie Daten in einem Diagramm, um Informationen klar und visuell ansprechend zu kommunizieren.
• collaboration-and-sharing.md — Zusammenarbeit und Teilen: Großartige Zusammenarbeits- und Freigabeerlebnisse sind einfach und reaktionsschnell und ermöglichen es Personen, sich mit Inhalten zu beschäftigen, während sie effektiv kommunizieren...
• collections.md — Sammlungen: Eine Sammlung verwaltet eine geordnete Sammlung von Inhalten und präsentiert sie in einem anpassbaren und hochgradig visuellen Layout.
• color-wells.md — Farbwähler: Ein Farbwähler ermöglicht es Personen, die Farbe von Text, Formen, Führungen und anderen Bildschirmelementen anzupassen.
• color.md — Farbe: Der umsichtige Einsatz von Farbe kann die Kommunikation verbessern, Ihre Marke vermitteln, visuelle Kontinuität bieten, Status und Feedback kommunizieren und...
• column-views.md — Spaltenansichten: Eine Spaltenansicht – auch als Browser oder Miller-Spalten bezeichnet – ermöglicht es Personen, eine Datenhierarchie mithilfe einer Reihe von vertikalen...
• combo-boxes.md — Kombinationsfelder: Ein Kombinationsfeld kombiniert ein Textfeld mit einer Dropdown-Schaltfläche in einem einzigen Steuerelement.
• components.md — Komponenten: Erfahren Sie, wie Sie systemdefinierte Komponenten verwenden und anpassen, um Personen ein vertrautes und konsistentes Erlebnis zu bieten.
• content.md — Inhalt: - Diagramme
• context-menus.md — Kontextmenüs: Ein Kontextmenü bietet Zugriff auf Funktionen, die direkt mit einem Element zusammenhängen, ohne die Oberfläche zu überladen.
• controls.md — Steuerelemente: Ein Steuerelement bietet schnellen Zugriff auf eine Funktion Ihrer App über Systemoberflächen wie ein Schnelleinstellungsfeld, den Sperrbildschirm oder eine Hardware-Verknüpfung...
• dark-mode.md — Dunkelmodus: Der Dunkelmodus ist eine systemweite Erscheinungsbildeinstellung, die eine dunkle Farbpalette verwendet, um ein komfortables Betrachtungserlebnis zu bieten, das für Umgebungen mit wenig Licht optimiert ist...
• design-principles.md — Designprinzipien: Erkunden Sie grundlegende Prinzipien, die das Design auf allen Plattformen leiten – Web, Mobil, Desktop und darüber hinaus.
• designing-for-games.md — Design für Spiele: Wenn Personen Ihr Spiel auf einem beliebigen Gerät spielen, tauchen sie in die von Ihnen entworfene Welt ein und verlassen sich dabei auf die Plattformfunktionen, die sie lieben.
• disclosure-controls.md — Offenlegungssteuerelemente: Offenlegungssteuerelemente zeigen Informationen und Funktionen an, die mit bestimmten Steuerelementen oder Ansichten zusammenhängen, und blenden sie aus.
• drag-and-drop.md — Drag & Drop: Mit Drag & Drop können Personen ausgewählte Fotos, Texte und andere Inhalte verschieben oder duplizieren, indem sie die Auswahl von einem Ort zu einem anderen ziehen...
• edit-menus.md — Bearbeitungsmenüs: Ein Bearbeitungsmenü ermöglicht es Personen, Änderungen an ausgewählten Inhalten in der aktuellen Ansicht vorzunehmen und bietet zusätzlich verwandte Befehle wie Kopieren, Auswählen...
• entering-data.md — Dateneingabe: Wenn Sie Informationen von Personen benötigen, gestalten Sie Möglichkeiten, die es ihnen leicht machen, diese bereitzustellen, ohne Fehler zu machen.
• feedback.md — Feedback: Feedback hilft Personen zu verstehen, was passiert, zu entdecken, was sie als Nächstes tun können, die Ergebnisse von Aktionen zu verstehen und Fehler zu vermeiden.
• file-management.md — Dateiverwaltung: Einige Apps können Dokumente und Dateien unterstützen, die Personen systemweit verwalten möchten.
• focus-and-selection.md — Fokus und Auswahl: Fokus hilft Personen, das Objekt, auf das ihre Interaktion abzielt, visuell zu bestätigen.
• foundations.md — Grundlagen: Verstehen Sie, wie grundlegende Designelemente Ihnen helfen, reichhaltige Erlebnisse zu schaffen.
• game-controls.md — Spielsteuerung: Präzise, intuitive Spielsteuerung verbessert das Gameplay und kann das Eintauchen des Spielers in das Spiel erhöhen.
• gauges.md — Messinstrumente: Ein Messinstrument zeigt einen bestimmten numerischen Wert innerhalb eines Wertebereichs an.
• generative-ai.md — Generative KI: Generative KI befähigt Sie, Ihre App oder Ihr Spiel mit dynamischen Inhalten zu verbessern und intelligente Funktionen anzubieten, die neue Kreativitätsebenen erschließen...
• gestures.md — Gesten: Eine Geste ist eine physische Bewegung, mit der eine Person ein Objekt in einer App oder einem Spiel auf ihrem Gerät direkt beeinflusst.
• getting-started.md — Erste Schritte: Erstellen Sie eine App oder ein Spiel, das sich auf jeder von Ihnen unterstützten Plattform wie zu Hause anfühlt – Web, Mobil, Desktop und darüber hinaus.
• going-full-screen.md — Vollbildmodus: Telefone, Tablets, Desktops und Webbrowser bieten Vollbildmodi, mit denen Personen ein Fenster vergrößern können, um den Bildschirm auszufüllen und Systemsteuerelemente auszublenden...
• gyro-and-accelerometer.md — Gyroskop und Beschleunigungsmesser: Eingebaute Gyroskope und Beschleunigungsmesser können Daten über die Bewegung eines Geräts in der physischen Welt liefern.
• icons.md — Symbole: Ein effektives Symbol ist eine grafische Ressource, die ein einzelnes Konzept auf eine Weise ausdrückt, die Menschen sofort verstehen.
• image-views.md — Bildansichten: Eine Bildansicht zeigt ein einzelnes Bild – oder in einigen Fällen eine animierte Bildsequenz – auf einem transparenten oder undurchsichtigen Hintergrund an.
• image-wells.md — Bildfelder: Ein Bildfeld ist eine bearbeitbare Version einer Bildansicht.
• images.md — Bilder: Um sicherzustellen, dass Ihre Grafiken auf allen von Ihnen unterstützten Geräten großartig aussehen, erfahren Sie, wie das System Inhalte anzeigt und wie Sie Kunstwerke in der entsprechenden...
• inclusion.md — Inklusion: Inklusive Apps und Spiele stellen Menschen an erste Stelle, indem sie respektvolle Kommunikation priorisieren und Inhalte und Funktionen auf eine Weise präsentieren, die für jeden...
• index.md — Richtlinien für die Oberflächengestaltung: Diese Richtlinien enthalten Anleitungen und Best Practices, die Ihnen helfen können, ein großartiges Erlebnis auf jeder Plattform zu gestalten – Web, Mobil, Desktop...
• inputs.md — Eingaben: Erfahren Sie mehr über die verschiedenen Methoden, mit denen Personen Ihre App oder Ihr Spiel steuern und Daten eingeben.
• keyboards.md — Tastaturen: Eine physische Tastatur kann ein wesentliches Eingabegerät zum Eingeben von Text, Spielen, Steuern von Apps und mehr sein.
• labels.md — Labels: Ein Label ist ein statischer Text, den Personen lesen und oft kopieren, aber nicht bearbeiten können.
• launching.md — Starten: Ein optimierter Starterlebnis hilft Personen, Ihre App oder Ihr Spiel sofort zu nutzen.
• layout-and-organization.md — Layout und Organisation: - Boxen
• layout.md — Layout: Ein konsistentes Layout, das sich an verschiedene Bildschirmgrößen, Ausrichtungen und Multitasking-Konfigurationen anpasst, hilft Personen, Ihre App zu verstehen und zu genießen...
• lists-and-tables.md — Listen und Tabellen: Listen und Tabellen präsentieren Daten in einer oder mehreren Spalten von Zeilen.
• live-viewing-apps.md — Live-Viewing-Apps: Wenn Sie eine Live-Viewing-App entwerfen, priorisieren Sie den Inhalt und schaffen Sie unterhaltsame, flüssige Interaktionen, die das Eintauchen in das Live-Viewing-Erlebnis fördern...
• loading.md — Laden: Das beste Ladeerlebnis für Inhalte endet, bevor Personen sich dessen bewusst werden.
• machine-learning.md — Maschinelles Lernen: Maschinelles Lernen ermöglicht es Apps und Spielen, aus Daten und Nutzungsmustern zu lernen, sodass Sie bestehende Erlebnisse verbessern und ansprechende...
• managing-accounts.md — Kontoverwaltung: Wenn es kein unnötiges Hindernis für Ihr Erlebnis darstellt, kann ein Konto eine bequeme Möglichkeit für Personen sein, auf ihre Inhalte zuzugreifen und...
• managing-notifications.md — Benachrichtigungen verwalten: Benachrichtigungen können Personen zeitnahe und wichtige Informationen geben, unabhängig davon, ob das Gerät gesperrt oder in Gebrauch ist.
• maps.md — Karten: Eine Karte zeigt geografische Daten im Innen- oder Außenbereich in Ihrer App oder auf Ihrer Website an.
• materials.md — Materialien: Ein Material ist ein visueller Effekt, der ein Gefühl von Tiefe, Schichtung und Hierarchie zwischen Vorder- und Hintergrundelementen erzeugt.
• menus-and-actions.md — Menüs und Aktionen: - Aktivitätsansichten
• menus.md — Menüs: Ein Menü zeigt seine Optionen an, wenn Personen damit interagieren, was es zu einer platzsparenden Möglichkeit macht, Befehle in Ihrer App oder Ihrem Spiel zu präsentieren.
• modality.md — Modalität: Modalität ist eine Designtechnik, die Inhalte in einer separaten, dedizierten Ansicht präsentiert, die die Interaktion mit der übergeordneten Ansicht verhindert und...
• motion.md — Bewegung: Schöne, fließende Bewegungen bringen die Oberfläche zum Leben, vermitteln Status, geben Feedback und Anweisungen und bereichern das visuelle Erlebnis...
• multitasking.md — Multitasking: Multitasking ermöglicht es Personen, schnell von einer App zur anderen zu wechseln und Aufgaben in jeder auszuführen.
• navigation-and-search.md — Navigation und Suche: - Suchfelder
• nearby-interactions.md — Interaktionen in der Nähe: Interaktionen in der Nähe unterstützen lokale Erlebnisse auf dem Gerät, die die Anwesenheit von Personen und Objekten in der nahen Umgebung integrieren, unter Verwendung von Näherung...
• nfc.md — NFC: Near-Field Communication (NFC) ermöglicht es Geräten, die sich wenige Zentimeter voneinander entfernt befinden, Informationen drahtlos auszutauschen.
• notifications.md — Benachrichtigungen: Eine Benachrichtigung gibt Personen zeitnahe, wertvolle Informationen, die sie auf einen Blick verstehen können.
• offering-help.md — Hilfe anbieten: Obwohl die effektivsten Erlebnisse zugänglich und intuitiv sind, können Sie bei Bedarf kontextbezogene Hilfe bereitstellen.
• onboarding.md — Onboarding: Onboarding kann Personen helfen, Ihre App oder Ihr Spiel schnell zu nutzen.
• outline-views.md — Gliederungsansichten: Eine Gliederungsansicht zeigt hierarchische Daten in einer scrollbaren Liste von Zellen an, die in Spalten und Zeilen organisiert sind.
• page-controls.md — Seitensteuerungen: Eine Seitensteuerung (auch Seitenindikator oder Punktindikator genannt) zeigt eine Reihe von Indikatorbildern an, von denen jedes eine Seite in einer...
• panels.md — Bedienfelder: In einer Desktop-App schwebt ein Bedienfeld normalerweise über anderen offenen Fenstern und bietet zusätzliche Steuerelemente, Optionen oder Informationen, die mit der...
• patterns.md — Muster: Erhalten Sie Designanleitungen für die Unterstützung gängiger Benutzeraktionen, Aufgaben und Erlebnisse.
• pickers.md — Auswahlfelder: Ein Auswahlfeld zeigt eine oder mehrere scrollbare Listen mit eindeutigen Werten an, aus denen Personen auswählen können.
• playing-audio.md — Audio abspielen: Personen erwarten reichhaltige Audioerlebnisse, die sich automatisch anpassen, wenn sich der Kontext auf dem Gerät ändert.
• playing-haptics.md — Haptik abspielen: Das Abspielen von Haptik kann den Tastsinn von Personen ansprechen und ihre Vertrautheit mit der physischen Welt in Ihre App oder Ihr Spiel bringen.
• playing-video.md — Video abspielen: Personen erwarten, auf ihren Geräten reichhaltige Videoerlebnisse zu genießen, unabhängig davon, welche App oder welches Spiel sie verwenden.
• pointing-devices.md — Zeigegeräte: Personen können ein Zeigegerät wie ein Trackpad oder eine Maus verwenden, um durch die Oberfläche zu navigieren und Aktionen auszulösen.
• pop-up-buttons.md — Popup-Buttons: Ein Popup-Button (auf einigen Plattformen auch Dropdown oder Select genannt) zeigt ein Menü mit sich gegenseitig ausschließenden Optionen an.
• popovers.md — Popover: Ein Popover ist eine vorübergehende Ansicht, die über anderen Inhalten erscheint, wenn Personen auf ein Steuerelement oder einen interaktiven Bereich klicken oder tippen.
• presentation.md — Präsentation: - Aktionsblätter
• printing.md — Drucken: Eine App kann die systembereitgestellte Druckfunktion integrieren, wenn es sinnvoll ist, und dabei bei Bedarf benutzerdefinierte Drucker- und dokumentenspezifische Optionen präsentieren...
• privacy.md — Datenschutz: Datenschutz hat oberste Priorität: Es ist entscheidend, transparent über die datenschutzbezogenen Daten und Ressourcen zu sein, die Sie benötigen, und unerlässlich, diese zu schützen...
• progress-indicators.md — Fortschrittsanzeigen: Fortschrittsanzeigen lassen Personen wissen, dass Ihre App nicht hängt, während sie Inhalte lädt oder langwierige Vorgänge ausführt.
• pull-down-buttons.md — Pull-Down-Buttons: Ein Pull-Down-Button zeigt ein Menü mit Elementen oder Aktionen an, die direkt mit dem Zweck des Buttons zusammenhängen.
• rating-indicators.md — Bewertungsindikatoren: Ein Bewertungsindikator verwendet eine Reihe horizontal angeordneter grafischer Symbole – standardmäßig Sterne – um eine Bewertungsstufe zu kommunizieren.
• ratings-and-reviews.md — Bewertungen und Rezensionen: Personen sehen sich oft die Bewertungen und Rezensionen einer App oder eines Spiels an, bevor sie es herunterladen.
• right-to-left.md — Rechts-nach-links: Unterstützen Sie rechts-nach-links-Sprachen wie Arabisch und...