Wie löst man ein Wiederholungsproblem in einem Layout?

AKTUALISIERT: ProKeys aktualisiert mit neuem Layout ist verfügbar. Sie können es überprüfen. Danke schön!

Ich habe ProKeys kürzlich neu gestaltet, um die platzraubenden Snippets zu minimieren. Ich habe das geändert:

Alte Anordnung

alte Anordnung(ignorieren Sie die Pfeile und alles; aber beachten Sie, dass nur zwei Ausschnitte gleichzeitig angezeigt werden)

dazu:

Neue Gestaltung:

neue Gestaltung

Jetzt spart es viel Platz. Viele weitere Ausschnitte werden im selben Bereich angezeigt. Der Benutzer kann das gesamte Snippet anzeigen, indem er auf die Schaltfläche "Anzeigen" klickt. Aber wenn Sie bemerken würden, gibt es viele Wiederholungen der drei Schaltflächen – „Anzeigen“, „Bearbeiten“ und „Löschen“ – was bei gleichzeitiger Betrachtung seltsam aussieht.

Daher möchte ich wissen, ob es eine Möglichkeit gibt, wie ich dies verbessern kann, um die Wiederholung zu vermeiden.

Außerdem kann ich den Hover-Effekt nicht verwenden, da Personen auf einem Laptop ohne Maus möglicherweise Probleme haben.

AKTUALISIEREN:

  1. Ich habe mich für den Ansatz eines Pfeils nach unten entschieden, der die Optionen auf Klick offenbaren soll. Ich werde das fertige Produkt mit euch allen teilen, wenn es fertig ist.

  2. Auch der Ansatz von Mass Actions by Ilan ist sehr schön. Aber ich denke, es wäre schwierig zu implementieren. Es ist auf jeden Fall immer noch eine gute Alternative.

  3. Das endgültige Design sieht so aus: Beim Klicken auf den Abwärtspfeil wird das Snippet vollständig angezeigt, und nur die Schaltflächen zum Bearbeiten und Löschen werden angezeigt, während der Abwärtspfeil zu einem Aufwärtspfeil wird. Ein erneuter Klick darauf kehrt die Aktion um. Ich denke, das wäre einfach und macht mehr Spaß!

  4. Danke an alle Leute die geantwortet haben. Ihr Einsatz war wirklich hilfreich!

Danke euch allen!

Ich mag die Art und Weise, wie die Dropbox-Website es tut. Es funktioniert ziemlich genau wie die Dateimanager: Explorer (Windows) und Finder (Mac) machen es. Ein Rechtsklick gibt Ihnen eine Liste von Funktionen, wie zum Beispiel: delete, rename, move, etc.... Sie können mehrere Elemente mit Strg oder Cmd und Shift-Klick auswählen, um Massenoperationen durchzuführen. Und wenn Sie mehrere Elemente auswählen, wird eine Symbolleiste über der Liste oder oben im Ansichtsfenster angezeigt. Andere ähnliche Websites verwenden die Pfeilmethode anstelle des Rechtsklicks oder zusätzlich dazu und die Checkbox-Methode stattdessen oder Strg oder cmd und Umschaltauswahl oder zusätzlich dazu.
@Joonas Das sind nützliche Informationen, die Sie über Dropbox geteilt haben. Danke schön! Ich werde es sicher implementieren, wenn ich das nächste Mal etwas Ähnliches mache!

Antworten (5)

Spitballing hier, weil ich deine Grenzen nicht kenne.

Sie könnten einige Symbole einführen (vielleicht auch hier, um die Farbe auf die Schaltfläche fallen zu lassen. Sie könnten auch alle Schaltflächen loswerden und eine Lupe verwenden.).

Geben Sie hier die Bildbeschreibung ein

Oder Sie können die Farbe auf die Schaltflächen fallen lassen und sie beim Hover oder Active hinzufügen (Hover sollte nur bei Touch-Geräten ein Problem sein, Finger auf dem Bildschirm).

Geben Sie hier die Bildbeschreibung ein

BEARBEITEN:

Wenn Sie ein Symbol hinzufügen möchten, das ein Optionsmenü öffnet, wäre dies das Symbol, das ich verwenden würde (Meine einzige Sorge wäre, dass die Leute es mit einem Drag-and-Drop-System verwechseln könnten, da es sich um eine Liste handelt. Aber unabhängig von diesem Symbol wird für Schubladen und Dropdown-Listen in Mobile und Desktop verwendet).

Ich würde die Verwendung einer Dropdown-Liste empfehlen, ist aber Ihnen überlassen.

Sie können auch einen nach unten gerichteten "Pfeil" oder ein nach unten gerichtetes Dreieck verwenden.

Geben Sie hier die Bildbeschreibung ein

Ich mag die Idee von Symbolen. Außerdem habe ich aus Ihrem Beitrag eine Idee, ein kleines Symbol auf der rechten Seite zu haben, das beim Anklicken die drei Schaltflächen ins Blickfeld schieben würde. Aber bei dieser Idee weiß ich nicht, wie dieses Symbol aussehen würde, und wie würde der Benutzer die Schaltflächen wieder aus dem Blickfeld schieben? Ich bin sehr neu im Entwerfen, also würde ich Ihre Hilfe brauchen. Danke schön!

Vielleicht könnten Sie am Ende jedes Eintrags ein kleines Dropdown-Menü einfügen, das ihn in die Vollansicht erweitert, wenn Sie darauf klicken (ähnlich wie beim Minimieren/Maximieren). Die Bearbeiten- und Löschen-Schaltflächen könnten dann zu dieser erweiterten Ansicht jedes Elements hinzugefügt werden.

