it-swarm.com.de

Eine gute Möglichkeit, mehr Informationen anzuzeigen, wenn auf etwas geklickt wird

Nehmen wir für diese Frage an, dass ich eine Überwachungsplattform für ein Kraftwerk entwickle (das mache ich eigentlich nicht, aber die Situation ist ähnlich, daher sollte diese Annahme funktionieren).

Von Zeit zu Zeit extrahiert das System Informationen aus jedem Generatorsystem und jeder Generator verfügt über Kompartimente, die Informationen zurückgeben. Ich muss einen Weg finden, die letzten Extraktionszeiten schnell und einfach oben auf einer bestimmten Seite anzuzeigen. Diese Informationen sind an sich nicht sehr wichtig, aber sie dienen als kurzer Blick auf "Wir haben kürzlich Informationen erhalten" oder "Scheiße, letzte Nacht sind keine Informationen eingegangen".

Ich habe oben rechts auf der Seite eine Zeile, die ungefähr so ​​aussieht:

->Information extracts: Compartment 1: Good | Compartment 2: Good | Other: Good

Wenn Sie dann tatsächlich auf die Linie klicken, wird ein Div direkt darunter angezeigt. Es sieht also ein bisschen so aus:

->Information extracts: Compartment 1: Good | Compartment 2: Critical | Other: Good
  Generator1            Compartment 1: 10:05 | Compartment 2: 10:15 | Ax500: 10:25
  Generator2            Compartment 1: 11:05 | Compartment 2: 11:15 | Bx500: 11:25
  Generator3            Compartment 1: 15:05 | Compartment 2: 35 hours ago | Ax500: 15:25

Hinweis 1: Das -> ist ein Rechtspfeilbild, das sich beim Klicken auf das Ding in ein Abwärtspfeilbild ändert.

Anmerkung 2: Das Feld "Andere" ist weniger allgemein gehalten, als ich es mir vorgestellt habe. Es ist nur so, dass je nach Generatorsystem ein anderes System nach denselben Daten abgefragt wird und diese Unterscheidung etwas wichtig ist.

Hinweis 3: Ob etwas gut oder kritisch ist, hängt davon ab, ob einer der Generatoren einen Extrakt hatte, der vor zu langer Zeit aufgetreten ist. In diesem Fall wird Fach 2 als kritisch angezeigt, da der letzte Datenextrakt von Generator 3 vor 35 Stunden stattgefunden hat und den erwarteten Schwellenwert eines Extrakts überschritten hat, der alle 24 Stunden auftritt.

Leider ist es im Moment nur eine einfache HTML-Tabelle in einem Div. Es gibt kein echtes Styling. Für mein Leben kann ich nicht darüber nachdenken, wie ich das verbessern kann, aber ich weiß, dass es momentan nicht sehr schön aussieht. Es präsentiert die benötigten Daten und ist schön und einfach, aber theoretisch könnte es besser sein.

Ich dachte darüber nach, den td-Boxen vielleicht etwas Styling hinzuzufügen und einige der Felder besser hervorzuheben. So können Sie beispielsweise die Generatornamen (z. B. Generator 1) auf der Seite oder außerhalb der Seite anzeigen und ähnliche Aktionen wie zu den angegebenen Zeiten ausführen. Leider sieht es so aus, als wäre es sehr beschäftigt.

Habt ihr Vorschläge zum Styling, das ich verwenden könnte?

Oder wäre es besser, die Tabelle ganz wegzulassen und eine andere Art der Darstellung der Daten zu finden? Ich und meine Teamkollegen haben eine Weile darüber nachgedacht und wir können uns keinen besseren Weg vorstellen. Was denkt ihr?

1
zerminator

Wenn Sie darüber nachdenken, wie Sie in einer solchen Situation Dinge entwerfen können, brechen Sie aus den HTML- oder HTML-Tags aus und zeichnen Sie einfach auf ein Stück Papier :)

Was ich getan habe:

  • Wiederholen Sie die Wörter so wenig wie möglich
  • Markieren Sie mit der Größe, was wichtiger ist
  • Trennen Sie die obere Reihe von den Unterreihen

Dies ist, was daraus resultierte, als ich das tat:

enter image description here

Zweifellos gibt es 100 weitere Möglichkeiten, dies zu tun, und ein visueller Designer wird großartige Arbeit leisten, aber dies war nur eine kurze Skizze.

0
JeroenEijkhof