Hierarkiatasapaino visuaalisen käyttöliittymän suunnittelussa. Visuaalisen käyttöliittymän suunnittelu Riippumatta siitä, kuinka paljon vaivaa käytät käyttäjien tutkimiseen ja tuotteen käyttäytymismallin luomiseen, joka auttaa saavuttamaan heidän tavoitteensa, vaivaa riittää. Yleisen periaatteen soveltaminen

9 vastausta

tässä on minun temppuni, toivottavasti se auttaa. /

Ensinnäkin se tekee selväksi design Ja kehitystä

design on käsitteellistä työtä, ratkaisukonseptin luomista, prosessia, jossa poistetaan asioita, jotka eivät mielestäsi, tunne tai usko sopivat ratkaisuksi aiottuun päämäärään.

kehitystä kehittää lopullista spesifikaatiota/ideaa (ainakin teoriassa) tai jotain, joka on järkevä ja lähellä etsimääsi (vaikka se ei olekaan monissa tapauksissa) periaatteessa kääntäen suunnittelusi/ideaasi toimivaksi lopputuotteeksi

Huomautus että molemmat asiat voivat ja useimmissa tapauksissa esiintyä rinnakkain tuotteen valmistuksessa

Nyt kun hallitsematon, visual, web, ux, ui ovat vain konseptin alaluokkia, joista jokaisella, vaikka ne perustuvatkin suunnitteluperiaatteeseen, on myös omat universuminsa ja omat tukisäännöt ja tukikäytännöt, jotka koskevat suoraan niitä vastaavia alakategorioita ja monissa tapauksissa saattaa tuntua leviävän alakategoriasta toiseen.

ymmärryksestäni ja siitä, mitä olen vuosien aikana oppinut,

vuorovaikutuksen suunnittelu(ei toimialuekohtainen) - käsite/ymmärrys siitä, kuinka yksi/yksilö on vuorovaikutuksessa kokonaisuuden kanssa ja kuinka suunnitella prosessi, jolla tämä henkilö on vuorovaikutuksessa kokonaisuuden kanssa. tämä objekti voi olla mikä tahansa valitsemasi, kuten autosi tai leivänpaahdin, verkkoselaimesi ja selaimessa tarkastelemasi verkkosivusto.

visuaalinen suunnittelu(ei relevantti alan kannalta) - käsite/ymmärrys kohteen esteettisestä vetovoimasta ja vaikutuksesta, jonka kanssa henkilö on vuorovaikutuksessa/katsomassa

Web-suunnittelu(verkkotunnuskohtainen) - käsite/ymmärrys ideasta, joka on teknologiakohtainen ja sisältää näkökohtia useista suunnittelukonsepteista, kuten, mutta ei rajoittuen: vuorovaikutussuunnittelu, visuaalinen suunnittelu, käyttökokemuksen suunnittelu, käyttökokemuksen suunnittelu jne. .d.

(ei toimialuekohtainen) - käyttöliittymäsuunnittelun käsite, joka puolestaan ​​sisältää visuaalisen ja vuorovaikutteisen suunnittelun sekä sen toimialueen rajoitukset, jossa tällaista suunnittelutyötä tehdään.

käyttöliittymä(jonkinlainen kenttäkohtainen) - käsite sellaisen käyttöliittymän suunnittelusta, jonka kautta käyttäjä voi olla vuorovaikutuksessa tuotteen, ohjelmiston/verkkosovelluksen käyttöoppaan tai auton ohjauspyörän kanssa

käyttöliittymän kehittäminen(ei kenttä) on prosessi, jossa käyttöliittymäsuunnittelukonsepti muutetaan toimivaksi käyttöliittymäksi, joka luo fyysisen yhteyden yksilön ja tuotteen välille.

Toivottavasti tämä auttaa

Käyttöliittymän suunnittelu – miltä käyttäjä ajattelee ja tuntuu
Tietoarkkitehtuuri - miten järjestelmä on järjestetty
Käyttöliittymän suunnittelu – Miten sisältö on järjestetty
Vuorovaikutussuunnittelu – kuinka käyttäjä ja laite toimivat ja reagoivat
Visuaalinen suunnittelu - miltä se näyttää

Jotkut tai kaikki yllä mainituista tieteenaloista ovat osa seuraavia aloja:
Arkkitehtuuri, kun se liittyy rakennuksiin
Sisustussuunnittelu, kun se liittyy sisätiloihin
Aineellisiin esineisiin liittyvä teollinen muotoilu
Graafinen suunnittelu, jossa on tekstiä ja kuvia
Digitaaliseen I/O:hen liittyvä sovellussuunnittelu
Selaimeen liittyvä web-suunnittelu

Vuorovaikutussuunnittelu - Tutkija, määrittelee järjestelmän/sovelluksen VUOROVAIKUTUKSEN/VIESTIN. Visuaalinen suunnittelu - Grafiikan havainnollistava taiteilija voi olla web/print media/.etc. Web Design - taiteilija MUTTA vain WEB-SOVELLUKSELLE UX Design - Tutkimushenkilöstö, joka ymmärtää kaiken ja kaiken KÄYTTÄJÄLTÄ ja valvoo kokemusta HAPPY/SMILEY KOKEMUS Käyttöliittymäsuunnittelusta - Sama kuin Web Design Frontend Development - Frontend Developer - HTML, CSS, JS, JQuery, Ajax, YUI, Php, Silverlight.net.etc.etc.c. Kaikki knd käyttöliittymätekniikat.

Haluan järjestää sen yksinkertaisella/yksinkertaisella tavalla UX DESIGN INTERACTIVE DESIGN KÄYTTÖLIITTYMÄ /VERKKO/VISUAALINEN SUUNNITTELU KÄYTTÖJÄRJESTELMÄN KEHITTÄMINEN

Vastaukseni tähän kysymykseen:

Vuorovaikutuksen suunnittelu- edustaa hyödyllisyyden käsitteeseen liittyvää rakentavaa näkökohtaa. Visuaalisten elementtien valintaa eivät määrää esteettiset periaatteet, vaan se, kuinka hyödyllinen suunnittelu on sivuston kävijälle ja kuinka paljon se yksinkertaistaa ja optimoi hänen käyttökokemustaan.

Esimerkkilähestymistapa: Onko pyöreä painike sopiva kohdeyleisöllemme vai neliömäinen?

Suunnittelu > Ja käyttöliittymän suunnittelu tarkoittaa esteettistä käsitystä. Ainoa ero visuaalisen suunnittelun ja käyttöliittymäsuunnittelun välillä on, että edellinen on kattavampi, sisältäen kaiken painikkeista, kuvakkeista ja asetteluista julisteisiin, kun taas jälkimmäinen ei sisällä bannereita, keskittyen pääasiassa kuvakkeisiin/painikkeisiin/ sovelluksen temaattiseen puoleen.

UX-suunnittelu on samankaltainen kuin Interaction Designin käsite, mutta se on tässä suhteessa enemmän "hardcore" ja kuvaa loogista lähestymistapaa käytettävyyteen, kuten verkkosivuston loogista arkkitehtuuria käyttäjän tarpeiden mukaan. Se on suunnittelu-, projisointi- ja kehystysprosessi, ominaisuuksien luominen ja järjestelmän tarjoaminen, ja vuorovaikutussuunnittelu on toinen askel.

Lopuksi, UX liittyvät luonnostelun ja kehystyksen käsitteeseen, UI viimeistelee suunnittelun vastaavasti (lisäämällä teeman, verkkoturvallisia fontteja ja väripaletin), ja käyttöliittymäsuunnittelu on prosessi, jossa suunnittelu luodaan uudelleen koodauksen aikana.

Saat lisätietoja tästä Interaction Foundationista: https://www.interaction-design.org/literature?ep=mb

Todellinen ongelma, joka meidän on ratkaistava, on ero käyttöliittymän, vuorovaikutuksen ja UX:n välillä.

Tässä on toinen MAAILMAN ENSIMMÄINEN SYVÄKESKUUS tällaisista eroista.

(1) Käyttöliittymä tarkoittaa, kuinka käyttäjä "katsoi" järjestelmää/sovellusta ja kuinka järjestelmä/sovellus "puhuu" käyttäjälle. Sovelluksen ulkonäkö, koko, asettelu, värit, fontit, näyttö, kuten myymälän valaistus, hyllyn korkeus ja leveys, saaren leveys ja pituus jne.

(2) Vuorovaikutus viittaa siihen, kuinka käyttäjä "toimii" järjestelmään/sovellukseen ja miten järjestelmä/sovellus "toimii" käyttäjään. Tässä lainaan vahvasti Chris Crawfordin teoksesta The Art of Interaction Design: A Selfish and Illuminating Guide to Creating Successful Software.

Hän olettaa, että hyvä vuorovaikutus muistuttaa hyvää keskustelua ja että hyvällä keskustelulla on kolme olennaista ominaisuutta, jotka selitän alla olevassa esimerkissä. Hän sanoo, että hyvä interaktiivinen osallistuja "kuuntelee", "ajattelee" ja vastaa kohtuullisessa ajassa.

Henkilö/sovellus vain kuuntelee. Silloin se ei ole esimerkiksi interaktiivista. tallennin, kirja, seinä

Henkilö/sovellus vain puhuu. Silloin se ei ole esimerkiksi interaktiivista. radio, vanhan ajan televisio, vanhan ajan CD-soitin

Henkilö/sovellus vain puhuu ja kuuntelee, mutta ei ajattele. esimerkiksi jotkut automaattivastaajat, jotkut sosiaaliset aukot

(3) UX Saammeko saman käyttöliittymän ja saman vuorovaikutuksen? Voivatko ne muuttua ollenkaan?

Esimerkiksi. Oletetaan, että on hakukone, joka toimii aivan kuten Google. Mutta "tunnet" tai "epäilet", että tämä uusi hakukone kerää liikaa henkilökohtaisia ​​tietojasi.

