Hier ist eine Frage, die mir vor langer Zeit gestellt wurde, als ich als UI-Designer anfing, und ich lange nach dem Warum und Wie gesucht hatte!
Heute finden wir Schaltflächen in verschiedenen Größen, Farben und Stilen auf Oberflächen.
Die Form der Schaltflächen ist der Anpassung einer Website oder einer Anwendung nicht entgangen.
Beim Navigieren stellen wir uns eigentlich nicht die Frage, welche Form ein Button haben kann, solange er funktioniert und uns auf die gewünschte Seite oder Aktion führt.
Und doch ist es eine Immobilie, die viel Kraft hat und einer Charter Ton und Persönlichkeit verleihen kann.
Ich teile heute mit Ihnen die Schlüssel, um zu definieren, welcher Grenzradius gemäß der von Ihrer Dienstleistung / Ihrem Produkt übermittelten Botschaft angenommen wurde.
Grenzradius, kesako?
Bevor wir fortfahren, definieren wir gemeinsam, was der Grenzradius ist.
Es ist eine Eigenschaft in CSS, die es ermöglicht, den Winkel der Ecken eines Elements zu definieren.
- Jeder Winkel kann unterschiedlich definiert werden, um eine ungleichmäßige Form zu erzeugen, oder jeder Winkel kann denselben Wert haben.
- Wir finden Border-Radius auf verschiedenen Elementen einer Benutzeroberfläche: einem Hintergrund, einer Karte, einem Button usw.
Die Wahl des Grenzradius hat einen starken Einfluss auf das Gesamtgefühl der Benutzeroberfläche. Es ist daher wichtig, die Eigenschaften zu verstehen, die jeder bietet.
#1 Radius bei 0px
Die klassische Option, die Seriosität und Stabilität in eine Schnittstelle bringt.
Wenn eine Marke es verwendet, möchte sie Ihnen ein Gefühl der Sicherheit geben und Ihnen die Professionalität ihrer Dienstleistung oder ihres Produkts zeigen.
Diese Schaltflächen befinden sich im rechten Winkel auf Ministerial- und E-Commerce-Websites.
- Abteilungsstandorte: Engagement, Seriosität
- E-Commerce-Websites: sichere ZahlungDie geometrische Form hält die Elemente ausgerichtet und organisiert, um ein Gleichgewicht zwischen allen aufrechtzuerhalten. Dieses Gleichgewicht gibt dem Benutzer Vertrauen.
#2 Radius bei 3 – 4px
Die am häufigsten gesehene und harmlose Option, wenn es um UI-Design geht.
In der Tat erlaubt es, einen professionellen Geist zu haben, ohne streng zu sein.
Die Leichtigkeit des Randradius ermöglicht es, näher an den Benutzern zu sein und eine sogenannte benutzerfreundliche Atmosphäre zu schaffen.
Wir löschen die eckigen Seiten, um kleine Biegungen zu schaffen, die Flexibilität bringen und gleichzeitig das Gleichgewicht zwischen den verschiedenen Elementen aufrechterhalten.
Dies ist eine Option, die Sie in vielen Arten von Websites finden.
#3 Radius bei 6 – 12px
Wir können sagen, dass diese Option ungewöhnlich ist, aber wir finden sie immer häufiger in den grafischen Chartas von Websites, die sich auf neue Technologien beziehen.
Es ist selten und gilt als innovativ, obwohl seine Verwendung gefährlich ist.
Tatsächlich kann es im Gegensatz zu den vorherigen Optionen sowohl für den Benutzer als auch für den UI-Designer unangenehm sein!
- Für einen Benutzer kann es als kindisch oder als Entwicklungsfehler empfunden werden.
- Für einen UI-Designer kann es ein Ungleichgewicht und eine Inkonsistenz in einer Benutzeroberfläche schaffen, Sie müssen also vorsichtig mit seiner Verwendung sein, aber es nicht aus all den guten Gründen beiseite legen!
#4 Vollständig runde Ecken
Um alle Optionen zu umgehen, müssen wir auch die vollständige Rundungsoption erwähnen: die Runden-Schaltfläche!
Diese Option ist in Schnittstellen sehr verbreitet, da sie eine benutzerfreundliche und kreative Atmosphäre schafft.
Das Auge wird von Natur aus von Rundungen angezogen, was das Lesen und Erkennen von Knöpfen mit abgerundeten Ecken erleichtert.
In der Tat wird auf einer Oberfläche, die von geraden Linien und parallelen Strukturen umgeben ist, die abgerundete Schaltfläche hervorstechen und grafisch hervorgehoben.
Der negative Punkt dieser Materialisierung ist die Komplexität, sie für alle Komponenten zu verwenden. Es funktioniert sehr gut für Schaltflächen, sollte aber beispielsweise für Formularfelder reserviert werden.
Es sollte daher sparsam und in Kombination mit einer der anderen Möglichkeiten zum Ausgleich eingesetzt werden.
Diese Option wird aufgrund all dieser Vorteile und der Dynamik, die sie mit sich bringt, für viele Arten von Websites verwendet.
So sehr, dass es oft in Kommunikationselementen wie dem „Play“-Button eines Videos oder den Teilen-Buttons von sozialen Netzwerken zu finden ist.
# Abschließend
Es gibt also keine richtige oder falsche Antwort, wenn es um die Auswahl des Grenzradius innerhalb Ihrer Schnittstelle geht.
Das Ziel, das Sie im Auge behalten müssen, ist die Beibehaltung der Konsistenz Ihrer Entscheidungen, um während des gesamten Kurses Konsistenz zu haben (Kohärenz des Ganzen, der Charta, der Marken- und Grafikstrategie).
Diese grafische Konsistenz verleiht Ihren Schnittstellen einen besonderen Ton, um Ihre Botschaft und Ihr Produkt oder Ihre Dienstleistung hervorzuheben.
Bildquelle: https://undraw.co/illustrations
Alexa CUELLAR UX-UI-Designer @UX-Republic
