Dizajn karty je definitívnym sprievodcom. Použite zvýšené zarážky. Nie je to len ďalší výstrelok

Vďaka vizuálna príťažlivosť, rozhrania kariet sú viac ako len trend.

V roku 2014 sa internet na mobilných zariadeniach prvýkrát začal používať častejšie ako na počítačoch. Preto dnes webový dizajn uprednostňuje malé obrazovky a responzívny dizajn sa stáva nevyhnutnosťou. Čo môžeme povedať o roku 2018, keď podľa štatistík tlačová agentúra RNS už 54 % Rusov používa mobilný internet. V dôsledku toho v jednoduché štýly Rozhrania ako nový plochý dizajn, minimalizmus a najmä karty sú teraz populárnejšie ako kedykoľvek predtým.

Vhodnosť vzoru používateľského rozhrania karty je viac než len rýchle načítanie a prispôsobivosť rôznym veľkostiam obrazovky. Obsah s obmedzenou veľkosťou zodpovedá rozsahu pozornosti väčšiny používateľov webu (najmä na mobilných zariadeniach). Šablónu karty, ktorú pestuje Pinterest a následne ju spopularizujú sociálne siete ako Facebook a Twitter, možno teraz nájsť na webových stránkach všetkých odvetví.

V tomto článku preskúmame vzostup vzoru používateľského rozhrania karty: aká je jeho praktickosť, ako je kompatibilný s responzívnym a materiálovým dizajnom a čo od neho očakávať v budúcnosti.

Čo je kontajnerový web dizajn?

Aby sme pochopili tento vzorec, musíme najprv pochopiť, aké sú samotné karty. Karty sú zvyčajne malé nádoby s informáciami. Každá karta má svoju vlastnú tému. Karta môže obsahovať akýkoľvek obsah – vizuálny, textový, odkazy atď. – ale všetky informácie sú venované jedinej téme.

Vyplnenie obrazovky týmito nezávislými kontajnermi informácií je to, čo The Guardian nazval „model kontajnera“. Ponúka čisté a prehľadné rozhranie, ideálne pre Rýchle zobrazenie takže používateľ môže ľahko nájsť to, čo hľadá. (Tento spôsob je navyše ideálny pre dotykové ovládanie, o ktorom si napíšeme nižšie).

Praktické a atraktívne: výhody vzoru používateľského rozhrania karty v skratke.

Trello umožňuje používateľom vytvoriť si ľubovoľnú kartu. Každý môže vytvárať karty úloh a kategorizovať ich podľa potreby. To dokazuje nielen flexibilitu šablóny karty, ale aj jej organizačnú silu. Trello prosperuje, pretože jeho formát kariet je jednoduchší ako zoznam úloh tradičného plánovača.

Máš záujem? Prečítajte si najnovší článok s výberom TOP 18 trendov roka 2018.

Vzor používateľského rozhrania karty na mobilnom a responzívnom dizajne.

Ako už bolo spomenuté, karty sú neuveriteľne kompatibilné s responzívnym dizajnom, čo z nich robí, slovami Des Traynora zo spoločnosti Intercom, „budúcnosť webu“. Vzor dobre sedí mobilné zariadenia z viacerých dôvodov, ktoré popíšeme nižšie.

Po prvé, v rámcoch, ktoré sa rozširujú a zmršťujú, sa mriežka kariet môže reštrukturalizovať tak, aby vyhovovala akejkoľvek polohe alebo veľkosti obrazovky. Dizajnéri môžu meniť veľkosť kartičiek (rovnako ako ich k sebe prispôsobovať), ako chcú. Môžete napríklad nastaviť pevnú šírku a variabilná výška s konštantnou medzerou medzi kartami. Používame to neustále na vytváranie responzívnych webových stránok.

Porovnajte snímku obrazovky webovej stránky The Verge vyššie s jej mobilnou verziou nižšie:

Všimnite si, že text, obrázky a farebný vzor zostávajú rovnaké. Pri vývoji adaptívneho vzhľad stránky karty vám umožňujú získať trvalý dizajn rôzne zariadenia. Túto výhodu je možné vidieť v bezplatné laboratórium Dizajn UXpin. Všimnite si, ako čisté rozloženie vychádza z mobilná verzia do režim celej obrazovky prezeranie.

Oblasť mobilného zobrazenia:

