Kortit ja kompostoitavuus suunnittelujärjestelmissä

Komponenttien rakenne, sisältö, tyyli ja käyttäytyminen

Olen kortin komponentin tikkari. Se vie minut nostalgisesti takaisin murrosiikenteeni, kun baseball-kortit esittelivät minulle tietosuunnittelun. Keräin ja järjestäin tuhansia, joista jokaisella oli sankarin valokuva, joukkue teemana, asemat identiteettinä. Aivoni olivat mukana suunnittelussa, tiedossa ja perusteellisessa tutkimuksessa, jota he edistivät.

Nykypäivän digitaalinen kortti palvelee samaa tarkoitusta. Sen lisäksi, että kortti on yleinen, se on skannattava tilannekuva esineen elinvoimasta. Se esikatselee tarpeeksi tunnistaakseen. Se kutsuu meitä oppimaan lisää ja olemaan vuorovaikutuksessa siinä järjestyksessä.

Kortti on arkki materiaalia, joka toimii lähtökohtana yksityiskohtaisempiin tietoihin. Kortit voivat sisältää kuvan, tekstin ja linkin yhdestä aiheesta. - Google Material Designin kortti

Usein kortti ilmoittaa myös kääntyvästä osasta kirjaston kasvua. Toisin kuin primitiivit, kuten painike ja syöttö, kortti vaatii koostumuksen. Se liittyy moniin elementteihin (jotkut jo kirjastoissamme) ja sisällön virtaamalla niihin. Lisäksi kortit näytetään melkein aina sarjana, sisaruksina vierekkäin. Kokoonpano laukaisee korkeamman asteen ajattelun, joka on kriittinen järjestelmän suunnittelulle.

Koostumuksen karkaisu kuten kortti pakottaa järjestelmän kypsymään. Joskus järjestelmä ratkaisee haasteet lisäämällä kirjaston monimutkaisuutta. Muina aikoina järjestelmän kasvava kypsyys estää monimutkaisuudesta pitäen asiat yksinkertaisina. Nämä haasteet ovat rakenteen, sisällön, tyylin ja käyttäytymisen muodossa. Voivatko täällä olevat oppitunnit innostaa järjestelmäkoostumuksiasi tulemaan.

Säveltävä rakenne

Kirjastot alkavat alkukirjaimilla - syöttö, otsikko, valintaruutu, valintanappi, tarra, kuvake - toimiakseen rakennuspalikoina. Painikkeen koostumus on melko arkipäivää: etiketin vasemmalla tai oikealla puolella oleva kuvake, ehkä jaettu palkki tai animaatio. Button-group yhdistää painikkeen, pakottaen sisarussuhteet. Nämä ovat matalan tason haasteita. Asiat ovat mielenkiintoisempia, kun sävelletään komponentteja, kuten kortti, jossa on monia elementtejä.

Tunnista keskeiset elementit

Yhdistettävä komponentti alkaa tarvittavien elementtien keskeisellä ytimellä, joten sinun kannattaa kysyä:

Mitä elementtejä vaaditaan jokaiselta näytöltä?
Mitä tapahtuu, jos vaadittava elementti puuttuu?

kortti vaatii usein:

  • kuva yhdistettynä…
  • otsikko (yleensä tyylinen otsikko), ehkä täydennetty…
  • kuvaus (tai ”kansi” tai muu yksityiskohtainen sisältö).

Tunnista kaikki mahdolliset elementit ja tapaukset

Luo etsintäverkko laajalle monille tuotteille. Inventoi jokainen esimerkki. Analyysin tulisi tuottaa kasvava monimuotoisuus tapauksista, ja elementtien tulisi antaa suunnitelma ja ohjeet, jotka ovat hyödyllisiä myöhempää dokumentaatiota varten.

Mikä sisältää mahdolliset täydelliset elementit?
Mitä elementtiyhdistelmiä lannistaa tai kieltää? Esimerkiksi kortti voi sisältää painikkeita tai kuvakkeita toimintoihin, mutta ei koskaan molempia.

