Der ultimative UI-Designleitfaden

Inhalt

• 01. Wählen Sie Ihre Typografie
• 02. Wählen Sie die richtige Palette
• 03. Style Links und Buttons
• 04. Erstellen Sie Ihre Komponenten
• 05. Dokumentieren und zusammenarbeiten

Was ist Benutzeroberflächendesign? Eine bessere Frage wäre, was eigentlich in das Design einer Benutzeroberfläche einfließt. Ästhetik? Benutzerfreundlichkeit? Barrierefreiheit? Alle von ihnen? Wie vereinen sich all diese Faktoren, um eine optimale Benutzererfahrung zu ermöglichen, und welche sollten an erster Stelle stehen?

Die Barrierefreiheit sollte immer an erster Stelle stehen und den Grundstein für eine optimale Benutzerfreundlichkeit legen (die Verwendung eines Top-Website-Builders hilft hier). Und wenn eine Benutzeroberfläche sowohl zugänglich als auch verwendbar ist, sollte sie in Bezug auf die Ästhetik bereits recht anständig aussehen (die UI-Designtools helfen hier). Um sicherzustellen, dass Ihr Design auf allen Ebenen funktioniert, müssen Sie es gründlich testen. Dies können Sie mit unserer Auswahl der besten Tools zum Testen von Benutzern tun. Schauen wir uns die grundlegenden Elemente der meisten Designs genauer an und was getan werden kann, um die visuelle Konsistenz sicherzustellen.

01. Wählen Sie Ihre Typografie

Gute Typografie (wie viele Aspekte des Designs) läuft auf Zugänglichkeit hinaus. Visuelles Design trägt sicherlich zum Gesamterlebnis des Benutzers bei, aber letztendlich interagieren Benutzer mit der Benutzeroberfläche und betrachten sie nicht als Kunst. Lesbare Buchstaben sorgen für Klarheit und lesbare Wörter helfen Benutzern, Inhalte effizient zu verarbeiten. Beides ist wichtiger als jede visuelle Ästhetik.

Eine gut gestaltete Typografie kann jedoch immer noch ästhetisch zufriedenstellend sein. Schwarz-auf-Weiß-Helvetica (oder eine ähnliche Schriftart) kann nach nur wenigen einfachen typografischen Verbesserungen eine schöne Sache sein. Unter Verbesserungen verstehen wir das Ändern der Schriftgröße, der Zeilenhöhe, des Buchstabenabstands usw. - nicht der Schriftart oder der Farbe des Textes.

"Schöne" Typografie ist tatsächlich hässlich, wenn sie nicht lesbar ist, weil Frustration immer die Ästhetik übertrumpft. Tolles Design ist ausgewogen und harmonisch.

Wie bei vielen Aspekten des UI-Designs ist die Feinabstimmung der Grafik, um Zugänglichkeit und Ästhetik in Einklang zu bringen, keine Herausforderung. Die Herausforderung besteht darin, die Konsistenz über das gesamte Design hinweg aufrechtzuerhalten. Die Konsistenz schafft eine klare Hierarchie zwischen Elementen unterschiedlicher Bedeutung, was wiederum dazu beiträgt, dass Benutzer eine Benutzeroberfläche schneller verstehen und Inhalte sogar effizienter verarbeiten können.

In Bezug auf Lesbarkeit und Lesbarkeit beträgt die in den WCAG 2.0-Richtlinien für die Barrierefreiheit von Webinhalten festgelegte Mindestschriftgröße 18pt (oder 14pt fett). Die beste zu verwendende Schriftgröße hängt weitgehend von der Schriftart selbst ab. Es ist jedoch wichtig, die visuelle Hierarchie zu berücksichtigen und zu berücksichtigen, wie sich diese Basisgröße von Zusammenfassungen und Überschriften unterscheidet (d. H. h1>, h2>, h3>).

Erstellen Sie mit dem gewünschten UI-Designtool (wir verwenden InVision Studio) eine Reihe von Textebenen (T.) und passen Sie dann alle Größen an, um mit der folgenden Vorlage zu korrelieren:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Bei InVision Studio (und allen anderen UI-Designtools) werden dazu die Stile mithilfe des Inspektorfensters auf der rechten Seite angepasst.