Minulle vuorovaikutussuunnittelussa on kyse käyttäjäkokemuksesta, mutta se keskittyy myös käyttäytymiseen ja yleisön tarpeiden ymmärtämiseen. Minulle kyse ei välttämättä ole itse suunnittelusta, vaan siitä, miten sitä käytetään. Vuorovaikutussuunnittelussa minua eniten kiehtoo ajatus, että vuorovaikutussuunnittelussa ei ole kyse vain enemmän jo olemassa olevan suunnittelusta, vaan myös sellaisten mallien luomisesta, joita ei tällä hetkellä ole olemassa.

Jaa

Verkkosuunnittelussa on erittäin tärkeää, että käyttäjä ei tunne oloaan epämukavaksi - se on kuin katsoisi pesualtaan täynnä likaisia ​​astioita. Jos ulkoasu on visuaalisesti epätasapainoinen, sivustosi näyttää epäjärjestyneeltä, mikä voi saada käyttäjät tuntemaan olonsa epämukavaksi. Päinvastoin, suunnittelusi tulee olla houkutteleva ja antaa vierailijoille mahdollisuuden rentoutua ja katsella ympärilleen, ja paras tapa saavuttaa tämä vaikutus on visuaalinen tasapaino. Visuaalinen tasapaino on pohjimmiltaan design-elementtien tasapainoa, niiden sijoittelu on kuin jongleerausta suunnittelusi elementtien kanssa.

Kun ajattelemme tasapainoa, helpoin tapa verrata sitä on painon käsitteeseen. Fyysinen paino ja design-elementtien paino ovat itse asiassa hyvin samankaltaisia ​​- fyysinen esine voi olla pieni mutta erittäin painava massasta riippumatta, aivan kuten visuaalinen suunnitteluelementti voi olla hyvin pieni, mutta erittäin katseenvangitsija. Fyysisen esineen raskautta voidaan verrata design-elementtien visuaaliseen kirkkauteen, ja jokainen elementti on vuorovaikutuksessa muiden suunnitteluelementtien kanssa samalla tavalla kuin fyysiset esineet.

Miksi tasapainoiset verkkosivustot näyttävät hyviltä

Rakastamme alitajuisesti tasapainoa. Rakkaus kestäviä rakenteita kohtaan on juurtunut meihin alitajuisella tasolla, päinvastoin, aiheuttaa hylkäämisen tunteen.
Siten visuaalinen tasapaino on onnistuneen suunnittelun avain. Se on se ylimääräinen kipinä, jota joillakin sivustoilla on ja toisilla ei.

Suunnitteluelementtien kanssa työskentelyyn vaikuttaa useita eri tekijöitä. Se, miten tasapainotat kahta tai useampaa elementtiä suhteessa toisiinsa ja miten edustat elementtien visuaalisia ominaisuuksia, on tasapaino- ja tasapainoominaisuuksien tyyppi.

Tasapainotyypit

Tasapainon luomiseen on useita erilaisia ​​menetelmiä. Voit käyttää näitä erilaisia ​​tekniikoita elementtien järjestämiseen ja järjestykseen luodaksesi tasapainoisen kokemuksen, joka saa käyttäjät tuntemaan olonsa mukavaksi. Katsotaanpa viittä päätapaa tasapainon saavuttamiseksi

Vaakasuora tasapaino

Pystytasapaino

Radiaalinen tasapaino

Symmetrinen tasapaino

Epäsymmetrinen tasapaino

Loistava tapa järjestää elementtejä visuaalisesti on tasapainottaa ne akselia pitkin - vaaka- tai pystysuoraan. Vaakasuora tasapaino - sijoitat elementit toistensa vasemmalle ja oikealle puolelle - kuin lasten keinussa. Pystytasapaino - ripustat esineitä ylhäältä alas keskiakselia pitkin.

Sen sijaan, että tasapainottaisit sävellyselementtejä keskiakseleita pitkin, voit myös tasapainottaa elementtejä keskuksen ympärillä - säteittäinen tasapaino. Periaatteessa voit sijoittaa elementtejä keskiakselin ympärille tai auringonsäteiden tavoin.

Toinen tasapainotyyppi, joka yleensä yhdistetään vaaka-, pysty- ja säteittäiseen tasapainoon, on symmetrinen ja epäsymmetrinen tasapaino. Symmetrinen tasapaino - kun teoksen molemmat puolet ovat peilikuvia toistensa kanssa - on kuin paperin taittaminen kahtia. Symmetria on erittäin muodollinen, tiukka tasapaino, joka on helppo silmälle ja jota käytetään laajalti rakennusten suunnittelussa tai asetteluissa. Se on myös tulossa yhä suositummaksi, koska se on helpompi kopioida missä tahansa koossa.

Epäsymmetria on luultavasti yleisin tasapainon muoto. Pohjimmiltaan se on symmetrisen tasapainon vastakohta, jossa elementit ovat tasapainossa suhteessa toisiinsa. Epäsymmetria on paljon mielenkiintoisempi malli kuin symmetria, koska symmetriasta puuttuu visuaalinen hierarkia, kun taas epäsymmetrisillä asetteluilla on yleensä korkea visuaalinen hierarkia. Epäsymmetria ei kuitenkaan tarkoita sitä, että tasapainoa ei olisi ollenkaan, se tarkoittaa yksinkertaisesti sitä, että elementit eivät ole sijoitettu toisiinsa nähden.

Mistä tiedät, minkä tyyppistä tasapainoa olisi oikea käyttää nyt? Yleensä symmetria on yleensä helpompi havaita. Siksi se on yleisempää suunnittelussa.

Joten jos tavoitteenasi on välittää yritykselle vakautta ja vahvaa organisaatiorakennetta. Toisaalta, jos haluat välittää turvalliseksi pidetyn haurauden, yritä tehostaa vaikutusta epäsymmetrialla. Epäsymmetria lisää kipinää visuaalisesti turvalliseen muotoiluun.

Symmetrian saavuttamiseksi on parasta käyttää sisältöä suunnilleen yhtä suurista osista, jotka on hajallaan koko asettelun sisällä

Epäsymmetriassa on parasta kiinnittää huomio yhteen tiettyyn pisteeseen, mikä horjuttaa katsojan katsetta

Tasapainottaa ominaisuuksia

Jokaisella esineellä missä tahansa koostumuksessa on omat ominaisuutensa sekä vuorovaikutuksen ominaisuudet muiden esineiden kanssa. Tasapainon pääominaisuudet ovat: koko, väri, muoto, koko ja sijainti. Jokaista näistä ominaisuuksista voidaan käyttää yksitellen luomaan symmetrinen tasapaino, ja näiden ominaisuuksien yhdistelmää tarvitaan tasapainon luomiseksi epäsymmetrisessä koostumuksessa - yhden elementin muuttaminen vaikuttaa muihin jne.

Suurella, tyhjällä esineellä on kevyt visuaalinen paino ja siksi se voidaan tasapainottaa pienemmän, kylläisemmän esineen kanssa. Esimerkiksi blogi, jossa on sisältöalue ja sivupalkki – sisältöalue on yleensä suurempi kuin sivupalkki. Voit tasapainottaa niitä lisäämällä valkoista tilaa sisältöalueelle ja täyttämällä sivupalkin jollain visuaalisesti painavammalla. Jos haluat saavuttaa suunnittelussasi symmetrisen tasapainon, sinun on varmistettava, että elementit ovat samankokoisia visuaalisesta painosta riippumatta.

Kohteen väri koostumuksessa voi muuttaa elementtien visuaalista painoa. Tummemmat värit ovat visuaalisesti raskaampia kuin pehmeät, vaaleat värit - punainen on visuaalisesti raskaampaa kuin keltainen, koska se herättää enemmän huomiota. Jos yrität tasapainottaa tummaa elementtiä toisen tai useamman vaalean elementin kanssa, voit kokeilla leikkiä muilla tasapainoominaisuuksilla tai muuttaa ympäröivien elementtien taustaväriä.

Elementtien muoto voi muuttaa sävellyksen tasapainoa dramaattisesti. Aaltoilevat tai rosoiset muodot ovat visuaalisesti mielenkiintoisempia ja siksi raskaampia kuin muodot, joissa on hyvin yksinkertaisia, suoria linjoja. Älä yritä tasapainottaa useita elementtejä monimutkaisen muodon kanssa, vaan tasapainottaa monimutkainen ja yksinkertainen esine.

Kontrasti voi olla erittäin tärkeä tekijä sävellyksen tasapainossa. Mitä suurempi objektin kontrasti on, sitä raskaampi se on ja päinvastoin. On olemassa useita tapoja tasapainottaa elementtejä, joilla on eri kontrasti, yksi niistä on kompensoida elementin alhainen kontrasti terävällä taustalla tai tekstuurin kontrastilla. Voit myös lisätä yksinkertaisia ​​reunuksia, liukuvärejä ja varjoja vähentääksesi elementtien kontrastia.

Sijainti

Tämä on tärkeä tekijä, ja tätä ominaisuutta voidaan käyttää tasapainottamaan muita elementtejä, jotka eroavat muodoltaan, väriltään, painoltaan ja koosta. Kuten aiemmin totesimme, suuri esine on painavampi kuin pieni, mutta niiden paino riippuu myös siitä, kuinka lähellä ne ovat sivun keskikohtaa. Lähempänä keskustaa olevat objektit painavat enemmän kuin siitä kauempana olevat, joten jos sinulla on esimerkiksi suuri punainen kohde lähellä keskustaa, voit siirtää sen pois keskustasta tai siirtää muita kohteita kohti keskustaa.

Kuinka lisätä saldoa sivustolle

Joten miten saat sivusta näyttämään tasapainoiselta? Otetaan esimerkkinä yksinkertaisin symmetrinen tasapaino. Tyhjä sisältö näyttää melko tylsältä, joten lisätään valikko. Jos katsot melkein mitä tahansa hyvää suunnittelua, huomaat, että valikko on suunniteltu tekstiä "raskaammaksi". Tässä saavutetaan primitiivisin tasapaino - pieni raskas elementti tasapainottaa runsaan mutta kevyen tekstin. Aloita asettelun kehittäminen piirtämällä tarvittavat elementit. Nämä säännöt auttavat sinua välttämään virheitä:

