HTML and CSS Reference
In-Depth Information
Probieren Sie mit der Optik Ihres Buttons ruhig ein wenig herum, bis er Ihnen gefällt.
Als Faustregel gilt: Je mehr ein Element seinem nativen Gegenstück ähnelt, desto
eher wird es als solches erkannt.
3
4. Schritt: Feedback
Im letzten Schritt fügen Sie Ihrer Schaltfläche ein visuelles Feedback hinzu: Der Nut-
zer soll merken, ob er eine Schaltfläche tatsächlich getroffen hat. Dafür nutzen Sie
das
:active
-Pseudoelement in CSS:
button:active {
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.2) 100%);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
In diesem Fall invertieren Sie den Farbverlauf, um den Eindruck eines »gedrückten«
Buttons zu erhalten. Unter iOS wird per Standard ein transluzentes graues Rechteck
über das Element gelegt. Um dieses zu entfernen, nutzen Sie die Eigenschaft
-webkit-
tap-highlight-color: rgba(0,0,0,0);
. Auch hier gilt: Probieren Sie ein wenig mit den
Eigenschaften herum, bis Ihnen Ihre Schaltfläche gefällt.
Reihenfolge beachten!
Generell sollten Sie bei interaktiven Elementen immer diese Reihenfolge einhalten:
Zunächst wählen Sie ein HTML-Element aus, legen Größe und Aussehen fest und
bestimmen dann das Verhalten, das dem Element beim Antippen zugewiesen wer-
den soll.
3.1.2 Der Anwender erwartet so einiges - Aufbau einer App
Im Gegensatz zu Desktopsystemen werden Programme auf mobilen Telefonen
nicht in unterschiedlich großen Fenstern, sondern stets im Vollbildmodus ausge-
führt. Daher gibt es keine Symbole für das Maximieren, Minimieren oder Schließen
einer App. In der Regel hat aber jede App am oberen Bildschirmrand eine, etwa einen
Zentimeter hohe, Titelleiste. In dieser ist neben dem Namen der Anwendung auch
noch Platz für zwei Buttons: Auf der linken Seite in der Regel eine Zurück- oder
Abbrechen-Schaltfläche, auf der rechten Seite eine für Speichern oder Weiter
(Abbildung 3.4).
Search WWH ::
Custom Search