Kaarten en Composability in Design Systems

Structuur, inhoud, stijl en gedrag van samengestelde componenten

Ik ben een sukkel voor een kaartcomponent. Het neemt me nostalgisch terug naar mijn adolescentie toen honkbalkaarten me introduceerden in informatieontwerp. Ik verzamelde en organiseerde duizenden, elk met een heldenfoto, team als thema, posities als identiteit. Mijn brein hield zich bezig met het ontwerp, de gegevens en diepgaand onderzoek dat ze bevorderden.

De digitale kaart van vandaag heeft hetzelfde doel. Meer dan alleen een generieke container, een kaart is een scanbare momentopname van de vitale eigenschappen van een object. Het geeft voldoende voorbeelden om het te identificeren. Het nodigt ons uit om meer te leren en in die volgorde te communiceren.

Een kaart is een vel materiaal dat dient als toegangspunt voor meer gedetailleerde informatie. Kaarten kunnen een foto, tekst en een link over een enkel onderwerp bevatten. - Kaart van Google Material Design

Vaak signaleert de kaart ook een draaipunt in de groei van een componentenbibliotheek. In tegenstelling tot primitieven zoals knop en invoer, vereist een kaart compositie. Het heeft betrekking op veel elementen (sommige al in onze bibliotheek) en naarmate inhoud naar elk element stroomt. Ook worden kaarten bijna altijd getoond als een set, broers en zussen naast elkaar. Samenstelling activeert denken van een hogere orde dat cruciaal is voor systeemontwerp.

Het verharden van een compositie zoals kaart dwingt een systeem te rijpen. Soms lost een systeem de uitdagingen op, waardoor de complexiteit van de bibliotheek toeneemt. Op andere momenten stuurt de groeiende volwassenheid van een systeem weg van complexiteit, waardoor dingen eenvoudig blijven. Deze uitdagingen nemen de vorm aan van structuur, inhoud, stijl en gedrag. Mogen de lessen hier je toekomstige systeemcomposities inspireren.

Componerende structuur

Bibliotheken beginnen met primitieven - invoer, kop, selectievakje, keuzerondje, label, pictogram - om te dienen als bouwstenen. De configureerbaarheid van een knop is tamelijk alledaags: een pictogram links of rechts van een label, misschien een gesplitste balk of animatie. Vervolgens knoop-groep combineert knop, waardoor broers en zussen relaties worden gedwongen. Dit zijn uitdagingen op laag niveau. Dingen worden interessanter bij het samenstellen van componenten zoals kaart met veel elementen.

Identificeer kernelementen

Een samen te stellen component begint met de essentiële kern van vereiste elementen, dus u zult het volgende willen vragen:

Welke elementen zijn vereist van elk display?
Wat gebeurt er als een vereist element ontbreekt?

kaart vereist vaak:

  • afbeelding, gekoppeld aan een ...
  • titel (meestal een stijlkop), eventueel aangevuld met een ...
  • beschrijving (of 'deck' of andere uitgebreide inhoud).

Identificeer alle mogelijke elementen en cases

Werp het ontdekkingsnetwerk breed over veel producten. Inventariseer elk voorbeeld. Analyse zou een groeiende diversiteit aan cases moeten opleveren en elementen zouden een ontwerp en richtlijnen moeten bevatten die nuttig zijn voor latere documentatie.

Wat is een volledig mogelijke elementen inbegrepen?
Welke elementencombinaties worden afgeraden of verboden? Een kaart kan bijvoorbeeld knoppen of pictogrammen voor acties bevatten, maar nooit beide.

kaarten voorzien in verschillende behoeften gedurende vele momenten van een ervaring, en kunnen een scala aan andere inhoudstypes bevatten:

  • label of type, vaak signalerend een groep waartoe het object behoort en mogelijk weergegeven als een tag of een pictogram / labelpaar.
  • actie (s) aangeboden als knop (pen), pictogram (len) of beide.
  • prijs en beoordelingen voor producten
  • metagegevens, verschillend van een beschrijving om sleuteleigenschappen te markeren
  • gerelateerde lijst (en) als een set items gerelateerd aan het object

Solidify Element Relationships

De vele elementen van een composietcomponent roepen vragen op over orde, combinaties, groepen en meer:

