SlideShare a Scribd company logo
1 of 50
 
О чем пойдет речь ,[object Object],[object Object],[object Object],[object Object],[object Object]
Как же  обстоит дело ?
iOS ,[object Object],[object Object],[object Object],[object Object],[object Object]
Проблемы  Android ,[object Object],[object Object],[object Object],[object Object]
Вместо стандартов ,[object Object],[object Object],[object Object],[object Object],[object Object]
Размеры экранов
На самом деле 17,7% 70,8%
Алгоритм ,[object Object],[object Object],[object Object],[object Object],[object Object]
Масштабируемая графика  (9- patch )
UI   Patterns
UI Patterns ,[object Object],[object Object],[object Object],[object Object],[object Object]
Back button
Menu
Action Bar Состояние  приложения   и ключевые  действия
Action Bar Состояние  приложения   и ключевые  действия Логотип
Action Bar Состояние  приложения   и ключевые  действия Логотип Навигация
Action Bar Состояние  приложения   и ключевые  действия Логотип Навигация Действия
Action Bar Типы   навигации Текст Вкладки Выпадающее меню
Action Bar Действия ,[object Object],[object Object]
Dashboard
Tabs :  Android  &  iOS
Android 4 Tabs
Workspaces
UI Patterns Sites patternsofdesign.co.uk mobile-patterns.com pttrns.com
iOS  ->  Android
Twitter
Twitter
Foursquare
Foursquare
Ключевые отличия ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Как делать нельзя
Найди 10 отличий
Вконтакте
iOS  и  Android  версии должны отличаться. Не создавайте  монстров .
Планшеты
Отличие   планшета   от  смартфона
Ориентация ,[object Object],[object Object],[object Object],[object Object]
Ориентация   — с тратегии ,[object Object],Растягиваемые   колонки
Ориентация   — с тратегии ,[object Object],Скрытие   колонки
Ориентация   — с тратегии ,[object Object],[object Object],Сжатие   колонки
Orientation  Strategies ,[object Object],Стек
Android 4 ,[object Object],[object Object]
Инструменты
Balsamiq Mockups http://t.co/rn2dmMJW
Android Design Preview http://t.co/PyoGeBam
Генерация иконок http://code.google.com/p/android-ui-utils/
Правильные приложения ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ссылки ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Спасибо! SurfStudio [email_address] @vmakeev

More Related Content

Viewers also liked

Android - 08 - Action bar
Android - 08 - Action barAndroid - 08 - Action bar
Android - 08 - Action barNoveo
 
Презентация проекта Ulect
Презентация проекта Ulect Презентация проекта Ulect
Презентация проекта Ulect Глеб Тарасов
 
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Technopark
 
Лекция Android. Fragments, ActionBar, Drawer
Лекция Android. Fragments, ActionBar, DrawerЛекция Android. Fragments, ActionBar, Drawer
Лекция Android. Fragments, ActionBar, DrawerАлександр Брич
 
Отличия в дизайне приложений под iOS и Android
Отличия в дизайне приложений под iOS и AndroidОтличия в дизайне приложений под iOS и Android
Отличия в дизайне приложений под iOS и AndroidUIDesign Group
 
Android осень 2013 лекция 2
Android осень 2013 лекция 2Android осень 2013 лекция 2
Android осень 2013 лекция 2Technopark
 
Introduction to Android Fragments
Introduction to Android FragmentsIntroduction to Android Fragments
Introduction to Android FragmentsSergi Martínez
 

Viewers also liked (7)

Android - 08 - Action bar
Android - 08 - Action barAndroid - 08 - Action bar
Android - 08 - Action bar
 
Презентация проекта Ulect
Презентация проекта Ulect Презентация проекта Ulect
Презентация проекта Ulect
 
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
 
Лекция Android. Fragments, ActionBar, Drawer
Лекция Android. Fragments, ActionBar, DrawerЛекция Android. Fragments, ActionBar, Drawer
Лекция Android. Fragments, ActionBar, Drawer
 
