Uusimmat trendit web-suunnittelun maailmassa: tapaa Card Design! Korttisuunnittelun tehokkuuden salaisuudet - SkillsUp - kätevä luettelo suunnitteluoppia, tietokonegrafiikkaa, Photoshop-tunteja, Photoshop-tunteja

Haluatko kehittää trendikkään korttityylisen käyttöliittymän? Tämä ei ehkä ole huono idea. Kortit ovat suosittuja ja käyttäjäystävällisiä, sopivat kaikenlaisille digitaalinen suunnittelu ja kaikenkokoisille näytöille. Avain onnistuneeseen suunnitteluun korttityyli- luoda jotain, jota käyttäjä haluaa napsauttaa. Kortin tulee toimia säiliönä tiettyä sisältöä- linkit, kirjautumislomakkeet, videosoittimet jne. - joiden kanssa käyttäjä haluaa olla vuorovaikutuksessa. Näin luot tämän mallin.

Aloita mustavalkoisilla ääriviivoilla

Kuulostaa hyvin yksinkertaiselta: aloita mallisi mustavalkoisesta mallista. Mieti korttien tarkoitusta ja mitä osia niistä voidaan klikata. (Koko kortti voi toimia linkkinä.)

Suunnittele elementit: tyhjä tila, kuvat ja typografia niin, että näet kortin ilman värejä tai kuvioita. Ajattele sitä pelikorttien suunnitteluvaiheena. Kaikki karttaelementit ovat paikoillaan. Onko ulkoasu helppo ymmärtää?

Mieti, kuinka käytät kortteja tässä vaiheessa. Mitä napsautat suorittaaksesi tämän tai toisen toiminnon? Onko rakenne ja tulos selkeät? Miten aiot mennä taaksepäin tai päinvastoin, ottaa askeleen eteenpäin? Vastausten näihin kysymyksiin tulee olla selkeitä ilman kehotuksia, kuten punaisia ​​"Klikkaa tästä" -merkkejä.

Kuten muissakin projekteissa, jos malli ei toimi mustavalkoisena, lopullinen, täysin suunniteltu versio ei myöskään toimi.

Käytä paljon vapaata tilaa

Vaikein asia korttityylisessä suunnittelussa ei ole saada sitä näyttämään sekavalta ja ylikuormitetulta. Tässä avaruudella on suuri rooli. Ja haluat käyttää vapaata tilaa paljon enemmän kuin tuntuu mukavalta.

"Ilman" runsaus antaa tilaa suunnitteluelementeille, tekee kaikista korteista visuaalisesti tilavampia ja lisää luettavuutta.

Haluat luultavasti aloittaa kaksinkertaisella tavanomaista tilaa elementtien välillä. Korttien välisten etäisyyksien tulee olla suuria, ja voit myös lisätä vapaata tilaa riviväli. Erittäin suuri määrä ilmaa auttaa sinua luomaan avoin muotoilu ja järjestä sisältö ilmeisimmällä tavalla. Kortti on kooltaan rajoitettu ja sen tulee mahtua älypuhelimen näytölle sekä loogisesti ja suhteellisesti muuttaa tabletin ja näytön kokoa. Päällä isot näytöt kortit voivat myös kääntää käyttäjän huomion pois toisistaan. "Ilman" lisääminen tekee yleisestä suunnittelusta avoimemman ja siihen on helppo syventyä.

Lisää luonnollisia värejä ja sävyjä

Nyt olet valmis miettimään suunnittelusi värejä ja sävyjä. Yritä antaa sille luonnollinen ilme ja tuo kortteihin realistinen ilme käyttämällä varjoja ja tyylejä.

Tässä ei ole kyse skeomorfismista, vaan luonnollisten ääriviivojen ja varjojen värien luomisesta. Mieti, miltä oikea kortti näyttäisi. Käyttäjän pitäisi tuntea olonsa ikään kuin he pitävät korttia kädessään.

Käytä useita fyysisiä sääntöjä, jotka ovat voimassa, kun pidät korttia käsissäsi:

• Valaistus luo varjoja kortin alle ja alaosaan.
• Kuvion tummin kohta on kuvion alareunassa, koska normaalisti kun korttia pitää kädessä, valo tulee ylhäältä.
• Vältä julkaisemasta sisältöä paikkoihin, joissa pidät korttia käsissäsi.
• Kosketuspisteiden (toimintakehotusten jne.) tulee olla keskipisteessä ja vuorovaikutuksen tulee olla helppoa ja selkeää. (Sama kuin sisällä pelikortit, pääelementti on kuvion keskellä).
• Yksi kortti - yksi tietoyksikkö.

