Lopullinen käyttöliittymän suunnitteluopas

Sisältö

• 01. Valitse typografia
• 02. Valitse oikea paletti
• 03. Tyylilinkit ja painikkeet
• 04. Luo komponentit
• 05. Dokumentoi ja tee yhteistyötä

Mikä on käyttöliittymäsuunnittelu? Parempi kysymys olisi, mitä todella tapahtuu käyttöliittymän suunnittelussa? Estetiikka? Käytettävyys? Esteettömyys? Ne kaikki? Kuinka kaikki nämä tekijät yhdistyvät optimaalisen käyttökokemuksen mahdollistamiseksi ja joiden pitäisi olla etusijalla?

Esteettömyyden tulisi aina olla etusijalla ja luoda perusta optimaaliselle käytettävyydelle (parhaiden verkkosivustojen rakentajien käyttö auttaa tässä). Ja sitten, kun käyttöliittymä on sekä käytettävissä että käytettävissä, sen pitäisi näyttää jo melko esteettiseltä (käyttöliittymän suunnittelutyökalut auttavat tässä). Sitten, jotta voit varmistaa, että suunnittelusi toimii kaikilla tasoilla, sinun on testattava se perusteellisesti, minkä voit tehdä parhaiden käyttäjien testaustyökalujen avulla. Tarkastellaan lähemmin useimpien mallien perustekijöitä ja mitä voidaan tehdä visuaalisen yhtenäisyyden varmistamiseksi.

01. Valitse typografia

Suuri typografia (kuten monet muotoilun näkökohdat) johtaa esteettömyyteen. Visuaalinen suunnittelu lisää varmasti käyttäjän yleistä kokemusta, mutta päivän päätteeksi käyttäjät ovat vuorovaikutuksessa käyttöliittymän kanssa eivätkä näe sitä taiteena. Luettavat kirjaimet tuottavat selkeyttä ja luettavat sanat auttavat käyttäjiä sulattamaan sisällön tehokkaasti. Molemmat ovat tärkeämpiä kuin mikään visuaalinen esteettisyys.

Hyvin suunniteltu typografia voi silti olla esteettisesti tyydyttävä. Mustavalkoinen Helvetica (tai vastaava fontti) voi olla kauneuden asia vain muutaman yksinkertaisen typografisen parannuksen jälkeen. Parannuksilla tarkoitamme kirjasimen koon, rivin korkeuden, kirjainten välin ja niin edelleen säätämistä - ei tekstin kirjasinta tai väriä.

”Kaunis” typografia on oikeastaan ​​ruma, kun sitä ei voida lukea, koska turhautuminen aina ylittää estetiikan. Suuri muotoilu on tasapainoinen ja harmoninen.

Kuten monet käyttöliittymäsuunnittelun näkökohdat, myös kuvien hienosäätö esteettömyyden ja esteettisyyden tasapainottamiseksi ei ole haaste. Haasteena on säilyttää yhtenäisyys koko suunnittelussa. Johdonmukaisuus luo selkeän hierarkian vaihtelevan tärkeiden elementtien välillä, mikä puolestaan ​​auttaa käyttäjiä ymmärtämään käyttöliittymän nopeammin ja jopa sulattamaan sisällön tehokkaammin.

Luettavuuden ja luettavuuden osalta WCAG 2.0 -verkkosisällön saavutettavuusohjeissa määritelty pienin sallittu kirjasinkoko on 18pt (tai 14pt lihavoitu). Paras kirjasinkoko riippuu suurelta osin itse kirjasimesta, mutta on tärkeää olla tietoinen visuaalisesta hierarkiasta ja siitä, miten tämä peruskoko eroaa yhteenvedoista ja otsikoista (ts. h1>, h2>, h3>).

Luo valitsemallasi käyttöliittymän suunnittelutyökalulla (käytämme InVision Studiota) sarjan tekstikerroksia (T) ja säädä sitten kaikki koot vastaamaan seuraavaa mallia:

• h1>: 44px
• h2>: 33 kuvapistettä
• h3>: 22 kuvapistettä
• p>: 18px

InVision Studion (ja kaikkien muiden käyttöliittymäsuunnittelutyökalujen) avulla tämä tehdään säätämällä tyylejä oikeanpuoleisella Inspector-paneelilla.

