Interfejs użytkownika (w języku angielskim. Interfejs użytkownika, UI) jest skrótem od YI - jest to środowisko interakcji użytkownika z komputerem. Są to przyciski, menu, przyciski radiowe, pola wyboru i wiele innych. Teraz nie jest jasne, poniżej wyjaśnię wszystkie zawiłe słowa. Jeśli dana osoba używa telefon komórkowy, wówczas interfejsem użytkownika są aplikacje lub przeglądarka.

Podstawowe elementy interfejsu użytkownika

Teraz wyjaśnię słowa, które napisałem powyżej. Wszystko powinno się ułożyć. Nie bez powodu mówię o interfejsie użytkownika. Ta informacja jest potrzebna, abyś nie zapomniał narysować wszystkich tych elementów w układach. Jeśli projektant układu graficznego nie znajdzie tego w układzie, zrobi to tak, jak uważa, że ​​jest to słuszne.

Teksty (tytuły)

Kiedy dana osoba jest w sieci, pierwszą rzeczą, z którą się spotyka, są teksty i nagłówki. Dlatego tak ważne jest dla nas jako projektantów opracowanie wszystkich nagłówków naraz w jednym układzie. Nagłówki są zwykle nazywane H1, H2 ... Hn, ponieważ tak się nazywają w tagi html.
W tym przypadku pierwszy nagłówek to H1, potem H2 i tak dalej. Pierwszy to najważniejszy tytuł. Na stronie docelowej może to być na pierwszym ekranie, niżej. W układach musisz pokazać wszystkie nagłówki, aby projektant układu zrozumiał, gdzie umieścić który znacznik.

Spinki do mankietów

Oto tekst, tytuł i podświetlony link. Linki mają 4 stany: normalny, po najechaniu (może zmienić kolor, podkreślenie lub coś innego, efekt), kliknięty i odwiedzony (kliknięty, a następnie wrócił do strony, z której wyszedł).

guziki

Wyglądają jak fizyczne przyciski, a przynajmniej są pomyślane jak przyciski na magnetofonie. Dlatego mają stany: najedź i kliknij. Wszystko to musi zostać wypracowane.

Przycisk radiowy i pola wyboru

Po lewej stronie znajduje się przycisk radiowy (po rosyjsku przycisk radiowy, ale nazwę go przyciskiem radiowym, ponieważ jest to zwyczajowe dla projektantów), po prawej jest pole wyboru. W przycisku radiowym możesz wybrać tylko 1 opcję, wybraliśmy szopa pracza. W checkboxie możliwość wielokrotnego wyboru wybraliśmy fokę i szopa pracza.

Formularze

Formularze należy opracować w kilku formach jednocześnie. Formularz nieaktywny (u góry), aktywny (drugi od góry), formularz z błędem (trzeci od góry), formularz pomyślnie wypełniony (czwarty od góry). Czasami, gdy w formularzu jest błąd, lepiej zrobić wyskakujące okienko po prawej stronie, w którym możesz wyraźnie wskazać błąd. Na przykład, jeśli gość wpisał litery w formularzu do wpisania numeru telefonu, zrób napis „w tym polu można wpisać tylko cyfry” na objaśnieniu. Pomoże to ludziom wypełnić formularz i zwiększyć jego konwersję.

Wyskakujące okienko

Wyskakujące okienka lub wyskakujące okienka autoryzacji (logowania) do serwisu powinny być zawsze narysowane. Nie na tym zdjęciu, ale ogólnie zwyczajowo robi się krzyż po prawej stronie, aby wyjść z formularza.

Paginacja

Paginacja - nawigacja po stronie, która pozwala szybko przełączać się między dużą liczbą produktów, arkuszy lub czegokolwiek. Teraz taka forma paginacji, jak kanał informacyjny w VK, jest powszechna, gdy przewijasz w dół i ładowanych jest więcej wiadomości. To samo można zrobić w sklepie internetowym. W takim przypadku nadal musisz podać przycisk „pokaż więcej produktów”. Jeśli jest ich już dużo i pokazuje jakiś preloader, to jest element, który pokazuje ładowanie strony.

