A felhasználói felület elemkönyvtárának használata. Photoshop UI Kits Basic UI Elements

Örökre elmúltak azok az idők, amikor a legkülönbözőbb csíkos tervezők egymás előtt fitogtak, fülbemászó, sőt, azt is mondhatnám, túl igényes tervezési projektek, mindenféle grafikai sallangot alkalmazva, eljött az ideje az új tervezési megoldásoknak, amelyek lehetővé teszik a felhasználók számára, egy webprojekt legfontosabb összetevője, mint a színes burkolat.

A lapos felületelemek használata halkan, de biztosan átterjedt a jelenetre a Windows 8 és annak meglehetősen minimalista "Metro" stílusában. A lapos kialakítás minimalista megközelítésével elsősorban a használhatóságra összpontosít különféle típusok felhasználói eszközök, mind asztali számítógépeken, mind érintőképernyős vezérlésű okostelefonokon. A lapos kialakítások megkülönböztető jellemzői a világos vonalak, a kétdimenziós tárgyak, világos színek, egyértelműen megjelölt hivatkozások és nem-szerif szöveg. Annak érdekében, hogy ne vonják el a felhasználók figyelmét a fontos elemekről, minden dekoratív talmi teljesen hiányzik.

Ha követi a webdesign legújabb trendjeit, és máris rajong a lapos tervezési megoldásokért, itt van 10 teljesen ingyenes lapos kialakítású felhasználói felület készlet új projektjeihez. Minden készlet sokféle összetevőt tartalmaz, amelyek ideálisak bármely webdesigner számára: gombok, beviteli elemek, menük, jelölőnégyzetek és rádiógombok, címkék, menük, folyamatjelző sávok és csúszkák, valamint navigációs elemek és még sok más.

Adjon új megjelenést a dizájnjának ezekkel a csodálatos UI készletekkel.

1 Pehelysúlyú UI

Sarah Hunt ingyenes felhasználói felületelemeinek vonzó készlete, jól megtervezett vektor alapján, rétegekre bontva, gondosan csomagolva egy fájlba, minden réteget intuitív névvel látnak el. A szöveg és a színek könnyen szerkeszthetők. A tervezéshez olyan betűtípust használtak, amely ingyenesen használható a -tól.

Ezzel a felhasználói felület-elemkészlettel sokkal kevesebb időt tölthet munkával, és a kreativitásra összpontosíthat. A készlet teljesen ingyenesen használható személyes vagy kereskedelmi projektekhez. Letöltheti a készletet, és azonnal elkezdheti.

2. Modern Touch UI Kit

A PSD UI elemek nagyszerű készletének ingyenes alapverziója, mellyel funkcionális weboldalt hozhat létre kifogástalan dizájnnal A tipográfia egyensúlya, az elemek összsúlya és elhelyezése, korrigált párnázás, margók és színpaletta. Általános stílus a tartalom jellegzetes hangsúlyozásával. Ennek a csodálatos készletnek a teljes HTML-változata a PixelKit-előfizetéssel rendelkező regisztrált felhasználók számára elérhető.

3. Függőleges végtelen

4. Square UI ingyenes

Egy újabb csodálatos és csomagolt készlet tőle designmodo, ingyenesen elérhető, kivéve a hír hivatalos előfizetését, letöltési link beszerzéséhez. Biztos vagyok benne, hogy ez az apró akadály senkit sem fog megállítani, ha minőségi termékre van szüksége. A készlet pedig valóban kiváló minőségű, és számos jól megrajzolt webkomponenst tartalmaz a weboldal tervezéshez. Letöltés ingyenes verzióés ha tetszett a készlet, ha szeretné, megvásárolhatja a készlet bővített prémium verzióját. Bár az ingyenes verzió rengeteg hasznos tervezői finomságot tartalmaz egy teljes értékű webhely létrehozásához.

5. Lapos kialakítású felhasználói felület összetevői

Könnyű (407 Kb) felhasználói felület összetevők lapos stílusban készült halmaza, a teljes színpalettán a kékes tónusok túlsúlya. A készlet összes eleme egyetlen jól szervezett PSD-fájlban érhető el, és könnyen szerkeszthető. Mint látható, nincs színzavar, minden szigorú, és kizárólag a tartalom érzékelésének kényelmét szolgálja.

6. Metro Tiles UI Kit

Ingyenes, meglehetősen gazdag és gyönyörűen megjelenített felhasználói felület-összetevők a PixelKittől. A készlet számos felhasználói felület elemet tartalmaz, rétegezve és PSD fájlba kombinálva, kialakítása ideális webes projektek fejlesztéséhez ill mobil alkalmazások. A komponensek kialakításáról első pillantásra sejthető a Wihdows 8 grafikus felületének stílusa, az elemek pontosan meghatározott élei, lágy kék-kék tónusai és tökéletesen olvasható betűtípus.

