Евгений Гуринович - «Адаптивный дизайн? Адаптивное мышление!»

860 views

Published on

http://2013.profsoux.ru/papers/33/

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
860
On SlideShare
0
From Embeds
0
Number of Embeds
340
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Евгений Гуринович - «Адаптивный дизайн? Адаптивное мышление!»

  1. 1. АДАПТИВНЫЙ ДИЗАЙН?АДАПТИВНОЕ МЫШЛЕНИЕ!Евгений ГуриновичРуководитель отдела юзабилити и UX ARTOX media
  2. 2. ИНФОРМАЦИЯ НА ТЕМУht t p: / / www. l ukew. com/ht t p: / / www. smashi ngmagazi ne. com/ht t ps: / / www. googl e. r u/ Адаптивный_дизайни др.2
  3. 3. ОТЗЫВЧИВЫЙ ВЕБ-ДИЗАЙН3Итан Маркотт,2012 г.
  4. 4. ВОПРОСЫ1. Различные способы ввода2. Различная структура интерфейса3. Особенности отображения информации4. Организация процесса проектирования4
  5. 5. ОПРЕДЕЛЕНИЕАдаптивный веб-дизайн(англ. Responsive web design) —дизайн веб-страниц, обеспечивающийотличное восприятие на различныхустройствах (авт. различных разрешениях),подключённых к интернету5
  6. 6. РАЗЛИЧИЕ СПОСОБОВ ВВОДА6Мышь Палец
  7. 7. ЭЛЕМЕНТЫ ИНТЕРФЕЙСА7Адаптированные под курсор *под палец
  8. 8. ПРАВИЛА ПРОЕКТИРОВАНИЯИНТЕРФЕЙСОВ81. Размеры элементов не менее 7x7 мм (40 px)2. Отступы между элементами не менее 2 мм(10 px)3. Не используйте действия по наведению(или делайте альтернативный вариант дляуправления)4. Делайте выбор в пользу кнопок, а нессылок
  9. 9. РАЗЛИЧНАЯ СТРУКТУРА ИНТЕРФЕЙСА9Структура сайта Управление пальцем
  10. 10. ВИДЫ МЕНЮ10Меню вподвалеВыпадающийсписокМеню слеваи др.
  11. 11. ПРАВИЛА УПРАВЛЕНИЯ САЙТОМ111. В версиях с разрешением 1024 width именьше, по возможности, размещайтеэлементы управления сайтом внизу экрана2. Используйте выпадающие элементы
  12. 12. ОСОБЕННОСТИ ОТОБРАЖЕНИЯИНФОРМАЦИИ12Структура сайта Чтение информации
  13. 13. АДАПТАЦИЯ РАЗМЕРА ТЕКСТА13Для Desktop:― минимальный читабельныйтекст 3,88 мм (11 pt)Для мобильных устройств:― минимальный читабельныйтекст 2,1 мм (6 pt)
  14. 14. АДАПТАЦИЯ ЭЛЕМЕНТОВ14Адаптируйте каждый элемент
  15. 15. ПРАВИЛА АДАПТАЦИИИНФОРМАЦИИ151. Используйте меньший шрифт в мобильнойверсии (исключение составляет шрифтэлементов управления)2. По возможности, отображайте контентвверху экрана3. Уделяйте внимание адаптации каждогоэлемента сайта4. Делайте страницу максимально короткой
  16. 16. ОРГАНИЗАЦИЯ ПРОЦЕССАПРОЕКТИРОВАНИЯОбычная схема разработки16WireframePrototypeMockupВёрсткаПрограммирование
  17. 17. Адаптивная схема предложенная Итанам1280x102417WireframePrototypeMockupВёрсткаПрограммированиеОбсуждение1. Почему не Mobile First?2. Очень длинный процессобсуждения3. Без фиксации всё теряется4. Макеты отличаются поройочень сильно5. Проектирование под другиеразрешения требуеткорректировки текущего
  18. 18. Моя схема разработки320х48018Wireframe Prototype DesignВёрсткаПрограммирование1024х7681366х768Wireframe Prototype DesignWireframe Prototype DesignWireframe Prototype Design1280х1024Wireframe Prototype Design…
  19. 19. ПРАВИЛА ОРГАНИЗАЦИИПРОЦЕССА191. Используйте принцип Mobile First. Усложнитьсистему намного проще, чем сделать её простой.2. Продумывайте изменение элемента уже на самыхранних этапах.3. Фиксируйте все мысли в процессе проектирования.4. Помогайте разработчику, ставьте указатели изаметки по анимации и изменению элементов.5. Используйте библиотеки элементов.
  20. 20. АДАПТИВНОЕ МЫШЛЕНИЕ20Разработка адаптивного дизайна требуетмыслить не готовыми паттернами, аотдельными решениями.
  21. 21. СПАСИБО ЗА ВНИМАНИЕ!Евгений Гуриновичруководитель отдела юзабилити и UX ARTOX media@GurinovichEvgengurinovich.evgen@gmail.com

×