bułka tarta

Często spotykany w sklepie internetowym. Na przykład sklep internetowy jest napisany po lewej stronie, męskie rzeczy są napisane po prawej, sportowa odzież wierzchnia jest nadal po prawej, a następnie kurtki. Pozwala przejść w górę po kliknięciu żądanego poziomu w górę. Nazywany jest również łańcuchem nawigacyjnym.

Wstępne ładowanie

Rzecz, która pokazuje, że coś się ładuje. Są bardzo różne. Możesz google "preloader gifs" i ​​zobaczyć różnorodność i użyć tych, które lubisz. Istnieje specjalny generator wstępnego ładowania, w którym możesz wybrać, jak będzie wyglądać, jaki kolor, w jakim formacie go zapisać i tak dalej. Radzę używać standardowych rzeczy, takich jak koła i paski, do specjalnych projektów możesz użyć czegoś nietypowego lub możesz samodzielnie narysować to w Photoshopie i zrobić animację GIF. Nie przesadzaj, jest to oczywiście ważny element, ale nie należy poświęcać temu dużo czasu.

stoły

Często projektanci zapominają o narysowaniu stołu. Na przykład, jeśli budujesz sklep internetowy sprzęt produkcyjny, następnie w opisie i na karcie produktu pojawia się charakterystyka porównawcza, ciężary i coś jeszcze. Wygodnie jest korzystać z tabel, gdy linie zmieniają kolor, co jest bardzo dobrze odbierane przez widza. W takim przypadku wyświetlana jest tabela z polami wyboru, nie jest to konieczne. Nie zapomnij o stołach.

Menu

Menu to nawigacja po całej witrynie. W tym przypadku pokazał, że po najechaniu kursorem pojawi się menu podręczne. To trzeba narysować. Zwróć uwagę, jak pokazałem zawis i interaktywność. Wystarczy pobrać kursor png i umieścić go na miejscu. Jeśli masz duży układ, umieść dużo kursorów. Na przykład, aby pokazać, jak działa menu, jak przycisk i link wyglądają po najechaniu myszą. Jednocześnie nie zapomnij o zwykłym stanie. Dzięki temu w układzie statycznym można łatwo pokazać, jak elementy interfejsu użytkownika zachowują się w stanie interaktywnym.
Pamiętaj, że kursory są różne: na PC i Mac.

Łatwe do google "kursor png". Jeśli pokazujesz witrynę na maku (używasz makiety z macbookiem), musisz użyć prawego kursora, jeśli na komputerze (na przykład makiety z Internet Explorerem), to lewego.

Oto podstawowe rzeczy dotyczące elementów interfejs użytkownika. Ta informacja ma na celu poznanie wszystkich terminów używanych w projektowaniu witryn. I nie zapomnij o rysowaniu takich rzeczy, jak wyskakujące menu, interaktywność przycisków i tak dalej. Niech Twoje witryny po układzie wyglądają tak samo, jak je narysowałeś. Amen

Żadna nowoczesna witryna nie jest pomijana. Istnieje jednak sposób, który pomoże znacznie zaoszczędzić czas podczas tworzenia układu i projektowania, w tym interfejsu użytkownika witryny - są one gotowe Biblioteki elementów interfejsu użytkownika. Dziś jest ich tak dużo, że w jednym dość dużym poście udało się zebrać tylko darmowe zestawy.

Jakie są zalety wykorzystania gotowych elementów UI strony w projekcie?

1. Cała żmudna praca polegająca na rozszyfrowywaniu małych elementów została już za Ciebie wykonana.
2. Animacja kształtu, guziki a inne elementy zostały już wdrożone i skonfigurowane zgodnie z nowoczesnymi trendami webdesignu.
3. Każdy zestaw Interfejs HTML Komponenty z reguły nie są pierwszym wydaniem. Cały JS jest debugowany i działa stabilnie. Jednocześnie zidentyfikowano eksperymentalnie najbardziej użyteczne rozwiązania jednego lub drugiego elementu z zestawu.

Gdzie można używać zestawów elementów HTML UI?