Zobraziť oblasť verzie na celú obrazovku:

Ďalšou výhodou je, ako je dizajn karty kompatibilný dotykové ovládanie. Na dotykové obrazovky karty fungujú ako tlačidlá. Myšlienka je jednoduchá: kliknutím na kartu získate prístup k obsahu. Ako ukazuje aplikácia Fittsovho zákona na webdizajn, než tlačidlo viac na kliknutie, tým ľahšie sa s ním pracuje. Ako často sa musíme zaoberať malými tlačidlami na mobilných zariadeniach?

Karty a materiálové prevedenie

materiálové prevedenie, ideálne pre , sa vo veľkej miere spolieha na karty a ich podrobné informácie technická analýza bude vyžadovať veľa miesta. Ak teda potrebujete hĺbkové vysvetlenie, oplatí sa prečítať si popis kariet v príručke materiálového dizajnu.

Vývoj webových stránok. Budúcnosť dizajnu kariet.

Keďže vzor používateľského rozhrania karty neustále mení svoj tvar, aby vyhovoval novým požiadavkám, pravdepodobne bude mať najväčší vplyv na responzívny dizajn a dizajn aplikácií. Táto zmena je čiastočne založená na „stránke po stránke“ vplyvu Material Design na aplikácie pre Android.

1. Technológia

Karty nemusia zostať dlho statické. So zlepšovaním implementácie webu sa bude zlepšovať aj ich schopnosť podporovať viac multimediálny obsah. Pravdepodobne uvidíme oveľa podrobnejšie prvky, ako napríklad automatickú aktualizáciu obsahu, ktoré nespomalia celkový zážitok.

Video bude čoraz viac nahrádzať obrázky (nápad, s ktorým niektorí dizajnéri koketujú už roky). Použite svoje rozhranie (vyššie) používa animované súbory GIF, ktoré zaplnia domovskú stránku množstvom informácií.

2. Prehĺbenie angažovanosti

V blízkej budúcnosti sa môže zvýšiť aj kreativita používania kariet a už to nebudú len odkazy. Ako môžeme vidieť na príklade materiálového dizajnu, karty sa líšia úrovňou interakcie medzi sebou a prostredím, ako napr. automatické triedenie a aktualizácie v reálnom čase (napríklad predpoveď počasia).

Windows Phone už zaviedol automatické triedenie kariet, no tento prístup by sa potenciálne dal použiť aj na používateľov iných mobilných zariadení.

Veľkosť 3

Karty, ktoré držia krok s trendom komiksových obrázkov, využívajú aj politiku „väčšie, tým lepšie“.
Väčšie karty umožňujú viac detailov a komplexnejšiu typografiu, čo zase znamená viac priestoru pre úžasný obsah. vizuálny dizajn. Veľké karty, ktoré sa používajú striedavo s menšími kartami, umožňujú väčšiu voľnosť vo vizuálnom zmysle.

AKO Arkitekter (vyššie) mieša veľké a stredne veľké karty v navigácii. Niektoré karty sú odkazy a niektoré sú len statické informácie. Široké medzery oddeľujú karty, vďaka čomu je dizajn vzdušný.

4. Nositeľné zariadenia

Vďaka okuliarom Google Glass sa dnes karty stali základom dizajnu nositeľného používateľského rozhrania.

Hoci kritici môžu považovať Google Glass za komerčný neúspech, niektorí veria, že má na trhu šancu. Bez ohľadu na to, nositeľné zariadenia musia efektívne využívať priestor. A v tomto prípade budú karty najpraktickejšou voľbou.

Tvorba web stránok 2016-2018. Výkon

Návrhy kariet sa stávajú základom organizácie a funkčnosti naprieč všetkými médiami a zariadeniami. Ich súčasná podoba sa môže meniť, keďže sa vyvíjajú súbežne s technológiou, no ich prítomnosť je zaručená. Napokon, digitalizované štvorce na obrazovkách sú sotva primárnou formou kariet. Nezabudnite, že donedávna bola karta len list papiera, ktorý obsahoval súbor informácií o určitej téme.

Prečítajte si článok o inom - duplexe alebo duplexe.

Vo svete web dizajnu sa neustále objavujú nové trendy, ktoré následne naberajú na obrátkach. Kto zabudne na paralaxné rolovanie, ktoré sa objavilo pred pár rokmi a je populárne aj dnes? Hoci v V poslednej dobe, stránky s dlhý zvitok obrátiť na seba viac pozornosti návštevníkov stránky.

