EDOMI - Zeigt her eure Visus!

[vento66]

ttcoach Das sollte den Button mittlere Reihe links ergeben:

Aussen:

Grösse 140x70px
Rundung 20px
Z-Index: 0
CSS
content: "";background: #1A1A1A;box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),inset -5px -15px 40px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.5), inset 5px 15px 40px rgba(0,0,0,0.2), -2px -40px 50px -20px rgba(255,255,255,0.1), 2px 35px 50px -10px rgba(0,0,0,0.4),0px 0px 25px 8px rgba(60,60,60,1);

Leuchtring:

Grösse 60x60px
Rundung 18px
Z-Index 1

Aus:
CSS:
box-shadow: 0 0 10px 3px rgba(0,255,0,0.5);background:rgba(0,255,0,0.5);;-webkit-transition: 0.5s ease-out

Ein:

Delta x-Pos 68
CSS:
box-shadow: 0 0 10px 4px rgba(255,0,0,0.5);background:rgba(255,0,0,0.5);-webkit-transition: 0.5s ease-out;


Knopf:
Grösse 60x60px
Rundung 15px
Z-Index: 2

Werte für Aus:
Schriftgrösse: 24px
CSS:
cursor: pointer;  background: #25292C;   margin: 0px auto;   text-align: center;   color: rgba(155,155,155,1);   text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);    font-family: sans-serif;   box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(255,255,255,0.1),inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(0,0,0,0.2),1px 5px 30px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out

Werte für EIN:

Delta x-Pos: 68
Radius 15px
Schriftgrösse 20
CSS:
cursor: pointer;background: #25292C; text-align: center;  color: rgba(155,155,155,1);    text-shadow: 1px 1px 0px rgba(255,255,255,0.15); font-family: sans-serif;color: rgba(0,0,0,0.7);   text-shadow: 1px 1px 0px rgba(255,255,255,0.15);   box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(255,255,255,0.1),1px 5px 10px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out;-webkit-transform: scale(0.95, 0.95);

[mywap]

Claus.Mallorca
Hier ist der <Ein>-Button:

<?xml version="1.0"?>
<svg width="98" height="36" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <title>Schalter Ein</title>
 <g>
  <title>Layer 1</title>
  <path stroke="#ffffff" fill-opacity="0" id="svg_1" d="m19.050999,1.04245l62.39809,0l0,0c8.174309,0 14.800911,7.592197 14.800911,16.957607c0,9.365349 -6.626602,16.957493 -14.800911,16.957493l-62.39809,0l0,0c-8.174418,0 -14.800999,-7.592144 -14.800999,-16.957493c0,-9.36541 6.62658,-16.957607 14.800999,-16.957607z" fill="#000000"/>
  <circle stroke="#27ae60" id="svg_5" r="17" cy="18" cx="18.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#27ae60"/>
  <text x="62" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="24" id="svg_3" y="26.296875" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#ffffff" fill="#ffffff">Ein</text>
  <text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" id="svg_2" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" y="26.296629" x="17.827633" stroke="#ffffff">✔︎</text>
 </g>
</svg>

und der <Aus> Button

<?xml version="1.0"?>
<svg width="98" height="36" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <title>Schalter Aus</title>
 <g>
  <title>Layer 1</title>
  <path stroke="#ffffff" fill="#000000" d="m15.801,1.04245l62.398089,0l0,0c8.174309,0 14.800911,7.592197 14.800911,16.957603c0,9.365355 -6.626602,16.957497 -14.800911,16.957497l-62.398089,0l0,0c-8.174419,0 -14.801,-7.592142 -14.801,-16.957497c0,-9.365408 6.62658,-16.957603 14.801,-16.957603z" id="svg_1" fill-opacity="0"/>
  <circle fill="#ff5656" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="80" cy="18" r="17" id="svg_5" stroke="#ff5656"/>
  <text fill="#ffffff" stroke="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" y="26.296875" id="svg_3" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" x="34">Aus</text>
  <line fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="72" y1="10" x2="88" y2="26" id="svg_6"/>
  <line fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="72" y1="26" x2="88" y2="10" id="svg_9"/>
 </g>
