Kuinka käyttää käyttöliittymän muotoilumuotoja
Suunnittelumallit ovat optimaalisia ratkaisuja yhteisiin suunnitteluongelmiin. Kun yhteiset ongelmat heitetään yhteisössä ja ratkaistaan, usein syntyy yhteisiä ratkaisuja. Lopulta paras niistä nousee din, itsensä tunnistaa ja jalostuu, kunnes ne saavuttavat suunnittelumallin tilan.
En kutsisi suunnittelumallin trendiksi verkkosuunnittelussa. Suunnittelumallit näyttävät olevan enemmän siitä, miten tavalliset mallit luokitellaan jälkikäteen, eikä taata uutta aluetta tai katsoa, mistä asiat ovat.
Miten lähestyt käyttöliittymän suunnittelumalleja?
Käytämme suunnittelumalleja koko ajan, jos et tunne niitä, luultavasti ole ymmärtänyt, että ne ovat kaikki ympärilläsi.
Entä klassinen esimerkki siitä, että liian monta sisältöä näytetään yhdelle sivulle? Käännymme huomiomme "Tabs" -ominaisuussuunnitelmaan, joka antaa meille mahdollisuuden palvella koko haluamamme sisältöä tekemättä käyttäjää katoamasta linkkien mereen.
Tyypillisiä etuja suunnittelukuvion käytössä ovat:
- osoittaa aloittelijoille, miten käyttää web-suunnittelussa parhaita käytäntöjä;
- oppiminen mukautumaan suunnittelijoiden kollektiiviseen ymmärrykseen;
- mikä mahdollistaa paremman viestinnän, vähentää tuntemattomien valintojen riskiä;
- vähentää tarvittavaa aikaa ja kustannuksia työnkulun tiettyjen tehtävien suorittamiseksi;
- välttäen hukkaan aikaa rakentamaan jotain, joka on aiemmin rakennettu;
- antaa käyttäjälle kokemuksen, jonka hän tuntee ja kokee (suunnittelumallien luonne).
Edellä olevassa esimerkissä näemme Clicky Media käyttäen kahta hyvin suosittua mallikuvausta tänään:
- Navicon - yleinen valikon symboli, joka tunnetaan myös sivuston navigoinniksi, on yhä suosittu nykyaikaisessa web-suunnittelussa, mutta se on jo täysin mukautettu mobiililaitteisiin.
- Parallax Scrolling - ainutlaatuinen kuviointikuvio, joka mahdollistaa yhden sivun verkkosivuston, helppokäyttöisen vieritysmekanismin avulla, mutta sisältää myös luettelon taustalevyistä, jotka antavat sivulle vilkkaan tunnelman.
Vaikka sekä Navicon-valikko että sivun yläpuolella oleva yleinen valikko jakavat samanlaisia valintoja - olisi hyvin houkuttelevaa sisällyttää kaikki linkit samaan otsikkopalkkiin - on selvää, että pienet valinnat voivat tehdä suuren eron.
Tässä on, mitä sinun tarvitsee ajatella suunnitellun mallin arvioinnissa ja mukauttamisessa omiin tarpeisiisi:
- Ongelman tiivistelmä: mitä käyttäjäongelmia olet ratkaissut? Pysy keskittyneenä ja laita se käyttäjälähtöiseksi - vain yhdellä virkkeellä.
- Ratkaisu: miten muut ovat ratkaisseet tämän ongelman? Muutamia asioita yksityiskohtiin ovat käyttäjän navigointi (mukaan lukien pikakuvakkeet), käyttäjätulojen saanti, tietojen käsittely ja integrointi muiden palveluiden tai sovellusten kanssa sekä tietojen ja sisällön näyttäminen (mukaan lukien oletusasetukset).
- Esimerkki: hyvä, voitko näyttää minulle? Joskus kuvakaappaus tai mockup on riittävä; muut kerrat, käyttäjän virtaukset ja / tai ylimääräiset muistiinpanot ovat välttämättömiä mallin selkeyttämiseksi.
- Käyttö: milloin tätä mallia (ei) pitäisi käyttää? Muutamia yksityiskohtia ovat esimerkiksi tuotearkkitehtuuri, käyttöliittymäsuunnitelma, laite (t), ohjelmointikieli, puuttuminen tai muiden suunnittelumallien olemassaolo, käyttäjän tyyppi ja ensisijainen käyttötapaus.
Se vie käytännön ja kurinalaisuutta ajattelemaan kuvioita tällä tavalla, jos et ole vielä tehnyt sitä. Ota aikaa vastata näihin kysymyksiin tuotteesi suunnittelussa, koska se voi auttaa sinua säästämään paljon aikaa uudelleen tiellä, kun käyttäjät ja ryhmä kysyvät vastaavia tietoja.
UI-työkalujen nousu
Käyttöliittymän suunnittelumallit ovat aina olleet helpottamaan käyttäjän siirtymistä verkkosivustollesi, sovelluksellesi tai järjestelmälle. Jos käyttäjä oppii antamaan kommentin ensimmäistä kertaa, on todennäköistä, että hän välittömästi osaa lähettää sähköpostin yhteystietolomakkeella. Se on sama toistuva käsitys tietojen syöttämisestä.
Viime vuosina olemme nähneet valtavaa kasvua UI-työkalupakki markkinoilla. Käyttöliittymän työkalupakki voidaan yksinkertaisesti ymmärrä joukoksi widgettejä, joiden avulla voit rakentaa täysin graafisen sovelluksen tyhjästä. Twitter Bootstrap on täydellinen esimerkki onnistuneesta käyttöliittymän työkalusta. Nykyään suuri osa web-suunnittelijoista luottaa Bootstrap-ominaisuuksiin omien työnkulkujensa helpottamiseksi. Tietyllä tavalla pyörää ei tarvitse paljastaa!
3 käyttöliittymän suunnittelukuvioita muistaa
Lyhyesti sanottuna suunnittelumallit ovat ratkaisuja toistuviin ongelmiin. Käyttämällä kuvioita voimme selviytyä yksinkertaisista käyttöliittymän ongelmista. Jos kiinnitämme tarkkaa huomiota, huomaamme, että mallit ovat kaikki ympärillä. Ei ole mitään erityistä, että erityinen muotoilu, se on tapaa, jolla sitä on käytetty, että olet innoissasi!
Crystal Clear -toiminnot
Yksinkertaisimmilla verkkosivuilla (ja myös yleisimmillä) on yleensä vain yksi toimiva painike: tässä tapauksessa "Luo verkkosivusto". Se on melko itsestään selvää, mikä on asia.
Kuinka paljon helpompaa se voisi saada, eikö? Aina mennä helppoa vaihtoehtoa, älä keksitse pyörää vain erottumaan joukosta.
Leipäkappaleet pelastamiseen
Katkaraput osoittavat polun sivuston etusivulta käyttäjän nykyiseen sijaintiin verkkosivun hierarkiassa. Ne ovat toissijaisen navigoinnin muoto, joka auttaa käyttäjiä ymmärtämään verkkosivuston hierarkiaa ja rakennetta. Leipäruotot alkavat kotisivulla ja päättyvät tällä hetkellä tarkasteltavalla sivulla.
Tässä esimerkissä Hinnat Farhan, näemme, miten hän käyttää kahta käyttöliittymän suunnittelumallia samanaikaisesti. Ensinnäkin hänellä on tabs-kuvio päälle ja toinen leipäruusujen navigointikuvio alareunassa. Yhdistämällä ne yhteen tekee miellyttävän selailukokemuksen.
Rekisteröinnin pitäisi olla helppoa
Ellei olet elänyt kallion alla, sinun tulee olla tietoinen sosiaalisesta rekisteröinnistä. Rekisteröityminen verkkosivustoon on tavallista, ja niin pitäisi tehdä niin helppoa ja miellyttävää kuin mahdollista.
Tämä on yksi suosikkini rekisteröintisivuista tällä hetkellä. Se on GitHub etusivulle, ja kuten kuvassa näkyy, kaikki, mitä yritys on valmis, on esitetty alle sata sanaa. Sinulla on myös mahdollisuus rekisteröityä matkalla, ja prosessi kestää alle minuutin loppuun. Saat sähköpostiviestin vahvistamaan tilisi, mutta se on jotain, johon olemme tottuneet joka tapauksessa!
Lopulliset sanat
Olen rakentanut verkkosivustoja yli kahdeksan vuoden ajan, ja näiden kahdeksan vuoden aikana olen ymmärtänyt, että yksinkertaisuus on avain monille suunnitteluvirheille.
Olen päätynyt siihen johtopäätökseen, että suunnittelun epätasapaino, joka on turvonnut tarpeettomilla elementeillä ja muodoilla, on turhauttavin kokemus, joka löytyy verkosta. Kyllä, suunnittelu on täsmälleen, miten jotain toimii, joten miksi ei tehdä sitä toimimaan oikein? Käyttöliittymä (UI) on uskomattoman tärkeä yrityksen tai yrityksen menestyksen kannalta.
Paras tapa varmistaa onnistuneiden sivustojen suunnittelu on oppia ja hyödyntää olemassa olevia suunnittelumalleja.