A felhasználói felület (angolul felhasználói felület, UI) röviden a felhasználó és a számítógép közötti interakció környezete. Ezek gombok, menük, rádiógombok, jelölőnégyzetek és még sok más. Ez most nem világos, alább elmagyarázom az összes értetlen szót. Ha az ember használja mobiltelefon, akkor az alkalmazások vagy a böngésző a felhasználói felület.

Alapvető felhasználói felület elemei

Most elmagyarázom a fentebb leírt szavakat. Mindennek a helyére kell kerülnie. Okkal beszélek a felhasználói felületről. Erre az információra azért van szükség, hogy ne felejtse el megrajzolni ezeket az elemeket az elrendezésben. Ha a tördelő nem talál valamit az elrendezésben, akkor azt úgy csinálja, ahogy ő helyesnek tartja.

Szövegek (címsorok)

Amikor az ember az interneten szörföl, először a szövegekkel és a címsorokkal találkozik. Ezért fontos számunkra, mint tervezők, hogy az összes címsort egyszerre, egy elrendezésben dolgozzuk fel. A címsorokat általában H1-nek, H2-nek...Hn-nek hívják, mert így hívják őket html címkék.
Ebben az esetben az első címsor H1, majd H2 és így tovább. Az első a legjelentősebb címsor. A céloldalon ez lehet az első képernyőn, majd lejjebb. Az elrendezéseknél meg kell jeleníteni az összes címsort, hogy az elrendezéstervező megértse, hova kell elhelyezni, melyik címkét.

Linkek

Itt a szöveg, a cím és a kiemelt link. A hivatkozásoknak 4 állapota van: normál, lebegve (változhat a színe, aláhúzott vagy valami más, effektus), kattintott és meglátogatott állapot (kattintott, majd visszatért arra az oldalra, ahonnan elindult).

Gombok

Úgy néznek ki, mint a fizikai gombok, vagy legalábbis úgy tervezték őket, mint egy magnó gombjai. Ezért állapotuk van: mutass és kattints. Mindezt ki kell dolgozni.

Rádiógomb és jelölőnégyzetek

Bal oldalon egy rádiógomb (oroszul rádiógomb, de rádiógombnak fogom hívni, mert ez a tervezőknél bevett szokás), jobb oldalon egy jelölőnégyzet. A rádiógombban csak 1 opciót választhatunk, egy mosómedvét választottunk. A jelölőnégyzetben többszörös kijelölésre van lehetőség, pecsétet és mosómedvét választottunk.

Űrlapok

Az űrlapokat egyszerre több módon kell kidolgozni. Inaktív űrlap (felül), aktív (felülről a második), hibás űrlap (felülről a harmadik), sikeresen kitöltött űrlap (felülről a negyedik). Néha, ha hiba van az űrlapon, jobb, ha egy felugró feliratot készít a jobb oldalon, ahol egyértelműen jelezheti a hibát. Például, ha egy látogató betűket írt be az űrlapon telefonszám beírásához, készítsen egy feliratot, amely azt mondja: „Ebbe a mezőbe csak számok írhatók be”. Ez nagyban segíti az embereket az űrlap kitöltésében, és növeli annak konverzióját.

Felugrik

A felugró ablakokat vagy engedélyezési (bejelentkezési) felugró ablakokat mindig meg kell rajzolni. Ezen a képen nem, de általában az űrlapból való kilépéshez a jobb oldalon keresztet szokás tenni.

Lapszámozás

A lapozás egy oldalról oldalra történő navigáció, amely lehetővé teszi, hogy gyorsan váltson nagyszámú termék, lap vagy bármi között. Manapság az oldalszámozás elterjedt formája a VK hírfolyama, amikor az aljára görgetve több hír betöltődik. Ugyanezt megteheti az online áruházban. Ebben az esetben továbbra is meg kell adnia a „több termék megjelenítése” gombot. Ha sok már be van töltve és valamilyen preloadert mutat, akkor van egy elem, ami az oldal betöltését mutatja.

zsemlemorzsa

Gyakran megtalálhatóak az online áruházakban. Például a bal oldalon az áll, hogy webáruház, jobbra a férfiruhák, a jobbra még sportfelsőruházat, majd a dzsekik. Lehetővé teszi, hogy kattintson a kívánt szintre lépéshez. A zsemlemorzsa másik neve.

Előtöltő

