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 annyi van belőlük, hogy egy meglehetősen nagy posztba csak ingyenes készleteket lehetett gyűjteni.

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

1. Az apró elemek elkészítésének minden fárasztó munkáját már elvégezték.
2. Alakzat animáció, 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 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 kis kozmetikai változtatásokkal 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.

Bá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 olyan stílusú lesz, mint az Ön projektje.

Így. Figyelmedbe 20 ingyenes HTML UI elemkészlet az Ön 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 az összes felhasználói felület elemet tartalmazza, beleértve párbeszédpanelek, formák, egyéni webdesign rácsok, értesítések, menük stb. Minden elem és animációjuk könnyen észlelhető, és nem tölti be az oldalt. A Vue.js 2.0 alapján

Tervező blokkok

170+ HTML blokk minőségi prototípus létrehozásához. Ez egyfajta weblapkészítő, amitől bármit elvakíthatsz. A készlet egy komplett elemet tartalmaz egy stílusban.

Material Design Bootstrap

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

Lapos felhasználói felület

Kellően magas minőség Lapos stílusú felhasználói felület, amelynek alapja a Reszponzív CSS Framework Bootstrap 3. Hatalmas plusz 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 felhasználói felületi keretrendszer 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

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 több mint 70 felhasználói felület komponenst tartalmaz. Ez pedig egy ukrán fejlesztő munkája.

Propeller

Ingyenes CSS-keretrendszer a Material Design stílusában a Bootstrapen. Körülbelül 25 alkatrészt tartalmaz, amelyek furcsa módon meglehetősen erő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 készült, és semmi köze a Bootstraphez, ellentétben a cikkben szereplő legtöbb társával.

Az interfész tervezése manapság nagyon igényes munka. Hiszen a közönséged lojalitása most nagyban függ a felülettől, legyen az mobil program, webes alkalmazás vagy weboldal. Elvileg elég nehéz valami szuper eredetit kitalálni, de időnként új trendek lépnek be például a piacra, és a fejlesztőknek ki kell igazítaniuk projektjeiken.

A korábbi stílusos színekkel ellentétben ezúttal a legtöbb anyag lapos (lapos) kialakítású. Bár, mint mondják, nincsenek egyedül. A PSD készletek letöltési oldalához kattintson a képre.

Itt látható a különböző felületelemek maximális száma: menük, oszlopok, szavazás, könyvjelzők, közösségi oldalak, profil, gombok, még idővonal is van.

A webhely felületének klasszikus felhasználói felülete menü, oldalszámozás, funkcionális keresési blokkok, naptár, dátumok, bejelentkezési blokk és még egy számológép is.

Mint mindhárom előző készlet, ez is lapos elemeket tartalmaz. Elvileg nincs belőlük annyi: gombok, kapcsolók, csúszkák. Alkalmasabb néhány mobilalkalmazás beállításaihoz.

Ennek a felhasználói felületnek nagyon szép és stílusos színvilága van. A felület egyszerű, akár légiesnek is mondható. Van egy lejátszó, egy időjárás-blokk, egy blog a bejelentkezéshez, a kereséshez és a különféle gombokhoz.

Az előző után egy nagyon kontrasztos és sötét UI készlet. Őszintén szólva nem vagyok híve az ilyen élénk színválasztéknak, de hátha valakinek jól jön. A menün és a profilon kívül található a videó- ​​és audiolejátszók felülete, oszlopok és gombok.

Vizuálisan egyes felületelemek nagyon hasonlítanak a Twitter korábbi dizájnjához. Vannak azonban más blokkok is, amelyek meglehetősen stílusosnak tűnnek. A felület modern mobilalkalmazáshoz vagy közösségi szolgáltatáshoz alkalmas.

Egy másik érdekes PSD UI készlet a tervezők számára. Van egy profilblokk, időjárás, játékos, bejelentkezési űrlap, valamint menü és számos grafikon. Minden nagyon harmonikusnak és stílusosnak tűnik.