7. Lapos, lekerekített négyzet alakú felhasználói felület készlet

A webes felület elemeinek lenyűgöző csomagja, amelyet a kézművesek ingyenesen hozzáférhetővé tettek, kétségtelenül megérdemli a figyelmet. A szerzők munkájuk során kissé eltértek a 100%-ban lapos kialakítás vonalától, enyhén lekerekített sarkokkal, enyhén lekerekített sarkokkal, az elemek alsó szegélyein pedig enyhén hangerőt adtak az egyes komponensekhez. Egy ilyen tervezési döntés indokolt a webdesign változó prioritásainak átmeneti időszakában. A telephelyépítők produktív munkájához szükséges összes elem egy komplett készletben található. Már csak le kell tölteni, kicsomagolni az archívumot, és elkezdeni létrehozni, ha nem is örök, de legalább szép és kedves)))

8. Lapos kialakítású felhasználói felület csomag

Igazi nehézsúly (125 MB!) a hasonló PSD UI készletek között. A legapróbb részletekig részletesen, lapos kialakítás beállítani az alkatrészeket, lenyűgözni és beállítani a kreatív munkához. Ez az UI-kit ingyenesen használható magán- és kereskedelmi projektekben is, ha csak öröm, de az ügy érdekében is.

10. Bootflat 1.0.1

Az áttekintés végén figyelmükbe ajánlom a HTML, CSS, JS egyfajta gyűjteményét, valamint a webhely-felületek gyors fejlesztéséhez szükséges összetevőket – a „Bootflat”, amely a jól ismert Twitter Bootstrap 3 platformra épül. Intuitív eszköz, amely könnyű beépülő modulokat és összetevőket tartalmaz, de gazdag Bootstrap funkciókkal. HTML5 és CSS3 támogatás, nagyszerű színösszeállításés egy stílus, amely a továbbfejlesztett Bootstrap 3 stíluson alapul. A Bootflat teljesen reszponzív, ami azt jelenti, hogy nem lesz probléma az elemek megjelenítésével minden típusú felhasználói eszköz képernyőjén. A platform összes összetevője egyszerűen bővíthető és szerkeszthető. A Bootflat egy nyílt forráskódú projekt forráskód, ezért nyugodtan használhatja minden funkcióját korlátok nélkül, és alakíthatja ki saját stílusát.

A lapos kialakítás egy különleges irányzat, ami a jövő, és fontos, hogy ne hagyjuk ki a pillanatot, időben ugorjunk a száguldó vonatra, hiszen minden új trendnek megvan a maga életciklusés egyetlen, még a legnépszerűbb dizájnirányzat sem lehet örökké a hullámok csúcsán. Jelenleg több okból is érdemes ezt az érdekes dizájnstílust új projektek kidolgozásakor alkalmazni, nem rohanni bele minden komoly elfoglaltságba a divat hajszolásával, hanem mindent érzékkel, érzékkel és elrendezéssel. Nyugodtan kijelenthetjük, hogy az ilyen felkapott webhelyek intuitívak, könnyen érthetőek és pozitív benyomást keltenek, és nem kevésbé pozitív kritikák az internetezők közösségétől.

Egyetlen modern oldalt sem kerülnek meg. Van azonban egy módja annak, hogy jelentősen időt takarítson meg az elrendezés és a tervezés során, beleértve a webhely felhasználói felületét is - ezek készen állnak UI elemkönyvtárak. Ma már olyan sok van belőlük, hogy egy meglehetősen nagy posztba csak ingyenes készleteket lehetett gyűjteni.

Milyen előnyökkel jár a webhely kész UI-elemeinek egy projektben való használata?

Az apró elemek elkészítésének minden fárasztó munkáját már elvégezték Ön helyett.
Alakzat animáció, gombokatés más elemeket már implementáltak és konfiguráltak a modern webdizájn trendeknek megfelelően.
Mindegyik készlet HTML UI komponensek rendszerint nem az első kiadás. Minden JS hibakeresést végez, és stabilan működik. Ezzel egyidejűleg kísérletileg meghatározták a halmaz egyik vagy másik elemének leginkább használható megoldásait.

Hol használhatja a HTML UI elemkészleteket?

Először is - ez prototípusok, hiszen a dizájnban nincs szükség különösebb egyediségre. A prototípus fejlesztése során a könyvtárakat kevés kozmetikai változtatással vagy egyáltalán nem használják. A lényeg az, hogy működjön, és tükrözze a projekt lényegét.