Wählen Sie als Nächstes Ihre Schriftart aus, aber seien Sie vorsichtig, da Sie bei einigen Schriftarten möglicherweise 18 Pixel bemerken p> und 22px h3> sieht gar nicht so anders aus Wir haben zwei Möglichkeiten: Passen Sie die Schriftgrößen an oder ziehen Sie eine andere Schriftart für Überschriften in Betracht. Entscheiden Sie sich für Letzteres, wenn Sie davon ausgehen, dass Ihr Design textlastig sein wird.

Denk daran, dass:

• Visuelles UI-Design ist oft ein Ansatz, bei dem man sich gut fühlt
• Nichts ist entschieden; alles kann sich ändern

Zeilenhöhe

Durch die optimale Zeilenhöhe wird sichergestellt, dass die Textzeilen einen ausreichenden Abstand zwischen ihnen haben, um eine angemessene Lesbarkeit zu erzielen. Dies wird immer mehr als „Standard“ anerkannt. Das Lighthouse Audit-Tool von Google schlägt es sogar als manuelle Überprüfung vor (oder sogar als Flag, wenn der Text Links enthält, die aufgrund der suboptimalen Zeilenhöhe möglicherweise zu nahe beieinander liegen).

Wieder einmal hilft uns die WCAG dabei und erklärt, dass die Zeilenhöhe das 1,5-fache der Schriftgröße betragen sollte. Multiplizieren Sie in Ihrem UI-Designtool unter "Linie" (oder ähnlichem) einfach die Schriftgröße mit - mindestens - 1,5. Wenn der Textkörper beispielsweise 18 Pixel groß ist, beträgt die Zeilenhöhe 27 Pixel (18 * 1,5 - Sie können die mathematische Operation auch direkt im Inspektor ausführen). Seien Sie jedoch auch hier vorsichtig - wenn sich 1.6x besser anfühlt, verwenden Sie 1.6x. Denken Sie daran, dass unterschiedliche Schriftarten unterschiedliche Ergebnisse liefern.

Es ist noch zu früh, um über die Verwendung realer Daten in unserem Design nachzudenken, aber zumindest sollten wir noch etwas realistische Daten verwenden (sogar Lorem Ipsum). InVision Studio verfügt über eine native Realdaten-App, mit der wir sehen können, wie unsere Typografie tatsächlich aussehen könnte.

Absatzabstand

Der Absatzabstand ist kein Stil, den wir mit InVision Studio Inspector deklarieren können. Stattdessen müssen wir Ebenen mithilfe von Smart Guides (⌥) manuell ausrichten. Ähnlich wie bei der Zeilenhöhe beträgt der magische Multiplikator 2x (doppelte Schriftgröße). Wenn beispielsweise die Schriftgröße 18 Pixel beträgt, sollte mindestens 36 Pixel Platz vorhanden sein, bevor Sie zum nächsten Textblock gelangen. Der Buchstabenabstand sollte mindestens 0,12 betragen.

Wir müssen uns jedoch erst darum kümmern, wenn wir mit der Erstellung von Komponenten beginnen.

Geteilte Stile

Wenn Ihr UI-Designtool dies unterstützt (InVision Studio noch nicht), sollten Sie diese typografischen Stile in "Freigegebene Stile" umwandeln, um sie schnell wiederverwendbar zu machen und gleichzeitig die visuelle Konsistenz sicherzustellen. Dies erfolgt normalerweise über den Inspektor.

02. Wählen Sie die richtige Palette

Die Auswahl der perfekten Farben für Ihr Design geht weit über die Ästhetik hinaus: Sie kann die gesamte Hierarchie Ihrer Website beeinflussen.

Wenn es um UI-Design geht, ist Farbe gewöhnlich eines der ersten Dinge, mit denen wir uns gerne beschäftigen, aber wir haben gelernt, dass es eine schlechte Sache ist, direkt in visuelles Design einzutauchen. Dies ist sicherlich richtig, aber wenn es um visuelle Konsistenz geht, sollte Farbe ein Hauptanliegen sein, da sie andere Rollen spielt.

Farbe im UI-Design kann sehr effektiv sein, aber da einige Benutzer (viele tatsächlich) unter verschiedenen Arten von Sehbehinderungen leiden, ist sie nicht immer zuverlässig. Davon abgesehen geht es nicht unbedingt um die spezifische Farbe, die verwendet wird, sondern um die Art der Farbe. Dies gilt möglicherweise nicht für das Branding, da Farbe in dieser Hinsicht für emotionale Auswirkungen verwendet wird. Im UI-Design wird Farbe jedoch auch für die Kommunikation von Absicht, Bedeutung und natürlich visueller Hierarchie verwendet.