Ma megosztom tapasztalataimat az irányelvek grafikus dokumentációjának fejlesztésével kapcsolatban. Ez lett a második megbízásom Viline-nél. És ahogy az első részből nem emlékszel, újraterveztem a videó tanfolyam oldalát. Ebben a cikkben leírom az összes elem és a különböző állapotok stílusának kialakításának folyamatát. Ki fogok találni és megfogalmazok néhány szabályt, hogy a felület kiegyensúlyozottá és hozzáférhetővé váljon, figyelembe véve a közönséget…

Egyébként, ha Figmát használsz, ajánlom figyelmesen a mi kész tervezőrendszerek. Segítenek a szabadúszóknak havonta több feladat elvégzésében, a programozók gyönyörű alkalmazásokat hozhatnak létre önállóan, és a csapatvezetők gyorsabban „átfutnak” a sprinteken, a csapatmunkához kész tervezőrendszerek segítségével.

Ha pedig komoly projektje van, akkor csapatunk készen áll a fejlesztéseink alapján a szervezeten belüli tervezési rendszer kiépítésére és a Figma segítségével a konkrét feladatokhoz igazítani. Web / asztali számítógép és bármilyen mobil. Ismerjük a React / React Native-t is. Írj T-nek: @kamushken

Az első fejezetben elfelejtettem megemlíteni, hogy a jóváhagyott színséma alapján kellett eljárni. A feladat nem az volt, hogy új színeket találjunk ki és javasoljunk. A szín kiválasztásához néha az Adobe Color CC-t (engedélyezés szükséges (!)) vagy a ColorScheme.ru-t használom. Beillesztem a fő színkódot, majd kiválasztom az árnyalatokat különböző módokban: analóg, monokróm, triád stb. Nagyon erős és harmonikus kontrasztok választhatók, például a triád módban. Ez én vagyok a tény, hogy volt egy jobb módja annak, hogy megszerezze a tartományt, de nem voltak ilyen kívánságok.

Kérdéseim voltak az Open Sans betűtípussal kapcsolatban is, amelyet az oldal jelenlegi verziójában használtak. Úgy tűnik, egyre ritkábban fordul elő a mindennapi világban. Most aktuális: Helvetica, Lato, Source Sans Pro, Roboto stb. De ez a kérdés, mint kiderült, a marketingesek újragondolásának szakaszában volt.

Azonnal lefoglalom: itt nem fogsz látni színes és divatos képeket, amelyek a tetején bukkannak fel behance-en vagy csöpögnek. Kicsit kétlem, hogy a nők sokáig tudnak maradni egy ilyen stílusban kialakított oldalon. Ez a fő közönség, és ezt a tényezőt figyelembe fogom venni. De ennek ellenére igyekszem javítani az összképen, amennyire a megrendelő által felállított keretek és a tapasztalataim engedik.

Irányelvek

Az irányelvek a termék megjelenésének alakítására vonatkozó szabályok és/vagy ajánlások összessége. Ezeket a tervező alakítja ki, és egyértelműen leírja a fejlesztők számára. Egyrészt ez egy mondat az elsőnek, mert. a jövőben a termék új szakaszai tervező nélkül, grafikus dokumentumra támaszkodva jeleníthetők meg. Másrészt manapság már egy interfész tervezői munka is kötelező az ilyen dokumentációk mellé, most elég magas a léc. Tehát az irányelvek ajánlások a színekre, betűtípusokra, elemekre, állapotokra, ikonográfiára, méretekre és behúzásokra vonatkozóan.

Hadd emlékeztesselek arra, hogy a webes termék fő közönsége esetemben a fiatal vagy kismamák. Ragaszkodnom kell a következőkhöz: ügyfél által jóváhagyott színek; az általa optimálisnak ítélt betűtípus a közönsége számára; elem sarok sugara. Ez utóbbi azért szükséges, hogy a szép nem szemében az elemek ne tűnjenek túl „élesnek” vagy „szögletesnek”.

