5 būdai, kaip padaryti žiniatinklio dizainą intuityvesnį

Būdami skaitmeninės komunikacijos kūrėjai, dizaineriai, mąstytojai ir problemų sprendėjai, mes pasirenkame remdamiesi supratimu apie tikslinę auditoriją.

Šie pasirinkimai yra žinios, kurias turime iš savo kultūros, tokių kaip skaitymas iš kairės į dešinę, iš dešinės į kairę arba iš viršaus į apačią, taip pat kiti veiksniai, pavyzdžiui, svarbių vaizdų, teksto, interaktyvių skelbimų išdėstymas sąsaja ir spalvų pasirinkimas.

Be kultūros, yra žmogaus akis ir tai, kaip smegenys registruoja to, ką akis mato, svarbą. Šiek tiek suprantant vizualaus dizaino principus, aprašytus nemokamoje elektroninėje knygoje Žiniatinklio vartotojo sąsaja žmogaus akiai , mes galime sukurti nepaprastai efektyvias svetaines.



01. Dizainas pirmiausia smegenims

Norint išmokti tinkamo projektavimo, reikia išstudijuoti dizaino istoriją. Didieji dailininkai ir dizaineriai istorijoje visi laikėsi paprastų dizaino taisyklių, ir nesvarbu, ar jos laikėsi, ar sulenkė, ar pažeidė tas taisykles, būtent pagrindai leido jiems būti tokiems labai vertinamiems.

Smegenys daugelio tyrimų metu vadovaujasi informacijos registravimo modeliu pagal apmokytą hierarchiją to, kas pateikiama. Drąsios spalvos, drąsus tipas, kontrastai ir išdėstymas visada yra tas, kas parodo šiluminius akių stebėjimo testus, daugiausia todėl, kad būtent taip mes mokomės.

Vaizdo leidimas iš „Nielsen Norman Group“: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

* Įdomi pastaba: Pažiūrėkite, kaip dėmesys atitolsta skaitant paskutinį teksto trečdalį paveikslėliuose kairėje ir dešinėje? Vartotojai skaito vis rečiau. Išardykite ilgus teksto stulpelius kaip viduriniame paveikslėlyje.

Taip pat nepamirškite, nes vartotojai retai skaitys kiekvieną jūsų teksto žodį, pirmosios dvi pastraipos yra svarbiausios ir jose turėtų būti jūsų nuomonė. Pradėkite pastraipas, paantraštes ir taškus su viliojančiais raktiniais žodžiais, kad atkreiptumėte dėmesį.

mokslinės fantastikos kosminio laivo dydžio palyginimo lentelė

Kai viršininkas ar klientas tvirtina, „padaryk tai pop“! arba „pridėkite daugiau“ UMPH! “ prie jo! ' jis ar ji reikalauja paprasčiausio akių atpažinimo būdo - padaryti jį didesnį ir drąsesnį. Tuo pačiu principu neigiamos erdvės naudojimas priverčia akis sutelkti dėmesį į vieną konkrečią sritį, kuri gali būti ne didesnė ir drąsesnė.

Z ir F modelių projektavimo principai (dar žinomas kaip maketas) atitinka žmogaus akies mokymo nuskaityti svetainę pobūdį. Puikūs kūriniai dažnai pasikliauja gamtos srautu, kad būtų malonus dizainas.

„F“ modelis, paremtas skaitymu iš kairės į dešinę ir naudojant „Grid“ modelį, yra paprastas, lengvas ir išdėsto informaciją akiai paprasta hierarchija. Antraštė paveikslėlio viršuje su deskriptoriumi ir nuoroda. Judėkite žemyn ir pradėkite kitą turinio dalį. Nereikia daug galvoti, bet ir ne visai įdomu.

Kaip aprašyta Žiniatinklio vartotojo sąsaja žmogaus akiai , „F“ modelis yra labai naudingas svetainėms, kuriose įterpiama reklama ar raginimai veikti, tačiau nenorite visiškai išstumti turinio. Šiuo atveju šoninė juosta egzistuoja, kad vartotojai būtų įtraukti į gilesnį lygį. Kaip ir visuose modeliuose, „F-Pattern“ yra gairė, o ne šablonas, nes „F“ modelis gali jaustis nuobodus po viršutinių „F“ eilučių.

