Entwerfen Sie die Systemarchitektur für mehrere Produkte

Als die Anzahl der angebotenen Produkte zunahm, begann unser Designsystem auseinanderzufallen. Die Eintrittsschwelle für Designer ist gestiegen und es ist schwieriger geworden, damit zu arbeiten. In dem Artikel werde ich Ihnen erzählen, wie wir zu einer modularen Architektur gewechselt sind und nicht an Konsistenz verloren haben.





Hier sind einige einleitende Hinweise, die Ihnen helfen zu verstehen, ob unser Fall Ihrem ähnlich ist oder nicht.





  • Es gibt mehrere Produkte.





  • Ein Produkt kann von mehreren Teams aus Designern und Entwicklern hergestellt werden.





  • Es gibt Web, Mobile und Desktop.





  • Es gibt viel Vermächtnis und Inkonsistenz.





  • Ein Designer in einem Produkt weiß möglicherweise nicht, was in einem anderen passiert.





Wenn es technische Nuancen gibt, dann ist zunächst die Arbeit in Figma gemeint, aber ich denke, dass in Sketcha Fernanda alles gleich ist.





Probleme bestehender Ansätze zum Bibliotheksaufbau

Aus der Sicht eines Designers beginnt ein guter DS mit einer Bibliothek, mit der man bequem arbeiten kann.





Die Erfahrung verschiedener Teams wird normalerweise durch eines dieser Muster oder eine bizarre Kombination davon beschrieben:





Die Probleme selbst können wie folgt beschrieben werden:





  • Mehrere Bibliotheken sind mit einer Datei verbunden. In der Datei gibt es ein Durcheinander von Komponenten und Stilen mit verschiedenen Eltern. Designer haben Angst, Bibliothekskomponenten zu berühren, da nicht klar ist, wo sie verwendet werden und was möglicherweise beschädigt wird.





  • . , . , , "". , .





  • , . , .





  • .





: , . , -, , . .





, - . , : - YAGNI SOLID, DRY KISS.





— , . .





, , ? — , .





, , , .





. , .





  • > >





  • >





  • >





-- , - .





, . , .





:





  1. - "" , , . . , .





  2. , .





. "" , , , , , . , . , , .





, . , . " ".





- , . , , , .





, , , .





. - , .





"-" , , , . , .





-

, -. , , .





:





  • — .





  • — , , .





  • .





- .





, , .





, . . , , . . , , .





, - — , , , .





, :





Es gibt so viele Grundlagen wie es Produkte gibt, aber alle versuchen, der Referenz ähnlich zu sein.





Mit diesem Hack unterstützen wir asynchrone Produktaktualisierungen und ein hohes Maß an Konsistenz, während direkte Kopplung und redundante Komponenten in Produktbibliotheken vermieden werden.





Was weiter?

Tatsächlich wurde das Thema der Bibliothek nicht bekannt gegeben, und es gibt immer noch viel Brennholz, das zerbrochen werden muss. Es gibt Nuancen bei der Benennung, den Komponenten, den Stilen und sogar bei der Arbeit damit. Daher werde ich Ihnen in den nächsten Anmerkungen erklären, wie wir Komponenten, Bildschirme zusammenbauen und was wir mit der Versionierung haben. Nun, was ein Designsystem ist, ohne den Ansatz zur Bestellung von Farben, Typografie und Stilen zu beschreiben, werde ich Ihnen auch darüber erzählen.








All Articles