7 Käytännöllisiä vinkkejä huijaamiseen suunnittelussa

Paranna mallisi taktiikalla lahjakkuuden sijaan.

Jokainen web-kehittäjä joutuu väistämättä tilanteisiin, joissa heidän on tehtävä visuaalisen suunnittelun päätöksiä, pitävätkö he siitä vai eivät.

Ehkä yrityksellä, jossa työskentelet, ei ole kokopäiväistä suunnittelijaa, ja sinun on otettava käyttöliittymä käyttöön uutta ominaisuutta varten. Tai ehkä hakkeroit sivuprojektia ja haluat sen näyttävän paremmalta kuin vielä toinen Bootstrap-sivusto.

On helppo nostaa kädet ylös ja sanoa: “En koskaan pysty tekemään tästä hyvältä, en ole taiteilija!”, Mutta osoittautuu, että on olemassa paljon temppuja, joita voit käyttää tasoittamaanksesi työtäsi, joka älä vaadi taustaa graafisessa suunnittelussa.

Tässä on seitsemän yksinkertaista ideaa, joiden avulla voit parantaa kuvioitasi tänään.

1. Luo hierarkia koon sijaan värin ja painon avulla

Yleinen virhe käyttöliittymätekstin muotoilussa on liian suuri luottamus fonttikokoon hierarkian hallitsemiseksi.

”Onko tämä teksti tärkeä? Tehdään siitä suurempi. ”

”Onko tämä teksti toissijainen? Tehdään siitä pienempi. "

Sen sijaan, että jättäisit kaiken raskaan nostamisen pelkästään kirjasinkokoon, kokeile käyttää väriä tai kirjasimen painoa tehdä sama työ.

”Onko tämä teksti tärkeä? Tehdään siitä rohkeampaa. ”

”Onko tämä teksti toissijainen? Käytämme vaaleampaa väriä. "

Kokeile kiinni kahdessa tai kolmessa värissä:

  • Ensisijaisen sisällön tumma (mutta ei musta) väri (kuten artikkelin otsikko)
  • Toissijaisen sisällön harmaa (kuten artikkelin julkaisupäivä)
  • Liitännäissisällön vaaleampi harmaa (ehkä alatunnisteen tekijänoikeusilmoitus)

Samoin kaksi fonttipainoa riittää yleensä käyttöliittymätyöhön:

  • Normaali kirjasinkoko (400 tai 500 kirjasimesta riippuen) suurimmalle osalle tekstiä
  • Raskaampi kirjasinpaino (600 tai 700) tekstille, jota haluat korostaa

Pysy kaukana alle 400 fonttipainosta käyttöliittymätyössä; ne voivat toimia suurissa nimikkeissä, mutta ovat liian vaikeita lukea pienemmissä koossa. Jos harkitset kevyemmän painon käyttöä korostaaksesi jotakin tekstiä, käytä sen sijaan vaaleampaa väriä tai pienempää kirjasinkokoa.

2. Älä käytä harmaata tekstiä värillisellä taustalla

Tekstistä vaaleamman harmaa on erinomainen tapa korostaa sitä valkoisilla taustat, mutta se ei näytä niin hyvältä värillisellä taustalla.

Tämä johtuu siitä, että vaikutus, jonka todellisuudessa näemme harmaalla valkoisella, vähentää kontrastia.

Tekstin saattaminen lähemmäksi taustaväriä auttaa itse asiassa luomaan hierarkiaa, ei tee siitä vaaleanharmaata.

Voit vähentää kontrastia värikkäillä taustatiedoilla työskentelemällä kahdella tavalla:

1. Vähennä valkoisen tekstin läpinäkymättömyyttä

Käytä valkoista tekstiä ja laske opasiteetti. Tämä antaa taustan värin vuotaa hiukan läpi, korostamatta tekstiä tavalla, joka ei ole ristiriidassa taustan kanssa.