Przede wszystkim - to prototypy, ponieważ nie ma potrzeby, aby projekt był wyjątkowy. Podczas opracowywania prototypu biblioteki są używane z niewielkimi lub bez kosmetycznych zmian. Najważniejsze, że działa i odzwierciedla istotę projektu.

Mimo że interfejs użytkownika ma wstępnie zaprojektowany projekt, może być wykorzystany w prawie każdym projekcie. Wszystkie elementy są dostosowane do nowoczesne tendencje projektowanie stron internetowych i z dużym prawdopodobieństwem okaże się, że przynajmniej jeden zestaw z tej kolekcji będzie w dokładnie takim samym stylu jak Twój projekt.

Więc. Za twoją uwagę 20 darmowe zestawy Elementy interfejsu HTML dla Twojej witryny. Nie zapomnij zasubskrybować społeczności. sieci.

element

Nieźle Zestaw narzędzi HTML dla strony internetowej. Zawiera prawie wszystkie elementy interfejsu użytkownika, w tym okna dialogowe , formularze, niestandardowe siatki projektowania stron internetowych, powiadomienia, menu i nie tylko. Wszystkie elementy i ich animacje są łatwo dostrzegalne i nie ładują strony. Na podstawie Vue.js 2.0

Bloki konstrukcyjne

170+ bloków HTML stworzyć prototyp jakości. Jest to rodzaj kreatora stron internetowych, z którego możesz oślepić wszystko. Zestaw zawiera kompletny zestaw wszystkich elementów zebranych w jeden styl.

Projektowanie materiałów dla Bootstrapa

Bezpłatnie dla frameworka css Bootstrap 3 w projektowaniu Projektowanie materiałów Google. Niestety nie ma dynamiki oryginalnego Google Material Design na Angularze, ale stara się go naśladować.

Płaski interfejs użytkownika

Wystarczająco wysoka jakość UI w stylu płaskim, który opiera się na responsywny CSS Framework Bootstrap 3. Ogromnym plusem jest dostępność źródeł PSD.

Czysty zestaw UI

Jeśli potrzebujesz siatek, formularzy, przycisków, tabel lub menu, ta struktura interfejsu użytkownika może być dla Ciebie. Jest bardzo lekki. Waga to tylko 3,8 KB.

Płaski interfejs użytkownika - HTML5 + CSS3

Minimalny zestaw niskiej jakości Elementy UI w HTML5 + CSS3. Dodatkowo posiada oryginalny design.

CSS interfejsu Metro

Interfejsy metra to już przeszłość, ale nawet dzisiaj ten styl przyciąga ogromną publiczność. Wyznaję, że jestem jednym z nich. Nawet dzisiaj są zadania, w których Interfejs METRO mogą być potrzebne. Do twojej uwagi dość duży i wysokiej jakości Framework UI na HTML w stylu METRO. Prawie wszystkie elementy w osobliwym projekcie są dostępne za darmo: są to kafelkowe ekrany, formularze, pola wyboru, przyciski radiowe, przyciski, menu, paginacje i ogromna ilość innych interesujących rzeczy. W sumie framework zawiera ponad 70 komponentów UI. I to jest dzieło ukraińskiego dewelopera.

Śmigło

Bezpłatny Framework CSS w stylu Material Design na Bootstrap. Zawiera około 25 komponentów, które, co dziwne, dość mocno przypominają oryginalną dynamikę Material Design w Angularze. Dostępna jest również wersja premium.

Projektowanie materiałów Lite

Jeden z najbardziej rozwiniętych Interfejs projektowania materiałów ramy włączone HTML. W jego arsenale jest ogromne ilości składniki. To cały kombajn. Myślę, że to jeden z najlepsze realizacje Język projektowania materiałów do HTML.

Semantyczny interfejs użytkownika

Przyjemny, lekki i schludny framework do tworzenia interfejsu użytkownika i prototypowanie. Zawiera prawie wszystko, czego potrzebujesz. Na przykład przyciski, zakładki, typografia, przełączniki itp. Jest aktywnie tłumaczony na język rosyjski. Został zbudowany od podstaw i nie ma nic wspólnego z Bootstrapem, w przeciwieństwie do większości jego odpowiedników w tym artykule.

