7 praktilist näpunäidet disaini petamise kohta

Parandada oma disaini andekate taktikate abil.

Iga veebiarendaja satub paratamatult olukordadesse, kus nad peavad tegema visuaalse kujunduse otsuseid, ükskõik, kas see meeldib või mitte.

Võib-olla pole ettevõttel, kus töötate, täiskohaga disainerit ja peate uue funktsiooni kasutajaliidese iseseisvalt rakendama. Või äkki olete häkkimas ühe kõrvalprojekti jaoks ja soovite, et see näeks parem välja kui veel üks-teine ​​Bootstrap-sait.

Lihtne on tõsta oma käed üles ja öelda: „Ma ei suuda seda kunagi ilusaks teha, ma pole kunstnik!“, Kuid tuleb välja, et on palju nippe, mida saate kasutada oma töö tasandamiseks, et ei vaja graafilise disaini tausta.

Siin on seitse lihtsat ideed, mida saate täna oma kujunduse parendamiseks kasutada.

1. Kasutage suuruse asemel hierarhia loomiseks värvi ja kaalu

Tavaline viga kasutajaliidese teksti kujundamisel tugineb teie hierarhia juhtimiseks liiga palju fondi suurusele.

“Kas see tekst on oluline? Teeme selle suuremaks. ”

“Kas see tekst on teisejärguline? Teeme selle väiksemaks. ”

Selle asemel, et jätta kõik rasked tõstmised ainult fondi suuruseks, proovige sama töö tegemiseks kasutada värvi või fondi kaalu.

“Kas see tekst on oluline? Teeme julgemalt. ”

“Kas see tekst on teisejärguline? Kasutagem heledamaid värve. ”

Proovige kinni pidada kahest või kolmest värvist:

  • Põhisisu (nagu artikli pealkiri) tume (kuid mitte must) värv
  • Teisese sisu jaoks hall (nagu artikli avaldamise kuupäev)
  • Kõrvalsisu jaoks heledam hall (võib-olla autentsusteade jaluses)

Samamoodi piisab kasutajaliidese tööks kahest fondi kaalust:

  • Tavaline fondi mass (sõltuvalt fondist 400 või 500) enamiku teksti jaoks
  • Raskem fondi mass (600 või 700) teksti jaoks, mida soovite rõhutada

Hoidke kasutajaliidese töö korral alla 400 font-kaalu; nad võivad töötada suurte rubriikide jaoks, kuid väiksemates suurustes on neid liiga raske lugeda. Kui kaalute mõne teksti rõhutamiseks kergema kaalu kasutamist, kasutage selle asemel heledama värvi või väiksemat kirjasuurust.

2. Ärge kasutage halli teksti värvilisel taustal

Teksti heledaks halliks muutmine on suurepärane viis selle valge taustal rõhutamiseks, kuid värvilise taustaga pilt ei tundu nii hea.

Põhjuseks on see, et efekt, mida me tegelikult halli valgega näeme, vähendab kontrasti.

Teksti taustvärvile lähemale viimine aitab tegelikult hierarhiat luua, mitte muuta seda helehalliks.

Kontrasti vähendamiseks värvilise taustaga töötamisel on kaks võimalust:

1. Vähendage valge teksti läbipaistmatust

Kasutage valget teksti ja vähendage läbipaistmatust. See laseb taustavärvil natuke läbi voolata, rõhutades teksti viisil, mis ei ole taustal vastuolus.

2. Valige käsitsi värv, mis põhineb taustvärvil

See toimib paremini kui läbipaistmatuse vähendamine, kui teie taust on pilt või muster või kui läbipaistmatuse vähendamine muudab teksti liiga tuhmiks või pesetuks.

Valige taustaga sama värvi värv, kohandades küllastust ja heledust, kuni see teile sobib.

3. Kompenseerige oma varjud

Lahtrite varjude märgatavamaks muutmise asemel suure hägususe ja leviku väärtuste asemel lisage vertikaalne nihe.

See näeb välja palju loomulikum, kuna simuleerib valgusallikat, mis paistab ülevalt alla, nagu me oleme harjunud nägema reaalses maailmas.

See kehtib sisseehitatud varjude kohta, nagu võite kasutada kaevudel või vormi sisenditel:

Kui olete huvitatud varjude kujundamise kohta rohkem teada saama, on materjalide kujundamise juhised fantastiline alus.

4. Kasutage vähem piire

Kui teil on vaja eraldada kaks elementi, proovige kohe vastu piiri jõudmist.

Ehkki äärised on suurepärane võimalus kahte elementi üksteisest eristada, pole need ainsad viisid ja kui neid liiga palju kasutada, võib teie kujundus end hõivatud ja segasena tunda.

Järgmine kord, kui leiate, et jõuab piirini, proovige selle asemel ühte järgmistest ideedest:

1. Kasutage kasti varju

Kastvarjud teevad suurepärase töö elemendi kirjeldamisel, nagu piiril, kuid võivad olla peenemad ja täita sama eesmärki ilma, et nad nii häiriksid.

2. Kasutage kahte erinevat taustvärvi