Pidä se yksinkertaisena

Nyt, pitäen fyysiset ominaisuudet mielessä, siirry eteenpäin seuraava askel— luoda yhteinen korttityyli koko käyttöliittymälle. Etkö tiedä mistä aloittaa? Hyvä lähtökohta olisi Materiaalisuunnittelun opas Googlelta.

"SISÄÄN Materiaalisuunnittelu paperin fyysiset ominaisuudet siirtyvät näytölle. Sovelluksen tausta on tasainen, yhtenäinen paperiarkin rakenne.

Sovelluksen elementit käyttäytyvät kuin paperi - myös niiden koko muuttuu, niitä rullataan ja kerätään pinoon. Sovelluksen ulkopuoliset elementit, kuten tilapalkki, toimivat eri tavalla. Ne ovat erillisiä sovelluksen sisällöstä eivätkä peri paperin fyysisiä ominaisuuksia."

Pidä nämä ohjeet mielessä ja yritä luoda digitaalinen esine, joka näyttää ja tuntuu fyysiseltä. Jos käyttäjät haluavat koskettaa sitä, he napsauttavat sitä. Konsepti on yksinkertainen.

Valitse yksinkertaiset fontit

Mitä tulee typografiaan, useimmiten paras ratkaisu tahtoa yksinkertaiset fontit ilman serifiä. Vältä liian ohuita tai kapeita fontteja, koska ne voivat olla hankalia silmälle.

Useimmat kortit toimivat hyvin kahdella kirjasimella (vaikka ne olisivat samasta perheestä) – yksi koko tekstiä varten ja toinen otsikkoa tai toimintakehotusta varten. Toinen tärkeä pointti Yksi asia, joka on pidettävä mielessä typografian kanssa työskennellessä, on kontrasti, joka tekee tekstistä helpompi lukea. Muista ottaa huomioon kunkin kortin fonttien sekä taustan ja tekstin väliset kontrastit.

Rajoita käyttöliittymän elementtejä

Muista: yksi kortti vastaa yhtä toimintaa.

Tämä tarkoittaa, että sinun ei tarvitse hajottaa joukkoa käyttöliittymäelementtejä suunnittelun läpi, kuten painikkeita. Et ehkä tarvitse niitä ollenkaan. Mutta jos olet edelleen sitä mieltä, että käyttäjä tarvitsee visuaalisen vihjeen, yksi painike riittää.

Pidä muodot ja suunnittelu yksinkertaisina – materiaalisuunnittelu on jälleen loistava vaihtoehto – ja yritä olla tekemättä useampaa kuin yhtä painiketta.

Painikkeet ovat luultavasti ainoa käyttöliittymäelementti, jota tarvitset. Pyri siihen.

Johtopäätös

Täydelliseen korttityyliseen suunnitteluun ei ole taikareseptiä, mutta on olemassa tiettyjä tekniikoita, jotka houkuttelevat käyttäjät napsauttamaan haluamaasi paikkaan. Pyri olemaan lähempänä todellisuutta, valitse minimalismi iso määrä ilmaa ja kontrastia, suosi yksinkertaista typografiaa ja merkitse yksi toiminto jokaiselle kortille.

Käännös - Työhuone

Lomat ovat ohi, joten on aika piristää ja miettiä tulevaisuuden suunnitelmia, tulevia projekteja ja näkymiä. Wixillä niin kauan kuin muistamme, odotamme uutta vuotta innolla ja uteliaisuudella. Vuosi 2015 on edessä, ja se tuo varmasti paljon mielenkiintoista web-suunnittelun alalle.

Emme tietenkään voi ennustaa kaikkea, mitä tapahtuu, mutta meillä on joitain arvauksia. Muista, että se ei ole vain kätevää, vaan myös moderni alusta, joten seuraamme tarkasti kaikkea mitä tapahtuu ja tiedämme, missä muutoksen tuulet puhaltavat.

Kiinnittää turvavyöt, rakkaat ystävät, matka tulevaisuuteen alkaa! Tänä vuonna näemme erittäin mielenkiintoisia trendejä:

Materiaalisuunnittelu

Keksitty eräänlainen "litteä" muotoilu Googlelta. Idea perustuu perinteisiin suunnittelutekniikoihin ja todelliseen fyysisiä ilmiöitä, mukautettu verkkoon. Tuloksena on monikerroksisia rajapintoja, jotka voivat välittää materiaalien ominaisuuksia, valaistusta ja simuloida liikkeitä todellista maailmaa. Esimerkki siitä, miltä tämä näyttää, löytyy tästä linkistä.

Animaatio

Ghost-painikkeet