Jedným z trendov, ktorý v porovnaní s inými nezískal veľké uznanie a už nejaký čas sa teší určitej obľube, je dizajn kariet.

Najpopulárnejšou webovou stránkou na prezentáciu tohto trendu v dizajne je Pinterest, ale existujú aj iné lokality, ktoré často používajú tento prístup k dizajnu, a to z dobrého dôvodu. Keď si návštevníci prezerajú stránku, ktorá používa túto dizajnovú techniku, okamžite si všimnú poriadok a dobre organizovanú štruktúru za takým jednoduchým, ale elegantným dizajnovým prístupom.

Použitie tohto prístupu k dizajnu na vašej vlastnej webovej stránke má veľa výhod.

Grid prístup k informačnej architektúry

Keď sa pozriete na akýkoľvek dizajn karty, nemôžete si pomôcť, ale nevidíte základnú mriežku. Je to preto, že každý okraj karty je skutočne tvorený rôznymi mriežkami vo veľkej studni organizovaný systém, čo podporuje väčšiu konzistentnosť a harmóniu vzhľadu stránky.

To zase výrazne pomáha informačnej architektúre stránky. Informačná architektúra je inteligentné poradie a postupnosť, v ktorej vaši návštevníci vnímajú informácie o stránke, ideálne v súlade s účelom každej stránky a vo všeobecnosti celej lokality.

Zamyslite sa: dizajn karty „vedie oči“ vašich návštevníkov logický reťazec. Každá karta je súčasťou riadku alebo stĺpca, ktorý vedie zorné pole návštevníkov pozdĺž jednotných horizontálnych a zvislé čiary. Toto usporiadanie pomáha návštevníkom pochopiť, ktorá informácia je dôležitejšia.

Vezmime si napríklad časopis o fotografovaní Contrastly. Sledovanie jeho rozloženia mriežky/karty vám pomôže pochopiť, čo je v informačnej hierarchii dôležitejšie. Najnovšie články zverejnené dňa horný riadok, zatiaľ čo staršie články sa zobrazujú v spodnom riadku. Novosť sa zvykne spájať s väčšou dôležitosťou, takže sledovanie tohto zostupného poradia v systéme kariet umožňuje používateľom rýchlo pochopiť, ktorý obsah je dôležitejší. Takto môžu uprednostniť, v akom poradí budú tieto informácie čítať.

Silná závislosť od obrázkov

Staré príslovie, že ľudia milujú očami, sme počuli toľkokrát, až zostarlo, hoci v dizajne kariet naberá nový význam. Dizajn kariet sa takmer výlučne spolieha na vizuálne modality; akákoľvek kópia na tej istej stránke je z hľadiska informačnej architektúry zvyčajne druhoradá vo vzťahu k vizuálu.

Použitie obrázkov je forte dizajn karty pretože výskum potvrdzuje, že obrázky riadia webový dizajn. Napríklad aj kvalitné fotografie a používanie ľudské tváre obrázky zvyšujú mieru konverzie. V skutočnosti, okrem všetkých vyššie uvedených, existuje niekoľko ďalších spôsobov, ktorými môže použitie obrázkov vo vašom návrhu zvýšiť mieru konverzie vašej stránky.

Inými slovami, dôraz na použitie obrázkov robí dizajn kariet atraktívnejším pre návštevníkov. Nie je náhoda, že Pinterest je podľa Alexa 15. najpopulárnejšia stránka v USA.

Keď sa pozriete na výsledky Pinterestu, po zadaní slova „jedlo“ do vyhľadávača môžete vidieť, že obrázky sú prvá vec, ktorá upúta pozornosť, keď ste na stránke. Je vám jedno, čo je napísané pod fotografiami, aspoň nie prvoradá. Vysoká kvalita, oslnivé obrázky, ktoré upútajú vašu pozornosť, a až potom, keď ste sa rozhodli, chcete vedieť viac (ale z prezentácie tohto obrázka), ku ktorému si prečítate popis.

Vylepšený používateľskú skúsenosť