Отличия в дизайне приложений под iOS и Android
Отличия в дизайне приложений под iOS и AndroidОтличия в дизайне приложений под iOS и Android
Отличия в дизайне приложений под iOS и Android
 
Android осень 2013 лекция 2
Android осень 2013 лекция 2Android осень 2013 лекция 2
Android осень 2013 лекция 2
 
Introduction to Android Fragments
Introduction to Android FragmentsIntroduction to Android Fragments
Introduction to Android Fragments
 

Similar to Владимир Макеевв «Проектирование интерфейса Android приложений»

Презентация Юрия Ветрова (Mail.ru Group)
Презентация Юрия Ветрова (Mail.ru Group)Презентация Юрия Ветрова (Mail.ru Group)
Презентация Юрия Ветрова (Mail.ru Group).toster
 
Основы тестирования графических интерфейсов
Основы тестирования графических интерфейсов Основы тестирования графических интерфейсов
Основы тестирования графических интерфейсов Alexandra Varfolomeeva
 
DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...
DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...
DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...it-people
 
Introduction to Mobile applications testing
Introduction to Mobile applications testingIntroduction to Mobile applications testing
Introduction to Mobile applications testingOleg Nikiforov
 
Live Mobile: "Airport City postmortem" by Maxim Donskih, Game Insight
Live Mobile: "Airport City postmortem" by Maxim Donskih, Game InsightLive Mobile: "Airport City postmortem" by Maxim Donskih, Game Insight
Live Mobile: "Airport City postmortem" by Maxim Donskih, Game InsightАндрей Акимов
 
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...Yury Vetrov
 
Adaptive Design wud2012
Adaptive Design wud2012Adaptive Design wud2012
Adaptive Design wud2012Ivo Dimitrov
 
Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011Maxim Gaponov
 
"Аэропорт-сити: постмортем" - Максим Донских, Game Insight
"Аэропорт-сити: постмортем" - Максим Донских, Game Insight"Аэропорт-сити: постмортем" - Максим Донских, Game Insight
"Аэропорт-сити: постмортем" - Максим Донских, Game InsightProcontent.Ru Magazine
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive DesignIvo Dimitrov
 
Антон Шаяхов - Мобильный Маркетинг в Aviasales
Антон Шаяхов - Мобильный Маркетинг в AviasalesАнтон Шаяхов - Мобильный Маркетинг в Aviasales
Антон Шаяхов - Мобильный Маркетинг в AviasalesДаниил Силантьев
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...Darya Kosilo
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...Yuri Vedenin
 
К черту гайды?
К черту гайды?К черту гайды?
К черту гайды?Aleh Zibrou
 
KirillLebedev @ CodeCamp2011
KirillLebedev @ CodeCamp2011KirillLebedev @ CodeCamp2011
KirillLebedev @ CodeCamp2011CodeCamp
 
Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...
Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...
Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...Phil Smirnov
 
Code Camp 2011 - Продуктовая копания: Постановка процесса разработки
Code Camp 2011 - Продуктовая копания: Постановка процесса разработкиCode Camp 2011 - Продуктовая копания: Постановка процесса разработки
Code Camp 2011 - Продуктовая копания: Постановка процесса разработкиKirill Lebedev
 
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...ITGinGer
 

Similar to Владимир Макеевв «Проектирование интерфейса Android приложений» (20)

Adaptive Design
Adaptive DesignAdaptive Design
Adaptive Design
 
Презентация Юрия Ветрова (Mail.ru Group)
Презентация Юрия Ветрова (Mail.ru Group)Презентация Юрия Ветрова (Mail.ru Group)
Презентация Юрия Ветрова (Mail.ru Group)
 
Основы тестирования графических интерфейсов
Основы тестирования графических интерфейсов Основы тестирования графических интерфейсов
Основы тестирования графических интерфейсов
 
DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...
DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...
DUMP-2012 - Проектирование интерфейсов - "Проектирование интерфейсов для моби...
 
Introduction to Mobile applications testing
Introduction to Mobile applications testingIntroduction to Mobile applications testing
Introduction to Mobile applications testing
 
Live Mobile: "Airport City postmortem" by Maxim Donskih, Game Insight
Live Mobile: "Airport City postmortem" by Maxim Donskih, Game InsightLive Mobile: "Airport City postmortem" by Maxim Donskih, Game Insight
Live Mobile: "Airport City postmortem" by Maxim Donskih, Game Insight
 
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
 
WP7 Platform
WP7 PlatformWP7 Platform
WP7 Platform
 
Adaptive Design wud2012
Adaptive Design wud2012Adaptive Design wud2012
Adaptive Design wud2012
 
Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011
 
"Аэропорт-сити: постмортем" - Максим Донских, Game Insight
"Аэропорт-сити: постмортем" - Максим Донских, Game Insight"Аэропорт-сити: постмортем" - Максим Донских, Game Insight
"Аэропорт-сити: постмортем" - Максим Донских, Game Insight
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
Антон Шаяхов - Мобильный Маркетинг в Aviasales
Антон Шаяхов - Мобильный Маркетинг в AviasalesАнтон Шаяхов - Мобильный Маркетинг в Aviasales
Антон Шаяхов - Мобильный Маркетинг в Aviasales
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
 
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными уст...
 
К черту гайды?
К черту гайды?К черту гайды?
К черту гайды?
 
