Startshow (M+M)

1. Suche Von überall zu erreichen Übersicht native Views OnlineKAT View Zusätzlich gibt es einige In-App Browser Views die hier nicht dargestellt sind Warenkorb Von überall zu erreichen Startshow (M+M) Main UKat Übersichtsseite Detailseite Filialen View Scanner

2. Suchergebnis Warenkorb Bei der Nutzung der „zurück“ Funktion wird der Screen angezeigt, der vor der Darstellung des aktuellen Screens dargestellt worden ist. OnlineKAT View Startshow (M+M) Main UKat Übersichtsseite Detailseite Filialen View Scanner Bei diesen Screens verursacht die „zurück“ Funktion einen Wechsel zum zuvor dargestellten Screen, entsprechend den roten Pfeilen. Der Warenkorb wird hierbei ausgeschlossen. Änderungen innerhalb einer View werden durch den Button nicht zurückgenommen.

3. Die Startshow besteht aus 4 Bereichen: Fotowettbewerb, Newsletter, Forum und Facebook. Zwischen den verschiedenen Bereichen wird mit Hilfe des Ken-Burns Effektes überblendet. Die Hintergrundbilder sind nicht fixiert, sondern bewegen sich nach einem zufälligen Muster. Je nach Bereich werden verschiedene Texte angezeigt. Durch den Druck auf den Screen wird eine Seite im In-App Browser der App angezeigt, die zu dem betreffenden Bereich passt. Startshow (M+M) Dieser Text läuft langsam vor dem Bild von rechts nach links. Die Schrift ist transparent. Die Slideshow muss komplett deaktiviert werden können. Die App startet dann direkt auf dem Main. Das Hintergrundbild wird aus dem 4-Seasons CMS ausgeleitet. Es kann eine Anzahl von bis zu 10 Bildern eingebunden werden. Neben dem Bild wird der Name des Bildes und der Name des Posters dargestellt. Durch einen Druck auf den Screen öffnet sich der In-App Browser auf der Seite des Fotowettbewerbs: http://4-seasons.de/fotowettbewerbe. Die einzelnen Bereiche der Slideshow müssen deaktiviert werden können. Für den Bereich Newsletter, Forum und Facebook sollen 4 vordefinierte Hintergründe und ein eigenes Hintergrundbild definiert werden können. Das eigene Hintergrundbild wird über die iOS Fotogalerie gezogen. Sollte das Seitenverhältnis nicht passen, wird der restliche Bereich mit schwarz aufgefüllt. Name Poster Name Bild Statischer Text im Vordergrund. Es wird noch ein Button eingebaut, mit dem man die Startshow zu jedem Zeitpunkt beenden kann.

4. In diesem Bereich werden die letzten 10 Einträge des Forums vorgehalten. Sobald der Forum Screen dargestellt wird, wird zufällig einer dieser Beiträge angezeigt. Klickt man auf eine beliebige Stelle des Hintergrunds wird man in den In-App Browser der App geleitet, in dem der entsprechende Threat geöffnet wird. Das Hintergrundbild ist eines der vordefinierten und bewegt sich zufällig. @ Entwicklung: Bitte das Datenformat definieren. Startshow (M+M) Globetrotter Ausrüstung Logo. Statisch und halb transparent. Beim Druck auf eine dieser Funktionen wird die Startshow sofort beendet. Anzeige des Zeitpunkts des aktuellen Posts. Titel und Teasertext des Posts.

5. In diesem Bereich werden die letzten 10 Einträge auf der Facebook Pinnwand vorgehalten. Sobald der Facebook Screen dargestellt wird, wird zufällig einer dieser Beiträge angezeigt. Klickt man auf eine beliebige Stelle des Hintergrunds wird man in den In-App Browser der App geleitet, in dem die Facebook Pinnwand geöffnet wird. Das Hintergrundbild ist eines der vordefinierten und bewegt sich zufällig. @ Entwicklung: Bitte das Datenformat definieren. Startshow (M+M) Anzeige des Zeitpunkts des aktuellen Posts. Globetrotter Ausrüstung / Facebook Logo Logo. Statisch und halb transparent. Titel und Teasertext des Posts. Wird der Text zu lang, wird er mit „...“ abgekürzt. Titel des Facebook-Posts. Halb transparent vor dem Hintergrund und hinter dem Text. Bewegt sich von rechts nach links. Anzeige „I-Like“

