Zehn beliebte Regeln für das Interface-Design

Zehn beliebte Regeln für das Interface-Design
<br />Dies ist ein Artikel, den ich vor langer Zeit zusammengestellt habe. Ich möchte ihn Ihnen als Referenz zur Verfügung stellen. Es gibt drei beliebte Schnittstellenstile: Multi-Window-, Single-Window- und Ressourcenmanager-Stil. Unabhängig vom Stil sollten die folgenden Regeln ernst genommen werden.
1. Benutzerfreundlichkeit :
Der Name der Schaltfläche sollte leicht verständlich sein, genaue Wörter verwenden, mehrdeutige Wörter vermeiden und sich leicht von anderen Schaltflächen auf derselben Benutzeroberfläche unterscheiden lassen. Am besten ist es, wenn die Bedeutung auf einen Blick verstanden werden kann. Im Idealfall sollten Benutzer in der Lage sein, die Funktionen der Benutzeroberfläche zu verstehen und relevante Vorgänge korrekt auszuführen, ohne Hilfe in Anspruch nehmen zu müssen.
Benutzerfreundlichkeit im Detail:
    Schaltflächen, die dieselben oder ähnliche Funktionen ausführen, sollten mit einem Rahmen versehen sein, und häufig verwendete Schaltflächen sollten Tastenkombinationen unterstützen. Elemente, die dieselbe Funktion oder Aufgabe erfüllen, werden an einem zentralen Ort platziert, um die Distanz zu verringern, die die Maus zurücklegen muss. Teilen Sie die Oberfläche funktionsbezogen in lokale Blöcke auf, fassen Sie diese in Rahmen ein und fügen Sie Funktionsbeschreibungen oder Überschriften ein. Die Schnittstelle sollte die Funktion der automatischen Browsing-Taste auf der Tastatur unterstützen, also die automatische Umschaltfunktion durch Drücken der Tabulatortaste. Die Steuerelemente, die zuerst aufgerufen werden sollen und wichtige Informationen zur Benutzeroberfläche enthalten, sollten am Anfang der Tabulatorreihenfolge und an einer prominenten Stelle im Fenster platziert werden. Die Anzahl der Steuerelemente auf derselben Schnittstelle sollte 10 nicht überschreiten. Wenn mehr als 10 Steuerelemente vorhanden sind, können Sie für deren Anzeige die Verwendung einer Paging-Schnittstelle in Betracht ziehen. Die Paging-Schnittstelle sollte ein schnelles Umschalten zwischen Seiten unterstützen. Die häufig verwendeten Tastenkombinationen Strg+Tab und die Standardschaltfläche sollten Eingabe- und Auswahlvorgänge unterstützen, d. h. durch Drücken der Eingabetaste wird automatisch der entsprechende Vorgang der Standardschaltfläche ausgeführt. Ein beschreibbares Steuerelement sollte eine Erklärung liefern und automatisch den Fokus erhalten, wenn es eine ungültige Eingabe erkennt. Die Reihenfolge der Tabulatortasten sollte mit der Reihenfolge übereinstimmen, in der die Steuerelemente angeordnet sind. Die derzeit gängige Methode ist insgesamt von oben nach unten und zwischen den Zeilen von links nach rechts. Kontrollkästchen und Optionsfelder werden in der Reihenfolge der höchsten und niedrigsten Auswahlwahrscheinlichkeit angeordnet. Kontrollkästchen und Optionsfelder sollten Standardoptionen haben und die Tab-Auswahl unterstützen. Wenn die Anzahl der Optionen gleich ist, verwenden Sie ein Optionsfeld anstelle eines Dropdown-Listenfelds. Wenn der Platz auf der Benutzeroberfläche klein ist, verwenden Sie ein Dropdown-Feld anstelle eines Optionsfelds. Verwenden Sie ein Optionsfeld, wenn die Anzahl der Optionen gering ist, andernfalls verwenden Sie ein Dropdown-Listenfeld. Bei hochprofessioneller Software sollten relevante Fachbegriffe verwendet werden, während bei allgemeinen Schnittstellen die Verwendung allgemeiner Begriffe angeregt wird.

