Apropos „Weniger und mehr“ im Webdesign (Bild)

Apropos „Weniger und mehr“ im Webdesign (Bild)
Weniger und mehr in der Design-Trilogie
„Weniger ist mehr“ ist ein Schlagwort vieler Designer. Es wurde erstmals vom Architekturmeister Ludwig Mies van der Rohe vorgeschlagen. Es ist ein Designkonzept, das Einfachheit befürwortet und übermäßige Dekoration ablehnt . Auf dieser Grundlage haben Designer diese Idee kontinuierlich verbessert und neu interpretiert, und mittlerweile ist sie zu einer grundlegenden Theorie und einem grundlegenden Prinzip in der Designbranche geworden. Anhänger dieser Theorie glauben, dass die Verwendung minimalistischen Designs und das Entfernen unnötiger Details größere Vorteile für Produkte und Benutzer bringen und zu besseren Ergebnissen führen können.
In traditionellen Branchen gibt es viele erfolgreiche Beispiele für das Prinzip „Weniger ist mehr“.
Im Jahr 1979 stellte Sony fest, dass die meisten Benutzer einen weitaus größeren Bedarf an Wiedergabe als an Aufnahme hatten. Daher entfernte das Unternehmen die Aufnahmefunktion der herkömmlichen Tonbandgeräte und baute sogar die externen Lautsprecher ab, die damals als unverzichtbar galten. Dann packen Sie den Rest in eine kleine Box und koppeln Sie diese mit Stereokopfhörern. Dies ist der tragbare Walkman-Player, der auf der ganzen Welt beliebt ist.
Im Jahr 1984 erfand IBM durch die Vereinfachung der Struktur von Maus und Trackball den TrackPoint, wodurch die Funktion der Maus auf Mobilgeräten effektiv ersetzt und die Mängel des Trackballs, wie beispielsweise der zu große Platzbedarf, behoben wurden. Mittlerweile ist der TrackPoint zum Symbol der Thinkpad-Notebooks geworden und ähnliche Designs werden auch bei vielen anderen Laptop-Marken verwendet.
Im Jahr 2007 vereinfachte Apple die Tasten seines Telefons, entfernte sogar die gesamte physische Tastatur und brachte das iPhone auf den Markt. Es hat eine Smartphone-Revolution auf der ganzen Welt ausgelöst.
All dies sind große Erfolge, die durch Less‘ Ideen zustande kamen. Bei der tatsächlichen Designarbeit unterlaufen uns jedoch manchmal Fehler, weil wir diese Idee nicht ausreichend verstanden haben. Daher sollte auf Grundlage der tatsächlichen Situation entschieden werden, ob das konkrete Design „weniger“ oder „mehr“ sein sollte. Zum Beispiel die folgenden Beispiele:
1. Einzelheiten zu den kommerziellen Produkten von Baidu
 Im Fengchao-System von Baidu Promotion hat ein Konto die folgende Grundstruktur: Konto > Werbeplan > Werbeeinheit > Schlüsselwort. Wie in der Abbildung gezeigt:
Das bedeutet: Es können mehrere „Werbepläne“ in einem Konto vorhanden sein; es können mehrere „Werbeeinheiten“ in einem Werbeplan vorhanden sein; und es können mehrere „Schlüsselwörter“ in einer Werbeeinheit vorhanden sein. Jetzt muss sich PM eine neue Funktion einfallen lassen und er liefert eine Skizze wie diese:
Der PM erklärte: „Ich brauche einen Locator. Damit können Benutzer auswählen, ob sie das „gesamte Konto“, einen „Werbeplan“, eine „Werbeeinheit“ oder ein „Schlüsselwort“ lokalisieren möchten.“ Ich habe sie kurz gezeichnet und nach dem Prinzip „weniger ist mehr“ miteinander kombiniert. ”
Nachdem ich es gelesen hatte, war ich verwirrt und fragte: „Wenn ich das gesamte Konto lokalisieren möchte, wie muss ich das machen?“
Der PM antwortete: „Für alle Konten wählen Sie einfach nichts aus und klicken Sie direkt auf „Anzeigen“. ”
Ich: „Schwindelig…“
Dies ist ein typisches Beispiel für die Rationalisierung des Inhalts der Benutzeroberfläche, bei der jedoch die Benutzerfreundlichkeit beeinträchtigt wird. Diese Bauform ist zwar die einfachste und platzsparendste, bringt die Funktion hier jedoch nicht klar zum Ausdruck. Nach einer Diskussion wurde es etwa wie folgt geändert:
Das heißt, vor dem ursprünglichen Dropdown-Feld und dem Eingabefeld werden 4 Optionen hinzugefügt. Diese vier Optionen entsprechen vier verschiedenen Analyseebenen. Erst nachdem eine Ebene ausgewählt wurde, werden unten die spezifischen Auswahlsteuerelemente für diese Ebene angezeigt. Diese Änderung unterteilt die Aufgabe des Benutzers in zwei Schritte: 1. Wählen Sie die Ebene aus, die Sie analysieren möchten. 2. Wählen Sie das gewünschte Analyseobjekt aus. Obwohl der Vorgang länger dauert, die Anzahl der Klicks zunimmt und die Elemente auf der Benutzeroberfläche komplizierter werden, liegen die Vorteile auf der Hand: Der gesamte Prozess ist einfacher und reibungsloser geworden und die Benutzer können fast ohne nachzudenken loslegen. Daher verbessert das „Mehr“ an Schnittstellenelementen tatsächlich die tatsächliche Benutzererfahrung. Ganz wie es im Buch „Don't make me think“ heißt: „Es spielt keine Rolle, wie oft Sie klicken, solange jeder Klick eine klare und eindeutige Entscheidung ohne Nachdenken darstellt.“
2. Kursivschrift auf Webseiten
 Auf vielen englischsprachigen Webseiten entscheiden sich Designer dafür, bestimmte Texte kursiv zu setzen. Im Englischen sieht Kursivschrift in manchen Schriftarten schöner aus und dieser Effekt hat bei bestimmten Gelegenheiten auch eine besondere Bedeutung. Beispielsweise wird in Wikipedia häufig Kursivschrift verwendet, um Buchtitel oder Anmerkungen zu schreiben, wie in der Abbildung gezeigt:
Im Screenshot oben ist die Zeile „Dieser Artikel handelt von der Linie von …“ eine Anmerkung und nicht der Haupttext zur Einführung des iPhone. Deshalb verwendet Wikipedia Kursivschrift. Der sinnvolle Einsatz dieser Stile kann die Leseeffizienz des Lesers steigern und die Ästhetik verbessern.
Was die Kursivschrift selbst betrifft, denke ich, dass sie für chinesische Webseiten nicht besonders geeignet ist. Der Grund ist einfach: Bei der auf chinesischen Webseiten üblicherweise verwendeten Schriftgröße von 12 Pixeln werden kursive chinesische Schriftzeichen schlecht erkannt. Die folgenden Screenshots zeigen beispielsweise dieselbe Funktionssteuerung in zwei verschiedenen Sprachen auf der Website einer Fluggesellschaft (ich habe traditionelles Chinesisch gewählt, um das Problem deutlicher zu machen):
Auf dem Screenshot ist deutlich zu erkennen, dass der kursive Text in der englischen Version links gut mit der Schriftart Arial funktioniert. Klar zu erkennen und wunderschön. Aber die rechte Seite ist tragischer. Die Wiedererkennbarkeit der chinesischen 12px-Schriftart Songti nimmt nach dem Hinzufügen der Kursivschrift erheblich ab (das ähnelt ein wenig dem, was Ludwig Mies van der Rohe als „Überdekoration“ bezeichnete). Insbesondere einige chinesische Schriftzeichen mit mehr Strichen scheinen sich zu überlappen.
In diesem Beispiel sollte die Gestaltung der chinesischen Version offensichtlich weniger kompliziert sein und das Entfernen des Kursivstils würde für ein besseres Erlebnis sorgen.
3. Wiedergabetaste und Telefontaste <br />Bei vielen elektronischen Produkten verwenden Designer ein nach rechts zeigendes Dreiecksymbol, um die Wiedergabetaste darzustellen. Dies ist mittlerweile ein Industriestandard. Wenn wir dieses Symbol sehen, verstehen wir es natürlich richtig. Wenn wir also erneut ähnliche Funktionen entwerfen, können wir dieses Symbol direkt verwenden:
In den drei völlig unterschiedlichen Wiedergabesoftwares im obigen Bild können wir die Schaltfläche, die die Wiedergabefunktion darstellt, problemlos finden und es ist nicht nötig, das Wort „Play“ unter die Grafik zu schreiben. Dies spart Platz und vermittelt zudem unsere Definition von Funktionalität. Das Weniger erzielt hier die Wirkung eines Mehr.
Bedeutet dies jedoch, dass wir beim Entwurf von Schaltflächen für ein Produkt weiterhin den Less-Ansatz verwenden können, bei dem nur Grafiken und kein Text bereitgestellt werden? Die Antwort ist eindeutig: Nein. Zum Beispiel:
Dies sind die Tasten einer bestimmten Telefonmarke. Kann irgendjemand die genaue Bedeutung der drei Tasten über den Zifferntasten erraten? Insbesondere die erste und dritte Taste. Abgesehen vom Designer dieses Produkts können die meisten Benutzer möglicherweise nicht auf Anhieb eine genaue Schlussfolgerung ziehen. Benutzer dieses Produkts werden nicht nur mit Funktionsverwirrungen konfrontiert, sondern haben – noch wichtiger – bei der Bedienung des Produkts keine Ahnung, was passiert, wenn sie die Tasten drücken. Wenn keine Vorfreude besteht, werden sich viele Benutzer dafür entscheiden, es gar nicht erst auszuprobieren. Selbst wenn die Funktion an sich nützlich ist, wird es also schwierig sein, sie erfolgreich zu bewerben. Wenn unser Less auf Kosten unklarer Ausdrücke aufbaut, weicht es von der ursprünglichen Absicht von Less ab. Im Hinblick auf solche Details sollten wir meiner Meinung nach in Erwägung ziehen, Text unter die Schaltfläche zu setzen oder die Grafiken direkt durch Text zu ersetzen, um dies auszudrücken.
Zusammenfassen
 1. Einfaches Design kann die Produktnutzung häufig reibungsloser und effizienter machen und ein besseres Benutzererlebnis bieten.