Viršelio leidimas iš Jerry Cao per http://speckyboy.com/

Viršelio leidimas iš Jerry Cao per http://speckyboy.com/

Panašus akių judesio naudojimas skaitytojams iš kairės į dešinę yra Z modelis. Panašiai kaip F raštas, Z seka kairįjį į dešinįjį skaitydamas kaip puslapio nuskaitymą, įdėdamas svarbius elementus akies Z nuskaitymo kelyje.

Svetainės, kuriose naudojamas „Z“ šablonas, paprastai nėra sudėtingos ir jose yra aiškus raginimas veikti. Šis akių nuskaitymo būdas atves vartotoją greičiau, o žiniatinklyje - greičiau.

Viršelio leidimas iš Jerry Cao per http://mailchimp.com/

Viršelio leidimas iš Jerry Cao per http://mailchimp.com/

02. Sužinokite apie taisykles ir kada jas pažeisti

Yra kelios populiarios dizaino minties „taisyklės“. Visi turi galiojančius taškus ir, žinoma, visus galima sėkmingai „sulaužyti“!

Norėdami parodyti, kaip veikia šios dizaino taisyklės, žemiau pateikiami keli sugrupuoti vaizdai. Vienas yra paprastas, nuotraukų. Kitas yra vienas iš keturių labai gerbiamų dizainerių darbas, Pietas Zwartas , Josefas Mülleris-Brockmannas , Paulas Randas ir Saulius Bassas . Įmetę keletą konkrečių svetainių, pažiūrėkime, kaip šie vaizdai laikosi skirtingų dizaino taisyklių.

Vaizdai sutinkami su „GL Stock Images“, http://graphicleftovers.com/

Pietas Zwartas (viršuje kairėje), Josefas Mülleris-Brockmannas (viršuje dešinėje), Paulas Randas (apačioje kairėje), Saulius Bassas (apačioje dešinėje)

Pietas Zwartas (viršuje kairėje), Josefas Mülleris-Brockmannas (viršuje dešinėje), Paulas Randas (apačioje kairėje), Saulius Bassas (apačioje dešinėje)

03. Auksinio stačiakampio naudojimas

Taip pat žinomas kaip Auksinis santykis , šis jūros kriauklės formos matematinis košmaras per amžius buvo naudojamas kaip saldžiosios dėmės atradimo šaltinis, maksimalaus dėmesio sritis puslapyje ir sritys, kurios nukreips akį tiesiai į ją.

Auksinis stačiakampis, dar vadinamas auksiniu santykiu

Auksinis stačiakampis, dar vadinamas auksiniu santykiu

Geometrijoje auksinis stačiakampis yra stačiakampis, kurio kraštinių ilgiai yra auksinio santykio:

1: tfrac {1 + sqrt {5}} {2}, kuris yra 1: varphi (graikų raidė phi), kur varphi yra maždaug 1.618.

Taip, tai greitai, jei matematika yra tavo sėkmė. Jei ne, pabandykite šioje svetainėje išsamų paaiškinimą ir interaktyvią diagramą. Paprastas paaiškinimas yra tas, kad jei pažvelgsite į pagrindinę formą ir židinio tašką (turėdami omenyje, kad forma gali būti apversta, apversta ar pasukta, atsižvelgiant į paveikslėlį ir elementus, esančius dizaine), mintyse lengva uždengti dizainą .

Naudodamiesi nuotraukų nuotraukų grupe, pažiūrėkite, kaip auksinis stačiakampis tinka dizainui ir parodo maksimalaus dėmesio sritį?

Vaizdai sutinkami su „GL Stock Images“, http://graphicleftovers.com/

Tiesiog naudodamiesi šia taisykle fono paveikslėlyje, galėsite įdėti bet kurį elementą (t. Y. Teksto bloką, raginimą veikti, vartotojo sąsają ir kt.) Ten, kur jis tikrai pritrauks vartotoją.