Gute Idee! Aber was ist, wenn der Benutzer das erweiterte Snippet dann nicht erweitern möchte? Wie würde ich damit umgehen? Und wie sollte das Dropdown-Symbol aussehen? Es tut mir leid, aber ich bin sehr neu in der Gestaltung, sehen Sie.
Vielleicht wie der Strich eines umgedrehten Dreiecks, bei dem die Oberseite gelöscht ist. Würde irgendwie so aussehen wie die Funktion y=abs(x) von -1 bis 1

Hier gibt es viele Möglichkeiten. Was am besten funktioniert, hängt von Ihren jeweiligen Benutzern ab. Wenn das Ziel lediglich darin besteht, die visuelle Unordnung zu minimieren, würde ich Folgendes vorschlagen:

Statische Ansicht:

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet

----------------------------------------------------

Beim Hovern eines Elements (in diesem Fall das zweite:

----------------------------------------------------

Your Snippet

----------------------------------------------------

Your Snippet                       / Edit   X Delete
------------                       ------   --------
----------------------------------------------------

Your Snippet

----------------------------------------------------

Dies würde natürlich nur für ein Nicht-Touch-Gerät funktionieren. Wenn das Ziel darin besteht, auch Touch-Geräte zu unterstützen (was ein gutes Ziel ist), sollten Sie sich nicht vollständig auf Hover verlassen. Etwas zu bedenken.

Eine weitere zu berücksichtigende Option besteht darin, zu überlegen, wie wichtig es ist, dass all diese Optionen immer auf dieser Seite angezeigt werden. Müssen Benutzer auf diesem Bildschirm viel bearbeiten und löschen? Wenn nicht, verschieben Sie vielleicht EDIT und DELETE stattdessen auf die VIEW-Seite.

Dies ist ein sehr häufiges Problem, das normalerweise durch "MASS ACTIONS" gelöst wird - Sie stellen dem Benutzer Radio-Buttons und nur eine Zeile mit Massenaktionen zur Verfügung, sehen Sie sich das Bild an - nachdem der Benutzer die Snippets ausgewählt hat, drückt er/sie auf die gewünschten Aktionen. Sie sollten auch eine Option für Massenaktionen von Ansichtsoptionen bereitstellen.

Geben Sie hier die Bildbeschreibung ein

Das soll auf jeden Fall ein netter Ansatz sein. Danke!

Andere Option

Hier ist ein Modell des vollständigen Dropdowns, das im Kommentar unten erwähnt wird. (Das ursprüngliche Button-Layout wurde gelöscht.) Da sich das Dropdown in diesem Beispiel über einen größeren Bereich erstreckt, kann es die 3 Buttons sowie zusätzliche Informationen enthalten. Es kann entsprechend gestaltet werden (Farben, Schaltflächen, Stile, Ausrichtung ...), aber der Trick besteht darin, dass das große Dropdown-Menü nicht die Dropdown-Schaltflächensymbole des anderen Titels verdeckt.

Geben Sie hier die Bildbeschreibung ein

Bei einem Dropdown-Symbol handelt es sich normalerweise um ein Quadrat mit 3 horizontalen Linien, aber ein nach unten gerichtetes Dreieck funktioniert auch. Welche Technologie für ein Dropdown verwendet werden soll, ist ein langwieriges Thema. Lösungen umfassen die Verwendung von JavaScript, jQuery oder CSS. Wenn Sie sich keine Sorgen um Benutzer machen, die JavaScript deaktiviert haben, ist vielleicht jQuery oder JavaScript der richtige Weg. Hier ist ein jQuery-Beispiel: https://coderwall.com/p/3uwgga .

Danke für Ihre Antwort! Aber eigentlich wollte ich jede Wiederholung vermeiden. Und so wollte ich vermeiden, die Knöpfe immer wieder zu benutzen.
Gern geschehen, und Sie haben eine sehr schöne App. Es sieht so aus, als hätte BurninLemons ein paar neue Schaltflächen-Dropdown-Modelle hinzugefügt, die für Sie funktionieren könnten. DA01 hat auch eine gute Idee, indem die gesamte Zeile mehr Informationen anzeigt, wenn sie berührt wird. Es könnte sich über die Breite der Seite erstrecken und alle erforderlichen Informationen anzeigen. Ich bin mir ziemlich sicher, dass Sie JavaScript oder jQuery für die Dropdown-Funktionalität verwenden möchten.
Dein neuer Weg ist wirklich schön. Ich werde eine ähnliche Funktion implementieren. Danke schön!
Ich verwende diese Technik tatsächlich, um ein Desktop-Megamenü in ein Handheld-Menü zu konvertieren, und es funktioniert gut. Einige Dinge, die Sie beachten sollten, sind, wenn die Liste länger als das Handheld-Ansichtsfenster ist, Sie möchten, dass nur das Pfeilsymbol das Dropdown-Menü auslöst, nicht die gesamte Snippit-Zeile. Wenn die Zeile der Auslöser ist, können die Benutzer versehentlich ein Dropdown auslösen, wenn sie zu langsam scrollen. Der andere Punkt ist, dass das Dropdown die anderen Pfeile nicht abdeckt. Außerdem ändern sich bei Berührung die Zeile und das Dropdown-Menü in übereinstimmende Hintergrundfarben, um die Zuordnung anzuzeigen. Vielen Dank für das positive Feedback und Follow-up, es wird geschätzt :)
Wie löst man ein Wiederholungsproblem in einem Layout?
AntwortenHierDatenschutz-Bestimmungen1y, 0v