Olyan dolog, ami azt mutatja, hogy valami betöltődik. Nagyon különböznek egymástól. A Google „GIF preloader” segítségével megtekintheti a változatosságot, és használhatja a kívántakat. Van egy speciális preload generátor, ahol kiválaszthatod, hogy hogy nézzen ki, milyen színű legyen, milyen formátumban kerüljön mentésre stb. Azt tanácsolom, hogy használjon szabványos dolgokat, például köröket és csíkokat; speciális projektekhez használhat valami szokatlant, vagy saját maga rajzolhatja meg a Photoshopban, és készíthet GIF-animációt. Ne vigyük túlzásba, ez természetesen fontos elem, de mégsem szabad sok időt szánni rá.

Táblázatok

A tervezők gyakran elfelejtenek táblázatot rajzolni. Például, ha online áruházat készít gyártási eszköz, majd megjelenik a leírásban és a termékkártyán összehasonlító jellemzők, súlyok és még valami. Kényelmes a táblázatok használata, ha a vonalak színe váltakozik, ezt a néző nagyon jól érzékeli. Ebben az esetben egy jelölőnégyzetekkel ellátott táblázat jelenik meg, erre nincs szükség. Ne feledkezzünk meg az asztalokról sem.

Menü

A menü a navigáció az egész oldalon. Ebben az esetben azt mutatta, hogy van egy előugró menü, amikor rámutat a kurzorra. Ezt le kell rajzolni. Figyelje meg, hogyan mutattam a navigációt és az interaktivitást. Most letöltöttem a png kurzort és a helyére tettem. Ha nagy az elrendezése, tegyen sok kurzort. Például, hogy megmutassa, hogyan működik a menü, hogyan néz ki egy gomb és hivatkozás, ha rámutatnak rá. Ugyanakkor ne feledkezzünk meg a normál állapotról. Így egy statikus elrendezésben egyszerűen megmutathatja, hogyan viselkednek a felhasználói felület elemei interaktív állapotban.
Ne feledje, hogy különböző kurzorok léteznek: PC-hez és Mac-hez.

Könnyű rákeresni a google-ban a „png cursor” kifejezésre. Ha a webhelyet Mac számítógépen jeleníti meg (makett segítségével MacBook-on), akkor a jobb kurzort kell használnia, ha PC-n (például makett inernet explorerrel), akkor a bal kurzort.

Itt vannak az alapvető dolgok az elemekről felhasználói felület. Ez az információ a webhelyek tervezése során használt kifejezések megismerésére szolgál. És ne felejtsd el olyan dolgokat rajzolni, mint a felugró menük, a gombok interaktivitása stb. Hagyja, hogy webhelyei ugyanúgy nézzenek ki az elrendezést követően, ahogyan megtervezte őket. Ámen :)

Egyetlen modern oldal sem használható. Van azonban egy mód, amellyel jelentősen időt takaríthat meg az elrendezésben és a tervezésben, beleértve a webhely felhasználói felületét is – ezek készen állnak UI elemkönyvtárak. Ma már annyi van belőlük, hogy egy elég nagy posztba csak ingyenes készleteket sikerült összegyűjtenem.

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

1. Az apró elemek elhelyezésének minden fárasztó munkáját már elvégezték Ön helyett.
2. Űrlapok animációja, gombokatés más elemeket már implementáltak és konfiguráltak a modern webdizájn trendeknek megfelelően.
3. Mindegyik készlet HTML UIösszetevők - ez általában nem az első kiadás. Minden JS hibakeresést végez, és stabilan működik. Ezzel egyidejűleg kísérleti úton meghatározták a halmaz egyik vagy másik elemére a leginkább használható megoldásokat.

Hol használhatom a HTML UI elemkészleteket?

Először is ez az 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 gyakorlatilag kozmetikai változtatások nélkül 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 átgondolt kialakítású, szinte bármilyen projektben használható. Minden elem hozzá van igazítva modern tendenciák webdesign, é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 készletek HTML UI elemek webhelyéhez. Ne felejtsen el feliratkozni a közösségi médiára. hálózatok.

Elem

Elég szép HTML eszköztár a webhelyhez. Szinte minden felhasználói felület elemet tartalmaz, beleértve párbeszédpanelek , formák, egyéni rácsok webdesignhoz, értesítések, menük és még sok más. 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 jó minőségű prototípus létrehozásához. Ez egyfajta weblaptervező, amelyből bármit létrehozhat. A készlet tartalmazza az összes elem teljes készletét, amely egy stílusos dizájnba van kombinálva.

Material Design Bootstrap

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

Lapos felhasználói felület

Elég jó minőségű UI beállítása lapos stílusban, amelynek alapja a reszponzív CSS Bootstrap 3 keretrendszer. Óriási előnye a PSD források elérhetősége.