2. Valitse käsin väri, joka perustuu taustan väriin

Tämä toimii paremmin kuin opasiteetin vähentäminen, kun taustana on kuva tai kuvio, tai kun opasiteetin pienentäminen tekee tekstistä tuntuvan liian tylsältä tai pestyltä.

Valitse väri, joka on saman sävyn kuin tausta, säätämällä kylläisyyttä ja vaaleutta, kunnes se näyttää sinulle sopivalta.

3. Tasaa varjot

Lisää pystysuuntainen poikkeama sen sijaan, että käytät suuria epäselvyyksiä ja hajautusarvoja ruudun varjojen havaitsemiseksi.

Se näyttää paljon luonnollisemmalta, koska simuloi valonlähdettä, joka paistaa ylhäältä alas, kuten olemme tottuneet näkemään todellisessa maailmassa.

Tämä koskee upotettuja varjoja, kuten saatat käyttää myös kaivoissa tai lomakkeen syöttöissä:

Jos olet kiinnostunut oppimaan lisää varjosuunnittelusta, materiaalisuunnitteluohjeet ovat fantastinen pohja.

4. Käytä vähemmän reunoja

Kun joudut luomaan eron kahden elementin välillä, yritä vastustaa heti rajan saavuttamista.

Vaikka reunat ovat loistava tapa erottaa kaksi elementtiä toisistaan, ne eivät ole ainoa tapa, ja liian monen käyttäminen voi tehdä suunnittelustasi kiireisen ja sotkuisen.

Seuraavan kerran kun löydät itsesi rajan, kokeile seuraavia ideoita:

1. Käytä laatikon varjoa

Box-varjot tekevät hienoa työtä hahmotella elementti kuten raja, mutta voivat olla hienovaraisempia ja saavuttaa saman tavoitteen olematta yhtä häiritseviä.

2. Käytä kahta erilaista taustaväriä

Vierekkäisten elementtien antaminen hieman erilaisille taustaväreille on yleensä kaikki mitä tarvitset erottamaan ne toisistaan. Jos käytät jo erilaisia ​​taustavärejä reunuksen lisäksi, yritä poistaa reuna; et ehkä tarvitse sitä.

3. Lisää ylimääräinen etäisyys

Mikä olisi parempi tapa luoda erottelu elementtien välillä kuin yksinkertaisesti lisätä erotusta? Asioiden etäisyys toisistaan ​​on hieno tapa tehdä ero elementtiryhmien välillä ottamatta käyttöön uutta käyttöliittymää.

5. Älä räjäytä pieniä kuvakkeita

Jos suunnittelet jotain, joka voisi käyttää joitain suuria kuvakkeita (kuten kentällä aloitussivun ominaisuudet), saatat vaistomaisesti tarttua ilmaiseen kuvakesarjaan, kuten Font Awesome tai Zondicons, ja pomppia kokoa, kunnes ne vastaavat tarpeitasi.

Ne ovat loppujen lopuksi vektorikuvia, joten laatu ei kärsi, jos suurennat kokoa oikein?

Vaikka on totta, että vektorikuvien laatu ei heikkene, kun suurennat niiden kokoa, 16–24 kuvapisteen piirretyt kuvakkeet eivät koskaan näytä kovin ammattimaisilta, kun puhallat ne kokoon 3x tai 4x. Heistä puuttuu yksityiskohtia, ja he tuntevat aina suhteettoman "paksu".

Jos sinulla on vain pieniä kuvakkeita, yritä sulkea ne toisen muodon sisään ja antaa muodolle taustaväri:

Tämän avulla voit pitää todellisen kuvakkeen lähempänä aiottua kokoa samalla kun täytät suuremman tilan.

Jos sinulla on budjetti, voit käyttää myös premium-kuvakesarjaa, joka on suunniteltu käytettäväksi suurempina kokoina, kuten Heroicons tai Iconic.