1/15: Font Circe

Fontos hír a marketing csapattól az elején: eltávolodunk az Open Sans-tól, és a Circe-t vesszük a fő betűtípusnak.

Betűtípus leírása

A Circe egy geometrikus groteszk emberi arccal és számos szép kiegészítéssel. A betűtípus 6 különböző telítettségű súlyból áll, a vékonytól az extra vastagig. A betűtípus nevét mind a geometrikus formáknak és a tömegszórakoztatássá vált alkotás folyamatának, mind pedig sajátos, kissé veszélyes karakterének köszönheti. Míg a Circe alapformái inkább higgadt geometriai groteszkek, némi humanista jegyekkel, addig az alternatív formák és swash-jelek teljesen megváltoztathatják a betűtípus jellegét. Egyrészt a tervező a cirill betűkkel még soha nem látott formákat élvezheti, másrészt azonban ennek a sokféleségnek csak a felhasználó ízlése és józan esze szab határt, így bizonyos mértékig a font veszélyessé válik számára, mint egy boszorkány Circe az Odyssey tengerészei számára. A Circe rendkívül kibővített karakterkompozíciója, amely a legtöbb európai nyelv latin és cirill karaktereit egyaránt tartalmazza, valamint rengeteg alternatív változatot és virágzó változatot tartalmaz, stilisztikai készletekbe szerveződik, amelyek lehetővé teszik a karakterek gyors, kényelmes és rugalmas megváltoztatását. a készletből. A betűtípus jó kis szövegszedésben és nagy méretben is, például folyóiratok címsoraiban, poszterekben stb. Tervező - Alexandra Korolkova. A betűtípust a ParaType adta ki 2011-ben.

Saját szavaival fogalmazva: a betűtípus nem szokványos a weben, közelebb áll a tipográfiai stílushoz, „irodalmi hangzás” van benne. Ezek pusztán az én asszociációim. Ha összehasonlítjuk az Open Sanst és a Circe-t, akkor az utóbbi nyer egy kicsit a sűrűség tekintetében.


Oké, az új betűtípus jóváhagyva. A marketingszakemberek javaslatai a sarkok lekerekítésére: használjon 6 képpont sugarat. Egyetértek, figyelembe veszem! (Egyébként elég ritka kívánság a gyakorlatomban). Elkezdhet dolgozni az összes elemen.

2/15: Színek

A középső paletta az ügyféltől beérkező séma. Bal oldali színséma: a zöldet enyhén világosítottam (nekünk lebegtetésnél hasznos lesz) és a fehér mellé tettem. Így nagyjából el tudja képzelni, hogyan fog kinézni egy tipikus kártya a dizájnban. A jobb oldali árnyalatok a kontrasztos fekete melletti zöld visszaadás példái. Nem látták előre, hogy sürgősen szükség lenne ilyen felhasználásra, inkább a változtatás kedvéért tették. Az oldal és a felhasználói felület általános háttere továbbra is #EFEFEF (világosszürke), így elkerülhető az erős kontraszt a mobileszközökön.

3/15: Tipográfia

Ezek a szövegméret használatára vonatkozó irányelvek. Rajzoltam egy szövegbekezdést, beágyaztam egy idézetet. Többféle fejlécet készített. És hozzáadott rendes és számozott listákat. Itt van egy példa a görgetősávra is, később került hozzáadásra. Valójában ezeknek a szöveges szabályoknak nem kell mereveknek lenniük. Ha egy bekezdést kisméretű, 14 képpontos betűtípussal kell beírnia – igen, kérem. A legfontosabb dolog a szöveg arányosságának betartása. Például furcsán nézne ki egy kis betűs szöveg bekezdése nagy „Tartalomjegyzék” felirattal.

