Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Frage zu Buttondesign

Empfohlene Antworten

Veröffentlicht

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.

post-28147-14430447503338_thumb.jpg

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.

  • Autor
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

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.

  • 2 Wochen später...
  • Autor
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?

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

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.