2. Normativ :
Normalerweise wird das Schnittstellendesign gemäß den Spezifikationen der Windows-Schnittstelle entworfen, die das Standardformat „Menüleiste, Symbolleiste, Werkzeugkasten, Statusleiste, Bildlaufleiste und Rechtsklick-Kontextmenü“ umfasst. Man kann sagen, dass die Benutzerfreundlichkeit umso besser ist, je höher der Standardisierungsgrad der Schnittstelle ist. Kleine Software stellt im Allgemeinen keine Toolbox bereit.
Normative Angaben:
    Häufig verwendete Menüs sollten über Befehlsverknüpfungen verfügen. Menüs mit gleichen oder ähnlichen Funktionen werden durch horizontale Linien getrennt und an derselben Position platziert. Die Symbole vor dem Menü können die durchzuführenden Vorgänge intuitiv darstellen. Die Menütiefe soll grundsätzlich in drei Ebenen steuerbar sein. Die Anforderungen an die Symbolleiste können entsprechend den Benutzeranforderungen angepasst werden. Symbolleisten mit gleichen oder ähnlichen Funktionen werden zusammen platziert. Jede Schaltfläche in der Symbolleiste sollte zeitnahe Informationen enthalten. Die Länge einer Symbolleiste darf die Bildschirmbreite nicht überschreiten. Die Symbole in der Symbolleiste können die durchzuführenden Vorgänge intuitiv darstellen. Die Standardplatzierung der im System häufig verwendeten Symbolleisteneinstellungen. Bei zu vielen Symbolleisten kann die Verwendung einer Toolbox in Betracht gezogen werden. Der Werkzeugkasten soll erweiterbar und reduzierbar sein und von den Anwendern entsprechend ihren Bedürfnissen individualisiert werden können. Die standardmäßige Gesamtbreite der Toolbox sollte 1/5 der Bildschirmbreite nicht überschreiten. Die Statusleiste sollte die Informationen anzeigen können, die der Benutzer wirklich benötigt. Häufig verwendete sind:
    Aktueller Vorgang, Systemstatus, Benutzerstandort, Benutzerinformationen, Eingabeaufforderungsinformationen, Fehlerinformationen usw. Wenn ein Vorgang lange dauert, sollten auch ein Fortschrittsbalken und eine Prozessaufforderung angezeigt werden. Die Länge der Bildlaufleiste sollte sich mit der Zeit entsprechend der Länge oder Breite der angezeigten Informationen ändern können, um Benutzern das Erkennen der Position und des Prozentsatzes der angezeigten Informationen zu erleichtern. Die Höhe der Statusleiste ist für die Platzierung von fünf guten Zeichen geeignet und die Breite der Bildlaufleiste ist etwas schmaler als die Statusleiste. Es sollte eine klare Grenze zwischen Menü und Symbolleiste bestehen und das Menü so prominent angezeigt werden, dass es auch bei entfernter Symbolleiste noch dreidimensionale Wirkung hat. Größe 5 wird normalerweise in Menüs und Statusleisten verwendet. Symbolleisten sind grundsätzlich breiter als Menüs, jedoch nicht zu breit, da es sonst unausgewogen wirkt. Kontextmenüs, die bei Rechtsklick aufgerufen werden, folgen denselben Prinzipien wie Menüs.

3. Hilfeeinrichtungen :
Das System sollte eine ausführliche und zuverlässige Hilfedokumentation bereitstellen, sodass Benutzer bei Unklarheiten selbst Lösungen finden können.
Details der Hilfefunktion:
    Die Leistungseinführung und -beschreibung im Hilfedokument sollte mit der Systemleistung übereinstimmen. (Bei unseren Systemhilfedokumenten handelt es sich allesamt um Anweisungen aus der Urzeit des Systems, was verwirrend ist). Nehmen Sie beim Paketieren eines neuen Systems entsprechende Änderungen in der Hilfedokumentation für die geänderten Bereiche vor. Während des Betriebs sollte die Funktion zum rechtzeitigen Aufrufen der Systemhilfe bereitgestellt werden. F1 wird häufig verwendet. Beim Aufrufen der Hilfe auf der Oberfläche sollten Sie in der Lage sein, den Hilfeort relativ zum Vorgang zeitnah zu finden. Das heißt: Die Hilfe muss unmittelbar und gezielt erfolgen. Am besten ist es, das aktuell beliebte Online-Hilfeformat oder HTML-Hilfeformat bereitzustellen. Mithilfe von Schlüsselwörtern können Benutzer im Hilfeindex nach der benötigten Hilfe suchen. Natürlich sollten auch Hilfeschlüsselwörter bereitgestellt werden. Wenn keine schriftliche Hilfedokumentation bereitgestellt wird, wäre es am besten, eine Funktion zum Drucken der Hilfe bereitzustellen. Unsere Methoden zum technischen Support sollten in der Hilfe bereitgestellt werden, damit Benutzer problemlos nach neuen Hilfemethoden suchen können, wenn sie Schwierigkeiten haben, das Problem selbst zu lösen.