Pure UI Kit

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

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

Minimális készlet, nem különösebben jó minőségű 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. Még ma is vannak problémák hol 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 egyedi dizájnú elem 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 Material Design stílusban a Bootstrapen. Körülbelül 25 alkatrészt tartalmaz, amelyek furcsa módon nagyon hasonlítanak az Angular eredeti Material Design dinamikájára. Létezik prémium verzió is.

Material Design Lite

Az egyik legfejlettebb Material Design UI keretek tovább HTML. Arzenáljába tartozik hatalmas szám alkatrészek. Ez egy egész kombájn. Szerintem ez az egyik legjobb megvalósítások Material Design nyelv HTML-ben.

Szemantikus felhasználói felület

Szép, könnyű és ügyes 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 nem kapcsolódik a Bootstraphez, ellentétben a cikkben szereplő legtöbb analógjával.

Elvileg egy profi számára semmi sem egyszerűbb, mint egy sematikus webhely-elrendezést kézzel felvázolni. A folyamat kissé bonyolultabbá válik a felhasználói felület elemeinek (és részleteinek) tervezése során. Itt nem nélkülözheti a képzelet, a tapasztalat és az inspiráció.

Ha nem tudja, hol kezdje (vagy már van egy ötlete, de időt szeretne megtakarítani a sablonok használatával), akkor olyan szolgáltatások jöhetnek a segítségére, mint a UI Patterns a klasszikus megvalósítások változataival vagy a letöltésre kész speciális készletekkel. Az utóbbiakat általában PSD formátumban szállítják, így bárki, aki tudja, hogyan kell dolgozni a Photoshopban, nem fogja nehézkessé tenni őket a saját módján.

Zöld WebUI Kit

Green WebUI Kit - 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), „kiárusítás” matrica, bejelentkezési űrlap, csúszka üres és előfizetési elemek - RSS, E-mail stb.

Minden elem kiváló minőségben készült, a dizájn 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, ez a kínaiaknak jobban megfelelne.

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

Sárga felhasználói felületelemek - a készlet 11 sárga felületelemet tartalmaz, beleértve a gombokat (Letöltés, Beküldés, Vásárlás most, keresés), szakaszokat (Kiemelt és dátum), görgetősávokat és folyamatjelző sávokat. Minden réteg be PSD fájl kényelmesen csoportosíthatók, így könnyedén módosíthatja egyik vagy másik felhasználói felület elemét. A szín ugyanolyan egyszerűen megváltoztatható, amire szüksége van (természetesen a Green WebUI készletben is).

Sajnos a Yellow UI Elements kevesebb elemet tartalmaz, mint a Green WebUI Kit, így előfordulhat, hogy néhány elemet más készletekből kell kölcsönöznie, vagy saját magának kell hozzáadnia.

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

Szép, könnyű felületelem-készlet a webfejlesztéshez. 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. Bárki, aki tudja, hogyan kell a Photoshopban dolgozni, egyáltalán nem okoz nehézséget a PSD-t az igényeinek megfelelően beállítani. Összességében a készlet mennyiségben és minőségben is nagyon jó.

Á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, jellegzetessége az elemek átlátszósága. Először is meglehetősen lenyűgözőnek tűnik, és jól illeszkedik modern design, másodszor pedig szinte bármilyen háttérszínhez passzol. 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 bemutatott UI interfész elemkészletek közül a Photoshop számára talál 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 webáruházhoz, a Magento Commerce kellemesen meglepheti képességeivel, funkcionalitásával és a projekt bővíthetőségével.

Örökre elmúltak azok az idők, amikor a legkülönfélébb dizájnerek mutatós, sőt, azt is mondanám, túl igényes tervezési projektekben pompáztak, mindenféle grafikus csengőt és sípot használva, eljött az ideje az új tervezési megoldásoknak, amelyek lehetővé teszik a felhasználók figyelmének összpontosítását a a webprojekt legfontosabb összetevői , nem pedig a színes burkolat.

A lapos felületelemek használata észrevétlenül, de magabiztosan áradt be a jelenetbe a Windows 8 megjelenésével és annak meglehetősen minimalista „Metro” stílusával. A lapos kialakítás minimalista megközelítésével elsősorban a könnyű használhatóságra összpontosít különféle típusok felhasználói eszközök, asztali számítógépeken és okostelefonokon egyaránt érintésvezérlés. Megkülönböztető tulajdonság A lapos minták tiszta vonalak, kétdimenziós objektumok, élénk színek, egyértelműen megjelölt hivatkozások és szans-serif betűtípusok. 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 webdizájn új trendjeit, és már a lapos tervezési megoldások támogatója lett, 10 teljesen ingyenes lapos kialakítású felhasználói felület elemkészletet ajánlok ú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.

Frissítse dizájnját vonzó, új stílusra ezekkel a csodálatos UI elemkészletekkel.

1. Pehelysúlyú felhasználói felület

Sarah Hunt ingyenes interfészelemeinek vonzó készlete, vektoros alapon jól megtervezett, rétegekre bontva, gondosan fájlba csomagolva, minden réteget intuitív névvel látnak el. A szöveg és a színek könnyen szerkeszthetők. A tervezéshez ingyenesen használható betűtípust használtak.

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 ingyenes személyes vagy kereskedelmi projektekhez. Letöltheti a készletet, és azonnal elkezdheti.

2. Modern Touch UI Kit

A felhasználói felület elemeinek nagyszerű készletének ingyenes alapverziója PSD formátum, mellyel egy kifogástalan dizájnnal működő, funkcionális weboldalt hozhat létre A tipográfia egyensúlya, az elemek összsúlya és pozicionálása, korrigált behúzások, margók és színpaletta. Általános stílus a tartalom jellegzetes hangsúlyozásával. Teljes HTML verzió Ennek a csodálatos készletnek a része a regisztrált felhasználók számára elérhető, ha előfizet a PixelKit szolgáltatásra.

3. Függőleges végtelen

4. Square UI ingyenes

Egy újabb csodálatos és jól csomagolt készlet tőle Designmodo, nyilvánosan elérhető, kivéve a hírre való hivatalos előfizetés esetén, hogy letöltési linket kapjon. 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 valóban kiváló minőségű, és számos jól megtervezett webkomponenst tartalmaz a webhelyek tervezéséhez. Letöltés ingyenes verzióés ha tetszik 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ési nyalánkságot tartalmaz egy teljes értékű weboldal 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, a teljes színpalettán a kékes tónusok túlsúlyával. A készlet összes eleme egyetlen, jól szervezett PSD-fájlban érhető el, és könnyen szerkeszthető. Amint látja, nincs színzavar, minden szigorú, és kizárólag a tartalom könnyebb érzékelésére irányul.

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 UI elemet tartalmaz rétegesen és PSD fájlba kombinálva, kialakítása ideális webes projektek fejlesztéséhez és mobil alkalmazások. Az alkatrészek kialakításáról első pillantásra kitalálhatja a stílust GUI Wihdows 8, precízen megrajzolt elemek élei, lágy kék-kék tónusok és kiválóan olvasható betűtípus.

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

Kétségtelenül megérdemli a figyelmet a webes felület elemeinek lenyűgöző csomagja, amelyet a iparosok szabadon hozzáférhetővé tettek. A szerzők munkájukban egy kicsit eltértek a 100%-ban lapos kialakítás vonalától, hozzátéve egyedi komponensek egy kis hangerőt enyhén lekerekített sarkokkal, és egy világos árnyékot az elemek alsó szegélyére. Ez a tervezési döntés indokolt a webdesign változó prioritásainak átmeneti időszakában. Minden olyan elem, amely a telephelyépítők produktív munkájához szükséges, beleértve teljes készlet. Nincs más hátra, mint letölteni, kicsomagolni az archívumot és elkezdeni az alkotást, még 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 elemkészletek között. A legapróbb részletekig részletezett, a készlet elemeinek lapos kialakítása lenyűgöző és kreatív munkára ösztönöz. Ez a felhasználói felület készlet ingyenesen használható magán- és kereskedelmi projektekben is, csak szórakozásból és az üzlet érdekében.

10. Bootflat 1.0.1

Az áttekintés végén figyelmedbe ajánlom a HTML, CSS, JS egyfajta gyűjteményét, valamint a weboldal-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 a Bootstrap gazdag funkcióival. HTML5 és CSS3 támogatás, kiváló színséma és stílus a továbbfejlesztett alapján Bootstrap stílus 3. 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átozás nélkül, és alakítsa 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 szalasszuk el a pillanatot, időben ugorjunk fel a rohanó vonatra, hiszen minden új trendnek megvan a maga életciklusés egyetlen formatervezési irányzat, még a legnépszerűbb sem lehet örökké egy hullám csúcsán. Manapság több okból is érdemes ezt az érdekes tervezési stílust alkalmazni új projektek kidolgozásakor, ne menjen túl messzire a divat hajszolásával, hanem mindent érzékletesen, érzékkel és rendesen csináljon. 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 internet felhasználói közösségétől.