kortit palvelevat vaihtelevia tarpeita monien kokemusten hetkien aikana, ja ne voivat sisältää useita muita sisältötyyppejä:

  • etiketti tai tyyppi, joka usein signaloi ryhmää, johon objekti kuuluu, ja näytetään mahdollisesti tunnisteena tai kuvakkeena / tarraparina.
  • toiminto (t), jotka tarjotaan painikkeina, painikkeina, kuvakkeina tai molemmina.
  • tuotteiden hinta ja arvosanat
  • metatiedot, erottuvat kuvauksesta avainominaisuuksien korostamiseksi
  • aiheeseen liittyvät luettelot kohdeobjektina, joka liittyy objektiin

Vahvista alkuaineiden suhteet

Yhdistettävän komponentin monet elementit herättävät kysymyksiä järjestyksestä, yhdistelmistä, ryhmistä ja muusta:

Onko olemassa nimettyjä vyöhykkeitä, kuten toimintoja?
Onko olemassa alaryhmiä? Voivatko alaryhmät järjestää uudelleen tai piilottaa?
Mitä logiikkaa tarvitaan yhdistelmien lajitteluun, yhdistämiseen tai erottamiseen?
Kuinka monta vaihtoehtoista järjestelyä meidän pitäisi testata?
Kuinka monta variaatiota tulisi paljastaa ja kuvata asiakirjassa?

Monille korteille pinottu järjestys on kiinteä: kuva sitten otsikko ja sitten toimet. Muissa järjestelmissä joustavammat tarpeet voivat ehdottaa elementtien uudelleenjärjestystä. Esimerkiksi Morningstar Design System -kortin avulla käyttäjät voivat sijoittaa kuvan otsikon ylä- tai alapuolelle.

Kuten modaali ja valintaikkuna, kortti voisi tunnistaa otsikon, pää- ja alatunnisteen tai median vyöhykkeet, kopioida ja toimia sisällön suhteiden tunnistamiseksi tiukasti.

Selviytyä alueista, jotka sallivat joustavan syöttön

Mitä suurempi komponentti, sitä todennäköisemmin se tarjoaa alueen, joka suhtautuu myönteisesti siihen, mitä järjestelmän käyttäjä haluaa laittaa sinne. Alueen sisältö voi olla yhtä vaaratonta kuin kappale tai luettelomerkki.

Onko olemassa geneerisiä alueita, joille voit sijoittaa joustavan merkinnän?
Kuinka aluevyöhykkeet vaikuttavat nestemäisiin ja / tai kiinteisiin näytöihin?
Odotatko tai suosittelette tiettyjä sisältötyyppejä tällaisille säilöille?

Mutta tuo alue avaa vaarallisen oven. Ehkä adoptoija lisää selityksen… kaavion alle… vierekkäisen neljän sarakkeen tietotaulukon kanssa… kortin sisältöosaan. Vihje: kortin tarkoitus ei ole se.

Joustavat alueet järjestelmäkäyttäjälle pistämään omaa sisältöä.

Alueet tarjoavat joustavuutta, mutta kutsuvat väärinkäytöksiä. Kukaan ei väitä modaalin pääsisältöalueen avaamista epävarmalle merkinnälle. Kortin kohdalla toimintapalkkialue voi sisältää painikkeen, kuvakkeen ja valikon. Kaikissa tapauksissa kortti ei ole kuitenkaan kova johto. Jotkut komponentit voivat joutua tarjoamaan alueita ja luopumaan sisäisen sisällön hallinnasta ja vastuusta.

Takeaway: Suurella konttivoimalla on suuri vastuu ryhmien omaksumisesta. Älä huijaa uskoaksesi, että voit ennustaa, rakentaa, testata tai dokumentoida kaikki mahdolliset tapaukset. Jos alue on tarkoitettu harvoille odotettavissa oleville muunnelmille, suostuuko suosio ja luo esimerkkejä jokaisesta.

Sisällön säveltäminen