Kõrvuti asetsevate elementide pisut erineva taustavärvi andmine on tavaliselt kõik, mida peate nende vahel eristama. Kui kasutate juba lisaks äärisele ka erinevaid taustvärve, proovige ääris eemaldada; te ei pruugi seda vaja minna.

3. Lisage lisavahed

Mis oleks parem viis elementide eraldamise loomiseks kui eraldamise suurendamine? Asjade teineteisest eraldamine on suurepärane viis eristamaks elementide rühmi ilma ühtegi uut kasutajaliidest tutvustamata.

5. Ärge õhutage väikeseid ikoone

Kui kavandate midagi, milles saaks kasutada mõnda suurt ikooni (näiteks võib-olla maandumislehe jaotist „Funktsioonid”), võiksite vaistlikult haarata tasuta ikoonikomplekti (nt Font Awesome või Zondicons) ja kärpida suurust, kuni need teie vajadustele vastavad.

Need on ju vektorpildid, nii et kvaliteet ei kahjusta, kui suurendate suurust?

Ehkki on tõsi, et vektorkujutised ei halvene nende suuruse suurendamisel kvaliteeti, ei näe 16–24 pikslit joonistatud ikoonid kunagi eriti professionaalsed, kui suurendate nende kavandatud suurust 3x või 4x. Neil puudub detailsus ja nad tunnevad end alati ebaproportsionaalselt turskena.

Kui teil on vaid väikseid ikoone, proovige need ümbritseda mõne muu kujuga ja anda kujule taustvärv:

Nii saate tegeliku ikooni hoida kavandatud suurusele lähemal, täites samas suurema ruumi.

Kui teil on eelarvet, võite kasutada ka premium-ikoonikomplekti, mis on mõeldud kasutamiseks suuremates suurustes, näiteks Heroicons või Iconic.

6. Õrnale kujundusele värvi lisamiseks kasutage aktsendipiire

Kui te ei ole graafiline disainer, siis kuidas lisada oma kasutajaliidesele visuaalse elegantsi kriips, mida teised kujundused saavad ilusast fotograafiast või värvilistest illustratsioonidest?

Üks lihtne trikk, mis võib palju kaasa aidata, on lisada värvilisi aktsendipiire oma liidese osadele, mis muidu tunneksid end pisut õrnana.

Näiteks hoiatusteate küljel:

… Või aktiivsete navigeerimisüksuste esiletõstmiseks:

… Või isegi kogu paigutuse ülaosas:

Värvilise ristküliku lisamiseks oma kasutajaliidesele pole vaja mingit graafilise disaini annet ja see võib minna kaugele, et muuta teie sait „kujundatumaks”.

Kas teil on raske värve valida? Proovige valida piiratud paleti hulgast, nagu Dribbble'i värviotsing, et mitte tunnetada end tavapärase värvivalija lõputute võimaluste üle hämmingus.

7. Mitte iga nupp ei vaja taustvärvi

Kui kasutaja saab lehel teha mitu toimingut, on lihtne sattuda lõksu, mille abil saab neid toiminguid kujundada üksnes semantika põhjal.

Bootstrapi-taolised raamistikud ergutavad seda, andes teile semantiliste stiilide menüü, mille hulgast saate alati valida, kui lisate uut nuppu.

“Kas see on positiivne tegevus? Tehke nupp roheliseks. ”

“Kas see kustutab andmed? Tehke nupp punaseks. ”

Semantika on nuppude kujundamise oluline osa, kuid on ka olulisem mõõde, mis tavaliselt unustatakse: hierarhia.

Iga lehe toiming asub kuskil tähtsuse püramiidis. Enamikul lehtedel on ainult üks tõeline esmane toiming, paar vähemtähtsat sekundaarset toimingut ja vähestel harva kasutatud kolmanda astme toimingud.

Nende toimingute kavandamisel on oluline edastada nende koht hierarhias.

  • Esmased toimingud peaksid olema ilmsed. Tahked, kõrge kontrastsusega taustvärvid töötavad siin suurepäraselt.
  • Teisene tegevus peaks olema selge, kuid mitte silmatorkav. Äärmuslikud stiilid või madalama kontrastsusega taustvärvid on suurepärased võimalused.
  • Kolmanda astme meetmed peaksid olema leitavad, kuid neid ei tohiks häirida. Nende toimingute nagu linkide kujundamine on tavaliselt parim viis.

"Mis saab destruktiivsetest toimingutest, kas need ei peaks alati punased olema?"

Mitte tingimata! Kui hävitav tegevus ei ole lehel esmane toiming, võib olla parem anda sellele teisene või kolmas nupp.

Salvestage suur, punane ja paksus stiilis stiil, kui see negatiivne toiming on tegelikult liidese peamine toiming, nagu kinnitusdialoogis:

Kas teile meeldib see postitus? Me andsime just välja raamatu!

Refactoring UI võtab kõik, mida me disaini kohta teame, ja koondab selle ühte terviklikku paketti, sealhulgas raamatu, ekraanisaated, komponentide galerii, kohandatud kujundusega varad ja palju muud.

Siiani on selle kätte saanud üle 6000 inimese ja tagasiside on olnud hämmastav.

Kui olete huvitatud, minge üle saidile RefactoringUI.com/book, et saada lisateavet ja alla laadida näidis.