Unohda näyttävät toimintakehotuspainikkeet. Nykyään yksinkertainen ja läpinäkyviä elementtejä, erotettu taustasta ohut runko. Ne ovat yleensä suurempia kuin vakiopainikkeet ja sijaitsevat sivun näkyvimmällä paikalla. Vaatimaton ulkomuoto Tämä ei tarkoita, että kukaan ei huomaa tai paina sellaisia ​​painikkeita, päinvastoin, ihmiset todella pitävät niiden elegantista yksinkertaisuudesta ja merkityksellisyydestä. Meillä on muuten juuri tällaisia ​​elementtejä (ja Urban Cupin nettisivuilla tämä trendi on jo käytössä täysillä).

Tarinankerronta

Tarinankerronta web-suunnittelussa tarkoittaa, että sivuston tulee kertoa tarina vierailijoille - ei kirjaimellisesti tietenkin, mutta niiden tunteiden kautta, jotka syntyvät ihmisessä katseluhetkellä. Tätä varten voit käyttää merkityksellisesti toisiinsa liittyviä kuvia ja tekstejä tai interaktiivista rullausta, jotta lukija ei ole vain katsoja, vaan myös osallistuja. On niin monia tapoja kertoa tarina suunnittelun avulla, ja toivomme, että tämä trendi tulee entistä suositummaksi vuonna 2015. Hieno esimerkki tarinankerronta on nähtävissä tällä Wix-sivustolla.

Kortin suunnittelu

Joustavampi ja demokraattisempi versio niin sanotusta "laattasuunnittelusta", josta maailma sai ensimmäisen kerran tietää vuonna 2010 Pinterest-palvelun ansiosta. Kortteja käytetään nyt liikkumisen lähtökohtana sivustolla: tämä on ilmoitus materiaalista, joka aukeaa napsauttamalla. Tulevana vuonna korttisuunnittelu kehittyy edelleen uusien tyylien ja interaktiivisten vaihtoehtojen myötä. Jos haluat tehdä tällaisen verkkosivuston, suosittelemme käyttämään .

Video taustana

Kauniit videot, joita videosoittimen kehys ei rajoita, näyttävät siistiltä ja korvaavat perinteiset taustakuvia. Ja se ei ole yllättävää - se on raikas, kaunis, voit keksiä jotain uutta videolla, ja se sopii hyvin yllä mainitun tarinankerronta-idean kanssa. Tämä tausta määrittelee koko sivuston konseptin, elävöittää sitä ja luo dynamiikkaa. Tutustu Zenitin verkkosivustoon ja katso kuinka kaunis se on.

Selaa napsautuksen sijaan

Hyvä esimerkki kuten mobiililiitännät vaikutti web-suunnitteluun. Kosketuslaitteiden yleisyys on muuttanut tapaa, jolla käytät sivuja: nyt toiminta on tuttua, ja "napsauttaminen" on vähemmän intuitiivista ja luonnollisella tavalla navigointi. Nykyään on yleinen käytäntö julkaista sisältö erillisellä sivulla pystysuora sivu ja jaa sitä ei osiin, vaan "näytöksiin". Wixissä tehty Madsschou-verkkosivusto havainnollistaa tätä ideaa täydellisesti.

Mikrovuorovaikutuksia

Verkkosuunnitteluun vaikuttavat tänä vuonna uudet tavat houkutella verkkosivuston kävijöitä. Logiikka on tämä: aina kun pyydät henkilöä suorittamaan toiminnon, syntyy vuorovaikutus. Siirtyminen mikrovuorovaikutuksiin on yritys luoda joillekin mahdollisimman monta syytä pieniä tekoja. Klassisia esimerkkejä ovat sähköpostitilausikkuna tai ominaisuus, jolla voit antaa arvioita. Tuleeko vuonna 2015 jotain uutta? Olemme valmiita lyömään vetoa kyllä.

26.12.2016

Kortit ovat siistejä pieniä tietosäiliöitä.. Korteista on tullut melkein pakollinen elementti kun on kyse estetiikan ja yksinkertaisen käytettävyyden tasapainottamisesta. Korttisuunnittelun esittelivät alun perin Pinterestin ja Facebookin kaltaiset palvelut, ja nykyään sen vaikutus on levinnyt monille toimialoille.

Hyvin toteutettu korttisuunnittelu voi parantaa käyttökokemusta ( Käyttäjäkokemus) hakemuksestasi. Tässä artikkelissa kuvailen 5 hyödyllistä tekniikkaa korttisuunnittelun toteuttamiseen ja annan mielenkiintoisia esimerkkejä.

• Lue myös:

1. Noudata sääntöä "Yksi kortti - yksi käsite"