Každý dizajnér by vám mal povedať, že používateľská skúsenosť je najdôležitejšia vec. Práve pre nich by sme mali navrhovať v prvom rade. Ďalším dôvodom je, že dizajn karty tak dobre rezonuje a v dohľadnej budúcnosti to tak bude aj naďalej, pretože pomáha užívateľskej skúsenosti. A to je to, čo spôsobuje, že sa návštevníci stránky neustále vracajú a čo im zase pomáha tráviť tam viac času, čo nakoniec vedie k viac prechody!

Skvelá používateľská skúsenosť sa sústreďuje na ľudí, ktorí dokážu na vašej stránke nájsť to, čo chcú, bez akýchkoľvek prekážok. v podstate musia nájsť to, čo chcú, a nájsť to okamžite a bez bolesti hlavy.

Dribbble je stránka, ktorá tomu dobre rozumie, pretože jej vývojári použili karty na uľahčenie a zlepšenie používateľskej skúsenosti. Táto stránka je v online kreatívnej komunite dobre známa ako šablóna pre vytvorené používateľom umenie.

Myšlienkou stránky je, aby si ľudia užili ilustrácie, grafiku a obrázky všetkého druhu, takže dizajn kariet je naozaj najviac vhodným spôsobom realizovať takýto nápad. Keďže obrázky efektívne a okamžite upútajú oko návštevníka, používateľský zážitok sa výrazne zlepší, keď návštevníci môžu rýchlo naskenovať karty v rozložení mriežky, aby zistili, ktoré z nich ich zaujímajú. Keď uvidia, čo ich zaujíma, môžu okamžite kliknúť na kartu a pozrieť sa bližšie.

Stránka ako Dribbble umožňuje návštevníkom nájsť Správne miesto super pohodlným spôsobom. Toto je stelesnenie skvelého používateľského zážitku!

Ideálne pre mobilný dizajn

Možno ste už počuli, že mobilné zariadenia už predbehli stolné počítače veľké množstvo používateľov. Až v roku 2015 sa v USA začalo používať mobil digitálne média média dosahuje 51 % v porovnaní s stolné počítače, ktorí majú 42 %. Dizajn karty sa dokonale hodí, pretože zohľadňuje tento trend a zároveň je ľahko kompatibilný s „responzívnymi“ rámcami. Pretože karty ponúkajú obsah v „ľahko stráviteľných kúskoch“, čo uľahčuje zobrazenie na mobilných rámcoch.

Pozrite sa na karty z tohto pohľadu: ich tvar a veľkosť sú takmer mimikou tvaru a veľkosti smartfónu alebo tabletu. Samozrejme, nie celkom dokonalá podobnosť Vysoké číslo rôzne dostupné modely, ale stále je to dosť blízka podobnosť pri pohľade z hľadiska pomeru strán.

V dôsledku toho sa karty nikdy nevyradia z používania, pokiaľ bude rásť dopyt po mobilných zariadeniach a internete, a v dohľadnej dobe neexistujú žiadne známky poklesu používania kariet.

Nie je to len ďalší výstrelok

Problém niektorých dizajnových trendov je v tom, že sa zmenia na výstrelky, vďaka čomu sú krátkodobé a nezabudnuteľné. Aj keď dizajn karty môže byť výnimkou! Kvôli Vysoké číslo praktické uplatnenie a výhody, ktoré ponúka, sa časom stane obľúbenejším. To znamená, že „prežije“.

Zabezpečuje konzistentnosť v informačnej architektúre stránok a udržiava používateľov posadnutých ostrými obrázkami, čo zase funguje ako spôsob, ako zvýšiť návštevnosť stránok. Z dizajnu karty teda nesmierne profituje aj celá používateľská skúsenosť, jednoducho preto, že používateľom v skutočnosti uľahčuje nájsť to, čo na stránke potrebujú. Cez rast mobilný internet v posledných rokoch sa tento prístup k dizajnu stal jedným z hlavných a s ktorým stále viac a viac viac ľudí stretnúť a užiť si.

Myšlienka kariet je skutočne starý koncept, ale dostal ďalší pokus a aktualizoval sa na nový prístup vo webovom dizajne. Toto je len príklad, ktorý vám ukáže, že kreatívne mysle môžu vziať niečo staré a všedné a premeniť to na niečo mimoriadne relevantné a užitočné v 21. storočí.

V tomto článku vám teda vysvetlím, čo je „dizajn kariet“ a ako vo všeobecnosti ovplyvňuje webdizajn.

