Особенности проектирования интерфейсов

, 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. ____________________