2. Kortin koko pinnan on oltava napsautettava

Seuraa Fittsin laki ja salli käyttäjien napsauttaa/napauttaa mitä tahansa kortin osaa, ei vain tekstilinkkejä tai kuvia. Suuri kosketuspinta parantaa merkittävästi käytettävyyttä sekä kosketusnäytöissä että hiirtä käyttävissä laitteissa.

Neuvoja: on hyvä, kun kortit luovat varjon ja osoittavat syvyyttä - tämä on vahvistaa visuaalisesti kortin napsautettavuuden.

3. Tee korteista houkuttelevia

Kortin suunnittelu toimii, koska hyvä muotoilu ja erinomainen käytettävyys. Lisäämällä kortteihin estetiikkaa, teet niistä tunnistettavia ja luovia.

Kortin suunnittelussa sinun on keskityttävä seuraaviin kohtiin:

Kuvat

Kuvien painottaminen on korttisuunnittelun vahvuus. Tutkimus vahvistaa että kuvat "kohottavat" suunnittelua. Näin kuvien käyttöön keskittyminen tekee kortin käyttöliittymäsuunnittelusta houkuttelevamman käyttäjille.

Varjot ja liukuvärit

Varjot ja kaltevuudet ovat poissa pitkän matkan tuntea ja yhdistää fyysisiin kollegoihinsa. Mutta mieti tarkkaan, kuinka käytät varjoja ja kaltevuksia: jos varjoja heitetään kaikista kulmista ja sivuilta, illuusio siitä, että kortti on fyysinen esine, tuhoutuu.

Typografia

Voit myös herättää käyttäjän huomion tekstin avulla. Kaiken kortin suunnittelussa tulee olla helposti luettavaa ja ymmärrettävää:

• Käyttää yksinkertaiset fontit Ja väripaletteja(teksti on parasta lukea kontrastista taustaa vasten).
• Yritä käyttää vähimmäismäärää fontteja. Kortin suunnitteluun yksi fontti on enemmän kuin tarpeeksi.

Neuvoja: Tavallinen sans-serif-fontti sopii erinomaisesti korteille.

• Lue myös:

4. Rajoita kortin sisältöä

Kortit ovat yleensä ytimekkäitä ja sisältävät linkin lisätietoihin. yksityiskohtainen tieto. Kun yrität pakata liikaa sisältöä korttiin tekemällä siitä liian leveä tai liian pitkä, se menettää alkuperäisen viestinsä, koska se ei enää näytä kortilta.

Alla on esimerkki kortin käyttöliittymästä. Huomaa keskellä oleva kortti. Ongelmana on, että siinä on paljon tietoa, mikä vaikeuttaa kortin ymmärtämistä.

5. Hyödynnä animaatiota ja liikettä

Animaatioilla voi olla positiivinen vaikutus käyttökokemukseen, jos niitä käytetään oikein. Ne auttavat ihmisiä navigoimaan paremmin kortin käyttöliittymässä ja luomaan visuaalisia yhteyksiä niiden välille erilaisia ​​ehtoja jokaiselle kortille.

Visuaaliset vihjeet

Visuaaliset vihjeet auttavat käyttäjiä ymmärtämään, kuinka heidän kanssaan on parasta olla vuorovaikutuksessa käyttöliittymä. Tämän tyyppistä animaatiota käytetään, kun haluat osoittaa, kuinka tietyt suunnittelutoiminnot toimivat.

Visuaalinen palaute

Visuaalinen palaute on erittäin tärkeää käyttöliittymäsuunnittelussa. Se toimii, koska se tyydyttää käyttäjän luonnollisen halun vahvistus. Tosielämässä esineet reagoivat vuorovaikutukseen, ja tätä ihmiset odottavat esineiltä. Voit käyttää työpöytäsovelluksia tai verkkosivustoja leijuva vaikutus osoittaa, että esineiden kanssa voidaan olla vuorovaikutuksessa. Hover-animaatio lisää ymmärryksen tasoa ja tekee samalla käyttökokemuksesta viihdyttävämmän.

Hover-tehosteen avulla voit myös avata vaihtoehtoja. Alla olevassa esimerkissä hover-tehosteen avulla käyttäjät voivat muuttaa värejä, vastata viesteihin, lähettää niitä tai poistaa niitä.

Visuaalisen vetovoimansa ansiosta korttien käyttöliittymät ovat enemmän kuin pelkkä trendi.