rast mobilných technológií postupne viedla k zmene architektúry webových stránok smerom k responzívnosti a prispôsobivosti. Tieto dva parametre sa stali povinnými. Tieto podujatia prispeli k veľkému úspechu „kartičiek“ – jedného z hlavných trendov webdizajnu v roku 2015.

Môžeme však s istotou povedať, že karty nie sú len dizajnovým výstrelkom, sú budúcnosťou vývoja webu tak, ako sú Najlepšia cesta organizovanie a zobrazovanie obsahu konzistentným spôsobom. V tomto článku vám teda vysvetlím, čo je „dizajn kariet“ a ako vo všeobecnosti ovplyvňuje webdizajn. Choď!

Dizajn kariet v priebehu vekov

Zatiaľ čo karty sa v poslednom čase stali mimoriadne populárnymi vo webdizajne, už sa stali efektívny nástroj vizuálna komunikácia už najmenej tisíc rokov. Karty, ktoré boli prvýkrát predstavené ako hra v cisárskej Číne v 9. storočí, sa neskôr stali užitočnými vo svete podnikania.

V 17. storočí sa „obchodné karty“ prvýkrát objavili v Londýne, s ich pomocou si ľudia našli prácu: toto bol prvý príklad moderných „vizitiek“.

V súčasnosti je karta zvyčajne formou kupónu z obchodu alebo supermarketu, ľudia ich zbierajú, aby získali špeciálne zľavy.

Väčšine z nás stačí pozrieť sa do peňaženky, aby sme videli kreditné karty, vernostné karty, obchodné karty a dokonca aj bežné vodičský preukaz. Všetky tieto karty majú svoje vlastné štandardy.

V každom prípade existuje silné prepojenie medzi tradičným používaním máp a ich aplikáciou vo webdizajne: bežné karty obsahujú informácie na oboch stranách a webové mapy presmerujú používateľov na zobrazenie ďalšieho obsahu.

Čo sú mapy na internete?

V podmienkach internetu môžeme definovať „mapu“ ako malý obdĺžnik, ktorý je spojený s určitou myšlienkou. Mapy sú plné interaktívnych prvkov, ako sú text, odkazy alebo obrázky. Všetky však slúžia na rovnaký účel – nasmerovať vás na ďalší obsah kliknutím.

Hlavným účelom máp je poskytnúť krátka recenzia určitú tému v uzavretom priestore. A ak má čitateľ o novinky záujem, môže ísť na nová stránka s plným textom. Webové stránky Facebook alebo Twitter to využívajú tým, že začleňujú šablónu karty do svojho dizajnu, zobrazujú veľké množstvo obsahu a zároveň šetria vzácny priestor.

Teda najviac dôležitá charakteristika karty sú myšlienkou interaktívnej interakcie. Pri vývoji by dizajnéri mali myslieť na to, že karty nie sú len spôsobom zobrazovania noviniek, ale potrebujú aj upútať pozornosť čitateľa. To je dôvod, prečo sa na kartách zobrazujú lajky, opätovné uverejnenie alebo odkazy na plné zneniečlánky.

Okrem užitočnosti sú mapy bežnou voľbou dizajnu kvôli ich kompatibilite s responzívnymi rámcami. Broken Framework sa dá použiť na vytváranie atraktívnych rozhraní a je ideálny na vývoj mobilné platformy. Tvar karty je veľmi podobný tvaru moderný smartfón.
Často hovoríme o „tekutom“ rozložení. Mapy nám poskytujú malé časti obsahu, ktoré možno použiť na „vyplnenie“ stránky rôzne veľkosti a tvary obrazovky.

Prečo by sa mali používať mapy?

Keďže sa karty stali univerzálnymi, možno ich použiť rôznymi spôsobmi v závislosti od požadovaných funkcií. Tu je niekoľko dôvodov, prečo by ste mali používať mapy:

Je to trend: Trendy sú vo svojej podstate dočasné, ale pomocou máp môžete svoju stránku efektívne presláviť.

Mapy zavádzajú poriadok: Mapy zavádzajú úrovne organizácie obsahu.

Mapy sú ideálne pre responzívny dizajn: ľahko sa hodia k webovým stránkam a mobilné aplikácie. Najdôležitejšie je, že na smartfónoch je možné mapy jednoducho ukladať vertikálne a vytvárať tak informačný kanál.