</svg>

Erstellt hatte ich sie ursprünglich mit SVG-EDIT. Jetzt nehme ich inkscape.

Grüße
Frank

[timberland]

Coole Sache vento66

Für alle die die Demovisu verwenden können das auch mal versuchen. Werde das bei Gelegenheit in der DemoVisu ändern.

[U][B]1. Universalelement[/B][/U]
Hintergrund:

CSS:
"width: 105px;     
height: 60px;       
background: rgba(255,255,255,0.1);     
border-radius: 30px 30px 30px 30px;     
box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.5), inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1);         
-webkit-transition: all .5s ease; transition: all .5s ease;"



[U][B]2. Universalelement[/B][/U]
Für Status 0:
Koordinaten x +2 / y +3 zu Hintergrundelement

CSS:
"height: 53px;
width: 53px;
z-index: 2;
border-radius: 30px;
background: #4E738B; 
box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), 0 8px 10px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.5); 
-webkit-transition: all .5s ease; 
transition: all .5s ease;"



Für Status 1:
Versatz x 48

CSS:
"height: 53px;
width: 53px;
z-index: 2;
border-radius: 30px;
background: #11CBC5; 
box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), 0 8px 10px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.5); 
-webkit-transition: all .5s ease; 
transition: all .5s ease;"

Schaut in der Visu dann so aus.

IMG_0397.PNG

[ttcoach]

ttcoach Das sollte den Button mittlere Reihe links ergeben:

Aussen:

Grösse 140x70px
Rundung 20px
Z-Index: 0
CSS
content: "";background: #1A1A1A;box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),inset -5px -15px 40px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.5), inset 5px 15px 40px rgba(0,0,0,0.2), -2px -40px 50px -20px rgba(255,255,255,0.1), 2px 35px 50px -10px rgba(0,0,0,0.4),0px 0px 25px 8px rgba(60,60,60,1);

Leuchtring:

Grösse 60x60px
Rundung 18px
Z-Index 1

Aus:
CSS:
box-shadow: 0 0 10px 3px rgba(0,255,0,0.5);background:rgba(0,255,0,0.5);;-webkit-transition: 0.5s ease-out

Ein:

Delta x-Pos 68
CSS:
box-shadow: 0 0 10px 4px rgba(255,0,0,0.5);background:rgba(255,0,0,0.5);-webkit-transition: 0.5s ease-out;


Knopf:
Grösse 60x60px
Rundung 15px
Z-Index: 2

Werte für Aus:
Schriftgrösse: 24px
CSS:
cursor: pointer; background: #25292C; margin: 0px auto; text-align: center; color: rgba(155,155,155,1); text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1); font-family: sans-serif; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(255,255,255,0.1),inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(0,0,0,0.2),1px 5px 30px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out

Werte für EIN:

Delta x-Pos: 68
Radius 15px
Schriftgrösse 20
CSS:
cursor: pointer;background: #25292C; text-align: center; color: rgba(155,155,155,1); text-shadow: 1px 1px 0px rgba(255,255,255,0.15); font-family: sans-serif;color: rgba(0,0,0,0.7); text-shadow: 1px 1px 0px rgba(255,255,255,0.15); box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(255,255,255,0.1),1px 5px 10px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out;-webkit-transform: scale(0.95, 0.95);

Hallo!
Danke Dir. Habe gerade mal eingefügt aber irgendetwas klappt da nicht bei mir.
Was hab ich denn da falsch gemacht?
Button_01.jpg

[hartmut]

Hat der Leuchtring auch ein Status KO? Das gleiche wie für den Knopf.

[ttcoach]