Vuonna 2014 Internetiä alettiin käyttää mobiililaitteissa useammin kuin tietokoneissa. Siksi nykypäivän web-suunnittelu suosii pieniä näyttöjä ja mukautuva muotoilu tulee pakolliseksi. Mitä voimme sanoa vuodesta 2018, jolloin RNS-uutistoimiston tilastojen mukaan 54 prosenttia venäläisistä käyttää jo Mobiili internet. Tämän seurauksena sisään yksinkertaisia ​​tyylejä käyttöliittymä, kuten uusi litteä muotoilu, minimalismi ja erityisesti kortit ovat nyt suositumpia kuin koskaan.

Kortin käyttöliittymäkuvion soveltuvuus on muutakin kuin nopeat latausajat ja mukautumiskyky erilaisia ​​kokoja näytöt. Rajoitettu sisältö sopii useimpien verkkokäyttäjien huomioalueeseen (etenkin mobiililaitteissa). Pinterestin ylläpitämä ja sitten sosiaalisten verkostojen, kuten Facebookin ja Twitterin, suosion saanut korttimalli löytyy nyt kaikkien toimialojen verkkosivustoilta.

Tässä artikkelissa tutkimme kortin käyttöliittymämallin nousua: miksi se on käytännöllinen, miten se on yhteensopiva responsiivisen ja materiaalisen suunnittelun kanssa ja mitä siltä odotetaan tulevaisuudessa.

Mitä on konttiverkkosuunnittelu?

Tämän mallin ymmärtämiseksi sinun on ensin ymmärrettävä, mitä kortit itse ovat. Kortit ovat yleensä pieniä tietosäiliöitä. Jokaisella kortilla on omansa oma aihe. Kortti voi sisältää mitä tahansa sisältöä - visuaalista, tekstiä, linkkejä jne. - mutta kaikki tiedot on omistettu yhdelle aiheelle.

Näytön täyttäminen näillä itsenäisillä tietosäiliöillä on se, mitä The Guardian kutsui "säiliömalliksi". Hän tarjoaa puhdasta ja selkeä käyttöliittymä, ihanteellinen katsaus, joten käyttäjä voi helposti löytää etsimänsä. (Lisäksi tämä menetelmä on ihanteellinen kosketusohjaimille, joista kirjoitamme alla).

Käytännöllinen ja houkutteleva: kortin käyttöliittymäkuvion edut pähkinänkuoressa.

Trellon avulla käyttäjät voivat luoda minkä tahansa kortin. Kuka tahansa voi luoda tehtäväkortteja ja luokitella ne tarpeen mukaan. Tämä osoittaa paitsi korttimallin joustavuuden, myös sen organisointikyvyn. Trello menestyy, koska sen korttimuoto tuntuu yksinkertaisemmalta kuin perinteisen suunnittelijan tehtävälista.

Oletko kiinnostunut? Lue uusin artikkeli, jossa on valikoima vuoden 2018 TOP 18 -trendejä.

Kortin käyttöliittymäkuvio mobiililaitteella ja responsiivinen muotoilu.

Kuten aiemmin todettiin, kortit ovat uskomattoman yhteensopivia responsiivisen suunnittelun kanssa, mikä tekee niistä Intercomin Des Traynorin sanoin "verkon tulevaisuuden". Malli sopii hyvin mobiililaitteet useista syistä, jotka kuvataan alla.

Ensinnäkin, laajenevissa ja supistuvissa kehyksissä korttiruudukko voi järjestellä itsensä uudelleen sopimaan mihin tahansa paikkaan tai näytön kokoon. Suunnittelijat voivat muuttaa korttien kokoa haluamallaan tavalla (ja myös sovittaa ne toisiinsa). Voit esimerkiksi asettaa kiinteän leveyden ja muuttuvan korkeuden vakiovälillä korttien välillä. Käytämme tätä jatkuvasti luodessamme responsiivisia verkkosivustoja.

Vertaa sivuston kuvakaappausta The Verge edellä ja sen mobiiliversio alla:

Huomaa, kuinka teksti, kuvat ja värikuvio pysyvät samoina. Kun kehitetään adaptiivista Web-suunnittelu korttien avulla voit saada pysyvän mallin päälle erilaisia ​​laitteita. Tämä etu näkyy mm ilmainen laboratorio UXPin-muotoilu. Huomaa, kuinka siististi asettelu virtaa mobiiliversio Vastaanottaja koko näytön tila katseleminen.

Mobiiliversion katselualue:

Koko näytön näkymäalue:

Toinen etu on kortin suunnittelun yhteensopivuus kosketusohjaus. Päällä kosketusnäytöt kortit toimivat painikkeiden roolissa. Idea on yksinkertainen: napsauta korttia päästäksesi sisältöön. Kuten verkkosuunnitteluun sovellettu Fittsin laki osoittaa, mitä isompaa painiketta napsautetaan, sitä helpompi se on käyttää. Kuinka usein joudumme kamppailemaan mobiililaitteiden pienten painikkeiden kanssa?