W zasadzie dla profesjonalistów nie ma nic prostszego niż ręczne naszkicowanie szkicowego układu witryny. Proces staje się nieco bardziej skomplikowany, jeśli chodzi o projektowanie elementów interfejsu użytkownika (i ich szczegółów). Tutaj nie można obejść się bez wyobraźni, doświadczenia i inspiracji.

Jeśli nie wiesz od czego zacząć (albo masz już pomysł, ale chcesz zaoszczędzić czas korzystając z szablonów), na ratunek mogą przyjść usługi takie jak UI Patterns z opcjami do klasycznych wdrożeń lub gotowe zestawy specjalne do pobrania . Te ostatnie są z reguły dostarczane w formacie PSD, więc każdemu, kto umie pracować w Photoshopie, nie będzie trudno przerobić je na swój sposób.

Zielony zestaw WebUI

Zestaw interfejsów Green WebUI Kit - zawiera prawie wszystkie potrzebne elementy - Górne menu nawigacja, przyciski (OK, Anuluj, Kup teraz, Pobierz teraz), naklejka promocyjna, formularz logowania, pusty suwak i elementy subskrypcji - RSS, E-mail i inne.

Wszystkie elementy wykonane są jakościowo, projekt jest nowoczesny. Każdy element ma swoją własną warstwę (plik PSD), dzięki czemu praca z nimi jest bardzo wygodna. Zasadniczo z tego można szybko naszkicować projekt takiego bloga - suwak, są już subskrypcje. Gdybym miał porównać, to bardziej pasowałby Chińczykom.

Żółte elementy interfejsu użytkownika

Żółte elementy interfejsu użytkownika - Ten zestaw zawiera 11 żółtych elementów interfejsu użytkownika, w tym przyciski (Pobierz, Prześlij, Kup teraz, wyszukiwanie), sekcje (Polecane i data), paski przewijania i postęp. Wszystkie warstwy w Plik PSD wygodnie pogrupowane, dzięki czemu można łatwo wprowadzać zmiany w określonym elemencie interfejsu użytkownika. Równie łatwo możesz zmienić kolor na taki, jaki potrzebujesz (oczywiście w zestawie Green WebUI).

Niestety Yellow UI Elements zawiera mniej elementów niż Green WebUI Kit, więc nie wykluczam, że będziesz musiał pożyczyć niektóre elementy z innych zestawów lub samodzielnie je narysować.

Zestaw miękkiego interfejsu użytkownika

Ładny, lekki zestaw elementów interfejsu do tworzenia stron internetowych. Może być używany zarówno przy tworzeniu strony internetowej, jak i aplikacji internetowej. Wśród wszystkich źródeł PSD znajdują się najpopularniejsze elementy dla sieci - + wyszukiwanie, rozwijana lista, pola wyboru i pola radiowe, porady tekstowe itp., są nawet gwiazdki za głosowanie. Dla kogoś, kto wie, jak pracować w Photoshopie, dostosowanie tego PSD do własnych potrzeb nie będzie wcale trudne. Ogólnie zestaw jest bardzo dobry pod względem ilościowym i jakościowym.

Przezroczysty szklany interfejs użytkownika

Jak już zauważyliście z nazwy zestawu (Transparent Glass UI) i podglądu, jego wyróżnikiem jest przezroczystość elementów. To, po pierwsze, wygląda imponująco i będzie dobrze pasować nowoczesny design, a po drugie, będzie pasować do prawie każdego koloru tła. Zestaw PSD zawiera wszystkie typowe elementy interfejsu internetowego - listy rozwijane, przełączniki, przyciski, formularze, suwaki i pola wejściowe.

Myślę, że z przedstawionych zestawów elementów interfejsu UI do Photoshopa znajdziesz coś dla siebie. Szczególnie dobre są pierwsze i ostatnie zestawy. Życzę udanych eksperymentów i pięknego interfejsu!

PS Jeśli potrzebujesz znaleźć elastyczny system dla sklepu internetowego, Magento Commerce może Cię mile zaskoczyć swoimi możliwościami, funkcjonalnością i rozszerzalnością projektu.

