Мой опыт проектирования мобильных интерфейсов (dump-it,...
DESCRIPTION
Слайды к выступлению на конференции DUMP-IT, Екатеринбург, 25 мая 2012TRANSCRIPT
![Page 1: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/1.jpg)
Особенности проектирования интерфейсов
Фил Смирнов, Motka Design Studiohttp://motka.ru
для мобильных устройств
![Page 2: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/2.jpg)
О чем я расскажу:• Коротко о моем собственном опыте проектирования интерфейсов
• Платформы для мобильных приложений. Единый кроссплатформенный интерфейс.
• Принципиальные различия мобильных и web- интерфейсов.
• “Язык” интерфейса. Стандартизация UI элементов и парадигм. В чем креатив?
• Методика процесса проектирования
![Page 3: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/3.jpg)
Мой опыт проектирования
• Что такое проектирование? Зачем оно нужно с точки зрения дизайнера?
• Скорость, Гибкость, Целесообразность• Газета.Ру - Motka - inVenture
• News360 - Pronto - Vidimax / Vichatter
• UXi Copenhagen, Web 2.0 EXPO
![Page 4: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/4.jpg)
Мобильные платформы 2012
• iPhone
• iPad
• Android Phone 2.x
• Android Honeycomb(Tablet)
• Windows Phone 7/8
• Blackberry + Playbook
• Symbian native
• HTML5+CSS3 (webkit)
• Opera Mini
• Kindle, Bada, etc..
Что называют мобильными приложениями?
![Page 5: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/5.jpg)
Единый кроссплатформенный интерфейс
• Различия в парадигмах UI: iPhone vs Android
• Различный форм-фактор экрана: Smartphone vs Tablet
• Ограничения: HTML5 vs Native
Технически - самый компромиссный вариант: HTML5 приложение + Sencha/PhoneGap bundle
![Page 6: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/6.jpg)
![Page 7: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/7.jpg)
![Page 8: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/8.jpg)
![Page 9: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/9.jpg)
Различия мобильных и web-интерфейсов
• Контекст использования• Размеры экрана
• Кол-во информации• Модальности/параллельные потоки• Цена клика, интерактивность• Geo-location
![Page 10: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/10.jpg)
![Page 11: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/11.jpg)
Стандартизация UI
• Что в ней хорошего? Зачем она нужна?“Язык” интерфейса.
• Стандартные контролы• Стандартные пиктограммы (quiz?
awesome font)
• Работа с референсами
![Page 12: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/12.jpg)
![Page 13: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/13.jpg)
![Page 14: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/14.jpg)
Куда девать “креатив”?• Метафора (от красоты отдельных экранов, к цельному впечатлению)
• Easy-to-use - универсальная мотивация
• “Рыба” - Interface design is copywriting (диалог с пользователем)
• Анимация, переходы - возможность объяснить что к чему, без слов.
![Page 15: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/15.jpg)
![Page 16: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/16.jpg)
Методика проектирования
• Сбор бизнес-требований• Портрет ЦА• Юзкейсы
• Навигационная карта (Objects + Actions + Paradigms)
• Wireframes (схемы страниц)
![Page 17: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/17.jpg)
![Page 18: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/18.jpg)
![Page 19: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/19.jpg)
Что на выходе?
• Как показывать результат клиенту?• Задача? - Решение!• Картинки или прототип?• Связка с дизайном и разработкой
(feedback loops, agile development)
![Page 20: Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая 2012)](https://reader034.vdocuments.pub/reader034/viewer/2022052400/5598cd881a28ab87338b45f4/html5/thumbnails/20.jpg)
Спасибо за внимание!
Что вам запомнилось?
1. ____________________
2. __________________
3. ____________________