Android UI Optimisation

537 views
396 views

Published on

Оптимизировать можно довольно много аспектов: концепцию приложения, дизайн отдельных экранов, процесс коммуникации и непосредственно внедрения. И каждый из этих аспектов будет иметь определенную степень влияния на результат. - First presented at: http://www.uamobile.org/question/optimizaciya-ui-dlya-android#sthash.Qb9BYy1A.dpuf

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
537
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Android UI Optimisation

  1. 1. Оптимизация UI для Android подготовила Таня Завьялова Sunday, November 24, 2013
  2. 2. ux designer, researcher, engineer omwat Sunday, November 24, 2013 nefit easy
  3. 3. мы все хотим делать успешные приложения Sunday, November 24, 2013
  4. 4. Sunday, November 24, 2013
  5. 5. полезные Sunday, November 24, 2013
  6. 6. полезные красивые красивые Sunday, November 24, 2013
  7. 7. полезные красивые отзывчивые красивые отзывчивые Sunday, November 24, 2013
  8. 8. полезные красивые отзывчивые красивые отзывчивые Sunday, November 24, 2013
  9. 9. красивые отзывчивые визуально сбалансированны, быстро загружаются, разумно используют пространство, предсказуемо реагируют на действия пользователя, с хорошо подобранной цветовой гаммой и типографикой с плавной анимацией переходов Sunday, November 24, 2013
  10. 10. красивые отзывчивые оптимальный UI Sunday, November 24, 2013
  11. 11. вдумчивый подход к проектированию и дизайну, и итеративный процесс Sunday, November 24, 2013
  12. 12. что оптимизировать и как сильно это повлияет на результат работа с GPU UI библиотеки подготовка ресурсов коммуникация в команде дизайн концепция приложения Sunday, November 24, 2013
  13. 13. что оптимизировать и как сильно это повлияет на результат работа с GPU UI библиотеки подготовка ресурсов коммуникация в команде дизайн концепция приложения Sunday, November 24, 2013
  14. 14. оптимизация работы с GPU 95% случаев покрывают встроенные библиотеки Sunday, November 24, 2013
  15. 15. оптимизация работы с GPU если совсем плохо, прогоните GPU Overdraw for details check Google I/O 2013 - Android Graphics Performance Sunday, November 24, 2013
  16. 16. оптимизация работы с GPU for details check Google I/O 2013 - Android Graphics Performance Sunday, November 24, 2013
  17. 17. оптимизация работы с GPU добиваясь высоких FPS-ов, обратите внимание на интересные нетехнические цифры 0.01 сек мы ждем реакцию 0.1 сек мы наблюдаем реакцию 1+ сек нам нужен статус Sunday, November 24, 2013
  18. 18. что оптимизировать и как сильно это повлияет на результат работа с GPU UI библиотеки подготовка ресурсов коммуникация в команде дизайн концепция приложения Sunday, November 24, 2013
  19. 19. работа с UI библиотеками работа, проделанная google в 2012-ом Sunday, November 24, 2013
  20. 20. работа с UI библиотеками работа, проделанная google в 2012-ом: - Резиновый дизайн (fluid design) - Responsive Layout, - Holo Visual Language Sunday, November 24, 2013
  21. 21. работа с UI библиотеками резиновый дизайн пришел из веба первые упоминания на просторах ру-нета с лета 2002 когда появились мониторы с большой диагональю Sunday, November 24, 2013
  22. 22. работа с UI библиотеками резиновый дизайн пришел из веба первые упоминания на просторах ру-нета с лета 2002 Сайт издательского центра «Академия» 02.06.2005, Студия Лебедева Sunday, November 24, 2013
  23. 23. работа с UI библиотеками резиновый дизайн, основные принципы (web): - оптимизация расположения елементов для нескольких размеров экрана (min, mid, max) - размеры элементов интерфейса указываются в относительных еденицах или считаются автоматически исходя из расстояний между ними - такой дизайн должен быть протестирован на всех возможных разрешениях Sunday, November 24, 2013
  24. 24. работа с UI библиотеками резиновый дизайн в мобильных приложениях: - несколько наборов изображений, - размеры шрифтов под отдельные типы устройств, - продумайте расположение элементов под отдельные типы устройств Sunday, November 24, 2013
  25. 25. работа с UI библиотеками Responsive Layouts, Alternate Layouts phone Master/Detail Flow комбинация нескольких скринов на больших устройствах Micro Re-Flow адаптация расположения элементов на устройствах с другой шириной экрана Table to Grid переключение между разными типами отображения контента Sunday, November 24, 2013             tablet
  26. 26. работа с UI библиотеками Responsive Layouts, примеры Master/Detail Flow комбинация нескольких скринов на больших устройствах Sunday, November 24, 2013
  27. 27. работа с UI библиотеками Responsive Layouts, примеры Micro Re-Flow адаптация расположения элементов на устройствах с другой шириной экрана Sunday, November 24, 2013
  28. 28. работа с UI библиотеками Responsive Layouts, примеры Table to Grid переключение между разными типами отображения контента Sunday, November 24, 2013
  29. 29. работа с UI библиотеками Holo Visual Language минимум рамок максимум места для контента content минимум декоративных элементов Sunday, November 24, 2013 чистый и плоский дизайн
  30. 30. работа с UI библиотеками Holo Visual Language Sunday, November 24, 2013
  31. 31. что оптимизировать и как сильно это повлияет на результат работа с GPU UI библиотеки подготовка ресурсов коммуникация в команде дизайн концепция приложения Sunday, November 24, 2013
  32. 32. подготовка ресурсов Если вы используете по максимуму возможности Holo, вам не надо будет много рисовать. Sunday, November 24, 2013
  33. 33. подготовка ресурсов Начинайте прорисовку экранов из самого мелкого или самого крупного устройства и потом в фотошопе доводите пиксели до идеального состояния. Sunday, November 24, 2013
  34. 34. подготовка ресурсов Мы входим в эру Full HD. Накиньте пикселей на еще одну пропорцию. 4:3 XXHDPI 3x = 480 DPI 16:9 XXHDPI 3x = 540 DPI Sunday, November 24, 2013
  35. 35. подготовка ресурсов Мы входим в эру Full HD. Накиньте пикселей на еще одну пропорцию для больших устройств. 4:3 + 540 DPI Sunday, November 24, 2013 720 DPI
  36. 36. подготовка ресурсов И если вам всетаки пришлось открыть фотошоп или иллюстратор и нарисовать иконку, сделайте ее четкой h6p://dutchicon.com/arDcles/pixel-­‐perfect Sunday, November 24, 2013
  37. 37. что оптимизировать и как сильно это повлияет на результат работа с GPU UI библиотеки подготовка ресурсов коммуникация в команде дизайн концепция приложения Sunday, November 24, 2013
  38. 38. комуникация в команде Обговорите с дизайнером: - какие иконки? - какой шрифт? - какой цвет? - какое расстояние? - что нарезать? - символы и обозначения? Если есть время, требуйте подробную спецификацию. Sunday, November 24, 2013
  39. 39. комуникация в команде Как и любая инженерная дисциплина, дизайн итеративен. Поговорите с дизайнером, если: - появилась новая/ушла старая функциональность - не понятно, что нарисованно - подобранный шрифт не помещается в поле - вам кажется, что так красивее - у вас нет ресурса или вы не знаете, какой выбрать - надо ужать или растянуть лейаут Sunday, November 24, 2013
  40. 40. что оптимизировать и как сильно это повлияет на результат работа с GPU UI библиотеки подготовка ресурсов коммуникация в команде дизайн концепция приложения Sunday, November 24, 2013
  41. 41. дизайн концепция : архитектура Для создания хорошего продукта, и дизайнерам и разработчикам важно видеть полную картину приложения, а не набор обособленных изображений. Требуйте информационную архитектуру! Sunday, November 24, 2013
  42. 42. дизайн концепция : архитектура Для создания хорошего продукта, и дизайнерам и разработчикам важно видеть полную картину приложения, а не набор обособленных изображений. регистрация главная фунция  1 фунция  1 фунция  1 шаг  1 шаг  2 шаг  3 фунция  2 фунция  2 фунция  2 шаг  1 шаг  2 шаг  3 фунция  1 старт фунция  2 фунция  3 фунция  4 Sunday, November 24, 2013
  43. 43. дизайн концепция : архитектура 95% случаев покрывают стандартные патерны Sunday, November 24, 2013
  44. 44. дизайн концепция : архитектура 95% случаев покрывают встроенные библиотеки Sunday, November 24, 2013
  45. 45. дизайн концепция Сконцентрируйтесь на основной функции/цели и постарайтесь не перегружать дизайн Sunday, November 24, 2013
  46. 46. оптимизируйте для нее Sunday, November 24, 2013

×