Kortit ja materiaalisuunnittelu

Materiaalisuunnittelu, joka on ihanteellinen , perustuu voimakkaasti kortteihin, ja niiden yksityiskohtainen tekninen analyysi vaatii paljon tilaa. Joten jos haluat kattavan selvityksen, kannattaa lukea materiaalisuunnitteluoppaan korttikuvaukset.

Web-sivuston kehittäminen. Korttisuunnittelun tulevaisuus.

Koska kortin käyttöliittymäkuvio muuttaa muotoaan jatkuvasti vastaamaan uusia vaatimuksia, sillä on todennäköisesti suurin vaikutus reagoivaan ja sovellussuunnitteluun. Tämä muutos perustuu osittain materiaalisuunnittelun sivukohtaiseen vaikutukseen Android-sovelluksiin.

1. Tekniikka

Kortit eivät välttämättä pysy staattisina pitkään. Kun verkkototeutukset paranevat, myös niiden kyky tukea lisää multimediasisältöä. Näemme todennäköisesti paljon yksityiskohtaisempia elementtejä, kuten automaattisesti päivittyvää sisältöä, jotka eivät hidasta yleistä kokemusta.

Yhä useammin videot korvaavat kuvia (ajatus, jolla jotkut suunnittelijat ovat leikkineet vuosia). Käytä käyttöliittymääsi (yllä) käyttää animoituja GIF-kortteja, jotka täyttyvät kotisivu paljon tietoa.

2. Vuorovaikutuksen syventäminen

Lähitulevaisuudessa korttien käytön luovuus saattaa myös lisääntyä, eivätkä ne ole enää vain linkkejä. Kuten esimerkissä näemme materiaalin suunnittelu, kortit vaihtelevat vuorovaikutuksen tasossa itsensä ja ympäristön välillä, kuten automaattinen lajittelu ja reaaliaikaiset päivitykset (kuten sääennusteet).

Windows Phone on jo ottanut käyttöön automaattisen korttien lajittelun, mutta tätä lähestymistapaa voitaisiin mahdollisesti soveltaa muiden mobiililaitteiden käyttäjiin.

Koko 3

Sarjakuvahahmojen trendin mukaisesti korteissa käytetään myös "isompi sitä parempi" -periaatetta.
Suuremmat kortit mahdollistavat enemmän yksityiskohtia ja monimutkaisempaa typografiaa, mikä puolestaan ​​tarkoittaa enemmän mahdollisuuksia hämmästyttäviin visuaalinen suunnittelu. Vuorotellen pienempien korttien kanssa käytettynä suuret kortit tarjoavat suuremman visuaalisen vapauden.

MITEN Arkitekter (yllä) sekoittaa suuria ja keskikokoisia kortteja navigoinnissa. Jotkut kortit ovat linkkejä, kun taas toiset vain esittävät staattista tietoa. Leveät tilat erottavat kortit, mikä antaa suunnittelulle ilmavan tunnelman.

4. Puettavat laitteet

Kiitokset Google-lasi, korteista on nyt tullut keskeinen osa puettavien laitteiden käyttöliittymäsuunnittelua.

Vaikka kriitikot saattavat pitää Google Glassia kaupallisena epäonnistumisena, jotkut uskovat, että sillä on mahdollisuus markkinoilla. Mitä tahansa, puettavien laitteiden on käytettävä tilaa tehokkaasti. Ja tässä tapauksessa kortit ovat käytännöllisin valinta.

Verkkosivustojen kehitys 2016-2018. Johtopäätös

Korttisuunnittelusta tulee organisaation ja toimivuuden perusta kaikissa ympäristöissä ja laitteissa. Niiden nykyinen muoto saattaa muuttua, kun ne kehittyvät teknologian rinnalla, mutta niiden läsnäolo on taattu. Digitalisoidut alueet näytöillä tuskin ovat korttien ensisijainen muoto. Älä unohda, että viime aikoihin asti kortti oli vain paperi, joka sisälsi joukon tietoja tietystä aiheesta.

Lue artikkeli toisesta - duotone tai duplex.

Verkkosuunnittelu on erittäin dynaamista. Näemme jatkuvasti, kuinka verkkosivustojen ulkoasu muuttuu uusien teknologioiden, menetelmien, trendien ja tyylien myötä. Joten nykyään johtava konsepti on korttisuunnittelu.

