EDOMI - Zeigt her eure Visus!

[timberland]

IMG_0402.PNGIMG_0403.PNG

[Teutone]

Ich habe mir mal erlaubt die Ideen von timberland und vento66 zu klauen und habe angefangen in dem Stil meine Visu zu machen. Danke an EUCH!!!

Sorry für den Rechtschreibfehler^^! Zu spät gesehen

[cocoon]

@vento66
Wie ist deine Hintergrundfarbe der Visu? Ich bekomme beim Hintergrung #1a1a1a immer so flaue Übergänge.
Ansonsten gefallen mir die Buttons mit der Lösung sehr sehr gut.
Wie betätige ich den Button am geschicktesten? Ich habe in Ebene Z.index 3 einen transparenten Button in 140x70px drübergelegt .
Würdest du für den Button oben Links und den mittleren Button mit der Füllfarbe auch noch deine Config Teilen?

Für die runden Buttons hab ich gerade mal 45px Radius gewählt. Der Rest bleibt gleich.

[vento66]

Das sind natürlich mehrere Elemente. Schau doch mal in den Kram, was ich da von mir gegeben habe. Der Button besteht insgesamt aus 3 Teilen.

[Brick]

den ersten find ich cool...

Eigener Thread ...

EDIT:

wie fügt ihr diese CSS Buttons eigentlich hinzu.. einfach den ganzen Code in die CSS Spalte eintragen, oder wird der auch aus einzelnen Elemente
zusammengebaut ? also einen Teil für den Button, einen für den Rahmen usw...?

[timberland]

Ihr solltet dafür einen eigenen Thread aufmachen

Ich hab mal ein wenig gespielt mit den CSS Buttons.

Switch2.pngSwitch3.png

[starwarsfan]

Nabend miteinander

Philosophische Frage : Habt ihr manchmal auch das Problem, wie man einen Button zu designen hat, damit er wirklich intuitiv zu verstehen ist?
Es gibt ja die ewige Diskussion, was z.B. rot oder grün bedeutet. Für die einen ist grün=ein und rot=aus, für andere grad umgekehrt (grün=aus/bereitschaft, rot=an)

Ich habe das bei uns im Haus soweit es ging mit den Glastastern in Einklang gebracht. Alle jeweils nutzbaren Funktionen leuchten auf den Tastern weiss, ist etwas aktiviert resp. eingeschaltet, leuchtet die entsprechende Taste rot. Im Nachtmodus ist dann die weisse Beleuchtung komplett deaktiviert und nur das Nachtlicht der Taster ist aktiv. Die rote Beleuchtung ist unverändert, nur mit minimaler Helligkeit.

Dieses Vorgehen ist auf der Visu weitestgehend identisch. Ist etwas eingeschaltet, ist der Button rot. Ansonsten je nach Kontext weiss oder neutral.

[Eraser]

Naja für Maschinen gibt es ja auch, wer hätte es nicht geglaubt, eine DIN dafür [/CODE]

Das bezieht sich aber für die definierten Maschinen- und Sicherheitsfunktionen. Was ich meinte waren Buttons für z.B. normale Bewegungen oder Anzeigen für die Heizungen usw.

[vento66]

Naja für Maschinen gibt es ja auch, wer hätte es nicht geglaubt, eine DIN dafür Da bleibt nicht viel Spielraum.

gemäß DIN EN 60204-1 "Sicherheit von Maschinen - Elektrische Ausrüstung von Maschinen - Teil 1: Allgemeine Anforderungen" die Farbgebung von Drucktastern entsprechend dem Abschnitt 10.2. erfolgen: "10.2 Drucktaster 10.2.1 Farben Drucktaster-Bedienteile müssen nach Tabelle 2 farbig gekennzeichnet sein (siehe auch 9.2 und Anhang B).
* Die Farben für START/EIN-Bedienteile sollten WEISS, GRAU, SCHWARZ oder GRÜN, vorzugsweise WEISS sein. ROT darf nicht verwendet werden.
* Die Farbe ROT muss für NOT-HALT- und NOT-AUS-Bedienteile verwendet werden.
* Die Farben für STOPP/AUS-Bedienteile sollten SCHWARZ, GRAU oder WEISS, vorzugsweise SCHWARZ sein. GRÜN darf nicht verwendet werden.ROT ist erlaubt, aber es wird empfohlen, dass ROT nicht in der Nähe von Geräten für Handlungen im Notfall verwendet wird."

[mfd]

Ich mache es bei den Maschinen was ich programmiere so, dass ein neutrales Design (egal ob Button, Indikator o.Ä.) ein AUS bzw. nicht aktiv bedeutet, und grün dann EIN bzw. aktiv.

Dem kann ich nur zustimmen, ich würde es aber nicht mal von "Grün" abhängig machen, denn je nach Design ist ggf. eine andere Farbe stimmiger.
Ein neutrales Grau oder auch gar nicht sichtbar (wenn z.B. kein Fehler vorliegt) und eingefärbt in dem jeweiligen Visudesign wenn Aktiv/Ein/Fehler.