Naudodami Auksinį stačiakampį Zwarto, Müllerio-Brockmanno (kuris žinomas kaip „Grid Layout“ tėvas), Rando ir Basso (taip pat tinklelio pasekėjai) kūryboje, pastebėsite, kad nors jis rodo svarbius taškus tęs dizainą, ar tai tikrai būtinas žingsnis, atsižvelgiant į kitus išdėstymo modelius, kurie rodo tas pačias „karštas“ sritis?

Pastaruosius porą metų „Pinterest“ maketas buvo labai populiarus daug turinio turinčiose svetainėse. Pagrindiniame dizaino sraute naudojamas F modelis. Veiksminga, bet ne jaudinanti smegenis, kai nuskaitoma akimi.

Viršelio leidimas iš http://zergnet.com/

Viršelio leidimas iš http://zergnet.com/

Turinio turinti naujienų svetainė, tokia kaip Niujorko laikas suprojektuoja savo puslapį su auksiniu stačiakampiu, kad nukreiptų akis nuo svarbiausios istorijos iki mažiausiai virš slinkties. Tai yra puikus būdas patalpinti kelis teksto blokus svetainėje ir vis tiek priversti kiekvieną užimti savo vietą puslapio hierarchijoje.

Viršelio leidimas iš http://www.nytimes.com/

kaip save reklamuoti kaip grafikos dizainerį
Viršelio leidimas iš http://www.nytimes.com/

Čia yra šiek tiek apgauti tiems, kurie nenori atlikti matematikos: tiesiog nukopijuokite auksinį stačiakampį ir padėkite jį ant sluoksnio virš savo dizaino. Tai taip pat rodo sritis, kurioms skiriamas didžiausias dėmesys puslapyje, ir jas lengva įsivaizduoti mintyse kuriant puslapį.

  1. Pradėkite piešdami įstrižą liniją iš kairio, viršutinio kampo (jei kuriate auditoriją, kuri skaito iš kairės į dešinę, pakeiskite šį veiksmą) į apatinį dešinįjį kampą.
  2. Iš apatinio kairiojo kampo nubrėžkite liniją iki įstrižainės, perpjaudami stačiakampį per pusę, ir leiskite jam įstrižainės liniją sutikti 90 laipsnių kampu.
  3. Pakartokite tą patį iš viršutinio dešiniojo kampo.

Stačiojo kampo taškai yra dvi sritys, į kurias didžiausias dėmesys skiriamas vartotojo akims. Paprastas, greitas būdas suplanuoti svetainės puslapio dizainą.

04. Taikant trečdalių taisyklę

Taip pat žinomas kaip „devynių dizainas“, „Trečiųjų taisyklė“ (Ro3) yra labiausiai paplitęs svetainių maketas. Projektavimo srities pjūviai suteikia dizaineriui apibrėžtas svarbias sritis. Sritis galima suskirstyti į viršutinę, vidurinę ir apatinę dalis, kairę, vidurinę ir dešinę arba tik trečdalį kaip atskirą sritį, pavyzdžiui, šoninę juostą.

Viršelio leidimas iš McDonalds.com

Viršelio leidimas iš McDonalds.com

Šioje srovėje „McDonald's“ pagrindinis puslapis (jų svetainė reguliariai keičiasi ), Ro3 išskiria erdvę, kad jūsų akys galėtų nuklysti į šias sritis:

  1. CTA priekyje ir centre naudoja turinio pranašumus, kad suviliotų vartotoją toliau tyrinėti. Kadangi ši CTA nesiorientuoja į produktą, tikriausiai ji patiria mažiau trinties.
  2. OHO! Tik už visą valgį - 2,50 USD? Aš net užbėgau už akių besišypsančiam darbuotojui, kuris padarys mano paties vartotojo patirtį malonesnę, skirtingai nei šaipantis vyras viršutiniame dešiniajame kampe, tačiau nėra toks pastebimas, nes ši sritis daro įtaką mano akių nuskaitymui .
  3. Ah-HA! Naudodamas šį raginimo veikti mygtuką, matau kitų malonių patiekalų derinių. Pažiūrėkime, ar galiu būti malonu spustelėjęs šį mygtuką savo dabartinės visatos centre - šiame tinklalapyje.
  4. Bet pirmiausia mane vilioja šios spalvos dėžutės. Taip, ant grotelių kepta vištiena yra gera, ir man įdomu, ar šie dalykai mano burnoje yra tikros bulvės, bet labiausiai mane keistai domina pažadas, kad galėsiu „įsitraukti į meilės veiksmą“.
  5. Kaip nuolat primena, logotipas ir maistas matomi viršuje kairėje. Aš matau, ko noriu ir kur galiu tai gauti!