Czasy, w których projektanci wszelkich pasków afiszowali się przed sobą, chwytliwych, powiedziałbym nawet zbyt pretensjonalnych projektów, wykorzystujących wszelkiego rodzaju ozdobniki graficzne, minęły bezpowrotnie, przyszedł czas na nowe rozwiązania projektowe, które pozwalają użytkownikom skupić się na najważniejsze elementy projektu internetowego niż kolorowe opakowanie.

Użycie płaskich elementów interfejsu, po cichu, ale pewnie, przeniosło się na scenę z Windows 8 i jego raczej minimalistycznym stylem „Metro”. Płaski design, z jego minimalistycznym podejściem, stawia przede wszystkim na użyteczność różne rodzaje urządzenia użytkownika, zarówno na komputerach stacjonarnych, jak i smartfonach z sterowanie dotykowe. Osobliwość płaskie projekty to czyste linie, dwuwymiarowe obiekty, jasne kolory, dobrze zdefiniowane linki i tekst bezszeryfowy. Aby nie odwracać uwagi użytkowników od ważnych elementów, nie ma żadnego ozdobnego blichtru.

Jeśli śledzisz najnowsze trendy w projektowaniu stron internetowych i jesteś już fanem płaskich rozwiązań projektowych, oto 10 całkowicie darmowych zestawów UI do projektowania płaskiego dla Twoich nowych projektów. Wszystkie zestawy zawierają szeroką gamę komponentów, które są idealne dla każdego projektanta stron internetowych: przyciski, elementy wejściowe, menu, pola wyboru i przyciski radiowe, tagi, menu, paski postępu i suwaki, a także elementy nawigacyjne i wiele innych.

Nadaj swojemu projektowi nowy, świeży wygląd dzięki tym niesamowitym zestawom interfejsu użytkownika.

1 piórkowy interfejs użytkownika

Atrakcyjny zestaw darmowych elementów interfejsu od Sarah Hunt, dobrze zaprojektowany w oparciu o wektor i podzielony na warstwy, starannie zapakowany w plik, wszystkie warstwy są oznaczone intuicyjnymi nazwami. Tekst i kolory są łatwo edytowalne. W projekcie wykorzystano czcionkę, z której można korzystać bezpłatnie.

Dzięki temu zestawowi elementów interfejsu możesz poświęcić znacznie mniej czasu na pracę i skupić się na kreatywności. Zestaw jest całkowicie darmowy do projektów osobistych lub komercyjnych. Możesz pobrać zestaw i zacząć od razu.

2. Nowoczesny zestaw dotykowy UI

Podstawowa darmowa wersja świetnego zestawu elementów interfejsu użytkownika w Format PSD, dzięki któremu stworzysz funkcjonalną witrynę o nienagannym designie.Zrównoważenie typografii, ogólną wagę i rozmieszczenie elementów, dopasowane wcięcia, marginesy i paletę kolorów. Ogólny styl z charakterystycznym naciskiem na treść. Kompletny Wersja HTML tego wspaniałego zestawu jest dostępna dla zarejestrowanych użytkowników posiadających subskrypcję PixelKit.

3. Pionowa nieskończoność

4. Kwadratowy interfejs użytkownika za darmo

Kolejny wspaniały i zapakowany zestaw od styl projektowania, jest dostępny bezpłatnie, z wyjątkiem formalnej subskrypcji wiadomości, w celu uzyskania linku do pobrania. Jestem pewien, że ta mała przeszkoda nie powstrzyma nikogo, jeśli potrzebujesz produktu wysokiej jakości. A zestaw jest naprawdę wysokiej jakości i zawiera wiele dobrze narysowanych komponentów internetowych do projektowania stron internetowych. Ściąganie Darmowa wersja a jeśli spodobał Ci się zestaw, możesz kupić rozszerzoną wersję premium zestawu, jeśli chcesz. Chociaż darmowa wersja zawiera wiele przydatnych gadżetów projektantów, aby stworzyć pełnoprawną witrynę.

5. Płaskie komponenty interfejsu użytkownika