Nykyaikaiset trendit ja lähestymistavat verkkokehitykseen

Opi nopean kasvun algoritmi alusta alkaen verkkosivustojen rakentamisessa

Suuret esineet ovat painavampia kuin pienet

Tummat esineet ovat raskaampia kuin vaaleat

Tyydytetyt värit ovat raskaampia kuin haalistuneet

Mitä paksumpi reuna, sitä raskaampi se on

Mitä enemmän tekstuuria, sitä raskaampi esine sen kanssa

Vaakatason tasapainon lisäksi älä unohda pystysuoraa ja säteittäistä

Lämpimät kirkkaat värit, kuten oranssi ja punainen, ovat raskaampia kuin kylmät värit (sininen, vihreä)

Kolmannesten sääntö

Visuaalisessa taiteessa on tällainen käsite, pääsääntöisesti kolmasosien sääntö - tämä on, kun työtila jaetaan henkisesti 9 yhtä suureen osaan 2 pystysuoralla ja 2 vaakaviivalla. Joten tämän säännön mukaan tärkeimpien koostumuskeskusten tulisi sijaita näiden linjojen risteyksessä.

Joten miten jaat asettelun 9 yhtä suureen osaan?

1. Kuvittele, että koko työtila on tavallinen suorakulmio

2. Jaa sen pystysuora osa henkisesti 3 yhtä suureen osaan ja piirrä tätä varten 2 yhdensuuntaista viivaa.

3. Sama vaakakomponentille

Kolmannessäännön noudattaminen herättää enemmän kiinnostusta sisältöön kuin perinteinen keskitys.

Esimerkkejä selityksillä

MacAllan Ridge -sivustolla näet epäsymmetrisen lohkojen järjestelyn. Tilava kuvan sisältävä lohko on kuitenkin tasapainotettu valikkolohkon raskailla reunoilla. Melko yleinen tasapainotustekniikka.

• Käännös

Eilen kuuntelin podcastia ja huomasin, kuinka joku kysyi ja sanoi samalla: "Vanha fani, soittaja ensimmäistä kertaa." Jostain syystä tämä sai minut ajattelemaan Mediumia. Olen lukenut artikkeleita täällä pitkään, mutta en ole koskaan laittanut kahta senttiäni. Tänään on päivä, joka muuttuu.

Aluksi päätin kirjoittaa jostain itselleni läheisestä, visuaalisesta suunnittelusta (alias graafisesta suunnittelusta), tarkemmin sanottuna perusperiaatteista, joiden käyttö on kokemuksen myötä tullut ja joita pidän tärkeimpänä tekemisen kannalta. työni hyvin.

En halua turvottaa artikkelia, joten kerron lyhyesti jokaisesta periaatteesta. Saatan omistaa koko artikkelin tulevaisuudessa aiheille, jotka ansaitsevat tarkempia tietoja.

Joten oletko valmis? Kaikki alkaa siitä...

# 1 Piste, viiva ja muoto

Nämä ovat minkä tahansa suunnittelun perusrakennuspalikoita. Niiden avulla voit luoda mitä tahansa yksinkertaisista kuvakkeista erittäin monimutkaisiin kuviin, jotka kaikki tehdään yhdistämällä näitä yksinkertaisia ​​elementtejä.

Geometriassa piste on yhdistelmä x- ja y-koordinaatteja, lisää z-akseli ja olet kolmessa ulottuvuudessa, mutta rajoitamme tässä artikkelissa kahteen ulottuvuuteen.

Piste > viiva > muoto

Jos yhdistät kaksi pistettä, saat suoran. Äärimmäisistä pisteistä koostuva viiva on vähän kuin atomiryhmä, joka muodostaa molekyylejä, jotka puolestaan ​​muodostavat kaikki ympärilläsi olevat esineet. Sitten kun lisäät kolmannen pisteen ja yhdistät ne, saat muodon, tässä tapauksessa kolmion, mutta kuten aiemmin mainittiin, näillä peruselementeillä saat melkein mitä tahansa.

Mutta sinun silmiisi näitä muotoja ei todellakaan ole olemassa, ennen kuin lisäät niihin jotain...

#2 Väri

Näkyvä värispektri

Ihmissilmä näkee yli 10 miljoonaa eri väriä punaisesta purppuraan, ja lapsuudesta lähtien me kaikki opimme antamaan tiettyjä arvoja tai merkityksiä tietyille väreille.

Kuvittele esimerkiksi liikennevalot. Ne ovat vain värejä, mutta opimme, että punainen tarkoittaa pysähtymistä, vihreä tarkoittaa menoa, keltainen askelta raiteille, koska voit tehdä sen ennen kuin punainen syttyy. Tämä osoittaa, että teemme hyvin erilaisia ​​toimia yksinkertaisesti värin perusteella, joskus jopa huomaamattamme sitä.

Mielestäni tämä johtuu yksinkertaisesti siitä, että olemme oppineet nämä asiat, ei siitä, että väreillä on luonnostaan ​​​​olennaisia ​​​​merkityksiä. Tämän vahvistaa se tosiasia, että nämä merkitykset muuttuvat kulttuurin mukaan, missä ja milloin kasvoit.

Kaikki tämä tarkoittaa, että voit lisätä merkitystä, tarkoitusta ja sävyä vain valitsemalla oikean värin, sinun on vain varmistettava, että olet hyvin selkeä siitä, kenelle suunnittelet.

Nyt kun näet kolmiosi, miten tekisit siitä mielenkiintoisemman...

# 3 Typografia

Kolmiosta kirjaimeen A

Tämä on iso juttu, ja mielestäni yksi tärkeimmistä ja vaikeimmista suunnittelijan saada se oikein. Kyse ei ole vain siitä, mitä kirjoitat, vaan myös miten sen esität. Typografia on sitä, miltä sanasi näyttävät.

Oikealla fontilla voit ottaa tylsän tekstin ja tehdä siitä tehokkaan. Mutta se ei ole helppoa. Helppoa on heikentää tehokas lausunto yksinkertaisesti valitsemalla väärä fontti. Typografia, kuten väri, auttaa määrittämään sävyn.

Useimmat kirjasimet on suunniteltu tiettyihin tarkoituksiin, sinun on vain opittava ne ja käytettävä niitä hyödyksesi. Jotkut fontit sopivat suurille tekstilohkoille, toiset otsikoille. Jotkut ovat erittäin toimivia ja erittäin puhtaita, kun taas toiset on suunniteltu yksinkertaisesti hauskoiksi tai ironisesti käytettäväksi (tiedät mitä tarkoitan).

Valittavana on tuhansia erilaisia ​​fontteja, mutta ellet tarvitse jotain hienoa tai luo jotain hyvin erityistä, suosittelen aina pysymään klassikoissa. Jos kuitenkin olet rohkea, voit suunnitella jopa oman fontin, vaikka hyvin tehtynä tämä on mielestäni yksi suunnittelijan vaikeimmista asioista. Mutta jos luulet olevasi valmis yhteen tehtävään, jota et unohda, se on...

# 4 Tila

Tapa, jolla tasapainotat tilaa, tekee tai rikkoo suunnittelun, mikä pätee erityisesti typografiaan.

Sinun on harkittava, kuinka kukin elementti/kirjain liittyy muihin, ja antaa heille juuri niin paljon tilaa hengittää kuin he tarvitsevat. Sitä kutsutaan yleensä negatiiviseksi tilaksi (positiivinen tila ovat itse kirjaimet).

Negatiivisen merkkivälin säätäminen (alias kerning)

Sinun tulee hyväksyä negatiivinen tila osaksi suunnitteluasi ja käyttää sitä samalla tavalla. Avaruus voi olla tehokas työkalu ja auttaa ohjaamaan katsojaa suunnittelun läpi. Se voi olla myös paikka levätä silmäsi.

Mutta käytä sitä viisaasti, liian paljon tilaa ja suunnittelusi näyttää keskeneräiseltä, liian vähän tilaa ja suunnittelusi näyttää liian sekavalta.

Jos opit löytämään oikean tasapainon positiivisen ja negatiivisen tilan välillä, voit luoda...

#5 Tasapaino, rytmi ja kontrasti

Silloin alat muuttaa joukosta yksinkertaisia ​​elementtejä mielenkiintoiseksi ja houkuttelevaksi. Tasapainota huolellisesti kaikki suunnittelusi elementit ottaen huomioon niiden visuaalinen korkeus. Suuri musta neliö oikeassa yläkulmassa työntää mallia siihen suuntaan. Kompensoi tämä paino tai siirrä neliö toiseen paikkaan.

Sanojen visuaalisen painon säätäminen rytmin ja kontrastin luomiseksi

Tapa, jolla osoitat elementtejä sivulle, on ratkaisevan tärkeää, koska raskaammat elementit auttavat luomaan kontrastia ja rytmiä, jolloin katsojasi silmät pääsevät virtaamaan suunnittelun läpi sulavasti ja vaivattomasti.

Jotkut asiat voivat auttaa rytmiäsi ja tasapainoasi, ja voit myös leikkiä niillä...

#6 Mittakaava

Otamme seuraavan askeleen säätämällä sanan asteikkoa

Skaalaus auttaa luomaan rytmin, kontrastin ja tasapainon lisäksi myös hierarkiaa. Yleensä kaikkien suunnittelun elementtien ei tarvitse olla yhtä tärkeitä, ja yksi parhaista tavoista viestiä tästä on koko.

Nyt tämän on palveltava tarkoitusta. Älä lankea "tee logostani isommaksi" -lähestymistapaan ja unohda aiemmin mainitsemani tila.

Otetaan esimerkiksi sanomalehden sivu. Mikä on suurin asia sivulla?

