GRĮŽTI ATGAL
Sužinokite laidų kūrimo pagrindus, remdamiesi 15 įkvepiančių pavyzdžių. Įvaldykite visus technikos ir geriausios praktikos pavyzdžius, kuriuos pateikia šios srities ekspertai.
Tinklalapis dizaineriai, sveiki atvykę! Įžengėte į sritį, kurioje jūsų skaitmeninės idėjos pradeda įgauti formą, o jūsų svetainė pradeda savo kelionę nuo minties iki realybės. Jei kada nors norėjote turėti slaptą įrankį, kuris įneštų aiškumo į jūsų chaotišką kūrybinį mąstymą, tuomet jūsų strategija turėtų būti "wireframing". Nuo koncepcinių brėžinių pavertimo apčiuopiamais projektais, wireframes padeda paversti jūsų žiniatinklio svetainę projektavimo procesas sklandžiai ir produktyviai. Ateityje pasinersime į viską, kas susiję su "vieliniu karkasu", ir leisimės į jaudinančią ekspediciją po 15 įkvepiančių pavyzdžių. vielinių modelių pavyzdžiai.
Ponios ir ponai, ar esate pasirengę gilintis? Pradėkime! Taigi, kas tiksliai yra vielinis karkasas? Paprasčiausiai "wireframe" yra pagrindinis vaizdinis vadovas, kuriame išdėstyta jūsų tinklalapio struktūra. mobilioji programėlė prieš pridedant bet kokius estetinius elementus. Tai tarsi architektūrinis jūsų svetainės ar programos projektas.
Pagrindiniai puslapių maketai su pagrindinių komponentų, pavyzdžiui, antraščių, turinio sričių ir navigacijos sistemų, laikikliais labai panašūs į skeletą po oda arba groteles už augančio vynmedžio; patys savaime ne visai gražūs, bet visiškai pagrįsti kažką nuostabaus, kas dar tik formuosis. Nesvarbu, ar jie mažo tikroviškumo vielinis karkasas pavyzdžių ar didelės raiškos atvaizdų - jų pagrindinė paskirtis išlieka ta pati: pagerinti naudotojo patirtį nustatant funkcijų išdėstymą ir ryšius tarp skirtingų ekrano elementų dar prieš pradedant kurti vartotojo sąsają.
Be paprastų ekrano išdėstymo konfigūracijų, vielinės schemos yra praktinės veiksmingumo priemonės, nes skatina grįžtamojo ryšio ciklus ankstyvoje kūrimo stadijoje. projektavimo procesas tarp suinteresuotųjų šalių. Jie leidžia anksti aptikti problemas, kad nereikėtų gaišti brangių valandų sprendžiant konstrukcines problemas po to, kai buvo sukurta blizganti estetika. Sutaupytas laikas iš tiesų yra uždirbti pinigai!
Laikykitės, nes mes atversime daugiau stulbinančių aspektų apie šį kertinį žiniatinklio dizainas-galingas, bet subtilus laidų kūrimo menas.
"Wireframes" turi didžiulį potencialą padidinti projektas. Nors dažnai į juos nekreipiama dėmesio, laidų modeliai yra labai svarbūs statybiniai blokai, kurie skatina Viela. Štai keletas įtikinamų svetainės ar programėlės dizaino karkaso kūrimo privalumų:
Tikriausiai didžiausias privalumas yra tas, kad kuriant laidinį modelį galima įsivaizduoti struktūrą ir išdėstymą, nesigilinant į sudėtingas detales. Nubraižę vielinių schemų pavyzdį, greitai pastebėsite elementų išdėstymą ir suprasite, kaip naudotojai sąveikautų su sąsajomis.
Gerai parengtas vielinio karkaso pavyzdys pašalina dviprasmybes ir skatina aiškų suinteresuotųjų šalių - dizainerių, kūrėjų ir klientų - bendravimą. Karkaso pavyzdžiai užtikrina, kad visi vienodai suprastų projekto funkcionalumą, todėl vėliau sumažėja neatitikimų.
Trečia, UX vielinio karkaso pavyzdžiai atveria efektyvius kelius patogumo klausimams patikrinti ankstyvuoju projektavimo ciklo etapu. Sudarydami naudotojų kelionių žemėlapius mažo tikroviškumo vielinis karkasas pavyzdžių, galite nustatyti sritis, kurias reikia tobulinti, prieš investuodami laiką ir išteklius į didelio tikslumo dizainą.
Kai kūrėjai turi pavyzdinį maketą, pavyzdžiui, vielinį karkasą, tai pagreitina jų kodavimo procesą, nes jie turi tikslią informaciją apie tai, ką reikia kurti - tai svarbus žingsnis siekiant padidinti produktyvumą, nes iš kūrimo etapo išbraukiamos nereikalingos valandos.
Iš tiesų, pasinaudoję šiais privalumais ne tik pagerinsite savo darbo eigą, bet ir sukursite intuityvesnius dizainus, o tai gerokai padidins klientų pasitenkinimo rodiklius.
Apibendrinant, nors iš pradžių gali kilti noras praleisti šį etapą dėl griežtų terminų ar riboto biudžeto, verta atsižvelgti į šiuos privalumus, kai vertinate, ar vielinio karkaso kūrimas turėtų tapti neatsiejama kito projekto dalimi.
Sukurti puikų vielinį karkasą yra fantastiškas atspirties taškas bet kokiam skaitmeniniam produktas, tačiau tinkamo dydžio specifikacijos gali būti labai svarbios šiame procese. Kai pradedate kurti laidų modelius, štai kaip suprasti dydžio gaires ir jų reikšmę gerai suprojektuotiems laidų modeliams.
Ekrano dydžių supratimas: Pradėdami savo laidų karkaso projektą, ekrano dydžiai turėtų atspindėti galutinio naudotojo patirtį - ar tai būtų mobilusis įrenginys, ar stacionarus kompiuteris. ZDNET atlikto tyrimo duomenimis, kadangi 52% pasaulinio interneto srauto ateina iš mobilieji įrenginiai. Todėl labai svarbu kurti dizainą mažesniems ir didesniems ekranams.
Lankstus dizaino metodas: Kadangi ekranų dydžių įvairovė yra labai plati. rinka, tampa labai svarbu taikyti lankstų dizaino metodą, vadinamą "reaguojančiu dizainu". Šis metodas leidžia dizaino išdėstymą natūraliai pritaikyti prie skirtingų ekrano dydžių ir taip pagerinti bendrą UX (naudotojo patirtį).
Mastelio keitimas Svarstymas: Visada atminkite, kad sąsaja turi išlikti vizualiai patraukli ir funkcionali visose platformose, o jos mastelio didinimas ir mažinimas turi būti sklandus.
Standartinis vielinių modelių dydis: Siekiant nuoseklumo visose esamose platformose, dizaineriai dažnai naudoja tokius standartinius matmenis: Mobilusis telefonas - mažiausiai 320x480px; planšetinis kompiuteris - mažiausiai 768x1024px; stalinis kompiuteris - 1366x768px.
Kai jūsų įgūdžiai konstruojant vielinių modelių pavyzdžiai įvairiuose matmenyse, šios gairės padės pagrindą kurti universalius dizainus, kurie būtų optimaliai pateikiami nepriklausomai nuo įvairių prietaisų tipų ir auditorijos naudojamų ekrano nustatymų.
Perėjimas prie pažangių terminų, pvz. didelio tikslumo vielinis karkasas pavyzdžių pavyzdžiai" arba susijusių temų, pvz., "žiniatinklio prototipas pavyzdys", visada prisiminkite, kad tikslus matmenų tikslumas skiria vertingas formas nuo paprastų eskizinių pavyzdžių.
Šių apdairaus dydžio parametrų pritaikymas vaidina svarbų vaidmenį, kai nusprendžiate sukurti svetainę ar programėlės karkasas - atveria kelią į pagirtiną dizainą, patrauklų ne tik estetiniu, bet ir funkciniu požiūriu. Dabar eikite į priekį ir kurkite elegantiškus karkasus, tiksliai suderintus su šiais išmatavimais!
Įvaldžius šiuos pagrindus, sudėtingesnių pagrindų, pavyzdžiui, reaguojančio dizaino, valdymas taps be didesnių sunkumų, todėl "tinklalapio karkaso kūrimas" atrodys nesudėtingas ir taps sėkmingais projektais!
Laidų schemos kūrimo procesas nėra toks bauginantis, kaip gali pasirodyti iš pradžių. Atlikę aiškius veiksmus ir siekdami tikslingų tikslų, galite sukurti veiksmingą svetainės ar programėlės karkasą. Toliau pateikiau penkis pagrindinius žingsnius, kurie padės jums kurti mobiliosios programėlės vielinis karkasas procesas.
Kad sukurtumėte įspūdingą vielinį modelį, pradėkite nuo visiškai aiškių verslo tikslų. Konkrečių tikslų nustatymas padeda pritaikyti karkaso dizainą šiems ketinimams įgyvendinti.
- Ar tai yra pardavimų konversija?
- Vartotojo įsitraukimas?
- Ar informacijos sklaida?
Apibrėžus šiuos tikslus, jais grindžiami visi būsimi sprendimai, priimami kuriant tinklalapio struktūrą.
Išsikėlę verslo tikslus, nustatykite pagrindinę svetainės funkciją.
Paklauskite savęs:
- Ar tai bus platforma, skirta daugiausia e. prekyba?
- Informatyvus tinklaraštis, kuriame skelbiamas aukštos kokybės turinys?
- O gal bendruomenės sąveiką skatinanti tinklo svetainė?
Supratimas apie pagrindinį tikslą padeda nustatyti, kaip komponentai išdėstomi puslapiuose, ir nurodo, kurie elementai turėtų būti svarbiausi jūsų vielinių modelių pavyzdžiai.
Rankomis braižydami paprastas laidų schemas, ankstesnius sprendimus dėl funkcijos ir tikslo vizualiai perteikite apčiuopiamose schemose.
Kol kas nesijaudinkite dėl estetikos - eskizų pavyzdžiai yra tik apytiksliai brėžiniai, skirti pradinei smegenų šturmo diskusijai, o ne nušlifuoti produktai.
Sutelkite dėmesį į tai, kur išdėstyti pagrindinius elementus, pvz:
- Navigacijos meniu,
- Kvietimo veikti mygtukai
- Turinio blokai kiekviename puslapyje.
Šiame etape vaizdas iš paukščio skrydžio suteikia daugiau laisvės greitai keisti dizainą be techninių apribojimų, kurie būdingi skaitmeninėms eskizavimo priemonėms.
Kai eskizai stabilizuosis, perkelkite juos į didesnės raiškos skaitmeninius formatus, naudodami įvairias turimas programinės įrangos galimybes (kai kurias nemokamas aptarsime vėliau!).
Skaitmeninis projektavimas suteikia erdvės detalėms, todėl galima tiksliai suderinti tarpus, tipografijos pasirinkimus, formos laukus ir t. t. - taip iš esmės formuojama bendra UX (naudotojo patirties) kryptis, kuri matoma daugelyje UX karkaso pavyzdžių.
Šiame "žemo tikslumo" etape jūsų žiniatinklio prototipo pavyzdyje aiškumas yra svarbesnis už dekoratyvumą, todėl sutelkite dėmesį tik į funkcionalumą ir išdėstymo organizavimą, o ne į spalvų schemą ar grafiką.
Paskutiniame etape atliekami paskutiniai darbai prieš persodinant skeleto kontūrus. mažo tikroviškumo vielinis karkasas pavyzdžių į visavertį žiniatinklio prototipo pavyzdį.
Apsvarstykite galimybę investuoti laiko į įvairių interaktyvumo lygių, kuriais siekiama tiksliai imituoti realaus pasaulio naudotojų patirtį, tyrinėjimą - "didelio tikslumo" prototipai suteikia realias peržiūras, padedančias bandytojams geriau įsivaizduoti dizainą, todėl pagerėja grįžtamojo ryšio kaupimas! Po iteracinio tobulinimo etapų, pagrįstų surinktomis įžvalgomis, voila - dabar turite auksinius bilietus.
"Wireframing" - tai strateginis požiūris į žiniatinklio dizainas. Dizaineriams jis suteikia pagrindinę struktūrą, kuria galima remtis kuriant vaizdinį maketą. Pasinerkime į keletą vielinių schemų pavyzdžių, kurie gali įkvėpti jūsų dizainą.
Rankomis braižyti brėžiniai tradiciškai naudojami pradiniuose svetainių planavimo ir kūrimo etapuose. Tvirtai tikiu, kad kartais geriausios idėjos prasideda nuo paprasto popieriaus ir rašiklio. Taigi nevenkite šio greito ir ekonomiško metodo.
Pereinant prie skaitmeninių platformų, mažo tikslumo (angl. Lo-Fi) vieliniai modeliai suteikia aiškų vizualinį vaizdą, tačiau be sudėtingų detalių.
1. "Lo-Fi" skaitmeniniuose brėžiniuose daugiausia dėmesio skiriama funkcionalumui, o ne estetikai - pakankamai detalių, kad suprastumėte išdėstymą, bet ne per daug, kad susikauptumėte ties vizualiniais ar prekės ženklo elementais.
2. Šie projektai yra labai svarbūs nustatant galimus dizaino trūkumus ankstyvuoju etapu ir priimant sprendimus dėl bendrų srauto diagramų ar turinio išdėstymo strategijų, t. y. kur tekstas, o kur paveikslėliai ir pan.
Didelė ištikimybė(Hi-Fi) svetainių instaliacija pradedama naudoti, kai į savo planus įtraukiame daugiau gilumo - tiek vizualiai, tiek interaktyviai.
Galiausiai, atkreipę dėmesį į įgyvendintus projektus, taip pat smarkiai patobulinsite savo žinias apie veiksmingus projektavimo metodus. Taikant šiuos realaus gyvenimo pavyzdžius, teorinės žinios perkeliamos į praktinio naudojimo atvejus, taip suteikiant pradedantiems specialistams realias mokymosi galimybes, o naujokams - ypač tvirtai įtvirtinant šias sąvokas ir taip skatinant inovacijas. projektavimo procesai.
1.Kiekvienas sėkmingas projektas kažkur prasideda - studijuojant išsamius atvejų tyrimus galima atskleisti, kaip pradinės idėjos (pvz. vielinių modelių pavyzdžiai) virsta galutiniais produktais, padedančiais dizaineriams, tokiems kaip jūs, geriau suprasti pramonės praktiką, taip gerokai pagreitinant įgūdžių įgijimo greitį ir sparčiai ugdant žaidimus keičiančius gebėjimus.
Taigi nesvarbu, ar tai būtų pirmą kartą debiutuojantys dirigentai, rengiantys savo debiutinę interneto simfoniją, ar patyrę meistrai, ieškantys naujų įkvėpimų; šie akis atveriantys atvejai, kruopščiai kuruojami, užtikrina absoliučią naudą visame pasaulyje! Laikas pasiimti šiuos įrankius ir pradėti kurti neišdildomus šedevrus, apimančius patrauklią patirtį!
Ir visada atminkite - aiškumo užtikrinimas, pradedant nuo paprasto, o paskui palaipsniui sistemingai didinant sudėtingumo lygius, užtikrina ilgalaikę sėkmę kūrybinėje veikloje, iš esmės garantuojančią nuolatinius puikius rezultatus, kaip tai įrodo keletas anksčiau paminėtų puikių pavyzdžių, suteikiančių pradedantiems aspirantams galimybę įveikti neišvengiamus iššūkius, kurie netikėtai iškyla įveikiant klastingus kelius!
Kuriant įtikinamą svetainės karkasas, turite stengtis įtraukti pagrindines sudedamąsias dalis. Teisingas šių elementų supratimas gali gerokai pagerinti galutinio produkto funkcionalumą ir naudotojo patirtį. Panagrinėkime, kas konkrečiai turėtų būti jūsų svetainės karkasas pavyzdys.
Vienas iš esminių bet kurio pavyzdžio laidų schemų elementų yra strateginė vaizdinė hierarchija. Šis svarbus elementas padės naudotojams sklandžiai naudotis svetaine ir užtikrins optimalią naudotojų patirtį. Paprastai svarbiausias turinys pateikiamas puslapio maketo viršuje, o antrinė arba papildoma informacija pateikiama po jo.
Kuriant maršrutų sistemą, pvz., pagrindinius meniu, poraštes ir "duonos trupinius", taip pat reikėtų įtraukti svetainės karkasas. Svetainės navigacija leidžia naudotojams be vargo pereiti per skirtingus svetainės skyrius. Svetainės navigacijos patogumas gali turėti įtakos tam, kaip gerai lankytojai sąveikauja su jūsų svetaine.
Jūsų svetainės karkasas neapsieina be talpyklų, skirtų svarbiausiam turiniui, pavyzdžiui, paveikslėliams, vaizdo įrašams ar tekstams. Šios vietos leidžia dizaineriams ir klientams įsivaizduoti, kurioje vietoje kiekvienas elementas būtų tikrose versijose. tinklalapiai praktiškai.
Pagrindinė šiandieninių ux laidų pavyzdžių tema yra aiškiai apibrėžti veiksmų mygtukai, strategiškai išdėstyti visose reikalingose sankryžose visose kuriamose svetainėse. Raginimo imtis veiksmų mygtukai gali būti įvairūs - nuo paprastų nuorodų "Skaityti daugiau" iki labiau įtraukiančių, pavyzdžiui, "Užsiregistruok dabar!".
Veiksmingai sprendžiant šias svarbias sritis, akcentuojant jas pradiniuose etapuose rengiant planus, galima sukurti interneto prototipų pavyzdžius, kurie pranoksta lūkesčius, nes suteikia puikią patirtį, navigacijos paprastumą ir džiugina intuityviomis sąsajomis.
Pradedant laidų kūrimo projektą, vienas iš svarbių aspektų yra tinkamo įrankio pasirinkimas. svetainės karkasas. Laimei, tiek pradedantiesiems, tiek ekspertams, daug nemokamos programinės įrangos parinkčių siūlo patogias ir intuityvias sąsajas. Šie sprendimai puikiai tinka jūsų idėjoms įgyvendinti be išankstinių finansinių investicijų.
"Adobe" "XD" siūlo patikimą platformą, kurioje vienoje vietoje yra dizaino, prototipų kūrimo ir dalijimosi galimybės. Ypač idealiai tinka kurti mažus ir didelio tikslumo vielinis karkasas ir pavyzdžių, ji supaprastina procesą, todėl galite sutelkti dėmesį į svarbiausių funkcijų, o ne sudėtingų dizaino detalių fiksavimą.
Toliau - "Balsamiq". "Balsamiq" yra žinomas dėl greito laidų braižymo galimybės, todėl naudotojai gali palyginti lengvai braižyti savo idėjas. Joje yra vilkimo ir nuleidimo komponentai, imituojantys piešimo ranka efektą, todėl ji labai patogi pradedantiesiems.
Tiems, kurie mieliau dirba internetu, "Figma" gali būti naudinga. Debesų pagrindu veikianti sistema palengvina bendradarbiavimą realiuoju laiku bet kurioje pasaulio vietoje. "Figma" ne tik leidžia kurti žiniatinklio prototipų pavyzdžius, bet ir pateikia aukštos kokybės vektorinius dizainus.
Galiausiai turime "Sketch". Šiame tik "Mac" kompiuteriams skirtame įrankyje yra iš anksto suprojektuotų elementų, vadinamų "vielinio karkaso šablonų eskizais". Didžiulė "Sketch" "iOS" ir "Android" UX šablonų biblioteka supaprastina programėlių kūrimas užtikrinant dizaino nuoseklumą.
Apibendrinant,
- "Adobe XD": idealiai tinka kurti nedidelio tikslumo brėžinius
- "Balsamiq" : Greitas laidų formavimas naudojant ranka pieštą estetiką
- Figma : puikus pasirinkimas bendradarbiaujančioms komandoms
- "Sketch" : geriausias pasirinkimas tarp programėlių kūrėjų
Kiekvienas vielinio karkaso rinkinys Minėtas įrankis pasižymi savitomis funkcijomis, tinkančiomis įvairių rūšių projektams ir komanda nustatymai. Rinkitės protingai, atsižvelgdami į savo konkrečius poreikius, ir pradėkite laidų kūrimo kelionę!
Kaip naujokas šioje srityje žiniatinklio dizainas, galite paklausti, kokie laidų pavyzdžiai tinka jūsų lygiui. Laimei, yra daugybė pradedantiesiems pritaikytų svetainės karkasas turimų šablonų, kurie padės jums mokytis. Šie iš anksto parengti šablonai gali būti patikimi pavyzdžiai, kuriais galite vadovautis kurdami pradinius laidų modelius.
Norėdamas padėti jums pradėti keliones į šį įdomų pasaulį, norėčiau pristatyti tris žinomus patogių šablonų šaltinius:
Šių platformų prieinamumas pabrėžia jų naudingumą - jos tarnauja kaip praktinės mokymo priemonės ir kartu pateikia daug UX laidų karkasų pavyzdžių. Nors jas sukūrė profesionalai, dėl joms būdingo paprastumo jos veiksmingai tarnauja kaip pradedančiųjų dizainerių pagalbinės priemonės.
Atminkite: Šie šablonai padeda suprasti, kaip veikia svetainė, ir tai padaryti. Kai įgysite pasitikėjimo ir geriau susipažinsite su šia praktika, pamažu pereisite prie sudėtingų dizainų kūrimo savarankiškai.
Nors šios saugyklos yra puiki pradžia, eksperimentavimas taip pat labai svarbus, nes laikui bėgant ugdo įgūdžius. Nebijokite naudotis šiais ištekliais kaip tarpiniais laipteliais ir, kai jau būsite įgiję patirties, išsiveržti į kitas sritis - jūsų būsimi projektai gali tapti išskirtiniais programėlių pavyzdžiais!
Taigi, jau šiandien ieškokite šių galimybių - laikas kurti naujas įdomias idėjas ir perkelti jas į skaitmeninį popierių!
Laikykitės, nes kitą kartą gilinsimės į tai, kaip svetainės karkasas gerokai pagerina projektavimo procesas.
Praėjo tie laikai, kai pasinerdavote į projektą neturėdami aiškios kelių žemėlapis. Šiandien prieš pradedant bet kokį su žiniatinkliu susijusį projektą labai svarbu pirmiausia sukurti vielinį karkasą. Apsvarstykite šiuos vielinių modelių pavyzdžiai kaip jūsų virtualūs statybos planai, padedantys nustatyti galimas kliūtis ir iššūkius dar prieš jiems atsirandant.
Karkaso kūrimo grožis slypi jo paprastume ir prieinamume. Nesvarbu, ar esate patyręs profesionalas, ar pradedantysis, pirmą kartą neriantis į dizaino pasaulį, nėra jokių kliūčių, trukdančių išbandyti šią techniką. Turėdami daugybę nebrangių ar net nemokamų įrankių, eskizuodami programėlių pavyzdžių eskizus neprivalote sugadinti bankas.
Norėdami pradėti kurti savo laidų karkasą:
1.Nustatykite savo tikslus: Viskas prasideda nuo supratimo, ką norite pasiekti savo interneto svetaine ar mobiliąja programa.
2.Apibrėžkite pagrindines funkcijas: Nuspręskite, kokiam tikslui (-ams) bus skirti jūsų svetainės/programos puslapiai.
3.Iš pradžių pieštuku ir popieriumi sukurkite paprastą ranka nubraižytą brėžinį, jei tai jums tinka.
4.Tiksliai suderinkite šį rankomis sukurtą vaizdą skaitmeniniu būdu, naudodami mažo tikslumo metodus. 5. didelio ištikimumo versijos, kuriose pateikiamos išsamesnės specifikacijos.
Atminkite, kad nors vielos rėmai gali atrodyti gana paprasti, ypač pradiniame jų kūrimo etape, jie gali būti veiksmingos priemonės, padedančios išaiškinti lanksčias sąvokas ir padedančios sukurti tvirtą pagrindą, ant kurio gali iškilti elegantiški dizainai.
Be to, pasinaudokite internete laisvai prieinamais šablonais, ypač "Sketch" šablonais, kurie gali būti naudingi pradedantiesiems, kurie gali jaustis prislėgti pradėdami nuo nulio. Įvairiose platformose demonstruojamų "ux wireframe" pavyzdžių mėgdžiojimas taip pat yra veiksmingas būdas suvokti įvairias šios praktikos metodikas.
Galiausiai, įvertinus, koks išsamus ir kartu universalus gali būti toks arsenalas kaip "didelio tikslumo interneto svetainių maketai", kad abstrakčias idėjas būtų galima greitai paversti apčiuopiama realybe - tai turėtų paskatinti entuziastus susimąstyti apie naudingąsias vertes, kuriomis grindžiamos tokios iš pirmo žvilgsnio fundamentalios konstrukcijos kaip mažo tikroviškumo vielinis karkasas pavyzdžių rėmeliai. Šie blokai gali būti elementarūs, tačiau jie suteikia puikių vizijų bet kokiam ambicingam projektui! Taigi nedvejokite, pradėkite eskizuoti jau dabar - iš tiesų pats laikas!
Svetainės karkasai yra labai svarbi bet kokio skaitmeninio produkto, nesvarbu, ar tai būtų programėlė, ar interneto svetainė, kūrimo dalis. Todėl pripažįstu, kad tiems, kuriems ši sąvoka yra nauja, gali kilti klausimų. Todėl panagrinėkime keletą dažniausiai užduodamų klausimų, susijusių su svetainių brėžiniai.
Apsvarstykite svetainės karkasas kaip būsimo žiniatinklio projekto karkasą. Jame išdėstyta viso projekto struktūra ir funkcionalumas. iškrovimo puslapis kol kas nesigilindami į spalvų schemas, tipografiją ar vaizdus. Iš esmės tai yra jūsų svetainės architektūrinis projektas.
Prieš pradėdami daug išteklių reikalaujančius projektavimo ir kūrimo etapus, galite aiškiai apžvelgti, kas ir kur bus naudojama. Taikant šį metodą galima sutaupyti laiko ir biudžeto, nes pakeitimus galima atlikti anksti ir išvengti brangiai kainuojančių pataisymų pradėjus kodavimą.
Laidų schemų išsamumo lygis priklauso nuo jų paskirties. Jos gali būti įvairios - nuo ranka pieštų eskizų, kuriuose pavaizduotas pagrindinis išdėstymas ir funkcijos (žemo tikslumo), iki išsamių skaitmeninių atvaizdų, kuriuose beveik tiksliai atvaizduojamas galutinis vaizdas (aukšto ar žemo tikslumo). didelio tikslumo laidų modeliai).
Yra daug nemokamų ir mokamų įrankių, skirtų laidų schemoms kurti, pavyzdžiui, "Sketch", "Balsamiq", "InVision Studio", "Adobe XD" ir kt.
Naudotojo sąsajos pasaulyje /UX dizainas, trys pagrindinės sąvokos dažnai sukelia painiavą tarp pradedančiųjų: "Maketai", "vieliniai modeliai" ir "prototipai". Nors gali atrodyti, kad šie terminai yra skirtingos tos pačios monetos pusės - jie atlieka skirtingas funkcijas, kurios unikaliai prisideda prie galutinio produkto kūrimo.
Iš esmės "vielinis karkasas" yra esminis maketo planas, kuriame, panašiai kaip pastato architektūriniame plane, nubraižoma puslapio elementų, svetainės funkcijų, konversijos sričių ir kt. padėtis ir dydis. Laidų schemų pavyzdžiai gali būti įvairūs - nuo nedidelio tikslumo ranka pieštų eskizų iki didelio tikslumo skaitmeninių iliustracijų. Šiuose nesudėtinguose brėžiniuose daugiausia dėmesio skiriama funkcionalumui, elgsenai ir turinio prioritetams, o ne estetiniams svetainės aspektams.
Maketas yra dar vienas žingsnis į priekį, nes jame pateikiamos vaizdinės detalės, spalvų schemos, be to, pateikiamas statiškas aukšto lygio programos ar tinklalapio vaizdas - panašiai kaip realus būsimos svetainės modelis. Jis padeda suinteresuotosioms šalims ankstyvuoju etapu peržiūrėti, kaip atrodys galutinis produktas ir kaip jis atrodys, nereikalaujant jokių sąveikos galimybių.
Galiausiai pasiekiami prototipai - interaktyvi galutinio produkto imitacija. Skirtingai nuo "wireframe" pavyzdžių, kuriuose daugiausia dėmesio skiriama tik išdėstymui, arba maketų, kuriuose daugiausia dėmesio skiriama išvaizdai, prototipai suteikia apčiuopiamos patirties imituojant naudotojo sąveiką. Jie paprastai imituoja realią navigaciją ir naudotojo srautas tarp programėlių ar tinklalapių ekranų spustelėjamais mygtukais ar nuorodomis.
Prisiminę šią eigą, geriau suprasite kiekvienos koncepcijos unikalų vaidmenį kuriant veiksmingą UI/UX. Projektavimo procesas.
Norėdami įsivaizduoti laidų kūrimo vaidmenį žiniatinklio dizainasįsivaizduokime namo statybą be projekto - būtų beveik neįmanoma užtikrinti tikslumo, efektyvumo ir apgalvotumo. Panašiai ir kuriant interneto svetainę nenaudojant brėžinių dažnai kyla nereikalingų sunkumų ir nesėkmių.
A svetainės karkasas tai iš esmės yra pagrindinė schema, kurioje išdėstomi tinklalapio elementai, prieš pereinant prie išsamesnių aspektų, pavyzdžiui, spalvų ar šriftų. Šis procesas supaprastina ir supaprastina žiniatinklio kūrimas aiškiau nurodant, kas kur priklauso. Tačiau kaip tai paveiks bendrą darbo eigą? Panagrinėkime šią užklausą giliau.
Svetainės karkasai pirmiausia padeda sukonfigūruoti optimalų jūsų svetainės išdėstymą, kuris gerokai pagerina naudotojų patirtį. Jis padeda svetainių kūrėjams nustatyti intuityviausią pagrindinių funkcijų išdėstymą, todėl labai pagerina UX.
Pavyzdžiui, strategiškai išdėstyta raginimo atlikti veiksmus vieta gali paskatinti naudotojus greitai atlikti atitinkamus veiksmus ir neprarasti susidomėjimo. Šis išankstinis organizavimas gali teigiamai atsiliepti įvairiais proceso etapais, įskaitant prototipų kūrimą ir kodavimą.
Konstravimas mobiliojo telefono karkasas pavyzdys taip pat gali sukurti darną tarp komandos narių, nes suteikia apčiuopiamą atskaitos tašką, kurį visi gali suprasti, nepaisant to, kad jų kompetencijos sritys skiriasi - ar tai būtų kūrybingi dizaineriai, ar verslo strategai, ar kodavimo nindzės. Šių subjektų veiklos organizavimas tampa kur kas lengvesnis, kai gairės nustatomos naudojant vielinių schemų pavyzdį.
Šis vizualus vaizdas leidžia kiekvienam dalyviui įžvelgti galimas problemas ar iššūkius, su kuriais jis gali susidurti, todėl geriau pasiruošiama, o vykdymo etapuose kyla mažiau nesklandumų.
Iš pradžių gali atrodyti, kad įžengti į laidų kūrimo pasaulį yra neįveikiama. Tačiau turint keletą kokybiškų pavyzdžių, tai gali tapti džiuginančiu kūrybiniu užsiėmimu. Šiandien pateiksiu trisdešimt tokių pavyzdžių, kai įmonės pasiekė puikių rezultatų naudodamos iliustratyvius vielinius modelius.
Šie atvejai, kurie duoda daug naudos, o svarbiausia iš jų yra padidėjęs patogumas, yra tinkamos veiksmingo su verslu susijusio laidų formavimo naudojimo iliustracijos.
Tarkime, vadovaujate konsultacinei įmonei, kuri savo svetaine siekia pritraukti pasaulinę auditoriją; tokiu atveju pasinerti į legendinių konsultacijų milžinų mažai tikroviškus vielinio karkaso eskizas pavyzdžiai gali būti neįkainojami. "Accenture" vientisa naudotojo navigacijos struktūra buvo sukurta naudojant intensyvius eskizų pavyzdžius, taip sukuriant savotišką kelią šios srities naujokams.
Tęsdami šį kelią, galite sužinoti apie kitus intriguojančius atvejus, kuriuos verta apsvarstyti: SaaS pagrindu veikiančios įmonės, kurios sudėtingas sąvokas paverčia lengvai virškinamais turinio vienetais, sveikatos priežiūra technologijos įstaigos, pacientams patogių sąsajų kūrimas ir dar daugiau!
Tik nepamirškite, kad - kaip liudija šie 30 puikių pavyzdžių - viskas prasideda nuo eskizų popieriuje ar skaitmeninėje drobėje, o paskui virsta konkrečiais veiksmų planais, parengtais vykdyti!
Kai jau žinote, kas yra vielinis karkasas, kokia jo nauda ir verti dėmesio pavyzdžiai, metas išbandyti savo jėgas kuriant tokį karkasą. Efektyvaus vielinio karkaso kūrimo menas slypi jo paprastume ir aiškume. Raginu jus prisiminti, kad svarbiausias tikslas mobiliojo telefono karkasas yra ne estetinis patrauklumas, o funkcionalumas.
Panagrinėkime keletą pagrindinių veiksmų, kurių galite imtis:
Pradėkite nuo projekto tikslų nustatymo. Supraskite, ko tikitės iš šio proceso ir kaip karkasas padės pasiekti šiuos tikslus.
Dizainas visada turi būti orientuotas į naudotoją, todėl labai svarbu žinoti, kas yra jūsų naudotojai ir kokie yra jų poreikiai. Ar jie išmano technologijas, ar yra naujokai? Šis sprendimas turi tiesioginės įtakos jūsų galutinis dizainas ir sudėtingumas.
Pažvelkite į ux wireframe pavyzdžius, kuriuos galima rasti internete. Tokiose interneto platformose kaip "Dribbble" ar "Behance" yra didelės bibliotekos vielinių modelių pavyzdžiai kuriuose pateikiama puikių įžvalgų.
Dabar prasideda linksmoji dalis! Griebkite pieštuką (arba plunksną) ir pradėkite piešti savo idėjas ant popieriaus arba skaitmeniniu būdu naudodami pasirinktą įrankį, pavyzdžiui, "Adobe XD" arba "Figma".
Atminkite:
- Laikykitės standartinių svetainių maketų - kad ir kaip sunku būtų su tuo sutikti, naudotojai, kalbant apie svetainių navigaciją, pirmenybę teikia žinomumui, o ne kūrybiškumui.
- Sukurkite logiškus navigacijos kelius - pagalvokite, kaip jūsų naudotojai gali pereiti iš vieno puslapio / skyriaus į kitą.
- Nekreipkite dėmesio į estetiką - daugiau dėmesio skirkite išdėstymui, o ne spalvoms, šriftams ir pan.
Baigę pradinį projektą, peržiūrėkite anksčiau išnagrinėtą medžiagą - interneto prototipų pavyzdžius arba mažo tikroviškumo vielinis karkasas pavyzdžiai šiame etape gali būti naudingos nuorodos.
Jei įmanoma, surinkite atsiliepimus apie savo projektą, t. y. išplatinkite jį kolegoms ir (arba) draugams, o geriausia - potencialiems naudotojams, jei jie gali juo naudotis. Tai padeda įvertinti tinkamumą naudoti ir efektyvumą, kartu atskleidžiant galimas problemas prieš pradedant kurti dizainą.
Norint sukurti išskirtinį ir naudingą vielinį modelį, kaip ir bet kurį kitą amatą, reikia praktikuotis, pereiti per įvairias versijas, kol pasiekiamas toks, kuris padėtų padėti pagrindą įspūdingam vėlesniam kūrimui. Galite būti tikri, kad kiekvienas sukurtas vielinis karkasas padės jums geriau suprasti svetainės funkcionalumą, todėl įgūdžiai labai pagerės, tad nesustokite!
Naudotojams patogių svetainių kūrimas prasideda nuo apgalvotų ir tikslingų vielinių modelių kūrimo - pradėkite jau šiandien!
Lithuanian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Spanish 
Dutch 
Estonian 
Greek 
Portuguese 
Czech 
Latvian