Share
Es gibt tausend Möglichkeiten, Schaltflächen zu entwerfen und zu erstellen, und Sie müssen nur ein wenig Zeit damit verbringen, die Arbeit an Dribbble durchzuarbeiten, um ein Gefühl für sie zu bekommen. Viele dieser Beispiele sind genau die gleichen, aber gelegentlich gibt es einige wenige, die sich wie etwas mehr Sorgfalt und Aufmerksamkeit bei der Herstellung fühlen.
Die wundervollen neuen CSS3-Eigenschaften nutzen wir, um erstaunlich elegante und stilvolle Schaltflächenstile zu erzeugen, ohne den Eindruck eines Bildes zu verlieren. Sie können Ihre Schaltflächen direkt in CSS erstellen, oder Sie möchten zu Ihrem Layout-Werkzeug Ihrer Wahl gehen. Es ist jedoch wichtig, sorgfältig darüber nachzudenken, wie Ihr Schaltflächendesign im Kontext lebt.
Es ist zu einfach, einfach nach einer vorgefertigten "UI Elements PSD" zu greifen, die einige großzügige Leute kostenlos mitbenutzt haben (und die zweifellos von Apple inspirierte Schaltflächen enthalten). Aber nehmen Sie sich einen Moment Zeit, um zu überlegen, ob der Schaltflächenstil für Ihr Design geeignet ist, und prüfen Sie, ob Raum für etwas originelleres ist?
Das Recyceln von Knöpfen eines anderen Benutzers ist in Ordnung, es spart Zeit, aber es ist kein Schaden, wenn Sie das Design und die Zusammensetzung Ihrer (oder eines anderen) Buttons etwas detaillierter verstehen. Wie sind sie entworfen? Passen sie zur Schnittstelle, zum Kontext oder zur Marke? Gibt es eine Möglichkeit, etwas Einzigartiges zu schaffen? Sind meine Knöpfe gut sichtbar? Benötige ich primäre, sekundäre und tertiäre Tasten? Unterscheiden sie sich erheblich genug? Sehen sie glatt aus ?! (Warum nicht, wir alle wollen cool aussehende Sachen entwerfen ?!).
Hier sind zehn schnelle und einfache Dinge, über die ich beim Entwerfen von Tasten immer nachdenke. Ich werde nicht auf Ideen zur Verwendung von Ebeneneffekten in Photoshop eingehen, sondern auf ein paar einfache, allgemeine Konstruktionsprinzipien, die bei der Optimierung des Designs Ihrer Schaltflächen und anderer Benutzeroberflächen im Allgemeinen noch lange dauern können.
Es ist wichtig, dass Ihre Schaltflächen ihrem kontextuellen Stil entsprechen. Dies kann bedeuten, dass Sie in eine Farbpalette, einen grafischen Stil oder in eine Form von Markenrichtlinien oder Logos einsteigen. Vielleicht gibt es markante Formen, Texturen oder Designstile, die Sie aufgreifen können. Möglicherweise hat ein Logo einen kreisförmigen Aspekt, und Sie können dies in Ihren Knöpfen oder anderen potenziellen Handlungsaufforderungen aufgreifen.
Wenn eine Benutzeroberfläche überwiegend flache Farben verwendet, sind große, glänzende, apfelähnliche Schaltflächen möglicherweise nicht der richtige Weg. Wenn Sie können, nutzen Sie die Möglichkeit, die Marke bis zur Schnittstelle zu erweitern, indem Sie geeignete Formen, Effekte, Farben oder andere Formen der Verzierung verwenden.
Halten Sie sich von oben an und halten Sie kurz an, bevor Sie die 'UI Elements PSD' öffnen. Es ist für Gradienten, Schatten, Abschrägungen usw. leicht zu erreichen. Denken Sie jedoch darüber nach, ob es die richtige Wahl ist, nicht nur zu einer Marke zu passen, sondern auch zu der Schnittstelle, in der die Tasten sitzen, und ob sie sich zu knackig fühlen müssen..
Schaltflächen müssen sich z. B. innerhalb einer App und auf Mobilgeräten besonders knüpfig anfühlen. Bei Websites ist jedoch möglicherweise etwas mehr Platz für die Tasten oder Handlungsaufforderungen vorhanden.
Da so viele Schnittstellendesigns vom Stil des Apple OS inspiriert werden, insbesondere in vielen der UI Element PSDs, können Schaltflächen unter den anderen Elementen der Benutzeroberfläche etwas verloren gehen, wodurch ihre potenziell wichtige Kraft beeinträchtigt wird. Verwenden Sie Farbe, Größe, Leerzeichen oder Typografie, um sicherzustellen, dass Ihre Schaltflächen das visuelle Gewicht haben, das sie benötigen, um sich vom Rest der Benutzeroberfläche abzuheben.
Wenn sich im oberen Bereich viele andere Oberflächenelemente der abgerundeten Ecke befinden, sollten Sie die Verwendung von runden Schaltflächen oder einer anderen Änderung der Form in Betracht ziehen. Dies könnte Ihnen einen zusätzlichen Kontrast geben, der sicherstellt, dass Ihre wichtigen Handlungsaufforderungen die Prominenz haben, die sie benötigen.
Wenn Sie nach einem vom Betriebssystem inspirierten Stil streben oder mit einer vordefinierten Element-PSD arbeiten, ist es wahrscheinlich, dass Ihre Benutzeroberflächenelemente vorwiegend abgerundete Ecken haben. Reduzieren Sie die Reduzierung des Verschönerungsgrades bei Elementen, die sich weniger knackig anfühlen.
Zum Beispiel können maßgeschneiderte Auswahlmenüs, segmentierte Steuerelemente und benutzerdefinierte Menüauslöser dieselben runderen Ecken sein. Wenn Sie jedoch weniger Schatten, Rahmen, Abschrägungen, Farbverlauf oder andere Effekte verwenden, können Sie deren Reichhaltigkeit verringern und Button-Stile fördern.
Die meisten Schaltflächen, die wir da draußen sehen, haben eine Form von Rahmen oder Strich. Wenn Ihre Schaltfläche dunkler ist als der Hintergrund, auf dem sie sich befindet, verwenden Sie einen dunklen Strich der allgemeinen Schaltflächenfarbe. Wenn das Gegenteil zutrifft, sollten Sie einen Strich wählen, der die Hintergrundfarbe dunkler färbt. Wenn Sie beim ersteren bleiben und ihn auf einem dunkleren Hintergrund verwenden, kann ich feststellen, dass die Knopfränder ein wenig "schmutzig" werden. Die Verwendung des letzteren kann auch dazu beitragen, dass die Schaltfläche wirklich zum Einrasten wird. Ich halte dies für ein generelles Designprinzip beim Umgang mit Strichen / Grenzen im Webdesign.
Im Laufe der Jahre habe ich immer auf mein "Schattengesetz" geschworen. Das Schattengesetz besagt, dass Schlagschatten am besten funktionieren, wenn ein Element heller ist als der Hintergrund. Wenn ein Element dunkler als der Hintergrund ist, sollten Schatten sehr dezent verwendet werden. Ähnlich wie Farbanpassungsstriche und -ränder halte ich dies für ein allgemeines Konstruktionsprinzip, das für alle Elemente der Benutzeroberfläche gilt.
Die Verwendung einfacher ikonischer Elemente wie Pfeile kann nicht nur ein weiteres kleines Detail sein, das Ihre Schaltflächen von ähnlichen UI-Elementen unterscheiden kann, sondern auch ein Gefühl für Aktion und ein geringes Entgegenkommen darüber, was passiert, wenn ein Benutzer klickt.
Beispielsweise kann ein Pfeil, der direkt hinter dem Text auf einer Schaltfläche steht, dem Benutzer ein Gefühl dafür vermitteln, dass er sich weiterbewegt oder die Seite verlässt. Ein nach unten zeigender Pfeil weist möglicherweise darauf hin, dass einige Inhalte im Folgenden schrittweise angezeigt werden, oder dass sich ein Menü öffnet.
Wenn Sie eine Benutzeroberfläche entwerfen, bei der ständig viele Aktionen und Funktionen angezeigt werden, kann es wichtig sein, eine visuelle Sprache mit Ihren Schaltflächen festzulegen, indem Sie primäre, sekundäre, tertiäre und möglicherweise mehr Stile festlegen.
Erwägen Sie, die stärkste und kühnste Farbe für Ihre primären Tasten zu reservieren, und verwenden Sie zunehmend weniger Stärke oder Sättigung, um die Bedeutung zu verringern. Berücksichtigen Sie neben Farbe und Farbton die Reduzierung der Größe, des Leerraums, der Textgröße und des Verschönerungsgrades, um das visuelle Gewicht von Tasten zu verringern, die nicht primär sind.
Dies ist wirklich ein Kinderspiel, wird aber oft am Ende des Designprozesses betrachtet. Durcharbeiten Sie immer die für Ihre Schaltflächen erforderlichen Kernzustände, um sicherzustellen, dass der Benutzer in seinem Kontext ausreichend Feedback erhält. Benutzer werden wahrscheinlich ein mentales Modell dafür haben, wie ein Knopf in der realen Welt funktioniert, wenn er ihn in seinen verschiedenen Zuständen verwendet. Einige einfache CSS-Anpassungen mit Schatten, Rahmen und Farbverläufen und Ähnlichem können dem Benutzer ein einfaches Feedback und einen Hauch von Augenweide geben!
Als Designer haben Sie alle Ihren eigenen Prozess, den Sie durchlaufen. Ich wette viel Zeit darauf, Ihren Kopf vom Bildschirm zurück zu bewegen, ihn leicht zu neigen, zu blinzeln und zu sagen: "Ja, das ist richtig!". Das ist natürlich Teil des Spaßes am Entwerfen, und talentierte Designer neigen dazu, es genau richtig zu machen, aber ich denke, es ist immer gut, ein paar interne Kommentare abzugeben, zu hinterfragen und die Entwurfsentscheidungen, die Sie treffen, zu begründen.
Durch das Wiederverwenden oder Anlehnen von vorgefertigten Stilen und Elementen der Benutzeroberfläche können Sie nichts anhaben. Sie können natürlich viel Zeit sparen. Es kann sogar vorkommen, dass jemand pixelgenau genau das geschaffen hat, wonach Sie gesucht haben, und es kostenlos anbietet. Ich glaube jedoch nicht, dass ein tieferes Verständnis des Designprozesses und des Handwerks hinter dem, was Sie erstellen und informieren, Ihren Schaden schaden kann.
Accentsconagua