Frage zu Buttondesign

[steinadler]

Hallo zusammen,

ich habe in der beigefügten Datei zwei Buttons.

Einmal einen mit pushed = false und einen mit pushed = true;

Der erste Button gefällt mir so wie er ist.

Ich weiß nicht, wie ich den zweiten Button gestalten soll, dass er so aussieht, wie der erste, nur eben nach unten gedrückt.

[Klotzkopp]

Da das ein Designthema ist, denke ich, dass es am besten ins Webdesign-Forum passt. Da sitzen die UI-Experten

[Klotzkopp]

Welche Effekt möchtest du denn erzielen? Soll der Button möglichst wie eine echte Taste aussehen?

Durch die Invertierung der Randfarbe erreichst du, dass der Button wie "umgestülpt" wirkt - die Fläche liegt tiefer als die abgeschrägten Ränder. Ist das gewünscht? Ein wirklicher Knopf tut das beim Drücken ja nicht.

Wenn ich mal davon ausgehe, dass der Farbverlauf keine gekrümmte Oberfläche, sondern eine Reflexion einer Lichtquelle andeuten soll, dann sollte IMHO der Farbverlauf in der gedrückten Version genauso aussehen, vielleicht insgesamt etwas dunkler, weil weniger diffuses Licht in die "Vertiefung" gelangt. Möglicherweise wirft der Rand der Fläche, die den Button umgibt, auch noch einen Schatten.

[steinadler]

Welche Effekt möchtest du denn erzielen? Soll der Button möglichst wie eine echte Taste aussehen?

Durch die Invertierung der Randfarbe erreichst du, dass der Button wie "umgestülpt" wirkt - die Fläche liegt tiefer als die abgeschrägten Ränder. Ist das gewünscht? Ein wirklicher Knopf tut das beim Drücken ja nicht.

Wenn ich mal davon ausgehe, dass der Farbverlauf keine gekrümmte Oberfläche, sondern eine Reflexion einer Lichtquelle andeuten soll, dann sollte IMHO der Farbverlauf in der gedrückten Version genauso aussehen, vielleicht insgesamt etwas dunkler, weil weniger diffuses Licht in die "Vertiefung" gelangt. Möglicherweise wirft der Rand der Fläche, die den Button umgibt, auch noch einen Schatten.

Genau, also es soll sehen dass es wie eine echte Taste aussieht.

Und umgestülpt soll er wirken. Man hat das z. B. bei wasserdichten Geräten.

Danke schonmal für die Hinweise... werds mal probieren

[steinadler]

Hm.... hab jetzt mal bissel geändert.

Aber ich finds immer noch komisch.

Der Farbverlauf hat jetzt bei beiden die gleiche Richtung.

und der Rand ist invertiert

[geloescht_JesterDay]

Aber ich finds immer noch komisch.

Also bei den Windows Buttons ist es eigentlich recht einfach:

w = weiß

s = schwarz (der Einfacheit halber)


pressed=false:

  w

w   s

  s


pressed=true:

  s

s   w

  w

Da hat der Rand eben nur eine Farbe (ist halt kein hoher Button) und die wird entsprechend vertauscht. Entsprechend musst du das bei dir auch machen, u.U. halt anpassen.

[steinadler]

Da hat der Rand eben nur eine Farbe (ist halt kein hoher Button) und die wird entsprechend vertauscht. Entsprechend musst du das bei dir auch machen, u.U. halt anpassen.

Hm... das Prinzip ist mir schon klar....

in meinem vorherigen Beitrag hab ich das Bild eigentlich so gemacht... also ich hab die Seiten vertauscht... und den Button insgesamt dunkler gemacht...

Aber irgendwie wirkt er immer noch nicht wie ein gedrückter Button...

Was muss ich denn noch ändern?

[geloescht_JesterDay]

Hm... das Prinzip ist mir schon klar....

in meinem vorherigen Beitrag hab ich das Bild eigentlich so gemacht... also ich hab die Seiten vertauscht... und den Button insgesamt dunkler gemacht...

Aber irgendwie wirkt er immer noch nicht wie ein gedrückter Button...

Was muss ich denn noch ändern?

Nichts? Hast du das ganze mal mit einem ganz einfachen, einfarbigen Button probiert mit 1 Pixel breitem Rand?

Wenn das da geht, musst du eben deine Grafiken entsprechend anpassen (die ja mehr als nur so eine einfache Farbgebung haben).