Zijn er benoemde zones, zoals acties?
Zijn er element-subgroepen? Kunnen subgroepen opnieuw worden besteld of verborgen?
Welke logica is nodig om combinaties te sorteren, combineren of scheiden?
Hoeveel alternatieve arrangementen moeten we testen?
Hoeveel variaties moeten worden onthuld en beschreven in doc?

Voor veel kaarten is de gestapelde volgorde vast: afbeelding dan titel dan acties. In andere systemen kunnen meer flexibele behoeften wijzen op herschikking van elementen. Met de kaart van Morningstar Design System kunnen gebruikers bijvoorbeeld een afbeelding boven of onder een titel plaatsen.

Net als een modaal en dialoogvenster, kan de kaart zones identificeren voor een koptekst, hoofd- en voettekst of media, kopie en acties om inhoudrelaties stevig te identificeren.

Omgaan met regio's die flexibele invoer mogelijk maken

Hoe groter het onderdeel, hoe groter de kans dat het een regio biedt die welkom is, wat een systeemgebruiker daar ook wil plaatsen. De inhoud van de regio kan net zo onschadelijk zijn als een alinea of ​​lijst met opsommingstekens.

Zijn er generieke regio's waarin u flexibele markup kunt plaatsen?
Hoe beïnvloeden regio'szones vloeistof en / of vaste schermen?
Verwacht of beveelt u bepaalde inhoudstypen voor dergelijke containers aan?

Maar die regio opent een gevaarlijke deur. Misschien voegt een adoptant een legende toe ... onder een grafiek ... met een aangrenzende datatabel met vier kolommen ... in het inhoudsgedeelte van een kaart. Hint: daar is een kaart niet voor.

Flexibele regio's voor een systeemgebruiker om zijn eigen inhoud te injecteren.

Regio's bieden flexibiliteit, maar nodigen uit tot misbruik. Niemand beweert het openstellen van het hoofdinhoudsgebied van een modal voor onzekere markeringen. Voor een kaart kan een actiebalkzone een knop, pictogram en menu bevatten. Het is echter niet aan elk geval om kaart naar harde draad te sturen. Sommige componenten moeten mogelijk regio's aanbieden en afstand doen van controle over en verantwoordelijkheid voor wat er in zit.

Afhaalmaaltijden: met grote containerkracht komt een grote verantwoordelijkheid voor het adopteren van teams. Houd jezelf niet voor de gek om te geloven dat je elk mogelijk geval kunt voorspellen, bouwen, testen of doceren. Als een regio bedoeld is voor een paar verwachte varianten, doe dan adoptanten een plezier en creëer voorbeelden die elk tonen.

Inhoud samenstellen

Titels, proza, metadata, prijzen. Een afbeelding met veel kracht. Ongeacht de elementen die u opneemt, een kaart vereist een zorgvuldige overweging van media en kopie. In tegenstelling tot primitieven die u zelf hanteerde, vereisen samenstelbare componenten samenwerking met diegenen die inhoud het beste kennen.

Inhoud varieert. Formulierconventies op basis van echte inhoud.

Een afbeelding boven tekst. Het is eenvoudig, toch? Niet altijd. De beeldverhouding van de afbeelding is niet alleen cruciaal voor visuele harmonie, maar ook voor de productie van inhoud.

Bij één klant hebben we bestaande inconsistente kaarten voor producten geanalyseerd. Het was een schat aan echte inhoud. Behalve: yikes, de beeldverhoudingen van afbeeldingen varieerden enorm! Sommige producten hadden een verhouding van 16x9 of 3x2. Anderen alleen vierkante afbeeldingen. Search presenteerde het gamma, inclusief buitengewoon lange portretten.

Verscheidene beeldverhoudingen aangetroffen in echte afbeeldingen verspreid over bestaande producten

Inhoudsexperts waren begrijpelijkerwijs vermoeid door jarenlange ontwerp-flip flop. Voor hen was het systeem een ​​gelegenheid om het gesprek over de beeldgrootte te beëindigen. Een standaard hoogte-breedteverhouding zou niet alleen de consistentie van de weergave verbeteren, maar ook de vereisten van de leverancier en de aflevering van afbeeldingen enorm vereenvoudigen.

Dientengevolge vestigde de kaart zich op een landschapsverhouding van 16x9, aangevuld met een vierkant alternatief. Dit proces leverde ook code op om verhoudingsspecifieke weergave op de voorkant op te lossen. Als gevolg hiervan leidde composability tot een miniatuurcomponent die ook nuttig was voor andere componenten.

