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

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:

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

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:

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.

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

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.

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.