Otsikot ovat yleensä lyhyitä. Miksi? Näin voit nopeasti selata sivua ja katsoa, ​​onko siellä jotain mielenkiintoista luettavaa. Sitten meillä on alaotsikot, jotka ovat pienemmällä kirjasinkoolla, mutta antavat lisätietoja artikkelista, ja lopuksi on itse artikkeli, jolla on pienin kirjasinkoko, mutta luettavin iso tekstiosa.

Sanomme siis, että koon tulee toimia funktiona, äläkä koskaan unohda henkilöä, joka kuluttaa suunnitteluasi. Sanomalehden tapauksessa on aika palauttaa järjestystä...

#7 Ruudukko ja kohdistukset

Se on kuin se outo tyytyväisyys, kun pelaat Tetristä ja asetat riviin viimeisen rivin, joka katoaa ruudulta.

Tietyn yhteyden luominen elementtien välille, jotta ne näyttävät tasapainoisemmilta ja miellyttävämmiltä

Niiden oletetaan olevan näkymättömiä, mutta näet ne, jos avaat kirjan tai sanomalehden. Joka tapauksessa (riippumatta siitä, mitä olet suunnittelemassa) ruudukon yhdistäminen jäsentää suunnittelua ja tekee siitä nautittavamman ja helpommin sulavan.

Vaikka luot tarkoituksella kaoottisen mallin, kaaoksessa on oltava järjestys.

Tasaus on erityisen tärkeää tekstille, on useita tapoja tasata se, mutta minun tapani on tasata se vasemmalle. Tietysti on aina tärkeää, mitä luot ja kenelle, mutta ihmiset lukevat yleensä vasemmalta oikealle ja ylhäältä alas, joten keskellä tai oikealla olevaa tekstiä on paljon vaikeampi lukea.

#8 Kehystys

Tämä on keskeinen käsite valokuvauksessa, mutta se koskee myös visuaalista suunnittelua.

Missä tahansa käytät kuvaa, piirroksia tai jotain muuta, luo oikea kehystys ja näet eron.

Sävellyksen muokkaaminen kiinnostavan ja lisäelementin lisäämiseksi

Yritä suunnata katseesi olennaiseen, skaalata/rajaa kuviasi, jotta aihe erottuu joukosta tai vahvistaa viestiäsi. Tärkeintä tässä on tarina ja kuinka se kerrotaan oikein.

Tämän kaiken jälkeen, jos sinusta tuntuu, että jotain mielenkiintoista puuttuu, voit leikkiä...

# 9 Tekstuurit ja kuviot

Tekstuurin testaus kohinalla

Itse pidän tekstuureja ja kuvioita asusteena, niitä ei tarvitse käyttää ja pärjää ilmankin, mutta joskus ne voivat melkein käyttönsä perusteella tehdä suunnittelustasi tai lisätä sen kiinnostavan sormuksen, joka puuttui.

Tekstuurit eivät ole nykyään yhtä muodikkaita kuin ennen, mutta niiden avulla voit lisätä suunnitteluun uuden ulottuvuuden, mikä tekee siitä kolmiulotteisemman ja koskettavamman.

Tekstuurien ei tarvitse olla itse suunnittelussa, jos haluat tulostaa jotain, valitse oikea paperi, lisää esimerkiksi viisteitä, kohokuviointia tai UV-lakkausta. Mutta valitse yksi, älä mene hulluksi erikoisverhoilun kanssa.

Kuvioissa käsitellään aina toistoa, ja niitä voidaan melkein pitää tekstuureina riippuen siitä, kuinka käytät niitä. Uskon, että niitä voidaan käyttää lähinnä rytmin ja dynaamisuuden tuomiseen tasaiseen suunnitteluun sekä keinona kompensoida ylimääräistä negatiivista tilaa.

Viimeisenä mutta ei vähäisimpänä, ja todellakin se, mitä pidän visuaalisen suunnittelun pyhänä graalina, on...

#10 Visuaalinen konsepti

Se on suunnittelusi taustalla oleva idea. Mitä tarkoitat ja mikä piilee tämän pinnallisen kuvan takana.

Ihanteellinen lamppu... klisee, tiedän :)

Tämä erottaa upean suunnittelun jostakin, jonka voit ladata varastosta.

Suunnittele ajatuksella, tarkoituksella ja sinulla on aina idea, joka yhdistää kaiken. Valitse fontit huolellisesti tähän tarkoitukseen ja mieti, kuinka jokainen pieni osa suunnittelussasi noudattaa tätä peruskonseptia. Johdonmukaisuus on tärkeintä.

Jos konseptisi on vahva, pystyt puolustamaan sitä ja myymään idean asiakkaalle/pomolle tai kenelle tahansa näytät sen.

Myös hyvin harkittu muotoilu kestää vuosia. Muodikkaat hipsteriesineet ovat siistejä ja siistejä, kuten viikset ja ruudulliset paidat, mutta niillä on viimeinen käyttöpäivä. Olen todella sitä mieltä, että hyvä muotoilu EI seuraa trendejä, vaan luo niitä.

Nyt sinulla on ne, "minun" 10 periaatetta hyvän suunnittelun luomiseen. Vaikka mielestäni #10 on tärkein, sinun tulee kiinnittää huomiota kaikkiin muihin periaatteisiin ja varmistaa, että olet täydentänyt taidettasi. Sinulla voi olla hyvä idea, mutta mielestäni sinun on myös osattava toteuttaa se (tai tietää joku, joka voi tehdä sen puolestasi).

Sanotaan, että kirjaa ei voi arvioida sen kannen perusteella, mutta useimmat ihmiset tekevät niin. Jos kirjan sisältö ei näy riittävän hyvin kannessa, se vaikuttaa varmasti menestykseen.

OK! Tässä kaikki.

Lopuksi haluan mainita: Projektissa/suunnittelussa on tietysti muitakin asioita, kuten yleisön ymmärtäminen ja se, mitä haluamme saavuttaa sillä, mutta en kuitenkaan sisällyttänyt niitä luetteloon. periaatteet, koska mielestäni nämä "rajoitukset" ovat tärkeä osa visuaalisen käsitteen määrittelyä. Idea voi olla hieno, mutta jos se ei täytä projektin vaatimuksia, se epäonnistuu ennemmin tai myöhemmin.

Toivottavasti tämä luettelo on sinulle hyödyllinen, vaikka tiesitkin jo kaiken. Käytän tätä periaatesarjaa yhtä intensiivisesti kuin Staedler-kyniä, ja minulle on ollut mielenkiintoinen harjoitus purkaa suunnitelmani eräänlaisiksi "rakennuspalikoiksi".

Voit vapaasti jättää palautetta, olen aina avoin terveelle keskustelulle.

Kiitos, että luit!

Parhaiden suklaabronkien luominen vaatii sekä UX:n että käyttöliittymän. Olen tosissani. Aloitaksesi tarvitset reseptin, ainekset, keittiövälineet ja uunin. Sitten: sekoita, paista, leikkaa, laita lautasille, tarjoile ja syö.

Mutta mikä näistä on UX ja mikä käyttöliittymä? Valmistusprosessi on UX, ja pinnoitus ja tarjoilu on UI.

Entä syöminen? Tämä on UX; paitsi jos se ei ole UX. Olisiko kuluttajalla erilainen kokemus, jos kakut tarjoiltaisiin suoraan pannulta tai kauniisti lautasella? Sanoisin kyllä, jälkimmäinen olisi parempi.

Tässä artikkelissa kerron sinulle viisi eroa UX- ja käyttöliittymäsuunnittelun välillä. Toivotaan, että ymmärrät ne paremmin sen loppuun mennessä. Sanon heti, että vaikka huomaatkin eroja, jotkut niistä ovat hyvin samankaltaisia ​​keskenään.

Tämän vastuuvapauslausekkeen avulla tarkastellaan joitain eroja näiden kahden välillä.

UX ei ole käyttöliittymä

UX-muotoilu tai käyttäjäkokemussuunnittelu on prosessi, jolla tarve tunnistetaan. Sitten piirretään karkea prototyyppi, joka myöhemmin validoidaan (tai ei) testaamalla. Kun sekä liiketoimintamalli että arvolupaus on vahvistettu, tuote on valmis.

UI tai käyttöliittymäsuunnittelu voidaan ajatella näin:

Käyttöliittymäsuunnittelu = visuaalinen suunnittelu + vuorovaikutussuunnittelu.

Visuaalinen suunnittelu on sitä, miltä sivusto näyttää, sen persoonallisuutta, jos niin haluat; brändi. Vuorovaikutussuunnittelu tarkoittaa sitä, miten ihmiset ovat vuorovaikutuksessa verkkosivustosi kanssa. Kun joku painaa painiketta, muuttuuko se tavalla, joka tekee selväksi, että sitä on painettu?

Vaikka sekä UX- että käyttöliittymäsuunnittelijat luovat vuorovaikutusta, UX-suunnittelijoita voidaan pitää makrovuorovaikutuksen arkkitehteinä ja käyttöliittymäsuunnittelijoita voidaan pitää mikrovuorovaikutuksen luojina, jotka käsittelevät yksityiskohtia.

Suunnittelija Nick Babichin mukaan:

”Parhaat tuotteet tekevät kaksi asiaa hyvin: toimivuus ja yksityiskohdat. Ominaisuudet houkuttelevat ihmisiä tuotteeseesi. Yksityiskohdat pitävät heidät yhdessä."

UX-suunnittelija suunnittelee mieluummin käyttäjävirtoja, vaiheita, joita käyttäjä ottaa esimerkiksi uutiskirjeen tilaamiseen. Mitä vaiheita he noudattavat ja mistä he tietävät onnistuneensa?

Projekti siirtyy sitten käyttöliittymäsuunnittelijalle. Käyttöliittymäsuunnittelija parantaa näitä vuorovaikutuksia lisäämällä värejä ja korostamalla alkuperäistä suunnittelua, antamalla heille vihjeitä ja näyttämällä suuntaa uutiskirjeelle.

Käyttöliittymä tekee käyttöliittymästä kauniita

