Webdesign und Benutzererfahrung verstehen

Name: Webdesign und Benutzererfahrung verstehen
Author: Matthew Brown

In diesem Kapitel Sie lernen die Design-Elemente der Eingabesteuerung kennen, darunter Schaltflächen, Dropdown-Menüs, Optionsfelder und Schieberegler. Dieses…

Preview the first lesson free — get full access to all 6 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

Hallo. In diesem Kapitel werden wir suchen beim Webdesign aus der Perspektive von Benutzererfahrung und Designelementen. Elemente der Benutzeroberfläche werden gruppiert in vier Kategorien. Eingabesteuerelemente. Diese ermöglichen Benutzern, Informationen in das System einzugeben. Navigationskomponenten, dies ermöglichen Benutzern um sich in Ihrer Anwendung oder Website zu bewegen. Informationskomponenten ermöglichen dem Entwickler irgendwelche Informationen zu teilen das ist relevant mit den Benutzern. Mit Containern können Sie verwandte Inhalte zusammenhalten. Wir beginnen mit der Betrachtung einiger der gebräuchlicheren Eingabesteuerelemente die alle Designer und Entwickler kennen sollten. Die erste davon sind Schaltflächen. Dies sind die häufigsten Formen von Benutzereingaben, die oft als Formen angezeigt werden mit einem Etikett darauf. Dadurch können Benutzer Aktionen ausführen, wie Speichern oder Senden. Wir haben dann Kontrollkästchen, die es Benutzern ermöglicht, eine Auswahl basierend zu treffen auf verfügbare Optionen. Dropdown-Menüs ermöglichen es Benutzern, eine Auswahl zu treffen aus einer Artikelliste. Eingabefelder, ein Ort, an dem Benutzer den Text oder Inhalt eingeben, wie Anhänge in das System. Und wir haben auch Radiobuttons. Dies sind kreisförmige Elemente, die Benutzern ermöglichen um zwischen den Optionen auszuwählen. Und schließlich haben wir Schieberegler Wird verwendet, damit der Benutzer einen Wert auswählen kann eines Wertebereichs. Wie wir hier sehen können, Wir haben eine einfache Seite in Notepad++ geöffnet mit einigen Beispielen für nur einige der Eingabesteuerelemente das sind möglich. Zuerst haben wir die Texteingabe, und das ist nur eine Texteingabe für Vorname und Nachname. Wir verwenden den Eingabetyp Text. Wenn wir die ID Vorname oder Vorname haben. Und dann ist der Name fname. Alles klar? Und dann haben wir ein Etikett für den Nachnamen und dann haben wir eine Eingabe für den Nachnamen. Und dann haben wir auch einen Eingabetyp von Submit, Das ist mein Knopf. Das nächste Steuerelement, das wir auf dieser Seite haben, ist das Optionsfeld. Wir haben einen einfachen Absatz das gibt an, was Ihre bevorzugte Programmiersprache ist. Wir haben eine Eingangsart von Radio. ID, HTML. Name, bevorzugte Sprache und Wert, HTML. Wir haben ein weiteres Label für HTML. Und wir haben ein weiteres Eingabe-Optionsfeld für CSS. Und ein weiteres Eingabe-Radio-Button für JavaScript. Wenn wir das also ausführen, werden wir sehen, wie das aussieht. Das nächste Steuerelement, das wir hier aufgerufen haben, ist ein Kontrollkästchen mit einer frage, welches transportmittel hast du? Ein einfacher Absatz. Aber der Typ, der diesmal verwendet wird, ist Checkbox und wir haben drei Werte für das Kontrollkästchen. Wir haben Fahrzeug eins, Das heißt, ich habe ein Fahrrad. Ich habe Fahrzeug zwei, ich habe ein Auto. Und Fahrzeug drei, ich habe ein Boot. Und Sie können die Syntax damit sehen. Dann haben wir die Dropdown-Liste, das ist ein Etikett für Autos. Wählen Sie ein Auto ist das Etikett und dann die Optionen, Wir verwenden das Option-Tag. Wir haben einen Volvo, Saab, Fiat und Audi. Und dann ist die letzte Kontrolle, die wir haben, ein Schieberegler. Mein Eingabetyp ist ein Bereich. IDs Punkte und Name ist Punkte. Der Mindestwert ist Null, der maximale Wert ist 10. Also haben wir das jetzt ausgeführt und sehen, wie es wirklich aussieht. Auch dies ist nur eine einfache Seite wo wir das Eingabefeld für den Vornamen haben, ein Eingabefeld für Nachname, und dann haben wir die Schaltfläche Senden. Da sich hinter dieser Schaltfläche zum Senden kein Code befindet, es bringt eigentlich nichts. Und dann haben wir die Radiobuttons. Was ist deine Lieblings-Programmiersprache? Und dann können wir sehen, dass wir eine der Schaltflächen auswählen können. Und dann haben wir das Kontrollkästchen. Was ist Ihr Transportmittel? Ich habe ein Fahrrad, ich habe ein Auto, ich habe ein Boot? Und ich kann jedes dieser Kontrollkästchen auswählen oder alle. Und dann haben wir unser Dropdown, wählen Sie Ihr Auto. Volvo, Saab, Fiat. Und dann haben wir unseren Schieberegler. Mindestwert von Null, Maximalwert 10. Danke fürs Beitreten. In der nächsten Lektion Wir werden Navigationskomponenten für das Design betrachten.