Pažvelgus, kaip tai veikia su šio straipsnio vaizdais, atkreipkite dėmesį, kad susikertančios Ro3 tinklelio linijos išryškina svarbiausias akies sritis. Pavyzdžiui, atkreipkite dėmesį į tai, kaip pirmojoje nuotraukoje linijos susikerta aplink vyro veidą ir lemputę. Taip pat pažiūrėkite, kaip linijos susikerta rašytojo veide ir veiksmo vietoje (jo plunksna ir ranka).

Vaizdai sutinkami su „GL Stock Images“, http://graphicleftovers.com/

Viršelio leidimas iš www.awwwards.com

Viršelio leidimas iš www.awwwards.com

Dabar pažvelk į Taisyklių taisyklę, taikomą svetainėse, į kurias atkreiptas dėmesys tendencijų ir pavyzdžių puslapis (aukščiau). Vėlgi, pažiūrėkite, kaip susikertančios sritys kelia didelį susidomėjimą? Turėkite tai omenyje kitą kartą, kai planuojate sąsajos sudėtį.

05. Tinklelio įvaldymas

Konstrukcijoje tinklelis yra struktūra, susidedanti iš susikertančių tiesių ar išlenktų kreipiamųjų linijų, naudojamų turiniui struktūrizuoti. Tinklelis yra vadovas, kuriame dizaineris gali racionaliai, lengvai įsisavinti akis ir smegenis tvarkyti grafinius elementus.

Kaip parodyta žemiau naudingame prototipų kūrimo įrankyje „UXPin“, tinklelis padeda atitinkamai tvarkyti grafinius elementus:

  • Puslapio atžvilgiu
  • Kalbant apie kitus puslapio grafinius elementus
  • Kalbant apie kitas to paties grafinio elemento dalis, susijusias su puslapiu, su kitais puslapio grafiniais elementais arba su kitomis to paties grafinio elemento dalimis.

Vis dėlto tinklelis daugeliui gali būti painiava suprantama sistema. Taip yra todėl, kad dizaino mokytojai to neteisingai moko.

Viršelio leidimas iš UXPin

Viršelio leidimas iš UXPin

Kaip minėta anksčiau, Josefas Mülleris-Brockmannas yra laikomas vienu iš šiuolaikinės tinklo išdėstymo sistemos tėvų. Taigi kodėl jo kūryba yra tokia šviežia ir novatoriška praėjus daugiau nei 70 metų?

Galbūt tinklelio sukūrimas padėjo jam suprasti ir apribojimus bei laisvę. Daugelis žmonių mano, kad tinklelis riboja dizaino laisvę. Tikrovėje tinklelis nėra dizaino pasirinkimo apribojimas, bet pagalbinis projektavimo procesas, padedantis parodyti elementų ryšį visoje svarbioje puslapio hierarchijoje - kaip ir kitos šiame straipsnyje aptartos dizaino išdėstymo taisyklės.

„Google“ atlikus paiešką pagal „tinklelio išdėstymą“ gaunama dešimtys milijonų grąžų. Nuskaitydami „Google“ paieškos teikiamus vaizdus, ​​jūsų akis užregistruos blokus, horizontalias ir vertikalias linijas, dažnai vienodai nutolusias per visą maketą.