2. Aber manchmal verstehen wir den Satz „Weniger ist mehr“ nicht gründlich genug. Seine ursprüngliche Absicht bestand darin, sich gegen „übermäßige Dekoration“ und nicht gegen blinde „Einfachheit“ zu stellen.
3. Bei „Weniger“ geht es nicht nur um Einfachheit der Benutzeroberfläche, sondern – noch wichtiger – um Einfachheit und Benutzerfreundlichkeit in Bezug auf Prozesse und Wahrnehmung. Wenn Sie den Prozess durcheinanderbringen, um die Benutzeroberfläche zu optimieren, wird das Ergebnis kontraproduktiv sein.
4. Das grundlegendere Prinzip ist immer noch das klassische Sprichwort: Bring mich nicht zum Nachdenken .
Autor: xidea

<<:  Zusammenfassung gängiger HTML-Elemente, einschließlich Grundstruktur, Dokumenttyp, Kopfzeile, Textkörper usw.

>>:  Lernen Sie die Grundlagen von nginx

Artikel empfehlen

Erstellen Sie einen neuen Benutzer in Linux und erteilen Sie Berechtigungen für das angegebene Verzeichnis

1 Erstellen Sie einen Benutzer und geben Sie den ...

So installieren Sie eine MySQL-Datenbank unter Ubuntu

Ubuntu ist ein kostenloses und quelloffenes Deskt...

Gründe und Lösungen für die Aufforderung zum Speichern der Aktion nach dem Hochladen von Dateien im Formular

Die JSON-Daten müssen im HTML-Format zurückgegeben...

Zusammenfassung der drei Phasen der Entwicklung eines visuellen Designers

Viele Leute haben dieses Buch gelesen: „Entwickel...

MySQL-Beispiel für die Abfrage aller untergeordneten mehrstufigen Unterabteilungen basierend auf einer bestimmten Abteilungs-ID

Simulationstabellen und Datenskripte Kopieren Sie...

Bei der anonymen Mysql-Anmeldung kann keine Datenbankproblemlösung erstellt werden

Häufig gestellte Fragen Der Zugriff für den Benut...

3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen

Inhaltsverzeichnis 1. Der magische Erweiterungsop...

Next.js – Erste Schritte-Tutorial

Inhaltsverzeichnis Einführung Erstellen eines Nex...

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

Hintergrund Während des Projektentwicklungsprozes...

So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7

1. Linux-Netzwerkkonfiguration Bevor Sie das Netz...

10 Tipps für das User Interface Design mobiler Apps

Tipp 1: Konzentriert bleiben Die besten mobilen A...

JavaScript zum Implementieren eines Dropdown-Listenauswahlfelds

In diesem Artikelbeispiel wird der spezifische Ja...

Vue Router vue-router ausführliche Erklärung Anleitung

Chinesische Dokumentation: https://router.vuejs.o...

Detaillierte Erklärung zum effizienten Importieren mehrerer SQL-Dateien in MySQL

MySQL bietet mehrere Möglichkeiten, mehrere SQL-D...

Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten

Übersetzen Sie diese URL: http://translateth.is G...