Разработка иконок для значков Twitter-бутстрапа на мобильном устройстве

Question

Итак, мы создаем веб-приложение, основанное на Twitter-Bootstrap. Мы как раз закончили работу с макетом для устройства размером с настольный компьютер. Теперь мы пытаемся найти правильный макет для мобильного устройства.

Проблемы мы сталкиваемся в том, что мы имеем кучу «управление», которые мы должны включить в страницу:

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

Если у кого-то есть предложения относительно ресурсов или макета, которые сработали для них, я был бы так благодарен!

Answer 1

Если вы используете Twitter-Bootstrap и хотите легко создать макет для мобильных устройств, Ratchet может стать хорошей отправной точкой. Mobile Angular UI может быть хорошей ссылкой.

Решение проблемы заключается в использовании «off-canvas» для размещения значков навигации на боковой панели, которые пользователи могут включать/выключать, как объясняется в https://stackoverflow.com/a/20868976/3613158 (этот ответ содержит примеры для Bootstrap). Это позволит вам размещать много разных значков без заполнения экрана (при отключении навигации). В зависимости от ваших потребностей, возможно, одна группа значков может быть постоянно на экране («первичные» элементы управления), а остальные могут быть помещены в меню холста.

P.D .: Возможно, вы можете пометить свой вопрос тегом храповика-2, чтобы привлечь больше экспертов в мобильные макеты + Bootstrap.