Lekki (407 Kb) zestaw komponentów interfejsu użytkownika wykonany w płaskim stylu z przewagą niebieskawych tonów w ogólnej palecie kolorów. Wszystkie elementy w tym zestawie są dostępne w jednym, dobrze zorganizowanym pliku PSD i można je łatwo edytować. Jak widać, nie ma zamieszania w kolorach, wszystko jest surowe i nastawione wyłącznie na wygodę odbioru treści.

6. Zestaw UI płytek metra

Darmowy, dość bogaty i pięknie wyrenderowany zestaw komponentów UI od PixelKit. Zestaw zawiera wiele elementów interfejsu użytkownika, ułożonych warstwowo i połączonych w pliku PSD, jego konstrukcja jest idealna do tworzenia projektów internetowych i aplikacje mobilne. Wystarczy rzut oka na konstrukcję komponentów, aby zgadywać styl GUI Wihdows 8, precyzyjne krawędzie elementów, delikatne niebiesko-niebieskie odcienie i doskonale czytelna czcionka.

7. Zestaw UI z płaskim zaokrąglonym kwadratem

Na uwagę bez wątpienia zasługuje imponujący pakiet elementów interfejsu internetowego, udostępniony za darmo przez rzemieślników. Autorzy w swojej pracy nieco odeszli od linii stuprocentowej płaskiej konstrukcji, dodając Poszczególne komponenty trochę objętości, za pomocą lekko zaokrąglonych rogów i lekkiego cienia dolnych granic elementów. Taka decyzja projektowa jest uzasadniona w przejściowym okresie zmiany priorytetów w projektowaniu stron internetowych. Wszystkie elementy niezbędne do produktywnej pracy budowniczych stron, w kompletny zestaw. Pozostaje pobrać, rozpakować archiwum i zacząć tworzyć, jeśli nie wieczne, ale przynajmniej piękne i miłe)))

8. Pakiet interfejsu użytkownika o płaskiej konstrukcji

Naprawdę ciężki (125 MB!) wśród podobnych zestawów PSD UI. Dopracowana w najmniejszym szczególe płaska konstrukcja elementów zestawu robi wrażenie i przygotowuje do kreatywnej pracy. Ten zestaw interfejsu użytkownika może być używany za darmo zarówno w projektach prywatnych, jak i komercyjnych, choćby dla radości, ale dla dobra sprawy.

10. Bootflat 1.0.1

Na koniec recenzji proponuję do rozważenia rodzaj zbioru HTML, CSS, JS i komponentów do szybkiego tworzenia interfejsów stron internetowych - „Bootflat”, zbudowany na znanej platformie Twitter Bootstrap 3. Intuicyjny narzędzie, które zawiera lekkie wtyczki i komponenty, ale z bogatymi funkcjami Bootstrap. Obsługa HTML5 i CSS3, świetna kolorystyka i stylizacja oparta na ulepszonej Styl Bootstrapa 3. Bootflat jest w pełni responsywny, co oznacza, że ​​nie będzie problemów z wyświetlaniem elementów na ekranach wszystkich typów urządzeń użytkowników. Wszystkie komponenty platformy można łatwo rozbudowywać i edytować. Bootflat to projekt open source kod źródłowy, więc możesz swobodnie korzystać ze wszystkich jego funkcji i tworzyć swój własny styl.

Flat design to szczególny trend, który jest przyszłością i ważne jest, aby nie przegapić chwili, wskoczyć do pędzącego pociągu w czasie, ponieważ każdy nowy trend ma swój własny koło życia i ani jeden, nawet najpopularniejszy trend w projektowaniu nie może być wiecznie na fali. Obecnie z wielu powodów warto wykorzystać ten ciekawy styl projektowania przy opracowywaniu nowych projektów, nie śpiesząc się z trudem pogoni za modą, ale robiąc wszystko z wyczuciem, wyczuciem i aranżacją. Można śmiało powiedzieć, że takie popularne strony będą intuicyjne, łatwe do zrozumienia i wywołują pozytywne wrażenie i nie mniej pozytywne recenzje ze społeczności internautów.