Secrets to Effective Card-Based Design
Joten haluat saada trendin korttityylisellä käyttöliittymällä? Se on luultavasti hyvä idea; kortit ovat suosittu ja käyttäjäystävällinen vaihtoehto kaikentyyppiselle digitaaliselle suunnittelulle eri laitteiden koossa.
Korttisuunnittelun avain on luoda jotain, jonka käyttäjät haluavat napsauttaa. (Tämä on avain hienoon korttiin.) Kortin tulee olla kontti tiettyä sisältöä, sisällön linkkiä, rekisteröitymistä, videon toistoa jne. Varten, jonka käyttäjät haluavat vuorovaikutuksessa.
Näin voit suunnitella sen ...
Aloita mustavalkoinen ääriviiva
Se kuulostaa melko yksinkertaiselta: aloita mustavalkoinen rautalanka muotoiluun. Ajattele kortin tarkoitusta ja mitä osia siitä napsautetaan tai tapetaan. (Koko kortti voi toimia linkkinä.)
Suunnittele elementtejä kuten välilyöntiä, kuvia ja typografiaa niin, että näet kortin ilman värejä tai kaunistuksia. Ajattele sitä mallin "pelikortti" -vaiheena. Kaikki kortin elementit ovat siellä. Näyttääkö siltä, että on helppo ymmärtää kehys?
Ajattele, miten käytät sitä tässä vaiheessa. Mistä napsautat operaatiota varten? Onko kuvio ja tulos selkeä? Kuinka palataan tai etenee? Näihin kysymyksiin olisi vastattava ilman vihjeitä, kuten punaista "klikkaa tästä" -painiketta vilkkuvan näytöllä.
Kuten missä tahansa muussa projektissa, jos ääriviivat eivät toimi mustavalkoisena, lopullinen muotoilu ei todennäköisesti tulekaan.
Käytä liioiteltua etäisyyttä
Suurin haaste korttitapahtumissa on luoda kompakti muotoilu, joka ei tunnu sekavalta. Siellä tulee tyhjää tilaa. Ja sinun kannattaa käyttää enemmän kuin miellyttää aluksi.
Lisävarusteiden lisääminen antaa elementtejä enemmän tilaa hengittää, jolloin koko kortti näyttää tilavammalta ja lisää luettavuutta.
Yleensä kannattaa aloittaa kahdesti sellainen välilyönti, jota normaalisti kannattaa harkita elementtien välillä. Kourujen tulisi olla erittäin leveitä ja linjasivut voisivat käyttää ylimääräistä tilaa. Lisätila auttaa sinua luomaan avoimen mallin ja järjestämään sisällön selkeämmin. Kortilla on melko rajallinen kangas ja sen pitäisi sovi yhdelle näytölle puhelimessa ja samanlainen koko näytön osa suuremmissa laitteissa, kuten tablet-laitteissa tai työpöyissä. Kortit voivat myös kilpailla muita kortteja vastaan kiinnittäen huomiota suuremmissa näytöissä. Lisätty välilyönti auttaa koko mallia tuntemaan itsesi avoimeksi ja helposti sukelluksi.
Lisää luonnollinen väri ja varjostus
Nyt olet valmis ajattelemaan suunnittelun värejä ja varjostusta. Pidä se luonnollisena näköisenä ja jäljittelee todellisuutta mallin varjossa ja tyyleissä.
Ei, emme puhu skeuomorfismia täällä, puhumme luodaksemme luonnollisia ääriviivoja ja varjoja. Ajattele kortin katselua. Käyttäjän tulisi saada sama tunne kuin jos hän todella pitäisi sitä.
Käytä joitain fysiikan perusohjeita kuvitellaksesi (ja muotoilemaan) jokaisen kortin, kuten pidettäisiin:
- Valaistuksen tulisi antaa varjoja taakse ja pohjaan.
- Mallin tummimpi osa on todennäköisesti alhaalla valaistusolojen ansiosta, jotka yleensä tulevat ylhäältä.
- Vältä sisältöä alueilta, jotka vaaditaan kortin pitämiseen.
- Kosketuspisteet (ja niihin liittyvät toimintapyynnöt) olisi oltava yhteyspisteitä ja niiden on oltava helposti vuorovaikutuksessa. (Aivan kuten pelikortin kasvot ovat mallin keskellä.)
- Yksi kortti on yhtä informaatiota.
Luo yksinkertaisia kerroksia
Nyt kun ajatellaan fysiikkaa, siirrä se seuraavalle tasolle yksinkertaisella kerroksella luomalla yhtenäinen korttityyli koko käyttöliittymälle. Etkö ole varma mistä aloittaa? Googlen Materiaalin suunnitteluohjeet ovat hyvä lähtökohta.
"Aineiston suunnittelussa paperin fysikaaliset ominaisuudet muunnetaan näytölle. Hakemuksen taustalla on paperiarkin tasainen, läpikuultava rakenne.
Sovelluksen käyttäytyminen jäljittelee paperin kykyä koota uudelleen, sekoittua ja yhdistää useita arkkeja. Sovellusten ulkopuolella olevat elementit, kuten tilat tai järjestelmäpalkit, saavat erilainen kohtelu. Ne ovat erillään sovelluksen sisällöstä, eivätkä ne sisällä paperin fyysisiä ominaisuuksia.
Katkaise tämä alas ja se palaa digitaalisen kohteen esiin ja tuntuu fyysiseltä. Ja jos käyttäjät haluavat koskettaa sitä, he haluavat napsauttaa sitä. Konsepti on vain yksinkertainen.
Tartu yksinkertaisiin kirjasintyyleihin
Typografian osalta yksinkertaiset sans serifit ovat usein vastaus. Vältä erittäin ohuita tai tiivistettyjä vaihtoehtoja, koska ne voivat olla hieman kovempia silmiin.
Useimmat kortit toimivat parhaiten kahdella kirjasintyypillä (vaikka ne ovatkin samasta perheestä) - jotain päärungolle ja toinen otsikosta tai toiminnasta. Tärkein tekijä typografiassa on muistaa ottaa runsaasti kontrastia niin, että tekstin elementit ovat helppoja lukea. Muista sisällyttää kontrasti fonttien ja kontrastin välillä kunkin kortin taustan ja tekstin elementtien välillä.
Rajoita UI-elementit
Toista sen jälkeen: yksi kortti on yhtä toimintaa.
Joten todennäköisesti sinun ei tarvitse sisällyttää joukkoa käyttöliittymän elementtejä, kuten painikkeita koko suunnittelussa.
Et ehkä edes tarvitse painiketta ollenkaan korttityylisessä suunnittelussa.
Mutta jos luulet, että käyttäjät tarvitsevat visuaalisen vihjeen, yksi painike riittää. Pidä muoto ja muotoilu yksinkertaisena - taas materiaalisuunnittelutapa on hyvä vaihtoehto - ja pidä vain yhdestä painikkeesta.
Painike on luultavasti ainoa UI-elementti, jota tarvitset. Tämä on sinun suunnittelutavoitteesi.
johtopäätös
Täydelliselle kortille ei ole taikuutta, mutta on olemassa joitakin suunnitteluvirheitä, jotka voivat kannustaa kaikkia käyttäjiä napsauttamaan (tai napauttamalla). Pidä muotoilusi tosiasiallisesti kesken, noudata minimalistista lähestymistapaa, jossa on runsaasti tilaa ja kontrastia, painotetaan yksinkertaista typografiaa ja luodaan yksi toiminto jokaiselle kortille.
Tämän ääriviivan avulla voit parhaiten kuvitella ja konseptoida korttityylisiä projekteja, joita käyttäjät haluavat vuorovaikutuksessa. Yhdistä nämä ideat suunnitteluteoriaan ja hullu taitoja suuri projekti, joka on hauskaa käyttäjille ja esteettisesti trendi.