Om verouderde inhoud aan te pakken, bood kaart een rekwisiet aan om afbeeldingen te bevatten (met de CSS-eigenschap op achtergrondgrootte) binnen de ruimte van 16x9. Ontwerpers bereikten visuele rasterharmonie in zoekresultaten, terwijl producenten displays per kaart aanpasten om ongewenste foto-uitingen aan te pakken.

Afhaalmaaltijden: hoe beter een component kan worden samengesteld, hoe essentiëler u inhoudelijke overwegingen opneemt. Ontwerp van stresstest en bouwt met echte inhoud. Betrek diegenen die omgaan met de inhoud die elke dag in uw componenten stroomt. Je wordt misschien hun nieuwe beste vriend.

Te veel inhoud? Adresverpakking en afkapping

Hoewel afbeeldingen een weergave domineren, speelt kopie ook een cruciale rol in koppen, beschrijvingen en metagegevens. Maar het is een kaart, geen opus, dus kopie kan niet wild gaan.

Langere titels en beschrijvingen zullen zeker één keer worden verpakt of - als je het kunt verdragen - twee keer. Dus ontwerp voor marges en lijnhoogte. Maar als de kopie langer wordt, neemt de effectiviteit van de kaart snel af.

Wat is de maximale lengte van elk kopie-element?
Wat is het maximale en minimale aantal tekens dat we comfortabel zijn?

Truncation biedt een ontsnappingsluik dat bescherming biedt tegen de lengte van kopieën die we niet kunnen voorspellen. Truncation verdeelt de mening: sommige clients hebben een hekel aan truncation, terwijl anderen een truncate-hulpprogramma uitbrengen in een eerste componentbatch. Verkort een kaarttitel of zelfs ondertiteling of beschrijving, en u riskeert schadelijke context en begrip. Stel in composeerbare componenten de prioriteiten in: bekort een beschrijving vóór de titel of na drie regels in plaats van twee, te midden van een uiterlijk dat voldoende buigt.

Truncatie resulteert in een kortere, maar mogelijk niet de voorkeur verdienende, beschrijving.

Het is ook niet alleen kopieerverpakking. Overweeg rijen met acties zoals een horizontale knop en pictogrammenlijst die kunnen botsen wanneer de instellingen smal worden.

Smalle kaartbreedte zorgt ervoor dat een links uitgelijnde knop botst met een rechts uitgelijnde pictogrammenlijst.

Afhaalmaaltijden: kopieermaxima en afkapping doen een beroep op ons gevoel van controle over gestroomde inhoud. Naarmate de complexiteit van componenten toeneemt, versterkt u de redactionele opinie en codecontrole op de lengte van de kopie, de lijnmaat en de impact van de breedte van de vloeistofkaart. Als u hulpprogramma's aanbiedt, doe dit dan als moderatie en niet als een kruk.

Niet genoeg inhoud? Wanneer afbeelding (en) en / of kopiëren ontbreken

Aan de andere kant is inhoud soms niet beschikbaar. De inhoud van de kaart reikt vaak de diepte in en plukt dit gerelateerde artikel of dat oude profiel voor weergave. Is uw kaart klaar voor het ontbreken van een beschrijving, metagegevens of zelfs afbeelding? Geen beeld, oh, het schandaal! Wat doe jij?

De meest eigenwijze van ons zeggen: nooit! Wil je een kaart gebruiken? Neem de vereiste elementen op of doe geen moeite. Toch is dat hard. Vaak onrealistisch. Elegante componenten die kunnen worden samengesteld, moeten buigen maar niet breken als de inhoud stroomt.

Instanties met inpakkende titels en ontbrekende beschrijvingen.

Bij het ontbreken van een kopie, is de kaartsamenstelling afhankelijk van solide stapelbare ruimte, rekening houdend met de vele combinaties die u al dan niet kunt verwachten.

Exemplaren met ontbrekende afbeeldingen vervangen door achtergrondvulling & pictogram om het activatype aan te geven.

Bij gebrek aan beeld hebben we opties. U kunt typen aantrekkelijk onderscheiden via een egale kleur, het overlappende identiteitsmerk van een site of zelfs een pictogram / kleurcombinatie voor type (activastructuur? Type activiteit? Inhoudskanaal?).

Componeerstijl