Otsikot, proosa, metatiedot, hinnoittelu. Kuva, joka pakata voimakkaan lävistimen. Sisältämistäsi elementeistä riippumatta kortti vaatii median ja kopion harkitsemista. Toisin kuin itse käsittelemäsi primitiivit, kompostoitavat komponentit vaativat yhteistyötä niiden kanssa, jotka tietävät sisällön parhaiten.

Sisältö vaihtelee. Todelliseen sisältöön perustuvat lomakesopimukset.

Kuva tekstin yläpuolella. Se on yksinkertaista, eikö niin? Ei aina. Kuvan kuvasuhde on keskeinen paitsi visuaalisen harmonian lisäksi myös sisällöntuotannossa.

Yhdessä asiakkaassa analysoimme olemassa olevia epäjohdonmukaisia ​​kortteja kaikissa tuotteissa. Se oli todellisen sisällön aarreaitta. Paitsi: jikes, kuvasuhteet vaihtelivat villisti! Jotkut tuotteet rokottivat suhteen 16x9 tai 3x2. Toiset vain neliöivät kuvia. Haku esitteli alueen, mukaan lukien erittäin korkeat muotokuvat.

Erilaisia ​​todellisten kuvien kohdattavia kuvasuhteita on jaettu olemassa oleville tuotteille

Sisällön asiantuntijat olivat ymmärrettävästi väsyneitä vuosien suunnittelusta annettu flip flop. Heille järjestelmä oli tilaisuus lopettaa kuvan koon keskustelu. Tavallinen kuvasuhde ei vain paranna näytön johdonmukaisuutta, mutta myös yksinkertaistaa huomattavasti myyjän vaatimuksia ja kuvan toimitusta.

Seurauksena oli, että kortti asettui 16x9: n vaakasuhteeseen, jota täydensi neliöinen vaihtoehto. Tämä prosessi tuotti myös koodin ratkaisemiseksi suhdekohtainen näyttö käyttöliittymässä. Seurauksena komposiivisuus johti pikkukuvakomponenttiin, joka oli hyödyllinen myös muille komponenteille.

Vanhan sisällön käsittelemiseksi kortti tarjosi potkurin, joka sisälsi kuvia (käyttäen taustakokoa CSS-ominaisuutta) 16x9-tilassa. Suunnittelijat saavuttivat hakutuloksissa visuaalisen ruudukon harmonian, kun taas tuottajat sääsivät näyttöä korttia kohden ei-toivottujen valokuvien saastuttamiseksi.

Poistu: mitä kompostoitavampaa komponenttia, sitä tärkeämpää on, että otat huomioon sisältönäkökohdat. Stressitestin suunnittelu ja rakentaminen todellisella sisällöllä. Kiinnitä niihin, jotka selviävät komponenteistasi virtaavasta sisällöstä päivittäin. Sinusta voi tulla heidän uusi paras ystävä.

Liian paljon sisältöä? Osoitteen kääriminen ja katkaisu

Vaikka kuvat hallitsevat näyttöä, kopioinnilla on myös tärkeä rooli otsikoissa, kuvauksissa ja metatiedoissa. Mutta se on kortti, ei opus, joten kopiointi ei voi mennä villiksi.

Pidemmät otsikot ja kuvaukset pakotetaan kerran tai, jos pystyt vatsaan, kahdesti. Joten suunnittele reunat ja viivan korkeus. Mutta jos kopiointi jatkuu, kortin tehokkuus heikkenee nopeasti.

Mikä on kunkin kopioelementin enimmäispituus?
Mikä on enimmäis- ja minimerkkimäärä, joka meillä on mukava leveys?

Katkaisu tarjoaa poistoluukun, joka suojaa kopion pituudelta, jota emme voi ennustaa. Lyhennys jakaa mielipiteen: jotkut asiakkaat kaipaavat katkaisua, kun taas toiset vapauttavat typistämisohjelman ensimmäisessä komponenttierässä. Lyhennä kortin otsikkoa tai jopa tekstitystä tai kuvausta, ja vaarana on vahingoittaa asiayhteyttä ja ymmärrystä. Yhdistävissä komponenteissa lykätään prioriteetteihin: lyhennä kuvaus ennen otsikkoa tai kolmen rivin jälkeen kahden sijasta, riittävän taipuisana olevan ulkonäön keskellä.

