Googles Material Design ist weiterhin ein beliebter Ansatz für zeitgenössisches Webdesign. Ein fast flacher Stil, der Satz von Prinzipien - ursprünglich als Markenrichtlinien für Google entworfen - beschreibt einen Ebenen-basierten Ansatz für das UI-Design.

Abgesehen von dem präskriptiven Farbschema, der sorgfältig neutralen Typografie und der Disney-artigen Animation ist das Floating-Button-Konzept von Material Design vielleicht der erkennbarste Aspekt des Stils. Der Floating Action Button scheint jedoch der gleichen Flugbahn zu folgen wie das Hamburger Menü; in wenigen Monaten vom Retter zum Paria.

Floating Action Buttons befinden sich getrennt vom Rest einer Benutzeroberfläche und sehen so aus, als ob sie über dem Inhalt schweben würden. Fast ausschließlich ein Kreis, sie sind eine angenehm minimale Form, die sich für Animation eignet. Floating Action Buttons sind die natürliche Entwicklung der Sticky-Header, die in den letzten Jahren populär waren. Der Sprung, den Google gemacht hat, um über den Sticky-Header hinauszugehen, bestand darin, den Floating-Action-Button vom Rest der Navigation zu entkoppeln. Dies wurde maßgeblich durch den Aufstieg des mobilen Internets beeinflusst. Wenn Sie den Floating-Action-Button unten rechts auf dem Bildschirm positionieren (wie es fast immer der Fall ist), ist es für Ihren Daumen einfach, ihn anzutippen.

Google Plus

Die Verwendung eines Floating Action Buttons in der Google+ Redesign ermutigt Sie, Inhalte zu posten, anstatt Ihnen zu helfen, sie zu konsumieren. Darüber hinaus ist es auf größeren Bildschirmen eine Unannehmlichkeit, sich diametral gegenüber dem Rest der Navigation zu befinden.

Da der Floating Action Button in Designs für Bildschirme, die größer als ein Telefon sind, Einzug hält, wird die bequeme Platzierung von unten rechts immer mehr zu einem Hindernis. Wie das Hamburger Menü zuvor, entdeckt der Floating Action Button, dass Mobile-First-Lösungen nicht immer auf den Desktop übertragen werden.

Ihre Form, Position und Farbe stellen sicher, dass sich Floating Action Buttons vom Rest einer Benutzeroberfläche abheben, hauptsächlich weil die aktuellen Trends für flaches, halb-flaches und Material Design alle anderen Elemente als reguläre Rechtecke formatieren. Es ist jedoch wichtig zu wissen, dass der Floating Action Button auf einer Seite visuell eindeutig ist und in einer Reihe verschiedener Projekte visuell erkennbar ist. Material Design ist in erster Linie eine Unternehmensmarke; Mit der Markenidentität, die so wichtig für den geschäftlichen Erfolg ist, ist es unwahrscheinlich, dass Google Google das Geschäft Ihres Kunden steigert.

vkplayer

Das VKPlayer-App verwendet einen Floating-Action-Button, um die Steuerelemente umzuschalten, was cool aussieht, aber wäre hier kein Play / Pause-Button die primäre Aktion?

Entsprechend der Material Design Spezifikation Floating Action Buttons werden als Abkürzung für die primäre Aktion auf einer Seite verwendet. Hinzufügen eines neuen Elements oder Initiieren einer neuen Suche. In diesem Szenario sind die Symbole für die Funktion relativ kanonisch und die Aktion, der die Schaltfläche zugeordnet ist, ist klar. Ein einzelnes Symbol repräsentiert jedoch häufig keine Funktion.

Was problematischer ist, ist die Reduzierung einer Website oder App auf eine einzelne Verwendung. Wie in Teo Yu Siangs hervorgehoben detaillierte Kritik am Floating Action Button die Verwendung von Floating-Action-Buttons setzt dem Benutzer die Absichten eines Designers auf; Sie werden ermutigt, eine E-Mail zu verfassen, wenn sie ihren Posteingang lesen möchten. Sie werden ermutigt, ein neues Foto zu machen, wenn sie ihre vergangenen Bilder überprüfen wollen.

Die unverankerte Aktionstaste soll eine primäre Aktion aus der Benutzeroberfläche herausziehen, aber wenn die Benutzeroberfläche eine primäre Aktion erfordert, warum ist sie nicht zielgerichteter?

Beagle

Das ansonsten ausgezeichnet Beegit verwendet eine unverankerte Aktionstaste, um schnellen Zugriff auf Hilfemeldungen und Neuigkeiten auf der Plattform zu ermöglichen. Ist das wirklich die Hauptfunktion einer Kompositionsseite?

Um einen gemeinsamen Designtruismus zu paraphrasieren, gibt es keine schlechten Designmuster, nur schlechte Designer. Wie der Hamburger Menü hat die Floating Action Button einen guten Anwendungsfall, aber dieser Anwendungsfall tritt selten auf; Wie das Hamburger Menü ist die Achillessehne des Floating Action Buttons häufig missbraucht. Das MD-Abschnitt auf schwebenden Schaltflächen legt fest, dass die den Floating-Action-Buttons zugeordneten Funktionen "wichtig und allgegenwärtig genug" sind. Sie werden jedoch häufiger als Stil verwendet, wenn die bessere Option eine fokussiertere Benutzeroberfläche wäre.

Wie der Hamburger Menü löst der Floating Action Button das Problem des Designers, nicht die der Benutzer.