Gestaltung für Android
Eine App zum Zählen
Es soll nun geplant werden, wie die Oberfläche der App zum Zählen gestaltet werden soll. Wir wollen, daß die Zahl in einem extra Textfeld angezeigt wird und nicht mehr auf dem Taster. Außerdem soll es eine Möglichkeit geben, die Zahl wieder auf 0 zurückzusetzen. Die Oberfläche soll also folgende Bestandteile enthalten:
- Eine Anzeige der aktuellen Zahl
- Einen Taster zum Inkrementieren
- Einen Taster zum Zurücksetzen
Zeitpunkt der Planung
Die Gestaltung sollte geplant werden, bevor mit der Programmierung begonnen wird, da sonst die Gefahr besteht, daß das Programm irgendeine Gestaltung erhält, das sich mehr oder weniger zufällig aus dem ergibt, was sich gerade leicht programmieren läßt.
Es kann besser sein, die Gestaltung auf Papier zu zeichnen, als es mit einem Computerprogramm zu erstellen, weil es sein kann, daß im zweiten Falle bestimmte Gestaltungen nicht erstellt werden, nur weil sie mit diesem Computerprogramm schwieriger zu erstellen sind.
Größenangaben
Es gibt große und kleine Bildschirme, Bildschirme mit Hochformat und Querformat. Daher ist es nicht möglich, eine Gestaltung mit festen Größen zu planen.
Ausdehnungen müssen relativ zur Breite und Höhe der App festgelegt werden (in Prozent).
Notfalls ist es nötig, mehrere verschiedene Gestaltungen je nach Größe und Format des Bildschirms festzulegen, dies wäre aber für diesen Kurs zu aufwendig.
Obwohl die Gestaltung abstrakt sein sollte, also keine feste Größe und Form haben sollte, ist es doch hilfreich, sie beispielhaft für eine mittlere Bildschirmgröße und eine neutrales (quadratisches) Format, aufzuzeichen.
Ein Zähler
Wir wählen die folgende Gestaltung:
- Die Oberfläche soll den Titel „counter“ zeigen.
- Die Oberfläche unterhalb des Titels soll den verfügbaren Platz vollständig ausnutzen.
- Die Oberfläche unterhalb des Titels soll in der Vertikalen gleichmäßig in eine Anzeige des Zählerstandes und einen Steuerbereich mit Tasten aufgeteilt sein.
- Die Schrift, mit welcher der Zählerstand angezeigt wird, soll den verfügbaren Platz gut ausnutzen, jedoch etwas Abstand zu den Rändern des Textfeldes haben.
- Die Tasten sollen ihrerseits in der Horizontalen die Fläche des Steuerbereichs ausnutzen und beide gleichgroß sein.
- Die Beschriftung der Tasten soll sich links oben auf den Tasten befinden, die voreingestellte Standardschriftgröße übernehmen, und ebenfalls etwas Abstand zu den Rändern der Tastfläche haben.
- Die Hintergrundfarbe soll Gelb und die Vordergrundfarbe Schwarz sein.
- Die Ziffern sollen möglichst groß in einer dicktengleichen Schrift mit Serifen und ohne Unterlängen erscheinen.
- Gestaltungsentwurf (“font height ” = „Schrifhöhe“)
###########################################################################
/counter/////////////////////////////////////////////////////////////////// <--- titel
########################################################################### ---
########################################################################### ^
##################################################### --- ######## #### |
###################################################### ^ ######## ### ### |
###################################################### | ######## ##### ### |
###################################################### | ######## ##### ### |
###################################################### | ######## ##### ### |
###################################################### | ######## ##### ### |
###################################################### ######## ##### ###
################################################ font height #### ##### ### 50 %
###################################################### ######## ##### ###
###################################################### | ######## ##### ### |
###################################################### | ######## ##### ### |
###################################################### | ######## ##### ### |
###################################################### | ######## ##### ### |
###################################################### v ######## ### ## |
##################################################### --- ######## #### |
########################################################################### v
########################################################################### ---
# # # ^
# increment # reset # |
# # # |
# # # |
# # # |
# # # |
# # # |
# # #
# # # 50 %
# # #
# # # |
# # # |
# # # |
# # # |
# # # |
# # # |
# # # v
########################################################################### --- |<-------------- 50 % -------------->|<-------------- 50 % -------------->|
Die hier gezeigte Gestaltung (einschließlich der Verwendung kleingeschriebener englischer Wörter zur Betitelung des Fensters und zur Beschriftung der Tasten) spiegelt nur die Vorlieben des Autors wieder. Der Leser wird ermuntert, sie jetzt oder später durch einen eigenen Entwurf zu ersetzen. Der Leser sollte dann aber zunächst trotzdem erst einmal beobachten wie der Entwurf des Autors umgesetzt wird, da das Umsetzen eines eigenen Entwurfes zum jetzigen Zeitpunkt vielleicht noch zu schwierig ist. Danach kann der Leser dann versuchen, seinen eigenen Entwurf zu verwirklichen.