Gemeinsame Elemente, die im Schnittstellenknopfdesign verwendet werden
Schaltflächen und Navigationselemente sind wahrscheinlich die am häufigsten verwendeten Schnittstellenobjekte sowohl im Desktop- als auch im mobilen Design. Sie ziehen eine Schnittstelle zusammen, so dass Benutzer mit einem einzigen Klick von A nach B gelangen.
Am wichtigsten ist, dass ein Button gut aussehen muss. Es muss schreien "Klick mich!", Sonst ist es einfach nicht so effektiv wie es sein muss. Schaltflächen werden häufig zum Suchen, Senden, Senden, Kaufen und Hochladen verwendet.
In diesem Artikel betrachten wir sieben gängige Schaltflächenelemente im modernen Schnittstellendesign: Texturen, Muster, 3D, pixelgenaue Striche, eingerückte Hintergründe, Glühen und Glanzlichter.
Sie finden 35 fantastische Beispiele dieser Techniken sowie eine Handvoll Mini-Tutorials für Photoshop.
1. Texturen
Die Verwendung von Textur ist eine großartige Möglichkeit, Schaltflächen etwas mehr Tiefe zu verleihen und sie etwas vom Rest der Benutzeroberfläche abzuheben (und sie dadurch klickbarer zu machen). Im Folgenden finden Sie einige großartige Beispiele für Texturen in Schaltflächen.
ShelfLuv verwendet eine durchgängige Textur, um der Oberfläche Dimension zu verleihen, insbesondere in den Bereichen für Schaltflächen und Textfelder.
Überall auf dieser Oberfläche wird Textur verwendet, aber im Bereich "Upload" ist sie schwerer, was sie zu einem Schwerpunkt macht.
Die Textur ist hier gut mit dem abgeschrägten Knopf verschmelzen, so dass es echt aussieht.
Die Textur wird nicht wirklich auf dieser UI-Schaltfläche verwendet, erscheint aber im Hintergrund, sodass die Schaltfläche hervorgehoben werden kann.
Erstellen einer strukturierten Schaltfläche
Erstellen Sie einen einfachen Hintergrund mit dem Hilfsmittel Form und fügen Sie Rauschen hinzu (Filter → Rauschen → Rauschen hinzufügen).
Wählen Sie das Form-Werkzeug erneut aus, und zeichnen Sie ein Rechteck. Achten Sie darauf, dass das obere Ende nicht über den Rand der Leinwand hinausragt.
Ändern Sie die Farbe der Form in Blau. Ich habe # 00A3D9 benutzt.
Duplizieren Sie die Shape-Ebene und ändern Sie die Größe an derselben Position. Ändern Sie die Farbe in ein etwas dunkleres Blau.
Dupliziere die Ebene noch einmal. Positionieren Sie die Ebene unter den letzten zwei Shape-Ebenen, und ändern Sie die Farbe in ein helles Grau.
Fotografiere oder lade eine Papierstruktur herunter (ich habe eine von Verloren & Genommen ). Gehen Sie zu Datei → Platzieren und suchen Sie die Datei, um sie in das Dokument einzufügen. Ändere die Größe und positioniere sie über deinen blauen Formen.
Entfernen Sie überschüssige Texturen mit dem Auswahlrechteck und ändern Sie den Füllmodus der Textur. Experimentieren Sie mit verschiedenen Modi, da unterschiedliche Texturen zu unterschiedlichen Ergebnissen führen. Vielleicht möchten Sie auch die Deckkraft ein wenig senken.
Öffne das Schichtstil-Fenster für deine dunklere blaue Form und wende den folgenden Schlagschatten-Stil an, um einen subtilen weißen Schatten hinzuzufügen.
Wenden Sie nun mit den folgenden Einstellungen einen Strich auf Ihre Form an.
Fügen Sie schließlich der Form einen inneren Schatten hinzu, um ihm eine weitere Dimension zu geben.
Fügen Sie dem Button etwas Text hinzu und Sie sind fertig!
2. Muster
Muster sind eine weitere gute Möglichkeit, den Schaltflächen der Benutzeroberfläche ein gewisses Maß an Interesse und Tiefe zu verleihen. Im Folgenden finden Sie einige Beispiele für Muster in Knöpfen, alle subtil und doch effektiv.
Eine diagonale Reflexion wird auf der linken Seite der Schaltfläche verwendet, um das Symbol vom Typ zu trennen.
Eine diagonale Linie wird in diesem Knopf verwendet, passend zum Vintage-Look, während dem Design Dimension hinzugefügt wird.
Dies ist meine bevorzugte Verwendung eines Musters in diesen Beispielen. Obwohl das Muster in der grauen Kopfzeile nicht in den Schaltflächen selbst verwendet wird, fügt es dem gesamten Design eine Dimension hinzu und hilft letztendlich den orangefarbenen Schaltflächen.
Erstellen einer gemusterten Menüband-Schaltfläche
Nach dem Erstellen eines strukturierten Hintergrunds mit der Technik aus dem vorherigen Mini-Lernprogramm zeichnen Sie ein Rechteck mit dem Hilfsmittel Form und füllen es mit einem blau-grünen Rechteck. Ich habe die Farbe # 008B8D verwendet.
Zeichnen Sie eine andere Form mit der gleichen Höhe und Farbe.
Erstellen Sie mit dem Lasso-Werkzeug ein Dreieck (siehe unten). Positionieren Sie es über den Rand der neuen Form und drücken Sie die Taste "Löschen", um den Bereich zu entfernen, den wir nicht benötigen.
Duplizieren Sie die Form und gehen Sie zu Bearbeiten → Transformieren → Horizontal spiegeln, damit sie in die entgegengesetzte Richtung zeigt.
Positionieren Sie die beiden Formen unterhalb der größeren Form (siehe unten).
Klicken Sie mit der rechten Maustaste auf eine Ihrer Formen und öffnen Sie das Fenster Fülloptionen / Ebenenstil. Wenden Sie eine Verlaufsüberlagerung ähnlich der unten gezeigten an. Sie können auch einen subtilen Schlagschatten hinzufügen. Wenn Sie fertig sind, klicken Sie mit der rechten Maustaste auf den Layer und wählen Sie "Layer-Stil kopieren". Wählen Sie Ihr anderes Banner-Shape. Klicken Sie mit der rechten Maustaste und wählen Sie "Ebenenstil einfügen". Öffnen Sie das Fenster "Ebenenstil" und ändern Sie den Winkel Ihres Verlaufsüberlagerung von 180 ° auf 0 °.
Erstellen Sie mit dem Lasso-Werkzeug eine Auswahl, die der unten gezeigten ähnlich ist, um die zwei Ecken unserer Formen aufeinander abzustimmen. Fülle es mit einer noch dunkleren Farbe.
Dupliziere die Ebene, drehe sie horizontal und positioniere sie auf der anderen Seite.
Erstellen Sie ein Linienmuster. Alternativ könntest du den, den ich unten gemacht habe, verwenden.
Fügen Sie das Muster über Ihrem gesamten Banner ein. Klicken Sie bei gedrückter Befehls- und Umschalttaste auf die Ebenenminiaturen aller Bannerebenen. Dies wird alle auswählen. Klicken Sie mit der rechten Maustaste und wählen Sie "Inverse auswählen". Drücken Sie bei ausgewählter Linienmusterebene die Taste "Entf", um die Bereiche des Musters zu entfernen, die Sie nicht benötigen.
Ändern Sie den Überblendungsmodus der Musterebene zu "Multiplizieren", um das Weiß der Ebene auszublenden. Verringern Sie die Deckkraft jetzt auf 25 bis 75%. Experimentieren Sie für das beste Ergebnis.
Erstellen Sie mit dem Hilfsmittel Form einige ähnliche Linien wie die folgenden.
Entfernen Sie die Bereiche, die auf dem Bildhintergrund liegen.
Experimentiere mit dem Mischmodus jeder deiner Linien. Hier ist das Ergebnis:
3. 3-D
Dreidimensionale Tasten sind großartig, weil sie die Tasten viel realistischer wirken lassen. Sie sind fast unmöglich, nicht zu klicken! Der einzige Nachteil ist, dass der Effekt eher verspielt ist und daher nicht für alle Webseiten (wie zum Beispiel Firmen) geeignet ist. Unten finden Sie eine Auswahl einiger schöner 3-D-Tasten.
Die Schatten und 1-Pixel-Linien heben bestimmte Bereiche hervor und lassen die Schaltfläche 3-D erscheinen. Dies und einige gute CSS-Effekte würden für eine super interaktive Schaltfläche sorgen.
Unser zweites Element (Muster) wird auch in diesem Design verwendet, um einer bereits sehr 3D-Schaltfläche Dimension hinzuzufügen.
Diese Schaltfläche verwendet einen etwas anderen Ansatz und verlässt sich bei ihrem 3-D-Erscheinungsbild nur auf Verläufe.
Dieser Satz zeigt verschiedene Höhen an, um anzuzeigen, ob sich die Schaltfläche in ihrem normalen, schwebenden oder aktiven Zustand befindet. Die Linien und die Textur verleihen den Knöpfen ein lebendigeres Aussehen.
Wie bei ein paar anderen Beispielen in diesem Abschnitt macht eine Kombination aus Verläufen und Konturen diese Schaltflächen dreidimensional.
Diese Schaltfläche sieht aufgrund ihres "out of the box" -Designs dreidimensional aus und ist um die Benutzeroberfläche herum angeordnet.
Erstellen einer 3D-Schaltfläche
Zeichnen Sie zunächst mit dem Rechteck-Werkzeug eine Form mit einem Eckenradius von 7 Pixeln. Öffnen Sie das Fenster "Ebenenstil" und wenden Sie ein Farbverlaufs-Overlay von dunkelrot bis hellrot an. Verwenden Sie ein noch helleres Rot am Ende der Verlaufsleiste, um den oberen Bereich der 3D-Schaltfläche hervorzuheben.
Wenden Sie nun einen Strich auf die Schaltfläche an. Ändern Sie den Fülltyp in "Verlauf", damit Sie die Farbe des oberen und unteren Strichs ändern können. Wechseln Sie von einem hellen zu einem dunklen Rot (das Gegenteil der Farbverlaufsüberlagerung).
So sollte es in etwa aussehen:
Duplizieren Sie die Shape-Ebene. Verschieben Sie die ursprüngliche Ebene um etwa 10 Pixel nach unten.
Wenden Sie einen Schlagschatten auf die ursprüngliche Ebene an, indem Sie die Einstellungen verwenden, die im folgenden Screenshot zu sehen sind.
Verdunkeln Sie die Farbverlaufsüberlagerung, indem Sie jede einzelne Farbe in der Farbverlaufsleiste etwas dunkler machen.
Sie sollten etwas haben, das wie folgt aussieht:
Wählen Sie das Textwerkzeug und geben Sie etwas auf der Schaltfläche ein. Öffnen Sie das Fenster "Ebenenstil" und wenden Sie eine Verlaufsüberlagerung ähnlich der folgenden an:
Übernehmen Sie einen inneren Schatten mit diesen Einstellungen:
Wenden Sie einen Schlagschatten mit diesen Einstellungen an:
Und wir sind fertig! Du solltest mit so etwas enden:
4. Pixel-Perfekte Striche
Die Kunst, Pixel zu perfektionieren, ist zu allen Aspekten des Benutzeroberflächen-Designs, nicht nur zu Schaltflächen, geworden. Ein-Pixel-Linien (oder Striche) geben Schaltflächen Tiefe und ein leicht 3-D-Look. Sie machen auch Schaltflächen eingerückt. Hier sind einige brillante Beispiele dafür.
Sie können deutlich sehen, dass eine weiße (überlagerte) 1-Pixel-Linie als ein Highlight am oberen Rand der roten Schaltfläche verwendet wird, mit einer dunkleren Linie am unteren Rand. Dadurch erscheint es leicht dreidimensional und fügt der Seite eine Menge Details hinzu.
Die Typografie in dieser Schaltfläche hat einen inneren Schatten, so dass die Schaltfläche so erscheint, als ob sie über der Schnittstelle sitzt.
Diese CSS3-only-Schaltflächen (absolut kein Photoshop) haben 1-Pixel-Striche, die sie vom Hintergrund abheben und beim Klicken eingerückt erscheinen.
Ein weiteres Beispiel für einen 1-Pixel-Lichtstrich oben auf der Schaltfläche, der als Highlight fungiert.
Dieser grüne Knopf zeigt eine etwas andere Herangehensweise, mit einem inneren Glühen, das als ein Highlight am oberen Rand des Knopfes wirkt. Der Strich auf der Außenseite erzeugt einen sehr feinen Schatten.
Noch ein weiterer Knopf, der die oben erwähnten Techniken kombiniert.
Dieser einfache Knopf hat einen dünnen Strich und einen feinen Schlagschatten, um ihn vom einfachen Design abzuheben.
Dieser Knopf hat einen subtilen inneren Schein, der ihn vom Hintergrund abhebt. Sein aktiver Zustand hat eine verringerte Opazität, was den Trick macht.
Vergessen Sie den Knopf: Dieses ganze Design ist pixelgenau, mit seiner modernen Typografie und seinen Linien, die für eine schöne Benutzerschnittstelle sorgen.
Erstellen Sie einen Pixel-Perfect Button
Wählen Sie das Hilfsmittel Rechteckform (in der Werkzeugleiste oben in Photoshop, wenn das Werkzeug Form ausgewählt ist) aus und geben Sie ihm einen Eckenradius von 5 Pixeln. Zeichnen Sie ein schwarzes Rechteck, das dem folgenden ähnelt.
Öffnen Sie das Fenster "Ebenenstil" und wenden Sie eine Farbverlaufsüberlagerung auf die Form an. Ich verwendete ein dunkles Grün zu einem etwas helleren Grün.
Geben Sie der Form einen Farbverlauf, indem Sie von einem grünen zu einem immer etwas dunkleren Grün wechseln.
Geben Sie der Form nun einen weißen Innenschattenstil mit den unten gezeigten Einstellungen.
Und jetzt ein Schlagschatten mit einer Größe von 0 Pixeln und einer Opazität von nur 5%.
Suchen Sie ein Symbol im Internet (oder erstellen Sie ein eigenes) und platzieren Sie es in Ihrem Dokument, indem Sie zu Datei → Platz gehen und es korrekt positionieren. Wenden Sie eine Farbverlaufsüberlagerung darauf an.
Geben Sie dem inneren Schatten Ihres Symbols einen Abstand von 1 Pixel und dem weißen Schlagschatten einen Abstand von 1 Pixel. Dadurch sieht das Symbol so aus, als wäre es in den Knopf eingraviert.
Fügen Sie der Schaltfläche Text hinzu und wenden Sie einen Schatteneffekt mit niedriger Opazität im Fenster "Ebenenstil" an. Hier ist das Ergebnis:
5. Eingerückte Hintergründe
Ein eingerückter Hintergrund lässt eine Schaltfläche so aussehen, als wäre sie in ihr vergraben, was der Schaltfläche Tiefe und visuelles Interesse verleiht. Im Folgenden finden Sie einige großartige Beispiele dafür.
Dieser Schaltflächenhintergrund hat einen subtilen inneren Schatten, damit er eingerückt erscheint.
Die invertierten Verläufe in diesem Hintergrund lassen die Schaltflächen eingerückt erscheinen.
Eine Kombination aus Strichen und Schlagschatten verleiht diesen eingerückten Schaltflächen mehr Tiefe.
Dieser Knopfhintergrund hat einige Arten, einschließlich eine Steigung, einen inneren Schatten und einen Schlagschatten.
Dieser eingerückte Hintergrund ist viel kleiner als das, was wir gesehen haben, aber immer noch den gleichen Techniken folgt.
Wiederum werden ein Schlagschatten und ein innerer Schatten verwendet, um einen Einzug zu erzeugen.
6. leuchtet
Leuchtsignale sind eine ziemlich schwierige Technik, die man beim Interface-Design machen kann, und werden normalerweise nur bei dunklen Interfaces gesehen (obwohl wir unten ein helles Beispiel sehen werden). Diese Beispiele zeigen, wie Glow auf verschiedene Arten verwendet werden kann.
Auf der Innenseite dieses Knopfes wird ein Glühen verwendet, was es zu einem Allround-Highlight macht.
Glows werden geschickt verwendet, um die Typografie in diesem Knopf aus dem dunklen Hintergrund hervorzuheben. Und die Leuchten lassen die Ladebalken lebensecht erscheinen.
Leuchtdioden werden häufig in dunklen Schnittstellen für das iPhone verwendet. Hier sehen wir ein Leuchten um die Typografie herum, wenn der Knopf in seinem aktiven Zustand ist.
Das leichte und subtile Leuchten verleiht diesem Knopf den zusätzlichen Schub, den er braucht, um schön zu werden.
Erstellen eines hellen leuchtenden Knopfes
Zeichnen Sie mit dem Rechteckwerkzeug ein Rechteck, diesmal mit einem Eckenradius von 3 Pixel. Wenden Sie eine Verlaufsüberlagerung an, die der folgenden ähnelt. Gib deinen mittleren Farben eine Position von "49" und "50".
Wende den folgenden inneren Schatten an.
Wende den folgenden Schlagschatten an.
Wende das folgende Outer Glow an.
Fügen Sie der Schaltfläche eine Typografie hinzu. Sie sollten am Ende ein schönes, sauberes und unglaublich einfach zu produzierendes Ergebnis erhalten:
7. Höhepunkte
Highlights geben Schaltflächen Tiefe, visuelles Interesse und Klickbarkeit. Die folgenden Beispiele belegen dies.
In der oberen Hälfte dieser Schaltfläche wird eine einfache weiße Form mit geringer Opazität verwendet, um ihr Tiefe zu verleihen und sie an die allgemeine rote und graue Oberfläche anzupassen.
Wie bei vielen anderen Schaltflächen in diesem Post, hebt ein 1-Pixel-Strich diesen hervor.
Leichte bis dunkle bis helle Farbverläufe dienen als Highlights und Schatten für diese Tasten.
Dieser Beitrag wurde exklusiv für WDD geschrieben von Callum Chapman , der Mann dahinter Picmix Laden und CircleBox-Blog .
Welche Knopfdesigns verwenden Sie am meisten und warum? Haben Sie bei einigen Designs eine höhere Klickrate gefunden? Bitte teilen Sie unten ...