6. Lisää väriä vaaleaan malliin käyttämällä aksenttireunuksia

Jos et ole graafinen suunnittelija, kuinka lisäät käyttöliittymään sen visuaalisen tyylin ripauksen, jonka muut mallit saavat kauniista valokuvista tai värikkäistä kuvista?

Yksi yksinkertainen temppu, jolla voi olla suuri ero, on lisätä värikkäitä aksenttirajoja käyttöliittymän osiin, jotka muuten tuntevat olonsa hieman kevyeksi.

Esimerkiksi hälytysviestin sivulla:

… Tai korosta aktiiviset navigointikohteet:

… Tai jopa koko asettelun päällä:

Värillisen suorakulmion lisääminen käyttöliittymään ei edellytä mitään graafisen suunnittelun kykyjä, ja se voi viedä pitkän matkan kohti sitä, että sivustosi tuntuu "suunnitellulta".

Onko sinulla vaikeaa valita värejä? Kokeile valita rajoitetun paletin joukosta, kuten Dribbblen värihaku, jotta voit välttää tuntemasta sinua hämmästymään perinteisen värivalitsijan loputtomista mahdollisuuksista.

7. Jokainen painike ei tarvitse taustaväriä

Kun käyttäjä voi suorittaa sivulla useita toimintoja, on helppo joutua ansaan suunnitella kyseiset toiminnot puhtaasti semantiikan perusteella.

Bootstrap-kaltaiset kehystekijät rohkaisevat tätä antamalla sinulle semanttisten tyylien valikon, josta voit valita, kun lisäät uuden painikkeen:

”Onko tämä positiivinen toimenpide? Tee painikkeesta vihreä. ”

Poistaako tämä tiedot? Tee painikkeesta punainen. ”

Semantiikka on tärkeä osa painikkeiden suunnittelua, mutta on tärkeämpi ulottuvuus, joka yleensä unohdetaan: hierarkia.

Jokainen sivun toiminta istuu jossain tärkeän pyramidin alueella. Suurimmalla osalla sivuista on vain yksi tosi ensisijainen toiminto, pari vähemmän tärkeätä toissijaista toimintoa ja muutama harvoin käytetty kolmas aste.

Suunniteltaessa näitä toimintoja on tärkeää ilmoittaa niiden paikka hierarkiassa.

  • Ensisijaisten toimien tulisi olla ilmeisiä. Kiinteät, korkea kontrasti taustavärit toimivat tässä hyvin.
  • Toissijaisten toimien tulisi olla selkeitä, mutta ei näkyviä. Ääriviivat tai alemman kontrastin taustan värit ovat hienoja vaihtoehtoja.
  • Kolmannen osapuolen toimien tulisi olla löydettäviä, mutta huomaamattomia. Näiden toimintojen muotoilu kuten linkit on yleensä paras tapa.

"Entä tuhoisat toimet, eikö niiden pitäisi aina olla punaisia?"

Ei välttämättä! Jos tuhoava toimenpide ei ole sivun ensisijainen toimenpide, saattaa olla parempi antaa sille toissijainen tai kolmannenlainen painikehoito.

Tallenna iso, punainen ja lihavoitu muotoilu silloin, kun kyseinen negatiivinen toiminta todella on käyttöliittymän ensisijainen toiminto, kuten vahvistusikkunassa:

Nautitko tästä viestistä? Olemme juuri julkaissut kirjan!

Refaktorointiliittymä vie kaiken, mitä tiedämme suunnittelusta, ja yhdistää sen yhdeksi kokonaispaketiksi, mukaan lukien kirja, näytönohjaukset, komponenttigalleria, räätälöity sisältö ja paljon muuta.

Tähän mennessä yli 6000 ihmistä on noutanut sen, ja palaute on ollut uskomatonta.

Jos olet kiinnostunut, siirry kohtaan RefactoringUI.com/book oppiaksesi lisää ja lataa näyte.