Hyödyllinen tuote tyydyttää tarpeen, jota markkinat eivät ole vielä kohdanneet. UX-suunnittelijan tutkimusprosessi sisältää kilpailuanalyysin, persoonien kehittämisen ja sen jälkeen vähintään elinkelpoisen tuotteen luomisen; tuote, joka on arvokas kohdeyleisölle. Tämä varmistetaan testaamalla tuotteen koko elinkaaren ajan.

Kun käyttäjävirrat ja lankakehykset on prototyyppi ja testattu, prosessi siirtyy käyttöliittymäsuunnittelijalle – hänen tehtävänsä on saada kaikki näyttämään hyvältä. Tähän kuuluu värimaailman ja muotoilun valinta, joka on sekä kaunis että helppokäyttöinen. Värivalinnat, muotoilu ja vuorovaikutus eivät kuitenkaan perustu suunnittelijan henkilökohtaisiin mieltymyksiin, vaan UX-suunnittelijoiden kehittämiin selkeästi ilmaistuihin henkilökohtaisiin syihin. Heidän avullaan käyttöliittymäsuunnittelijat toteuttavat visuaalisen hierarkian, joka toimii oppaana käyttäjille ja selittää heille, mitä ja milloin tulee tehdä saavuttaakseen tavoitteensa.

Hyvin suunniteltu hierarkia korostaa yhtä päätavoitetta sivulla ja kertoo käyttäjille, missä he ovat sivustolla ja mitä he voivat tehdä milloin tahansa. Hierarkia hoitaa tämän käyttämällä käytäntöjä ja malleja, jotka ovat jo tuttuja käyttäjille. Nämä mallit antavat käyttäjille suunnan.

UX auttaa käyttäjiä saavuttamaan tavoitteensa

Käyttöliittymä luo tunneyhteyksiä

Ihmiset tulevat sivustollesi tekemään jotain. Ehkä joku etsii koiraa pieneen asuntoon.

Asioiden UX-puoli voi katsoa ihmisiä koiran ystävinä ja yrittää ymmärtää, mikä heille on tärkeää. Mitä he arvostavat tai tarvitsevat etsiessään apua karvaisen ystävänsä valinnassa? Tämän ymmärtämiseksi he aloittavat työn. He esittävät kysymyksiä, tarkkailevat ihmisiä, haastattelevat heitä, ehkä tekevät prototyyppejä ja tekevät sissitestausta nähdäkseen, voivatko he auttaa heitä.

Aaron Walterin, Design for Emotionin kirjoittajan, mukaan kun peruskäytettävyytesi on kunnossa, käyttäjien uskollisuus riippuu käyttöliittymäsi luonteesta. Eloisa muotoilu voi houkutella ihmisiä sivustollesi, ja he voivat jopa viipyä, jos siellä on jotain tekemistä. Ja kun henkilökohtainen yhteys on muodostunut, he jäävät koukkuun. Naurattaako käyttöliittymäsi heidät? Tartuuko hän niihin? Kuinka ylimielinen hän on? Aaron sanoo: ”Ihmiset antavat anteeksi puutteesi, seuraavat sinua ja laulavat ylistystäsi, jos palkitset heidät positiivisilla tunteilla.” Tässä käyttöliittymäsuunnittelija tulee mukaan.

Ensin luodaan UX-design

Sitten (joskus) käyttöliittymäsuunnittelu luodaan

Kuinka UX- ja käyttöliittymäsuunnittelijat työskentelevät yhdessä koko suunnitteluprosessin ajan?

Tyypillisesti UX-suunnittelu ja -tutkimus ovat ensimmäisiä askeleita, kun päätetään tuotteen tai sovelluksen luomisesta. UX-suunnittelijat tekevät suuren osan tutkimuksesta, joka vahvistaa tai kumoaa tuotteen alkuperäiset ideat ja ohjaa sen kehitystä.

Kun prototyyppiä on testattu useita kertoja ja se on melkein valmis, käyttöliittymäsuunnittelija tulee sisään ja alkaa työstää visuaalista suunnittelua ja mikrovuorovaikutuksia.

Tämä polku ei kuitenkaan aina ole lineaarinen ja riippuu monista tekijöistä. Esimerkiksi:

• Kuka tekee UX:n ja käyttöliittymän?
• Sama henkilö vai joku erilainen ja eri joukkue?

UX:tä käytetään kaikissa tuotteissa, käyttöliittymissä ja palveluissa

Käyttöliittymä viittaa vain käyttöliittymiin

Käyttökokemussuunnittelu on laaja ala, ja se on tulossa suositummaksi joka päivä. Nykyään verkkoa käyttävien yritysten lisäksi monet muutkin tuotteita kehittävät tai palveluita tarjoavat yritykset alkavat ymmärtää käyttäjiensä ymmärtämisen ja hypoteesien vahvistamisen ennen luomisprosessin alkamista.

Käyttöliittymäsuunnittelussa on kyse käyttöliittymistä. Tämä ei tarkoita, että se rajoittuisi tietokoneiden, tablettien ja mobiililaitteiden graafiseen käyttöliittymään. Nykyään käyttöliittymät löytyvät monista muista tuotteista, kuten kelloista, pesukoneista, autojen kojelaudoista, myyntiautomaateista ja paljon muusta.

Luin äskettäin iPhone-sovelluksesta, joka avaa auton oven lukituksen. Osoittautuu, että tämä vuorovaikutussarja sisältää paljon enemmän vaiheita kuin pelkkä avaimen käyttö oven avaamiseen. Suunnittelemmepa käyttöliittymää tai kokemusta, meidän on varmistettava, että käyttäjämme pysyvät prosessin ytimessä.

johtopäätöksiä

On lähes mahdotonta erottaa UX:tä käyttöliittymästä tai käyttöliittymää UX:stä.

Mutta jos yrität, voit päätellä, että:

• UX-suunnittelu auttaa käyttäjiä suorittamaan tehtäviä useilla alustoilla ja palveluilla.
• Käyttöliittymäsuunnittelu luo houkuttelevia ja esteettisiä käyttöliittymiä, jotka yhdistävät ihmisiä.

Don Sklechtin artikkelin käännös

Taiteilijat ja visuaaliset suunnittelijat työskentelevät samalla visuaalisella medialla. Molempien tulee olla ammattitaitoisia ja kokeneita kaikessa näihin keinoihin liittyvässä, mutta heidän toimintansa palvelee eri tarkoitusta. Taiteilijan tavoitteena on luoda esine, joka katseltuaan herättää esteettisen reaktion. Kuvataide on siis taiteilijan tapa ilmaista itseään aiheesta, joka kiinnostaa häntä (ja joskus koko yhteiskuntaa) emotionaalisesti tai älyllisesti. Taiteilijaa ei sido läheskään mitkään rajoitukset. Mitä epätavallisempi ja omaperäisempi hänen ponnistelunsa tuote on, sitä korkeampi se on.

Suunnittelijat puolestaan ​​luovat esineitä varten muut ihmiset. Vaikka nykytaiteilijat ovat pääasiassa huolissaan itseilmaisua Suunnittelijat, kuten Kevin Mallet ja Darrell Sano huomauttavat erinomaisessa kirjassaan Designing Visual Interfaces (Mullet ja Sano, 1995), ”seuraavat kiireisintä sopivimman etsimisellä. edustus välittää tiettyä tietoa”, eli viestintää. Mitä tulee visuaalisen käyttöliittymän suunnittelijoihin, he etsivät parasta esitystä, joka välittää tietoa käyttäytymistä ohjelma, jonka suunnitteluun he osallistuvat. Tavoitteellisella lähestymistavalla tulee pyrkiä esittämään käyttäytymistä ja tietoa selkeällä ja hyödyllisellä tavalla, joka tukee organisaation markkinoinnin tavoitteita ja hahmojen emotionaalisia tavoitteita.

Tehdään selväksi, että käyttöliittymien visuaalinen suunnittelu ei sulje pois esteettisiä näkökohtia, mutta tällaisten näkökohtien ei pitäisi mennä toiminnallisen kehyksen ulkopuolelle. Ja vaikka visuaalisessa viestinnässä on aina subjektiivisuutta, pyrimme minimoimaan vaikutuksen maku. Olemme havainneet, että käyttäjän emotionaalisten ja liiketoiminnallisten tavoitteiden selkeä ilmaiseminen on korvaamatonta silloinkin, kun suunnitellaan niitä visuaalisen käyttöliittymän näkökohtia, jotka palvelevat brändiä, ohjaavat käyttökokemusta ja ohjaavat fysiologisia reaktioita. Kirjoitimme tarkemmin kognitiivisen prosessoinnin fysiologisesta tasosta luvussa 5.

Kuvataide, visuaalinen käyttöliittymäsuunnittelu ja muut tieteenalat 335

Graafinen suunnittelu ja käyttöliittymät

Graafinen suunnittelu on tieteenala, jota useiden vuosien ajan (noin viime vuosisadan 80-luvun jälkipuoliskolle asti) hallitsi painatus, sillä suunnittelu rajoittui pääasiassa pakkausten luomiseen, mainontaan, asiakirjojen muotoiluun ja elinympäristön järjestämiseen. Vanhan koulun graafiset suunnittelijat eivät pidä digitaalisesta mediasta, koska he eivät ole tottuneet luomaan grafiikkaa pikselitasolla. Nuorempi graafisten suunnittelijoiden sukupolvi on koulutettu käsittelemään "uutta" formaattia ja he ovat varsin onnistuneita soveltamaan perinteisen graafisen suunnittelun käsitteitä digitaaliseen grafiikkaan.