Valitse seuraavaksi kirjasin, mutta ole varovainen, koska joidenkin kirjasinten kohdalla saatat huomata, että 18 kuvapistettä p> ja 22 kuvapistettä h3> ei näytä niin erilaiselta. Meillä on kaksi vaihtoehtoa: säädä fonttikokoja tai harkitse eri kirjasinta otsikoille. Mene viimeksi mainitun kanssa, jos arvelet suunnittelusi olevan tekstiä raskasta.

Pidä mielessä, että:

• Visuaalinen käyttöliittymäsuunnittelu on usein suoliston tunnetta
• Mitään ei ole päätetty; kaikki voi muuttua

Viivankorkeus

Optimaalinen viivan korkeus varmistaa, että tekstiriveillä on riittävästi välejä kunnollisen luettavuuden saavuttamiseksi. Tämä tunnustetaan yhä enemmän "standardiksi"; Googlen Lighthouse Audit -työkalu ehdottaa sitä jopa manuaaliseksi tarkistukseksi (tai jopa lipuksi, jos teksti sisältää linkkejä, jotka saattavat olla liian lähellä toisiaan optimaalisen viivan korkeuden vuoksi).

Jälleen kerran WCAG auttaa meitä tässä yhdessä ja julistaa, että viivan korkeuden tulee olla 1,5x kirjasinkoko. Joten yksinkertaisesti kerro fonttikoko käyttöliittymän suunnittelutyökalussa ”Line” (tai vastaava) -kohdassa - vähintään - 1,5. Esimerkiksi, jos leipäteksti on 18 kuvapistettä, viivan korkeus olisi 27 kuvapistettä (18 * 1,5 - voit suorittaa matematiikkatoiminnon myös suoraan tarkastajasta). Jälleen kerran, ole kuitenkin tietoinen - jos 1,6x tuntuu paremmalta, käytä 1,6x. Muista, että eri fontit tuottavat erilaisia ​​tuloksia.

On liian aikaista ajatella todellisten tietojen käyttöä suunnittelussa, mutta ainakin meidän pitäisi silti käyttää jonkin verran realistista dataa (jopa lorem ipsumia). InVision Studiossa on natiivi reaalidatasovellus, joka auttaa meitä näkemään, miltä typografia voi todella näyttää.

Kappaleiden väli

Kappaleiden väli ei ole tyyli, jonka voimme julistaa InVision Studion tarkastajan avulla. Sen sijaan meidän on tasattava tasot manuaalisesti Smart Guides (⌥) -ominaisuuden avulla. Samoin kuin viivan korkeus, maaginen kerroin on 2x (kaksinkertainen fonttikoko). Esimerkiksi, jos fonttikoko on 18 kuvapistettä, sen on oltava vähintään 36 kuvapisteen kokoinen tila, ennen kuin siirryt seuraavaan tekstilohkoon. Kirjainten välin tulisi olla vähintään 0,12.

Meidän ei kuitenkaan tarvitse huolehtia tästä ennen kuin aloitamme komponenttien luomisen.

Jaetut tyylit

Jos käyttöliittymän suunnittelutyökalusi tukee sitä (InVision Studio ei vielä tue), harkitse näiden typografisten tyylejen muuttamista jaetuiksi tyyleiksi, jotta ne ovat nopeasti uudelleenkäytettäviä ja samalla varmistetaan visuaalinen yhtenäisyys. Tämä tapahtuu yleensä tarkastajan välityksellä.

02. Valitse oikea paletti

Suunnitteluun sopivien värien valitseminen ylittää estetiikan: se voi ilmoittaa koko sivustosi hierarkian.

Käyttöliittymäsuunnittelussa väri on tavallisesti yksi ensimmäisistä asioista, joista nautimme dabblingista, mutta meille opetetaan, että sukeltaminen suoraan visuaaliseen suunnitteluun on huono asia. Tämä on varmasti totta, mutta kun on kyse visuaalisesta yhtenäisyydestä, värin tulisi olla etusijalla, koska sillä on muita rooleja.

