Projektowanie interfejsów. Sprawdzone wzorce projektowe. Wydanie III - J. Tidwell, C. Brewer, A. Valencia-Brooks

Opis produktu: Projektowanie interfejsów. Sprawdzone wzorce projektowe. Wydanie III - J. Tidwell, C. Brewer, A. Valencia-Brooks

Podręcznik pozwala zapoznać się z podstawowymi teoriami i praktycznymi aspektami dobrego designu. III wydanie zostało uzupełnione o najnowsze osiągnięcia w tej dziedzinie. Zawiera zbiór sprawdzonych wzorców projektowych. 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.

Książka pomaga początkującym programistom:

• przygotować się do projektowania interfejsu
• zapewnić, aby oprogramowanie miało strukturę zrozumiałą dla użytkowników
• projektować komponenty ułatwiające użytkownikom wykonywanie zadań
• ułatwić użytkownikom odnajdywanie potrzebnych funkcji
• uwzględniać w projektowaniu wizualnym aspekt użyteczności produktu
• tworzyć efektowne wizualizacje do prezentacji danych

Projektowanie interfejsów. Sprawdzone wzorce projektowe. Wydanie III - J. Tidwell, C. Brewer, A. Valencia-Brooks.

Projektowanie interfejsów. Sprawdzone wzorce projektowe. Wydanie III.

Informacje o autorach

Informacje o książce

• Tytuł oryginalny: Designing Interfaces: Patterns for Effective Interaction Design, Third Edition
• Autorzy: Jenifer Tidwell, Charlie Brewer, Aynne Valencia
• Tłumaczenie: Maksymilian Gutowski
• ISBN: 978-83-283-6741-8
• Rok wydania: 2020
• Format: 168 x 237 mm
• Oprawa: miękka
• Ilość stron: 504
• Wydawnictwo: Helion S.A.

Spis treści

Wprowadzenie do trzeciego wydania 11

1. Projektowanie dla ludzi 19

• Kontekst 20
  • Poznaj odbiorcę 20
  • Interakcja jest konwersacją 20
  • Dopasowanie treści i funkcjonalności do potrzeb odbiorców 21
  • Poziom umiejętności 22
  • Interfejs jest jedynie środkiem do celu 23
  • Spytaj: Dlaczego? 24
  • Wartość projektowania: właściwe rozwiązanie właściwego problemu 24
• Badania: sposób na poznanie kontekstu i celów 26
  • Obserwacja bezpośrednia 27
  • Studia przypadków 27
  • Ankiety 27
  • Persony 28
  • Badania projektowe nie są badaniami rynku 28
• Wzorce - procesy poznawcze i zachowania związane z projektem interfejsu 29
  • Bezpieczna eksploracja 30
  • Pragnienie natychmiastowej satysfakcji 31
  • Satisficing 31
  • Zmiany na bieżąco 32
  • Odwlekanie decyzji 33
  • Stopniowa konstrukcja 34
  • Przyzwyczajenie 35
  • Mikroprzerwy 36
  • Pamięć przestrzenna 37
  • Pamięć prospektywna 38
  • Wspomagane powtarzanie 40
  • Obsługa klawiaturą 41
  • Media społecznościowe, dowód społeczny i współpraca 42
• Podsumowanie 43

2. Organizacja treści: architektura informacji i struktura aplikacji 45

• Cel 46
• Definicja 46
  • Projektowanie obszarów informacyjnych dla ludzi 47
• Podejście 47
  • Oddzielenie informacji od prezentacji 47
• Zasada MECE 48
• Sposoby organizacji i kategoryzacji treści 49
  • Alfabet 49
  • Liczba 49
  • Czas 49
  • Lokalizacja 50
  • Hierarchia 50
  • Podobieństwo 50
• Projektowanie na potrzeby aplikacji zorientowanych na zadaniowość i obieg pracy 50
  • Widoczność często używanych elementów 50
  • Dziel zadania na sekwencje kroków 51
  • Wielokanałowość i zróżnicowanie rozmiarów ekranów 51
  • Informacje w formie kart 51
