При разработке интерфейсов для API, неизбежно сталкиваешься с несколькими проблемами. Во-первых, мы не знаем заранее, как будет выглядеть сервис или сайт со встроенными Картами. Важно обеспечить его будущим пользователям наилучший результат — даже если у разработчиков, использующих наш API, вообще нет в команде дизайнера. Во-вторых, проблемы могут возникнуть при адаптации дизайна для разных устройств и размеров экранов. В докладе мы поговорим о том, как и с помощью чего делаются прототипы, и зачем они нужны разработчикам и дизайнерам. А самое главное, разберёмся с адаптивным поведением элементов управления картой, рассмотрим схему работы менеджера контролов. Также мы кратко обсудим другие варианты реализации этого механизма и объясним, почему они не подошли нам.
2. JS API . 3 3. 1. 4 4. 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 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(); }, 6 6. API . 7. API ? 8 8. 9 9. 10 10. 11 11.
. 12. 13 void main() {} Design Development 13. 14 void main() {}
Design Development 14. 15 void main() {} Design Development 15. 16
16. 17 17. 18 18. . 19 19. , , 20. Small rst 21 21. 22 22. 23 23.
24. 240 px 320 px 26 25. 27 26. 28 27. 29 28. Medium next 30 29.
480 px 31 640 px 30. 32 31. 33 32. 34 33. Mobile last 35 34. 36 35.
37 36. 37. 38. 39. 40. . 41. 42. 45 43. 46 44. : 47 45. 2. 46. API
49 47. ? 48. 90% 51 49. 52 - 50. 90% 53 . 51. 54 52. 10% , . 55 53.
56 54. 55. 3 (small, medium, large) 58 56. 59 57. 60 58. 61 59. 62
large & medium small 60. 63 450 450px 61. , 62. 65 CSS Media
Queries JS Server-side 63. CSS Media Queries 64. SS Media Queries .
: , 3D, , . 67 65. SS Media Queries. 68 ? ! ? ! 66. SS Media
Queries. 69 .infoblock .column .column 600px 67. SS Media Queries.
70 .infoblock .column .column 68. SS Media Queries. 71 @media all
and (max-width: 600px) { .infoblock {display: none;} .column
{width: 100%;} } 69. SS Media Queries. 72 70. SS Media Queries. , .
74 71. 72. , . . 76http://alistapart.com/article/uidgrids 73. . 77
700px 300px 74. . 78 70% 30% 75. right: 58.333333333333336% 79 76.
Flexbox 77. 81 78. . . 82 79. JavaScript 80. JavaScript ResponseJS
MediaCheck SkelJS Adapt.js 84 81. . . 85 82. JavaScript . . . 86
83. Server-side 84. Server-side . . / 88 85. Server-side. 89 , .
86. 90 CSS Media Queries JS Server-side 87. 88. 92
control.Manager([states]) @param {String[]} map.controls
bit.ly/ymaps-control-manager 89. 93 controls.options.get('sizes')
@return {String[]} ['small', 'medium', 'large'] 90. 94
controlmanager 91. 95 control options.maxWidth: [80, 100, 120] 92.
maxWidth 9616 large & medium small 93. 97 controlmanager
options.get('maxWidth') 94. 98 state.get('size') controlmanager 95.
99 layout large medium small 96. 97. 101 98. : 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) 99. 103 100. 104 101. 105
map.controls.add('default') : smallMapDefaultSet // default //
largeMapDefaultSet // 102. 106 myMap.controls
.add('trafficControl') // .add('searchControl') //
.add('zoomControl') // - .add('typeSelector') // .add('ruler') //
.add('geolocationControl') // .add('fullscreenControl') // 103. 107
large medium small 104. 108 var button = new ymaps.control.Button({
data: { content: '', image: 'http://site/img.button.svg', title: '
' } }); 105. 109 large medium small 106. 107. . . 111 108. , , .
112 109. . 113 110. 114 beta.maps.yandex.ru 111.
beta.maps.yandex.ru 115 112. api.yandex.ru/maps/beta 116 113. 114.
118 @dwht [email protected] @kandasoft [email protected]
