Reflex Solutions Pro
AllgemeinesKomponenten
![Reflex Solutions Pro (1) Reflex Solutions Pro (1)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/a/a/csm_CI_RSP_Teaserfilm_EN_Mock-Up_03_26ae9981db.jpg)
![Reflex Solutions Pro (2) Reflex Solutions Pro (2)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/b/0/csm_CI_RSP_Teaserfilm_EN_Mock-Up_02_a61352c3a3.jpg)
![Reflex Solutions Pro (3) Reflex Solutions Pro (3)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/7/5/csm_01_Start_Desktop_f70d8cda31.jpg)
![Reflex Solutions Pro (4) Reflex Solutions Pro (4)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/a/a/csm_CI_RSP_Teaserfilm_EN_Mock-Up_03_f293eab032.jpg)
![Reflex Solutions Pro (5) Reflex Solutions Pro (5)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/b/0/csm_CI_RSP_Teaserfilm_EN_Mock-Up_02_fc3a745f4c.jpg)
![Reflex Solutions Pro (6) Reflex Solutions Pro (6)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/7/5/csm_01_Start_Desktop_c7db0c84fb.jpg)
![Reflex Solutions Pro (7) Reflex Solutions Pro (7)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/e/a/csm_07_WUe_Mobil_c192ca8523.jpg)
![Reflex Solutions Pro (8) Reflex Solutions Pro (8)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/e/a/csm_07_WUe_Mobil_1f77924e76.jpg)
![Reflex Solutions Pro (9) Reflex Solutions Pro (9)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/9/b/csm_CI_RSP_Teaserfilm_EN_Mock-Up_01_7115eeb3c2.jpg)
Allgemeines
Das Auslegungstool „Reflex Solution Pro“ (RSP)ist eine hybride Web-App. Sie unterstützt unsere Kunden dabei, die für ihr Projekt passenden Produkte (Reflex und Sinus) und Produktkombinationen (Reflex Solutions) zu finden und auszulegen.
Orientierung auf einen Blick: Die große inhaltliche Tiefe der App ist klar und praxisnah aufbereitet. Dabei spielt auch die Gestaltung eine wichtige Rolle – aus diesem Grund erhält die RSP einen Sonderstatus bei der Anwendung des Reflex Corporate Designs.
Farben
Farben spielen eine wichtige Rolle, damit unsere Kunden sich in der RSP-App klar und schnell orientieren können. Bestimmte Funktionen bzw. Inhalte werden daher stets in den unten aufgeführten Farben ausgewiesen – bitte achten Sie unbedingt darauf, diese Farbcodierung immer einzuhalten!
Reflex Grün ist die Leitfarbe. Sie leitet den Nutzer Schritt für Schritt durch die App, indem sie ihm die jeweils nächsten Interaktions-Möglichkeiten anzeigt.
Rot ist die Warnfarbe. Sie deutet an, dass der Nutzer zum Beispiel seine Eingaben noch einmal überprüfen oder auf Besonderheiten achten muss.
Orange ist die Hinweisfarbe. Elemente in Orange geben zusätzliche Hinweise oder bieten Hilfethemen, die für die Auslegung relevant sein können.
Allgemeine Hinweise zum Thema Farben finden Sie hier: Die Farben.
![Reflex Solutions Pro (10) Reflex Solutions Pro (10)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/Design_Basics/DieGrafiken/gru__n.png)
Interaktion
RGB
132/189/63
HEX
#84bd3f
![Reflex Solutions Pro (11) Reflex Solutions Pro (11)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/DigitaleMedien/RSP/orange.png)
Hinweis
RGB
244/155/0
HEX
#F49B00
![Reflex Solutions Pro (12) Reflex Solutions Pro (12)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/Design_Basics/DieGrafiken/rot.png)
Warnung
RGB
205/5/41
HEX
#CD0529
![Reflex Solutions Pro (13) Reflex Solutions Pro (13)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/DigitaleMedien/RSP/schwarz_10.png)
Hintergrund
RGB
242/242/242
HEX
#F2F2F2
![Reflex Solutions Pro (14) Reflex Solutions Pro (14)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/DigitaleMedien/RSP/schwarz_linien.png)
Linien
und Elemente
RGB
198/198/198
HEX
#C6C6C6
![Reflex Solutions Pro (15) Reflex Solutions Pro (15)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/DigitaleMedien/RSP/schwarz_schrift.png)
Schriftfarbe
RGB
100/100/100
HEX
#646464
![Reflex Solutions Pro (16) Reflex Solutions Pro (16)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/DigitaleMedien/RSP/schwarz.png)
Schriftfarbe Nutzereingabe
RGB
0/0/0
HEX
#000000
Typografie
Alle allgemeinen Hinweise, welche Schriftarten wir wo einsetzen, finden Sie in diesem Manual im Kapitel Die Typografie. Für die Auslegungssoftware RSP benutzen wir:
1. Webfont Netto Pro
Für Überschriften
2. Webfont Arial
Weil Arial auch in sehr niedriger Auflösung gut lesbar ist, verwenden wir sie in der App für alle Formulardaten und alle Inhalte, die keine Überschriften sind. Auf diese Weise stellen wir die Bedienungsfreundlichkeit der App sicher.
![Reflex Solutions Pro (17) Reflex Solutions Pro (17)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/9/9/csm_CI_RSP_Typografie_EN_a3d073ffb7.png)
Reflex UIcons
Das hier verzeichnete Iconset wurde speziell für die Reflex Solutions Pro entwickelt.
Die Icons bilden die Funktionen der App klar und deutlich ab, sie können fast nicht fehlverstanden werden. Mithilfe der eigens entwickelten Icons sorgen wir für eine hohe Usability und positive User Experience.
Bitte beachten Sie: Zusätzlich kommen in RSP auch die Icons der Produktbereiche zur Anwendung.
Startseite
Projektverwaltung
Reflex Solutions
Benutzerkonto
Passwort
Einstellungen
Login
Logout
Info-Video
Kontakt
Suchen
Bearbeiten
Berechnen
Speichern
Einblenden
Ausblenden
Starten
Öffnen
Zurück
Zurücksetzen
Schließen
Bewertung
Kalender
Exportieren
Importieren
Produkt-Info
Hinzufügen
Abziehen
Löschen
Herunterladen
Duplizieren
Verschieben
Hilfe einblenden
Hilfe ausblenden
Fehlermeldung
Mobile Menue Button
UX & UI Design
Das Interfacedesign von Reflex Solutions Pro ist aufgeräumt und klar und unterstützt die Nutzer dabei, ihre individuellen Lösungen (Einzelprodukte und Produktkombinationen) mit vollständiger Dokumentation zu erzeugen.
Die einzelnen Programmfunktionen von RSP besitzen jeweils eine eigene, unverwechselbare Ansicht (View). Die App nutzt demnach vier visuell klar unterscheidbare Views: für die Funktion Startseite, für die Auslegung, für die Konfiguration der Solutions und zuletzt für die Projektverwaltung. Diese Klarheit des Designs macht die App einmal mehr äußerst Nutzer-freundlich.
(Weitere Informationen über die Gestaltung von Startscreen und App Icon finden Sie im Kapitel Apps.)
Startseite
Die Startseite zeigt die wichtigsten Funktionen der App auf einen Blick.
1. Header
Der Header enthält den Schnellzugriff zum Sprachwechsel, Kontakt, Toolbox und die Anmeldeoptionen. Er bleibt während der gesamten Anwendung und in allen Screens oben präsent. Die Details zum Aufbau des Headers finden Sie in diesem Abschnitt weiter unten im Kapitel Komponenten.
2. Reflex Produkte auslegen
Dieser Bereich der Startseite bietet den Einstieg in die Auslegung der Reflex- und Sinus-Produkte – und zwar je nach Anwendungsbereich des Nutzers. Die einzelnen Anwendungsmöglichkeiten sind mit den Icons der Anwendungsbereiche dargestellt.
3. Reflex Solutions auslegen
Dieser Bereich der Startseite ist der Einstieg für die Auslegung von Reflex Solutions. Ein Klick auf diesen Bereich – und der Nutzer kann mit der Auslegung beginnen!
4. Marketingbanner
Dieser Block zeigt wechselnde Themen analog zum Header auf unserer Webseite. Hier präsentieren wir neue Produkte, Services und bevorstehende Veranstaltungen. Bitte beachten Sie bei der Gestaltung der Grafik, dass die wichtigen Bildinhalte rechts angeordnet sind, damit sie nicht vom Textfeld überlagert werden.
![Reflex Solutions Pro (55) Reflex Solutions Pro (55)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/7/f/csm_CI_RSP_Startseite_EN_bcc629ce89.png)
Die Startseite ist übersichtlich gegliedert.
Auslegung
1. Auswahlübersicht
Auf dieser Seite wählt der Nutzer entweder ein (oder mehrere) Serienprodukt(e) bzw. ein individuell konfigurierbares Produkt aus. Die Darstellung der Produkte bzw. Produktbereiche erfolgt über Illustrationen. Der Screen setzt zwei markante Farben ein: Reflex-Grün und für die Sinusprodukte Sinus-Blau.
![Reflex Solutions Pro (56) Reflex Solutions Pro (56)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/0/1/csm_CI_RSP_Auswahluebersicht_EN_56c5ff7488.png)
Auswahlübersicht, hier: Heizung
2. Anlagendaten eingeben
Die Auslegung ist gestartet! Auf dieser Seite gibt der Nutzer, sofern nötig, seine individuellen Daten ein (die Formularfelder sind von der App vorausgefüllt). Was ist wo einzutragen? Reflex Ulcons sorgen für intuitive Orientierung.
![Reflex Solutions Pro (57) Reflex Solutions Pro (57)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/2/a/csm_CI_RSP_Anlagendaten_EN_ae53df5b0f.png)
Anlagendaten eingeben, hier: Druckhaltung
3. Ergebnisseite Produkt
Diese Seite zeigt die Ergebnisse der Auslegung. Sie enthält in der Übersicht die wichtigsten Anlagen- bzw. Produktdaten und bildet mögliche Produktkombinationen ab. Reflex Ulcons zeigen dem Nutzer auf einen Blick, welche Daten er vertiefen kann.
![Reflex Solutions Pro (58) Reflex Solutions Pro (58)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/c/b/csm_CI_RSP_Ergebnisseite_EN_c963b985ea.png)
Ergebnisübersicht, hier: Druckhaltung
Reflex Solutions
1. Auswahlmenü der Reflex Solutions
Auf dieser Seite wählt der Nutzer seine Reflex Solution über die entsprechende Kachel aus. Die Kachel klappt aus und zeigt die wesentlichen Inhalte der Solution. Ein Icon weist zum nächsten Schritt „Solution jetzt auslegen“.
2. Eingabe der Eckdaten für die Anlagenplanung
Dieser Bereich enthält Filtermöglichkeiten. Und: Der Nutzer kann die statistische Höhe, Anlagenleistung und Anwendung eintragen.
3. Parameterauswahl anhand des Lösungsradars
Welche Parameter sind für das konkrete Projekt besonders wichtig? In diesem Bereich kann der Nutzer nach favorisierten Funktionen filtern.
![Reflex Solutions Pro (59) Reflex Solutions Pro (59)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/0/8/csm_CI_RSP_Solutions_EN_ef3c7d8611.png)
Screen Reflex Solutions: hier Auswahl von Solution No. 16
Projektverwaltung
Der Screen „Projektverwaltung“ zeigt registrierten Nutzern alle ihre Projekte auf einen Blick (bereits ausgelegte oder momentan bearbeitete). Die Projektliste ist individuell sortierbar: nach Titel, Status, Adresse oder Änderungsdatum. Jedes Projekt ist mit einem Aktionsbutton versehen: der Nutzer kann es nun duplizieren, exportieren, bearbeiten oder löschen. Zudem kann er hier weitere Projekte importieren oder ein neues Projekt anlegen.
![Reflex Solutions Pro (60) Reflex Solutions Pro (60)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/a/a/csm_CI_RSP_Projektverwaltung_EN_b199f31e72.png)
Alle Projekte auf einen Blick: die Projektverwaltung
Komponenten
Header
Der Header ist grundsätzlich wie folgt aufgebaut: links das Logo, dann v.l.n.r. die Navigationszeile (Breadcrumbs), Spracheinstellungen,Schnellzugriff Kontakt und die Toolbox. Ganz rechts ist der Bereich Anmeldeoptionen („Login options“), der sich unterscheidet in einen:
Aufbau im nicht eingeloggten Zustand
Dropdown-Auswahl zwischen Anmelden („Sign in“) oder Registrieren („Register“). Bitte beachten Sie unbedingt, dass die Begriffe jeweils in der ausgewählten Sprache klar voneinander zu unterscheiden sind (im abgebildeten Beispiel: Englisch).
Aufbau im eingeloggten Zustand
Eingeloggte Nutzer können rechts unter Mein Konto („My account“) ihre relevanten Nutzerdaten einsehen und ändern.
![Reflex Solutions Pro (61) Reflex Solutions Pro (61)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/c/2/csm_CI_RSP_Header_01_EN_a74a0e6826.png)
![Reflex Solutions Pro (62) Reflex Solutions Pro (62)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/2/0/csm_CI_RSP_Header_02_EN_0b967d21d4.png)
Navigation
Wo befinde ich mich aktuell mit meiner Auslegung? Auf der so genannten Auslegungsstrecke sieht der Nutzer auf einen Blick, welche Auswahl(en) er bislang getroffen hat. Und er kann, wenn nötig, eine „Etappe“ anklicken und neu bearbeiten.
![Reflex Solutions Pro (63) Reflex Solutions Pro (63)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/5/3/csm_CI_RSP_Navigation_EN_63a761fe4d.png)
Blöcke
Reflex Solutions Pro ist aus verschiedenen Blöcken aufgebaut. Diese Blöcke enthalten jeweils eine inhaltliche Sinneinheit und clustern die Informationen und Eingaben auch visuell. Wie hoch ein Block jeweils ist, richtet sich nach der Menge der Information, die er enthält.
1. Allgemeine Blöcke
2. Overlays
3. Fehlermeldungen
Bitte beachten Sie den Sonderfall Block „Marketing Banner“ oben im Abschnitt Startseite.
![Reflex Solutions Pro (64) Reflex Solutions Pro (64)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/0/b/csm_CI_RSP_Bloecke_4e4d51b259.png)
Eingabemodule
Die App enthält zahlreiche Eingabemodule. Diese Elemente des Interfaces sind für die Eingaben der Nutzer vorgesehen. Bitte unterscheiden Sie:
![Reflex Solutions Pro (65) Reflex Solutions Pro (65)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/6/e/csm_CI_RSP_Eingabemodule_example_e9f7f372be.png)
![Reflex Solutions Pro (66) Reflex Solutions Pro (66)](https://i0.wp.com/design-manual.reflex.de/fileadmin/user_upload/DigitaleMedien/RSP/CI_RSP_FarbeInteraktion_klein.gif)
1. Gefüllter Button
Auf diesem Button liegt eine sehr starke Betonung, da er vollflächig grün gefüllt ist. Er bindet die Aufmerksamkeit des Nutzers deutlich. Daher sollten diese hervorgehobenen Schaltflächen sparsam eingesetzt werden.
2. Umrandeter Button
Der umrandete Button ist der Standard-Button. Er zeigt die Aktionen, die dem Nutzer auf diesem Screen (auch) zur Verfügung stehen. Die favorisierte Aktion hingegen wird mit dem gefüllten Button angezeigt.
3. Button mit Icon
Sowohl der gefüllte als auch der umrandete Button (1 und 2) können mit einem Icon kombiniert werden. Das Icon hebt dann die Aktion, die beim Klick auf den Button ausgeführt wird, nochmals zusätzlich hervor. Die Farbe des Icons entspricht der Textfarbe im Button.
4. Button in Pfeilform
Buttons in Pfeilform werden dann verwendet, wenn der Klick darauf eine wichtige Aktion auslöst und den Nutzer auf einen neuen Screen bringt: es geht weiter! Auch Pfeil-Buttons können mit einem Icon kombiniert werden (Iconfarbe entspricht Textfarbe). Bitte beachten Sie: auch der Pfeilbutton kommt in zwei Varianten – gefüllt und umrandet.
![Reflex Solutions Pro (67) Reflex Solutions Pro (67)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/4/f/csm_CI_RSP_Eingabemodule_1_3c995ae58f.png)
5. Eingabefeld
Eingabefelder sind für alle Zahlen- und Texteingaben des Nutzers im Programm vorgesehen. Ist den Werten eine Einheit zugeordnet, wird diese rechts „angedockt“.
6. Combobox
Die Combobox dient der Auswahl von Eingaben, die nicht individualisierbar sind – zum Beispiel, weil sie bestimmten Normen oder Standard-Werten genügen müssen.
7. Dropdownmenü
Im Dropdown-Menü steuert der Nutzer direkt auf den gewünschten Link.
8. Toggle Button „Switch“
Der Toggle Button ist eine vereinfachte Checkbox, in der der Nutzer zwischen Option A oder B auswählt. Dieser Switch-Button ist immer binär.
9. Checkbox
Alles erledigt? Checkboxen kommen entweder einzeln oder als Liste. Als Liste kann der Nutzer keine, eine oder mehrere Checkboxen „anhaken“.
10. Radiobutton
Ein so genannter Radiobutton wird dann eingesetzt, wenn in einer Liste zwei oder mehr Optionen zur Auswahl stehen, die sich ausschließen. Der Nutzer kann sich per Radiobutton dann nur für eine Option entscheiden.
![Reflex Solutions Pro (68) Reflex Solutions Pro (68)](https://i0.wp.com/design-manual.reflex.de/fileadmin/_processed_/8/2/csm_CI_RSP_Eingabemodule_2_5e4c232b1d.png)
Alle Module besitzen fünf verschiedene Status bzw. zeigen an den Status …
- Interactable – der Nutzer kann mit dem Eingabemodul interagieren
- Hover – der Mauszeiger befindet sich jetzt auf dem Eingabemodul
- Focus– der Nutzer hat das Modul mit der Tastatur angewählt
- Pressed – das Modul wurde gerade angeklickt
- Not interactable – der Benutzer kann an dieser Stelle nicht mit dem Modul interagieren.
Für Toggle Buttons, Checkboxen und Radiobuttons gibt es zusätzlich noch die Status:
- Selected – das Modul ist ausgewählt
- Deselected – das Modul wurde abgewählt.
Für das Modul „Eingabefelder“ gibt es noch vier weitere spezielle Status:
- Errechnetes Ergebnis – der angezeigte Wert wurde aus Angaben des Nutzers oder anderen Angaben errechnet
- Übertragenes Ergebnis – der angezeigte Wert wurde aus der Eingabe oder Berechnung in einem Overlay übernommen
- Ungültiges Ergebnis – der Wert befindet sich außerhalb der möglichen Eingaben, der Nutzer sollte die Angabe überprüfen
- Verändertes Ergebnis – der im System hinterlegte Standardwert wurde vom Nutzer angepasst (und kann wieder zurückgesetzt werden).