Habár UI előre megtervezett kialakítású, szinte bármilyen projektben használható. Minden elem a modern webdizájn trendekhez igazodik, és nagy valószínűséggel kiderül, hogy ebből a kollekcióból legalább egy szett pontosan ugyanolyan stílusú lesz, mint az Ön projektje.

Így. Figyelmedbe 20 ingyenes HTML UI elemkészlet webhelyéhez. Ne felejtsen el feliratkozni a közösségi oldalra. hálózatok.

elem

Nagyon szép HTML eszköztár webhelyekhez. Szinte minden felhasználói felület elemet tartalmaz, beleértve párbeszédpanelek , formák, egyéni webdesign rácsok, értesítések, menük stb. Minden elem és animációja könnyen észlelhető, és nem tölti be az oldalt. A Vue.js 2.0 alapján

Tervezési blokkok

170+ HTML blokk minőségi prototípus létrehozásához. Ez egyfajta weblapkészítő, amitől bármit elvakíthat. A készlet az összes elem teljes készletét tartalmazza egy stílusban.

Material Design Bootstrap

Ingyenes css keretrendszerhez Bootstrap 3 tervezésben Google Material Design. Sajnos nem rendelkezik az eredeti Google Material Design on Angular dinamikájával, de megpróbálja utánozni.

Lapos felhasználói felület

Kellően magas minőség UI beállítása lapos stílusban, amelynek alapja a reszponzív CSS Bootstrap 3 keretrendszer. Hatalmas plusz a jelenlét Forrás: PSD.

Pure UI Kit

Ha rácsokra, űrlapokra, gombokra, táblázatokra vagy menükre van szüksége, akkor ez a felhasználói felületi keretrendszer az Ön számára megfelelő lehet. Nagyon könnyű. Súlya mindössze 3,8 KB.

Lapos kialakítású felhasználói felület – HTML5 + CSS3

Alacsony minőségű minimumkészlet UI-elemek HTML5 + CSS3-ban. Ezen kívül eredeti kialakítású.

Metro UI CSS

Metro interfészek már a múlté, de ez a stílus még ma is hatalmas közönséget vonz. Bevallom én is közéjük tartozom. Ma is vannak feladatok, ahol METRO UI szükség lehet. Figyelmébe elég nagy és kiváló minőségű UI-keretrendszer HTML-en METRO stílusban. Szinte minden elem sajátos kivitelben ingyenesen elérhető: ezek a csempézett képernyők, űrlapok, jelölőnégyzetek, választógombok, gombok, menük, oldalszámozás és rengeteg egyéb érdekesség. A keretrendszer összesen 70+ UI-komponenst tartalmaz. Ez pedig egy ukrán fejlesztő munkája.

Propeller

Ingyenes CSS-keretrendszer a Material Design stílusában a Bootstrap-on. Körülbelül 25 alkatrészt tartalmaz, amelyek furcsa módon meglehetősen hasonlítanak a Material Design on Angular eredeti dinamikájára. Létezik prémium verzió is.

Material Design Lite

Az egyik legfejlettebb Material Design UI keretek tovább HTML. Arzenáljában rengeteg alkatrész található. Ez egy egész kombájn. Szerintem ez a Material Design nyelv egyik legjobb megvalósítása a HTML-ben.

Szemantikus felhasználói felület

Kellemes, könnyű és rendezett keretrendszer a felhasználói felület létrehozásáhozés prototípuskészítés. Szinte mindent tartalmaz, amire szüksége van. Például gombok, fülek, tipográfia, kapcsolók stb. Aktívan lefordítják oroszra. A semmiből épült, és semmi köze a Bootstraphez, ellentétben a cikkben szereplő legtöbb társával.

Ebben a leckében világosan elmondjuk és bemutatjuk, hogyan használhatja a megoldáshoz tartozó könyvtár felhasználói felületi elemeit, valamint hogyan használhatja az elrendezési funkciókat, hogyan helyezhet be ikonokat, gombokat és design elemeket a webhelyen.

Figyelem! A html kóddal való sikeres munkavégzéshez legalább minimális ismeretekre lesz szüksége a címkékről és az írási elvekről. Ha kétségei vannak, vagy gyakorolnia kell, nyugodtan kísérletezhet az elrendezéssel egy tesztoldalon. A html kód megváltoztatása tönkreteheti az elrendezést külön oldal, de nem töri meg az egész webhelyet.

A bemutató oldalon bemutatott felhasználói felület elemei html kódok, amelyeket kimásolhat és beilleszthet a megfelelő helyre a webhely oldalán. Példaként adjuk hozzá a „Gears” elemet és különböző méretű címsorokat az oldalhoz.

Menjen a webhely kívánt oldalára, ahová az elemeket el szeretné helyezni, aktiválja a szerkesztési módot, és nyissa meg az oldalt szerkesztésre. Váltson át a kombinált megjelenítési módra, hogy a html kódot és a megjelenés tartalom.

