При разработке интерфейсов для API, неизбежно сталкиваешься с несколькими проблемами. Во-первых, мы не знаем заранее, как будет выглядеть сервис или сайт со встроенными Картами. Важно обеспечить его будущим пользователям наилучший результат — даже если у разработчиков, использующих наш API, вообще нет в команде дизайнера. Во-вторых, проблемы могут возникнуть при адаптации дизайна для разных устройств и размеров экранов. В докладе мы поговорим о том, как и с помощью чего делаются прототипы, и зачем они нужны разработчикам и дизайнерам. А самое главное, разберёмся с адаптивным поведением элементов управления картой, рассмотрим схему работы менеджера контролов. Также мы кратко обсудим другие варианты реализации этого механизма и объясним, почему они не подошли нам.

2. 2
Александр Кудымов
@dwht
Дизайнер
Денис Хананеин
@kandasoft
Разработчик

3. Адаптивный дизайн интерфейса
JS API Яндекс.Карт и особенности
его реализации
3

4. Часть 1. Дизайн
Александр Кудымов
4

5. MainContentLayout = ymaps.templateLayoutFactory.createClass('', {
build: function () {
// call build method.
MainContentLayout.superclass.build.call(this);
// left menu
this.stateListener = this.getData().state.events.group()
.add('change', this.onStateChange, this);
// Current object.
this.activeObject = this.getData().state.get('activeObject');
this.applyContent();
},
5

6. MainContentLayout = ymaps.templateLayoutFactory.createClass('', {
build: function () {
// call build method.
MainContentLayout.superclass.build.call(this);
// left menu
this.stateListener = this.getData().state.events.group()
.add('change', this.onStateChange, this);
// Current object.
this.activeObject = this.getData().state.get('activeObject');
this.applyContent();
},
6

7. API Яндекс.Карт

8. Зачем нам редизайн API ?
8

9. Устаревший внешний вид
9

10. Устаревший внешний вид
10

11. Мобильные
11

12. Начало. До адаптивности

13. 13
void main() {…}
Design
Development
Мы Разработчик Пользователь

14. 14
void main() {…}
Design
Development
Мы Разработчик Пользователь

15. 15
void main() {…}
Design
Development
Мы Разработчик Пользователь

16. 16

17. Нельзя запретить всё
Удовлетворенность
разработчика
Контроль над внешним видом
17

18. Нельзя запретить всё
Контроль над внешним видом
18
Удовлетворенность
разработчика

19. Середина. Скоро адаптивность
19

20. Маленькие, средние, большие

21. Small first
21

22. Маленькие
22

23. 23

25. А тут должен быть хомяк с
полными щеками

26. 240 px
320 px
26

27. 27

28. 28

29. 29

30. Medium next
30

31. 480 px
31
640 px

32. Маленькая
Средняя
32

33. Маленькая Средняя
33

34. Большие
34

35. Mobile last
35

36. Мобильные
36

37. Проблемы в мобильных
37

38. Фулскрин

39. Фулскрин

40. Фулскрин

41. Фулскрин

42. Конец. Адаптивность

44. Адаптивный дизайн

45. Прототипы
45

46. 46
Рисуем
СобираемОбсуждаем

47. Бонус: Спецификация
47

48. Часть 2. Разработка
Денис Хананеин

49. Пользователи API
49
Разработчики

50. Задачи
Какие задачи стояли перед нами?

51. 90% наших пользователей
устраивают значения по умолчанию
51

52. 52
Случай с двумя зум-контролами

53. Для 90% пользователей
53
Нужны простые интерфейсы.
Должно быть сложно испортить внешний вид

54. Простые интерфейсы
54
Сделать хорошо

55. 10% не подходят наши решения,
и мы не должны им мешать.
55

56. Нельзя запретить всё
Удовлетворенность
разработчика
Контроль над функциональностью
56

57. После прототипирования

58. Почти у каждого контрола
имеется 3 состояния
(small, medium, large)
58

59. Изменение контролов
59

60. Изменение контролов
60

61. В каждом состоянии
возможно разное поведение
61

62. Изменение контролов
62
large & medium small

63. Изменение балунов
63
450 ✕ 450px →

64. Процесс
Как мы искали решения, на что смотрели

65. Варианты реализации адаптивности
65
CSS Media Queries
Плавающая сетка
JS библиотеки
Server-side технологии
Свой велосипед

66. CSS Media Queries

67. СSS Media Queries
Позволяет применять стили для заданных условий.
Можно адаптировать страницу для различных экранов: Брайля, 3D,
принтер, телевизор и другие.
67

68. СSS Media Queries. Пример
68
Кто мы? Заказчики!
Что мы хотим? Адаптивность!

69. СSS Media Queries. Пример
69
.infoblock
.column .column
Нужно адаптировать под
ширину менее 600px

70. СSS Media Queries. Пример
70
.infoblock
.column .column

71. СSS Media Queries. Пример
71
@media all and (max-width: 600px) {
.infoblock {display: none;}
.column {width: 100%;}
}

72. СSS Media Queries. Пример
72

74. СSS Media Queries. Почему не подошло
Нам не важен размер окна, а важен размер карты.
74

75. Плавающая сетка

76. Плавающая сетка
Универстальное решение и для мобильных, и для десктопов.
Относительно просто реализуется.
76http://alistapart.com/article/fluidgrids

77. Плавающая сетка. Пример
77
700px 300px

78. Плавающая сетка. Пример
78
70% 30%

79. Плавающая сетка
right: 58.333333333333336%
79

80. Плавающая сетка
Flexbox

81. 81

82. Плавающая сетка. Почему не подошло
На разных размерах карты нужно разное поведение.
82

83. JavaScript библиотеки

84. JavaScript библиотеки
ResponseJS
MediaCheck
SkelJS
Adapt.js
…
84

85. Плюсы
Библиотек много и они разные.
Довольно просты в обращении.
Хорошая совместимость… иногда…
85

86. JavaScript библиотеки. Почему не подошло
Много лишнего.
Не подходят под задачи.
86

87. Server-side

88. Server-side
Можем отдавать специальную сборку для разных устройств.
Можем отдавать макеты для определенных устройств.
Детектить браузеры / системы и так далее
88

89. Server-side. Почему не подошло
89
Нам не важен размер окна, а важен размер карты.

90. Варианты реализации адаптивности
90
CSS Media Queries
Плавающая сетка
JS библиотеки
Server-side технологии
Свой велосипед

91. Как мы всё это сделали

92. 92
control.Manager([states])
@param {String[]} Массив состояний
По умолчанию доступен через
map.controls
bit.ly/ymaps-control-manager

93. 93
controls.options.get('sizes')
@return {String[]} ['small', 'medium', 'large']

94. Реализация
94
controlmanager

95. Реализация
95
control
options.maxWidth: [80, 100, 120]

96. О maxWidth кратко
9616
large & medium small

97. Реализация
97
controlmanager
options.get('maxWidth')

98. Реализация
98
state.get('size')
controlmanager

99. Реализация
99
layout
large
medium
small

100. Что у нас получилось

101. Контролы для средней карты
101

102. Было:
102
Стало:
myMap.controls
.add('zoomControl', {top: 50, right: 10)
.add('trafficControl', {top: 10, left: 10)
.add('searchControl', {top: 10, left: 80)
.add('typeSelector', {top: 10, left: 120)

103. 103
Контролы для
большой карты

104. Контролы для
маленькой карты
104

105. Итого
105
map.controls.add('default')
Доступные сеты:
smallMapDefaultSet // для маленькой
default // для обычной
largeMapDefaultSet // для большой

106. Быстрое добавление контролов
106
myMap.controls
.add('trafficControl') // пробки
.add('searchControl') // поиск
.add('zoomControl') // зум-контрол
.add('typeSelector') // слои
.add('ruler') // линейка
.add('geolocationControl') // геолокация
.add('fullscreenControl') // фуллскрин
…

107. Своя кнопка
107
large medium small

108. Своя кнопка
108
var button = new ymaps.control.Button({
data: {
content: 'Кнопка',
image: 'http://site/img.button.svg',
title: 'Сделать хорошо'
}
});

109. Свой выпадающий список
109
large medium small

110. Выводы
Чему мы научились

111. Адаптивность — это сложно.
Постарайтесь сначала сделать прототипы
и не теряйте дизайнера.
111

112. Посмотрите на готовые решения, скорее
всего вы найдете то, что вам нужно.
112

113. Если готовых решений нет — не бойтесь
писать свой велосипед.
113

114. 114
beta.maps.yandex.ru

115. beta.maps.yandex.ru
115

116. Попробовать самому
api.yandex.ru/maps/beta
116

117. Спасибо за внимание

118. 118
Александр Кудымов
@dwht
dwht@yandex-team.ru
Денис Хананеин
@kandasoft
zloylos@yandex-team.ru