Gestalten Sie saubere, flache Tasten, damit sie sich leisten können und gut aussehen.

10

Ich habe kürzlich ein winziges CSS-Framework gestartet. ( http://mincss.com, wenn jemand interessiert ist) Ich habe schnell ein erstes Design für einige Schaltflächen erstellt. Nachdem ich um Feedback zu UX StackExchange gebeten hatte (und viele gute Rückmeldungen erhalten hatte), wurde mir empfohlen, hierher zu kommen, um zusätzliche Ratschläge zur Verbesserung zu erhalten.

So sehen sie jetzt nach dem Feedback von UXStackExchange aus. Ich entfernte den schwarzen Rand, fügte einen 3px "Schatten" hinzu und entfernte die 1px Abschrägung:

Geben Sie hier die Bildbeschreibung ein

Ich werde einen Flat-Design-Look anstreben.

Ich habe noch 3 Fragen:

  • Zeigen diese Schaltflächen genügend Erschwinglichkeit? (Dies scheint ein Problem mit flachem Design zu sein)
  • Würden Sie vorschlagen, einen kleinen Farbverlauf hinzuzufügen?
  • Sehen sie gut aus? (subjektiv weiß ich, aber ich kann mir keinen besseren Weg vorstellen, dies zu fragen)

Ich freue mich über jede Rückmeldung zu diesen Schaltflächen (und werde sie wahrscheinlich nutzen).

Owen Versteeg
quelle
Wenn Sie den Schatten behalten möchten, sollten Sie ihn zu einem echten Alpha-Schatten machen. So etwas wie RGBA (0,0,0, .2) von wenn nicht Alpha, betrachten Sie ein viel helleres Grau.
DA01

Antworten:

9

Ich denke, ein sehr subtiler Farbverlauf wird definitiv die Ästhetik der Tasten verbessern. Da der Windows 8 "Metro" -Stil ein großer Befürworter dieses Stils ist, werde ich dies als Beispiel verwenden:

Apps für Windows 8

Auf den ersten Blick sehen die "Kacheln" wie eine flache Farbe aus, aber wenn Sie genau hinschauen, gibt es einen sehr leichten Farbverlauf von links nach rechts. Es ist bei einigen auffälliger als bei anderen, aber alle haben es. Wie Yisela sagte, soll dieser Gradient kaum wahrnehmbar und fast unbewusst sein.

JohnB
quelle
2
Hier ist vorher: i.imgur.com/LVVVWd8.png und hier ist nachher: i.imgur.com/jDb07Y2.png Was denkst du? (Dies ist Hintergrund: -webkit-Gradient (linear, linke Mitte, rechte Mitte, von (rgb (44, 175, 73)) bis (rgb (53, 206, 86)))
Owen Versteeg
7

Wie Sie bereits erwähnt haben, müssen Sie beim Entwerfen von flachen Tasten einige Dinge im Auge behalten. Das erste ist, würde ich sagen: Sieht es aus wie ein Knopf?

Dies hängt nicht unbedingt nur von der Schaltfläche ab, sondern auch von den übrigen Elementen Ihrer Benutzeroberfläche. Wenn Sie flache Tasten verwenden, würde ich empfehlen, dass Sie überall ähnliche Formen / Stile vermeiden. Sie müssen ein visuelles Vokabular pflegen, damit die Benutzer diese Elemente sofort als Schaltflächen und nicht als etwas anderes erkennen können.

Schatten sind dafür gut, weil sie einen Eindruck von Volumen vermitteln. Daher sind sie leichter zu sehen. Außerdem sind wir an Schaltflächen gewöhnt, die diesen Effekt haben. Ich würde jedoch in Betracht ziehen, eine Farbe zu verwenden, die der Farbe der Schaltfläche ähnlich ist. Verwenden Sie beispielsweise anstelle von Schwarz für die rote Schaltfläche ein Rot mit einer Deckkraft von 50%. Eine weitere Option, um Schaltflächen deutlicher zu machen, ist das Hinzufügen eines Symbols (weiß, durchgehend).

Ich würde sehr vorsichtig mit Farbverläufen sein . Nicht weil sie schlecht sind, sondern weil sie im aktuellen supereinfachen flachen Trend nicht so gut passen. Besonders wenn die Farben oder Schattierungen, die Sie verwenden, sehr unterschiedlich sind. Ein kleiner Farbverlauf kann sehr schön aussehen, muss aber winzig und kaum wahrnehmbar sein.

Kurz gesagt, ich mag die Art, wie sie aussehen. Ich würde nur die Schattenfarbe in etwas Helleres ändern und vielleicht auch den Vordergrundtext heller machen, wahrscheinlich Weiß. Die Schrift ist schön und Sie verwenden eine gute Polsterung, also gute Arbeit! Ich sehe, dass Sie sie auf der Website verwenden, aber darunter befinden sich eine Reihe von Benachrichtigungen in Pastellfarben, die tatsächlich ein bisschen ähnlich aussehen. Ich würde ihren Stil überdenken, da sie etwas verwirrend sein können, und ich würde versuchen, auf der gesamten Website dieselben Farben zu verwenden (alle Pastelle oder alle Kontraste).

Yisela
quelle
Ich habe Ihre Vorstellung von Farbschatten aufgenommen: i.imgur.com/525NqBJ.png Ich stimme zu, dass jeder Farbverlauf winzig sein muss; Ich glaube nicht, dass ich eins hinzufügen werde. Was halten Sie von abgerundeten Ecken auf den Knöpfen? Wie sollte ich die Benachrichtigungen ändern? Vielen Dank!
Owen Versteeg
@OwenVersteeg Sieht gut aus! Ich mag sie. Runde Ecken sehen im Allgemeinen auch gut aus. Möglicherweise müssen Sie sie auch anderen Elementen hinzufügen (Eingaben, vielleicht?). Wie wäre es mit einem 1px-Rand mit einem dunkleren Farbton derselben Farbe? So etwas wie diese
Yisela
2

Obwohl ich es respektieren kann, solche minimalen Schaltflächen zu erstellen, müssen Sie wirklich überlegen, ob / wie sie auf verschiedenen Websites im Internet angewendet werden können, während Sie ein Framework erstellen. Wenn Sie Schaltflächen bereitstellen, müssen Sie sicherstellen, dass Sie fast alles bereitstellen, was andere Benutzer möglicherweise verwenden, z. B. Tabellen, Formulare usw. (an denen Sie sicher noch arbeiten).

Schauen Sie sich Bootstrap an, falls Sie dies noch nicht getan haben. Bootstrap ist ein wunderbar einfaches und sauberes CSS-Framework, das leicht angepasst oder in eine andere Website integriert werden kann und Ihnen möglicherweise einige Ideen gibt.

Was diese eigentlichen Schaltflächen angeht, würde ich mit einem Rahmen herumspielen, da dies die Kapselung der Komponente erleichtert und ein Rahmen für viele Schaltflächen ziemlich häufig ist. Ich habe die Website überprüft und ich mag die Hover / Click-Zustände und ich denke, Sie haben damit gut abgeschnitten.

Wenn Sie Farbverläufe einführen möchten, seien Sie konsistent und stellen Sie sicher, dass Sie sie auch für andere Elemente verwenden. Andernfalls haben Sie konkurrierende Tiefen, die nur ablenken.

Hanna
quelle
Ich habe Bootstrap gesehen (ziemlich schwer, es nicht zu tun) und ich habe schon einige Websites damit gemacht. Mein Problem mit Bootstrap ist, dass es sich um ein riesiges Framework handelt - mehrere zehn Kilobyte - und es ist heutzutage sehr verbreitet. Ich habe Formulare (weiter unten auf der Seite) sowie Tabellen erstellt. Als ich auf UX StackExchange fragte, sagten die meisten Leute, dass sie interessanterweise die Grenze verlassen sollten - was ich auch tat. Ich glaube nicht, dass ich Farbverläufe einführen werde. Wie gefallen Ihnen diese Grenzen? i.imgur.com/OlOy5pN.png
Owen Versteeg
0

Die Knöpfe sehen gut aus, aber die Art von Knöpfen, die im allgemeinen flachen Stil Erschwinglichkeit und Gefühl zeigen, ist einmal dort, wo der Schattenteil platziert ist, ein kleiner Streifen am unteren Rand des Hauptelements (Knopf) und meistens ein dunklerer Farbton des Knopffarbe.

Harish Chouhan
quelle