Voit nähdä sen kaikkialla: kiinteistötoimistojen verkkosivuilta uutisportaaleihin. Itse asiassa Internet-jättiläiset, kuten Twitter, Facebook ja Google, käyttävät myös korttimalleja.

Kortit sisään tässä tapauksessa, nämä ovat pieniä täytettyjä suorakulmioita interaktiivisia kuvia ja tiedot. Niistä on tullut suosittuja ensisijaisesti herkkyytensä, esteettisyytensä ja käytännöllisyytensä vuoksi.

Vaikka on olemassa monia vääriä käsityksiä siitä, mitä korttisuunnitteluksi voidaan pitää, yksi asia on varma: kortit eivät ole vain suorakulmioita verkkosivustoilla. Jotta tietty malli voidaan luokitella korttimalliksi, sillä on oltava toiminnallisuutta ja olla omavarainen.

Ehkä paras metafora kuvaamaan kortin suunnittelua on seuraava sanonta: "Kortti on litteä, mutta siinä on kaksi puolta." Toisin sanoen jokaisen kortin ei pitäisi sisältää vain jonkinlaista sisältöä, vaan myös tarjota kuluttajille mahdollisuus olla vuorovaikutuksessa sen kanssa jollakin tavalla.

Yksinkertaisesti sanottuna kortit eivät ole vain Kaunis muotoilu, mutta helppokäyttöinen.

Erilaisia ​​korttimalleja

Kortin suunnittelu on kokenut merkittäviä muutoksia sen perustamisen jälkeen. Ja nyt se voidaan tehdä seuraavilla tyyleillä.

1. Tasainen muotoilu

Kortin litteä muotoilu esiteltiin ensimmäisen kerran Microsoftilta vuonna 2006 ja perustui suunnittelutyyliin GUI Metro, joka näyttää melko kiinteältä ja värikkäältä. Totta, hänen moderni versio Gradientit, varjot ja skuemorfismi ovat yleisemmin käytössä.

2. Aikakauslehden tyyli

Lehden tyylisuunnittelu vaatii hyvää visuaalinen tasapaino. Kortit sisältävät tässä tapauksessa kuvan ja tekstin sisältävän lohkon, joka toimii "tiiserinä", eli houkuttelee vierailijan tarkempiin tietoihin toisella sivulla tai sivustolla. Kuten nimestä voi päätellä, tätä mallia käytetään aikakauslehtien verkkosivuilla ja uutisportaalit, mutta sopii myös muihin suureen sisältöön keskittyviin resursseihin, kuten blogeihin tai portfolioihin, sekä säännöllisesti päivittyville sivustoille.

Tämä tyyli näkyy sivustolla sosiaalipalvelu Pinterestistä on tullut suosittu teemasuunnittelutrendi WordPress-alustalle. Aluksi kortit sisälsivät vain linkkejä ja tietyn määrän tietyntyyppistä sisältöä. Ne voivat nyt sisältää enemmän linkkejä ja sisältötyyppejä, kuten videoita, lomakkeita, kuvia ja jakamistyökaluja. sosiaalisissa verkostoissa. Joissakin käyttöliittymissä kortit tarjoavat minivuorovaikutusvaihtoehtoja, kuten Facebook-ilmoitusten kytkemisen päälle/pois.

Tunnetaan myös nimellä "muuraus"-tyyli, se sisältää lohkoja, jotka on kytketty toisiinsa tai jaettu koko asettelun läpi.

Kuinka käyttää korttisuunnittelua tehokkaasti?

On monia syitä, miksi korttityyliset mallit ovat niin suosittuja. Tässä on vain muutamia niistä:

• Useat suunnittelutyylit ovat yhteensopivia tämän muodon kanssa tasaisista malleista monimutkaisempiin lajikkeisiin.
• Se toimii hyvin kanssa eri tyyppejä sisältöä ja helpottaa sen käyttöä.
• Se toimii hyvin responsiivisten kehysten kanssa.
• Se antaa järjestelmälliselle ja jäsennellylle ilmeelle paljon tietoa.

varten tämän tyyppistä suunnittelussa ei ole kiinteitä sääntöjä. Kuitenkin kaksi elementtiä, jotka ovat lähes aina läsnä tehokkaissa korttiasetteluissa, ovat yksinkertaisuus ja monipuolinen sisältö. On myös tekniikoita, jotka voivat parantaa korttisuunnittelun estetiikkaa ja toimivuutta.

Tyhjä tila

Yhteinen elementti korttisuunnittelussa on tyhjä tila. Tämä on välttämätöntä, jotta kaikki elementit ovat selvästi näkyvissä ja ymmärrettävissä. Loppujen lopuksi sinulla on vain 600 kuvapisteen alue, ja sinun on varmistettava, että otsikko, toimintakehotuspainike, kuvat ja linkkiteksti ovat näkyvästi esillä ja tekevät työnsä tehokkaasti.