Lyhennys johtaa lyhyempaan, mutta mahdollisesti ei edullisempaan kuvaukseen.

Se ei ole vain kopioiden kääre. Harkitse toimintorivejä, kuten vaakapainike ja kuvakeluettelo, jotka saattavat törmätä, kun asetukset kapenevat.

Kapean kortin leveys saa vasemmalle kohdistetun painikkeen törmäämään oikealle suuntautuneiden kuvakeluetteloiden kanssa.

Takeaway: Kopiopituuden maksimit ja katkaisut vetoavat virtauksen sisällön hallinnan tunteemme. Komponenttien monimutkaisuuden kasvaessa vahvista toimituksellista mielipidettä ja koodiohjausta kopion pituudelle, viivamitalle ja nestekortin leveyden vaikutuksille. Jos tarjoat apuohjelmia, tee sitä maltillisesti, ei kainalosauna.

Ei tarpeeksi sisältöä? Kun kuva (t) ja / tai kopio puuttuvat

Toisaalta sisältöä ei joskus ole saatavana. Korttisisältö ulottuu usein syvyyteen, niputtamalla tämä aiheeseen liittyvä artikkeli tai kyseinen vanha profiili näytettäväksi. Onko korttisi valmis kuvauksen, metatietojen tai jopa kuvan puuttuessa? Ei kuvaa, oh, skandaali! Mitä sinä teet?

Suosituimmat meistä sanovat: Älä koskaan! Haluatko käyttää korttia? Sisällytä tarvittavat elementit tai älä häiritse. Se on kuitenkin ankaraa. Usein epärealistinen. Tyylikkäiden komposiittikomponenttien tulisi taipua, mutta niiden ei pidä rikkoa sisällön virtaamalla.

Tapaukset, joissa otsikot on kääritty ja puuttuvat kuvaukset.

Kopion puuttuessa kortin koostumus luottaa kiinteään pinottavaan tilaan, huomioiden monet yhdistelmät, joita et ehkä odota.

Tapaukset, joissa puuttuvat kuvat on korvattu taustan täyttö- ja kuvakkeilla ilmaisemaan omaisuuden tyyppi.

Kuvan puuttuessa meillä on vaihtoehtoja. Voit erottaa tyypit houkuttelevasti tasaisen värin, sivuston päällekkäisen henkilöllisyysmerkin tai jopa tyypin kuvakkeen / väriyhdistelmän avulla (omaisuusmuoto? Aktiviteettityyppi? Sisältökanava?).

Säveltämistyyli

Atomielementtien muotoilu on helpompaa (elementit vaativat vähemmän päätöksiä) ja vaikeampaa (näillä päätöksillä on perustavaikutus). Kortti kuitenkin herättää haasteita ja laajentaa tyylivalikoimaamme elementtien ollessa vuorovaikutuksessa ahtaissa tiloissa.

Laajenna järjestelmän visuaalinen kieli

Kokemukseni mukaan komponentit, kuten kortti, laukaisevat vaiheittaisen keskustelun modulaarisen muodon ja kerroksen järjestelmäkäytännöistä. Keskustelut voivat suunnata reunuksen säteen, varjon ja taustavärikontrastin hienovaraisuuden alla olevan objektin ja kankaan välillä.

Takeaway: Yhdistelmäkomponentti asettaa sävyn monien tulevien kuvioiden muodolle sekä kirjastossa että niissä työskentelevissä projekteissa. Tällaiset päätökset leviävät kokemukseen kuvittelemattomilla tavoilla sekä vaarallisina että ilahduttavina.

Tyyli komponenteissa ja niiden sisällä

