it-swarm.com.de

Erstellen einer gemeinsam genutzten Musterbibliothek

Ich arbeite in einem kleinen, aber wachsenden Team von UX-Designern, die eine Reihe von Webanwendungen entwickeln. Es ist offensichtlich geworden, dass wir von einer gemeinsamen Musterbibliothek profitieren würden, sind uns aber nicht sicher, wie wir anfangen sollen oder welches Tool wir verwenden sollen.

Wir möchten etwas, an dem wir zusammenarbeiten und das wir auch mit visuellen Designern und Entwicklern teilen können. Daher wäre es hilfreich, Details wie Notizen, Grafiken und Codeausschnitte hinzuzufügen.

Hat jemand Erfahrung mit dem Aufbau einer solchen Bibliothek? Haben Sie Tipps oder Empfehlungen?

6
Khal Weir

Wir haben unsere eigene Wiki-basierte Musterbibliothek zusammengestellt, die Screenshots, Beschreibungen von Anwendungsfällen und Hinweise zu Variationen des Elements/Widgets enthält. Die Absicht der Bibliothek war es, standardisierte Designs für die verschiedenen Anwendungen durchzusetzen. In dieser Hinsicht war es nur begrenzt erfolgreich. Ich schreibe dies zu:

  • Zu viele Elemente: Wir haben versucht, jedes Element zu definieren, das wir in den Anwendungen verwendet haben.
  • Nicht genügend Informationen zu jedem Element: Dies ist wahrscheinlich ein Ergebnis des ersten Punktes. Es gab Details wie Größe, Beziehungen von Elementen in zusammengesetzten Widgets usw., die hilfreich gewesen wären.

Letztendlich scheinen wir bessere Ergebnisse erzielt zu haben, wenn wir sichergestellt hätten, dass wir ein Repository mit vollständig realisiertem und wiederverwendbarem Code für die meisten einfachen Elemente (Schaltflächen, Dropdowns usw.) haben, kombiniert mit einer vollständig detaillierten Musterbibliothek für komplexere Widgets (Leuchtkästen) , Lookups, Tabellen usw.), die eine genauere Erläuterung der Anwendungsfälle benötigen und die möglicherweise mehrere Variationen aufweisen.

3
Rath_Er

Es gibt mehrere Entwurfsmuster-Repositorys, die im Konigi-Web aufgeführt sind . Mit diesen können Sie mit Patternry öffentliche und private Sammlungen von Mustern erstellen.

3
Pau Giner

Wir verwenden derzeit ein von uns angepasstes Wiki. Es ermöglicht uns, detaillierte Spezifikationen (Flussdiagramme, Bilder, Codefragmente, Kommentare, einen Verlauf usw.) zu erstellen, auf die jeder mit einem Konto zugreifen kann. Darin enthalten sind Pixelspezifikationen und eine Bibliothek allgemeiner UI-Elemente, die mit Seiten verknüpft sind (falls erforderlich), die die Interaktion ausführlicher erläutern.

1
Rob H

Intern verwenden wir hier Konfluenz . Einer unserer Mitarbeiter ist dafür verantwortlich, dass alles in Ordnung bleibt, und wir alle verwenden es nachträglich, um auf die richtige Benutzeroberfläche zu verweisen, die in einer bestimmten Situation verwendet werden soll.

Abgesehen davon verwenden wir es auch als Diskussionspunkt, wenn wir glauben, dass ein Element falsch oder veraltet ist.

1
adesignapart

Noch kein Werkzeug, mit dem ich mich beschäftigen kann, aber Quitte scheint interessant zu sein.

Persönlich habe ich festgestellt, dass es sehr nützlich war, ein eigenes Muster-Skizzenbuch zu haben, aber ich denke, Sie suchen etwas Fortgeschritteneres und Kollaborativeres?

1
Sheff

Es gibt einen Markt für diese Art von Produkt. Wir haben viel recherchiert und noch keine gefunden, die wirklich zur Rechnung passt.

In den letzten beiden Organisationen, an denen ich gearbeitet habe, haben wir Skunkworks-Muster-/Komponentenbibliotheken von Hand erstellt ... normalerweise eine lose Mischung aus PHP enthält. Wir spielen mit der Idee von Erstellen einiger benutzerdefinierter WordPress Komponenten für die Aufgabe.

"Offiziell" ist es normalerweise ein Durcheinander von Produkten. SharePoint zum Verwalten von Drahtmodellen. Perforce zum Verwalten von Codefragmenten. Zufällige PDFs mit visuellen Designspezifikationen. E-Mail-Boxen voller Diskussionen. Es ist ein echtes Durcheinander.

0
DA01

Dies hängt von den verwendeten Tools ab. Normalerweise können Sie eine Masterdatei an einem freigegebenen Speicherort erstellen. Ich habe dies mit PowerPoint (nur ein Punkt mit Elementen), Visio (benutzerdefinierte Schablonen), Axure RP (Widget-Bibliotheken/freigegebenes Projekt) und Illustrator (weiß nicht genau, wie es genau gemacht wurde) gesehen.

0

Ich habe mit verschiedenen Ansätzen für solche Bibliotheken gearbeitet, von der Erstellung von Graffle-Schablonen bis hin zu vollständigen Design-Repos mit Wikis und Arbeitscode-Widgets. Wenn Sie über die Ressource und die Zeit verfügen, hat letzteres einige echte Vorteile, da vollständig codierte Beispiele hilfreich sein können, um die Muster umfassender zu klären, z. Sie können sehen, wie Elemente nicht nur durch ihr Verhalten bei der Interaktion gerendert werden. Ein unterteilter Ansatz für Ihre codierte Musterbibliothek bedeutet, dass Sie auch die Beispiele herausgreifen und für Ihre Tests mit Farbvarianten usw. herumspielen können. Das Erstellen der Muster im tatsächlichen Arbeitscode und das Online-Hosten, auf das Ihr gesamtes Team zugreifen kann, zahlt sich ebenfalls aus. Wenn ich das alles sage, schätze ich es, dass das Aufrufen dieser Detailebene einen Overhead hat und nicht immer für alle Organisationen und Projekte geeignet ist. Manchmal kann ein scharfsinniger Bildschirmgriff und eine konsistente Notation ausreichen. der Trick ist dann, es in ein Format zu bringen, das einfach zu navigieren und zuzugreifen ist, sonst ist es weniger wahrscheinlich, dass Sie es verwenden;)

0
Sci