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:

• 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

Wzorce projektowe interfejsów: najlepsze wsparcie projektanta UX!

Osoby które kupowały "Projektowanie interfejsów. Sprawdzone wzorce projektowe. Wydanie III", wybierały także:

• Windows Media Center. Domowe centrum rozrywki 66,67 zÅ‚, (8,00 zÅ‚ -88%)
• 66,67 zÅ‚, (14,00 zÅ‚ -79%)
• Superinteligencja. Scenariusze, strategie, zagro 66,67 zÅ‚, (14,00 zÅ‚ -79%)
• Przywództwo w Å›wiecie VUCA. Jak być skutecznym liderem w niepewnym Å›rodowisku 58,64 zÅ‚, (12,90 zÅ‚ -78%)
• Twoja firma w social mediach. Podr 58,33 zÅ‚, (14,00 zÅ‚ -76%)

Spis treści

Projektowanie interfejsów. Sprawdzone wzorce projektowe. Wydanie III -- 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