Graafiset suunnittelijat ovat yleensä hyvin visuaalisia ja vähemmän tietoisia ohjelmistotuotteen käyttäytymisen ja vuorovaikutuksen taustalla olevista käsitteistä. Lahjakkaat, digitaalisesti taitavat graafiset suunnittelijat luovat loistavia tietoja sisältäviä, esteettisesti miellyttäviä ja vaikuttavia käyttöliittymiä, joita näemme Windows XP:ssä ja Mac OS X:ssä, sekä visuaalisesti rikkaiden käyttöliittymien tietokonepeleille ja kuluttajille suunnatuille sovelluksille. He pystyvät luomaan kaunista ja riittävää ulkomuoto käyttöliittymät, ja lisäksi - tuoda yritystyyli ohjelmistotuotteen ulkonäköön ja käyttäytymiseen. Tällaisille asiantuntijoille suunnittelu tai käyttöliittymäsuunnittelu on ensinnäkin sävy, tyyli, koostumus, jotka ovat brändin attribuutteja, toiseksi tiedon läpinäkyvyys ja ymmärrettävyys, ja vasta sitten (jos tämä ylipäätään tulee) - siirto tietoa käyttäytymisestä odotetun tarkoituksen kautta (katso luku 13).

Visuaalisen käyttöliittymän suunnittelijat tarvitsevat joitakin samoja taitoja kuin digitaaliset graafiset suunnittelijat, mutta heillä on myös oltava syvä ymmärrys käyttäytymisen roolista. Heidän ponnistelunsa keskittyvät voimakkaasti suunnittelun organisatorisiin näkökohtiin ja siihen, miten tuotteen käyttäytyminen viestitään käyttäjälle visuaalisten ankkurien ja odotettujen tarkoituksiin. Niiden painopiste on toisaalta käyttöliittymän visuaalisen rakenteen ja toisaalta käyttäjän mentaalimallin ja ohjelman käyttäytymisen loogisen rakenteen välisessä vastaavuudessa. He ovat myös huolissaan siitä, kuinka ohjelman tilat kommunikoidaan käyttäjälle (esimerkiksi kuinka "muokattava" tila saadaan erotetuksi "vain luku" -tilasta) ja mitä tehdä kognitiivisille aspekteille, jotka liittyvät käyttäjän käsitykseen toiminnoista (elementti). koostumus, visuaalinen hierarkia, kuvion ja maan välinen suhde jne.).

336 Luku 14. Visuaalisen käyttöliittymän suunnittelu

Visuaalinen tiedon suunnittelu

Tietosuunnittelijat Ne eivät työskentele vuorovaikutteisten ominaisuuksien kanssa, vaan tietojen, sisällön ja navigointityökalujen visualisoinnissa. Visuaalisen käyttöliittymän suunnittelussa heidän taitonsa ovat äärimmäisen tärkeitä, varsinkin kun on kyse dataintensiivisistä sovelluksista ja joistakin sivustoista, joissa sisältö on toiminnallisuutta enemmän. Tiedonsuunnittelijan ponnistelut tähtäävät tiedon esittämiseen oikeaa tulkintaa mahdollistavassa muodossa. Tulos tässä saavutetaan manipuloimalla visuaalista hierarkiaa käyttämällä esimerkiksi väriä, muotoa, sijaintia ja mittakaavaa.

Tietosuunnittelun yleisiä kohteita ovat kaikenlaiset kaaviot, kaaviot ja muut tavat kvantitatiivisen tiedon esittämiseen. Edward Tufte on kirjoittanut useita uraauurtavia kirjoja, joissa käsitellään tätä aihetta yksityiskohtaisesti, mukaan lukien kvantitatiivisen tiedon visuaalinen näyttö (Tufte, 1983).

Teollinen muotoilu

Kaikenlainen keskustelu teollisesta muotoilusta ei kuulu tämän kirjan piiriin, mutta interaktiivisten laitteiden ja kannettavien laitteiden yleistyminen on johtanut siihen, että teollisen muotoilun rooli interaktiivisten tuotteiden luomisessa kasvaa aivan silmiemme edessä. Kuten graafisten suunnittelijoiden, käyttöliittymäsuunnittelijoiden ja tietosuunnittelijoiden ammatillisten taitojen erojen kohdalla, teolliset muotoilijat on jaettu kahteen kategoriaan: jotkut ovat erikoistuneet luomaan kauniita ja hyödyllisiä muotoja, kun taas toiset ovat loogisia ja ergonomisia. fyysisten elementtien ohjaaminen tavalla, joka vastaa käyttäjän käyttäytymistä ja kuvastaa laitteen käyttäytymistä. Kun yhä useammat laitteet ottavat käyttöön monipuoliset näytöt, vuorovaikutussuunnittelijoille, käyttöliittymäsuunnittelijoille ja teollisille suunnittelijoille on entistä tärkeämpää tehdä yhteistyötä luodakseen monipuolisia ja tehokkaita ratkaisuja.

Visuaalisen käyttöliittymän suunnittelun rakennuspalikoita

Käyttöliittymäsuunnittelun ytimessä on kysymys siitä, kuinka suunnitella ja järjestää visuaalisia elementtejä välittämään käyttäytymistä ja esittämään tietoa selkeästi. Jokaisella visuaalisen koostumuksen elementillä on useita ominaisuuksia, kuten muoto ja väri, ja näiden ominaisuuksien yhdistelmä antaa elementille merkityksen. Jokaisella yksittäisellä omaisuudella itsessään on harvoin luonnollinen merkitys. Sen sijaan voimme sanoa, että käyttäjä saa mahdollisuuden selvittää se

Visuaalisen käyttöliittymän suunnittelun rakennuspalikoita 337

käyttöliittymässä johtuen erilaisista tavoista soveltaa näitä ominaisuuksia kuhunkin käyttöliittymäelementtiin. Tapauksissa, joissa kahdella objektilla on yhteisiä ominaisuuksia, käyttäjä olettaa, että objektit liittyvät toisiinsa tai vastaavat. Kun käyttäjät näkevät ominaisuuksien olevan erilaisia, he olettavat, että objektit eivät liity toisiinsa. Kontrastkkaimmat esineet kiinnittävät huomiomme voimakkaammin. Kauan ennen kuin lapsi alkaa ymmärtää puhetta ja puhua, hän osoittaa kykynsä erottaa esineet, jotka ovat visuaalisesti kontrasteja. Lastenesitys Sesame Street turvautuu tähän ihmisen kykyyn pyytämällä lapsia valitsemaan esineen, joka on erilainen tai ei ryhmästä. Visuaalinen käyttöliittymäsuunnittelu luo merkityksen samalla tavalla, mikä käytännössä toimii paljon paremmin kuin pelkät sanat.

Kun luot käyttöliittymää, ota huomioon seuraavat visuaaliset ominaisuudet jokaiselle elementille tai elementtiryhmälle. Hyödyllisen ja houkuttelevan käyttöliittymän luomiseksi sinun tulee käsitellä huolellisesti kaikkia näitä ominaisuuksia.

Minkä muotoinen esine on? Onko se pyöreä, neliömäinen vai ameebamainen? Muoto on tärkein merkki esineen olemuksesta henkilölle. Tunnistamme esineet niiden ääriviivojen perusteella; ananaksen siluetti, jossa on sininen turkki, kertoo edelleen, että se on ananas. Samaan aikaan muotojen erottaminen vaatii suurempaa keskittymistä kuin värin tai koon analysointi. Siksi muoto ei ole paras ominaisuus kontrastin luomiseksi, jos haluat kiinnittää käyttäjän huomion. Muodon heikkous objektintunnistuksen tekijänä käy ilmi, kun katsot Mac OS X -käyttöjärjestelmän Dock 1 -telakkaa - tässä voit vahingossa kutsua iTunesin iDVD:n sijaan tai iWebin iPhoton sijaan. Piktogrammeilla on eri muotoja, mutta ne ovat samankokoisia, värejä ja tekstuureja.

Kuinka suuri tai pieni kohde on suhteessa muihin näytöllä oleviin esineisiin? Suuremmat elementit herättävät enemmän huomiota, varsinkin jos ne ovat huomattavasti suurempia kuin ympäröivät elementit. Koko on vaihteleva tilattu Ja mitattavissa eli ihmiset järjestävät esineet automaattisesti koon mukaan ja arvioivat niitä koon mukaan; jos meillä on tekstiä neljässä koossa, oletetaan, että suhteellinen

Mac OS X -käyttöjärjestelmän erityinen käyttöliittymäelementti, jonka avulla voit käynnistää ohjelmia ja vaihtaa niiden välillä. - Huomautus tieteellinen toim.

333 Luku 14. Visuaalisen käyttöliittymän suunnittelu

tekstin merkitys kasvaa koon kasvaessa ja lihavoitu teksti on tärkeämpää kuin normaali teksti.

Siten koko on hyödyllinen ominaisuus tietohierarkioiden osoittamisessa. Riittävä kokoero herättää yleensä nopeasti henkilön huomion. Jacques Bertin kuvaa klassisessa teoksessaan The Semiology of Graphics (Bertin, 1983) kokoa dissosiatiivinen omaisuutta. Tämä tarkoittaa, että jos objekti on hyvin pieni tai erittäin suuri, on vaikea tulkita muita muuttujia, kuten muotoa.

Kirkkaus

Kuinka tumma tai vaalea kohde on? Tietysti käsitteet tumma ja vaalea saavat merkityksensä ensisijaisesti taustan kirkkauden yhteydessä. Tummalla taustalla tumma teksti on lähes näkymätöntä, kun taas vaalealla taustalla se erottuu terävästi. Kuten koko, kirkkausarvo voi olla dissosiatiivinen; sanotaan, että jos valokuva on liian tumma tai liian vaalea, on mahdotonta nähdä, mitä siinä on. Ihmiset havaitsevat kontrastin helposti ja nopeasti, joten kirkkausarvo voi olla hyvä työkalu kiinnittää huomiota niihin elementteihin, joita on korostettava. Kirkkausarvo on myös tilattu muuttuja, kuten tummemmat (pienempi kirkkaus) kartan värit, on helppo tulkita: ne edustavat suurempia syvyyksiä tai suurempaa väestötiheyttä.

Väri