Kortti herättää värisuhteet, alkaen kontrastista alla olevaa kangasta vasten. Jotkut valitsevat yksinkertaisuuden: vain valkoinen kortti valkoisella kankaalla, ei vaihtoehtoisia taustoja ja käyttävät kontrastiksi muita ominaisuuksia, kuten varjo.

Rikkaammat visuaaliset ympäristöt ratkaisevat etualan / taustayhdistelmien valaistuksessa ja pimeydessä. Discovery Educationin komeettajärjestelmä tarjoaa monia taustoja, jotka esitetään usein konserttina yhdellä sivulla. Siksi järjestelmä tarjosi vaaleita ja tummia kortteja jokaisen yhdistelmänä ja rahakkeina. Tällaiset kortit luovat toisen tason hierarkian: teksti komponentti taustalla kankaalle.

Takeaway: Yhdistettävyys haastaa suvaitsevaisuuden visuaalisen monimutkaisuuden suhteen. Tehokkaat, arvostetut komponentit houkuttelevat järjestelmätiimiä ratkaisemaan kaikki yhdistelmät toivoen yhteistyökumppanien aikaa. Mutta monimutkaiset, hyvin mallinnetut ratkaisut vaativat korkeammat luomisen ja ylläpidon kustannukset. ”Vain tarpeeksi” monimutkaisuus ei aina ole selkeää.

Järjestelyt asetteluissa

Erottelulla, usein marginaalin kautta, on myös merkitys. Korttiasettelu voi hyödyntää layout_grid-sovellusta tai määritellä oman järjestämään useita kortteja peräkkäin tai ruudukkoon. Vaikka verkkojen mekaniikka on suoraviivaista, kortin asettelu herättää lisää kysymyksiä:

Kuinka monta korttia meillä voi olla yhdessä rivissä?
Suorittavatko kortit uudelleen reagoivien näkökohtien perusteella?
Joustuuko kortin leveys juoksevasti nesteverkossa? Jos on, kuinka leveä tai kapea kortti voi olla? Onko olemassa reagoivia sääntöjä, jotka säätävät kortin sisällä olevia elementtejä?
Pitäisikö kaikkien korttien peräkkäin tai koko ruudukon olla aina saman korkeuden?

Säveltävä käyttäytyminen

Kortin ensisijainen tarkoitus on portti syvempiin yksityiskohtiin jossain muualla. Kortti nostaa myös hienovaraisia ​​vuorovaikutuksia. Entinen ei ole valmis keskustelemaan. Jälkimmäinen voi johtaa kiistanalaisiin keskusteluihin aiheesta "Mitä napsautettavissa?"

Sisääntulona kortin navigointi on yksinkertaisinta, kun koko korttia voidaan napsauttaa. Tällöin koko kortti voi reagoida kohdistustapahtumiin, kuten: liikuta hiirellä ja: tarkentaa kuvan laukaistamiseksi tai lohkoaksesi zoomataksesi, otsikko värinmuutos ja varjo tummentaaksesi. Jos kortti ei sisällä tarkempia vuorovaikutuksia, koko lohkon tarjoaminen yhdeksi vuorovaikutukseksi yksinkertaistaa näitä huolenaiheita.

Monet elementit, jotka voivat mahdollisesti reagoida tapahtumiin, kuten napsauttaminen ja osoittaminen

Toisaalta muodostettu komponentti, kuten kortti, voi sisältää monia interaktiivisia vyöhykkeitä - otsikko, kuva, painike, kuvake, linkki -, jotka vaikuttavat sekä merkintöihin, tyyliin että käyttäytymiseen. Suunnittele suunnittelijasi palvelus ja keskustele niistä suunnittelun iteraation ja vaihdon aikana, ennen kuin toteutuksen muuttaminen tulee tuskallista.

Aiotko aloittaa suunnittelujärjestelmän tai joutua sukeltamaan syvemmälle keskustelemaan tuotteista ja pelaajista? EightShapes johtaa järjestelmän suunnittelun työpajoja ja valmentaa asiakkaita suunnittelujärjestelmiin. Puhutaan!