01. Stark
Das Stark-Plugin ist mit Sketch und Adobe XD kompatibel und hilft Ihnen, den Farbkontrast zu überprüfen und Farbenblindheit direkt von der Leinwand aus zu simulieren. Unterstützung für Figma und InVision Studio kommt sehr bald.
02.Farben
Colors ist ein Satz von 90 Farbkombinationen mit dem entsprechenden Farbkontrast, um die WCAG 2.0-Richtlinien zu erfüllen. Einige von ihnen erfüllen sogar den AAA-Standard.
03. A11y Projekt
Das A11y-Projekt ist eine riesige Drehscheibe für alles, was mit Barrierefreiheit zu tun hat. Es enthält Ressourcen, Tools, Tipps und Tutorials und wird vom Hersteller des Stark-Plugins erstellt und von InVision finanziert.

Die drei Arten von Farben

Farben haben eine Bedeutung, daher ist es wichtig, nicht zu viele davon zu haben. Zu viele Bedeutungen führen zu mehr Dingen, die der Benutzer verstehen und sich merken muss - ganz zu schweigen von mehr Farbkombinationen, über die wir uns Sorgen machen müssen. Im Allgemeinen wäre dies das empfohlene Format:

• Eine Call-to-Action-Farbe (auch die Hauptmarkenfarbe)
• Eine neutrale dunkle Farbe (besser für UI-Elemente oder den dunklen Modus)
• Für alle oben genannten eine etwas hellere und dunklere Variante

Dies ermöglicht Folgendes:

• Der Dunkelmodus ist leicht zu erreichen
• Unsere CTA-Farbe wird niemals mit anderen Farben in Konflikt stehen
• In jedem Szenario können wir betonen und de-betonen

Richten Sie Ihre Palette ein

Erstellen Sie mit dem gewünschten UI-Design-Tool eine ziemlich große Zeichenfläche (tippen Sie auf A) für jede Farbe (mit den Namen "Marke", "Neutral / Hell" und "Neutral / Dunkel"). Erstellen Sie dann in jeder Zeichenfläche zusätzliche kleinere Rechtecke, in denen die dunkleren und helleren Variationen der Farbe sowie die anderen Farben selbst angezeigt werden.

Wir würden etwas heller und dunkler als 10 Prozent mehr Weiß und 10 Prozent mehr Schwarz betrachten. Wenn Sie fertig sind, zeigen Sie auf jeder Zeichenfläche eine Kopie der typografischen Stile an. Die Farbe dieser Textebenen sollte neutrales Licht sein, außer auf der Zeichenfläche mit neutralem Licht, wo sie neutral dunkel sein sollten.

Kontrast

Als nächstes müssen wir unsere Farben auf optimalen Farbkontrast überprüfen. Es gibt eine Vielzahl von Tools, die dies tun können, zum Beispiel das Stark-Plugin für Sketch und Adobe XD oder Contrast für macOS. Eine Online-Lösung wie Contrast Checker oder Color Contrast Checker reicht jedoch völlig aus.

Überprüfen Sie den Farbkontrast für jede Kombination und passen Sie die Farben entsprechend an. Wenn Sie sich nicht sicher sind, welche Farben Sie verwenden sollen, verwenden Sie die Empfehlungen von Color Safe.

03. Style Links und Buttons

Größe

Schaltflächen und Links sollten, ähnlich wie Typografie, einige Variationen aufweisen. Schließlich sind nicht alle Aktionen gleich wichtig, und wie bereits erwähnt, ist Farbe eine unzuverlässige Kommunikationsmethode, sodass sie nicht die Hauptmethode zur Beeinflussung der visuellen Hierarchie sein kann. Wir müssen auch mit der Größe spielen.

Ein visueller Erschwinglichkeitstest ist ein Usability-Test, mit dem ermittelt wird, ob Tap-Ziele anklickbar erscheinen. Synchronisieren Sie das Design von Studio mit Freehand (⌘⇧F), senden Sie die resultierende URL an Tester und lassen Sie sie die Elemente umkreisen, von denen sie glauben, dass sie anklickbar sind.

