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

Warum erscheinen ausgewählte @@session.tx_read_only in großen Mengen in der Datenbank?

Finden Sie das Problem Beim Abrufen der wichtigst...

Eine kurze Einführung in React

Inhaltsverzeichnis 1. CDN-Einführung 1.1 reagiere...

Detaillierte Erläuterung des MLSQL-Beispiels zur Berechtigungssteuerung zur Kompilierungszeit

Vorwort Das einfache Verständnis von MySQL-Berech...

JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

In diesem Artikel wird der spezifische JavaScript...

Lernen Sie den Funktionsmechanismus von jsBridge in einem Artikel kennen

Inhaltsverzeichnis js aufrufende Methode Android ...

So stellen Sie Daten wieder her, nachdem Sie versehentlich IBData-Dateien in MySQL 5.7.33 gelöscht haben

Inhaltsverzeichnis 1. Szenariobeschreibung: 2. Fa...

Meta Viewport ermöglicht die Vollbildanzeige von Webseiten auf dem iPhone

In meiner Verzweiflung dachte ich plötzlich: Wie i...

Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung

1. Ich habe vor kurzem eine neue Version von Ubun...

HTML+Sass implementiert HambergurMenu (Hamburger-Menü)

Vor ein paar Tagen habe ich mir ein Video von ein...

Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung

Stellen Sie die MySQL-Umgebung lokal bereit (192....

So überwachen Sie den Linux-Serverstatus

Wir, insbesondere Linux-Ingenieure, haben täglich...

Implementierung des MySQL Shell import_table-Datenimports

Inhaltsverzeichnis 1. Einführung in import_table ...

Bereitstellung des Quellcodes des Docker-Containers. httpd verwendet Speichervolumen, um die Website bereitzustellen (empfohlen).

Inhaltsverzeichnis Stellen Sie httpd mit dem Quel...

CentOS 7: Beispielcode zum Festlegen des Grub-Passworts und zur Einzelbenutzeranmeldung

Es gibt erhebliche Unterschiede zwischen CentOS7 ...

Natives JavaScript, um den Karusselleffekt zu erzielen

In diesem Artikel wird der spezifische Code für J...