EDOMI - Zeigt her eure Visus!

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

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

[Teutone]

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

[ttcoach]

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

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

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

[hartmut]

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

[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

[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

[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

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

https://knx-user-forum.de/member/688-claus-mallorca Die Ein/Aus Buttons sind svg's, die ich gemalt habe. Stelle Sie morgen hier ein.

[ttcoach]

gefällt mir auch sehr gut - die Buttons schaun geil aus

Sieht prima aus. Würde ich gerne übernehmen. Würdest Du bitte die Einstellungen zur Verfügung stellen? Da ich nur Anwender bin würde das sehr helfen. Ansonsten muss ich wohl warten bis Christian die Möglichkeit geschaffen hat die Muster-Visus zu übernehmen.
Vorab schon mal einen Guten Rutsch allen im Forum.
Finde es toll was ihr hier macht.

Gruß Dietmar

[eriche]

gefällt mir auch sehr gut - die Buttons schaun geil aus

[hexer]

Das sind ja mal wieder ein paar sehr coole Inspirationen. Danke euch. Hab nur leider wenig Zeit. Muss noch Keller fliesen und so....