Nicht-InVision Studio-Benutzer können auch Freehand verwenden, aber InVision Studio-Benutzer können ihre Entwürfe nahtlos über InVision Studio in Freehand starten. Dies ist die schnellste und effizienteste Methode, um visuelles Feedback von Benutzern zu erhalten.

Im Allgemeinen empfehlen wir, den Schaltflächentext als 18px (wie der Haupttext) zu deklarieren, die Schaltflächen selbst weisen jedoch drei Größenvariationen auf:

• Normal: 44px hoch (abgerundete Ecken: 5px)
• Groß: 54px hoch (abgerundete Ecken: 10px)
• Extra groß: 64px hoch (abgerundete Ecken: 15px)

Auf diese Weise können wir bestimmte Schaltflächen ohne Abhängigkeit von der Farbe als wichtiger erscheinen lassen und Schaltflächen verschachteln (z. B. eine Schaltfläche in einem minimal aussehenden Formularfeld verwenden).

Tiefe

Unabhängig davon, ob das Tippziel eine Schaltfläche oder ein Formularfeld ist, sollten Schatten verwendet werden, um die Tiefe zu erhöhen und daher Interaktivität vorzuschlagen. Ein einziger Schattenstil für alle Varianten von Schaltflächen und Formularfeldern ist in Ordnung.

Interaktivität

Jeder Schaltflächentyp benötigt eine Variation, um seinen Schwebezustand anzuzeigen. Dies verdeutlicht dem Benutzer, dass das, was er versucht hat, völlig in Ordnung ist, und stellt sicher, dass er unverzüglich weitermacht.

Dies ist tatsächlich einer der komplexeren Aspekte bei der Aufrechterhaltung der visuellen Konsistenz, da Farbe häufig der bevorzugte Stil ist, um Änderungen beim Erstellen eines Zustands vorzunehmen. Glücklicherweise können diese Statusänderungen relativ subtil sein. Daher ist es in Ordnung, die Farbe in eine etwas hellere oder dunklere Variante zu ändern - dafür sind sie gedacht. Dies gilt auch für Links.

Wenn wir uns dagegen entscheiden, verwenden wir eine Farbe, die entweder bereits eine bedeutende Bedeutung hat, was dazu führt, dass Benutzer verwirrt werden, oder wir entscheiden uns für eine andere Farbe. Die Entscheidung für eine Sekundärfarbe ist völlig in Ordnung, sollte jedoch für Marketing-Visuals und nicht für UI-Elemente gespeichert werden. Weniger ist mehr (und einfacher).

Denken Sie daran, diesen Schritt für jede Zeichenfläche zu wiederholen. Fügen Sie die CTA-Schaltflächen der Marke nicht in die Zeichenfläche der Marke ein. Später erfahren Sie, was passiert, wenn bestimmte Kombinationen nicht funktionieren.

04. Erstellen Sie Ihre Komponenten

Komponenten sparen viel Zeit und alle UI-Designtools bieten diese Funktion (z. B. in Sketch werden sie als Symbole bezeichnet). In Studio können wir Komponenten erstellen, indem wir alle Ebenen auswählen, aus denen die Komponente bestehen soll, und das ⌘ verwendenK. Abkürzung.

Komponenten verwenden

Wireframes sind sehr nützlich, nicht nur um Benutzeroberflächen mit hoher Benutzerfreundlichkeit zu entwerfen, sondern auch um herauszufinden, was unsere Benutzeroberfläche auf lange Sicht benötigt. Es ist wie zukunftssicher.

Dies bedeutet nicht, dass wir eine Vielzahl von Komponenten entwerfen oder auf ein mögliches Szenario vorbereitet sein müssen, aber es bedeutet, dass wir eine „Was wäre wenn?“ - Haltung einnehmen müssen.

Wenn unser Drahtmodell beispielsweise eine 3x1-Komponente erfordert, wir jedoch wissen, dass der Inhalt nicht in Stein gemeißelt ist, könnte eine kleine Betrachtung dazu führen, dass wir uns fragen: "Was ist, wenn diese Komponente 4x1 ist?". Als Faustregel gilt: Design nur für die bereits vorhandenen Benutzeranforderungen, aber versuchen Sie, Lösungen relativ flexibel zu gestalten. Andernfalls werden wir später mit einigen sehr unordentlichen "Design-Schulden" enden.

