Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00811 012023 20223739 na godz. na dobę w sumie
Projektowanie interfejsów., Sprawdzone wzorce projektowe. Wydanie III - ebook/pdf
Projektowanie interfejsów., Sprawdzone wzorce projektowe. Wydanie III - ebook/pdf
Autor: , , Liczba stron: 504
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-6742-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-20%), audiobook).

Twórcy oprogramowania mogą dziś korzystać z wielu niesłychanie sprawnych narzędzi do tworzenia świetnych aplikacji. Równocześnie obserwujemy olbrzymi rozwój oprogramowania przeznaczonego do najróżniejszych urządzeń. Producenci aplikacji prowadzą swoisty wyścig zbrojeń, starając się zapewnić swoim użytkownikom porywające wrażenia podczas korzystania z oferowanych produktów. W tym niezwykle zmiennym środowisku stałe pozostaje jedno: sposób, w jaki ludzie postrzegają oprogramowanie i z niego korzystają. Ludzkie zmysły i psychika człowieka się nie zmieniają. Nawet najdoskonalsza aplikacja, jeśli ma być użyteczna, musi zapewniać interfejs odpowiadający potrzebom odbiorców.

Publikacja pozwala zapoznać się z fundamentalnymi teoriami i praktycznymi aspektami dobrego designu; to wydanie zostało starannie przejrzane i uzupełnione o najnowsze osiągnięcia w tej dziedzinie. Zawiera również spory zbiór sprawdzonych wzorców projektowych, znacząco ułatwiających projektowanie interfejsów. Wzorce te stworzono z wykorzystaniem zdobyczy psychologii, starano się przy tym zadbać o ich wszechstronność. Podstawą do ich zbudowania były większe lub mniejsze zadania wykonywane przy użyciu oprogramowania. Książka ułatwia poruszanie się po skomplikowanych zagadnieniach projektowania interfejsów, zapewniając wzorce dla aplikacji mobilnych, przeglądarkowych i samodzielnych programów komputerowych. Każdy wzorzec został zilustrowany przykładowymi projektami i opatrzony praktycznymi wskazówkami.

Dzięki tej książce dowiesz się, jak:

Wzorce projektowe interfejsów: najlepsze wsparcie projektanta UX!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Designing Interfaces: Patterns for Effective Interaction Design, Third Edition Tłumaczenie: Maksymilian Gutowski ISBN: 978-83-283-6741-8 © 2020 Helion SA Authorized Polish translation of the English edition of Designing Interfaces, 3rd Edition ISBN 9781492051961 © 2020 Jenifer Tidwell, Charles Brewer, and Aynne Valencia This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls allrights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autorzy oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autorzy oraz Helion SA nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Helion SA ul. Kościuszki 1c, 44-100 Gliwice tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/proji3 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Kontekst Badania: sposób na poznanie kontekstu i celów Obserwacja bezpośrednia Studia przypadków Ankiety Persony Badania projektowe nie są badaniami rynku Wzorce — procesy poznawcze i zachowania związane z projektem interfejsu Poznaj odbiorcę Interakcja jest konwersacją Dopasowanie treści i funkcjonalności do potrzeb odbiorców Poziom umiejętności Interfejs jest jedynie środkiem do celu Spytaj: Dlaczego? Wartość projektowania: właściwe rozwiązanie właściwego problemu Wprowadzenie do trzeciego wydania ................................................................................... 11 1. Projektowanie dla ludzi ............................................................................................. 19 20 20 20 21 22 23 24 24 26 27 27 27 28 28 29 30 31 31 32 33 34 35 36 37 38 40 41 42 43 Bezpieczna Eksploracja Pragnienie Natychmiastowej Satysfakcji Satisficing Zmiany Na Bieżąco Odwlekanie Decyzji Stopniowa Konstrukcja Przyzwyczajenie Mikroprzerwy Pamięć Przestrzenna Pamięć Prospektywna Wspomagane Powtarzanie Obsługa Klawiaturą Media Społecznościowe, Dowód Społeczny I Współpraca Podsumowanie 3 Poleć książkęKup książkę Cel Definicja Podejście Projektowanie obszarów informacyjnych dla ludzi Oddzielenie informacji od prezentacji Zasada MECE Sposoby organizacji i kategoryzacji treści Projektowanie na potrzeby aplikacji zorientowanych na zadaniowość i obieg pracy Alfabet Liczba Czas Lokalizacja Hierarchia Podobieństwo Widoczność często używanych elementów Dziel zadania na sekwencje kroków Wielokanałowość i zróżnicowanie rozmiarów ekranów Informacje w formie Kart 2. Organizacja treści: architektura informacji i struktura aplikacji ................................... 45 46 46 47 47 47 48 49 49 49 49 50 50 50 50 50 51 51 51 52 52 54 54 55 55 56 66 67 81 90 93 97 99 105 112 115 126 132 Ekspozycja, Wyszukiwanie I Przeglądanie Bezpośredni Dostęp Mobilny Aktualności Przeglądarka Multimediów Pulpit Płótno I Paleta Kreator Edytor Ustawień Różne Widoki Wiele Obszarów Roboczych System Pomocy Tagi Projektowanie systemu typów ekranów Ogląd — pokazanie listy lub siatki elementów Skupienie — pokazanie jednego elementu Tworzenie — udostępnienie narzędzi kreatywnych Działanie — umożliwienie wykonania czynności Wzorce Podsumowanie 4  Spis treści Poleć książkęKup książkę Przestrzeń informacji i czynności Drogowskazy Orientacja Nawigacja Nawigacja globalna Nawigacja funkcyjna Nawigacja asocjacyjna i wierszowa Powiązane treści Tagi Model społecznościowy Konwencje projektowania nawigacji Modele nawigacyjne Wzorce Oddzielenie projektu nawigacji od projektu wizualnego Obciążenie poznawcze Niewielkie odległości 3. Tam i z powrotem: nawigacja, drogowskazy i orientacja ...........................................133 134 134 134 135 135 136 136 136 136 137 137 137 137 138 139 139 140 140 142 142 144 144 145 150 155 159 164 168 172 176 181 183 188 192 195 200 Wskazane Punkty Startowe Spis Treści Piramida Panel Modalny Głębokie Linkowanie Wyjście Ewakuacyjne Grube Menu Mapka Strony W Stopce Narzędzia Logowania Mapa Sekwencji Okruszki Pasek Przewijania Z Adnotacją Animowane Przejście Oś i szprychy Pełne połączenie Wiele poziomów lub drzewo Krok po kroku Piramida Płaska nawigacja Podsumowanie Spis treści  5 Poleć książkęKup książkę Podstawy tworzenia layoutu Hierarchia wizualna Co sprawia, że element wydaje się ważny Cztery zasady psychologii postaci Przepływ wzroku Wykorzystanie dynamicznych elementów Odblokowywanie Reakcyjne Ujawnianie Reakcyjne Obszary interfejsu 4. Układ elementów .................................................................................................... 201 201 201 202 207 209 211 213 213 214 215 215 216 216 219 222 223 226 230 233 235 Layout Wydzielanie informacji Ramy Graficzne Obszar Centralny Siatka Równoprawnych Elementów Zatytułowane Sekcje Zakładki Akordeon Zwijane Panele Ruchome Panele Wzorce Podstawy projektowania graficznego Hierarchia wizualna Kompozycja Kolor Typografia Czytelność Sugestywność Obrazy 5. Styl wizualny i estetyka ........................................................................................... 239 240 240 240 242 246 252 253 257 259 260 260 261 262 263 266 268 269 Skeumorficzny Ilustrowany Płaski Minimalistyczny Adaptacyjny/parametryczny Co to oznacza dla aplikacji biznesowych Dostępność Rodzaje stylów wizualnych Podsumowanie 6  Spis treści Poleć książkęKup książkę Jak podejść do projektowania dla urządzeń przenośnych Wzorowe przykłady Wzorce Wyzwania i szanse towarzyszące projektowaniu na urządzenia mobilne Niewielki rozmiar ekranu Zróżnicowana szerokość ekranu Ekrany dotykowe Trudność w pisaniu Problemy związane z otoczeniem Lokalizacja Kontekst społeczny i ograniczona uwaga 6. Urządzenia mobilne .................................................................................................271 272 272 272 273 273 273 274 274 274 277 279 280 282 284 288 289 293 294 297 298 303 Pionowy Stos Klisza Narzędzia Dotykowe Dolny Pasek Nawigacyjny Kolekcje I Karty Nieskończona Lista Duże Marginesy Wskaźniki Wczytywania Połączone Aplikacje Zadbaj o interfejs mobilny Scenariusze korzystania z list Architektura informacji Co chcesz pokazać? Wzorce 7. Listy ........................................................................................................................305 305 306 307 310 310 314 317 320 323 327 329 332 335 336 338 Wybór Dwupanelowy lub Widok Złożony Uszczegółowienie W Jednym Oknie Wkładki Karty Siatka Miniaturek Karuzela Paginacja Bezpośrednie Przejście Do Elementu Przewijanie Alfabetyczne/Numeryczne Pole Nowego Elementu Podsumowanie Spis treści  7 Poleć książkęKup książkę Dotykanie, przeciąganie i szczypanie Obracanie i potrząsanie Przyciski Paski menu Menu kontekstowe Rozwijane menu Paski narzędzi Odnośniki Panele poleceń Ukryte narzędzia Pojedyncze i dwukrotne kliknięcia Polecenia klawiszowe 8. Jak to się robi: czynności i polecenia ......................................................................... 339 340 341 341 341 342 342 342 342 342 343 343 343 344 344 344 344 345 345 347 348 350 353 356 362 364 368 373 375 379 381 387 Grupy Przycisków Ukryte Narzędzia Panel Poleceń Wyszczególniony Przycisk „Zakończ” Inteligentne Elementy Menu Podgląd Spinnery I Wskaźniki Postępu Odwoływalność Wielopoziomowe Cofanie Czynności Historia Poleceń Makra Podsumowanie Skróty Kolejność tabulacji Przeciągnij i upuść Wpisywane polecenia Afordancja Bezpośrednia manipulacja obiektami Wzorce Podstawy infografik 9. Prezentowanie złożonych danych ............................................................................ 389 389 390 391 395 Modele organizacyjne — jak wygląda organizacja danych? Przedświadoma interpretacja zmiennych — co wiąże się z czym? Nawigacja i przeglądanie — jak mogę zgłębić te dane? 8  Spis treści Poleć książkęKup książkę Sortowanie i przestawianie — czy mogę zmienić strukturę danych, by uzyskać inny punkt widzenia? Wyszukiwanie i filtrowanie — w jaki sposób mogę dostać wyłącznie te dane, których potrzebuję? Dane jako takie — jakie są konkretne wartości danych? Wzorce Chmurki Informacyjne Podświetlanie Danych Dynamiczne Kwerendy Rozrysowywanie Danych Równoległe Wykresy Wykres Panelowy Moc wizualizacji danych 396 399 400 402 402 406 408 411 415 418 422 Wzorce Podstawy projektowania formularzy Formularze stale ewoluują Dodatkowe materiały 10. Dane wejściowe: formularze i kontrolki ....................................................................423 424 426 427 427 428 432 435 438 442 444 449 456 460 464 468 474 Format Pobłażliwy Format Strukturalny Uzupełnianie Wskazówki Zapytanie Miernik Bezpieczeństwa Hasła Automatyczne Uzupełnianie Rozwijany Selektor Kreator Listy Poprawne Wartości Domyślne Komunikaty O Błędach Podsumowanie Systemy UI Przykład systemu UI opartego na komponentach: Microsoft Fluent 11. Systemy interfejsów użytkownika i Atomic Design ....................................................475 476 476 479 480 481 Przegląd Hierarchia Atomic Design Atomic Design — metodyka projektowania systemów Spis treści  9 Poleć książkęKup książkę Frameworki UI Przegląd Korzyści Właściwości frameworków UI Przegląd wybranych frameworków UI Podsumowanie 482 483 483 483 484 494 12. Poza ekranem ......................................................................................................... 497 498 498 498 498 499 499 Połączone urządzenia Systemy antycypacyjne Systemy asystujące Naturalne interfejsy użytkownika Inteligentne systemy — części składowe Podsumowanie 10  Spis treści Poleć książkęKup książkę ROZDZIAŁ 5. Styl wizualny i estetyka „Nigdy nie lekceważ siły piękna”. Projektowanie graficzne nie sprowadza się do „oprawienia interfejsu użytkownika”, lecz może wyróżnić produkt cyfrowy z tłumu, o ile przeprowadzi się je właściwie. Język wizualny używany w dowolnym interfejsie przekazuje charakter i ducha marki, reprezentując go w różnych punk- tach styczności. Projektowanie wizualne może zdecydować o użyteczności produktu i wiary- godności marki. W roku 2002 pewna grupa badawcza odkryła coś ciekawego. Członkowie grupy Stanford Web Credibility Project (http://credibility.stanford.edu) postanowili zbadać, od czego zależy zaufanie (bądź jego brak), jakim użytkownicy darzą strony internetowe. Odkryte przez nich czynniki oka- zały się w znacznym stopniu intuicyjnie zrozumiałe. Okazało się, że w określaniu wiarygodności stron pomagały użytkownikom: reputacja firmy, obsługa klienta, sponsorowanie oraz reklamy. Jednak najważniejszym czynnikiem — numerem jeden na ich liście — okazał się wygląd strony. Użytkownicy nie ufali witrynom o amatorskim wyglądzie. Strony, przy których postarano się o es- tetyczną, profesjonalną oprawę graficzną, zdobywały o wiele większą przychylność użytkowników, nawet gdy mieli oni niewiele innych powodów, by tym stronom zaufać. Wygląd jest ważny — to nadal aktualne. Prawdziwe piękno jest połączeniem formy fizycznej z pożądaną funkcją, które zgodnie ze sobą współdziałają. W projektowaniu cyfrowym nie wystarczy, aby wszystko wyglądało idealnie co do piksela, lecz jest konieczne, aby projekt korzystnie wpływał na użyteczność lub zrozu- miałość produktu bądź przyjemność towarzyszącą korzystaniu z niego, a najlepiej żeby robił to wszystko naraz. W tym rozdziale omówimy główne elementy projektowania graficznego i wskażemy, co decyduje o estetyce projektu. 239 Poleć książkęKup książkę Podstawy projektowania graficznego W tym rozdziale omówimy niektóre z zasad dobrego projektowania wizualnego. Są to:  hierarchia wizualna,  kompozycja,  kolor,  typografia,  czytelność,  sugestywność,  obrazy. Przyjrzyj się czterem przykładom z rysunku 5.1. Mogą się one wydawać czterema różnymi pro- jektami, lecz wszystkie składają się w większości z tych samych elementów wizualnych. Samo zróżnicowanie kolorów i wyglądu tekstu pozwoliło na wywołanie tak różnych wrażeń — np. sama kolorystyka strony może powodować u Ciebie uśmiech lub obrzydzenie. Widoki te wywołują zupełnie inne wrażenia, pomimo że mają jednakową zawartość. Hierarchia wizualna Pojęcie hierarchii wizualnej odnosi się do prezentacji elementów graficznych w layoucie. Przyj- rzyjmy się właściwościom tej hierarchii. Przejrzystość Sprawność w przedstawianiu przez projekt informacji, które projektant chce przekazać. Praktyczność Sposób, w jaki użytkownik dowiaduje się, co powinien zrobić na danym ekranie. Afordancja Afordancja polega na tym, że element wygląda lub zachowuje się odpowiednio do tego, co robi. Na przykład przycisk, który wydaje się nieco wystawać z dwuwymiarowego tła, sugeruje, że można go kliknąć. Kompozycja Kompozycja dotyczy układu i proporcji elementów projektu graficznego. Spójność Elementy graficzne są częścią przewidywalnego i jednolitego języka wizualnego. Jeżeli w interfej- sie obecne są ikony, projektuj tak, aby zawsze odnosiły się do określonej funkcjonalności. To samo tyczy się języka interfejsu. 240  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Rysunek 5.1. Przykłady projektów graficznych Podstawy projektowania graficznego 241  Poleć książkęKup książkę Wyrównanie Nic tak nie drażni użytkownika jak zmienianie się elementów z ekranu na ekran bez jasnego po- wodu. Spraw, aby elementy ekranu nie ruszały się ze swojego miejsca, kiedy użytkownik przecho- dzi między ekranami. Na zrozumiałość i czytelność projektu produktu cyfrowego niekorzystnie wpływa też przypadkowe wyrównywanie tekstu do lewej, prawej lub środka. Kolor Kolor oddziałuje natychmiastowo. Jest jedną z pierwszych rzeczy, które dostrzega się w projekcie, wraz z podstawowymi formami i kształtami. Jednocześnie zastosowanie koloru w sztukach pięk- nych i designie wymaga w istocie rzeczy niezwykłej subtelności — mistrzowie malarstwa zgłębiają to od wieków. My ten temat możemy opanować jedynie powierzchownie. Kiedy opracowujesz schemat kolorystyczny interfejsu, na początku wyklucz wszystko, co utrud- nia odczytywanie tekstu.  Zawsze umieszczaj ciemne kolory na pierwszym planie, jeżeli na drugim są kolory jasne i vice versa. Czytelność możesz przetestować, umieszczając projekt w edytorze obrazów w rodzaju Photoshopa i zmniejszając jego nasycenie (tj. konwertując go na skalę szarości).  Kiedy czerwień i zieleń wskazują na kluczowe rozróżnienie, koniecznie wzmocnij ten przekaz z użyciem różnych kształtów lub tekstu. W przeciwnym razie wiele osób cierpiących na ślepotę barw może nie dostrzec różnicy. Statystycznie rzecz biorąc, 10 mężczyzn i 1 kobiet ma ja- kieś zaburzenia postrzegania barw.  Unikaj pewnych kombinacji Barw. Jasnoniebieski tekst na jasnoczerwonym tle jest męczący dla oczu. Jest tak, ponieważ niebieski i czerwony są kolorami komplementarnymi, co oznacza, że znajdują się po przeciwległych stronach koła barw (rysunek 5.2). Rysunek 5.2. Koło barw 242  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę  Choć czytanie czarnego tekstu na białym tle jest wygodniejsze, białe tła bywają bardzo inten- sywne, co może być męczące dla wzroku. Jeżeli zatem projektujesz coś z myślą o użytkowaniu na tablecie, a wokół treści lub elementów UI znajdzie się dużo pustej przestrzeni, użyj nieco ciemniejszego tła, aby zmniejszyć intensywność światła z ekranu. Przejdźmy teraz do kilku dość ogólnych zasad korzystania z barw. Barwy ciepłe i zimne Kolory czerwony, pomarańczowy, żółty, brązowy i beżowy uznaje się za „ciepłe”. Niebieski, zie- lony, fioletowy, szary (w dużych ilościach) oraz biały to kolory „zimne” (rysunek 5.3). Rysunek 5.3. Barwy ciepłe i zimne Jasne i ciemne tła Strony o jasnych tłach — białym, beżowym lub jasnoszarym — sprawiają inne wrażenie niż strony z bardzo ciemnymi tłami. Jasne kolory są bardziej typowe dla interfejsów komputerowych (i dru- kowanych arkuszy). Ciemne strony mogą się wydawać bardziej zadziorne, posępne lub energiczne, w zależności od innych aspektów projektu (rysunek 5.4). Silny i słaby kontrast W zależności od tego, czy tło jest jasne, czy ciemne, znajdujące się na nim elementy mogą silnie bądź słabo kontrastować. Silne kontrasty wskazują na napięcie, siłę i śmiałość; słabe kontrasty są natomiast kojące i uspokajające (rysunek 5.5). Podstawy projektowania graficznego 243  Poleć książkęKup książkę Rysunek 5.4. Jasne i ciemne tła Rysunek 5.5. Kontrast 244  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Barwy nasycone i nienasycone Bardzo nasycone czy też czyste kolory — np. jasna żółć, czerwień i zieleń — wskazują na energię, żywotność, jasność i ciepło. Są odważne i mają charakter. Nadużywanie ich może być jednak mę- czące dla oczu, toteż w większości interfejsów używa się ich sporadycznie — zwykle tylko jednego lub dwóch. Przytłumione barwy, ciemne lub jasne (czyli, odpowiednio, odcienie i tinty) składają się na lwią część większości palet kolorów. Raczej nie chciałbyś patrzeć przez cały dzień na różo- wy interfejs aplikacji komputerowej (rysunek 5.6). Rysunek 5.6. Barwy nasycone i nienasycone Kombinacje barw Łączenie barw przynosi ciekawe efekty. Dwa nasycone kolory wydają się bardziej energiczne, dy- namiczne i żywe niż pojedynczy. Strona, na której jeden nasycony kolor zestawiony jest z kilkoma przytłumionymi barwami, kieruje uwagę na nasyconą barwę i tworzy „warstwy” — jaśniejsze i moc- niejsze kolory wydają się być bliżej użytkownika, podczas gdy bardziej szare i stonowane barwy zdają się być wycofane. Takie zróżnicowanie głębokości położenia barw może zwiększyć drama- tyzm projektu. Bardziej płaskie projekty, z przytłumionymi i jaśniejszymi barwami, są spokojniejsze. Nie polegaj na samym kolorze Kolor to wspaniała rzecz, ale nie polegaj wyłącznie na nim, kiedy chcesz przekazać ważne infor- macje. Dobrym przykładem jest znak stopu (rysunek 5.7). Znak ten zawsze wygląda tak samo: jest czerwony, ma napis „STOP” i charakterystyczny ośmiokątny kształt. Te trzy cechy wskazują kie- rowcy, czego się od niego oczekuje. Podstawy projektowania graficznego 245  Poleć książkęKup książkę Rysunek 5.7. Przykład znaku stopu To samo można odnieść do stosowania elementów graficznych w świecie cyfrowym. Pomóż użyt- kownikom zrozumieć przekazywane im informacje przez zastosowanie łącznie kolorów i kształtów. Kolor — materiały i źródła  https://www.colorbox.io  https://color.adobe.com/create  http://khroma.co Typografia Dostępne w internecie treści, pomijając filmy z kotkami, są w większości tekstowe. Projektowanie mediów cyfrowych z myślą o czytelności i nieobciążaniu wzroku odbiorcy jest sztuką samą w sobie. Typografia to temat, któremu można by poświęcić niejedną książkę i który, jak widać na rysunku 5.8, wiąże się ze szczegółową wiedzą. W tym punkcie omówimy niektóre z najważniejszych aspektów typografii w projektowaniu cyfrowym. Jest kilka terminów, które pomagają zrozumieć szczegółowe zagadnienia typograficzne. Krój pisma odnosi się do określonej formy, np. Helvetica, Arial lub Times New Roman. Czcionka odnosi się do konkretnego stopnia i odmiany kroju, np. Helvetica Bold 12 pt, Arial Italic 8 pt lub Times New Roman 18 pt. 246  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Rysunek 5.8. Anatomia kroju pisma Istnieje kilka poziomów klasyfikacji krojów pisma, ale poniżej przedstawiamy te, które mają naj- większe znaczenie w projektowaniu cyfrowym. Kroje szeryfowe Litery krojów szeryfowych mają krótkie kreski na końcach (rysunek 5.9). To z nich najczęściej się korzysta przy zapisie dużych ilości tekstu. Szeryfy subtelnie prowadzą wzrok czytelnika od litery do litery, dzięki czemu lektura jest mniej męcząca dla oczu. Rysunek 5.9. Przykłady krojów szeryfowych Kroje bezszeryfowe Kroje bezszeryfowe (rysunek 5.10) nie mają kresek na końcach. Zazwyczaj wyglądają bardziej nowocześnie, a litery pozostają czytelne nawet przy mniejszych rozmiarach pisma, dlatego krojów bezszeryfowych często używa się w interfejsach. Podstawy projektowania graficznego 247  Poleć książkęKup książkę Rysunek 5.10. Przykłady krojów bezszeryfowych Kroje dekoracyjne Kroje dekoracyjne (rysunek 5.11) sprawdzają się przy bardzo dużym piśmie, przy czym mogą być szeryfowe lub bezszeryfowe. Przydają się do określania wyglądu i charakteru marki, kiedy używa się ich w nagłówkach lub logotypach, ale nie nadają się do interfejsów, kontrolek, formularzy ani tekstu głównego. Nigdy nie zapisuj większych ilości tekstu krojami dekoracyjnymi, ponieważ w nadmiarze potrafią być przytłaczające, a w małych rozmiarach — nieczytelne. Rysunek 5.11. Przykłady krojów dekoracyjnych 248  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Kroje o stałej szerokości znaku Litery krojów o stałej szerokości znaku (rysunek 5.12) zajmują tyle samo miejsca w poziomie nieza- leżnie od rzeczywistej szerokości. Korzystano z nich we wczesnych komputerach, a współcześnie spotyka się je w interfejsach ekranów LED, interfejsach opartych głównie na liczbach i ekranach, które mają ograniczone możliwości wyświetlania tekstu. Takie kroje są stosowane w niekomputerowych urządzeniach elektronicznych, elektronicznych deskach rozdzielczych i interfejsach sprzętu AGD. Rysunek 5.12. Przykłady krojów o stałej szerokości znaku Wielkość pisma Wielkość pisma mierzy się punktami typograficznymi, oznaczanymi przeważnie skrótem pt. Im wiel- kość w punktach jest mniejsza, tym mniejszy jest tekst. Na ogół nie należy wybierać rozmiaru mniej- szego niż 10 pt, aby zachować czytelność tekstu na ekranie; współcześnie najczęściej stosowaną wielko- ścią tekstu głównego jest 12 pt (rysunek 5.13). W przypadku drobnego druku, takiego jak informacja o prawach autorskich w stopce witryny, odpowiednim rozmiarem jest 9 pt. W przypadku większych ilo- ści tekstu do przeczytania (np. w serwisie informacyjnym lub na czytniku) najlepiej stosować domyśl- ną wielkość 12 pt i dać użytkownikowi możliwość dostosowania jej zgodnie z własnymi preferencjami. Rysunek 5.13. Przykłady różnych wielkości pisma Podstawy projektowania graficznego 249  Poleć książkęKup książkę Leading Leading odnosi się do odstępów między wierszami tekstu, a konkretnie: do odległości między ich liniami bazowymi (rysunek 5.8). Odstępy powinny być na tyle duże, aby wzrok mógł płynnie przechodzić od wiersza do wiersza, a wydłużenia górne nie nachodziły na dolne, ale zarazem nie sprawiać, by wiersze wydawały się od siebie nadmiernie oddalone. Tracking i kerning Z leadingiem związany jest tracking, czyli odstępy między wszystkimi literami w poziomie. Nieodpowiedni tracking może mieć wpływ na czytelność, zwłaszcza kiedy światła międzylitero- wego jest za dużo lub za mało (rysunek 5.14). Z pewnymi literami mogą jednak wystąpić proble- my nawet wtedy, kiedy tracking jest poprawny. Do gry wchodzi wtedy kerning. Kerning ma miejsce, kiedy projektant dostosowuje (zazwyczaj zmniejsza) odstępy między konkretnymi parami liter. To konieczne, kiedy np. zajmująca dużo miejsca litera w rodzaju wielkiego „D” sąsiaduje z bardziej ściśniętą, taką jak „i”, wobec czego oddalenie między nimi wygląda nie- zręcznie. Kerning sprawia, że takie pary liter są bardziej wyważone i czytelne. Większość krojów zoptymalizowanych na potrzeby projektów cyfrowych, takie jak kroje dostępne w Google Fonts oraz systemowych zbiorach Apple i Microsoftu, mają gotowy kerning, zapewniający proporcjo- nalny wygląd liter na ekranie. Rysunek 5.14. Ciasny, proporcjonalny i luźny tracking 250  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Zestawianie krojów Zestawianie polega na wykorzystaniu w projekcie dwóch krojów. Jest to sztuka sama w sobie, ale obecnie można skorzystać z różnych serwisów pomagających w doborze krojów, które dobrze współ- grają. Z wyszukiwaniem takich kombinacji wiążą się liczne niuanse, ale oto dwie proste zasady:  Przy zestawianiu krojów należących do tej samej rodziny należy zróżnicować tekst przez wy- branie różnej wagi lub różnego stylu czcionki (pogrubiony, pochylony).  Nigdy nie zestawiaj podobnych krojów. Można tego uniknąć dzięki połączeniu kroju szery- fowego z bezszeryfowym (rysunek 5.15). Rysunek 5.15. Przykłady zestawionych krojów Wyrównanie akapitów Wyrównanie akapitów odnosi się do wyobrażonej linii pionowej, do której tekst akapitu jest wyrównany. W projektowaniu cyfrowym można wybrać jedną z czterech opcji: wyrównanie do lewej, do środka, do prawej i justowanie. Justowanie dostosowuje odstępy między wyrazami tak, aby wiersze były wyrównane do obu krawędzi. Wyrównywanie tekstu do lewej jest niezawodnym rozwiązaniem. Jak widać na rysunku 5.16, taki tekst w dużych ilościach jest bardzo czytelny.  Wyrównany do środka tekst przyciąga uwagę, ponieważ jest otoczony pustą przestrzenią, ale zarazem trudniej się go czyta, więc należy używać takiego wyrównania sporadycznie.  Tekst wyrównany do prawej i wyjustowany zwykle nie jest stosowany w projektowaniu UI. Podstawy projektowania graficznego 251  Poleć książkęKup książkę Rysunek 5.16. Wyrównywanie akapitów Cyfry Przy wyborze kroju zawsze należy sprawdzić, jak litery wyglądają w zestawieniu z cyframi. W nie- których krojach trudno odróżnić małe „l” od cyfry „1”, a „0” od wielkiego „O”. Czytelność Wybierając dla fragmentu tekstu krój pisma, określasz ton, w jakim ów tekst jest „wypowiadany”. Może to być ton krzykliwy lub delikatny, przyjazny lub formalny, potoczny lub autorytatywny, modny lub staroświecki. Podobnie jak przy doborze barw, przy doborze wyglądu pisma czytelność (czyli warstwa poznawcza) jest najważniejsza. Drobny tekst — czyli „tekst główny” w mediach drukowanych i na stronach in- ternetowych — należy dobierać uważnie. Poniższe kwestie do uwzględnienia przy określaniu wy- glądu głównego tekstu mają również znaczenie przy definiowaniu tekstu znaczników w interfejsach graficznych, wykorzystywanego przy tworzeniu podpisów pól tekstowych i innych kontrolek.  Na wyświetlaczach komputerowych kroje bezszeryfowe często sprawdzają się najlepiej przy bardzo małych rozmiarach tekstu. Inaczej jest w przypadku druku, gdzie tekst główny pisany krojami szeryfowymi bywa zwykle bardziej czytelny. Piksele nie są wystarczająco duże do właściwego odwzorowywania drobnych czcionek szeryfowych. (Jednak niektóre kroje szery- fowe, takie jak Georgia, wyglądają całkiem dobrze).  Unikaj krojów w formie kursywy i ornamentalnych, gdyż w małych rozmiarach są nieczytelne.  Silnie zgeometryzowane kroje są często niełatwe do odczytania przy małym piśmie, jako że trudno rozróżnić okrągłe litery (e, c, d, o itp.). Do takich krojów należą Futura, Universal i różne inne, które powstały w połowie XX wieku. 252  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę  Trudno odczytać tekst główny pisany samymi wersalikami, choć sprawdzają się one idealnie w nagłówkach i krótkich tekstach. Wielkie litery zwykle są do siebie podobne, a przez to trudne do rozróżnienia.  Duże ilości tekstu, o ile to możliwe, zamieszczaj w kolumnach średniej szerokości — tak by w każdym wierszu znajdowało się do dziesięciu słów. Nie justuj węższych kolumn tekstowych — niech będą postrzępione z prawej. Sugestywność Przejdźmy teraz do reakcji emocjonalnych i fizycznych. Kroje mają różne charaktery, co wynika ze zróżnicowania właściwości graficznych, faktur i kolorów na stronie. Przykładowo niektóre kroje są gęste i ciemne, podczas gdy inne bardziej otwarte (rysunek 5.17). Spójrz na grubość kre- sek oraz względne rozmiary świateł w literach, a następnie przeprowadź „test mrużenia oczu”, je- żeli musisz zdobyć świeże i obiektywne spojrzenie na font. W niektórych krojach litery są węższe niż w innych, a w niektórych rodzinach krojów można znaleźć „skondensowane” kroje, w których litery są jeszcze węższe. Odstępy między literami mogą być większe lub mniejsze, przez co blok tekstu może się wydawać bardziej otwarty lub zamknięty. Rysunek 5.17. Przykładowe kroje Szeryfy i wygięcia są kolejnym czynnikiem, poza kolorem i fakturą pisma. Szeryfy tworzą dodat- kowy poziom, na którym elementy są o wiele mniejsze od samych liter, co dodatkowo wpływa na fakturę kroju — grube kroje bezszeryfowe wydają się dość tępe, grube, a nawet nieokrzesane w porównaniu z szeryfowymi. Choć nie zawsze łatwo wytłumaczyć przyczyny, niektóre kroje „przemawiają” formalnym głosem, a inne nieformalnym. Comic Sans i inne zabawne kroje są zdecydowanie nieformalne, choć to samo można powiedzieć o kroju Georgia w porównaniu z Didot lub Baskerville. Wyrazy zapisywane wersalikami i zaczynające się wielkimi literami wydają się bardziej formalne niż wyrazy pisane minuskułą. Podstawy projektowania graficznego 253  Poleć książkęKup książkę W grę wchodzą tutaj również aspekty kulturowe. Niemodne kroje, zwłaszcza szeryfowe, zwykle sprawiają wrażenie — nietrudno się domyślić — staromodnych, choć wszelkie teksty pisane Futurą (fontem bezszeryfowym) wciąż wyglądają jak rodem z podręcznika naukowego z 1963 roku. Z kroju Verdana korzysta się w internecie tak często, że jest to obecnie standard dla tego medium. Z kolei Chicago na zawsze pozostanie krojem Macintosha, niezależnie od kontekstu, w jakim się z tego kroju korzysta. Przestrzeń i zagęszczenie Niektóre projekty wykorzystują dużo pustej przestrzeni, podczas gdy w innych elementy strony wystę- pują w dużym zagęszczeniu. Duża ilość wolnej przestrzeni wywołuje wrażenie przestronności, otwar- tości, ciszy, spokoju, wolności albo dostojności i godności, w zależności od innych elementów projektu. Zagęszczone projekty mogą w niektórych sytuacjach wywoływać wrażenie pośpiechu lub napięcia. Dlaczego? Ponieważ tekst i inne graficzne elementy muszą „oddychać” — kiedy zderzają się ze sobą oraz z krawędziami strony, powstaje napięcie wizualne, tak jak na rysunku 5.18. Nasz wzrok doszu- kuje się marginesów, wobec czego nieco niepokojące mogą nam się wydawać projekty, w których nagłówki zderzają się z tekstem. Podobnie zresztą koncentracja elementów w pewien sposób potę- guje zabieganą, industrialną atmosferę strony, mimo że poszczególne elementy ze sobą nie kolidują. Rysunek 5.18. Luźny i ściśnięty projekt wizualny Jednak nie wszystkie zatłoczone projekty ewokują tego rodzaju napięcie. Niektóre są przyjazne i komfortowe. Jeżeli dasz tekstowi i innym elementom wystarczająco dużo przestrzeni i zmniej- szysz odstępy między wierszami (leading) do najmniejszej wartości, która jednak umożliwia wy- godne czytanie, może uda Ci się uzyskać przyjaźniejszą i mniej rozbitą atmosferę. Kąty i krzywe Strona składająca się z prostych pionowych linii i kątów prostych na ogół wygląda spokojniej od strony zawierającej przekątne i kształty nieprostokątne. Podobnie zresztą strona, na której ele- menty ułożone są pod różnymi kątami, wydaje się bardziej dynamiczna od strony z pojedynczym, powtarzającym się kątem. 254  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Wygięcia mogą też dodawać ruch i życie, choć nie zawsze tak jest. Projekt składający się z wielu okręgów i łuków może wydawać się spokojny i uspokajający. Tymczasem wygięcie przechodzące przez całą stronę wprawia cały projekt w ruch, a kilka starannie dobranych krzywych w ogólnie prostokątnym projekcie może sprawić, że projekt będzie się jawił jako bardziej wysublimowany i ciekawy. W przykładzie serwisu Stripe z rysunku 5.19 przechylone elementy składają się na dynamiczny, lecz czytelny układ, prowadząc wzrok użytkownika po stronie, a tym samym po ważnych infor- macjach, które powinien przeczytać. Rysunek 5.19. Serwis płatności online Stripe Zwróć uwagę, co się dzieje ze stycznymi dwóch przecinających się krzywych. Czy styczne ułożone są względem siebie pod kątem prostym? W takiej sytuacji mamy do czynienia ze spokojniejszą, bardziej statyczną kompozycją. Jeżeli przecinają się pod ostrzejszym kątem, projekt odznacza się większym napięciem i dynamizmem. (Nie są to żelazne zasady, ale na ogół sprawdzone). Kiedy korzystasz z kątów, krzywych i nieprostokątnych kształtów, zastanów się, gdzie powinieneś umieścić punkty uwagi, np. na wierzchołkach kątów ostrych, przecięciach linii czy punktach zbiegu wielu linii. Wykorzystaj te punkty uwagi do przyciągania wzroku użytkownika tam, gdzie Ci to odpowiada. Podstawy projektowania graficznego 255  Poleć książkęKup książkę Tekstury i rytm Faktury wzbogacają projekty graficzne. Tekst ma własną fakturę, której wygląd można określić, dobierając odpowiednie kroje pisma. Krój jest najważniejszym elementem ogólnej faktury wielu stron i interfejsów. Faktury możesz również wykorzystać do otoczenia mocnych elementów wizualnych i oddzielenia ich od reszty projektu. Faktury wzbogacają obraz i, w zależności od wyglądu, mogą wywoływać wrażenie ciepła, bogactwa, podniecenia albo napięcia. Tekstury, które sprawdzają się najlepiej w projektowaniu interfejsów, są subtelne, a nie przyjmują postaci jaskrawych plansz, kłujących w oczy kolorów — wykorzystują delikatne przejścia kolory- styczne i bardzo drobne detale. Kiedy rozłoży się je na większym obszarze, ich wpływ jest większy, niż można by sądzić. Rysunek 5.20 przedstawia jednak wyjątek od tej reguły. Szimpla Kert jest kawiarnią i sklepem w Budapeszcie, który wykorzystuje w swojej witrynie jaskrawe kolory i faktury, aby wywołać dynamiczne, imprezowe wrażenie. Rysunek 5.20. Witryna Szimpla Kert Uważaj z umieszczaniem tekstur na ekranie za słowami — to sprawdza się rzadko. Jedynie naj- subtelniejsze tekstury nie wpływają negatywnie na czytelność drobnego pisma. Tekstury możesz umieszczać za dużym tekstem, ale uważaj na to, jak krawędzie liter współgrają z różnymi kolora- mi tła — mogą one ulec pozornemu zniekształceniu. 256  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Obrazy Zdjęcia Zdjęcia mogą określić nastrój projektu. W internetowych i mobilnych produktach cyfrowych fo- tografia jest jednym z najsilniejszych środków wyrażania charakteru marki. Odpowiednio umiesz- czonym zdjęciem można opowiedzieć historię o wiele sprawniej niż słowami. Zastosowanie zdjęć jest świetnym sposobem na wywołanie reakcji emocjonalnej. W większość aplikacji komputerowych i mobilnych ważniejsza od stylu jest treść i łatwość obsługi. W interfejsach funkcyjnych czysto dekoracyjnych obrazów należy używać sporadycznie i bardzo uważnie, ponieważ bywają rozpraszające. Oto kilka wskazówek, które warto mieć na uwadze:  Jeżeli używasz zdjęcia z czyjąś twarzą, koniecznie zwróć uwagę na to, w którą stronę postać patrzy. Ludzie mają skłonność do patrzenia tam, gdzie patrzą inni, nawet jeśli tamci są jedynie postaciami na ekranie.  W miarę możliwości unikaj sztampy. Ile razy widziałeś na stronach internetowych te same uśmiechnięte twarze? Dzieci z latawcami? Kompetentnie wyglądających biznesmenów w ele- ganckich garniturach? Drogi wijące się przez piękne górskie krajobrazy? Zachody słońca i pla- że? Falujące zielone wzgórza pod pogodnym, błękitnym niebem? Staraj się nie polegać na ta- kich konwencjach wizualnych, kiedy usiłujesz określić charakter swojej marki.  Zdjęcia stockowe (które możesz kupić z gotowej bazy, a niekiedy nawet wykorzystać za darmo) są w porządku, ale nic nie może się mierzyć pod względem siły wyrazu z autorskimi zdjęciami i grafikami, opracowanymi przez wyszkolonych artystów i projektantów. Ikony Ikona (rysunek 5.21) jest graficznym odwzorowaniem koncepcji i funkcjonalności, zastępującym tekst. Rysunek 5.21. Ikony Podstawy projektowania graficznego 257  Poleć książkęKup książkę Tworzenie ikon, podobnie jak typografia, fotografia i ilustracja, jest dyscypliną samą w sobie. Ikony wyrażają złożone koncepcje w prosty sposób i pomagają użytkownikowi rozeznać się w tym, czego może się spodziewać po kliknięciu lub dotknięciu elementu.  Zapoznaj się z konwencjami UI obowiązującymi w sieci oraz z ikonami w ogóle. Stosowanie standardowych konwencji obecnych w innych projektach ogranicza prawdopodobieństwo, że użytkownik będzie musiał się nauczyć znaczenia ikon.  Dopilnuj, aby wszystkie ikony miały jednakowy styl wizualny: taki sam ciężar graficzny, takie same wypełnienia i obrysy itp.  Nie polegaj na samych ikonach. Używaj ich oszczędnie i w miarę możliwości stosuj także oznaczenia tekstowe, aby użytkownik mógł wszystko zrozumieć. Ikony — materiały i źródła  https://developer.apple.com/design/human-interface-guidelines/ios/icons-andimages/custom-icons  https://thenounproject.com  https://material.io/tools/icons Odniesienia kulturowe Projekt może przywoływać skojarzenia z jakimiś treściami kulturowymi — marką, filmem, nur- tem artystycznym, epoką historyczną, gatunkiem literackim lub niszowym humorem. Znajome odniesienie może na tyle silnie przywoływać wspomnienia lub emocje, że wszystkie inne ele- menty projektowe schodzą na dalszy plan, choć w najlepszych projektach takie odwołania współ- grają z pozostałymi aspektami kompozycyjnymi. Przy nawiązywaniu do treści kulturowych powinieneś, rzecz jasna, wziąć pod uwagę swoich od- biorców. Dziesięciolatek nie zrozumie odniesienia do pop-artu z lat 70. Dorosłemu człowiekowi z Indii prawdopodobnie też żadne skojarzenia nie przyjdą do głowy. Jeżeli jednak odpowiednio konkretnie zidentyfikowałeś swoich odbiorców, żeby mieć pewność, że dane odniesienie kultu- rowe wyda im się znajome, to może być ono dobrym sposobem na wywołanie u nich emocjonalnej reakcji na Twój projekt. Odniesienia kulturowe rzadko są wykorzystywane w projektach funkcjonalnych aplikacji, lecz można się z nimi spotkać w aplikacjach w rodzaju QuickBooks, gdzie niektóre ze stron wyglądają jak rachunki i czeki. W takich przypadkach mamy do czynienia z wykroczeniem poza samą styli- zację i pojawieniem się metafory interakcji, lecz ta metafora wciąż jest w pełni uwarunkowana kulturowo — ktoś, kto w życiu nie widział książeczki czekowej, zareaguje inaczej niż ktoś, kto się z nią zetknął. Powtarzające się motywy graficzne Dobry projekt charakteryzuje się jednością: jest dziełem, którego wszystkie elementy wspomagają się nawzajem strukturalnie i ekspresyjnie. Trudno to osiągnąć. Nie podam jednoznacznych wy- tycznych, jak to zrobić, gdyż wymaga to umiejętności i doświadczenia. 258  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Do ugruntowania jedności wizualnej znacząco przyczynia się powtarzanie elementów i motywów graficznych. Powiedziałam już o kątach i krzywych. Jako powtarzające się elementy projektu możesz wykorzystać przekątne linie przechylone pod tym samym kątem bądź linie o podobnym zakrzywieniu. Zastanów się również nad typografią. Tekst główny powinien być pisany tylko jednym krojem, choć dodatkowe kroje możesz bardzo sprawnie wykorzystać na małych obszarach w rodzaju pa- sków bocznych lub linków nawigacyjnych. (Takie elementy tekstowe wyróżniają się ze względu na skontrastowanie z formą głównego tekstu). Jeżeli w projekcie znajduje się kilka nagłówków lub zatytułowanych sekcji, oznacz je takim samym krojem. W projekcie możesz też wykorzystać po- mniejsze elementy graficzne tekstu — w rodzaju wysokości wiersza i koloru. Tego typu rytm graficzny bywa niezwykle skutecznym narzędziem. Używaj go rozważnie i wyko- rzystuj do grupowania porównywalnych elementów — użytkownicy założą, że podobieństwo formy przekłada się na podobieństwo funkcji. Co to oznacza dla aplikacji biznesowych Czytelnicy, którzy zajmują się tworzeniem przeznaczonych dla konsumentów produktów cyfro- wych, mogą już być zaznajomieni z omówionymi wcześniej zagadnieniami. Ludzie oczekują od stron internetowych i aplikacji mobilnych wyrazistej stylizacji graficznej, dlatego rzadko zdarzają się takie, które byłyby zupełnie proste i neutralne. Cóż jednak masz robić, jeśli tworzysz aplikacje biznesowe? Kiedy zechcesz zastosować te zasady jedynie do wyglądu kontrolek, możesz nie mieć zbyt dużego wyboru. Aplikacje na Windows i Macintosha zazwyczaj opierają się na bazowym wyglądzie interfejsu platformy — chyba że jesteś gotów włożyć duży wysiłek w utworzenie własnej oprawy graficznej. Aplikacje biznesowe należy optymalizować pod kątem obiegu pracy i projektować tak, aby używanie ich przez długi czas w pracy nie było męczące. W takiej sytuacji możesz z czystym sumieniem zdecydować się na wykorzystanie standardowej, właściwej dla platformy oprawy graficznej i skoncentrowanie swoich wysiłków na innym obszarze. Jeśli nawet właściwe elementy funkcyjne Twojej aplikacji mają być neutralne, to i tak możesz się wykazać kreatywnością. Tła Nierzucające się w oczy obrazy, wypełnienia gradientowe i subtelne tekstury lub powtarzające się wzorki na dużych obszarach tła mogą niesamowicie rozjaśnić interfejs. Umieszczaj je w tłach okien, stron, dendrogramów, tabel, list oraz ramek (w połączeniu z obwódkami ramek). Kolory i kroje Często możliwe jest dobieranie ogólnych motywów kolorystycznych i krojów także w inter- fejsach opartych na standardach platformowych. Możesz np. przedstawić nagłówki o kilka punktów większe od standardowego tekstu w oknach albo nawet zamieszczać je na paskach z kontrastującym kolorem tła. Rozważ wykorzystanie takich elementów, jeżeli projektujesz stronę z Zatytułowanymi Sekcjami (rozdział 7.). Co to oznacza dla aplikacji biznesowych 259  Poleć książkęKup książkę Obwódki Obwódki dają kolejną możliwość kreatywnej stylizacji. I znowu, jeżeli korzystasz z Zatytuło- wanych Sekcji lub jakiegokolwiek innego rodzaju grup elementów, możesz zmienić wygląd obwódek. Obrazy W niektórych zestawach narzędzi do tworzenia interfejsów masz możliwość zastąpienia stan- dardowego wyglądu poszczególnych elementów wybranymi obrazami. Często tak bywa z przy- ciskami, więc przyciski (wraz z obwódkami) w Twoim interfejsie mogą wyglądać tak, jak tyl- ko zechcesz. Przy tabelach, dendrogramach i listach niekiedy można zdefiniować wygląd ich elementów. W układach interfejsów można również umieszczać statyczne obrazy, co daje możliwość zamieszczania obrazów praktycznie wszędzie. Dostępność Najważniejszym wymaganiem, jakie należy spełnić, jest dostępność. Systemy operacyjne, takie jak Windows, pozwalają użytkownikom na zmianę stylu tekstu i motywów kolorystycznych. To nie zabawa — niedowidzący użytkownicy używają motywów graficznych pulpitu o wysokim kontra- ście oraz dużych rozmiarów tekstu, żeby zobaczyć, co właściwie robią. Dopilnuj, by Twój interfejs mógł współpracować z takimi motywami. To Twój moralny obowiązek1. Należy też uwzględnić zagrożenie: możliwość wywołania zmęczenia u użytkowników. Jeżeli pro- jektujesz aplikację, która ma być przez długi czas używana w widoku pełnoekranowym, stonuj nasycone kolory, wielki tekst, silne kontrasty i przyciągające wzrok tekstury — projekt powinien być spokojny, a nie krzykliwy. Co ważniejsze, jeżeli Twoja aplikacja ma być używana w sytuacjach stresogennych, jak np. na panelu obsługi ciężkiego sprzętu, wyeliminuj wszystkie zbędne elementy, które mogą odciągać uwagę użytkowników od właściwego zadania. W takich sytuacjach kwestie poznawcze są o wiele ważniejsze od estetyki. Rodzaje stylów wizualnych Style projektów graficznych zmieniają się dość szybko. Najczęściej nowe wydania systemów ope- racyjnych wywołują zmiany w stylach wizualnych interfejsów, które są wprowadzane po ich udo- stępnieniu. Apple, Microsoft, a współcześnie także Google właśnie w taki sposób wyznaczają trendy graficzne dla aplikacji używanych na ich platformach. Omówimy tutaj szerzej kilka stylów, które najczęściej występują na takich platformach i w różnych punktach styczności z nimi: w internecie, programach komputerowych i aplikacjach mobilnych. 1 W zależności od tego, dla kogo Twoje oprogramowanie jest przeznaczone, może to też być wymóg prawny. Na przykład amerykański rząd wymaga, aby wszelkie oprogramowanie używane przez agencje federalne było dostępne dla osób niepełnosprawnych (więcej informacji znajdziesz na stronie https://www.section508.gov/). Ustawa ADA również określa pewne standardy (https://www.ada.gov/2010ADAstandards_index.htm). 260  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Skeumorficzny Projekt skeumorficzny nawiązuje do stylu interfejsu użytkownika, który imituje właściwości rze- czywistych przedmiotów. Skeumorfizm często jest wykorzystywany w okresie przejściowym, kie- dy pojawia się nowy rodzaj interakcji, a twórcy chcą pomóc użytkownikowi zrozumieć działanie danej funkcji z wykorzystaniem koncepcji, z którą już jest zaznajomiony. Kiedy Apple wprowadziło na rynek iPada, skeumorficzne projekty graficzne były wykorzysty- wane w niemal wszystkich aplikacjach. Miało to pomóc użytkownikowi w nauce korzystania z interfejsu dotykowego. W widocznym na rysunku 5.22 przykładzie aplikacji Apple Wallet (po lewej) elementy na liście danych z wyglądu przypominają plastikowe karty. Przełożenie rzeczywistych przedmiotów na cy- frowe pomaga użytkownikowi znaleźć to, czego szuka, a także zarządzać elementami i ich położeniem. Rysunek 5.22. Aplikacja Wallet i kalkulator na iOS Apple z powodzeniem ponownie wykorzystało skeumorfizm w aplikacji kalkulatora (rysunek 5.22, po prawej). Zaokrąglone przyciski mają idealną wielkość „pola dotyku” (ang. touch target — to po- jęcie obszerniej omówimy w rozdziale 6., w kontekście projektowania na urządzenia mobilne), a ich działanie odpowiada temu, czego można się spodziewać po fizycznym kalkulatorze. W ten sposób twórcy iOS sprawili, że iPhone przeobraża się zgodnie z docelową funkcjonalnością aplikacji. Rodzaje stylów wizualnych 261  Poleć książkęKup książkę Skeumorfizm można także wykorzystać w ramach innego stylu, by zwiększyć jego użyteczność. W ramach konfiguracji Square Invoice (rysunek 5.23) projektant postanowił użyć wizualnego ję- zyka rzeczywistego blankietu czekowego, tak aby użytkownik wiedział, gdzie podać numer rozli- czeniowy i numer konta bankowego, które są potrzebne do założenia konta w aplikacji. Rysunek 5.23. Wprowadzanie danych konta bankowego w Square Invoice w ramach interfejsu Eventbrite Ilustrowany Projekt interfejsu nie musi być chłodny i sterylny. Jeśli ma to sens dla marki, wykorzystanie ilu- stracji jest dobrym sposobem, aby nadać aplikacji lub witrynie zabawny, przystępny charakter. Wykorzystanie stylu ilustrowanego uwalnia Cię od ograniczeń świata rzeczywistego i pozwala na wyrażenie złożonych koncepcji w sposób możliwy jedynie w ludzkiej wyobraźni. Eventbrite (rysunek 5.24) jest prowadzącym sprzedaż biletów serwisem z ogłoszeniami o wyda- rzeniach. Interfejs jego aplikacji mobilnej w pełni wykorzystuje możliwości stylu ilustrowanego, dzięki czemu ma ciepły i zachęcający wygląd. 262  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Rysunek 5.24. Interfejs Eventbrite Florence (rysunek 5.25) jest serwisem, gdzie samozatrudnieni pracownicy branży opieki mogą przeglądać zmiany, na których chcieliby pracować. Mogła to być nudna, staromodna witryna, ale ilustracje i projekt graficzny wskazują na przyjazną, ciekawą markę. Happy Cow (rysunek 5.26) jest aplikacją mobilną, która pomaga wegetarianom i weganom w wy- szukiwaniu lokali i sklepów na całym świecie. Interfejs aplikacji wykorzystuje maskotkę uśmiech- niętej krowy oraz pogodnie wyglądające ikony. Kiedy produktem jest sama aplikacja lub witryna, tak jak w przypadku omówionych tutaj przykła- dów, wykorzystanie niestandardowych ilustracji jest skutecznym sposobem na zbudowanie cha- rakterystycznego wizerunku marki. Płaski Projekty płaskie, charakteryzujące się jednolitymi kolorami tła, prostymi, zrozumiałymi ikonami i krojami bezszeryfowymi, są wszechobecne w internecie i aplikacjach mobilnych. Wystarczy pomyśleć o stylu oznaczeń używanym na lotniskach i w komunikacji zbiorowej, aby zrozumieć, dlaczego taki płaski i minimalistyczny styl jest tak powszechnie lubiany. Jest neutralny kulturowo, łatwy w lokalizacji i może być skalowany na potrzeby różnej wielkości widoków (rozmiarów ekranu). Rodzaje stylów wizualnych 263  Poleć książkęKup książkę Rysunek 5.26. Happy Cow Styl płaski jest uznawany za prawdziwie cyfrowy, ponieważ język wizualny interfejsu (z wyjątkiem ikon) nie nawiązuje do rzeczywistych przedmiotów. Zamiast tego interfejs ma się łączyć z tłem i pozwalać użytkownikowi skupić się na samej treści. Przykłady widoczne na rysunku 5.27 przedstawiają zastosowanie płaskiego stylu w aplikacjach mobilnych. Jakie widzisz podobieństwa? Czy dostrzegasz użycie jednolitych kolorów, poje- dynczego kroju w różnych rozmiarach i dwuwymiarowych ikon? Kiedy zwracasz uwagę na ten styl wizualny, zaczynasz dostrzegać, że używa się go wszędzie. AirVisual (rysunek 5.28) jest aplikacją mobilną pokazującą jakość powietrza w miastach na całym świecie. Łączy ona płaski design z niestandardowymi ilustracjami, co składa się na przejrzystą i użyteczną oprawę wizualną. Więcej na temat projektowania płaskiego  https://www.microsoft.com/design/fluent  https://material.io/design 264  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Rysunek 5.27. Aplikacje Cash i Booking.com Rysunek 5.28. Aplikacja AirVisual Rodzaje stylów wizualnych 265  Poleć książkęKup książkę Minimalistyczny W projektach minimalistycznych liczba elementów na ekranie jest ograniczona do absolutnego minimum. Takie projekty często są stosowane w aplikacjach z listami zadań, gdzie użytkownik może wykonać jedynie kilka prostych czynności, a interfejs służy raczej do przeglądania danych, niż wprowadzania ich i zarządzania nimi. Clear Todos (rysunek 5.29) jest skrajnym przykładem, w którym widoczne są jedynie różne odcie- nie, tekst i bardzo ograniczony zakres wizualnych wskazówek co do tego, jak działa interfejs. Rysunek 5.29. Aplikacja Clear Todos Aplikacja Calm (rysunek 5.30, po lewej) pokazuje wyłącznie to, co użytkownik absolutnie musi zobaczyć na danym ekranie. W tym przykładzie jeden przycisk kontroluje funkcjonalność, a subtelna, lecz pomocna animacja przekazuje mu instrukcje. Interfejs wizualny Apple Health (rysunek 5.30, po prawej) jest oparty na wyrazistych, kolorowych infografikach. Glitché (rysunek 5.31 po lewej) jest aplikacją do tworzenia zdjęć i filmów w stylu „glitch”. Mini- malistyczny UI pozwala użytkownikowi skoncentrować się na zadaniu i nie ma w nim zajmują- cych miejsce na ekranie elementów, które odciągałyby użytkownika od nagrywania i edycji. Aplikacja muzyczna Bloom Briana Eno (rysunek 5.31 po prawej) kieruje interakcją użytkownika z interfejsem jedynie przy użyciu wskazówek dźwiękowych. Korzystanie z aplikacji opiera się na subtelnych zmianach kolorów i dźwięków tła, które zachęcają do eksploracji i tworzenia. 266  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Rysunek 5.30. Aplikacje Calm i Apple Health Rysunek 5.31. Glitché i Bloom Rodzaje stylów wizualnych 267  Poleć książkęKup książkę Adaptacyjny/parametryczny Styl adaptacyjny lub parametryczny, będący przeciwieństwem minimalistycznego, odnosi się do projektów, których forma nie pozostaje statyczna, lecz raczej jest generowana algorytmicznie na podstawie pojawiających się w pobliżu statycznych lub dynamicznych obiektów. Taki paradygmat często jest obecny w aplikacjach fotograficznych i wideo, ale będzie się on pojawiać coraz częściej także w innych rodzajach interfejsów. Trudno w pełni wyrazić w słowach charakter takiego pro- jektu. Wyobraź sobie interfejs, który pozostaje w większości niewidoczny, dopóki nie trafi na coś, co umożliwia dokonanie interakcji. Wówczas UI ujawnia się i owija wokół obiektu, z którym użytkownik może nawiązać interakcję. Przy tworzeniu projektów graficznych takich interfejsów kluczowe jest zapewnienie dużego kontrastu i płynnego stylu wizualnego. Apple Measure (rysunek 5.32) jest wbudowanym w system iOS narzędziem do mierzenia. Użyt- kownik, aby coś zmierzyć, kieruje telefon lub tablet w stronę przedmiotu, po czym w interfejsie pojawiają się narzędzia i funkcje pomiarowe. Rysunek 5.32. Apple iOS Measure Simple (rysunek 5.33) jest bankową aplikacją mobilną. W celu zdeponowania czeku użytkownik zostaje poproszony o sfotografowanie go, po czym na ekranie pojawia się interfejs sprawdzający, czy czek jest odpowiednio ułożony, i wskazujący, kiedy można zrobić zdjęcie. 268  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę Rysunek 5.33. Fotografowanie czeku w Simple Podsumowanie Sprawne projektowanie wizualne jest umiejętnością, której opanowanie wymaga czasu. Projekto- wanie graficzne jest dyscypliną samą w sobie, a omówienie niuansów siatek, teorii barw, typografii i psychologii postaci w stopniu dostatecznym, aby w pełni zrozumieć, jak tworzy się idealne pro- jekty, wymagałoby o wiele więcej niż pojedynczego rozdziału. Na szczęście nowe narzędzia do two- rzenia i edycji witryn dają każdemu, kto ma wystarczające fundusze i treści do przekazania, moż- liwość skorzystania z funkcji pozwalających uzyskać idealny kerning i perfekcyjną oprawę. Platformy do tworzenia witryn internetowych, takie jak Squarespace Wix i WordPress, zapew- niają przygotowane przez designerów gotowe szablony. Narzędzia te w znacznym stopniu elimi- nują niepewność związaną z projektowaniem layoutów, dopracowywaniem odstępów i marginesów oraz dbaniem o czytelność. Opisaliśmy tutaj zaledwie wierzchołek góry lodowej, jaką jest projektowanie graficzne w kontek- ście UI. Należy przede wszystkim zapamiętać, że estetyka ma znaczenie, a właściwe dopracowanie szczegółów jest decydujące dla sposobu, w jaki odbiorcy będą postrzegać Twój produkt lub usługę. Podsumowanie 269  Poleć książkęKup książkę 270  Rozdział 5. Styl wizualny i estetyka Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Projektowanie interfejsów., Sprawdzone wzorce projektowe. Wydanie III
Autor:
, ,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: