... | ... | @@ -3,7 +3,7 @@ |
|
|
|
|
|
# Screen-Design Grundideen (Mockup) *(MS)*
|
|
|
|
|
|
Die erste und wichtigste Pahse der Softwareentwicklung ist die Anforderungsanalyse. In dieser sollen möglichst alle Wünsche und Vorstellungen des Kunden erfasst werden, denn desto später sich diese bemerkbar machen, desto umständlicher (zeitlich/preislich) ist es, diese umzusetzen. Durch die schon erstellten [User Stories](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/User%20Stories), ergibt sich eine deutliche Vorstellung und Anfordeurngen an das System und die Benutzeroberfläche. [(Siehe Methodik Anforderungsanalyse)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Methodik-Anforderungsanalyse)
|
|
|
Die erste und wichtigste Phase der Softwareentwicklung ist die Anforderungsanalyse. In dieser sollen möglichst alle Wünsche und Vorstellungen des Kunden erfasst werden, denn desto später sich diese bemerkbar machen, desto umständlicher (zeitlich/preislich) ist es, diese umzusetzen. Durch die schon erstellten [User Stories](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/User%20Stories), ergibt sich eine deutliche Vorstellung und Anfordeurngen an das System und die Benutzeroberfläche. [(Siehe Methodik Anforderungsanalyse)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Methodik-Anforderungsanalyse)
|
|
|
Die Anwendung, egal ob mobil oder im Web, deckt mindestens drei Anwendungen ab. Dabei handelt es sich um die Kartendarstellung, den 3D-Viewer und die Anzeige eines Steckbriefs.
|
|
|
|
|
|
<b>Webanwendung <b>(Vollbild)
|
... | ... | @@ -24,9 +24,13 @@ Die Anwendung, egal ob mobil oder im Web, deckt mindestens drei Anwendungen ab. |
|
|
|
|
|
<b>mobile Anwendung (Handy)<b>
|
|
|
|
|
|
Hin- und Herschalten der Bereiche, Aufteilung des Screens (warum 3 anstatt 2 o.ä.).
|
|
|
1. Auch hier wird als Startanzeige die Karte in den Vordergrund gestellt. Über die räumliche Verortung der verschiedenen unüblichen Datenträger (Handstücke/Bohrkerne), soll eine Auswahl getroffen werden. Dabei ist auf dem Handy oft der Fall, dass eine Auswahl mit dem Finger nicht so präzise geschieht, wie durch den Cursor am Bildschirm. Daher sollen die Objekte in der näheren Umgebung als Liste angezeigt werden. Mit einem tippen in die Liste wird ein Objekt in der 3D-Ansicht geöffnet. Dort lassen sich dann über andere Icons, der Steckbrief, die verschiedenen Schichten des Bohrkerns und weitere Optionen einblenden.
|
|
|
|
|
|
Das Mockup (Prototyp) wurde mit der Webanwendung "Figma" erstellt. Diese Webanwendung ermöglicht es kollaborativ und zu selben Zeit an einem Design zu arbeiten (ähnlich zu Google Docs). Figma lässt sich für bis zu drei Entwürfe für ein Projekt kostenlos nutzen. Es können nicht nur Designelemente festgelegt werden, sondern unter "Prototyp", lassen sich auf Klickabfolgen umsetzen, sodass ein Klickdummy ensteht. Ein Klickdummy zeigt einige einfach Funktionen der Anwendung, ohne diese programmieren zu müssen. In dem vorliegenden Entwurf, ist das Vertauschen der einzelnen Fenster beispielhaft realisiert. [(Link Mockup)](https://www.figma.com/file/3NnKHJvSFiaYvfGqN9lWWF/BohrungenHessen?node-id=45%3A6)
|
|
|
2. In der Karte gibt es nur einen Layer-Button, mit dem sich eine Auswahl an Karten für die Kartenansicht ein-/ausblenden lässt.
|
|
|
|
|
|
3. Über ein "Burger-Menü" lassen sich andere Bereiche der Webseite erreichen. Beispielsweise zusätzliche Informationen über das HLNUG oder ähnliches.
|
|
|
|
|
|
Das Mockup (Prototyp) wurde mit der Webanwendung "Figma" erstellt. Diese Webanwendung ermöglicht es kollaborativ und zu selben Zeit an einem Design zu arbeiten (ähnlich zu Google Docs). Figma lässt sich für bis zu drei Entwürfe, für ein Projekt kostenlos nutzen. Es können nicht nur Designelemente festgelegt werden, sondern unter "Prototyp", lassen sich auf Klickabfolgen umsetzen, sodass ein Klickdummy ensteht. Ein Klickdummy zeigt einige einfache Funktionen der Anwendung, ohne diese programmieren zu müssen. In dem vorliegenden Entwurf ist das Vertauschen der einzelnen Fenster beispielhaft realisiert. [(Link Mockup)](https://www.figma.com/file/3NnKHJvSFiaYvfGqN9lWWF/BohrungenHessen?node-id=45%3A6)
|
|
|
|
|
|
# Technische Umsetzung *(DK)*
|
|
|
CSS, JQuery ..
|
... | ... | |