Entwerfen Sie eine „gedrückte“ Version eines Schaltflächenbilds?

Der einfachste und einfachste Weg wäre, den Knopf zu verdunkeln, wenn er gedrückt wird. Das Auftragen einer 30% schwarzen Schicht darüber reicht aus.

Beispiel-Button-Mockup

Um Zeit zu sparen und Übergänge zwischen Zuständen zu ermöglichen , ist es wichtig , Schaltflächeneffekte in der Gestaltungssprache für die von Ihnen erstellte Benutzeroberfläche zu erstellen und nicht Bilder für jede einzelne zu erstellen . Dadurch kann der Effekt wiederverwendet werden, wenn Sie einen anderen Text, eine andere Größe usw. haben.

Nehmen Sie zum Beispiel Design für das Web oder etwas, das HTML/CSS versteht:

Das HTML- <button>Element verfügt über einen standardmäßig gedrückten Zustand, der das Innere mit einem Schatten verdunkelt. Es ist wahrscheinlich nicht so attraktiv gestaltet, wie Sie möchten, aber wir können es ganz einfach selbst gestalten, indem wir den CSS- :activeStatus verwenden.

Mithilfe einer Stilsprache können wir auch von einem Zustand in einen anderen übergehen, anstatt nur abrupt zu wechseln.

In dieser Demo zeige ich, wie Sie Änderungen an der Hintergrundfarbe vornehmen, Schatten hinzufügen und Konturen erstellen, während Sie einen Übergang aus jedem Zustand verwenden. Die Effekte selbst sollten in der Praxis noch etwas feiner abgestimmt werden, aber hier zeigt sich, wie es geht.

_{Um zu sehen, welche Präfixe Sie benötigen transition(falls vorhanden) , schauen Sie hier oder auf caniuse ).}

Für komplexere Übergänge zwischen Zuständen ist manchmal ein tatsächlicher Keyframe oder eine JavaScript-Animation erforderlich. In diesem Fall wird die Animation normalerweise umgeschaltet und muss beendet werden, bevor sie erneut gestartet werden kann.

Ähnliche Effekte können mit denselben Techniken erstellt werden, wenn Sie an einer tatsächlichen Java-App, iOS-App oder etwas anderem arbeiten, aber die Implementierung wird anders sein.

Was das eigentliche Styling anbelangt, gibt Googles Materialdesign-Referenz für Schaltflächen genauere Richtlinien. Sie schlagen vor, nur die Hintergrundfarbe für unwichtige Schaltflächen zu ändern, aber den Hintergrund und Schatten für wichtigere Schaltflächen zu ändern.

Für unwichtige Schaltflächen, die optional sind (z. B. "Teilen"-Schaltflächen), empfehlen sie etwas Ähnliches wie das Folgende.

Für wichtigere, wichtigere Schaltflächen empfehlen sie, sie zu "erhöhen", dh Schatten zu verwenden, um mehr Bedeutung zu vermitteln.

Sie empfehlen auch die Verwendung von Übergängen/Animationen zwischen Zuständen und haben einige nette Beispiele auf der oben verlinkten Seite.

Wenn das, was Sie erreichen möchten, nicht flach sein muss, würde ich Ihnen empfehlen, einfach einen inneren Schatten wie diesen hinzuzufügen

Wenn es aber flach sein soll, empfehle ich Farbwechsel (dunkler) oder Umkehrung:

Dies hängt wirklich davon ab, wie kompliziert Sie Ihren Button haben möchten. Eine einfache Schaltfläche kann mit nur einer einzigen Form mit mehreren Eigenschaften erstellt werden, um normale und gedrückte Zustände darzustellen.

In Illustrator können Sie die Formeigenschaften im AppearanceBedienfeld überprüfen, sie sind genau wie Ebenen und können ein- und ausgeblendet werden, um den Status der Schaltfläche zu ändern. In der Abbildung verwende ich zwei Füllungen: eine hellgraue für normal, eine dunkelgrau für gedrückt.