4/15: Linkek

Semmi új vagy rendkívüli. Általánosságban elmondható, hogy a linkek színe továbbra is vitatott. Az én álláspontom a következő: ha a design kék vagy cián árnyalatokat használ a linkhez, akkor aláhúzás nélkül is megteheti. Ha a saját színemet használom, akkor személy szerint mindig aláhúzott aláhúzott betűtípust használok. Ez valami nem hivatalos szabvány, és a felhasználó gyorsan rájön, hogy ez a szöveg kattintható. Később egyébként a marketingesek narancssárgára változtatták a linkek színét. Nem bántam, amíg a linkek aláhúzottak maradnak.

5/15: Gombok

Ebben a részben figyelembe kell vennie a gombok összes lehetséges állapotát, és ki kell dolgoznia azokat. A gombtípusokat elsődleges „elsődleges” és másodlagos „másodlagos” (vagy más néven szellemgombra) választom. Logikusan a fő gomb az elsőbbségi művelethez vezet, a másodlagos gomb pedig ahhoz a művelethez, amit kevesebbet akarunk a felhasználótól. Ismét tervezési manipuláció. Íme egy példa az ilyen felhasználásra:

Manapság a Google Material Design elméleteit aktívan használják a tervezésben, így manapság sok gomb ismét gombnak tűnt. A való világ néhány fizikáját elkezdték alkalmazni az interfész tervezésében. A gombnak általában van egy kis árnyéka; az egér lebegtetése során az árnyék nagyobb és homályosabb lesz - a gomb magasabbra „emelkedik”; kattintáskor ez az árnyék eltűnik, szimulálva a gomb „megnyomását”. Itt van egy ilyen pszeudo-háromdimenziósság, ami egy kicsit jobban összekapcsolja a dizájnt a való világgal. Ha jól emlékszem, ez az okostévé-alkalmazások irányelveiből származik, ahol a felhasználók egy bizonyos távolságon belül ülnek a tévétől, és ott létfontosságú, hogy jól látható árnyékokat használjanak nagy elmosódási tényezővel. Ez nagyban megkönnyíti a történések észlelését.

6/15: Szöveg bevitele

Ha ismét a GMD-re hivatkozunk, láthatjuk, hogy az ilyen bemenetek használatának tendenciája a következő:

Egyre gyakoribb a webes termékekben. Ha jobban szereti az Androidot, érteni vagy az informatika területén dolgozik, akkor ilyen bemenetekkel olyan vagy, mint hal a vízben. De a többnyire iPhone-t kedvelő női közönség számára a szövegbeviteli elemek ilyen aszketikus stílusa inkább fájdalmat okoz. Megpróbáltam megtalálni a középutat, és olyan kialakítást javasoltam, amikor a bemenet továbbra is bemenet marad, de van néhány GMD-gyökere is:

Az alábbi beviteli űrlapokon 1 képpontos aláhúzás-árnyék található, elmosódás nélkül. Ha az egér fölé viszi az egeret, az zöldre vált; rákattintva megvastagodik és zöldre vált, demonstrálva a működés közbeni állapotot. A jobb oldali ceruza ikon kísérleti kísérlet a "túl sok tisztaság" hozzáadására. Egyes esetekben ez az ikon megerősítheti a jelentést: a szokásos bevitel egy ceruza; keresési bemenet - nagyító; jelszó bevitele - például lakat ikon; stb. Egy példa a cikk végén lesz.

7/15: Legördülő menük

A válaszadási elveiket ugyanúgy hajtják végre, mint a bemeneteket. Az egér mozgatása megváltoztatja az ikon és az aláhúzás színét. A legördülő lista kibontásakor egy terjedelmesebb árnyék jelenik meg, továbbra is „feljebb emelve” az elemet a síkban. Ha kellő figyelemmel közelíti meg a dolgot, akkor gondoljon a kiterjesztett állapotra. Az ikon megfordított, az aktív vonal félkövér, és lebegtetéskor a hátteret a fő zöld szín világos árnyalatával színezzük.

