50 Naudingi dizainerių interaktyvūs dizaino įrankiai
Per pastarąsias dienas parodėme jums keletą geriausių „WordPress“ ir „Joomla“ atsakingų temų, kurias galite atsisiųsti ir naudoti svetainėje. Šiandien mes jums duosime įrankiai. Manome, kad jie susideda iš sistemų, paslaugų ir atsisiunčiamų scenarijų..
Kad būtų lengviau atsisakyti viso įrankių sąrašo, juos suskirstėme į šiuos skyrius:
- Tinklelis ir sistemos
- Piešimo lapai ir vielos rėmeliai
- „JavaScript“ ir „jQuery“ papildiniai
- Testavimas ir peržiūra
- Slankikliai
- Kiti
Tinklelis ir sistemos
[Atgal į viršų]
Columnal
„Columnal“ yra „Pulp + Pixels“ projektas, kuris buvo pasiskolintas iš cssgrid.net, o kai kurie kodavimo įkvėpimai buvo paimti iš 960.gs. „Columnal“ padeda jums daug prisitaikyti prie žiniatinklio dizaino, kad jūsų tinklai būtų lankstūs, kad būtų galima dinamiškai keisti naršyklės lango dydį.
Skeletas
Skeletas yra paprasta ir galinga CSS sistema, kurią daugiausia mėgsta kūrėjai ir dizaineriai dėl savo paprastumo ir efektyvumo. Čia nėra didelio kėlimo su „Javascript“, tik gera ir gryna CSS su švaria dokumentacija.
Mažesnis karkasas 4
Mažiau pagrindų yra daugiau ar mažiau pagrindas, jo kūrėjo vardu. Tai adaptyvi CSS tinklo sistema, pagrįsta inline CSS medijos užklausomis, kurios leidžia lengviau reaguoti į tinkamas svetaines.
Semantinio tinklo sistema
„Semantic Grid“ sistema naudojama reaguojant į tinklelius. Jis naudoja iš anksto apdorotus CSS plėtinius, pvz., „LESS“, „SCSS“ arba „Stylus“, kad būtų užtikrintas maksimalus efektyvumas. Galite pasirinkti stulpelių ir latakų plotį, pasirinkti stulpelių skaičių ir persijungti tarp taškų ir procentų.
Aukso tinklelio sistema
„Golden Grid“ sistema yra skysčio tinklelio sistema, kuri yra tinkamo interneto dizaino pradžios taškas. Tai leidžia tinklalapiui aptarnauti puikius puslapius nuo 240 iki 2560 pikselių.
320 ir aukštyn
320 ir „Up“ yra CSS žiniasklaidos užklausų katilinė, kuri yra pradinis jūsų reaguojančio dizaino šablonas. Tai yra visiškai atvirkščiai, nei keletas kitų prieinamų katilų.
Inuit.css
Inuit.css yra CSS sistema, kuri yra labai paprasta naudoti net naujokams. Jis turi minimalistinį požiūrį, taigi jums reikia spręsti tik reikalingus dalykus, tačiau, jei reikia, jį taip pat galima papildyti saučiu galimų papildinių.
Gridless
„Gridless“ yra sukurta, kad būtų sukurtos jautrios ir tarpvalstybinės naršyklės svetainės su gražia tipografija. Šis įrankis orientuotas į laipsnišką projekto kūrimą ir yra bet kokio dizaino pradžios taškas.
1140 CSS tinklelis
1140 „CSS Grid“ - tai puiki CSS tinklelio sistema, sukurta Melburno dizainerio Andy Taylor, kuri savo dizainui puikiai tinka 1140px dideliems monitoriams ir jūsų skysčių išdėstymas sklandžiai prisitaiko prie kitų mažesnių rezoliucijų su labai mažu papildomu darbu.
1KBCSSGrid
„Tyler Tate“ sukurtas „1KB CSS Grid“ yra paprastas ir lengvas „CSS Grid“ generatorius. Tai leis jums nustatyti stulpelių skaičių, stulpelių plotį ir latakų plotį, taip pat galite gauti atsisiunčiamą CSS savo tinklelio tinklui.
Bootstrap
„Mark Otto“ ir „Jacob Thornton“ sukurtas ir prižiūrimas „Bootstrap“ yra puikus vartotojo sąsajos elementų, maketų ir „JavaScript“ įrankių rinkinys, laisvai prieinamas norint atsisiųsti ir naudoti savo interneto dizaino projektuose.
Skysčio tinklelio skaičiuoklė
Šis paprastas įrankis padės greitai patraukti savo skysčių tinklų svetainės dizaino CSS.
Skysčių tinklai
„Fluid Grid“ yra paprastas, bet naudingas skysčio tinklelis, kuris sukuria reaguojančius išdėstymus pagal 6, 7, 8, 9, 10, 12 arba 16 stulpelius.
Flurid
„Flurid“ yra paprasta ir labai naudinga „CSS“ tinklų sistema, turinti net iki 16 stulpelių. Be to, ji neslepia pikselių į paraštes.
Gridset
„Gridset“ yra įrankis bet kokio tipo tinkleliams, pvz., Stulpeliams, asimetriškiems, fiksuotiems, santykiniams, junginiams, reaguoti ir daugiau. Šis Marko Boultono įrankis vis dar yra beta, bet pasirodo esąs perspektyvus. Ir ar aš paminėjau, kad tai yra taip paprasta, kaip įterpti nuorodą.
Gridpak
„Gridpak“ yra internetinis reaguojantis tinklelio generatorius, kuriame galima keisti stulpelių, užpildų ir latakų skaičių, ir pridėti papildomų taškų. CSS generuoja įrankis ir paruoštas atsisiųsti. Ji taip pat suteikia PNG tinklinio šablonų, kurie gali būti naudojami projektuojant Photoshop.
SimpleGrid
„SimpleGrid“, sukurtas „Michael Kuhn“, yra labai paprasta ir paprasta CSS sistema, skirta sukurti begalinius tinklelius. Numatyta, kad „SimpleGrid“ yra paruoštas 4 skirtingiems ekrano dydžių diapazonams.
Susy
Susy by Oddbird yra panašus į „Semantic Grid“ sistemą. Jis nenaudoja jokio papildomo žymėjimo ar kitų specialių klasių, tačiau jis skirtas tik „Saas“ naudotojams ir jos pratęsimui „Compass“.
Tiny Fluid Grid
„Tiny Fluid Grid“ yra nuostabi žiniatinklio programa, kuri gali padėti jums interaktyviai nustatyti jūsų svetainės tinklo sistemą. Galite nustatyti stulpelių, latakų procentų, minimalaus ir maksimalaus jūsų svetainės išdėstymo pločio skaičių ir gauti jį parsisiunčiamą CSS.
Kintamo tinklo sistema
„SprySoft“ projektuoja ir tobulina kintamos tinklelio sistemą, kuri yra pagrįsta 960 tinklelio sistema. Tai leidžia kūrėjams ir dizaineriams kurti tinkintą tinklelį ir tada atsisiųsti pridedamą CSS failą pagal tą tinklą.
Piešimo lapai ir vielos rėmeliai
[Atgal į viršų]
Reaguojantis interneto dizaino eskizas
Šis įrankis yra naudingas įvairių svetainių išdėstymo įvairiuose įrenginiuose rodymo vietų vaizdavimui. Naudodamiesi šiuo prietaisu, galite sukurti idėją, kur įdėti reikiamus svetainės elementus skirtingiems ekrano dydžiams ir rezoliucijoms.
Atsparios vielos rėmeliai
„Responsive Wireframes“ yra „James Mellers“ sukurtas eksperimentinis įrankis „Adobe“. Jis yra pastatytas tik su HTML ir CSS (nenaudojami jokie vaizdai ar JS), kuriuos galite naudoti norėdami vizualizuoti, kaip atrodys jūsų reaguojantis dizainas tikrose įvairių stalinių kompiuterių ir mobiliųjų įrenginių naršyklėse.
„StyleTiles“
Stilių plytelės suteikia galimybę sukurti idėją, kaip atrodytų svetainė, nepriklausomai nuo sudėtingų stilių, kurie ateina į žaidimą. Tai suteikia jums galimybę puikiai reaguoti į dizaino darbo eigą ir galimybę integruoti klientų atsiliepimus.
„JavaScript“ ir „jQuery“ papildiniai
[Atgal į viršų]
Adapt.Js
„Adapt.js“ yra „Javascript“ sprendimas ir puiki alternatyva CSS žiniasklaidos užklausoms. „@Media“ metodo naudojimas yra gera praktika, tačiau tai neveikia visose naršyklėse. Nathan Smith, 960 tinklelio sistemos kūrėjas, išleido „Adapt.js“, labai lengvą „JavaScript“ biblioteką, kad įveiktų šią problemą.
Izotopas
Isotope yra nuostabus „jQuery“ įskiepis, kuris pasirodo esąs labai naudingas kuriant atsakingą dizainą. Jis ne tik padeda pertvarkyti puslapio elementus, kai naršyklės langas keičiamas, ar ekrano dydis yra mažesnis, bet taip pat padeda filtruoti šiuos elementus.
Mūrinis
Mūrinis yra puikus jQuery įskiepis, naudojamas kuriant dinaminius ir adaptyvius išdėstymus. Šis įskiepis padeda pertvarkyti jūsų reaguojančio dizaino elementus, kad jie galėtų geriau prisitaikyti prie tinklelio atvirų vietų.
Respond.js
„Respond.js“ yra greitas ir lengvas (3 Kb minized ir 1 Kb gzipped) scenarijus, kurio pagrindinis tikslas yra įgalinti atsakingą interneto dizainą tose, kurios nepalaiko CSS3 medijos užklausų, pvz., IE naršyklių.
TinyNav.js
TinyNav.js yra nedidelis ir lengvas jQuery įskiepis, tik 362 baitai, kurie konvertuoja didelius navigacijos sąrašus į mažus išskleidžiamuosius meniu mažesniems ekranams.
Wookmark jQuery papildinys
„Wookmark“ yra jQuery įskiepis, kuris aptinka naršyklės lango dydį ir automatiškai išdėsto puslapio elementus į stulpelius. Taip pat galite pamatyti tiesioginį peržiūrą paties puslapio apačioje.
Testavimas ir peržiūra
[Atgal į viršų]
ProtoFluid
„ProtoFluid“ yra žiniatinklio prototipų kūrimo įrankis, leidžiantis išbandyti savo svetainės prototipus įvairiais ekrano dydžiais ir rezoliucijomis. Tiesiog įveskite URL, pasirinkite įrenginį (arba bet kokius pasirinktinius matmenis) ir paspauskite „Pradėti“. Kadangi tai yra žiniatinklio įrankis, jis taip pat leidžia naudoti kitus plėtinius, pvz., „FireBug“.
Atsakingas
„Responsive.Is“ sukurtas „TypeCast“ kito naršyklės emuliatoriaus įrankiu, kurį galite naudoti norėdami išbandyti savo atsakingą dizainą. Tiesiog įveskite URL ir automatiškai pakeis jo dydį, priklausomai nuo pasirinkto įrenginio.
Responsivepx.Com
ResponsivePx yra nuostabus įrankis, leidžiantis išbandyti savo atsakingą svetainės dizainą. Pagrindinis bruožas, skiriantis jį nuo kitų, yra jos sugebėjimas keisti svetainės taškų pikselių dydį. Ši nuostabi funkcija leis jums nustatyti lūžio taškus ir taip pat išbandyti, kaip jūsų svetainėje veikia CSS žiniasklaidos užklausos.
Reaguojantis žiniatinklio dizaino testavimo įrankis
Nuostabus testavimo įrankis, leidžiantis vienu metu matyti savo reaguojančią svetainę įvairiais ekrano dydžiais vienu metu, kai juos kuriate ar projektuojate. Man patinka šis įrankis daugiausia dėl to, kad jis rodo visas ekrano rezoliucijas, kurios palengvina derinimą.
ReView.Js
„ReView“ yra dinamiška „Viewport“ sistema, sukurta gryname „JavaScript“.
„Screenfly“
„Screenfly“ „QuirkTools“ - tai nuostabi priemonė, leidžianti peržiūrėti savo atsakingą svetainę įvairiuose įrenginiuose: „Desktop“, „Tablet“, „Mobile“ ir „TV“. Taip pat yra parinkčių, leidžiančių įjungti arba išjungti slinkimą arba netgi pasukti ekraną.
Screenqueri.es
„Screenqueri.es“ yra tobulai reaguojantis dizaino testavimo įrankis. Tiesiog įveskite bet kurį svetainės adresą, kurį norite patikrinti, ir šis įrankis parodys svetainę įvairiais ekrano dydžiais pagal įrenginį. Be to, galite nustatyti dydžio pikselių dydžio pikselių dydį, kad nustatytumėte taškinius taškus.
Responsinatorius
Išbandykite savo svetainę įvairiuose prietaisuose iš „iPhone“ ir „iPad“, į „Kindle“ ir „Android“, esančius „Responsinator“. Jis taip pat rodo jūsų svetainę tiek portreto, tiek kraštovaizdžio režimu. Man patinka šis įrankis daug labiau dėl to, kad puslapyje rodomi įrenginiai, kurie suteikia daugiau reikšmės visam procesui.
Slankikliai
[Atgal į viršų]
Mėlynė
Mėlynė yra fantastinis atviro kodo „jQuery“ vaizdo slankiklis, kuris parašytas specialiai skysčių ar reaguojančių maketų darbui.
Elastislide
Norite, kad karuselė automatiškai prisitaikytų prie ekrano dydžio, kai naršyklės langas bus pakeistas arba kai esate mažesniame ekrane? Elastislide yra tinkamiausias jQuery įskiepis jūsų poreikiams.
Atsakingas CSS3 slankiklis
Tai grynas reaguojantis CSS3 slankiklis, kuris gali lengvai pritaikyti bet kokį ekrano dydį ir ekrano skiriamąją gebą. Gražus dalykas apie šį slankiklį yra tas, kad rodyklės eina langelyje, kai įrenginio ekrano dydis yra pakankamai mažas. Nereikia JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js yra labai paprastas ir labai lengvas (tik 1Kb) jQuery įskiepis, kuris sukuria reaguojamąjį slankiklį, naudojant nereguliuojamus sąrašus. Jis veikia įvairiose naršyklėse, taip pat ir IE6 ir naujesnėse versijose.
Kiti
[Atgal į viršų]
Adaptyvieji vaizdai
„Adaptive Images“ - tai internetinis įrankis, skirtas žiniatinklio dizainui, kuris aptinka lankytojų ekrano dydį ir sukuria, saugo ir perduoda iš naujo skalę vaizdus pagal ekrano dydį ir skiriamąją gebą.
FitText.Js
FitText.js yra mažas javascript įrankis, kuris leidžia automatiškai keisti tekstą ir antraštes, kai naršyklės langas keičiamas. Nėra daugiau nerimo dėl teksto dydžio neatitikimo šiam įrankiui.
FitVid.Js
Norite iš naujo keisti įterptus vaizdo įrašus, kai naršyklės langas keičiamas arba įrenginys yra mažesnės skiriamosios gebos? FitVid.Js gali padėti jums tai pasiekti. Tai lengvas, paprastas, paprastas naudoti jQuery įskiepis, naudojamas įterpti skysčio pločio vaizdo įrašus.
Tinklainės vaizdai
„Retina Images“ yra nuostabus „JavaScript“ sprendimas, kuris automatiškai aptarnauja 2X didesnius, didelės skiriamosios gebos vaizdus, kai žiūrėsite į tinklainės ekraną. Viskas, ką jums reikia padaryti, yra įdėti didelės skiriamosios gebos kiekvienos atskiros nuotraukos versiją ir valdyti likusią dalį.
Besiūliai reaguojantis nuotraukų tinklelis
„Seamless Responsive Photo Grid“ atvaizduoja naršyklėje vaizdus, kurie yra kraštiniai, be jokių tarpų tarp atvaizdų. Nuotraukos yra plytelės ir teka iš kairės į dešinę visoje stulpelyje. Stulpelių skaičius atitinkamai koreguojamas, kai naršyklės langas keičiamas.
„SlabText“
„SlabText“ yra „Brian McAllister“ sukurtas jQuery įskiepis arba įrankis, pagrįstas „slabText“ algoritmu, kuris suskirsto antraštes į eilutes prieš kiekvieną eilutę keičiant dydį, kad užpildytų turimą erdvę. Tai gana panašus į „FitText.Js“ įskiepį veikiant.
„Zurb“ - „ResponsiveTables“
Ar jūs kada nors susimąstėte, kaip elgtis su dideliais duomenų lentomis reaguojant į dizainą? Zurbas, CSS / JS combo, suteikia jums atsakymą; ji priima duomenų lenteles ir jas modifikuoja taip, kad jie nesulaužtų atsakingo išdėstymo mažesnėse ekrano priemonėse.
Kategorijos
Categorizr yra labai mažas PHP scenarijus, kuris suteikia lankytojams tikslesnę žiniatinklio patirtį. Tai padės jums pristatyti konkrečiam planšetiniam kompiuteriui skirtą planšetinį kompiuterį, televizorių, mobilųjį telefoną ar darbalaukį.
„Media Query Bookmarklet“
„Media Query Bookmarklet“ parodo, kokio dydžio dabartinė peržiūros sritis yra ir kokią medijos užklausą ji tiesiog atleido.
Reaguojantis skaičiuoklė
Reaguojantis skaičiuoklė yra labai paprastas internetinis įrankis, kuris gali padėti jums paversti pikselius procentais, kuriant jūsų reaguojančią svetainę.
Iki kitos savaitės
Antroje šios serijos savaitėje mes padėsime jums pamokų, kurios tikrai padės jums reaguoti į interaktyvų interneto dizainą (RWD).
Nepraleiskite jo.
