SHIUI
SHIUI ist ein wiederverwendbares UI-Komponenten-Set im flachen 2D-Stil: nur drei Farben, 1,5-px-Linien, keine Schatten – die Komponenten lassen sich direkt auf der Seite ausprobieren und deren Quellcode kopieren.
Über SHIUI
SHIUI ist ein wiederverwendbares UI-Komponenten-Set im flachen 2D-Design im Stil eines japanischen Flaggen-Posters: Es verwendet nur drei Farben (Papierweiß #e5e3dc, Tintenschwarz #2a2926, Zinnoberrot #e14d2a), durchgängig 1,5-px-Linien und durchgehend keine Schatten. Laut der Website umfasst es derzeit 111 interaktive Elemente und 24 Blöcke, die auf den Demonstrationsseiten wirklich funktionsfähig sind – sie lassen sich anklicken, umdrehen, schließen und mehr. Jede Karte unterstützt zudem das direkte Kopieren der jeweiligen Import-Anweisung oder des vollständigen Quellcodes. Außerdem bietet es Design-Tokens (Farbsystem) zum Kopieren mit einem Klick und eignet sich damit für die direkte Verwendung in Projekten.
Am besten geeignet
Beste Einsatzszenarien
Ein flaches, zurückhaltendes visuelles System für englischsprachige Oberflächen aufbauen und Komponentenquellcode direkt kopieren und verwenden
Bei Bedarf an einheitlichen Farb- und Linienvorgaben die Dreifarb-Design-Tokens kopieren und als Projektbasis verwenden
Vor der Auswahl einer Komponente die Interaktionseffekte wie Klicken, Umdrehen und Schließen direkt auf den Karten der Website ausprobieren
Funktionen
Interaktiver Komponentenkatalog
Laut der Website umfasst es 111 interaktive Elemente und 24 Blöcke; jede Karte lässt sich auf der Seite tatsächlich anklicken, umdrehen oder schließen.
Import-Anweisung oder Quellcode mit einem Klick kopieren
Jede Komponentenkarte unterstützt das direkte Kopieren der jeweiligen Import-Anweisung oder des vollständigen Quellcodes, was die Verwendung im Projekt erleichtert.
Design-Tokens in drei Farben
Bietet Farb-Tokens in Paper, Sumi und Shu, die sich mit einem Klick von der Website kopieren lassen, um Farb-, Linien- und Akzentverwendung in der Oberfläche zu vereinheitlichen.
Flacher Plakat-Look
Verwendet ein visuelles System mit flachem 2D-Look, durchgängig 1,5-px-Linien und ohne Schatten und wird auf der Website in Form von Komponenten präsentiert.
Vorteile
- Die Komponenten werden auf der Website in wirklich interaktiver Form präsentiert – was man sieht, ist, was man bekommt
- Unterstützt das direkte Kopieren von Import-Anweisungen oder vollständigem Quellcode, was den Integrationsaufwand gering hält
- Bietet kopierbare Design-Tokens in drei Farben für einen einheitlichen Stil
Nachteile
- Das Komponenten-Set ist auf englischsprachige Oberflächen ausgerichtet; die UI-Texte sind primär für englisches Layout entworfen