Keltainen, punainen vai oranssi? Värierot herättävät nopeasti huomion. Joillakin ammattialoilla väreillä on omat merkityksensä, ja sitä voidaan käyttää. Kirjanpitäjälle punainen tarkoittaa negatiivisia tuloksia ja musta positiivisia tuloksia; Arvopaperikauppiaalle sininen on ostosignaali ja punainen myyntisignaali (ainakin Yhdysvalloissa tämä on totta). Värit saavat merkityksen myös niiden sosiaalisten kontekstien ansiosta, joissa kasvamme. Liikennevalojen ympärillä kasvaneelle länsimaalaiselle punainen tarkoittaa "pysähdystä" ja joskus jopa "vaaraa", kun taas Kiinassa punainen on onnen väri. Valkoinen yhdistetään lännessä puhtauteen ja rauhaan ja Aasiassa hautajaisiin ja kuolemaan. Lisäksi, toisin kuin koko tai kirkkaus, värillä ei alun perin ole järjestyksen ominaisuutta eikä sitä ilmaista määrällisesti, joten se ei ole kaukana ihanteellisesta tällaisen tiedon välittämiseen. Älä myöskään tee väreistä ainoaa tapaa välittää tietoa, koska värisokeus on melko yleistä.

Käytä värejä viisaasti. Luoda tehokas visuaalinen järjestelmä, jonka avulla käyttäjä voi tunnistaa yhtäläisyydet ja erot

esineitä, käytä rajoitettua joukkoa värejä - sateenkaariefekti ylikuormittaa käyttäjän havaintoja ja rajoittaa kykyä välittää hänelle tietoa. Lisäksi, mitä tulee väriin, markkinointitarpeiden ja käyttöliittymäideoiden viestinnän tavoitteen välillä voi olla ristiriitoja. Kompromissin löytämiseksi tässä tilanteessa saatat tarvita lahjakasta visuaalista suunnittelijaa (ja osa-aikaista diplomaattia).

Suunta

Mihin kohde osoittaa - ylös, alas vai sivuttain? Suunta on hyödyllinen, kun haluat välittää suuntatietoja (ylös tai alas, eteenpäin tai taaksepäin). Muista, että suunnan havaitseminen voi olla vaikeaa joidenkin muotojen ja pienten esineiden kanssa, joten on parempi käyttää sitä toissijaisena vihjeenä. Joten jos haluat osoittaa, että osakemarkkinat ovat laskeneet, voit käyttää punaista alaspäin osoittavaa nuolta.

Rakenne

Karkea vai sileä, tasainen vai epätasainen? Tietenkin ruudulla kuvatuilla elementeillä ei ole todellista tekstuuria, mutta ne voivat luoda sen vaikutelman. Tekstuurista on harvoin hyötyä erojen välittämisessä tai huomion herättämisessä, koska se vaatii paljon keskittymistä yksityiskohtiin. Lisäksi tekstuurin renderöinti vaatii huomattavia pikselikustannuksia. Silti tekstuuri voi olla tärkeä vihje: kun näemme alueen, jossa on kumia, oletamme, että meidän pitäisi tarttua laitteeseen kyseisestä alueesta. Käyttöliittymän elementtien serifit ja kolhut osoittavat yleensä, että elementtiä voidaan vetää, kun taas painikkeen viisteet tai varjot vahvistavat tunnetta, että sitä voidaan napsauttaa.

Sijainti

Miten elementti on sijoitettu suhteessa muihin elementteihin? Kuten koko, sijainti on muuttuva tilattu Ja määrällisesti ilmaistuna ja siksi hyödyllinen hierarkian välittämiseen. Sijoittamalla tärkeimmät tai halutuimmat elementit vasempaan yläkulmaan käytämme elementtien havaitsemisjärjestystä näytöllä tuotteen eduksi. Asettelu voi toimia myös keinona luoda avaruudellisia suhteita näytöllä olevien objektien ja todellisen maailman kohteiden välille.

Visuaalisen käyttöliittymän suunnittelun periaatteet

Ihmisaivot ovat upea kuviontunnistuslaite. Se poimii merkityksen tiheistä visuaalisen tiedon virroista.

340 Luku 14. Visuaalisen käyttöliittymän suunnittelu

jotka putoavat meille kirjaimellisesti kaikkialta. Aivomme selviävät tästä syötteestä tunnistamalla visuaalisia malleja ja luomalla prioriteettijärjestelmän havaitsemillemme kohteille. Viime kädessä tämä antaa meille mahdollisuuden havaita tietoisesti näkyvä maailma. Ihmisaivojen visuaalisen järjestelmän kyky koota näkökentän osia kuviksi visuaalisten ankkurien (vihjeiden) perusteella mahdollistaa visuaalisen tiedon käsittelyn niin nopeasti ja tehokkaasti. Kuvittele, jos sinun pitäisi yhtäkkiä laskea käsin baseballin lentorata ennustaaksesi, mihin se laskeutuu. Silmämme ja aivomme tekevät tämän yhdessä sekunnin murto-osassa ilman, että se vaatii meiltä mitään tietoista ponnistelua. Visuaalisen käyttöliittymän suunnittelun luomisprosessin tulee perustua luonnollisiin visuaalisiin prosessointikykyihimme varmistaaksemme, että tiedot välitetään käyttäjille ja että ohjelmiston ominaisuudet ja toiminnot näkyvät.

Yksi luku on täysin riittämätön kattamaan täysin visuaalisen käyttöliittymän suunnittelun aihetta. On kuitenkin olemassa useita tärkeitä periaatteita, jotka auttavat sinua luomaan mahdollisimman helposti ymmärrettäviä ja silmää miellyttäviä käyttöliittymiä. Kuten mainittiin, Kevin Mallett ja Darrell Sano tarjoavat erinomaisen ja yksityiskohtaisen analyysin näistä perusperiaatteista; Keskustelemme vain lyhyesti joistakin visuaalisen käyttöliittymän suunnittelun tärkeimmistä periaatteista.

Kun luot graafisia käyttöliittymiä, sinun tulee:

Käytä visuaalisia ominaisuuksia elementtien ryhmittelyyn ja luomiseen
selkeä hierarkia;

Luo visuaalinen rakenne ja aseta looginen kartta
suojata organisaation kaikilla tasoilla;

Käytä kokonaisvaltaista, johdonmukaista ja asianmukaista
kontekstikuvat;

Integroi visuaalinen tyyli toiminnallisuuteen mielekkäällä tavalla
mutta myös johdonmukaisesti;

Vältä visuaalista melua ja sotkua.

Näitä periaatteita ja joitain muita yleisiä periaatteita, jotka koskevat tekstin ja värien käyttöä graafisissa käyttöliittymissä, käsitellään yksityiskohtaisesti seuraavissa osioissa.

Käytä visuaalisia ominaisuuksia elementtien ryhmittelyyn ja selkeän hierarkian luomiseen

Yleensä on järkevää ryhmitellä funktionaalisten tai informaatioelementtien loogiset joukot visuaalisten ominaisuuksien, kuten värien tai tilaominaisuuksien, perusteella. Kun käytät näitä visuaalisia ominaisuuksia johdonmukaisesti käyttöliittymässäsi, voit luoda malleja, jotka käyttäjäsi oppivat nopeasti tunnistamaan. Esimerkiksi Windows XP:ssä kaikki painikkeet ovat

Visuaalisen käyttöliittymän suunnittelun periaatteet 341

kupera, pyöristetyt kulmat, ja tekstikentät ovat suorakaiteen muotoisia, hieman painuneita, valkoisella taustalla ja sinisellä reunuksella. Tämän kuvan systemaattisen käytön ansiosta on mahdotonta sekoittaa painiketta ja syöttökenttää eräistä yhtäläisyyksistä huolimatta.

Visuaalisen käyttöliittymän perusta on visuaalinen

periaatteellisia malleja.

Design

Kun katsot mitä tahansa visuaalista elementtijoukkoa, käyttäjä kysyy alitajuisesti kysymyksen: "Mikä tässä kiinnostaa?" - ja melkein heti: "Mikä yhteys näiden esineiden välillä on?" Meidän tulee pyrkiä varmistamaan, että käyttöliittymä sisältää vastaukset molempiin kysymyksiin.

Hierarkian luominen

Selvitä skenaarioiden perusteella, mitkä toiminnalliset ja informaatioelementit käyttäjien tulisi välittömästi havaita, mitkä ovat toissijaisia ​​ja mitä tarvitaan vain poikkeustilanteissa. Tämä järjestys toimii visuaalisen hierarkian perustana.

Käytä väriä, kylläisyyttä, kontrastia, kokoa ja sijaintia luodaksesi näkyviä eroja hierarkiatasojen välille. Tärkeimpien elementtien tulee olla suurempia, kirkkaampia värejä, kylläisempiä ja kontrastisempia. Ne tulee sijoittaa muiden elementtien yläpuolelle tai tehdä ulkonevista. Korostetut elementit on parasta maalata täyteläisillä väreillä. Vähemmän tärkeiden elementtien tulisi olla vähemmän kylläisiä, vähemmän kontrastisia, pienempiä ja litteämpiä. Neutraalit vaaleat värit vievät ne taustalle.

Tietenkin näiden ominaisuuksien asettaminen on tehtävä huolellisesti. Tärkeimmästä elementistä ei pidä tehdä suurta, punaista ja pullistuvaa. Usein riittää vain yhden ominaisuuden muuttaminen. Jos huomaat, että kaksi eri tärkeydellä olevaa elementtiä kilpailee käyttäjän huomiosta, vähemmän tärkeän sulakkeen sammuttaminen on parempi ratkaisu kuin yrittää sytyttää tärkeämmän. Tämä jättää sinulle enemmän tilaa keskittyä tärkeimpiin elementteihin. (Tässä on hyvä analogia: jos kaikki sivulla olevat sanat on lihavoitu punaisella fontilla, erottuuko jokin sanoista?)

Selkeän visuaalisen hierarkian luominen on yksi visuaalisen käyttöliittymäsuunnittelun vaikeimmista tehtävistä, ja sen ratkaisu vaatii taitoa ja lahjakkuutta. Käyttäjät eivät käytännössä huomaa korkealaatuista visuaalista hierarkiaa - mutta sen puuttuminen ja siitä johtuva hämmennys ovat heti havaittavissa.