Värit käyttöliittymäsuunnittelussa voivat olla erittäin tehokkaita, mutta koska jotkut käyttäjät (monet itse asiassa) kärsivät erityyppisistä näkövammaisista, ne eivät aina ole luotettavia. Tästä huolimatta kyse ei ole välttämättä käytetystä väristä, vaan värityypistä. Tämä ei välttämättä pidä paikkaansa tuotemerkin luomisessa, koska väriä käytetään emotionaalisiin vaikutuksiin tässä suhteessa, mutta käyttöliittymäsuunnittelussa väriä käytetään myös tarkoituksen, merkityksen ja tietysti visuaalisen hierarkian välittämiseen.

01. Stark
Stark-laajennus on yhteensopiva Sketchin ja Adobe XD: n kanssa ja auttaa tarkistamaan värikontrastin ja simuloimaan värisokeutta suoraan kankaalta. Tuki Figmalle ja InVision Studiolle on tulossa pian.
02.Värit
Värit on sarja 90 väriyhdistelmää, joilla on sopiva määrä värikontrastia WCAG 2.0 -ohjeiden täyttämiseksi - jotkut niistä onnistuvat jopa täyttämään AAA-standardin.
03. A11y-projekti
A11y-projekti on massiivinen keskus kaikille esteettömyyteen liittyville asioille. Se sisältää resursseja, työkaluja, vinkkejä, oppaita, ja sen on luonut Stark-laajennuksen valmistaja ja se saa rahoitusta InVisionilta.

Kolme värityyppiä

Värillä on merkitys, joten on tärkeää, ettei niitä ole liikaa. Liian monta merkitystä johtaa useampaan asiaan, jotka käyttäjän on ymmärrettävä ja muistettava - puhumattakaan useammasta väriyhdistelmästä, joista voimme huolehtia. Yleisesti ottaen tämä olisi suositeltava muoto:

• Toimintakehotusväri (myös pääbrändin väri)
• Neutraali tumma väri (parempi käyttöliittymän elementeille tai tummalle tilalle)
• Kaikille edellä mainituille hieman vaaleampi ja tummempi vaihtelu

Tämä mahdollistaa seuraavat:

• Tumma tila on helposti saavutettavissa
• CTA-värimme ei koskaan ole ristiriidassa muiden värien kanssa
• Missä tahansa skenaariossa voimme korostaa ja poistaa sen

Määritä paletti

Luo valitsemallasi käyttöliittymän suunnittelutyökalulla yksi melko suuri piirtoalusta (hana A) kullekin värille (nimeltään 'Brand', 'Neutral / Light' ja 'Neutral / Dark'). Luo sitten jokaiselle piirtoalustalle pienempiä suorakulmioita, jotka näyttävät tummemmat ja vaaleammat värivaihtoehdot sekä muut värit itse.

Mielestämme hieman vaaleampi ja tummempi, koska 10 prosenttia ylimääräisen valkoista ja 10 prosenttia ylimääräistä mustaa. Kun olet valmis, näytä kopio typografisista tyyleistä jokaisella taululla. Näiden tekstikerrosten värin tulisi olla neutraalia, paitsi neutraalin vaalean taulun kohdalla, jossa niiden tulisi olla neutraaleja tummia.

Kontrasti

Seuraavaksi meidän on tarkistettava värit optimaalisen värikontrastin saamiseksi. On olemassa useita työkaluja, jotka voivat tehdä tämän, esimerkiksi Stark-laajennus Sketchille ja Adobe XD tai Contrast macOS: lle - online-ratkaisu, kuten Contrast Checker tai Color Contrast Checker, toimii kuitenkin hyvin.

Tarkista jokaisen yhdistelmän värikontrasti ja säädä värejä vastaavasti. Jos et ole varma, mitä värejä haluat käyttää, kokeile käyttää Color Safein suosituksia.

03. Tyylilinkit ja painikkeet

Koko

Painikkeissa ja linkeissä, aivan kuten typografiassa, tulisi olla muutama muunnelma. Loppujen lopuksi kaikilla toiminnoilla ei ole yhtä suurta merkitystä, ja kuten aiemmin keskustelimme, väri on epäluotettava viestintämenetelmä, joten se ei voi olla tärkein menetelmä visuaalisen hierarkian vaikuttamiseen. Meidän on myös leikattava kooltaan.