Mapy podporujú hospodárnosť myslenia: pre svoju veľkosť mapy nikdy nedokážu uložiť veľké množstvo informácií. Na prvý pohľad sa to môže zdať ako nevýhoda, ale podľa mňa je to skvelá vec! Na karte by sa mal zobraziť krátky text celého článku, ktorý by mal nabádať čitateľov, aby nasledovali odkaz.

Sú spoločenské: karty sú ideálne pre sociálne médiá, a to nielen preto, že sa používajú v sociálnych sieťach, ale aj preto, že mapy uľahčujú používateľom zdieľanie informácií prostredníctvom rôznych sociálne platformy a poštou.

Moderné tendencie a prístupy k vývoju webu

Naučte sa algoritmus pre rýchly rast od nuly pri vytváraní webových stránok

Dôležitosť obsahu je vyrovnaná: mapy pomáhajú vyrovnať sa s úlohou, ktorý článok je najlepšie umiestniť na začiatok stránky. Pri používaní máp môžu bloky obsahu rovnakej dôležitosti pohodlne koexistovať na tej istej stránke bez toho, aby bolo potrebné ich hodnotiť. Používateľ sa rozhodne, čo je pre neho dôležité a čo chce čítať.

Kto používa karty?

Dribling

Rozloženie stránky je založené na kartách obsahujúcich obrázok a nejaké informácie o každom dizajne. Na Dribbble sa mi páči, že môžete kliknúť na kartu a zobraziť všetky podrobnosti o dizajne, alebo môžete jednoducho umiestniť kurzor myši na kartu a zobraziť malý popis.

pinterest

Čo sa týka dizajnu kariet, nemôžeme nespomenúť Pinterest. V skutočnosti si veľa ľudí myslí, že Pinterest bol priekopníkom dizajnu kariet. Pinterest jasne demonštruje „dôležitosť všetkého obsahu“, na stránke nie sú žiadne karty, ktoré by vizuálne vyčnievali.

Twitter, využívajúci limit 144 znakov na príspevok, sa zrodil so „zabudovaným rozložením kariet“. Minulý rok sociálna sieť spustila svoj vlastný produkt s názvom „Twitter Cards“, aplikáciu navrhnutú tak, aby vám pomohla „vykartovať“ váš obsah, ak ho uverejníte v systéme. Vývojári opisujú svoju aplikáciu ako príležitosť:

„pripojte k svojim tweetom veľa fotografií, videí a iného mediálneho obsahu, ktorý zvýši návštevnosť vášho webu“

V dôsledku toho domov Stránka na Twitteri teraz plné tweetových kariet. Kliknutím na jeden z nich sa tweet rozbalí a zobrazí ďalší obsah alebo možnosti.

The Guardian

Slávne britské noviny The Guardian aplikovali dizajn kariet na svoju webovú stránku, aby „mysleli novým spôsobom a zlepšili objavovanie a propagáciu obsahu“.

Dokázali vytvoriť modulárnu schému pozostávajúcu z rôzne karty: každý je prepojený s nadpisom a po kliknutí vás presmeruje na celý text článku. Stránka navodzuje pocit elegancie a čistoty.

Záver

Karty predstavujú užitočná metóda na vytváranie atraktívnych webových stránok a sú mimoriadne flexibilné, s ich pomocou môžete implementovať rôzne rozloženia. To všetko preto, aby bol používateľ so stránkou spokojný. Zvyšujúci sa podiel tabletov a smartfónov na trhu tiež upevní dizajn kariet na vrchol webdizajnu na dlhú dobu.

Prázdniny sú za nami, čo znamená, že je čas sa rozveseliť a premýšľať o plánoch do budúcnosti, pripravovaných projektoch a vyhliadkach. My vo Wix sme čakali na Nový rok s napätím a zvedavosťou tak dlho, ako si pamätáme. Pred nami je rok 2015 a ten určite prinesie veľa zaujímavého do oblasti webdizajnu.

Samozrejme, nemôžeme predpovedať všetko, čo sa stane, ale máme nejaké dohady. Pamätáte si, že nielen pohodlné, ale aj moderná platforma takže pozorne sledujeme všetko, čo sa deje, a vieme, odkiaľ veje vetry zmien.