Kunkin elementin ympärillä oleva runsaasti tyhjää tilaa antaa sivuston vierailijoille aikaa käsitellä näkemäänsä katsoessaan kortista toiseen.

Jokaisella kortilla on oma sisältönsä

Selkeät kuvat

Korttipohjaisessa suunnittelussa kuvat ovat kriittisiä. Niiden on oltava moitteettomia, jopa rajoitettuihin tiloihin sijoitettaessa kiinnittääkseen huomion. Jos kuvia ei ole, käytä taiteellista fonttia tai luovaa otsikkoa kiinnittääksesi vierailijoiden huomion.

Yksinkertaiset fontit

Fontti ei saa häiritä huomiota kuvasta. Käytä tätä varten yksinkertaista fonttia, jonka väri on helppolukuinen, eli musta ja harmaa. Suosituimmat fontit ovat neutraalin muotoilunsa ja helppolukuisuutensa vuoksi sans serif -fontteja. Lisäksi on suositeltavaa käyttää yhtä fonttityyppiä eri kokoisina.

Odottamattomia yksityiskohtia

Yllätyselementti tekee ihmeitä. Kokeile lisäämällä odottamattomia yksityiskohtia, kuten 3D-tehostetta tai luovaa reunakäsittelyä, jotta suunnittelustasi tulee omaperäisempi. Muita tehokkaiksi osoittautuneita menetelmiä ovat hover-tehosteet ja väripeitto. Voit myös soveltaa vaikutusta vain useimpiin merkityksellistä sisältöä tasapainottaaksesi kunkin kortin visuaalisen painon.

Avoin verkko

Yhtä tärkeitä ovat elementit jokaisen kortin sisällä? tärkeä niiden välissä on tilaa. Luo ruudukkokehys, joka lisää kontrastia ja varmistaa tasaisen etäisyyden korttien ja niiden elementtien välillä. Tämä tulee entistä tärkeämmäksi, kun harkitset keskeytyskohtien sijoittamista reagoivaan asetteluun.

Käytettävyys

Muotoilussa ei ole kyse vain estetiikasta, vaan myös käytettävyydestä. Suunnittelun tulisi rohkaista käyttäjiä ryhtymään toimiin: napsauttamalla tilauspainiketta, lukemaan koko artikkeli tai ostamaan tuote. Käyttöliittymäsi perimmäinen tavoite on tarjota helppokäyttöinen käyttökokemus, joka saa käyttäjät tekemään haluamasi toiminnot.

Tämän lisäksi sinun tulee myös tarkistaa, miten kukin käyttöliittymäelementti toimii, erityisesti sivuston mobiiliversiossa. Toisin sanoen sinun ei tarvitse ajatella vain sitä, kuinka kätevää on napsauttaa elementtejä hiirellä, vaan myös sitä, kuinka kätevää on olla vuorovaikutuksessa niiden kanssa käyttämällä tekniikoita, kuten pyyhkäisyä (sormen liu'uttaminen näytöllä) ja napautus (lyhyt). kosketa näyttöä). Varmista myös, että painikkeet ovat selvästi näkyvissä ja helppokäyttöisiä. Tämä tietysti edellyttää, että elementtien välissä on riittävästi tilaa, jotta estetään väärän painikkeen vahingossa koskeminen tai väärän toiminnon käynnistäminen.

Korttien lajittelu

Kun kortin suunnittelu on valmis, seuraava askel on määrittää, mitä tietoja nämä kortit sisältävät. Pitäisikö sisältö ryhmitellä tyypin tai aiheen mukaan? Mihin kategoriaan tämä tai tuo sisältö kuuluu? Paras tapa kaiken tämän sisällön järjestäminen käyttäjäystävällisellä tavalla on korttilajittelu.

Voit tehdä tämän käyttämällä kynää ja paperia tai voit käyttää sivustoja, kuten ConceptCodify tai Optimal Workshop. Jokaisella menetelmällä on hyvät ja huonot puolensa, vaikka offline-menetelmä vaatiikin yksilöllisemmän lähestymistavan.

Korttisuunnittelu on yksi parhaista joustavat muodot sivuston ulkoasu, jonka avulla voit luoda erinomaisen käyttökokemuksen. Kortit ovat myös esteettisesti miellyttäviä silmälle. Käyttäjät etsivät jatkuvasti tapoja kuluttaa nopeasti Suuri määrä tietoja, mutta kortin suunnittelu mahdollistaa sen helposti ja nopeasti.