Ja passt jetzt. Kann leider das mit css nicht. jetzt sollte ja eigentlich
- die Farbe bei off rot sein
- die Beschriftung weiß
- der Button bei on auch schwarz mit weißer Schrift.

Danke für die Hilfe!

Button_02.jpg

[vento66]

Kontroliere mal dein CSS:

Leuchtring rot (bei Dir der Null Wert)

box-shadow: 0 0 10px 4px rgba(255,0,0,0.5);background:rgba(255,0,0,0.5);-webkit-transition: 0.5s ease-out;

Button mit weiser Schrift

cursor: pointer;  background: #25292C;   margin: 0px auto;   text-align: center;   color: rgba(155,155,155,1);   text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);    font-family: sans-serif;   box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(255,255,255,0.1),inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(0,0,0,0.2),1px 5px 30px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out

und kontrollier auch mal die Z-Ebenen! Button eine Ebene höher als der Leuchtring!

[ttcoach]

Dankev euch!!! Geht doch
Schönen Abend noch!

[Teutone]

Große Klasse! Besten Dank, genau das was ich gesucht habe.

[rdeckard]

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)
Bei Ein/Aus-Button geht ja das noch mit den rot/grün-Farben (ich gehöre auch zu denen, die grün=an nehmen würden), aber bei Sensoren/Kontakten siehts schon wieder anders aus. Wie soll z.B. der Verriegelungsstatus einer Haustür angezeigt werden? Rot=verriegelt und grün=offen oder umgekehrt grün=verriegelt (sicher) und rot=offen (unsicher, Warnung)? Es ist immer irgendwie der Kontext, aber oft kann man zwei unterschiedliche Fragen hinter einem Status stellen (was will ich erkennen? Den technischen Kontakt-Status oder die Funktion?)

Bei normalen (Licht-)Buttons versucht man ja oft noch einen Text ("ON", "OFF") einzufügen, damit es klarer wird (falls das mit der Farbe doch nicht so logisch ist). Nur, bei Text habe ich dann oft das Problem, dass ich nicht weiss, auf was sich der Text bezieht. Auf den AKTUELLEN Status oder die Funktion, die erst beim Antippen geschieht?
Bedeutet also "ON", dass das Licht JETZT ein ist oder dass man es mit Antippen EINSCHALTEN kann.

Ich weiss, die meisten Visus werden ja nur von einem selber (bzw. der Familie) bedient und da gewöhnt man sich an alles, egal, wie es designed wurde.
Trotzdem kommen mir manchmal diese Gedanken, wenn ich eine wildfremde Visu (oder Button) sehe und ganz kurz zweifle, was dieser Button nun macht, wenn ich ihn antippen würde. Und gerade dieser kurze Zweifel deutet ja darauf hin, dass er nicht 100% intuitiv ist. Und eigentlich wäre dies ja immer das Ziel einer guten Visu.

Mein Ansatz zurzeit für Buttons ist ein farbloses/neutrales Design, wenn der Button aktuell AUS ist und eine kräftige Farbe (inkl. anderes Aussehen), wenn es EIN ist (ob grün oder rot spielt dann nicht so eine wichtige Rolle). Zusätzlich noch ein Status daneben (leuchtende LED oder ein gelbes Glühbirnen-Symbol, wenn es AN ist)

Aber ich finde das Thema interessanterweise recht komplex... ;-)

P.S.: Hat man mehrere Schalter untereinander, so kann man oft davon ableiten, wie sie funktionieren. Aber das wäre eigentlich kein gutes Design. Der Button müsste am besten auch alleine logisch funktionieren.

[jonofe]

Dazu wirds dann wohl auch nur philosophische Antworten geben.
Beide aufgezeigten Varianten sind ja irgendwie logisch, da gibts aus meiner Sicht kein richtig oder falsch.
Für mich ist nur wichtig, dass die Hauptnutzer der VISU es verstehen und dass es innerhalb die VISU konsistent ist.

[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.

[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)

[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.)

[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).