Zapnite si bezpečnostné pásy, Drahí priatelia, cesta do budúcnosti začína! Tento rok nás čakajú veľmi zaujímavé trendy:

materiálové prevedenie

Variácia „plochého“ dizajnu, razená Google. Myšlienka je založená na tradičných dizajnérskych technikách a skutočných fyzikálnych javoch prispôsobených pre web. Výsledkom sú vrstvené rozhrania schopné prenášať materiál, osvetlenie a pohyb v reálnom svete. Ukážku, ako to vyzerá, si môžete pozrieť v odkaze.

Animácia

Ghost Buttons

Zabudnúť na svetlé tlačidlá výzva k akcii. Teraz sú v móde jednoduché a priehľadné prvky, oddelené od pozadia tenkým rámom. Zvyčajne sú viac ako štandardné tlačidlá a sú na najvýraznejšom mieste na stránke. Skromný vzhľad vôbec neznamená, že si takéto tlačidlá nikto nevšíma a nestláča, práve naopak, ľuďom sa veľmi páči ich elegantná jednoduchosť a aktuálnosť. Mimochodom, práve takéto prvky máme (a na stránke Urban Cupu sa tento trend už naplno využíva).

Rozprávanie príbehov

Rozprávanie príbehov vo webdizajne znamená, že stránka musí návštevníkom rozprávať príbeh – samozrejme nie doslova, ale prostredníctvom pocitov, ktoré má človek v momente prezerania. Na tento účel môžete použiť obrázky a texty súvisiace s významom alebo interaktívne rolovanie tak, aby čitateľ nebol len divákom, ale aj účastníkom. Existuje mnoho spôsobov, ako prostredníctvom dizajnu vyrozprávať príbeh a dúfame, že tento trend bude v roku 2015 ešte populárnejší. Skvelý príklad rozprávanie príbehov si môžete pozrieť na tejto stránke Wix.

dizajn karty

Flexibilnejšia a demokratickejšia verzia takzvaného „dlaždicového dizajnu“, o ktorej sa svet prvýkrát dozvedel v roku 2010 vďaka službe Pinterest. Karty sa teraz používajú ako východiskový bod pre pohyb po stránke: ide o oznámenie o materiáli, ktorý sa otvorí po kliknutí. V nasledujúcom roku sa bude dizajn kariet ďalej rozvíjať, objavia sa nové štýly a interaktívne možnosti. Ak chcete urobiť takúto stránku, potom odporúčame brať ako základ.

Video ako pozadie

krásne videá, ktoré nie sú obmedzené rámom prehrávača videa, vyzerajú cool a nahradia tradičné obrázky na pozadí. A niet sa čomu čudovať – je to svieže, krásne, s videom sa dá vymyslieť niečo nové a dobre sa hodí k myšlienke rozprávania, ktorá je spomenutá vyššie. Takéto pozadie definuje koncept celej stránky, oživuje ju a vytvára dynamiku. Pozrite si webovú stránku Zenitu a uvidíte, aký je krásny.

Rolovanie namiesto klikania

Dobrý príklad ako mobilné rozhrania ovplyvnili webdizajn. Rozšírenie dotykových zariadení zmenilo spôsob, akým interagujeme so stránkami: teraz je akcia známa a „kliknutie“ je menej intuitívny a prirodzený spôsob navigácie. Teraz je zvykom uverejňovať obsah na samostatnom webe vertikálna strana a rozdeľte ho nie na sekcie, ale na „obrazovky“. Stránka Madsschou vytvorená na Wix túto myšlienku dokonale ilustruje.

Mikrointerakcie

Webový dizajn bude tento rok ovplyvnený novými spôsobmi, ako zaujať návštevníkov webu. Logika je takáto: zakaždým, keď požiadate osobu, aby vykonala nejakú akciu, zrodí sa interakcia. Smerovanie k mikrointerakciám je pokusom vytvoriť čo najviac dôvodov pre niektoré malé akcie. Klasickým príkladom je schránka na odber e-mailov alebo funkcia, ktorá umožňuje hodnotiť. Bude niečo nové v roku 2015? Sme pripravení tvrdiť, že áno.

26.12.2016

Karty sú úhľadné malé nádoby s informáciami. Karty sa stali praktickými povinný prvok pokiaľ ide o vyváženie estetiky s jednoduchou použiteľnosťou. Dizajn kariet bol pôvodne predstavený službami ako Pinterest a Facebook a dnes sa jeho vplyv rozšíril do mnohých odvetví.