342 Luku 14. Visuaalisen käyttöliittymän suunnittelu

Kytkentöjen visualisointi

Elementtien suhteen välittämiseksi katso jälleen skriptejä. On välttämätöntä tunnistaa paitsi elementit, joilla on samanlaiset toiminnot, myös elementit, joita käytetään useimmiten yhdessä. Jaetut elementit tulisi yleensä ryhmitellä spatiaalisesti hiiren liikkeen minimoimiseksi, kun taas elementit, joita ei ehkä käytetä yhdessä mutta joilla on samanlainen toiminnallisuus, voidaan ryhmitellä visuaalisesti, vaikka niitä ei ryhmitettäisikään.

Tilaryhmittely selittää käyttäjille, kuinka tietyt tehtävät, tiedot ja työkalut liittyvät muihin, ja voi vihjata oikeaan toimintosarjaan. Hyvä ryhmittely sijainti ottaa huomioon tehtävien ja alitehtävien järjestyksen sekä silmän liikkeen ruudulla: vasemmalta oikealle länsimaisilla kielillä ja pääsääntöisesti ylhäältä alas. (Keskustamme tästä asiasta tarkemmin hieman myöhemmin.)

Vierekkäin sijaitsevat elementit yhdistetään yleensä toisiinsa. Monissa käyttöliittymissä tällainen ryhmittely on toteutettu liian hankalaksi: kaikkialla, missä katsot, on kehyksiä, ja joskus kehys sisältää vain yhden tai kaksi elementtiä. Usein sama vaikutus voidaan saavuttaa älykkäämmin etäisyydet Esimerkiksi työkalupalkissa painikkeet voidaan erottaa toisistaan ​​neljällä pikselillä. Jos haluat eristää tiedostokomennot ("avaa", "uusi tiedosto", "tallenna") erilliseen ryhmään, lisää vain tiedostokomentopainikkeiden ja viereisen painikeryhmän välinen etäisyys kahdeksaan pikseliin.

Suurten etäisyyksien erottamat elementit voidaan ryhmitellä yhteen yhteisten visuaalisten ominaisuuksien avulla, jolloin luodaan kuvio, joka lopulta saa oman merkityksensä käyttäjille. Näin ollen äänenvoimakkuuden käyttäminen fyysisen odotetun tehtävän tunteen luomiseen on luultavasti tehokkain tapa erottaa ohjausobjektit tiedoista ja taustaelementeistä (lue lisää odotetuista kohdistamisesta luvusta 13). Tätä strategiaa käytetään usein piktogrammien piirtämisessä. Mac OS X käyttää kirkkaita värejä sovelluskuvakkeissa ja himmeitä värejä harvoin käytetyissä apuohjelmissa. Vihreän laitteen käynnistyspainikkeen mukana voi olla samanlainen animoitu vihreä kuvake, joka osoittaa, että laite toimii normaalisti.

Kun olet päättänyt ryhmät ja näiden ryhmien visuaaliset ominaisuudet, ala säätää ryhmien välistä kontrastia - korostaa tai päinvastoin varjostaa ryhmiä niiden tärkeyden mukaan nykyisessä kontekstissa. Korosta eroja ryhmien välillä, mutta minimoi erot saman ryhmän jäsenten välillä.

Visuaalisen käyttöliittymän suunnittelun periaatteet 343

Squint testi

Hyvä tapa varmistaa, että visuaalinen suunnittelu käyttää tehokkaasti hierarkiaa ja suhteita, on se, mitä suunnittelijat kutsuvat squint-testiksi. Sulje toinen silmäsi ja katso näyttöä toisella silmälläsi. Kiinnitä huomiota siihen, mitkä elementit työntyvät liikaa esiin, mitkä ovat muuttuneet sumeiksi ja mitkä ovat kokoontuneet ryhmiin. Tämä menettely paljastaa usein aiemmin huomaamattomia ongelmia käyttöliittymän koostumuksessa.

Luo visuaalinen rakenne ja luo looginen polku organisaatiosi kaikilla tasoilla

On hyödyllistä ajatella, että käyttöliittymät koostuvat visuaalisista ja interaktiivisista elementeistä, jotka on ryhmitelty yhteen paneeleilla, jotka puolestaan ​​voidaan ryhmitellä näytöiksi, näkymiksi tai sivuiksi. Tällainen ryhmittely, kuten edellä mainittiin, voidaan tehdä tilajakauman tai yhteisten visuaalisten ominaisuuksien avulla. Omassa sovelluksessa voi olla useita kerroksia näitä rakenteita, joten on erittäin tärkeää säilyttää läpinäkyvä visuaalinen rakenne, jotta käyttäjä voi helposti siirtyä käyttöliittymän osasta toiseen työnkulkunsa mukaisesti.

Tämän osan loppuosassa kuvataan useita tärkeitä ominaisuuksia, jotka auttavat sinua määrittelemään selkeän visuaalisen rakenteen.

Tasaus ja ruudukko

Visuaalisten elementtien kohdistaminen on yksi tärkeimmistä tekniikoista, jonka avulla suunnittelija voi esitellä tuotetta käyttäjille systemaattisesti ja järjestelmällisesti. Ryhmitetyt elementit tulee kohdistaa sekä vaaka- että pystysuunnassa (kuva 14.1). Yleensä jokaisen näytön elementin tulee olla kohdakkain mahdollisimman monen muun elementin kanssa. Kahden elementin tai kahden elementtiryhmän kohdistamisesta kieltäytyminen on oltava tietoinen: tämä on sallittua vain tietyn erottavan vaikutuksen saavuttamiseksi. Muun muassa suunnittelijoiden tulee kiinnittää huomiota:

Allekirjoitusten kohdistaminen. Tekstitykset ohjaimiin, kilpailuihin
sijoitettu päällekkäin, on kohdistettava yhteistä pitkin
rajaa. Jos kaikki allekirjoitukset ovat suunnilleen samanpituisia, sinä
kohdista ne vasemmalle puolelle - tämä helpottaa käyttäjiä
lukea kuin oikealle kohdistettuna.

Kohdistus funktionaalisten elementtien ryhmän sisällä. Ryhmä
Pa siihen liittyvät valintaruudut, valinnat tai tekstikentät
on noudatettava normaalia ruudukon kohdistusta.

Luku 14. Visuaalisen käyttöliittymän suunnittelu

Riisi. 14.I.Adobe Lightroom käyttää erittäin tehokkaasti sommitteluruudukon kohdistusta. Teksti, toiminnalliset elementit ja ohjausryhmät on kohdistettu erittäin selkeästi ruudukkoon kiinteällä askeleella. On huomattava, että ryhmäelementtien säätimien ja nimikkeiden siirtäminen oikealle voi häiritä niiden nopeaa lukemista

Ryhmiin ja paneeleihin sijoitettujen elementtien kohdistus.

Ohjainten ryhmät ja muut näytöllä olevat objektit tulee aina kun mahdollista napsauttaa samaan ruudukkoon.

Grid on yksi visuaalisen suunnittelijan tehokkaimmista työkaluista, ja se on saavuttanut nopeasti suosiota toisen maailmansodan jälkeisinä vuosina sveitsiläisten tulostimien ansiosta. Ristikko varmistaa koostumuksen rakenteen yhtenäisyyden ja johdonmukaisuuden, mikä on erityisen tärkeää rajapintaa suunniteltaessa Kanssa useita visuaalisen tai toiminnallisen monimutkaisuuden tasoja. Kun vuorovaikutussuunnittelijat ovat määrittäneet sovelluksen ja sen käyttöliittymäelementtien yleiset puitteet (katso luku 7), käyttöliittymäsuunnittelijoiden on järjestettävä kokoonpano ruudukkomaiseksi rakenteeksi, joka korostaa asianmukaisesti tärkeitä elementtejä ja rakenteita ja jättää tilaa vähemmän tärkeille elementeille. ja alemman tason elementtejä.

Tyypillisesti ruudukko jakaa näytön useisiin suuriin vaaka- ja pystysuoraan alueeseen (Kuva 14.2). Laadullisesti suunniteltu

Visuaalisen käyttöliittymän suunnittelun periaatteet

Riisi. 14.2. Tässä esimerkissä kokoonpanoruudukko ohjaa verkkosivuston näytön eri alueiden kokoa ja sijaintia. Se varmistaa johdonmukaisuuden eri näyttöjen välillä vähentäen sekä suunnittelijan työtä sommitelman luomisessa että vaivaa, joka käyttäjän on tehtävä lukeakseen ja ymmärtääkseen näytön sisältöä.

kylpyhuoneverkkovaljaiden konsepti askel, eli elementtien välinen vähimmäisetäisyys. Jos ruudukon väli on esimerkiksi neljä pikseliä, kaikkien elementtien ja ryhmien välisten etäisyyksien on oltava neljän kerrannaisia.

Ihannetapauksessa ruudukon tulisi määrittää myös näytön eri alueiden suhteet. Tällaiset suhteet ilmaistaan ​​yleensä murto-osina. Yleisiä murtolukuja ovat kuuluisa "kultainen suhde" (merkitty kreikkalaisella kirjaimella "phi" ja joka on noin 1,62), jota esiintyy usein luonnossa ja jota pidetään erityisen miellyttävänä ihmissilmälle; kahden neliöjuuren käänteisluku (noin 1:1,41), joka on paperikoon kansainvälisen standardin perusta (esimerkiksi A4-arkki); ja 4:3-suhde on useimpien tietokonenäyttöjen kuvasuhde.

Tietysti on pyrittävä tasapainoon idealisoitujen geometristen suhteiden ja näytöllä esitettävien toimintojen ja informaation erityisten tilatarpeiden välillä. Kultaisen leikkauksen täydellinen toteutus ei paranna sen näytön luettavuutta, jolla esineet ovat sekaisin yhdessä. Hyvä sommitteluruudukko modulaarinen, eli se on riittävän joustava mukautumaan kaikkiin tarvittaviin variaatioihin säilyttäen samalla rakenteen johdonmukaisuuden aina kun mahdollista. Kuten monissa