Nyisson meg egy UI-elemek könyvtárával rendelkező részt a webhelyén, lépjen a kívánt tartalommal rendelkező oldalra, lépjen be a szerkesztési módba, és váltson át benne a kombinált megjelenítési módra.

Másolja ki az Önt érdeklő elemek kódját, és illessze be webhelye oldalára.

Példánkban a fejléc kódja és a „Gears” elem kódja másolásra került. Módosíthatja a kódot – például eltávolíthatja a tesztszöveget a cím alatt, vagy módosíthatja a feliratot a fogaskerekek alatt.

A változtatások mentése után a szükséges elemek megjelennek az oldalon:

Elvileg a profik számára semmi sem egyszerűbb, mint kézzel rajzolni egy vázlatos elrendezést a webhelyről. A folyamat kissé bonyolultabbá válik, ha a felhasználói felület elemeinek (és részleteinek) tervezéséről van szó. Itt nem nélkülözheti a képzelet, a tapasztalat és az inspiráció.

Ha nem tudja, mihez kezdjen (vagy már van egy ötlete, de időt szeretne megtakarítani a sablonok használatával), olyan szolgáltatások jöhetnek a segítségére, mint a UI Patterns klasszikus megvalósítási lehetőségekkel vagy a letöltésre kész speciális készletekkel. . Az utóbbiakat általában PSD formátumban szállítják, így annak, aki ismeri a Photoshop használatát, nem lesz nehéz a saját módján átdolgozni őket.

Zöld WebUI Kit

Green WebUI Kit interfészkészlet - szinte minden elemet tartalmaz, amire szüksége lehet - Főmenü navigáció, gombok (OK, Mégse, Vásárlás most, Letöltés most), eladási matrica, bejelentkezési űrlap, üres csúszka és előfizetési elemek - RSS, e-mail és így tovább.

Minden elem minőségileg készült, a design modern. Minden elemnek megvan a maga rétege (PSD-fájl), így a velük való munka nagyon kényelmes. Elvileg ebből gyorsan felvázolhatod egy ilyen blog dizájnját - egy csúszka, már vannak előfizetések. Ha össze kellene hasonlítanom, akkor ez jobban megfelelne a kínaiaknak.

Sárga felhasználói felület elemei

Sárga felhasználói felület elemei - Ez a készlet 11 sárga felhasználói felület elemet tartalmaz, beleértve a gombokat (Letöltés, Küldés, Vásárlás most, keresés), szakaszokat (Kiemelt és dátum), görgetősávokat és előrehaladást. A PSD-fájl minden rétege kényelmesen csoportosítva van, így könnyedén módosíthatja a felhasználói felület egyik vagy másik elemét. A szín ugyanolyan egyszerűen módosítható a kívántra (természetesen a Green WebUI készletben is).

Sajnos a Yellow UI Elements kevesebb elemet tartalmaz, mint a Green WebUI Kit, így nem zárom ki, hogy néhány elemet más készletekből kell kölcsönöznie, vagy saját maga rajzolnia kell.

Puha felhasználói felület készlet

Szép könnyű felületelem-készlet webes fejlesztéseihez. Weboldal készítésekor és webes alkalmazáshoz egyaránt használható. Az összes PSD forrás között ott vannak a leggyakrabban használt webelemek - + keresés, legördülő lista, jelölőnégyzetek és rádiódobozok, szöveges tippek stb., még csillagok is vannak a szavazáshoz. Aki ismeri a Photoshop használatát, annak egyáltalán nem lesz nehéz ezt a PSD-t az igényeinek megfelelően beállítani. Összességében mennyiségileg és minőségileg is nagyon jó a készlet.

Átlátszó üveg felhasználói felület

Ahogy azt már a készlet nevéből (Transparent Glass UI) és az előnézetből is észrevettétek, megkülönböztető jellemzője az elemek átlátszósága. Ez egyrészt meglehetősen lenyűgözőnek tűnik, és jól illeszkedik a modern dizájnhoz, másrészt szinte bármilyen háttérszínhez illeszkedik. A PSD készlet tartalmazza az összes tipikus webes felület elemet - legördülő listákat, kapcsolókat, gombokat, űrlapokat, csúszkákat és beviteli mezőket.

Úgy gondolom, hogy a Photoshop számára bemutatott felhasználói felület elemkészletek közül találhat valamit magának. Az első és az utolsó szett különösen jó. Sikeres kísérletezést és gyönyörű felületet kívánok!

P.S. Ha rugalmas rendszert kell találnia egy online áruház számára, a Magento Commerce kellemesen meglepheti képességeivel, funkcionalitásával és a projekt bővíthetőségével.