Особенности проектирования интерфейсов
, Motka Design StudioФил Смирновhttp://motka.ru
для мобильных устройств
:О чем я расскажу• Коротко о моем собственном опыте
проектирования интерфейсов
• . Платформы для мобильных приложений .Единый кроссплатформенный интерфейс
• Принципиальные различия мобильных иweb- .интерфейсов
• “ ” . UI Язык интерфейса Стандартизация . ? элементов и парадигм В чем креатив
• Методика процесса проектирования
Мой опыт проектирования
• ? Что такое проектирование Зачем ?оно нужно с точки зрения дизайнера
• , , Скорость ГибкостьЦелесообразность
• . - Motka - inVentureГазета Ру
• News360 - Pronto - Vidimax / Vichatter
• UXi Copenhagen, Web 2.0 EXPO
Мобильные платформы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..
?Что называют мобильными приложениями
Единый кроссплатформенный
интерфейс• UI: Различия в парадигмах
iPhone vs Android
• - : Различный форм фактор экранаSmartphone vs Tablet
• : HTML5 vs NativeОграничения
- : Технически самый компромиссный вариантHTML5 + Sencha/PhoneGap bundleприложение
Различия мобильных иweb-
интерфейсовинтерфейсов• Контекст использования
• Размеры экрана
• - Кол во информации
• / Модальности параллельные потоки
• , Цена клика интерактивность
• Geo-location
UIСтандартизация• ? Что в ней хорошего Зачем она
?нужна“ ” .Язык интерфейса
• Стандартные контролы
• (quiz? Стандартные пиктограммыawesome font)
• Работа с референсами
Куда девать“ ”?креатив• ( Метафора от красоты отдельных, )экранов к цельному впечатлению
• Easy-to-use - универсальнаямотивация
• “ ” - Interface design is copywriting Рыба ( )диалог с пользователем
• , - Анимация переходы возможность , .объяснить что к чему без слов
Методика проектирования
• -Сбор бизнес требований
• Портрет ЦА
• Юзкейсы
• Навигационная карта(Objects + Actions + Paradigms)
• Wireframes ( )схемы страниц
?Что на выходе• ?Как показывать результат клиенту
• ? - !Задача Решение
• ?Картинки или прототип
• Связка с дизайном и разработкой(feedback loops, agile development)
Спасибо за!внимание
?Что вам запомнилось1. ____________________2. __________________3. ____________________