Visuaalisen edullisuuden testi on käytettävyystesti, jota käytetään määrittämään, näyttävätkö napautuskohteet napsautettavia. Synkronoi suunnittelu Studiosta Freehand (⌘⇧F), lähetä tuloksena oleva URL testaajille ja pyydä heitä ympyröimään elementit, joiden uskotaan olevan napsautettavissa.

Myös muut kuin InVision Studio -käyttäjät voivat käyttää Freehandia, mutta InVision Studio -käyttäjät voivat käynnistää mallinsa Freehandiin saumattomasti InVision Studiosta, mikä on nopein ja tehokkain tapa saada käyttäjiltä visuaalista palautetta.

Yleensä suosittelemme, että painikkeen teksti ilmoitetaan 18 kuvapisteeksi (sama kuin leipäteksti), mutta painikkeiden itse koko on kolme:

• Normaali: 44 kuvapistettä (pyöristetyt kulmat: 5 kuvapistettä)
• Suuri: 54 kuvapistettä (pyöristetyt kulmat: 10 kuvapistettä)
• XL: 64 kuvapistettä (pyöristetyt kulmat: 15 kuvapistettä)

Tämä antaa meille mahdollisuuden tehdä tietyistä painikkeista tärkeämpiä ilman väreihin riippumattomuutta ja myös sijoittaa painikkeita (esimerkiksi käyttää nappia minimaalisen näköisen lomakekentän sisällä).

Syvyys

Riippumatta siitä, onko napautuskohde painike vai lomakekenttä, varjoja tulisi käyttää syvyyden lisäämiseksi ja siten ehdottaa vuorovaikutteisuutta. Yksi varjostustyyli kaikille painikkeiden ja lomakekenttien muunnelmille on hieno.

Vuorovaikutteisuus

Jokainen painiketyyppi tarvitsee muunnelman osoittamaan leijuntatilan. Tämä selittää käyttäjälle, että se, mitä he ovat yrittäneet tehdä, on täysin hieno ja varmistaa, että hän jatkaa viipymättä.

Tämä on itse asiassa yksi visuaalisen yhtenäisyyden ylläpitämisen monimutkaisemmista näkökohdista, koska väri on usein suosittu tyyli, jota tulee muuttaa tilan luomisessa. Onneksi nämä tilamuutokset voivat olla suhteellisen hienovaraisia, joten on hienoa muuttaa väri hieman vaaleammaksi tai tummemmaksi muunnelmaksi - juuri sitä varten he ovat. Tämä koskee myös linkkejä.

Päätös tätä vastaan ​​saa meidät käyttämään väriä, jolla on jo merkittävä merkitys, jolloin käyttäjät sekoittuvat tai muuten päättävät keksiä toisen värin. Toissijaisen värin käyttö on täysin hienoa, mutta se tulisi tallentaa visuaalisten markkinointien sijaan käyttöliittymän elementtien sijaan. Vähemmän on enemmän (ja helpompaa).

Muista toistaa tämä vaihe jokaiselle taululle. Älä sisällytä tuotemerkin CTA-painikkeita tuotemerkkitauluun - myöhemmin kerromme, mitä tapahtuu, kun tietyt yhdistelmät eivät toimi.

04. Luo komponentit

Komponentit säästävät paljon aikaa, ja kaikki käyttöliittymän suunnittelutyökalut tarjoavat tämän ominaisuuden (esim. Sketchissä niitä kutsutaan symboleiksi). Studiossa voimme luoda komponentteja valitsemalla kaikki komponentin muodostavat kerrokset ja käyttämällä ⌘K pikakuvake.

Komponenttien käyttö

Lankakehykset ovat erittäin hyödyllisiä paitsi korkean käytettävyyden käyttöliittymien suunnittelussa myös sen selvittämiseksi, mitä käyttöliittymämme tarvitsee pitkällä aikavälillä. Se on eräänlainen kuin tulevaisuuden kestävä.

Tämä ei tarkoita sitä, että meidän on suunniteltava paljon komponentteja tai oltava valmiita kaikkiin mahdollisiin tilanteisiin, mutta se tarkoittaa sitä, että meidän on käytettävä ”mitä jos?” -Asennetta.