Jetzt können wir diese Komponente wiederverwenden, indem Sie sie auf der linken Seite unter Bibliotheken> Dokument auf die Leinwand ziehen. Beachten Sie jedoch, dass dieser Workflow je nach UI-Tool unterschiedlich sein kann.

Diese Methode zum Erstellen von Styleguides (und schließlich zum Erstellen des Designs selbst) eignet sich besonders gut für modulare / kartenbasierte Layouts, obwohl „gemeinsame Bereiche“ wie Kopf-, Fuß- und Navigationsbereiche auch hervorragende Kandidaten für eine Komponente sind.

Genau wie bei unseren typografischen Stilen, Farben und Schaltflächen müssen wir daran denken, unsere Komponenten sorgfältig zu organisieren.

Unsere Regeln anwenden

Zuvor hatten wir eine Bemerkung darüber gemacht, dass keine Marken-CTA-Tasten über der Markenfarbe verwendet werden, da Marken-CTA-Tasten offensichtlich unter allem anderen hervorstechen müssen. Wie erstellen wir eine Markenkomponente, während wir weiterhin eine Markenkomponente für CTA verwenden können? Wenn wir beispielsweise neutrale dunkle Tasten für Navigationsschaltflächen oder einfach weniger wichtige Schaltflächen verwenden, wäre dies keine Option, oder?

Recht. Dies wäre also eine ideale Gelegenheit, um eine Komponente zu erstellen - insbesondere eine Kombination aus Überschrift, Text und Schaltfläche. Beachten Sie, wie ich einen Kartenhintergrund für neutrales Licht erstellt habe, um die Verwendung der Markentaste zu ermöglichen. In ähnlicher Weise sieht das neutrale Lichtformfeld (Formularfelder sind normalerweise weiß, da das mentale Modell historisch gleichbedeutend mit Papierformen ist) auf dem neutralen hellen Hintergrund nicht besonders gut aus, sodass sie nur auf dem neutralen dunklen Hintergrund verwendet werden können - entweder direkt oder innerhalb eine neutrale dunkle Komponente. Auf diese Weise machen wir unser Design flexibel, halten uns an unsere Regeln und halten die Konsistenz aufrecht.

Stresstest

Im Idealfall besteht der schnellste und effektivste Weg, um die Robustheit unseres Designs sicherzustellen, darin, es einem Stresstest zu unterziehen. Ein Design auf die Probe zu stellen bedeutet, grausam zu sein. Nehmen wir an, wir haben eine Navigation mit einer X-Anzahl von Navigationselementen, da dies die Voraussetzung war. Um wirklich Flexibilität zu gewährleisten, versuchen Sie, diese Anforderungen zu ändern, indem Sie mehr Navigationselemente hinzufügen, oder, um wirklich einen Schraubenschlüssel in die Arbeit zu werfen, fügen Sie auch ein Navigationselement mit einer höheren visuellen Hierarchie als die anderen hinzu. Lassen unsere Größen-, Typografie- und Farbregeln so etwas zu? Oder brauchen wir eine andere Regel, um eine optimale Benutzerfreundlichkeit zu bieten?

Beachten Sie, dass es einen Unterschied zwischen dem Hinzufügen von Regeln und dem Biegen der Regeln gibt. Mehr Randfälle bedeuten weniger Konsistenz. Aus Gründen der Benutzerfreundlichkeit ist es daher meistens besser, die Komponente einfach zu überdenken.

05. Dokumentieren und zusammenarbeiten

Wie können wir unsere Designdateien sowohl für uns selbst als auch für andere Designer, die unsere Designdatei verwenden, einfacher verwenden? Wie Sie herausfinden werden, ist es wichtig, sie sicher in einem zuverlässigen, gemeinsam genutzten Cloud-Speicher zu speichern.

Farben

Der erste Schritt besteht darin, alle Farben im Farbfeld "Dokumentfarben" zu speichern, sofern dies noch nicht geschehen ist. Dadurch wird der Zugriff auf sie erleichtert, wenn wir sie in unserem Design anwenden müssen.Öffnen Sie dazu das Farbauswahl-Widget im Inspektor, wählen Sie "Dokumentfarben" aus der Dropdown-Liste und klicken Sie auf das Symbol +, um die Farbe zum Farbfeld hinzuzufügen. Dies funktioniert in den meisten UI-Tools genauso.