Anfänger Anbieter : Matthew Brown 6 Lektionen · 21m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

In diesem Kapitel Sie lernen die Design-Elemente der Eingabesteuerung kennen, darunter Schaltflächen, Dropdown-Menüs, Optionsfelder und Schieberegler. Dieses Kapitel behandelt auch die Verwendung von HTML-Containern zur Organisation von Webseiteninhalten sowie die Elemente der intuitiven Gestaltung von Benutzeroberflächen.

Lernziele:

Fähigkeiten:

Was Sie lernen werden

Erstellen Sie Eingabekontrollelemente auf einer Website, einschließlich Schaltflächen, Dropdown-Menüs, Optionsschaltflächen und Schieberegler
Steuern Sie Farbe, Text und Stile für besseres Webdesign
Implementieren Sie Navigationselemente in eine Website
Verwenden Sie HTML-Container, um Webseiteninhalte zu organisieren
Gestalten Sie CTA-Schaltflächen, primäre Aktionsschaltflächen, Symbole, Bildüberlagerungen, Verläufe und Fehlermeldungen
Wenden Sie intuitive Benutzeroberflächen-Designprinzipien wie Vertrautheit, Konsistenz und Erlernbarkeit an

Wichtige Erkenntnisse

Das Kapitel behandelt Eingabekontroll-Designelemente wie Schaltflächen, Dropdown-Menüs, Optionsschaltflächen und Schieberegler.
HTML-Container werden verwendet, um Webseiteninhalte zu organisieren.
Intuitives Benutzeroberflächen-Design basiert auf Vertrautheit, Konsistenz und lernbarem, unsichtbarem Design.
Designelemente für die Benutzererfahrung sind Farben, Verläufe, Fehlermeldungen, Textstile, Schriftarten und Bildüberlagerungen.

Häufig gestellte Fragen

Was werde ich in diesem Kapitel lernen?

Sie lernen, wie Sie Eingabekontrollelemente auf einer Website erstellen, wie Sie Farbe, Text und Stile für besseres Webdesign steuern und wie Sie Navigationselemente in eine Website implementieren.

Welche Designelemente behandelt dieses Kapitel?

Es behandelt CTA-Schaltflächen, primäre Aktionsschaltflächen, Symbole, Bildüberlagerungen, Optionsschaltflächen, Dropdown-Menüs, Farben, Verläufe, Fehlermeldungen, Textstile und Schriftarten.

Behandelt dieses Kapitel Benutzererfahrung und Schnittstellen-Design?

Ja. Es behandelt die Elemente des intuitiven Benutzeroberflächen-Designs, einschließlich Vertrautheit, Konsistenz und lernbarem, unsichtbarem Design.

Welche Fähigkeiten trägt dieses Kapitel zum Aufbau bei?

Es entwickelt Fähigkeiten in HTML-Komponenten, HTML-Steuerelementen, Interaktionsdesign, Schnittstellen-Design, Benutzeroberflächen-Design (UI-Design) und Web-UI-Design.