[Eraser]

Ich mache es bei den Maschinen was ich programmiere so, dass ein neutrales Design (egal ob Button, Indikator o.Ä.) ein AUS bzw. nicht aktiv bedeutet, und grün dann EIN bzw. aktiv. So werde ich das dann später auch bei der Visu machen.

[jonofe]

Wenn man an den beiden Seiten eines Schalters ON und OFF schreibt, oder 0 und 1, dann ist das eigentlich immer eindeutig, aber wie du schon richtig sagst, braucht das mehr Platz oder es leidet die Optik oder zumindest das persönliche Ästhetikempfinden.
Oft ist es halt so, dass der Schalter einen Statustext verdeckt und dann weiss man halt nie, ist das, was wann sieht der Status und der Zustand beim nächsten Schalten.
Ich finde es auch intuitiver, wenn der Text den aktuellen Status anzeigt.
Alternativ kann man natürlich auch Icons zur Statusvisualisierung verwenden: (gelbe Glühbirne = an, graue Glühbirne = aus).

[rdeckard]

Ich glaube, man kann schon eindeutige Buttons erstellen. Aber oft ist dann das auch ein Platzproblem. z.B. kann man neben dem Button noch einen längeren Text schreiben: "Licht ist AN" (anstatt nur einfach "ON"). Dann ist es klar, wie der aktuelle Status ist. Aber eben...wir haben oft nicht den Luxus von zuviel Platz (gerade auf Smartphone Designs).
Ich wollte jetzt nicht eine endlos Diskussion anfangen, sondern vielleicht eine kleine Anregung geben, dass man beim Design immer wieder kurz darüber nachdenken sollte, wie logisch ein Symbol/Element ist und ob man es evtl. auch missverstehen könnte. Wie bei allem: Besser machen geht immer! Und neue Ideen kommen nicht immer nur von den Profis, jeder kann mal einen Geistesblitz haben. Sonst gäbe es ja keine Weiterentwicklung (die jetzt so bekannten Designs für Regler/Buttons sahen ja vor 10 Jahren auch etwas anders aus.)

[rdeckard]

jonofe
Ich weiss, dass es keine "richtige" Antwort dazu gibt. Sonst würde das Thema ja nicht immer wieder diskutiert (nicht nur bei Visus, sondern generell).
Und ja, die Hauptbenutzer werden es schon verstehen. Aber es gibt halt auch Visus für den öffentlichen Bereich oder jemand erstellt eine für (mehrere) Andere. Da weiss man ja dann nicht so genau, wer es benutzen wird und ob es für denjenigen dann logisch ist.
Deshalb ist mein BESTREBEN immer, dass es wenn möglich klar ist und für sich alleine spricht (zumindest für unseren Kulturkreis). Aber eben....es ist immer nur eine Annäherung und hängt zudem auch stark vom gewählten Design ab. Bei gewissen Themes hat man evtl. mehr Möglichkeiten, bei anderen muss man eher abstrakt bleiben.

Ich versuche manchmal den Weg zu gehen, was die meisten Leute gewohnt sind (egal, ob intuitiv oder nicht): Das UI von aktuellen Smartphones. (wobei ich selbst bei meinem iPhone auch schon manchmal einzelne Schalter gesehen habe, wo ich nicht sofort wusste, ist der jetzt an oder aus)

Ein Punkt von dir ist aber wichtig: innerhalb der Visu konsistent bleiben. (Ist schon die halbe Miete)

[baumhaus123]

Kommt denke ich auch auf verwendete Design an. Wenn man (wie ich) Slider verwendet, bei denen man eindeutig identifizieren kann, ob der Schieber jetzt an oder aus ist, so sollten diese meiner Meinung nach immer den aktuellen Zustand wiederspiegeln und nicht den Zustand nach einer Betätigung. Das ist ja z.B. im iPhone (oder auch anderen Handymenüs) auch so, wenn du z.B. in die Einstellungen schaust. Aktivierter Slider bedeutet, die Funktion ist aktiviert und nicht "wird aktiviert bei Betätigung". So ist das auch bei mir in der Visu beim Licht. Slider aktiv heißt "Licht an" und umgekehrt.

Bei Fenstern ist es in der Tat tricky. Ich habe es so gelöst, dass ich es über kleine LEDs visualisiere. LED aus (ist dann grau, unauffällig) heißt Fenster zu, LED an (farbig mit Farbschatten) heißt Fenster offen. Hier kommt es wohl auch auf die Häufigkeit an, mit der eine Funktion genutzt wird. Wir haben eine Lüftungsanlage, die Fenster sind entsprechend recht selten offen, deswegen war für uns auch auf Anhieb einleuchtend, dass "LED an" ein offenes Fenster signalisieren muss.

Aber wie du schon selbst sagst: dazu wird es n-verschiedene Meinungen geben.