Esimerkiksi jos lankakehyksemme vaatii 3x1-komponentin, mutta tiedämme, että sisältö ei ole kivissä, pieni mietiskely voi saada meidät miettimään: "Entä jos nämä komponentit päätyvät 4x1?" Nyrkkisääntö on: Suunnittele vain jo olemassa olevia käyttäjän tarpeita varten, mutta yritä tehdä ratkaisuista suhteellisen joustavia. Muussa tapauksessa päädymme erittäin sotkuiseen suunnitteluvelkaan myöhemmin.

Nyt voimme käyttää tätä komponenttia uudelleen vetämällä sen kankaalle vasemmalla puolella olevasta Kirjastot> Asiakirja-kansiosta, vaikka pidä mielessä, että tämä työnkulku voi vaihdella käyttöliittymätyökalustasi riippuen.

Tämä tyylioppaiden luomismenetelmä (ja lopulta itse suunnittelun luominen) toimii erityisen hyvin modulaaristen / korttipohjaisten asettelujen kanssa, vaikka yleiset alueet, kuten otsikot, alatunnisteet ja navigoinnit, ovat myös erinomaisia ​​ehdokkaita komponentille.

Aivan kuten olemme tehneet typografisilla tyyleillämme, väreillämme ja painikkeillamme, on muistettava järjestää komponentit huolellisesti.

Sääntöjemme hyödyntäminen

Aikaisemmin teimme huomautuksen siitä, ettemme käytä merkkituotteita CTA-painikkeita tuotemerkin värin päällä, koska merkkituotteiden CTA-painikkeiden on tietysti erotuttava kaikesta muusta. Joten miten voimme luoda merkkituotteen komponentin samalla, kun voimme edelleen käyttää merkkituotetta CTA-painiketta? Loppujen lopuksi, jos käytämme neutraaleja tummia painikkeita, sanotaanpa, navigointipainikkeet tai yksinkertaisesti vähemmän tärkeät painikkeet, se ei vain olisi vaihtoehto, eikö?

Aivan. Joten tämä olisi ihanteellinen tilaisuus luoda komponentti - erityisesti otsikko + teksti + painike -yhdistelmä. Huomaa, kuinka olen luonut neutraalin valon kortin taustan, jotta tuotemerkkipainikkeen käyttö olisi mahdollista. Vastaavasti neutraali vaalean muotoinen kenttä (lomakekentät ovat yleensä valkoisia, koska henkinen malli on historiallisesti synonyymi paperilomakkeille) ei näytä hämmästyttävältä neutraalilla vaalealla taustalla, joten niitä voidaan käyttää vain neutraalilla tummalla taustalla - joko suoraan tai sisällä neutraali tumma komponentti. Näin teemme suunnittelustamme joustavan noudattamalla sääntöjämme ja säilyttäen johdonmukaisuuden.

Stressitestit

Ihannetapauksessa nopein ja tehokkain tapa varmistaa kestävyys suunnittelussa on testata se. Suunnittelun testaaminen tarkoittaa julmuutta. Oletetaan, että meillä on navigointi, jossa on X määrä navigointikohteita, koska se oli vaatimus; Varmistaaksesi joustavuuden, yritä muuttaa näitä vaatimuksia lisäämällä lisää nav-kohteita tai jos haluat todella avata avaimen töihin, kokeile myös lisätä nav-kohde, jolla on korkeampi visuaalinen hierarkia kuin muilla. Sallieko koko-, typografia- ja värisääntömme jotain tällaista? Vai tarvitsemmeko toisen säännön optimaalisen käytettävyyden tarjoamiseksi?

Muista, että sääntöjen lisäämisen ja sääntöjen taivuttamisen välillä on ero. Enemmän reunatapauksia tarkoittaa vähemmän johdonmukaisuutta, joten useimmiten on parempi käytettävyyden vuoksi yksinkertaisesti miettiä komponentti uudelleen.

05. Dokumentoi ja tee yhteistyötä

Kuinka voimme tehdä suunnittelutiedostoistamme entistä helpompia käyttää sekä itsellemme että muille suunnittelijoille, jotka saattavat käyttää suunnittelutiedostojamme? No, niiden säilyttäminen turvallisesti luotettavassa jaetussa pilvitallennustilassa on tärkeää, kuten huomaat.

Värit

