Izdelava bolje oblikovanega uporabniškega vmesnika z mrežno postavitvijo

Medtem ko so mreže in sistemi postavitve del zgodovine oblikovanja, so še vedno pomembni za večzaslonski svet, v katerem živimo. Tehnološke naprave so popolnoma spremenile način, na katerega iščemo informacije, pa tudi naš vsakdanji način življenja.

Mreže oblikovalcem pomagajo izdelati boljše izdelke tako, da z lahkoto združijo različne elemente ter dosežejo učinkovito hierarhijo, skladnost in doslednost. Če jih boste uporabili na pravi način, bodo vaše zasnove spletnih strani videti dobro premišljene in urejene.

Kaj je mreža?

V najbolj temeljnem smislu je mreža struktura, ki jo sestavlja več črt (navpičnih ali med seboj križajočih se), ki delijo stran v stolpce ali module. Ta struktura oblikovalcem pomaga urediti vsebino na spletni strani. Medtem ko črte v mreži niso nujno vidne (ponekod so), struktura omogoča urejanje razmerij med elementi na strani, ki jih je potrebno uskladiti. Ta mreža torej služi kot ogrodje za postavitev strani. Predstavljajte si jo kot osnutek, na katerega oblikovalec nadvse preprosto postavi grafične elemente (na primer prostor za besedilo, slike in druge uporabne ali okrasne elemente).

Švicarska šola

Mreža, kakršno poznamo danes, je povezana s švicarsko tipografijo. V času 1. svetovne vojne je Švica, ki je ohranila nevtralnost, postala središče srečanj ustvarjalnih ljudi iz vse Evrope. Ker so morale biti tiskane publikacije postavljene v treh uradnih jezikih – nemščini, francoščini in italijanščini – so oblikovalci potrebovali nov mrežni sistem, ki bi jim to omogočil. Tipografi, kot so Jan Tschichold in Herbert Bayer, so se tega lotili z modularnim pristopom. Prazen prostor so prvič uporabili kot dinamično komponento pri oblikovanju postavitve, kar je vodilo k razvoju kompleksnih mrežnih sistemov.

ŠTIRI VRSTE MREŽNE POSTAVITVE

Besedilna mreža

Besedilna mreža ali mreža enega stolpca, kot jo pogosto imenujejo, je najpreprostejša mrežna struktura. Gre za velik pravokotni prostor, ki zavzema večino prostora znotraj formata. Takšna mreža je primerna za besedilo, ki se nadaljuje, ni pa omejena nanj; vanjo lahko vstavimo tudi slike, da zapolnimo stolpec. Zaradi samega imena, ljudje ponavadi povezujejo besedilno mrežo s tiskano stranjo. Takšne mreže so uveljavljene v knjigah, saj so primerna postavitev za besedila, ki se nadaljujejo.

Mreža z več stoplci

Kot pove že samo ime, ima takšna mreža več stolpcev. Zapomnite si to preprosto pravilo: več stolpcev ko ustvarite, prožnejša je mreža. Stolpčasta mreža je uporabna za postavitev informacij, ki se ne nadaljujejo. Z mrežo, ki ponuja več stolpcev, lahko ustvarimo prostor z različno vsebino. Določen stolpec lahko, na primer, uporabite za ilustracijo.

Modularna mreža

Medtem ko mreža z več stolpci navpično razpolovi stran v več stolpcev, modularna mreža navpično in horizontalno porazdeli stran v module. Stolpci, vrstice in prostor med njimi ustvarijo matrico celic ali module. Modularne mreže so uporabne takrat, ko je potrebnega več nadzora nad kompleksno postavitvijo kot ga lahko ponudi stolpčasta mreža. Modularna mreža omogoča prožne formate strani in izdelavo kompleksne hierarhije. Vsak posamezen modul v mreži lahko vsebuje majhen del informacij; module, ki so drug poleg drugega, pa lahko kombiniramo v bloke.

Temeljna mreža

Temeljna mreža je osnovna struktura, ki vodi navpični presledek v zasnovi uporabniškega vmesnika. Uporablja se predvsem za horizontalno skladnost in hierarhijo. Tako kot stolpci in moduli narekujejo obliko vmesnika, temeljna mreža narekuje usklajeno razporeditev. Uporaba takšne mreže je podobna pisanju na črtasti papir, saj zagotavlja skladnost vsake spodnje črte besedila z navpičnim presledkom. Prav zaradi tega, temeljna mreža ni le odlično tipografsko orodje, pač pa izjemen pripomoček za polaganje elementov na stran, saj lahko hitro preverite, ali kje na strani manjkata vrstica ali presledek.