Dobre implementovaný dizajn karty môže zlepšiť UX (užívateľskú skúsenosť) vašej aplikácie. V tomto článku popíšem 5 užitočné techniky implementovať dizajn kariet a uviesť niekoľko zaujímavých príkladov.

• Prečítajte si tiež:

1. Riaďte sa pravidlom „Jedna karta – jeden koncept“

2. Celý povrch karty musí byť klikateľný

Nasledujte Fittsov zákon a umožniť používateľom kliknúť/klepnúť na ktorúkoľvek časť karty, nielen na ňu textové odkazy alebo obrázky. Veľká kontaktná plocha výrazne zlepšuje použiteľnosť na dotykových obrazovkách (Touchscreen) aj zariadeniach, ktoré používajú myš.

Poradenstvo: je dobré, keď karty vrhajú tieň a ukazujú hĺbku - toto vizuálne potvrdzuje klikateľnosť karty.

3. Zatraktívnite svoje karty

Dizajn karty funguje vďaka dobrý dizajn a výborná použiteľnosť. Pridaním estetiky kartám ich urobíte rozpoznateľnými a kreatívnymi.

Pri navrhovaní kariet sa musíte zamerať na nasledujúce body:

snímky

Dôraz na obrázky je sila dizajnu karty. Výskum potvrdiťže obrázky „zdvihnú“ dizajn. Dôraz na použitie obrázkov teda robí dizajn rozhrania karty pre používateľov atraktívnejším.

Tiene a prechody

Tiene a prechody prešli dlhou cestou, aby ich bolo možné cítiť a spájať s ich fyzickými náprotivkami. Dobre si však premyslite, ako použijete tiene a prechody: ak sú tiene vrhané zo všetkých uhlov a strán, potom sa zničí ilúzia, že karta je fyzický objekt.

Typografia

Pozornosť používateľa môžete upútať aj textom. Všetko v dizajne karty by malo byť ľahko čitateľné a zrozumiteľné:

• Použite jednoduché fonty A farebné palety(text sa najlepšie číta na kontrastnom pozadí).
• Pokúste sa použiť minimálny počet písiem. Pre dizajn kariet je jedno písmo viac než dosť.

Poradenstvo: Normálne bezpätkové je skvelé pre karty.

• Prečítajte si tiež:

4. Obmedzte obsah karty

Karty sú zvyčajne stručné a obsahujú odkaz na podrobnejšie informácie. Keď sa pokúsite vložiť príliš veľa obsahu na kartu, ktorá bude príliš široká alebo príliš dlhá, stratí svoje pôvodné posolstvo, pretože už nevyzerá ako karta.

Nižšie je uvedený príklad rozhrania karty. Venujte pozornosť karte v strede. Problém je v tom, že je v nej veľa informácií, vďaka čomu je karta ťažko zrozumiteľná.

5. Využite výhody animácie a pohybu

Animácie môžu mať pozitívny vplyv na UX, ak sa používajú správne. Pomáhajú ľuďom lepšie sa orientovať v rozhraní a nastavení karty vizuálne spojenia medzi rôznych štátov pre každú kartu.

vizuálne nápovedy

Vizuálne podnety pomáhajú používateľom pochopiť, ako s nimi najlepšie interagovať používateľské rozhranie. Tento typ animácie sa používa, keď potrebujete ukázať, ako fungujú určité konštrukčné prvky.

Vizuálna spätná väzba

Vizuálna spätná väzba je pri návrhu rozhrania veľmi dôležitá. Funguje to preto, lebo uspokojuje prirodzenú túžbu užívateľa potvrdenie. IN skutočný život predmety reagujú na interakciu a to ľudia od predmetov očakávajú. Pre desktopové aplikácie alebo webové stránky, ktoré môžete použiť efekt vznášania ukázať, že s predmetmi je možné interagovať. Animácia vznášania zvyšuje úroveň porozumenia a zároveň robí používateľský zážitok zábavnejším.

Pomocou efektu vznášania môžete tiež získať prístup k možnostiam. V nižšie uvedenom príklade efekt vznášania umožňuje používateľom meniť farby, odpovedať na správy, odosielať ich alebo ich mazať.