20 Web dizaina nozares noteikumi Clueless klientam
Web dizaina nozarē mēs izmantojam daudz iekšējie noteikumi. Tas ne tikai apgrūtina jaunpienācēju uzsākšanu, īpaši klienti, kas nav iesaistīti dizaina nozarē, taču savai izpratnei par savu nozīmi dažkārt var būt diezgan grūti.
Šajā glosārijā mēs esam savākuši 20 bieži izmantotie web dizaina noteikumi un pievienoja īsu skaidrojumu katram, lai ikviens varētu ātri tos apskatīt, ja rodas neskaidrības. Ja jums ir klients, kam tiešām ir vajadzīgs crash kurss web dizaina žargonā, kopīgojiet šo rakstu ar viņiem.
“Animācija”
Tīmekļa dizaina tehnika pievieno kustību uz ekrāna elementiem vizualizēt izmaiņas vai uz piesaistīt lietotāju uzmanību.
Animācijas ir jaudīgākas par pārejām, jo tie var iet cauri daudzām dažādām valstīm starp sākuma un beigu punktiem, tāpēc tos var izmantot sarežģītākas sekas.
“Breadcrumb”
A navigācijas veids kas informē lietotājus par to pašreizējā atrašanās vieta vietnē.
Breadcrumbs satur ceļš uz kuru pašreizējā lapa ir pieejama no mājas lapas, parasti formātā Sākums / Kategorija / Lapa. Katrs ceļa elements ir arī klikšķināms lai lietotāji varētu ātri pārvietoties vietnes hierarhijā. Breadcrumbs parasti tiek rādīti katras lapas augšpusē.
“Nekārtība”
Tīmekļa dizaina kļūda, indikators a slikti izstrādāta lapa.
Par dizaineru runājam par pārblīvētu lapu pārāk daudz informācijas tajā pašā lapā, nepievienojot pietiekami daudz baltās telpas un pareizi strukturējot saturu. Pārblīvētas lapas ir zema lasāmība, un kaitēt lietotāju pieredzei.
“Krāsu shēma”
A harmonizējošo krāsu kolekcija izmanto, lai izveidotu a atpazīstama zīmola identitāte.
Parasti ir tāda pati krāsu shēma izmanto konsekventi visā zīmola tīmekļa vietnē, mobilajā lietotnē, logotipā un mārketinga materiālos. Krāsu shēmu var veidot atbilstoši dažādiem principiem, ir monohromatiskas, analogas, papildinošas, triādes un citas krāsu shēmas.
“Kontrasts”
Dizaina tehnika uzsvērt atšķirības starp elementiem, kuriem ir atšķirīga loma vai nozīme.
Lietošana papildu krāsas (Pretēji krāsu ritenim) ir visizplatītākais veids, kā izteikt kontrastu vizuālās atšķirības formu, stilu, tipogrāfiju vai lapu elementu izkārtojumu, ko vēlamies atšķirt, var sasniegt arī kontrastējošu efektu.
“Tukša valsts”
Konkrēta tīmekļa vietnes vai lietojumprogrammas stāvoklis, kad ir vēl nav satura konkrētā lapā, tomēr dizaina elementi ir jau ir viņu vietā.
Pirmās lietošanas stāvokļi, piemēram, tukši profili, ir tipiski tukšo valsts lapu piemēri. Tām ir nepieciešamas īpašas projektēšanas metodes (piemēram, uz dizaina izstrāde) informēt lietotājus par to, kas būtu lapā, un mudināt viņus veikt noteiktas darbības.
“Fiksēts izkārtojums”
A izkārtojuma veids kurā vietne un tās elementi izmantot tādu pašu platumu visās rezolūcijās, statiskās vērtībās (parasti pikseļi).
Tradicionālais veids, kā veidot tīmekļa vietnes. Reti izvēlas jaunākas tīmekļa vietnes, jo vietnes ar fiksētiem izkārtojumiem ir grūti izmantojamas (lasāmas) mobilajos ekrānos. Lai saglabātu piekļuvi mobilajiem lietotājiem, daudzas fiksētas izkārtojuma vietnes izmanto a sekundārā mobilā vietne.
“Plakanais dizains”
A UI dizaina valoda koncentrējas uz tīriem un minimālisma stiliem, un novērš sarežģītas faktūras, modeļus, slīpumus un citus izdomātus efektus, lai palīdzētu lietotājiem labāk koncentrēties uz saturu.
Plakanais dizains ir kritizēts par lietojamības problēmām, kas izriet no Trīsdimensiju trūkums. Vairāk nobriedušu Plakanās 2.0 dizaina valodas, piemēram, Google Materiālu dizains, ir parādījušies kā atbilde, un pievienoja nelielu dziļumu atpakaļ uz plakanu dizainu.
“Šķidruma izkārtojums”
A izkārtojuma veids to izmanto relatīvās vienības noteikt vietas un tā elementu platumu.
Visbiežāk izmantotās šķidruma izkārtojumu relatīvās vienības ir procentos, bet ems un rems var izmantot arī. Šķidruma izkārtojums mainīt izmērus (stiepjas un saraujas) mainās skata loga platums. Atšķirībā no atsaucīgiem izkārtojumiem, šķidruma izkārtojums neizmanto multivides vaicājumus. To sauc arī par šķidruma izkārtojums.
“Reizes”
Ekrāna redzamās daļas apakšējā daļa.
Termiņš “virs reizes” attiecas uz tīmekļa lapas daļu, ko apmeklētāji var redzēt nekādas darbības, kamēr “zem reizes” attiecas uz pārējo lapu, ko lietotāji var izmantot sasniegt tikai, mijiedarbojoties ar vietni - parasti ritinot vai swiping (mobilajā ierīcē).
Ir ieteicams izvietot zīmola elementi (piem., logotips), navigācija uz vietas, un vilinošs saturs virs lapas, lai lietotāji ātri saprastu vietnes mērķi un būtu ieinteresēti pārējā satura daļā.
“Graciozs degradācija”
Tīmekļa dizaina stratēģija ietver visas uzlabotās funkcijas pēc noklusējuma vietnē, pēc tam vēlāk noņem vai vienkāršo lietas, kas nedarbojas vecākās pārlūkprogrammās, mazāk spējīgās ierīcēs vai mazākā joslas platumā.
Koncentrējas vairāk par izskatu nekā saturs. Mobilajā laikmetā pakāpeniska uzlabošana ir kļuvusi par galveno tīmekļa vietņu dizaina stratēģiju jaunām vietām, graciozs degradācija galvenokārt tiek izmantota vecākas vai senākas vietas.
“Hero attēls”
Liela izmēra attēla reklāmkarogs novietots virs reizes.
Varoņu attēli ir augstas kvalitātes, parasti pilna platuma attēli, kas attiecas uz vietnes saturu. Papildus tiem parasti ir īss (vienas vai divu rindu) teksts kas nodod ziņu lietotājiem, un a aicinājums rīkoties kas aicina tos veikt noteiktu darbību, piemēram, iepirkties vai pierakstīties vietnē.
“Galvenā lapa”
Sākotnēji jebkurā lapā, kur tiešsaistes apmeklētājs ienāk vietnē. Nesen šo terminu drīzāk izmanto atsevišķai lapai, kas paredzēta a konkrētu uzņēmējdarbības mērķi.
Piemēram, ja tīmekļa lietotāji seko reklāmkaroga reklāmai, viņi bieži nonāk galvenajā lapā, kas aicina tos iegādāties attiecīgo produktu. Galvenās lapas ar a viens fokuss un a skaidrs aicinājums rīkoties augstākiem konversijas rādītājiem.
“Lazy Loading”
Metode attēlu un citu statisku satura, piemēram, video, ielādēšanai tikai neilgi pirms to iegūt redzamu lietotājam.
Ja tīmekļa vietne izmanto slinks, vispirms tiek ielādēti tikai attēli, kas atrodas virs pārsega, pārējie tiek ielādēti tikai tad, ja lietotājs ritina lapu. Bieži tiek izmantots atsaucīgā un mobilā dizainā ietaupa resursus. Piemēram, Google AMP paātrina mobilās vietnes slinks iekraušanas statiskie resursi pēc noklusējuma.
“Multivides vaicājums”
CSS funkcija, kas padara atsaucīgs web dizains iespējams, ļaujot dizaineriem izveidot dažādiem ierīces izmēriem (platums un / vai augstums), orientācijas (ainava vai portrets) un apdrukājamo materiālu veidi (drukāšana, ekrāns utt.).
Parasti atsaucīgas vietnes ir atsevišķi izkārtojumi galddatoriem, planšetdatoriem un mobilajiem ekrāniem pārtraukumiem starp tām ir definē mediju vaicājumi pievienots CSS.
“Progresīvais uzlabojums”
Pirmā tīmekļa dizaina stratēģija pievieno tikai pamatelementus vietnei, kas darbojas jebkurā pārlūkprogrammā, joslas platumā un ierīcē. Uzlabotas front-end funkcijas (stili un interaktivitāte) ir ielādēts slāņos pēc tam.
Progresīvs uzlabojums pirmām kārtām koncentrējas uz saturu, rezultāti vietnēs, kas ir pieejams katram lietotājam, tāpēc tas ir galvenais veids, kā veidot tīmekļa vietnes mobilajā laikmetā (nevis graciozi degradācijai).
“Reaģējošs dizains”
Tīmekļa dizaina pieeja, lai izveidotu tīmekļa vietnes pielāgoties izmēriem dažādu tipu ierīces (visbiežāk mobilās, planšetdatora un darbvirsmas), izstrādājot dažādi izkārtojumi un citi stili (piemēram, tipogrāfija, attēla izmērs).
Reaģējošs dizains izmanto dažādas metodes, piemēram, relatīvās vienības, elastīgi režģi, un mediju vaicājumi lai kalpotu katram lietotājam ar izmantojamu, lasāmu un pieejamu saturu. Lielākā daļa mūsdienu tīmekļa vietņu izmanto atsaucīgu dizainu.
“Skeuomorfisms”
UI dizaina valoda, kas izmanto iepazīšanās princips, un koncentrējas uz dizaina elementu izveidi līdzinās to reālās pasaules ekvivalentam.
Piemēram, pogas, kas izskatās kā reālās dzīves pogas, izmantojot efektus, piemēram, bevel un emboss, nolaiž ēnas, slīpumi un citi. Pirms plakanā dizaina kļuvis dominējošs, skeuomorisms bija vadošais web dizaina virziens daudzus gadus.
“Pāreja”
Tīmekļa dizaina tehnika vizualizējot vienkāršas izmaiņas kad ekrānā redzamais elements vienmērīgi maina starp sākuma un beigu stāvokli.
Pārejām - atšķirībā no animācijām - nav starpvalstu, tikai a sākuma un beigu punkts, tāpēc tie ir jāizmanto smalkas izmaiņas, piemēram, vizualizēšanai lidot valstis.
“Baltā telpa”
The tukša vieta starp blakus esošiem dizaina elementiem. To sauc arī par negatīva vieta.
Baltā telpa palīdz lietotājiem noslīpēt saturu, un vizuāli norāda satura hierarhiju. Baltā telpa ne vienmēr ir balta, bet izmanto vietnes fona krāsu. Pietiekamas baltās telpas trūkums noved pie a pārblīvēta lapa.