4. Rationalität :
Die Stelle, an der sich die Bildschirmdiagonalen kreuzen, ist die Stelle, auf die der Benutzer direkt blickt, und die Stelle direkt über einem Viertel ist die Stelle, auf die die Aufmerksamkeit des Benutzers am wahrscheinlichsten gelenkt wird. Achten Sie beim Platzieren des Formulars darauf, diese beiden Stellen zu nutzen.
Sinnvolle Regeln:
    Der Mittelpunkt der übergeordneten bzw. Hauptform sollte sich in der Nähe des diagonalen Brennpunkts befinden. Das Unterfenster sollte sich in der oberen linken Ecke oder in der Mitte des Hauptfensters befinden. Wenn mehrere Unterfenster angezeigt werden, sollten diese nacheinander nach rechts unten versetzt werden, um den Fenstertitel anzuzeigen. Wichtige Befehlsschaltflächen und häufig verwendete Schaltflächen sollten an prominenter Stelle auf der Benutzeroberfläche platziert werden. Schaltflächen, deren falsche Verwendung leicht zum Verlassen oder Schließen der Benutzeroberfläche führen kann, sollten nicht an leicht anklickbaren Stellen platziert werden. Der Anfang oder das Ende einer horizontalen Reihe und das Ende einer vertikalen Reihe sind einfache Punkte. Schaltflächen, die keinen Bezug zum laufenden Betrieb haben, sollten gesperrt werden (in Windows grau dargestellt und nicht bedienbar). Für Vorgänge, die möglicherweise zur Nichtwiederherstellung von Daten führen, müssen Bestätigungsinformationen bereitgestellt werden, sodass Benutzer die Möglichkeit haben, auf diese Option zu verzichten. Bei unzulässigen Eingaben oder Vorgängen müssen ausreichende Hinweise und Anweisungen vorhanden sein. Bei Problemen, die während des Betriebs auftreten und Fehler verursachen, sollte eine Meldung erfolgen, damit der Benutzer die Fehlerquelle nachvollziehen und lange Wartezeiten vermeiden kann. Hinweise, Warnungen oder Fehlermeldungen sollten klar, präzise und angemessen sein.

Vorherige Seite 1 2 Nächste Seite Gesamten Artikel lesen

<<:  Beispiel für die Implementierung der Drittanbieter-Autorisierungsmethode von GitHub in Vue

>>:  3 Codes zur automatischen Aktualisierung von Webseiten

Artikel empfehlen

Detaillierte Erläuterung der einfachen Verwendung des MySQL-Abfragecaches

Inhaltsverzeichnis 1. Implementierungsprozess des...

Javascript-Baummenü (11 Elemente)

1. dhtmlxBaum dHTMLxTree ist ein Tree-Menu-Steuer...

Online- und Offlineinstallation von Docker und allgemeine Befehlsvorgänge

1. Testumgebung Name Version centos 7.6 Docker 18...

Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS

Dieser Artikel vergleicht und fasst vier Möglichk...

Vues einfacher Implementierungsprozess zur Nachahmung der NetEase Cloud Music Player-Schnittstelle

Aufgrund der Anforderungen des Arbeitsprojekts is...

Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript

Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...

Erläuterung der MySQL-Indexoptimierung

Bei unserer täglichen Arbeit führen wir manchmal ...

Node verbindet sich mit MySQL und kapselt dessen Implementierungscode zum Hinzufügen, Löschen, Ändern und Prüfen

Inhaltsverzeichnis Knoten stellt Verbindung zu My...

Ubuntu16.04 Installation mysql5.7.22 Grafik-Tutorial

Installations-Tutorial für VMware12.0+Ubuntu16.04...

So führen Sie den Top-Befehl im Batchmodus aus

Der Befehl „top“ ist der beste Befehl, den jeder ...

js, um einen gleitenden Karusselleffekt zu erzielen

In diesem Artikel wird der spezifische Code von j...

Grafisches Beispiel für die Verwaltung von Datenträgerkontingenten unter Linux

Das Datenträgerkontingent ist die Speichergrenze ...

Eine kurze Erläuterung der Anzeigemodi von HTML-Tags (Tags auf Blockebene, Inline-Tags, Inline-Block-Tags)

Während der heutigen Vorlesung habe ich über den ...

React+Amap ermittelt Breiten- und Längengrad in Echtzeit und lokalisiert die Adresse

Inhaltsverzeichnis 1. Initialisieren Sie die Kart...

Detaillierte Erläuterung des Master-Slave-Konfigurationstutorials von Redis unter Docker

1. Ziehen Sie das Redis-Image docker pull redis 2...