8/15: Csúszdák

Náluk minden rendkívül átlátható. Nem találok ki itt semmi újat, a standard alkatrész, analógia útján, az útmutatóknak megfelelően lett kialakítva: betűtípusok, színek és méretek. A csúszka mozgatható akár az egér húzásával, akár egy számértékre kattintva, például amikor a gyermek életkorát javasoljuk „tól” és „ig”.

9/15: Lapok / lapok

– Igen, minden világos, folytassuk!

10/15: Kiválasztási elemek

Itt csoportosítottam az összes többi elemet: állapotkiválasztás (további szűrés), választógombok, jelölőnégyzetek és választógombok. Az utolsó kettő esetében ez csak egy emlékeztető a fejlesztőknek, hogy intenzív szövegstílussal javítjuk a kijelölés láthatóságát. Nos, a többivel nekem úgy tűnik, minden nyilvánvaló.

11/15: Táblázat

Hozzáadtam egy készletet és egy táblázat példáját is. Minden szabványos, csak általános hasonló stílust használok. Természetesen a táblázat hasznosabb, ha megadjuk a behúzás specifikációit. Bővebben róluk egyébként a fejezet végén.

12/15: Ikonográfia

Javaslatok és példák az ikonok használatára. Úgy gondolom, hogy a GMD intenzív és kiemelkedő ikonjai akadályozták az ikonográfia fejlődését. Egyszer voltak pixelesek, majd konvexek, valahol közöttük az ios körvonalakkal (körvonalakkal) belépett a trendbe, a közelben egy színes lapos stílus villant fel rövid ideig (emlékszel, amikor a végtelen álárnyék szögben nyúlt el a tárgytól?) . Aztán jött a Google, és elmondta, hogyan kell csinálni. És ha nem megy mélyen a dalszövegbe, akkor mostanában csak a GMD ikonokat használom sokoldalúságuk és teljesítményük miatt. Független ikontervezőktől sok metaforát átvehet (ingyenes, minden méretet megad, png/svg/zip, tipp: kényelmes a jobb gombbal kattintva, és letöltheti a kívánt méretet). Szerintem az intenzív ikonok érthetőbbek és észrevehetőbbek (és a KRESZ-táblákra kellene utalni).

13/15: Kártyák

Ez már átmenet az egyes kidolgozott elemekről azok kombinációira. Több kártyalehetőséget állítottam össze az oldalon való használatra, mert. ez egy naprakész módja volt bizonyos információk és az ügyfél személyes preferenciáinak bemutatásának.

De mindig emlékeztetem Önt arra, hogy nem kívánatos túlzásba vinni a tervezést. Jelentésük leginkább a specifikációkkal együtt érthető:

A kártyák összetételének meghatározásakor nincsenek szigorú szabályok. Ha követi az általam jelzett behúzások méreteit, akkor szinte bármelyik egységes lesz a kidolgozott irányelvekkel.

14/15: Bejelentkezés

Bónuszként kidolgoztam a bejelentkezési/regisztrációs ablakokat, elkészítettem egy elrendezést használati példával. Erre inkább annak vizualizálására van szükség, hogy a jövőben az én közreműködésem nélkül a projekt főállású webdesignere hogyan tudna összeállítani bármilyen részt a termékhez. Csak annyit kell tennie, hogy a kész elemeket átveszi a forrásból, és az előírásoknak megfelelően egyenletesen elrendezi.

15/15: Műszaki adatok

A forrásban külön csoportban vannak. A csoport láthatóvá tehető és a specifikációk sorsolásra kerülnek. Nélkülük ez a felhasználói felület készlet hiányos lenne. A méretarányok és a behúzások betartása kiegyensúlyozott interfészhez vezet. Ha nem adok erre vonatkozó utasításokat, akkor fennáll annak a veszélye, hogy másképp fogják csinálni. És akkor nem tudom garantálni a minőségi megvalósítást.