Ensimmäinen askel on tallentaa kaikki värit Document Colors -malliin, jos emme ole vielä tehneet niin - tämä helpottaa niiden käyttöä, kun niitä on sovellettava suunnittelussa.Voit tehdä tämän avaamalla värivalitsimen widgetin Tarkastajasta, valitsemalla avattavasta valikosta ”Asiakirjan värit” ja napsauttamalla + -kuvaketta lisätäksesi värin värimalliin. Tämä toimii samalla tavalla useimmissa käyttöliittymän työkaluissa.

Jaetut kirjastot

Seuraavaksi meidän on muunnettava asiakirjamme - typografisilla tyyleillä, väreillä, painikkeilla, yleisillä alueilla ja peruskomponenteilla - jaettuun kirjastoon.

Pohjimmiltaan tämä tarkoittaa, että jokaisen elementin on oltava komponentti, vaikka se koostuu vain yhdestä kerroksesta. Napsauta + ‌ -painiketta Kirjastojen vasemmassa reunassa ja tuo tämä asiakirja uuteen asiakirjaan. Aivan oikein: asiakirjamme on nyt kirjasto ja se on valmis käytettäväksi käyttöliittymien suunnittelussa taatulla yhdenmukaisuudella.

InVision Studio on jonkin verran rajoitettu siinä mielessä, että se ei vielä synkronoidu InVisionin virallisen Design System Manager -työkalun kanssa, mutta on tarpeeksi helppoa sijoittaa kirjasto Dropboxiin, jotta muut suunnittelijat voivat käyttää ja päivittää sitä ajan myötä. Kun muutos tehdään (paikallisesti tai etänä), jokainen kirjastoa käyttävä Studio-tiedosto (uudelleen, paikallisesti tai etänä) kysyy, haluatko päivittää värit ja komponentit. Näin suunnittelukirjastoja ylläpidetään ryhmien kesken.

Kun on kyse visuaalisesti yhtenäisten käyttöliittymien suunnittelusta, käytä kaikkea uudelleen. Suunnittele painikkeet ja luo sitten painikkeiden komponentit painikkeilla ja käytä sitten
painikekomponentit luoda muita komponentteja, kuten hälytykset ja valintaikkunat.

Älä vain luo komponentteja, joita ei tarvita. Muista, että kirjaston rakentaminen on jatkuvaa yhteistyötä. Sitä ei tarvitse suorittaa kokonaan kerralla, yksin sinä tai koskaan. Sen on vain välitettävä kieltä.

Suunnittelu mittakaavassa

Kun muotoilu laajenee, sen hallinnasta tulee vaikeampi. Voisimme tehdä useita säätöjä, jotta se pysyisi tehokkaana ja ylläpidettävänä, varsinkin kun InVisionin DSM ei vielä toimi Studion kanssa.

Haluamme esimerkiksi käyttää tekstikerroksia kirjastomme merkitsemiseen keinona selittää eri elementtien käyttötapauksia. Tyyppityylien osalta voimme jopa muokata tekstiä kuvailevammaksi (esim. "H1> / 1,3 / 44px"). Tämä sanoo sen h1>S: n on oltava 44 kuvapistettä ja viivan korkeuden 1,3.

Suunnittelunvaihto

Suunnittelunvaihtotyökalut näyttävät suunnittelun jokaisen elementin käyttämät tyylit, jotta kehittäjät voivat rakentaa sovelluksen tai verkkosivuston. Nämä työkalut sisältävät yleiskatsauksen tyyleistä ja myös kopion asiakirjan väreistä. Kehittäjät voivat jopa kopioida nämä tyylit koodina, mikä on erinomaista, jos olet päättänyt luoda kirjallisen suunnitteludokumentaation ja haluat sisällyttää komponenttien koodinpätkät.

Jos olet huolissasi verkkosivuston vianetsinnästä ja hallinnasta, auttaa varmistamaan, että sinulla on oikea verkkopalvelupalvelu, mutta suunnittelujärjestelmässäsi on käytettävä InVisionin suunnittelunvaihtotyökalua Inspect. Voit käyttää sitä napsauttamalla InVision Studion Julkaise InVisioniin -painiketta / kuvaketta, avaamalla tuloksena olevan URL-osoitteen ja napauttamalla sitten siirtyäksesi tarkastustilaan. Se on todella kätevää.

Tämä sisältö ilmestyi alun perin verkkolehdessä.