Gemeinsame Bibliotheken

Als Nächstes müssen wir unser Dokument - einschließlich typografischer Stile, Farben, Schaltflächen, gemeinsamer Bereiche und grundlegender Komponenten - in eine gemeinsam genutzte Bibliothek konvertieren.

Im Wesentlichen bedeutet dies, dass jedes Element eine Komponente sein muss, auch wenn es nur aus einer Ebene besteht. Klicken Sie in der linken Seitenleiste der Bibliotheken auf die Schaltfläche + ‌ und importieren Sie genau dieses Dokument in ein neues Dokument. Das ist richtig: Unser Dokument ist jetzt eine Bibliothek und kann zum Entwerfen von Benutzeroberflächen mit garantierter Konsistenz verwendet werden.

InVision Studio ist in dem Sinne etwas eingeschränkt, dass es noch nicht mit dem offiziellen Design System Manager-Tool von InVision synchronisiert ist. Es ist jedoch einfach genug, die Bibliothek in Dropbox zu speichern, damit andere Designer sie im Laufe der Zeit verwenden und aktualisieren können. Wenn eine Änderung vorgenommen wird (lokal oder remote), werden Sie in jeder Studio-Datei, die die Bibliothek verwendet (erneut lokal oder remote), gefragt, ob Sie die Farben und Komponenten aktualisieren möchten. Auf diese Weise werden Designbibliotheken teamübergreifend verwaltet.

Wenn es darum geht, Benutzeroberflächen zu entwerfen, die visuell konsistent sind, verwenden Sie alles wieder. Entwerfen Sie Schaltflächen, verwenden Sie dann Schaltflächen, um Schaltflächenkomponenten zu erstellen, und verwenden Sie dann
Schaltflächenkomponenten, um andere Komponenten wie Warnungen und Dialoge zu erstellen.

Erstellen Sie nur keine Komponenten, die nicht benötigt werden. Denken Sie daran, dass der Aufbau einer Bibliothek eine kontinuierliche Zusammenarbeit ist. Es muss nicht auf einmal abgeschlossen sein, von Ihnen alleine oder jemals abgeschlossen. Es muss nur eine Sprache vermitteln.

Design im Maßstab

Wenn ein Design erweitert wird, wird es schwieriger, es zu verwalten. Möglicherweise möchten wir verschiedene Anpassungen vornehmen, um die Effizienz und Wartung zu gewährleisten, insbesondere da InVisions DSM noch nicht mit Studio funktioniert.

Beispielsweise möchten wir möglicherweise Textebenen verwenden, um unsere Bibliothek mit Anmerkungen zu versehen, um die Anwendungsfälle verschiedener Elemente zu erläutern. Für die typografischen Stile könnten wir den Text sogar so bearbeiten, dass er aussagekräftiger ist (z. B. "h1> / 1.3 / 44px"). Das sagt das h1>s sollte 44px groß sein und eine Zeilenhöhe von 1,3 haben.

Design Handoff

Design-Handoff-Tools zeigen die verschiedenen Stile an, die von jedem Element im Design verwendet werden, sodass Entwickler die App oder Website erstellen können. Diese Tools enthalten eine Übersicht über die Stile sowie eine Kopie des Farbfelds "Dokumentfarben". Entwickler können diese Stile sogar als Code kopieren. Dies ist hervorragend, wenn Sie sich für die Erstellung einer schriftlichen Konstruktionsdokumentation entschieden haben und Code-Snippet-Darstellungen der Komponenten einfügen möchten.

Wenn Sie sich Sorgen über die Fehlerbehebung und Verwaltung einer Website machen, hilft es, sicherzustellen, dass Sie über den richtigen Webhosting-Service verfügen. Für Ihr Design-System ist jedoch das Design-Handoff-Tool Inspect von InVision die richtige Wahl. Um es zu verwenden, klicken wir in InVision Studio auf die Schaltfläche / das Symbol "In InVision veröffentlichen", öffnen die resultierende URL und tippen auf, um in den Inspektionsmodus zu wechseln. Es ist wirklich praktisch.

Dieser Inhalt erschien ursprünglich im Netzmagazin.