Garsusis 1972 m. NYC metro žemėlapis, kurį sukūrė Massimo Vignelli, buvo novatoriškas didelės tranzito sistemos dizainas. Jis turi ir vis dar įkvepia tranzito žemėlapius visame pasaulyje. Akivaizdu, kad jis sukurtas tinklui. Tai intensyviai naudoja patį tinklą, traktuodama tranzito sistemą ir keturias Niujorko seniūnijas labiau kaip dizainą, o ne tikslų mylių ir atstumo vaizdavimą (tai buvo pagrindinis skundas dėl projekto).

Paveikslėlis sutinkamas su The New York City Transit Authority, http://www.mta.info/nyct

Paveikslėlis sutinkamas su The New York City Transit Authority, http://www.mta.info/nyct

Panašu, kad šiose dviejose svetainėse naudojamas Ro3, jei pažvelgsite virš slinkties. bet žiūrint visus puslapius akivaizdu, kad puslapiai buvo sukurti pagal tinklelį.

Viršelio leidimas iš GeneralAssembly.com ir TreeHouse.com

Viršelio leidimas iš GeneralAssembly.com ir TreeHouse.com

Štai keletas svarbiausių dalykų, kuriuos reikia atsiminti, kai tinklelis yra jūsų vartotojo sąsajos pagrindas:

kaip nupiešti portretą Photoshop
  • Tinklelis yra vadovas, o ne linijų ir kubų kalėjimas.
  • Tai padės organizuoti jūsų dizainą ir išdėstymą tokiu pačiu būdu, kaip tai daro „F“ modelis, „Z“ modelis, „3s taisyklė“ ir „Auksinis stačiakampis“.
  • Tai tik pradinis sluoksnis, padedantis ant jo uždėti elementų segmentus.
  • Jie gali būti sukrauti puikiai arba sukti aplink puslapį, tačiau logiška tvarka, kad akis nuskaitytų ir smegenys sureaguotų.

Kodėl tai svarbu

Kadangi regėjimas yra stipriausias žmogaus jausmas, internetinis puslapis turi papasakoti istoriją iš pirmo žvilgsnio.

Jūsų vartotojas žino per 10-20 sekundžių jei jie ketina išeiti, turite kuo greičiau juos įtikinti. Bendras dizainas pasakoja istoriją, o vartotojas turi būti nukreiptas nuo pirmojo tos istorijos skyriaus iki paskutinio. Šie dizaino modeliai yra šio iššūkio sprendimas.

Visi kūrybininkai abejoja savimi, kai reikia pasirinkti dizainą. 'Ar tai tinkama vieta?' „Aš baigiau, bet nesu laiminga“. Ką aš galiu padaryti, kad įsitikinčiau, jog tinkamai pasirenku? Teisingai naudojami maketavimo modeliai padės suprojektuoti vartotojo sąsają (ar bet kurią su žiniatinkliu susijusią dizaino problemą), kad ji būtų maksimaliai efektyvi, taip pat sukuria vizualinę harmoniją. Ir nuo to laiko gražūs dalykai veikia geriau , visa ši taktika padeda sukurti kuo geresnę vartotojo patirtį.

Norėdami gauti daugiau vaizdinio vartotojo sąsajos dizaino patarimų, peržiūrėkite nemokamą el. Knygą Geriausia žiniatinklio vartotojo sąsajos dizaino praktika . Tai išsamus, bet greitai skaitomas vadovas, kuriame mokoma analizuoti 33 puikių dizaino pavyzdžių iš tokių kompanijų kaip „Houzz“, „Fitbit“, „Google“ ir „AIrbnb“.

Žodžiai: Skautų siuvėjas

„Speider Schneider“ yra produktų dizaineris, dirbęs projektuose „Disney / Pixar“, „Warner Bros.“, „Harley-Davidson“, ESPN, „Mattel“, „DC“ ir „Marvel Comics“, „Cartoon Network“ ir „Nickelodeon“. Jis taip pat yra parašęs šimtus straipsnių apie interneto dizainą ir UI / UX

Patiko tai? Išbandykite šiuos ...

  • 11 puikių vartotojo sąsajų
  • 10 žingsnių įtraukiant vartotojo patirtį
  • Atsisiųskite geriausią nemokami šriftai