6. Der Globetrotter Newsletter besteht aus vielen einzelnen Artikeln. Jeder dieser Artikel hat ein Bild, eine Überschrift, einen Text und einen Link. Sobald die View zu der Newsletter Ansicht wechselt, wird einer dieser Artikel dargestellt. Im Hintergrund wird eines der vordefinierten Bilder angezeigt. Leicht transparent läuft das Logo Globetrotter Ausrüstung durch das Bild. @ Entwicklung: Bitte das Datenformat definieren. Startshow (M+M) Definiertes Bild aus dem Newsletterartikel Durch den Druck auf eine beliebige Stelle des Screens wird der Link des aktuell angezeigten Artikels im In-App Browser aufgerufen. Headline und Text des Newsletterartikels.

7. Noch nicht heruntergeladene Kataloge sind ausgegraut. Durch Druck auf den Katalog öffnet sich ein Interaktionsfenster, in dem der Nutzer den Download bestätigen kann. Es wird ein Vorschau-Titelbild, der Katalogname, ein Beschreibungstext und der Umfang angezeigt. Nach dem Download wird der Katalog deutlich dargestellt. Durch einen Druck auf den gedownloadeten Katalog öffnet sich der OnlineKATmobile. Main (1/2) In diesem Bereich werden alle Globetrotter Printerzeugnisse als OnlineKATmobile eingebunden. Das neueste soll immer links stehen, die Reihenfolge soll durch das Backend geändert werden können. Kataloge müssen sich updaten lassen. Der Bereich ist skrollbar. Hier werden insgesamt 22 Kategorien scrollbar dargestellt. Das Scrollen oll flüssig durchlaufen. Das Bild wird ein immer gleiches Format bekommen. Der Titel wird mitgeliefert. Die Daten ändern sich nur bei einem neuen Katalog (über den Produktdump). Hier soll immer der Name der aktuellen Ausgabe zu sehen sein. Der untere Bereich besteht aus den Funktionen Newsletter, Forum, Vor Ord und einem freien Bereich. Es gibt keine weiteren, dementsprechend muss hier nicht gescrollt werden. Bitte überprüfen, wie neben dem Bild auch eine Animation angezeigt werden könnte. Dieser Bereich soll auch Update unabhängig geändert werden können. In-App Browser Lösung. Es wird eine jeweils vordefinierte URL aufgerufen. Link zum View Filiallen

8. Main (2/2) Wie im Browser sollen über „Vor“- und „Zurück“- Buttons die entsprechenden Seiten angesehen werden können. In Bereichen , in denen Inhalte live gezogen werden, soll ein Aktualisierungsbutton eingeblendet werden, über den die Abfragen noch einmal gestartet werden. Beim Druck auf die Lupe öffnet sich das Such-Eingabefeld. Es soll eine Suche implementiert werden, die Sucheingaben ergänzt. Sie soll alle Bereiche der App durchsuchen und die Suchergebnisse entsprechend sortieren. Zur Warenkorb View. Am Button soll die Anzahl der Produkte im Warenkorb angezeigt werden. Hier soll der Barcodescanner aufgerufen werden können. Hier soll ein Infoscreen entsprechend der Manufactum Lösung eingebaut werden.

9. Suchergebnisse Anzeige der Anzahl von Treffern innerhalb verschiedener Oberkategorien. Druck auf eine Kategorie manipuliert den mittleren Bereich. Hier werden die Suchergebnisse einer Kategorie dargestellt. Diese Reihe entspricht der Reihe in der Übersicht.

10. Sobald die View vom Main Views aus geöffnet wird, fragt die App ob die aktuelle Position verwendet werden darf. Anschließend wird automatisch die nächstgelegene Filiale ausgewählt. Entsprechend werden Bilder, Öffnungszeiten, der Tweet, die Veranstaltungen und die Kontaktdaten Filialen spezifisch dargestellt. In diesem Bereich kann durch die insgesamt 7 Filialen geslidet werden. Der aktuelle Markt ist deutlich die anderen sind ausgegraut. Durch den Druck auf einen ausgegrauten markt werden die unteren beiden Bereiche manipuliert. Filialen Zu jeder Filiale wird ein festgelegtes Bild, der Name der Filiale und ein statischer Text dargestellt. Zusätzlich werden die Entfernung und die Reisedauer mit dem Auto oder zu Fuß dargestellt. Über den erneuten Druck auf ein bereits gehighlitedes Element öffnet sich Google Maps im In-App Browser. Hier gibt es zwei Varianten. V1: Hier sollen wir beim Main Screen Bilder durchgewischt werden können. Hinter den Bildern verbirgt sich kein Link. V2: In der hier dargestellten V2 wird dieser Bereich genutzt um eine 360° View der Filiale darzustellen. @Entwicklung: Welche Daten werden hier benötigt? Hier soll ein Twitter Feed der betreffenden Filiale eingeblendet werden. @ Entwicklung: Welche Daten? Öffnungszeitenabhängig soll des Schild Open oder Closed anzeigen. Der Text Filialen abhängig. Hier öffnet sich der Barcodescanner. Hier wird der In-App Browser eingebunden. Statischer Bereich über den die Emailfunktion aufgerufen werden kann. Der Text ist Filialen abhängig.