KirillLebedev @ CodeCamp2011
KirillLebedev @ CodeCamp2011KirillLebedev @ CodeCamp2011
KirillLebedev @ CodeCamp2011
 
Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...
Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...
Мой опыт проектирования мобильных интерфейсов (DUMP-IT, Екатеринбург, 25 мая ...
 
Code Camp 2011 - Продуктовая копания: Постановка процесса разработки
Code Camp 2011 - Продуктовая копания: Постановка процесса разработкиCode Camp 2011 - Продуктовая копания: Постановка процесса разработки
Code Camp 2011 - Продуктовая копания: Постановка процесса разработки
 
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
 

More from touchin

[Rifvrn] продажа бытовой техники через iPhone
[Rifvrn] продажа бытовой техники через iPhone[Rifvrn] продажа бытовой техники через iPhone
[Rifvrn] продажа бытовой техники через iPhonetouchin
 
[Design track] iPhone и бытовая техника
[Design track] iPhone и бытовая техника[Design track] iPhone и бытовая техника
[Design track] iPhone и бытовая техникаtouchin
 
[Cstb13] ios android новые каналы дистрибуции видео контента
[Cstb13] ios android новые каналы дистрибуции видео контента[Cstb13] ios android новые каналы дистрибуции видео контента
[Cstb13] ios android новые каналы дистрибуции видео контентаtouchin
 
[Oborot e-comerce] как продавать одежду через i phone
[Oborot e-comerce] как продавать одежду через i phone[Oborot e-comerce] как продавать одежду через i phone
[Oborot e-comerce] как продавать одежду через i phonetouchin
 
тестирование ios как процесс
тестирование ios как процесстестирование ios как процесс
тестирование ios как процессtouchin
 
[Levelapp] как мы разрабатываем приложения
[Levelapp] как мы разрабатываем приложения[Levelapp] как мы разрабатываем приложения
[Levelapp] как мы разрабатываем приложенияtouchin
 
мастер-класс продвижение мобильных приложений
мастер-класс продвижение мобильных приложениймастер-класс продвижение мобильных приложений
мастер-класс продвижение мобильных приложенийtouchin
 
Зачем интернет магазину мобильное приложение
Зачем интернет магазину мобильное приложениеЗачем интернет магазину мобильное приложение
Зачем интернет магазину мобильное приложениеtouchin
 

More from touchin (8)

[Rifvrn] продажа бытовой техники через iPhone
[Rifvrn] продажа бытовой техники через iPhone[Rifvrn] продажа бытовой техники через iPhone
[Rifvrn] продажа бытовой техники через iPhone
 
[Design track] iPhone и бытовая техника
[Design track] iPhone и бытовая техника[Design track] iPhone и бытовая техника
[Design track] iPhone и бытовая техника
 
[Cstb13] ios android новые каналы дистрибуции видео контента
[Cstb13] ios android новые каналы дистрибуции видео контента[Cstb13] ios android новые каналы дистрибуции видео контента
[Cstb13] ios android новые каналы дистрибуции видео контента
 
[Oborot e-comerce] как продавать одежду через i phone
[Oborot e-comerce] как продавать одежду через i phone[Oborot e-comerce] как продавать одежду через i phone
[Oborot e-comerce] как продавать одежду через i phone
 
тестирование ios как процесс
тестирование ios как процесстестирование ios как процесс
тестирование ios как процесс
 
[Levelapp] как мы разрабатываем приложения
[Levelapp] как мы разрабатываем приложения[Levelapp] как мы разрабатываем приложения
[Levelapp] как мы разрабатываем приложения
 
мастер-класс продвижение мобильных приложений
мастер-класс продвижение мобильных приложениймастер-класс продвижение мобильных приложений
мастер-класс продвижение мобильных приложений
 
Зачем интернет магазину мобильное приложение
Зачем интернет магазину мобильное приложениеЗачем интернет магазину мобильное приложение
Зачем интернет магазину мобильное приложение
 

Владимир Макеевв «Проектирование интерфейса Android приложений»

Editor's Notes

  1. + Простор для творчества - Каждое приложение выглядит «по-своему». В платформе нет целостности UI .
  2. http://www.pushing-pixels.org/category/android
  3. Backbutton http://www.androiduipatterns.com/2011/03/back-button-behavior.html http://coding.smashingmagazine.com/2011/06/30/designing-for-android/ ActionBar Dashboard http://www.androiduipatterns.com/2011/04/google-docs-for-android-ui-pattern.html Quick Actions http://www.androiduipatterns.com/2011/03/ui-design-pattern-quick-actions.html Search Bar Workspaces http://www.androiduipatterns.com/2011/06/android-ui-pattern-workspaces.html Tabs Intents http://www.androiduipatterns.com/2011/06/android-intents-apps-talking-to-each.html Notifications http://www.androiduipatterns.com/2011/04/quick-tip-display-notification-for-long.html Background process indicator http://www.androiduipatterns.com/2011/07/android-ui-pattern-background-process.html http://www.androiduipatterns.com/2011/04/using-android-widgets.html
  4. Вне области экрана Экономия места Косячники косячат
  5. Аналог NavigationBar Когда начал использовать не важно
  6. Must be unambiguous what the action will act upon e.g. if an 'edit' action could apply to more than one fragment then the action should be within the fragment
  7. TODO скрины
  8. Сверху Максимум 4! Swipe Нет навигации в рамках вкладки Android 4 иконки
  9. Похоже на табы Меньше места Однородных контент Большее число вкладок
  10. Собственно чем отличается планшет от телефон fragments
  11. So annoying when a legacy app is locked to portrait!! Apps using tilt sensors need to work with Landscape default devices Ideally provide optimized layouts for both orientations - Fragments are you friend :)
  12. e.g. gmail labels & message list view
  13. e.g. gmail message detail view Useful as a signal that rotating means user wants to concentrate on content (e.g. long form reading). MUST provide a way to bring pane a back - i.e. the up arrow.  Don't force users to rotate back to reclaim.
  14. e.g. gtalk Works well when list a has strong iconography - e.g. News sections Arrow at top of collapsed pane a expands to show fill details, and allows re-collapsing.
  15. e.g. YouTube video detail