Проверка адаптивности от Google Resizer

10 Марта 2016

Встречайте «Resizer»

Статья Зака Гибсона (Zach Gibson)

Интерактивная программа просмотра, позволяющая увидеть и испытать, то как цифровые продукты реагируют на Material Design контрольных точек на всех настольных, мобильных и планшетных устройствах. Проверить свой сайт можно по ссылке

Что такое Resizer?

Как для дизайнеров и разработчиков цифровых продуктов, одной из наших самых больших проблем является выяснение того, как сделать удобный интерфейс для наших пользователей. Независимо от того, как они используют приложение, будь то на телефоне или через VR, пользуясь своими пальцами или мышкой, в самой последней и лучшей технологии или hand-me-down 2G, наша обязанность, сделать так чтобы наши продукты были доступными всем и что бы на них сохранялся высокий спрос. Для соответствия каждой потребности - нет простого дизайн-решения.

Мы начали предлагать руководство Material Design по контрольным точкам, реагирующим сеткам, поверхностным поведением, а также шаблонам пользовательского интерфейса. Теперь с Resizer, у нас есть быстрый способ проверить и помочь простимулировать коммуникацию между дизайнерами, разработчиками и заинтересованными сторонами об отзывчивости пользовательского интерфейса.

resizer-image01-1240.png

С Resizer вы можете ввести пользовательский URL, или предварительно просмотреть выбранный веб-сайт и демо. С помощью значков действий, вы можете просматривать сайт через Material Design по контрольным точкам для настольных компьютеров и мобильных устройств.

Изучение шаблонов UI

Существует так много потенциальных моделей, которым можно следовать, когда размер экрана изменяет положение отдельных показательных компонентов, преобразится, разделяется, расширяется и т.д. Resizer помогает дизайнерам и разработчикам визуализировать какие именно шаблоны будут работать лучше всего для них. Для того, чтобы продемонстрировать некоторые из этих моделей, мы разработали несколько демо-записей, которые можно найти в меню Resizer.

Демо Pesto

Pesto это рецепт-приложение демонстрирующие несколько отзывчивых моделей. Он использует списки сеток, которые перекомпоновываются в зависимости от размера экрана. Логотип в панели приложения изменяется на основе высоты панели инструментов. FAB меняет положение в зависимости от того как вы просматриваете приложение на настольном компьютере или мобильным устройстве. Другой особенностью Resizer является то, что вы можете ссылаться на конкретный сайт, рассматривая его в определенном размере.

При просмотре деталей рецепта, попробуйте нажать на значок переполнения в правом верхнем углу. На мобильном телефоне, появится нижний лист, в то время как те же действия на рабочем столе вызывает меню.

resizer-image02-1240.png

Pesto: Современная кулинарное приложение, которое поможет вам находить, хранить и совместно готовить рецепты. Демонстрация материалов реагирующих на модели пользовательского интерфейса.

Демо Shrine

Shrine подчеркивает важность фактического изменения структуры навигации в отличие от простого масштабирования компонентов в зависимости от размера экрана или устройства. Shrine использует другой тип списка отзывчивых сеток для создания опыта бесшовных покупок. Вкладки демонстрируют, как один из компонентов может превращаться в другой. Используя Resizer, взгляните на то, как они переходят из большого окна в окно маленькое, и с планшета на мобильные устройства.

Shrine Demo

Shrine: приложение для покупок ориентированное на молодых, DIY-maker и покупателей заинтересованных в независимой, мелкосерийной розничной торговле. Демонстрация материалов, реагирующих на модели пользовательского интерфейса.

Что далее?

Разработка звукового сопровождения для отзывчивости UI представляет собой непрерывный процесс, который мы последовательно пытается решить в нашем руководстве Material Design. Resizer представляет собой динамический визуальный ресурс для демонстрации этих решений, поэтому, вставьте имеющийся URL-адрес, и посмотрите, как ваши продукты работают в разных размерах экрана.

Также обратите внимание на другие наши интерактивные ресурсы, доступные по ссылке design.google.com/resources. Посетите нашу библиотеку из более чем 900 системных иконок и узнает больше о наших шрифтах. Проверьте Device Metrics, всеобъемлющий ресурс для определения размера, разрешения и многого другого между несколькими устройствами. Найдите правильный компонент, просматривая Фреймворки со страниц ваших ресурсов. Все эти инструменты были созданы с целью облегчить работу с Material Design.

Источник: Google Design


Вернуться к списку