11. Scanner

12. UKAT Name und Beschreibung der Oberkategorie. Hier werden alle Oberkategorien dargestellt, die im Main im mittleren Bereich dargestellt werden. Das Highlighting und Ausgrauen entspricht den anderen Bereichen. Hier werden alle Unterkategorien dargestellt. Der Bereich entspricht in seinen Funktionen dem mittleren Bereich des Main Screens. Durch einen Druck auf das Bild oder den Text wird die betreffende Unterkategorie geöffnet. Im unteren Bereich werden die sechs wichtigsten Marken der jeweiligen Oberkategorie angezeigt. Diese werden jeweils zu dem Zeitpunkt eines neuen Dumpsfestgelegt. Durch den Druck auf eine der Marken wird nach der betreffenden Marke in der Oberkategorie gefiltert.

13. Übersicht Hier werden die anderen Unterkategorien angezeigt. Die aktuelle wird gehighlited. Die anderen sind ausgegraut. Durch Druck auf ausgegraute wird der mittlere Bereich manipuliert. Markenlogo soll angezeigt werden. @Entwicklung: Wie werden die Daten hier benötigt? In diesem Bereich werden alle Artikel einer Unterkategorie angezeigt. Dieser Bereich kann horizontal fließend geskrollt werden. Produkte stammen aus Dump. Produktbewertungen und Preise sollen möglichst live aktualisiert werden. @Entwicklung: Welche Daten? Bild und Text kommt aus dem Dump. Es sollen auch Alternativbilder durch Wischen angezeigt werden können. Filter für den obigen Bereich. Gefiltert werden kann Stichworten, Marken, Geschlecht und Hot Offers. Außerdem eine Sortierung. Entwicklung: Welche Daten notwendig? In-App Browser

14. Hinter diesem Tab verbergen sich die Produktbewertungen. Sie werden innerhalb der Registerkarte angezeigt. Über eine Schnittstelle werden die Durchschnitt-Sterne, die Textkommentare, die Sterne und der Name des Bewerters angezeigt. Außerdem sollen auch Bewertungen abgegeben werden können. @ Entwicklung: Welche Schnittstelle wird hier benötigt? Hier wird das Markenlogo angezeigt. @ Entwicklung: Welche Daten nötig? Detailseite Andere Produkte der Unterkategorie. Die Logik entspricht ansonsten den entsprechenden Bereichen auf den anderen Screens. Hier wird ein In-App Browser innerhalb dieses Rahmens angezeigt. Hier wird das Hauptbild und Alternativbilder dargestellt. Zwischen diesen kann hin und her gewischt werden. Dieser Bereich wird über die Registertabs oben links definiert. Die Standardeinstellung ist der Produkt-Beschreibungstext aus dem Produktdaten-Dump. An diesen werden zusätzlich weitere Details aus dem Dump angefügt. Der Bereich ist vertikal skrollbar. Farbe, Größe und Stückzahl wird festgelegt. Farbe und Größe stammt aus Dump. Hier werden passende Artikel dargestellt. Diese Informationen stammen aus dem Dump. In diesem Bereich kann horizontal geskrollt werden. Produktbild, Name und Beschreibung können über Facebook / Email geposted /versendet werden. Zusätzlich kann ein individueller Text hinzugefügt werden. Das Produkt wird auf die Merkliste gestellt. Verfügbarkeit und Preis werden nach Eingabe von Farbe und Größe dynamisch gezogen. @Entwicklung: Welche Schnittstellen? Durch Druck auf Preis ändert sich zunächst der Button. Durch erneuten Druck wird das Produkt in definierter Menge in den Warenkorb gelegt.

15. Warenkorb Hier werden die Favoriten skrollbar dargestellt. Favoriten können auf der Detailseite angesehen und außerdem dem Warenkorb hinzugefügt werden. Zusätzlich soll die Merkliste per Email versendet werden können. Vor einer Favoriten-Grafik wird Short_Desc, Preis und Beschreibung angezeigt. Eingabe Stückzahl. Sie muss zunächst der Anzahl entsprechend due auf der Detailseite angegeben wurde. Bilder, Short_Desc, Artikelnummer und Farbe entsprechen der Auswahl die auf der Detailseite getroffen wurde. Darstellung Einzelpreis. Der Gesamtpreis wird je nach der ausgewählten Menge berechnet. Statischer Text Gesamtsummer wird berechnet. Transparente Ebene Übergabe des Warenkorbs an eine vorgegebene URL. Die Versandkosten müssen anhand einer vorgegebenen Logik berechnet werden.