Machen Sie den Leuten klar, dass sie in einem flachen Design auf eine Schaltfläche klicken können

Das Problem ist, dass es nicht flach genug ist

Sind sie Symbole oder Schaltflächen? Dies ist ein häufiges Problem bei flachem Design (siehe andere Antworten), aber eine mögliche Lösung, die ich hier noch nicht gesehen habe, ist entfernen Informationen, bis die einzig praktikable Option das Klicken ist. Denken Sie Kacheln .

... und an dieser Stelle sollte auch klar werden, dass </> war nie ein passendes Symbol.

ich dachte an so etwas wie das Zeigen der ersten Fähigkeit und ließ den Benutzer selbst herausfinden, dass die anderen auch anklickbar/abtippbar sind

(Entschuldigung, ich habe nicht viel Zeit, um dies zu tun, aber es kann helfen)

^{bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups}

Wie wäre es mit einem visuellen Hinweis, an den Benutzer am wahrscheinlichsten gewöhnt sind: einer Unterstreichung? Unten sehen Sie ein Beispiel mit einer durchgehenden und einer gestrichelten Unterstreichung.

Auf einem mobilen Gerät nutzt der aktuelle Designtrend dies. Benutzer haben sich mit der Touch-Methode vertraut gemacht, um weitere Informationen zu erhalten, ohne dass sie ausdrücklich dazu aufgefordert werden müssen.

Außerdem ist ein "Zeiger" auf einem mobilen Gerät redundant, da es nie ein anderes Eingabegerät als Ihre Finger gibt.

Behalten Sie die Einfachheit und Eleganz Ihres Designs. Der einzige Vorschlag wäre, vielleicht den Kontrast zwischen den beiden Blautönen zu erhöhen.

materialdesign ist gut, aber sie sind nicht perfekt flach. Ich empfehle Ihnen dies, meinen idealen flachen Knopf 

p/s: Wenn Sie möchten, dass die Leute etwas für eine Schaltfläche halten, müssen Sie ihnen "Beschriftung" und "Symbol" geben. Mit diesen beiden Elementen wissen die meisten Benutzer: "Ah, es gibt eine Schaltfläche, klicken wir."

Einige Vorschläge:

1. Machen Sie die Beschriftung visuell zu einem Teil der Schaltfläche

• Beschriftungen sind normalerweise Teil einer Schaltfläche
  
  

2. Füge einen hellen Rand hinzu (optional)

• Highlights ohne notwendigerweise Tiefe hinzuzufügen
  
  

3. Gruppieren Sie die Tasten bequem

• Fühlen Sie sich wie eine Gruppe von Schaltflächen, die alle gleich wichtig sind
  
  

4. Verwenden Sie ein Bolder Font Weight

• Die Symbole sind ziemlich klobig und imo balancieren nicht gut mit einer hellen Schrift
  
  

Beispiele für nicht gedrückte/gedrückte Tasten:

(

Ich stimme sowohl Long als auch DesignerAnalyst zu, dass ein bisschen Styling sie mehr als Schaltflächen erscheinen lässt.

Obwohl mir die Symbole in Ihrer bearbeiteten Version gefallen, würde ich empfehlen, den Text unter dem Symbol hinzuzufügen, für diejenigen, die möglicherweise nicht wissen, was das Symbol bedeutet.

Symbole sind großartig, wenn ihre Bedeutung offensichtlich ist, aber ich programmiere jeden Tag in JQuery und Javascript und erkenne die Symbole nicht automatisch.

Sie können auch einen textlichen Hinweis geben

Sie könnten "mehr Informationen" in etwas Spezifischeres ändern

Es gibt viele Antworten, aber ich glaube, noch keine davon hat das flache Design auf den Punkt gebracht. Das Problem beim flachen Design besteht darin, dass man Dinge nicht wie einen Knopf aussehen lässt. Die ganze Idee ist, dass die Metapher der 3D-Schaltfläche altmodisch wird. Ich denke, es werden jetzt viele Kinder geboren, die einen virtuellen Knopf auf einem Touchscreen drücken, bevor sie einen konkreten Knopf drücken.

Metaphern sind visuell verrauscht. Die Herausforderung des flachen Designs besteht darin, die Metaphern zu entfernen und gleichzeitig das Design nutzbar zu halten.

Wenn Sie also ein angemessenes, modernes, flaches Design schaffen möchten, müssen Sie sicherstellen, dass Ihre Clickables anklickbar aussehen, ohne dass sie wie Schaltflächen aussehen. Die Hauptregel/Konvention lautet, dass anklickbare Elemente die größte Aufmerksamkeit erfordern sollten. Wir haben die folgenden Werkzeuge, um dies zu erreichen:

• Kontrast verwenden Ihr Hintergrund hat jetzt einen größeren Kontrast zum Weiß der Schaltfläche als zur Farbe der Schaltfläche. Dies ist der Hauptgrund, warum Ihr Design nicht anklickbar aussieht. Wechseln Sie die Hintergrund- und Tastenfarben.
• Verwenden Sie helle Primärfarben : Siehe oben.
• Leerzeichen verwenden : Stellen Sie sicher, dass um die Schaltflächensymbole herum genügend Leerzeichen vorhanden sind. Je größer die Ränder, desto mehr Aufmerksamkeit erhält das Element. Besonders wenn diese Ränder mit einer hellen Farbe gefüllt sind, bildet dies einen guten Kontrast zu den darin enthaltenen Elementen.
• Fettdruck verwenden : Weißer Text auf dunklem Hintergrund sollte ohnehin fett sein, auf einer Schaltfläche jedoch doppelt.
• Fügen Sie den Text in die Schaltfläche ein : Das farbige Feld sollte alles enthalten, was mit dieser Klickoption zu tun hat. Fügen Sie den Text darunter ein, und Sie fordern den Benutzer auf, den Text der Schaltfläche zuzuordnen.
• Rundere Ecken : Einige Puristen mit flachem Design (BBC, Microsoft) werden sich für harte Ecken entscheiden, aber wenn Sie nicht bereit sind, den ganzen Weg zu gehen, die Eine abgerundete Ecke ist eine sehr starke Konvention für die Klickbarkeit.

Hier ist mein Redesign:

(

Möglicherweise stellen Sie fest, dass es immer noch nicht so anklickbar aussieht. Warum nicht? Ich denke, das liegt daran, dass sechs Tasten keine sehr konventionelle Art sind, eine Liste von Fähigkeiten darzustellen. Der Benutzer hat zu diesem Zeitpunkt einfach keinen klaren Ort. Tatsächlich ist es ziemlich selten, dass sechs Tasten überhaupt nebeneinander stehen. Wenn Sie diese Art von Schaltfläche erstellen, ist dies normalerweise das wichtigste Element auf der Seite. Ich denke, deshalb sieht Ihr Design wie eine Liste von Symbolen aus.

Um das Problem wirklich auf den Punkt zu bringen, sollten Sie sich Ihr Gesamtdesign noch einmal ansehen. Finden Sie heraus, was der Benutzer an dieser Stelle tun möchte. Vielleicht kann Ihnen so etwas wie inhaltsbasierte Navigation helfen.

Das Material Design-Konzept kann Ihnen wahrscheinlich helfen.

Sein Prinzip des Layouts durch Prioritätsaktion, dessen Hauptverhalten darin besteht, Schatten zwischen den Layouts zu haben, um dem Benutzer zu zeigen, was über was liegt, um das Objekt zu unterscheiden und die Erschwinglichkeit zu erhöhen

http://www.google.com/design/spec/material-design/introduction.html

Fügen Sie also wenig Schatten zu Ihrer Schaltfläche hinzu. Make ist interaktiv, indem Sie den Schatten beim Drücken der Aktion ausblenden. Fügen Sie eine Rollover-Antwort hinzu, wenn der Computer angezeigt wird und Sie Ihren Benutzern mehr helfen.

Halte sie einfach, klug

K.E.S.S.
Sie als Entwickler haben die Bühne bereitet; aber der Benutzer ist der wahre Darsteller. Zwei verschiedene Fähigkeiten. Sie ergänzen sich und harmonieren.
Ihre App hat eine Reihe von Erwartungen ~> wie ein Online-Lebenslauf implizit diese Art der Interaktion erfordert. Klicken und so weiter. Ihr Benutzer wird verstehen, was Sie als typisch wünschen.

Hier ist mein zusätzliches Feedback zu Ihrer Frage:

(

• Behalten Sie explizite Beschriftungen mit Ihren Schaltflächensymbolen bei.
• Lassen Sie schwebende Knöpfe wachsen. Dadurch wird überprüft, was der Benutzer intuitiv abgeleitet hat.

Viel Glück!

Eine Option, die ich verwendet habe (abhängig von der Größe dieser Symbole), ist ein kleines Bild einer Maus (im Grunde ein vertikal erweitertes Oval mit einer Unterteilung oben für die beiden Schaltflächen) innerhalb jedes Bildsymbols.

Ihr erstes Bild fühlt sich wie eine Galerie an: Jedes Symbol hat eine Beschriftung (und es ist nicht klar, dass Bilder anklickbar sind).

Sie könnten einfach versuchen, die Beschriftungen innerhalb der Schaltflächen zu verschieben (selbst mit Ihrem ersten Satz von Symbolen sollte es ausreichen). Auf diese Weise sollte es sich eher wie ein Knopf anfühlen.

Nach dem erneuten Lesen scheint es zu @ Dom-Sätzen zu gehören