Tīmekļa dizaina mērogojamība un veidi. Web dizaina mērogojamība un veidi Aplūkojot starpposma rezultātu
Vietnēm ir arī savs skelets. Bet ir bezjēdzīgi jautāt ārstiem par tā īpašībām. Un veterinārārsti arī nav informēti par vietas struktūru. Par to zina tikai maketētāji. No viņiem ir atkarīga nākotnes resursa skeleta struktūra. Un galvenais veids, kā izveidot viņa skeleta kaulus, ir bloku izkārtojums.
Tīmekļa vietnes izkārtojums ir iesācēju amatniecība
Vietnes izkārtojumā ir kaut kas noslēpumains. Bet tas notiek, līdz jūs labāk iepazīstat šo amatu. Mēs sākam savu centību:
Nākamais mājas lapas izstrādes posms pēc tā izkārtojuma izveidošanas ir izkārtojums. Izkārtojuma dizainera uzdevums ir pārnest nākotnes vietnes skeletu uz virtuālo pasauli, izmantojot html kodu un css tabulas. Vienkārši sakot, pārsūtiet resursa izmērus un proporcijas pārlūkprogrammai saprotamā formā.
Izkārtojuma procesā ar html kodu vietnes "skelets" tiek sadalīts daļās. Un izmantojot css ( kaskādes stila lapas) nosaka tā "kaulu" izmēru, krāsu un atrašanās vietu.
Ir vairāki izkārtojuma veidi:
I. Tabulas - agrāk bija galvenais izkārtojuma veids. Tabulas izkārtojumā tags tiek izmantots, lai iestatītu vietnes struktūru
un tā bērnu birkas. Izkārtojums, izmantojot tabulas, ļauj sakārtot visus dizaina elementus vis proporcionālākajā veidā viens pret otru. Bet tajā pašā laikā šis kods izrādās pārāk apjomīgs:
Arī galvenie tabulas koda trūkumi ietver tā ilgo ielādes laiku un slikto satura indeksēšanu meklētājprogrammās.
Uz izklājlapām balstītas lapas saturs netiks parādīts, kamēr netiks ielādēti visi dati. Bloka izkārtojums ļauj parādīt katru ielādēto elementu atsevišķi.
Slikta tabulas lapu indeksācija ir saistīta ar lielām atstarpēm starp teksta blokiem, kas atrodas dažādās tabulas šūnās.
Tagad tabulas versts reti tiek izmantots kā galvenā vietņu izveides metode. Tagad to izmanto tikai tabulas datu strukturēšanai un grafisko attēlu atrašanās vietai.
II. Bloķēt - pašlaik galvenā izkārtojuma metode. Atšķirībā no tabulas bloku izkārtojuma tam ir vairākas priekšrocības:
Elementu stila atdalīšana no html koda;
Spēja pārklāt vienu slāni virs otra - šī spēja ievērojami atvieglo elementu pozicionēšanu.
Labāka meklētājprogrammu indeksēšana;
Liels lapas ielādes ātrums, kas sastāv no savstarpēji neatkarīgiem elementiem;
Galvenais bloku izkārtojuma trūkums ir noteikts “ neskaidrība»Izpratne par tās kodu dažādās pārlūkprogrammās. Tāpēc html lapas bieži vien ir "jāpilnveido", izmantojot īpašus uzlaušanas gadījumus.
Līdz ar bloku izkārtojuma parādīšanos radās tāds jēdziens kā "saderība starp pārlūkprogrammām". Tā kā viena un tā paša elementa attēlojums dažādās pārlūkprogrammās atšķiras, izkārtojuma izstrādātājiem galvenajā html ir jāievieto veseli koda gabali (uzlaušanas).
Uzlaušana ir ļoti specializēta un atrisina nepareiza attēlojuma problēmu tikai vienā pārlūkprogrammā.
Galvenais bloka izkārtojumā izmantotais elements ir tags
... Koda sadaļu, ko atdala šis tags, sauc par slāni. Visi stila lēmumi ir pārvietoti ārpus html koda uz kaskādes stila lapām. Tiem var piekļūt, izmantojot ID vai css klases:
Kā darbojas bloku izkārtojums?
Pirms izkārtojuma uzsākšanas vietnes gatavo psd izkārtojumu grafiskajā redaktorā sagriež blokos (slāņos). Izgrieztie fona attēli tiek ievietoti atsevišķā mapē, kas tiks pievienota katram slānim atsevišķi:
Piemēram, ņemsim vērā šo vietnes izkārtojumu, kas izveidots Photoshop. Pirmkārt, teksta redaktorā, izmantojot div, mēs iestatām nākamā resursa struktūru un katram slānim piešķiram savu ID atlasītāju. Izrādās šāda struktūra:
Tad uz gatavo vietnes struktūru html ar līniju pievienojiet css failu. Tad mēs tam pievienojam katra slāņa stila aprakstu, novietojumu attiecībā pret citiem elementiem un tā izmēriem.
Vairāk par visiem css rekvizītiem varat uzzināt no valodas tehniskās dokumentācijas.
Mūsu vietnes bloka izkārtojuma piemērs pārlūkprogrammas logā izskatās šādi:
Protams, šis piemērs ir tikai vizuāls palīglīdzeklis, lai parādītu, kā darbojas bloku izkārtojums. Patiesais izkārtojums tiek veikts, izmantojot fona attēlus un logotipus, kas iekļauti css. Un arī ar hacku iekļaušanu html un css kodā, lai optimizētu displeju visās pārlūkprogrammās.
Izpētot tīmekļa plašumus, daudzi, iespējams, pamanīs, ka lielākā daļa vietņu ir veidotas, pamatojoties uz režģi. Elementi vai bloki šādās vietnēs lapā atrodas nevis haotiski, kā tas bija pirms vairākiem gadiem, bet noteiktā secībā un strukturēti (dažreiz tas ir nemanāms no pirmā acu uzmetiena). Šīs vietnes ir labi līdzsvarotas un mēdz izskatīties tīras un sakoptas. Liels nopelns par šo veiklību pienākas režģis, kas ir dizaina pamatā un nodrošina lietotājam skaidru, neizkropļotu vietnes struktūru.
Lai gan režģi mēdz attēlot vienkāršus horizontālu un vertikālu līniju krustojumus noteiktos intervālos, daudzi dizaineri tos izmanto, lai dekorētu un akcentētu acīmredzamas ģeometriskas formas un vizuālos ceļus. Mēs varam redzēt šos ceļus un formas portfeļa vietnēs, galerijās, emuāros un citos radošos projektos. Tas nav pārsteidzoši, jo tīklam ir vairākas noderīgas īpašības un priekšrocības, piemēram:
Vizuālu ceļu izveide lietotāju vadīšanai
Dažādu komponentu apvienošana vienotā veselumā
Informācijas kārtošana
Un, protams, siets ir ideāls, lai parādītu taisnu līniju skaistumu. Zemāk mēs esam sagatavojuši vietnes, kurās režģis ir vairāk nekā tikai pamata dizains.
Secinājums
Kā jau minēts, režģis ir neatņemama dizaina sastāvdaļa un viegli pārvērš haosu kārtībā, un vietņu dizainā, tāpat kā nekur citur, šī iespēja ir patiešām svarīga. Lielākā daļa lietotāju vēlas informāciju ātri un viegli, un nav labāka veida kā pasniegt viņiem skaidru un labi organizētu struktūru.
Nē, tas vispār nenozīmē, ka vietnes izskatam jābūt lineāram un vienkāršam. Dažreiz pat vienkāršas ģeometriskas formas, prasmīgi "atšķaidītas" ar krāsām, attēliem un grafiku (atcerieties plakanu dizainu), var būt patiešām pievilcīgas. Ko tu domā? Vai tik skaidrs sadalījums blokos nešķiet pievilcīgs?
Labdien, biedri lasītāj!
Kāpēc mums ir vajadzīgas galvenās lapas 10 blokos, ja pirmajā ekrānā ir svarīga informācija un jūs varat aprobežoties ar sadaļām "Par mums", "Pakalpojumi", "Cenas" un "Kontakti"? Atbilde ir vienkārša: uz piesaistīt uzmanību pircēju un motivēt uzsākt attiecības ar produktu unpamudināt iegādāties produktu.
Visbiežāk lietots apmeklētāju piesaistes paņēmieni produkta iegādes procesā ir AIDA(no angļu valodas Attention-Interest-Desire-Action) un PMPHS(Sāpes-vairāk sāpju-cerību risinājums). Vadoties pēc šīm metodēm, tiek veidota galvenās lapas loģiskā struktūra un tiek noteikti bloki, kas atradīsies nolaišanās vietā.
Es esmu apkopojis jums 20 ilustratīvi bloku piemēri kas veic noteiktu informatīvu funkciju. Piemēri noder, ja jūs un atvieglot komunikāciju ar jūsu galvenās lapas dizaineru un dizaineru.
Šajā rakstā jūs iepazīsities ar pirmo pusi - 10 blokiem. Atlikušajiem 10 piemēriem gaidiet nākamo rakstu augustā.
Bloķēt par jūsu uzņēmuma sasniegumiem / priekšrocībām;
Bloķēt par uzņēmuma darbiniekiem;
Bloķēt informāciju par uzņēmuma pakalpojumiem / nodaļām;
Bloķēt par partneriem / klientiem;
CTA (aicinājums uz darbību, aicinājums uz darbību);
Bloķēt klienta priekšrocības no jūsu produkta izmantošanas ("Kāpēc mums?");
Bloķēt par pakalpojuma sniegšanas procesu (piegāde, darījuma veikšanas metode);
Bloķēt kalkulatoru;
Bloķēt ar īpašo piedāvājumu + laika ierobežotājs;
Bloķēt ar dāvanu + nosacījumi dāvanas saņemšanai;
Bloķēt ar uzņēmuma atrašanās vietas karti ("Kā tur nokļūt");
Bloķēt ar kontaktinformāciju;
Bloku salīdzināšanas tabula;
Bloka identifikācija "Kam?";
Bloķēt FAQ.
* Bloku numerācija ir aptuvena - bloku secība galvenajā lapā ir atkarīga no nišas. Jūs varat noteikt bloku secību, izmantojot tos pašus Yandex Metrics rīkus (ritinošā karte, siltuma karte), kas jums palīdzēs šajā rakstā.
Satur galveno informāciju galvenās lapas apmeklētājam, jūsu uzņēmuma USP. Vēlams, lai arī šī informācija būtu konkurētspējīga. Atkarībā no nišas šāda informācija var būt: produkta cena (no 488 rubļiem par 1 gabalu), piegādes laiks (piegāde 2 dienās), ražošanas vieta (tieši no Vācijas). jūs varat uzzināt vairāk no iepriekšējā raksta.
Piemērots: vairumtirdzniecības tēmas; nišas, kurās pircējs nav pietiekami informēts par produkta (galvenokārt produkta) priekšrocībām.
Bloks var būt atbilde uz pircēja jautājumu "Kāpēc tas ir tik dārgi?", Ja tajā ir detalizēti produkta īpašību apraksti. Tas ir, lai potenciālā klienta galvā radītu skaidrāku priekšstatu par vēlmes objektu.
Piemērots: sarežģītu pakalpojumu apraksti; nišas atpūtas organizēšanai; preču paketes apraksti.
Ja bloks par produkta īpašībām pilnībā parāda produktu, tad bloks par sastāvdaļām sadala produktu (produktu vai pakalpojumu) terminos.
4. Bloķēt garantijas (trīskāršas)
Piemērots: jebkura galvenā lapa.
Visbiežāk tas atrodas pēc bloka ar produkta izmaksām. Tas ir veidots, pamatojoties uz mērķauditorijas iebildumiem, un tos aizver, demonstrējot pakalpojuma priekšrocības jūsu uzņēmumā.
5. Bloķēt sasniegumus / ieguvumus
Piemērots: jebkura galvenā lapa; zīmola produkts no labi pazīstama uzņēmuma; īpaši svarīgi ļoti konkurētspējīgā nišā.
Īpaši svarīgi uzņēmumiem ļoti konkurētspējīgā nišā. Piemēram, ja vairāki uzņēmumi piedāvā vienu un to pašu produktu, tad tas, kurš nodrošina visērtākos darījuma nosacījumus un parāda sava uzņēmuma darba kompetenci (kopš kura gada uzņēmums pastāv, īstenoto projektu skaits, atlaides un dāvanas pastāvīgajiem klientiem, tirdzniecības vietu skaits utt.).
6. Bloks par uzņēmuma darbiniekiem
Piemērots: nišas pakalpojumu sniegšanā
Lietošana ir ieteicama situācijā, kad tas nav svarīgi KAS pircējs saņems, un KĀ rezultāts tiks sasniegts.
7. Bloks par pakalpojumiem / uzņēmuma nodaļām
Piemērots: sarežģītas pakalpojumu tēmas; galvenās lapas ar vairākiem produktiem vienā lietošanas apgabalā.
8. Bloķēt partnerus
Piemērots: jebkura galvenā lapa.
Bloks palielina apmeklētāja uzticību, ja izmantojat slavenu klientu logotipus.
Piemērots: informācijas bizness; pakalpojumu nozare; nišas, kurās procesam ir nozīme (KĀ) iegūstot rezultātu.
Lielisks papildinājums lietām - vizuāla demonstrācija BIJA / IR BIJIS, kā arī infografikas un drukas ekrāni ar statistiku.
Nišas, kurās ir svarīga demonstrācija:
Turpinājums sekos…
Šodien mēs apspriedām pirmos 10 galvenās lapas blokus, tuvākajā laikā publicēsim vairāk - sekojiet līdzi!
Jaunais gads ir nesis daudz jaunu tehnoloģiju un tendenču, taču, visticamāk, dominēs tendences, kas parādījušās līdz 2015. gada beigām. Vairāk video, vertikālu rakstu risinājumi, materiālu iedvesmotas idejas un stilīgi slaidi. Jārēķinās, ka šo metožu popularitāte pieaugs. Lielāko daļu jauno koncepciju nav tik grūti īstenot. Zemāk ir 11 tīmekļa dizaina tendences (un daudzas lieliskas piemēru vietnes), ar kurām mēs saskarsimies 2016. Šo dizainparaugu paraugi patiešām palīdzēs jums izprast tendenci.
Vietne ir pievilcīga ar animētiem foniem, interaktīviem efektiem
Skaistāka tipogrāfija
Vienkāršotas saskarnes pavēra ceļu idejai par skaistu tipogrāfiju (kā arī viegli lietojamiem tīmekļa rīkiem, piemēram, Google Fonts un Adobe Typekit-attīstības iespēju paplašināšana ar milzīgām tiešsaistes bibliotēkām). Uzrakstu (lasāmā un viegli saprotamā) vienkāršība jēdzienā "kaligrāfija" atbrīvo vietu citiem elementiem. Jums vajadzētu mēģināt saistīt lasāmo fontu un izklaidējošo iespēju jaunumu.
lauku stila restorānu vietne: izmērīta un nesteidzīga, bez satraukuma (āķīgiem kontrastiem) ar labi izvēlētām krāsām un fontiem. Lauku stils (zemniecisks stils) rada dabas tuvuma sajūtu. Ar putniem saistītais zīmols tiek atspoguļots grafiski (ilustrācijas, fona zīmējumi). Kopumā šī ir daļa no identitātes - "Vanags un vista", kā veiksmīgu medību simbols
Ilustrācijas un zīmējumi
Ilustrācijas ar zīmējumiem piešķir dizainam radošu iztēli un jautru noskaņu. Darbojas visu veidu vietnēs (ne tikai bērniem). “Ilustrētā” stila popularitāte ir pieaugusi arī attiecībā uz nelielu elementu (ikonu utt.) Noformējumu vietnes dizainā.
Šajā tendencē īpaši patīkami ir tas, ka ilustrācijas vietnei piešķir personību. Tā kā ilustrācijas vai "skices ikonas", visticamāk, ir zīmētas ar rokām, vizuāli un pēc vispārējas sajūtas, šāda vietne lietotājiem šķiet personiskāka. No tendences attīstības viedokļa, kas vērsts uz saziņas efektivitātes palielināšanu ar lietotāju, šajā ceļā vēl ir daudz darāmā.
Vietnē ir jaukas mikroitrācijas un ilustrācijas. un visas vietnes "Baby-style" pārvērš dizainu par spēli
Iepriekš internetā bija plaši izplatīts tabulas izkārtojuma veids, kuram tas ir veltīts. Tomēr laika gaitā šī pieeja vietnes struktūras izveidošanai kļuva novecojusi un tika aizstāta ar bloka izkārtojumu.
Bloka un tabulas izkārtojuma atšķirības
Ja tabulas izkārtojums nozīmē, ka lapas saturs atrodas taga iekšpusē
, tad bloku izkārtojuma koncepcija ir balstīta uz universālo tagu aktīvu izmantošanu
kurā ir ievietots saturs, ieskaitot citus tagus.
Bloku izkārtojumam nav tabulas izkārtojuma trūkumu - meklētājprogrammas to labāk indeksē, tā kods nav tik plašs, un bloki
, kurus tik ļoti mīl saukt par “slāņiem”, sākotnēji tika domāti kā universāli, tas ir, “visam”
ir tabula, kas jāizmanto, lai parādītu tabulas datus, un nekas vairāk.
Vienīgais ievērojamais bloku izkārtojuma trūkums ir tas, ka tajā izveidotās vietnes pārlūkprogrammās var parādīt dažādos veidos. Lai no tā izvairītos, jums ir jāizveido izkārtojums "pārrobežu pārlūkprogramma", tas ir, vienādi parādīts jebkurā pārlūkprogrammā.
Bloku izkārtojuma būtība
Tīmekļa vietnes izkārtojums tiek izveidots grafiskajā redaktorā: tiek atzīmēts, kurā lapas apgabalā (galvene, apakšdaļa, sānjosla, galvenais saturs) atradīsies un cik daudz vietas jāuzņem, tiek sagatavoti attēli un foni.
Katra lapas daļa ir ievietota savā blokā
: vietnes augšdaļa - pirmajā, izvēlne - otrajā, saturs - trešajā utt. Katrs bloks ir piepildīts ar saturu, izmantojot HTML, kā arī pozicionēts un veidots, izmantojot CSS marķējumu.
Galīgais HTML dokuments ir bloku kopums
ar saturu iekšā. Dizains bieži atrodams atsevišķā CSS failā, kas savienots ar lapu ar tagu. vai vismaz traukā
