10 tīmekļa dizaina komandas katram projektam
Vai jums ir noteikumu kopums, kas attiecas uz tīmekļa vietnes dizainu? Ir daži noteikumi, kas attiecas uz gandrīz visiem tīmekļa dizaina projektiem - sauksim tos par “tīmekļa dizaina pavēlēm”.
Neatkarīgi no tā, cik liela vai maza ir vietne, šie noteikumi ir laba dizaina pamats. Ja sekojat līdzi šīm pamatnostādnēm un pieņemat tās domāšanai par katru iesākto projektu, jūs izvairīsities no daudzām kļūdām, kurās dizaineri var paklupt!
1. Tev jābūt konsekventam
Padariet dizainu pēc iespējas vieglāku mijiedarbību ar lietotājiem Konsekvents dizains ir viegli lietojams un saprotams dizains. Lietotāju iesaistei un darbībām, kā arī vizuālajam attēlam vajadzētu būt līdzīgam izskatā un lietojumā vienā noformējumā.
Tas nozīmē, ka pogas ir vienā krāsā un izmanto vienādus kursoru stāvokļus, lai palīdzētu lietotājiem zināt, kā mijiedarboties, virsraksti ir vienāda lieluma un visā dizainā izmanto to pašu burtveidolu, un tādi elementi kā krāsas seko paletei, kas ir identificējama un saistīta ar zīmolu.
Citiem vizuālajiem elementiem būtu jānotiek arī saskaņā ar konsekventu stilu, kā arī ar stilu un lietojuma plānu tādiem elementiem kā ikonas vai fotogrāfija, video vai ilustrācijas. Dizainā jābūt balss skaņai, ko izmanto kopēšanas blokiem, kas atbilst kopējai estētikai.
Visi šie konsekvences elementi veicina vispārēju lietojamību, padarot dizainu pēc iespējas vieglāku lietotājiem mijiedarbībai.
2. Jums jāizmanto atstarpe
Papildu vieta ap elementiem var palīdzēt atdalīt un padarīt tos vieglāk lasāmus. Nav nepieciešams katru elementu ievietot telpā virs ritināšanas. Izmantojiet atstarpi, lai noteiktu ritmu un plūsmu, izveidotu vizuālo hierarhiju un palīdzētu lietotājiem pārvietoties pa dizainu.
Ja saturs ir labs, tie ritinās.
Un atstarpe faktiski var palīdzēt pamudināt lietotāju rīkoties, velkot aci uz ekrānu.
Atstarpe ir vēl svarīgāka, jo ekrāna izmēri kļūst mazāki. Papildu vieta ap elementiem var palīdzēt atdalīt un padarīt tos vieglāk lasāmus. (Padomājiet par to, cik izdevīga var būt neliela papildu telpa, kad viegli jākļūst par pogām.)
Vai nezināt, kur dizainā iekļaut atstarpi? Sāc šeit:
- Apkārt pogas vai citi interaktīvi elementi
- Kā rindstarpas starp tipa rindiņām, lai atvieglotu lasīšanu
- Starp elementiem, piemēram, ietīšana uz austrumiem, lai atdalītu, piemēram, teksta blokos iestrādātu fotoattēlu iesaiņošana
- Veidlapas laukos, lai tos būtu viegli pieskarties mobilajiem ekrāniem
- Apkārt jebkuram elementam, uz kuru vēlaties, lai lietotāji koncentrējas
3. Jums jāizmanto režģis
Režģis ir lietotāja pieredzes pamats. Projektējot ar režģi, pēdējā vietne ir precīzāka, konsekventāka, un elementi ir izvietoti secībā, kurai ir vizuāla jēga.
Režģi ir gan horizontāli, gan vertikāli, lai arī vispazīstamākais tīmekļa dizaina režģis varētu būt 12 kolonnu vertikālais režģu elements elementu izlīdzināšanai.
Režģis ir kaut kas tikai tas, ko redzat projektēšanas procesā, un, ja rodas grūtības atrast elementu izvietojumus vai izveidot sakārtotu kontūru, režģis var būt kopējais glābšanas līdzeklis.
4. Jums nevajadzētu aizmirst lietotāju modeļus
Lietotāji dara lietas noteiktā veidā un no jūsu dizaina sagaida noteiktas lietas. Lai gūtu pēc iespējas lielākus panākumus, dizainam vajadzētu izmantot vispārpieņemtus lietotāju modeļus (atkārtotus dizaina problēmu risinājumus), lai cilvēki precīzi zinātu, kā dizains darbojas.
Pie izplatītākajiem lietotāju modeļiem pieder:
- Informācijas secība veidlapās, sākot ar vārdu vai e-pastu un beidzot ar “iesniegt”
- Navigācijas izvēlņu izvietojums
- E-komercijas iepirkumu groza ikonas atrašanās vieta un noklikšķināmais raksturs
- Kā darbojas paziņojumi
- Cita starpā meklēšanas un tērzēšanas ikonas
UI dizaina modeļos ir garš lietotāju modeļu saraksts visu veidu dizaina situācijām.
5. UI darbībās jālieto līdzība
Katram vietnes dizaina elementam vajadzētu darboties tāpat kā visiem citiem tāda paša veida elementiem. Šiem elementiem vajadzētu būt arī vizuālai identitātei, lai lietotāji vienā mirklī zinātu, kas viņi ir un ko viņi dara.
Ir tik daudz lietotāja interfeisa darbību, kuras var iebūvēt dizainā, ka obligāti jāievēro Geštalta līdzības princips. Vizuālo elementu un darbību grupēšana tā, lai tās būtu vizuāli identificējamas, lietotājiem palīdzēs radīt labāku vispārējo pieredzi.
6. Labi jālieto tipogrāfija
Atkāpieties no dizaina un pārbaudiet, vai burtus ir viegli lasīt no attāluma. Jums nav jābūt tipogrāfam, bet tas noteikti palīdz.
Tik daudz no tā, kas veido labu dizainu, sakņojas lasāmībā un salasāmībā. Šie jēdzieni ir atkarīgi no tā, kā jūs izvēlaties un lietojat burtveidrus.
Ja rodas šaubas, izvēlieties vienkāršus burtveidolu pārus, piemēram, serif un sans serif. Atkāpieties no dizaina un pārbaudiet, vai burtus ir viegli lasīt no attāluma. Pēc tam apskatiet burtus uz neliela audekla, piemēram, tālruņa ekrāna, lai pārliecinātos, ka to ir viegli lasīt arī vienā acumirklī.
Mēģiniet izmantot burtu vidē ar augstu kontrastu, piemēram, gaišais tips uz tumša fona vai tumšs tips uz gaiša fona, lai katru vārdu būtu viegli lasīt.
7. Jums nevajadzētu aizmirst tīklenes ekrānus
Pat vismazākie ekrāni var atveidot elementus un attēlus ar gandrīz pilnību pikseļos.
Jums jāapsver, kā rīkoties ar attēliem, ikonām un citiem elementiem, lai viss būtu skaisti attēlots neatkarīgi no ekrāna lieluma. Kad vien iespējams, ideāls risinājums var būt vektora formāta izmantošana, kas ir viens no iemesliem, kāpēc SVG visu laiku pieaug.
Ja jums nav attēla, kura izšķirtspēja būtu piemērota parastiem ekrāna izmēriem, nelietojiet to. Neviens attēls nav labāks par sliktu vai pikseļotu attēlu.
8. Tev būs jābūt godīgam
Jūsu noformējumam jābūt patiesam pret jūsu mazo biznesu, informāciju vai zīmolu un caurspīdīgam darbos. Nelietojiet nozagt dizainu vai attēlu, neaizpildiet nepatiesus atslēgvārdus, lai palielinātu datplūsmu un būtu patiesi pret to, kas un kāds ir jūsu saturs.
Ar tik lielu tīmekļa jucekli lietotāji vēlas sadarboties ar autentiskiem dizainiem. Lietotāju vilināšanai kaut ko darīt vai reģistrēties kādam produktam vai pakalpojumam vai vienkārši viņu maldināt par tēmu vai informāciju vajadzētu būt pretrunā ar jūsu personīgo ētikas kodeksu. Neuzņemieties tos projektus, kuri to sagaida no dizaina.
9. Jums nav jāignorē pieejamība
Tīmeklim jābūt izmantojamam pēc iespējas lielākam skaitam cilvēku. Un, lai gan varētu šķist, ka ir grūti nodrošināt dizaina pieejamību, tas nav tik sarežģīts, kā jūs varētu domāt.
Google ir lielisks vietņu pieejamības ceļvedis, ko tas definē šādi:
Plaši runājot, sakot, ka vietne ir pieejama, mēs domājam, ka vietnes saturs ir pieejams un tās funkcionalitāti var darbināt burtiski ikviens. Kā izstrādātājiem ir viegli pieņemt, ka visi lietotāji var redzēt un izmantot tastatūru, peli vai skārienekrānu un mijiedarboties ar jūsu lapas saturu tāpat kā jūs. Tas var novest pie pieredzes, kas dažiem cilvēkiem labi der, bet rada jautājumus, sākot no vienkāršas kairināšanas līdz citu demonstrēšanas aizbāžņiem.
Pieejamība tādējādi norāda uz to lietotāju pieredzi, kuri varētu atrasties ārpus “tipiskā” lietotāja šaurā diapazona un kuri varētu piekļūt lietām vai mijiedarboties ar tām savādāk, nekā jūs gaidījāt. Īpaši tas attiecas uz lietotājiem, kuriem ir noteikta veida traucējumi vai invaliditāte - un jāpatur prātā, ka šī pieredze var būt nefiziska vai īslaicīga.
Daudzi laba dizaina principi, piemēram, izmērs, kontrasts un telpa, veicina vispārēju pieejamību.
WebAIM ir kontrolsaraksts, kā arī citi rīki, kas palīdzēs jums noteikt, vai jūsu dizains ir pieejams. Kontrolsaraksts aptver četras jomas, kas attiecas uz piekļuvi: Vai dizains ir uztverams, izmantojams, saprotams un noturīgs?
10. Jums būs jābūt atsaucīgam
Tam 2018. gadā vajadzētu būt gandrīz pašam par sevi saprotamu, taču jūsu vietnei jābūt atsaucīgai. Tas ietver katru elementu, sākot no teksta līdz attēliem un beidzot ar pogām līdz kopējam ietvaram.
Katram dizainam ir jādarbojas katrā ierīcē. Periods.
Secinājums
Stingrs noteikumu kopums var palīdzēt ātrāk iekļūt dizaina projektā un strādāt konsekventāk. Ņemiet vērā, ka neviens no šiem baušļiem nepasaka, kā vajadzētu izskatīties projektam; tie sakņojas teorijā par to, kā jūs ieskicējat un izveidojat katru vietni.
Vai jums ir papildu tīmekļa dizaina noteikumi, lai pievienotu šos baušļus? Paziņojiet mums, kas viņi ir sociālajos medijos. Tikai noteikti atzīmējiet Design Shack!
