Nie można używać ani jednej nowoczesnej witryny. Istnieje jednak sposób, który pomoże Ci znacznie zaoszczędzić czas na układzie i projektowaniu, w tym na interfejsie użytkownika witryny - są one gotowe Biblioteki elementów interfejsu użytkownika. Dziś jest ich tak dużo, że udało mi się zebrać w jednym dość obszernym poście jedynie darmowe zestawy.
Mimo że Interfejs użytkownika ma przemyślaną konstrukcję, można ją zastosować w niemal każdym projekcie. Wszystkie elementy są dostosowane do współczesnych trendów projektowania stron internetowych i jest wysoce prawdopodobne, że przynajmniej jeden zestaw z tej kolekcji będzie utrzymany dokładnie w tym samym stylu, co Twój projekt.
Więc. Dla twojej uwagi 20 darmowych zestawów elementów HTML UI dla Twojej witryny. Nie zapomnij subskrybować mediów społecznościowych. sieci.
Krótko mówi się, że interfejs użytkownika (w języku angielskim interfejs użytkownika, UI) to środowisko interakcji między użytkownikiem a komputerem. Są to przyciski, menu, przyciski radiowe, pola wyboru i wiele innych. Nie jest to teraz jasne, wyjaśnię wszystkie zawiłe słowa poniżej. Jeśli dana osoba korzysta z telefonu komórkowego, interfejsem użytkownika są aplikacje lub przeglądarka.
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. Informacje te są potrzebne, abyś nie zapomniał narysować wszystkich tych elementów w swoich układach. Jeśli projektant układu nie znajdzie czegoś w układzie, zrobi to tak, jak uzna za słuszne.
Kiedy użytkownik surfuje po Internecie, pierwszą rzeczą, na którą napotyka, są teksty i nagłówki. Dlatego dla nas, projektantów, ważne jest, aby pracować nad wszystkimi nagłówkami jednocześnie w jednym układzie. Nagłówki są zwykle nazywane H1, H2...Hn, ponieważ tak się je nazywa w znacznikach HTML. 
W tym przypadku pierwszym nagłówkiem jest H1, następnie H2 i tak dalej. Pierwszy to najważniejszy nagłówek. Na stronie docelowej może to nastąpić na pierwszym ekranie, a następnie niżej. W układach musisz pokazać wszystkie nagłówki, aby projektant układu wiedział, gdzie umieścić który znacznik.
Oto tekst, tytuł i wyróżniony link. Linki mają 4 stany: normalny, po najechaniu myszką (można zmienić kolor, podkreślenie lub coś innego, efekt), stan kliknięcia i odwiedzenia (kliknięcie, a następnie powrót do witryny, z której opuściłeś).
Wyglądają jak fizyczne przyciski, a przynajmniej miały wyglądać jak przyciski magnetofonu. Dlatego mają stany: najedź i kliknij. To wszystko trzeba przepracować.
Po lewej stronie znajduje się przycisk radiowy (po rosyjsku jest to przycisk radiowy, ale nazwę go radiobuttonem, bo taki jest zwyczaj wśród projektantów), po prawej stronie znajduje się pole wyboru. W przycisku opcji możesz wybrać tylko 1 opcję, my wybraliśmy szopa. W checkboxie istnieje możliwość wielokrotnego wyboru, wybraliśmy fokę i szopa.
Formularze należy opracowywać na kilka sposobów jednocześnie. Formularz nieaktywny (na górze), aktywny (drugi od góry), formularz z błędem (trzeci od góry), formularz wypełniony pomyślnie (czwarty od góry). Czasami, jeśli w formularzu pojawi się błąd, lepiej zrobić pop-up z objaśnieniem po prawej stronie, w którym można wyraźnie wskazać błąd. Na przykład, jeśli odwiedzający wpisał w formularzu litery, aby wprowadzić numer telefonu, utwórz objaśnienie o treści „W tym polu można wprowadzać tylko cyfry”. To znacznie pomoże ludziom wypełnić formularz i zwiększy jego konwersję.
Zawsze należy rysować wyskakujące okienka lub wyskakujące okienka autoryzacyjne (logowania) do witryny. Nie na tym zdjęciu, ale ogólnie zwyczajowo robi się krzyżyk po prawej stronie, aby wyjść z formularza.
Paginacja to nawigacja strona po stronie, która pozwala szybko przełączać się pomiędzy dużą liczbą produktów, arkuszy lub czegokolwiek. Obecnie powszechną formą paginacji jest kanał informacyjny na VK, po przewinięciu w dół i załadowaniu większej liczby wiadomości. To samo możesz zrobić w sklepie internetowym. W takim przypadku nadal musisz udostępnić przycisk „pokaż więcej produktów”. Jeśli jest ich już załadowanych wiele i wyświetlają się jakieś programy ładujące, wówczas znajduje się element pokazujący ładowanie strony.
Często można je znaleźć w sklepach internetowych. Np. po lewej stronie sklep internetowy, po prawej odzież męska, jeszcze po prawej sportowa odzież wierzchnia, potem kurtki. Umożliwia kliknięcie, aby przejść do żądanego poziomu. Inna nazwa bułki tartej.
Rzecz, która pokazuje, że coś się ładuje. Są bardzo różne. Możesz skorzystać z Google „preloader GIF”, zobaczyć różnorodność i użyć tych, które Ci się podobają. Istnieje specjalny generator wstępnego ładowania, w którym możesz wybrać, jak będzie wyglądać, jaki będzie kolor, w jakim formacie zostanie zapisany i tak dalej. Radzę używać standardowych rzeczy, takich jak koła i paski; do specjalnych projektów możesz użyć czegoś niezwykłego lub możesz narysować to samodzielnie w Photoshopie i zrobić animację GIF. Nie przesadzaj, to oczywiście ważny element, ale i tak nie warto poświęcać mu dużo czasu.
Często projektanci zapominają narysować stół. Na przykład, jeśli tworzysz sklep internetowy ze sprzętem produkcyjnym, to w opisie i karcie produktu pojawiają się cechy porównawcze, wagi i jeszcze coś innego. Wygodnie jest używać tabel, gdy linie zmieniają kolor; jest to bardzo dobrze postrzegane przez widza. W tym przypadku wyświetlana jest tabela z polami wyboru, nie jest to konieczne. Nie zapomnij o stołach.
Menu to nawigacja po całej witrynie. W tym przypadku pokazało, że po najechaniu kursorem pojawia się wyskakujące menu. To trzeba narysować. Zwróć uwagę, jak pokazałem nawigację i interaktywność. Właśnie pobrałem kursor png i umieściłem go na miejscu. Jeśli masz duży układ, umieść wiele kursorów. Na przykład, aby pokazać, jak działa menu, jak wygląda przycisk i łącze po najechaniu myszką. Jednocześnie nie zapominaj o normalnym stanie. Dzięki temu w układzie statycznym można łatwo pokazać, jak zachowują się elementy interfejsu użytkownika w stanie interaktywnym.
Pamiętaj, że istnieją różne kursory: dla komputerów PC i komputerów Mac. 
Łatwo jest wpisać w Google „kursor png”. Jeśli wyświetlasz witrynę na komputerze Mac (przy użyciu makiety z MacBookiem), to musisz użyć prawego kursora, jeśli na komputerze PC (na przykład makieta z eksploratorem inernetowym), to lewego.
Oto podstawowe informacje na temat elementów interfejsu użytkownika. Informacje te mają na celu poznanie wszystkich terminów używanych przy projektowaniu stron internetowych. I nie zapomnij narysować takich rzeczy, jak wyskakujące menu, interakcja przycisków i tak dalej. Spraw, aby Twoje witryny wyglądały tak samo po układzie, jaki je zaprojektowałeś. Amen :)
W tej lekcji opowiemy i zademonstrujemy w jasny sposób, jak można wykorzystać elementy interfejsu użytkownika z biblioteki dołączonej do rozwiązania, a także jak wykorzystać możliwości układu, wstawić ikony, przyciski i elementy projektu do witryny.
Uwaga! Aby skutecznie pracować z kodem HTML, będziesz potrzebować przynajmniej minimalnej wiedzy na temat tagów i zasad nagrywania. Jeśli masz wątpliwości lub potrzebujesz poćwiczyć, możesz bezpiecznie poeksperymentować z układem na stronie testowej. Zmiana kodu HTML może zrujnować układ pojedynczej strony, ale nie uszkodzi całej witryny.
Elementy interfejsu użytkownika prezentowane na stronie demonstracyjnej to kod HTML, który można skopiować i wkleić w żądanym miejscu na stronie witryny. Jako przykład dodajmy do witryny element „Koła zębate” i nagłówki o różnych rozmiarach.
Przejdź do żądanej strony witryny, na której chcesz umieścić elementy, aktywuj tryb edycji i otwórz stronę do edycji. Przełącz na łączony tryb wyświetlania, dzięki czemu możesz zobaczyć zarówno kod HTML, jak i wygląd treści.
Otwórz sekcję na swojej stronie z biblioteką elementów interfejsu użytkownika, przejdź do strony z żądaną treścią, wejdź w tryb edycji, a także przełącz się na łączony tryb wyświetlania.
Skopiuj kod interesujących Cię elementów i wklej je na stronie swojej witryny.
W naszym przykładzie kopiowany jest kod nagłówka i kod elementu „Gears”. Możesz dokonać zmian w kodzie - na przykład usunąć tekst testowy pod tytułem lub zmienić podpis pod zębatkami.
Po zapisaniu zmian na stronie zostaną wyświetlone niezbędne elementy:
W zasadzie dla profesjonalisty nie ma nic prostszego niż ręczne naszkicowanie schematycznego układu strony internetowej. 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ąć (lub masz już pomysł, ale chcesz zaoszczędzić czas korzystając z szablonów), z pomocą mogą przyjść usługi typu UI Patterns z wariantami klasycznych implementacji lub gotowe, specjalne zestawy do pobrania. Te ostatnie dostarczane są z reguły w formacie PSD, więc każdy, kto potrafi pracować w Photoshopie, nie będzie miał trudności z przerobieniem ich na swój własny sposób.
Zielony zestaw WebUI - zawiera prawie wszystkie elementy, których możesz potrzebować - górne menu nawigacyjne, przyciski (OK, Anuluj, Kup teraz, Pobierz teraz), naklejkę "wyprzedaż", formularz logowania, pusty suwak i elementy subskrypcji - RSS, E-mail i więcej.
Wszystkie elementy wykonane są z wysokiej jakości, design jest nowoczesny. Każdy element ma swoją warstwę (plik PSD), więc praca z nimi jest bardzo wygodna. W zasadzie na tej podstawie można szybko naszkicować projekt takiego bloga - suwak, są już subskrypcje. Gdybym miał porównać, ten byłby bardziej odpowiedni dla Chińczyków.
Żółte elementy interfejsu użytkownika - zestaw zawiera 11 żółtych elementów interfejsu, w tym przyciski (Pobierz, Wyślij, Kup teraz, szukaj), sekcje (Wyróżnione i Data), paski przewijania i paski postępu. Wszystkie warstwy w pliku PSD są wygodnie pogrupowane, dzięki czemu można łatwo dostosować ten lub inny element interfejsu użytkownika. Kolor można równie łatwo zmienić na taki, jakiego potrzebujesz (oczywiście w zestawie Green WebUI też).
Niestety, Yellow UI Elements zawiera mniej elementów niż Green WebUI Kit, więc możliwe, że będziesz musiał pożyczyć niektóre elementy z innych zestawów lub dodać je samodzielnie.
Ładny, lekki zestaw elementów interfejsu do tworzenia stron internetowych. Można go wykorzystać zarówno podczas tworzenia strony internetowej, jak i aplikacji internetowej. Wśród wszystkich źródeł PSD znajdują się najpopularniejsze elementy dla sieci - + wyszukiwanie, lista rozwijana, pola wyboru i pola radiowe, porady tekstowe itp., są nawet gwiazdki do głosowania. Każdy, kto wie, jak pracować w Photoshopie, nie będzie miał żadnych trudności w dostosowaniu tego PSD do swoich potrzeb. Ogólnie zestaw jest bardzo dobry pod względem ilościowym i jakościowym.
Jak już zauważyliście po nazwie zestawu (Transparent Glass UI) i podglądzie, jego cechą wyróżniającą jest przezroczystość elementów. To po pierwsze wygląda imponująco i dobrze wpasowuje się w nowoczesny design, a po drugie będzie pasować do niemal każdego koloru tła. Zestaw PSD zawiera wszystkie typowe elementy interfejsu WWW - listy rozwijane, przełączniki, przyciski, formularze, suwaki i pola wejściowe.
Myślę, że wśród prezentowanych zestawów elementów interfejsu UI do Photoshopa znajdziesz coś dla siebie. Szczególnie dobry jest pierwszy i ostatni set. Życzę udanych eksperymentów i pięknego interfejsu!
P.S. Jeśli potrzebujesz znaleźć elastyczny system dla sklepu internetowego, Magento Commerce może miło zaskoczyć Cię swoimi możliwościami, funkcjonalnością i możliwością rozbudowy projektu.