• Projektowanie systemu typów ekranów 52
• Ogląd - pokazanie listy lub siatki elementów 52
• Skupienie - pokazanie jednego elementu 54
• Tworzenie - udostępnienie narzędzi kreatywnych 54
• Działanie - umożliwienie wykonania czynności 55
• Wzorce 55
  • Ekspozycja, wyszukiwanie i przeglądanie 56
  • Bezpośredni dostęp mobilny 66
  • Aktualności 67
  • Przeglądarka multimediów 81
  • Pulpit 90
  • Płótno i paleta 93
  • Kreator 97
  • Edytor ustawień 99
  • Różne widoki 105
  • Wiele obszarów roboczych 112
  • System pomocy 115
  • Tagi 126
• Podsumowanie 132

3. Tam i z powrotem: nawigacja, drogowskazy i orientacja 133

• Przestrzeń informacji i czynności 134
• Drogowskazy 134
• Orientacja 134
• Nawigacja 135
  • Nawigacja globalna 135
  • Nawigacja funkcyjna 136
  • Nawigacja asocjacyjna i wierszowa 136
  • Powiązane treści 136
  • Tagi 136
  • Model społecznościowy 137
• Konwencje projektowania nawigacji 137
  • Oddzielenie projektu nawigacji od projektu wizualnego 137
  • Obciążenie poznawcze 137
  • Niewielkie odległości 138
• Modele nawigacyjne 139
  • Oś i szprychy 139
  • Pełne połączenie 140
  • Wiele poziomów lub drzewo 140
  • Krok po kroku 142
  • Piramida 142
  • Płaska nawigacja 144
• Wzorce 144
  • Wskazane punkty startowe 145
  • Spis treści 150
  • Piramida 155
  • Panel modalny 159
  • Głębokie linkowanie 164
  • Wyjście ewakuacyjne 168
  • Grube menu 172
  • Mapka strony w stopce 176
  • Narzędzia logowania 181
  • Mapa sekwencji 183
  • Okruszki 188
  • Pasek przewijania z adnotacją 192
  • Animowane przejście 195
• Podsumowanie 200

4. Układ elementów 201

• Podstawy tworzenia layoutu 201
  • Hierarchia wizualna 201
  • Co sprawia, że element wydaje się ważny 202
  • Cztery zasady psychologii postaci 207
  • Przepływ wzroku 209
  • Wykorzystanie dynamicznych elementów 211
  • Odblokowywanie reakcyjne 213
  • Ujawnianie reakcyjne 213
  • Obszary interfejsu 214
• Wzorce 215
  • Layout 215
  • Wydzielanie informacji 216
  • Ramy graficzne 216
  • Obszar centralny 219
  • Siatka równoprawnych elementów 222
  • Zatytułowane sekcje 223
  • Zakładki 226
  • Akordeon 230
  • Zwijane panele 233
  • Ruchome panele 235

5. Styl wizualny i estetyka 239

• Podstawy projektowania graficznego 240
  • Hierarchia wizualna 240
  • Kompozycja 240
  • Kolor 242
  • Typografia 246
  • Czytelność 252
  • Sugestywność 253
  • Obrazy 257
• Co to oznacza dla aplikacji biznesowych 259
  • Dostępność 260
• Rodzaje stylów wizualnych 260
  • Skeumorficzny 261
  • Ilustrowany 262
  • Płaski 263
  • Minimalistyczny 266
  • Adaptacyjny/parametryczny 268
• Podsumowanie 269

6. Urządzenia mobilne 271

• Wyzwania i szanse towarzyszące projektowaniu na urządzenia mobilne 272
  • Niewielki rozmiar ekranu 272
  • Zróżnicowana szerokość ekranu 272
  • Ekrany dotykowe 273
  • Trudność w pisaniu 273
  • Problemy związane z otoczeniem 273
  • Lokalizacja 274
  • Kontekst społeczny i ograniczona uwaga 274
• Jak podejść do projektowania dla urządzeń przenośnych 274
  • Wzorowe przykłady 277
• Wzorce 279
  • Pionowy stos 280
  • Klisza 282
  • Narzędzia dotykowe 284
  • Dolny pasek nawigacyjny 288
  • Kolekcje i karty 289
  • Nieskończona lista 293
  • Duże marginesy 294
  • Wskaźniki wczytywania 297
  • Połączone aplikacje 298