Atoomelementen stylen is eenvoudiger (elementen vereisen minder beslissingen) en moeilijker (die beslissingen hebben fundamentele impact). Kaart roept echter uitdagingen op en breidt onze stijlkeuzes uit naarmate elementen in krappe ruimtes op elkaar inwerken.

Vouw de visuele taal van een systeem uit

Mijn ervaring suggereert dat componenten zoals kaart incrementeel gesprek activeren over systeemconventies van modulaire vorm en gelaagdheid. Gesprekken kunnen sturen naar de randradius, schaduw en subtiliteiten van achtergrondkleurcontrast tussen het object en het onderliggende canvas.

Afhaalmaaltijden: een samengesteld onderdeel zet een toon voor de vorm van vele ontwerpen die nog moeten komen, zowel in een bibliotheek als voor die werkende projecten. Zulke beslissingen bloeden in de ervaring op onvoorstelbare manieren, zowel gevaarlijk als verrukkelijk.

Stijl binnen en tussen componenten

Een kaart roept kleurenrelaties op, beginnend met contrast met het canvas hieronder. Sommigen kiezen voor eenvoud: alleen witte kaart op een wit canvas, geen alternatieve achtergronden en gebruiken andere eigenschappen zoals schaduw voor contrast.

Rijkere visuele omgevingen lossen op voor voorgrond- / achtergrondcombinaties in lichte en donkere omgevingen. Het Comet-systeem van Discovery Education biedt vele achtergronden, vaak samen weergegeven op één pagina. Daarom bood het systeem lichte en donkere kaarten aan elk van hen door middel van mixins en tokens. Dergelijke kaarten creëren een ander niveau van hiërarchie: tekst op componentachtergrond op canvasachtergrond.

Afhaalmaaltijden: Composability daagt uw tolerantie voor visuele complexiteit uit. Krachtige, eigenzinnige componenten nodigen een systeemteam uit om elke combinatie op te lossen in de hoop tijd voor de medewerker te besparen. Maar complexe, goed gemodelleerde oplossingen leiden tot hogere kosten voor creatie en onderhoud. "Net genoeg" complexiteit is niet altijd duidelijk.

Indelingen indelen

Scheiding, vaak via marge, speelt ook een rol. Een kaartlay-out kan een layout_grid gebruiken of zijn eigen kaart definiëren om veel kaarten in een rij of raster te rangschikken. Hoewel rastermechanica eenvoudig is, roept de kaartlay-out meer vragen op:

Hoeveel kaarten kunnen we op één rij hebben?
Herschikken de kaarten op basis van responsieve overwegingen?
Buigt de kaartbreedte vloeiend binnen een vloeistofraster? Zo ja, hoe breed of smal kan een kaart zijn? Zijn er responsieve regels die elementen in een kaart aanpassen?
Moeten alle kaarten op een rij of in een heel rooster altijd dezelfde hoogte hebben?

Gedrag opstellen

Het primaire doel van de kaart is om toegang te krijgen tot diepere details ergens anders. Een kaart verheft ook subtiele interacties. De eerste staat niet ter discussie. Dit laatste kan leiden tot omstreden discussies over "Wat is aanklikbaar?"

Als toegangspoort is de navigatie van een kaart het eenvoudigst wanneer de hele kaart klikbaar is. In dat geval kan de hele kaart reageren op cursorgebeurtenissen zoals: zweven en: focus om een ​​afbeelding te activeren of blokkeren om in te zoomen, titel om opnieuw te kleuren en schaduw om donkerder te worden. Als een kaart geen specifiekere interacties bevat, vereenvoudigt deze zorg door het hele blok een enkele interactie te laten betalen.

Veel elementen die mogelijk kunnen reageren op gebeurtenissen zoals klikken en zweven

Aan de andere kant kan een samengesteld onderdeel zoals een kaart veel interactieve zones bevatten - titel, afbeelding, knop, pictogram, koppeling - die zowel opmaak, stijl als gedrag beïnvloeden. Doe je ingenieur een plezier en bespreek deze tijdens ontwerp-iteratie en overdracht, voordat de implementatie pijnlijk wordt.

Wil je beginnen met een ontwerpsysteem of moet je dieper duiken om producten en spelers te bespreken? EightShapes geeft workshops voor systeemplanning en begeleidt klanten bij ontwerpsystemen. Laten we praten!