[Разработка мобильных приложений, Интерфейсы, Дизайн мобильных приложений, Графический дизайн, Дизайн] Адаптация таблиц под мобильные устройства
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Для кого эта статьяПочти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах - а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.ПроблемаПроблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты талицы за ширину экрана на мобильном устройстве. 
Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.
Подопытный набор данныхДля того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.Колонки:
- Номер
- Фото
- ФИО
- Телефон
- Email
- Дата
- Текст описание
- Статус
- Действия
Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места. 
- С фиксированной шириной и переносом строк
- С шириной по контенту
Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.ДесктопВ окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.Варианты адаптацииПроблема — наша талица по ширине не влезает в телефон.Ошибочные решения
- Уменьшать шрифт
- Убирать колонки
- Делать растровую картинку с таблицей и вставлять ее в макет
Возможные верные решения по убыванию
- Каждую строку таблицы делать блоком
- Горизонтальный скроллинг
Первый вариант адаптации - сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.
Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)
Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.
Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скролинг.Второй вариант - горизонтальный скролинг таблицы.Для реализации данного подхода - нам нужно взять таблицу из декстопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.Субъективно для меня - это наименее подходящий вариант отображения таблиц в мобильных устройствах - так, как он скрывает большую часть контента за пределами окна устройства - что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).
ВыводТеперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).Если вы заметили ошибки, или вам есть что дополнить - дайте мне знать, я обязательно это сделаю.Спасибо за внимание!
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка под iOS, Разработка мобильных приложений, Разработка под Android, Дизайн мобильных приложений, Дизайн] Исправляем Госуслуги малой кровью — добровольный редизайн мобильного приложения
- [Дизайн, Умный дом, DIY или Сделай сам, Здоровье, Инженерные системы] Одноэтажный дом — какой бы строил для себя (может и вам пригодится)
- [Фототехника, Инженерные системы] Возрождаем легенду – Зоркий-4, часть 2
- [Фототехника, Инженерные системы] Возрождаем легенду – Зоркий-4
- [Разработка игр, Дизайн игр] Восстание игроков: о главном принципе Искусства, применимом и к творению игр
- [SQL, Графический дизайн, IT-компании] Открытки в стиле SQL
- [Веб-дизайн, Разработка веб-сайтов, CSS, Программирование] Погружаемся в логические свойства CSS (перевод)
- [Разработка мобильных приложений, Управление проектами, Монетизация мобильных приложений, Управление продуктом, IT-компании] Facebook перезапускает Instagram Lite для Android, чтобы занять развивающиеся рынки
- [Веб-дизайн, Разработка веб-сайтов, Чулан, История IT] Как ощутить «интернет 2000 года»
- [Управление разработкой, Управление проектами, Управление продуктом] Могут ли таблички работать менеджером за вас? (спойлер: да)
Теги для поиска: #_razrabotka_mobilnyh_prilozhenij (Разработка мобильных приложений), #_interfejsy (Интерфейсы), #_dizajn_mobilnyh_prilozhenij (Дизайн мобильных приложений), #_graficheskij_dizajn (Графический дизайн), #_dizajn (Дизайн), #_dizajn (дизайн), #_dizajnery (дизайнеры), #_dizajneru (дизайнеру), #_dizajner (дизайнер), #_dizajn_interfejsov (дизайн интерфейсов), #_dizajn_sajtov (дизайн сайтов), #_dizajn_sajta (дизайн сайта), #_tablits (таблиц), #_tablitsy (таблицы), #_tablitsa (таблица), #_razrabotka_mobilnyh_prilozhenij (
Разработка мобильных приложений
), #_interfejsy (
Интерфейсы
), #_dizajn_mobilnyh_prilozhenij (
Дизайн мобильных приложений
), #_graficheskij_dizajn (
Графический дизайн
), #_dizajn (
Дизайн
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 18:02
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Для кого эта статьяПочти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах - а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.ПроблемаПроблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты талицы за ширину экрана на мобильном устройстве.  Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.  Подопытный набор данныхДля того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.Колонки:
 Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.ДесктопВ окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.Варианты адаптацииПроблема — наша талица по ширине не влезает в телефон.Ошибочные решения
 Возможные верные решения по убыванию
 Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)  Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.  Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скролинг.Второй вариант - горизонтальный скролинг таблицы.Для реализации данного подхода - нам нужно взять таблицу из декстопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.Субъективно для меня - это наименее подходящий вариант отображения таблиц в мобильных устройствах - так, как он скрывает большую часть контента за пределами окна устройства - что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).  ВыводТеперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).Если вы заметили ошибки, или вам есть что дополнить - дайте мне знать, я обязательно это сделаю.Спасибо за внимание! =========== Источник: habr.com =========== Похожие новости:
Разработка мобильных приложений ), #_interfejsy ( Интерфейсы ), #_dizajn_mobilnyh_prilozhenij ( Дизайн мобильных приложений ), #_graficheskij_dizajn ( Графический дизайн ), #_dizajn ( Дизайн ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 18:02
Часовой пояс: UTC + 5