20 Warunki projektowania stron internetowych dla klienta Clueless
W branży projektowania stron internetowych używamy wielu warunki poufne. To nie tylko utrudnia rozpoczęcie pracy dla nowych użytkowników, szczególnie klienci, którzy nie są zaangażowani w przemysł projektowy, ale prawidłowe przekazywanie ich znaczenia może czasami być sporym wyzwaniem.
W tym glosariuszu zebraliśmy 20 często używanych warunków projektowania stron internetowych i dodałem krótkie wyjaśnienie do każdego z nich, aby każdy mógł szybko je obejrzeć w przypadku jakiejkolwiek niepewności. Jeśli masz klienta, który naprawdę potrzebuje awaryjnego kursu w żargonie projektowania stron internetowych, udostępnij mu ten artykuł.
“Animacja”
Technika projektowania stron internetowych dodaje ruch do elementów ekranowych w celu wizualizować zmianę lub przyciągnąć uwagę użytkowników.
Animacje są mocniejszy niż przejścia, ponieważ mogą przechodzić przez wiele różnych stanów między punktami początkowym i końcowym, dlatego mogą być używane bardziej skomplikowane efekty.
“Breadcrumb”
ZA typ nawigacji który informuje użytkowników o ich aktualna lokalizacja na stronie.
Bułeczki zawierają ścieżka na której można uzyskać dostęp do bieżącej strony ze strony głównej, zwykle w formacie Strona główna / Kategoria / Strona. Każdy element ścieżki jest również możliwe do kliknięcia aby użytkownicy mogli szybko poruszać się po hierarchii witryny. Okruchy są zazwyczaj wyświetlane na górze każdej strony.
“Nieład”
Błąd projektu strony internetowej, wskaźnik a źle zaprojektowana strona.
Mówimy o zaśmieconej stronie, gdy projektant wycisnął zbyt wiele informacji na tej samej stronie bez dodawania wystarczającej ilości spacji i prawidłowej strukturyzacji treści. Nieuporządkowane strony mają niska czytelność, i szkodzić wrażeniu użytkownika.
“Schemat kolorów”
ZA kolekcja harmonizujących kolorów używany do tworzenia rozpoznawalna tożsamość marki.
Zazwyczaj taki sam schemat kolorów używane konsekwentnie na stronie internetowej marki, aplikacji mobilnej, logo i materiałach marketingowych. Schemat kolorów można zaprojektować zgodnie z różne zasady, istnieją schematy monochromatyczne, analogiczne, komplementarne, triadyczne i inne.
“Kontrast”
Technika projektowania do podkreślać różnice między elementami, które mają inną rolę lub znaczenie.
Za pomocą kolory uzupełniające (przeciwieństwa na kole kolorów) są jednak najbardziej znanym sposobem wyrażania kontrastu różnice wizualne w kształcie, stylu, typografii lub układzie elementów strony, które chcemy wyróżnić, można uzyskać efekt kontrastujący.
“Pusty stan”
Określony stan witryny lub aplikacji, gdy jest jeszcze żadna treść na konkretnej stronie, jednak elementy projektu są już na swoim miejscu.
Stany pierwszego użycia, takie jak puste profile, są typowymi przykładami pustych stron stanu. Wymagają one specyficznych technik projektowania (takich jak projektowanie na pokładzie) informować użytkowników o tym, co powinno być na stronie i Zachęć ich wykonywać pewne czynności.
“Naprawiono układ”
ZA typ układu w którym witryna i jej elementy użyj tej samej szerokości we wszystkich rozdzielczościach, zdefiniowane w wartościach statycznych (zwykle piksele).
Tradycyjny sposób budowania stron internetowych. Rzadko wybierane dla nowszych stron internetowych, ponieważ witryny z ustalonymi układami są mało użyteczne (czytelne) na ekranach mobilnych. Aby pozostać dostępnym dla użytkowników mobilnych, wiele stałych witryn korzysta z wtórna strona mobilna.
“Płaska konstrukcja”
ZA Interfejs użytkownika zaprojektuj język koncentruje się na czystych i minimalistycznych stylach, i usuwa skomplikowane tekstury, wzory, gradienty i inne fantazyjne efekty, aby pomóc użytkownikom lepiej skupić się na treści.
Płaska konstrukcja została skrytykowana za problemy z użytecznością wynikające z brak trójwymiarowości. Bardziej dorosły Płaskie języki projektowe 2.0, takie jak projektowanie materiałów Google, pojawiły się w odpowiedzi i dodały trochę głębi do płaskiej konstrukcji.
“Układ płynu”
ZA typ układu że używa jednostek względnych aby określić szerokość witryny i jej elementów.
Najczęściej używane jednostki względne dla układów płynów to procenty, ale ems i rems może być również używany. Płynny układ zmienia rozmiar (rozciąga się i kurczy) jako szerokość zmienia się rzutnia. W przeciwieństwie do responsywnych układów, płynny układ nie używa zapytań o media. Zwany także jako układ cieczy.
“Zagięcie”
Dolna strona widocznej części ekranu.
Termin “nad fałdą” odnosi się do części strony internetowej, którą odwiedzający mogą zobaczyć bez podejmowania żadnych działań, podczas “poniżej fałdy” odnosi się do reszty strony, którą mogą użytkownicy dotrzeć tylko poprzez interakcję z witryną - zazwyczaj przez przewijanie lub przesuwanie (w telefonie komórkowym).
Zaleca się umieścić elementy marki (np. logo), nawigacja na miejscu, i kusząca treść powyżej zakładki, aby użytkownicy szybko zrozumieli cel witryny i byli zainteresowani resztą treści.
“Wdzięczna degradacja”
Strategia projektowania stron internetowych zawiera wszystkie zaawansowane funkcje domyślnie na stronie, później usuwa lub upraszcza rzeczy, które nie działają w starszych przeglądarkach, na mniej zdolnych urządzeniach lub w mniejszych przepustowościach.
Skupia się więcej na temat wyglądu niż na treść. W erze mobilnej progresywne ulepszanie stało się dominującą strategią projektowania stron internetowych w nowych witrynach, a pełna wdzięku degradacja jest głównie wykorzystywana w starsze lub starsze witryny.
“Obraz bohatera”
Zbyt duży baner obrazu umieszczony nad fałdą.
Obrazy bohaterów są wysokiej jakości, zazwyczaj pełnometrażowymi obrazami związanymi z treścią witryny. Na dodatek jest zazwyczaj a krótki (jeden lub dwa wiersze) tekst który przekazuje wiadomość użytkownikom, a przycisk wezwania do działania który wzywa ich do podjęcia określonych działań, takich jak zakupy lub rejestracja na stronie.
“Wstęp”
Oryginalnie każda strona, gdzie użytkownik online wchodzi na stronę. Ostatnio termin ten jest raczej używany do samodzielnej strony zaprojektowanej dla a określony cel biznesowy.
Na przykład, jeśli użytkownicy internetu śledzą baner reklamowy, często znajdują się na stronie docelowej, która wzywa ich do zakupu odpowiedniego produktu. Strony docelowe za pomocą pojedynczy fokus i a jasne wezwanie do działania mają tendencję do osiągania wyższych współczynników konwersji.
“Powolne ładowanie”
Technika ładowania obrazów i innych treści statycznych, takich jak filmy, na krótko przed nimi stać się widocznym dla użytkownika.
Jeśli witryna korzysta z leniwego ładowania, najpierw ładowane są tylko zdjęcia powyżej zakładki, reszta jest ładowana tylko wtedy, gdy (jeśli) użytkownik przewinie stronę. Często używany w projektowaniu responsywnym i mobilnym oszczędza zasoby. Na przykład Google AMP przyspiesza witryny mobilne o leniwe ładowanie statycznych zasobów domyślnie.
“Zapytanie o media”
Funkcja CSS, która sprawia elastyczne projektowanie stron internetowych możliwe poprzez umożliwienie projektantom tworzenia różne wzory dla różnych wymiarów urządzenia (szerokość i / lub wysokość), orientacje (krajobraz lub portret) i typy mediów (druk, ekran itp.).
Zazwyczaj strony responsywne mają osobne układy na ekrany komputerów stacjonarnych, tabletów i telefonów komórkowych punkty przerwania między nimi są zdefiniowane przez zapytania o media dodane do CSS.
“Progresywne ulepszanie”
Pierwsza strategia projektowania stron internetowych dodaje tylko podstawowe elementy do witryny, która działa na dowolnej przeglądarce, przepustowości i urządzeniu. Bardziej zaawansowane funkcje frontonu (style i interaktywność) są załadowane warstwami potem.
Progresywne ulepszanie przede wszystkim skupia się na treści, wyniki w witrynach, które są dostępny dla każdego użytkownika, dlatego jest to dominujący sposób budowania stron internetowych w erze mobilnej (w przeciwieństwie do zgrabnej degradacji).
“Elastyczny projekt”
Projektowanie stron internetowych w celu tworzenia stron internetowych dostosować się do wymiarów różnych typów urządzeń (najczęściej mobilnych, tabletów i komputerów stacjonarnych) poprzez projektowanie różne układy i inne style (np. typografia, rozmiar obrazu) dla nich.
Elastyczne projektowanie wykorzystuje różne techniki, takie jak jednostki względne, elastyczne siatki, i zapytania o media w celu obsługi każdego użytkownika za pomocą użytecznej, czytelnej i dostępnej treści. Większość nowoczesnych stron internetowych korzysta z responsywnego projektowania.
“Skeuomorfizm”
Język projektowania interfejsu użytkownika wykorzystujący zasada znajomości, i skupia się na tworzeniu elementów projektu, które przypominają ich rzeczywisty odpowiednik.
Na przykład przyciski, które wyglądają jak prawdziwe przyciski za pomocą efektów, takich jak skos i płaskorzeźba, cienie, gradienty i inne. Zanim płaski projekt stał się dominujący, skeuomorfizm był wiodącym trendem w projektowaniu stron internetowych od wielu lat.
“Przejście”
Technika projektowania stron internetowych dla wizualizowanie prostych zmian kiedy element na ekranie płynnie się zmienia między stanem początkowym a końcowym.
Przejścia - w przeciwieństwie do animacji - nie mają stanów pośrednich, tylko a punkt początkowy i końcowy, dlatego mają być używane subtelne zmiany, na przykład do wizualizacji zawisłe stany.
“Biała przestrzeń”
The puste miejsce między sąsiednimi elementami projektu. Zwany także jako negatywna przestrzeń.
Biała przestrzeń pomaga użytkownikom przejrzyj zawartość, i wizualnie wskazuje hierarchię treści. Biała przestrzeń niekoniecznie jest biała, ale wykorzystuje kolor tła witryny. Brak wystarczającej białej przestrzeni prowadzi do zaśmiecona strona.
