Design organiczny Słów kilka o przyjemnych aplikacjach.

Prezentacja na temat: "Design organiczny Słów kilka o przyjemnych aplikacjach."— Zapis prezentacji:

1 Design organiczny Słów kilka o przyjemnych aplikacjach

2 Organiczny? WTF? Marcin Korniluk – Animacja organiczna2 blender axis-interactive.com

3 Co mamy teraz? Produkt ma być żywy Jabłkofony i Interfejs naturalny Marcin Korniluk – Animacja organiczna3

4 Co chcemy osiągnąć? Naturalne zachowanie Rozpoznawalność elementów Niski koszt $ Marcin Korniluk – Animacja organiczna4

5 Percepcja użytkownika Chwyt, przesunięcie i rzut Wszystko w świecie powodują siły Ruch z przyspieszeniem Tarcie Ruchy Browna i wiatr Marcin Korniluk – Animacja organiczna5

6 Założenia Marcin Korniluk – Animacja organiczna6 Nie pchamy się wszędzie Obsługa użytkownika Prosta fizyka Efekty graficzne Wartości z sufitu

7 Prosta fizyka Tarcie statyczne i dynamiczne Grawitacja Ruchy Browna i wiatr Punkt materialny Marcin Korniluk – Animacja organiczna7

8 Efekty graficzne Skalowanie + kolejność 3D Gradient wypukłość Cień rzucany nakładanie Powiększanie podnoszenie Marcin Korniluk – Animacja organiczna8

9 Wartości z sufitu Krok czasowy jest stały Metr/sekundę -> piksel/klatkę Percepcja vs poprawność Wydajność vs poprawność Marcin Korniluk – Animacja organiczna9 Jestem stałą Reynoldsa

10 Śnieżyca velx = 0; velr = 0; alpha = Math.random() * 100; xscale = yscale = Math.random() * 80 + 20; y = 0; x = Math.random() * parent.width; onEnterFrame = function() { velr += Math.random() * 2 - 1; velr *= 0.9; rotation += velr; velx += (Math.random() * 2 - 1) / 10; velx *= 0.99; x += velx; y += xscale / 100; }; Marcin Korniluk – Animacja organiczna10

11 Twitter layout Tablet Pływające menu Prawo Hooka Tarcie Stos kart Marcin Korniluk – Animacja organiczna11

12 Antyprzykład kontrolki Animacja w jednym kierunku 3 style animacji 3 style elementów niedopasowanie Marcin Korniluk – Animacja organiczna12

13 Przykład WWW Marcin Korniluk – Animacja organiczna13 2advanced.com

14 Antyprzykład WWW Marcin Korniluk – Animacja organiczna14 start-the-change.org

15 Zastosowania UI mobile Menu, reklamy, WWW Elementy gier niezależne od gracza Marcin Korniluk – Animacja organiczna15

16