Ha a 8 képpontos rácsot részesíti előnyben, ne feledje, hogy minden kitöltés 8 többszöröse; ha 10 képpontos rácsot használ, mint az én esetemben, akkor ebben a kialakításban nem talál 13 vagy 27 képpontos távolságot az elemek között, minden kitöltés 10 többszöröse lesz.

A színek számára és árnyalataira is vannak szabályok: én például nem használtam túl sok szürke árnyalatot - ebben a készletben háromnál nem volt több. Biztos vagyok benne, hogy ilyen saját interfész szabályok egyszerűbb a tervezők és a fejlesztők számára egyaránt. Bár vannak kivételek, ha a rendszer különböző állapotokban ad visszajelzést, akkor piros és kék stb. a szemantikai különbség fokozása érdekében (például felugró értesítéseknél).

fejezet Következtetés

• Az útmutató grafikus dokumentáció egy vizuális nyelv a fejlesztők számára, hogy folytassák a termék fejlesztését, és ne vonják be újra a tervezőt.
• A jövőbeli termék céljainak figyelembe vételével egy irányvonalat lehet kidolgozni. A betűtípusok, színek és általános stílus figyelembe veheti az erőforrás/alkalmazás jövőbeli felhasználóinak sajátosságait.
• Az interakció optimalizálása érdekében az irányelveknek ajánlásokat kell tartalmazniuk az elemek méretére és behúzására vonatkozóan.
• Kívánatos, de nem szükséges, hogy a készlet tartalmazzon példákat kész megoldásokra is. Ez lehet bevásárlókosár, termékoldal, ismerős hírfolyam, kártyák, céloldal stb.
• A modern megközelítés az, hogy nem egy sketch / psd fájlt küldenek vissza a kliensnek, hanem a html / css kódot. Egy ideje teljesen áttértem az Axure-ra, és egész jól teszi a dolgát.

Kiegészítésként azt javaslom, hogy nézzük meg, hogyan oldanak meg hasonló problémákat az üzlet többi kollégája. Jó, ha van kitől példát venni:

1. Jan Losert nagyon klassz, az övé

Az alkalmazások vagy weboldalak felületének kialakítása során célszerű figyelembe venni más szakemberek tapasztalatait és a tipikus problémák megoldásának legjobb lehetőségeit. Ez lehetővé teszi, hogy elkerülje a szükségtelen hibákat, és jó visszajelzéseket kapjon a felhasználóktól. A About rovatban néhány megjegyzést tettünk közzé ebben a témában: például 20 forrás áttekintése volt a -val, valamint különféle cikkek a hamburger menüről, az oldalak gombjainak fejlődésének történetéről stb.

Ma egy hasonló szolgáltatást fogunk fontolóra venni UI minták, amely a tipikus tervezési minták egyfajta könyvtára, és hasznos lehet a felhasználói felület tervezésénél.

A forrás szerzője Anders Toxboe dán webfejlesztő, aki még 2007-ben indította el. A projekt fő gondolata, hogy egy helyen gyűjtsük össze az összes megoldást az interfészépítés klasszikus problémáira és feladataira. Ezt példák válogatásával és a különböző módszerek részletes leírásával valósítjuk meg, annak magyarázatával, hogy az egyik vagy másik megközelítést hogyan és miért érdemes a legjobban alkalmazni.

Az UI Patterns projekt több szolgáltatást/szakaszt tartalmaz:

• Tervezési minták – közvetlenül a felületminták könyvtára.
• Képernyőképek - az összes felhasználói felület képernyőképének archívuma (majdnem 16 ezer).
• Blog (sajnos nagyon kevés publikáció és ritkán jönnek ki).
• UI Patterns Weekly – a témával kapcsolatos hasznos cikkekre mutató hivatkozások válogatása (rendszeresen frissítve).
• Hírlevél ingyenes leckékkel.
• Lehetőség saját képernyőképek hozzáadására az interfészekről.
• Fizetett képzési chipek - a fejlesztők online tanfolyamot tartanak a pszichológiai szempontból hatékony tervezésről és a felhasználói cselekvések befolyásolására szolgáló különféle eszközökről. Ezen túlmenően az oldalon különféle viselkedési mintákkal rendelkező kártyapaklit árulnak, ami hasznos lehet a tervezésben.

Minket inkább az első két pont érdekel, ezért ezeket figyelembe vesszük.

UI tervezési minták

Általában hasonló megvalósítási lehetőségeket használnak ugyanazon problémák megoldására. Ha megnézzük a választékot, láthatjuk, hogy a tervezésben szinte minden hagyományos "funkció" (kereső, gombok, jelölőnégyzetek) azonos működési elvű. Hasonlóképpen, összetettebb megoldásoknál szabványosított megközelítést alkalmaznak. Az UI Patterns szolgáltatás tartalmazza a legrelevánsabb tervezési mintákat.

Több kategóriába sorolhatók:

• fülek;
• menü;
• tartalom;
• űrlapok (mellesleg azt tanácsoljuk, hogy olvassa el a fejlesztést);
• asztalok;
• képek;
• adatformázás;
• társadalmi;
• a boltok;
• keresés stb.

Válassza ki mondjuk a menü kenyérmorzsát (Breadcrumbs), és a megfelelő oldalon a probléma részletes leírását fogja látni:

Ez az információ segít a kezdő tervezőknek és tervezőknek megérteni, hogy egyáltalán miért találták ki a jelenlegi elemet, és milyen feladat megoldását teszi lehetővé. Leírás van még ezen funkció megvalósításának lehetőségeiről, azok indoklásáról, megvalósítási tippek + képernyőképek. Egyébként innen vettünk néhány képet egy cikkhez. Ezenkívül az oldalon megjegyzések találhatók, ahol megvitathatja a feljegyzést és kérdéseket tehet fel.

Meggyőző tervezési minták

Szintén ebben a részben találja meg az úgynevezett motiváló (meggyőző) felületi mintákat. Ez magában foglalja azokat az elemeket, amelyek befolyásolják a felhasználók cselekedeteit és megítélését, lehetővé teszik számukra, hogy aktívabb munkában vegyenek részt az oldalon, bizonyos döntések meghozatalára késztetik őket stb.

A legegyszerűbb példa a „játékmechanika” hozzáadása az oldalhoz/alkalmazáshoz, amikor a felhasználók munkájuk során valamilyen teljesítményt (jelvényt) kaphatnak, vagy új szinteket nyithatnak meg fejlettebb funkciókkal. Mindezek nagyon hasznos dolgok a közönséggel való hatékony és interaktív interakcióhoz.

Interfész Screenshot Library

Az előző résztől eltérően a képarchívumban nincs további leírás a kérdéses problémáról, ezek csak képernyőképek. Kategóriákra és témákra vannak felosztva, valamint van néhány további eszközük. Válasszunk például galériákat:

A szűrőkben beállíthatja a színt, a tartományt, vagy akár a keresési űrlapot is használhatja. Amikor a képernyőkép oldalára lép, az eredeti méretében fog látni.

Teljes. Általánosságban elmondható, hogy az UI Patterns szolgáltatás kiváló asszisztens lesz minden tervező számára: kezdőknek és profi szakembereknek egyaránt. Az interfésztervezési minták választéka nagyon jó – a 16 000 illusztráció mellett részletes elemzés található a különféle UX/UI feladatokról tippekkel, megvalósítási lehetőségekkel stb.

Ha ismersz hasonló projekteket, dobd be a linkeket a megjegyzésekbe.