Razporeditvene mreže v interaktivni zasnovi

Interaktivna zasnova je spremenila način mišljenja o mrežah. Je pretočna in nima fiksne velikosti, saj ljudje za interakcijo z izdelkom uporabljajo različne vrste naprav, vse od majcenih zaslonov na pametnih urah do izjemno širokih televizijskih zaslonov. Med uporabo izdelka se ljudje pogosto selijo z ene naprave na drugo, da bi s pomočjo tistega izdelka dokončali neko opravilo. Kljub velikosti zaslona pa morajo oblikovalci razporediti vsebino na kar se da intuitiven način, ki mu lahko zlahka sledijo. En način, na katerega to dosežejo, je z uporabo sistema razporeditvene mreže, ki je za interaktivno zasnovo boljša, ker poudari temeljno strukturo zasnove in način, na katerega se posamezna komponenta odziva na različne odzivne vsebine na strani. Tovrstno mrežo je hitreje in lažje oblikovati za več različnih zaslonov in resolucij.

Mrežni sistemi pri oblikovanju digitalnih izdelkov med seboj organizirajo elemente na strani in povežejo prostor. Mrežni sistem na več načinov izboljša kakovost oblike (funkcijsko in estetsko) in učinkovitost oblikovalnega postopka. In sicer:

Ustvari jasnost in skladnost

Mreža je temelj urejenosti zasnove. Sorazmerje, ritem, bel prostor in hierarhija so lastnosti, ki neposredno učinkujejo na kognitivno hitrost. Mreže ustvarijo in vpeljejo skladnost elementov skozi celoten uporabniški vmesnik. Učinkovita mreža vodi oko ter tako olajša in človeku omogoči prijazno iskanje predmetov na zaslonu. To je še posebej pomembno pri digitalnih izdelkih, saj so funkcionalni, kar pomeni, da ljudje uporabljajo izdelke za dokončanje določenih opravil, kot so pošiljanje sporočila, rezervacija hotelske sobe ali klicanje prevoza. Skladnost gledalcu zaslona pomaga razumeti, kje bo našel naslednjo informacijo ali kateri je naslednji korak, ki ga mora storiti.

Izboljša razumevanje oblikovane strani

Človekovi možgani presodijo situacijo v stotinki sekunde. Slabo oblikovana zasnova naredi izdelek manj uporaben in manj zaupanja vreden. Mreže povežejo in poudarijo vizualno hierarhijo zasnove tako, da ponudijo sklop pravil kot, na primer, kam v zasnovo je potrebno postaviti elemente.

Ustvari odzivno zasnovo

Odzivna zasnova nič več ni luksuz, pač pa nuja, saj ljudje uporabljajo aplikacije in spletne strani na napravah z različno širokimi zasloni. To pomeni, da oblikovalci ne oblikujejo zgolj za zaslon ene vrste naprave. Ta raznolikost naprav in zaslonov oblikovalce prisili, da imajo v mislih dinamičen mrežni sistem, namesto fiksno širino zaslona. Mreža torej ustvari dosleden oz. enak način uporabe izdelka na napravah z različnimi velikostmi zaslona.

Pospeši postopek oblikovanja

Mreže pomagajo oblikovalcem urediti razmerja med elementi uporabniškega vmesnika, kot so presledek in robovi, to pa že od samega začetka omogoči dovršeno zasnovo ter se izgone spremembam zaradi nepravilne prilagoditve.

Poenostavi izboljšavo in ponovno uporabo zasnove

Za razliko od tiskanih publikacij, digitalni izdelki niso nikoli dokončani — ves čas se spreminjajo in razvijajo. Mreže ponujajo trden temelj zato, ker takrat, ko je vse prilagojeno mreži, pretekle rešitve zlahka ponovno uporabimo, da bi ustvarili novo različico zasnove. Mreža je torej ogrodje, ki se lahko uporabi za popolnoma drugačen izgled strani.

Spodbuja sodelovanje

Mreže oblikovalcem olajšajo sodelovanje pri zasnovah, saj ponujajo načrt za postavitev elementov. Mrežni sistem omogoča ločeno delo na vmesniku, ker več oblikovalcev lahko brezskrbno dela na različnih delih zasnove, vedoč, da bo njihovo delo v celoti integrirano in usklajeno.

Zadnje na blogu!

Preberite, o čem pišemo

Partnerji nam zaupajo, ker vedno najdemo prijazne, intuitivne in strateške rešitve za končnega uporabnika. Dobrodošli, da vas navdušimo.