• Zadbaj o interfejs mobilny 303

7. Listy 305

• Scenariusze korzystania z list 305
• Architektura informacji 306
• Co chcesz pokazać? 307
• Wzorce 310
  • Wybór dwupanelowy lub widok złożony 310
  • Uszczegółowienie w jednym oknie 314
  • Wkładki 317
  • Karty 320
  • Siatka miniaturek 323
  • Karuzela 327
  • Paginacja 329
  • Bezpośrednie przejście do elementu 332
  • Przewijanie alfabetyczne/numeryczne 335
  • Pole nowego elementu 336
• Podsumowanie 338

8. Jak to się robi: czynności i polecenia 339

• Dotykanie, przeciąganie i szczypanie 340
• Obracanie i potrząsanie 341
• Przyciski 341
• Paski menu 341
• Menu kontekstowe 342
• Rozwijane menu 342
• Paski narzędzi 342
• Odnośniki 342
• Panele poleceń 342
• Ukryte narzędzia 343
• Pojedyncze i dwukrotne kliknięcia 343
• Polecenia klawiszowe 343
  • Skróty 344
  • Kolejność tabulacji 344
• Przeciągnij i upuść 344
• Wpisywane polecenia 344
• Afordancja 345
• Bezpośrednia manipulacja obiektami 345
• Wzorce 347
  • Grupy przycisków 348
  • Ukryte narzędzia 350
  • Panel poleceń 353
  • Wyszczególniony przycisk "Zakończ" 356
  • Inteligentne elementy menu 362
  • Podgląd 364
  • Spinnery i wskaźniki postępu 368
  • Odwoływalność 373
  • Wielopoziomowe cofanie czynności 375
  • Historia poleceń 379
  • Makra 381
• Podsumowanie 387

9. Prezentowanie złożonych danych 389

• Podstawy infografik 389
  • Modele organizacyjne - jak wygląda organizacja danych? 390
  • Przedświadoma interpretacja zmiennych - co wiąże się z czym? 391
  • Nawigacja i przeglądanie - jak mogę zgłębić te dane? 395
  • Sortowanie i przestawianie - czy mogę zmienić strukturę danych, by uzyskać inny punkt widzenia? 396
  • Wyszukiwanie i filtrowanie - w jaki sposób mogę dostać wyłącznie te dane, których potrzebuję? 399
  • Dane jako takie - jakie są konkretne wartości danych? 400
• Wzorce 402
  • Chmurki informacyjne 402
  • Podświetlanie danych 406
  • Dynamiczne kwerendy 408
  • Rozrysowywanie danych 411
  • Równoległe wykresy 415
  • Wykres panelowy 418
• Moc wizualizacji danych 422

10. Dane wejściowe: formularze i kontrolki 423

• Podstawy projektowania formularzy 424
  • Formularze stale ewoluują 426
  • Dodatkowe materiały 427
• Wzorce 427
  • Format pobłażliwy 428
  • Format strukturalny 432
  • Uzupełnianie 435
  • Wskazówki 438
  • Zapytanie 442
  • Miernik bezpieczeństwa hasła 444
  • Automatyczne uzupełnianie 449
  • Rozwijany selektor 456
  • Kreator listy 460
  • Poprawne wartości domyślne 464
  • Komunikaty o błędach 468
• Podsumowanie 474

11. Systemy interfejsów użytkownika i Atomic Design 475

• Systemy UI 476
  • Przykład systemu UI opartego na komponentach: Microsoft Fluent 476
• Atomic Design - metodyka projektowania systemów 479
  • Przegląd 480
  • Hierarchia Atomic Design 481
• Frameworki UI 482
  • Przegląd 483
  • Korzyści 483
  • Właściwości frameworków UI 483
  • Przegląd wybranych frameworków UI 484
• Podsumowanie 494

12. Poza ekranem 497

• Inteligentne systemy - części składowe 498
  • Połączone urządzenia 498
  • Systemy antycypacyjne 498
  • Systemy asystujące 498
  • Naturalne interfejsy użytkownika 499
• Podsumowanie 499