Способы хранения контролов
Основные инструменты интерфейсостроения
Все мы знаем и любим конструкторы LEGO. Но причем тут LEGO? Да при том, что любой интерфейс состоит из деталек, из множества деталек: контролы, компоненты (наборы готовых элементов, собранные вместе заранее) и панели навигации. И все это аккуратно сложено в коробочки, чтобы наши детальки хаотично не валялись по всему интерфейсу. О них, о коробочках, мы и поговорим.
Достаточно давно я пришел к этой мысли, да и Apple также давно на это толсто намекала в своих первых гайдлайнах для iOS. Ведь как-то нужно группировать контролы и компоненты? Например, если положить их в какие-то контейнеры, то все станет логично и понятно.
При столь огромном разнообразии интерфейсов, контролов и паттернов вам кажется, что все интерфейсы уникальны и неповторимы. Но на деле, если внимательно присмотреться, внутри они идентичны друг другу как две капли воды: одни и те же компоненты, паттерны и контейнеры, просто шкурки разные натянуты.
Оставим иллюзии и взглянем правде в глаза. Все детальки аккуратно разложены по коробочкам и контейнерам. Давайте же познакомимся с ними поближе.
Mobile apps
Приблизительно 100% мобильных приложений состоят из следующих контейнеров:
- Таблица (Table)
- Ячейка (Cell)
- Сетка (Grid)
- Карточки (Cards)
И на этом всё. Удивительно? Там же столько разных контролов, они все цветные и вот это всё! А контейнеров всего четыре, не считая Canvas, на котором располагаются эти самые контейнеры, внутри которых живут контролы, паттерны и данные.
TABLE > CELLS
TABLE. Что такое таблица? Если вниматель вчитаться в документацию, то выяснится, что все списки и экраны с описанием товара есть ни что иное, как таблица, в которую вложены ячейки. Просто, зачастую, таблица в мобильном приложении состоит из одной колонки.
CELL. А вот ячейки бывают разные: заголовок; картинка + название + цена; иконка + название + дата и так далее. Ячейки могут иметь любую высоту и ширину, в одной таблице их может быть сколь угодно. Хоть сто, хоть тысяча, хоть миллион.
Иными словами, таблица — самый частый гость любого экрана. С виду они выглядят как списки, но на деле это таблицы с вложенными ячейками.
GRID
Что же такое сетка? Все просто: это набор картинок или мини-карточек, расположенных в виде сетки. Вспомните любое приложения для хранения фотографий, Instagram, Pinterest, Dribble, Behance и так далее. Сетка — крайне опасный пример распределения информации на экране. Дело в том, что если с фото-сеткой все понятно (Фотографии очень разные, потому человеческий глаз без проблем различает их), то злоупотреблять сеткой для отображения карточек товаров не стоит: не нужно пихать под фотографии слишком много данных, потому что человек плохо концентрируется, если в его поле зрения попадает более семи насыщенных информацией объектов. А когда карточек товаров сто и картинки в целом однотипные, то воспринимать эту информацию невыносимо печально. Не верите? Зайдите на сайт Леруа Мерлен в раздел «Скобяные изделия» 😱
CARDS
Карточки. Достаточно хитрый зверь. С одной стороны карточка может быть частью сетки. С другой стороны, карточки могут складываться в вертикальный список, напоминая таблицу с вложенными в нее ячейками. В некоторых случаях экран с описанием товара называют «Карточка товара», но это не карточка, а отдельный экран с таблицей, в которой ячейка может быть похожа на карточку 😰 😱 😶
Зачем вам эта информация? Для любого iOS разработчика экран априори состоит из Navbar и Table, внутри которой есть Cells. Хорошо, что теперь и вы тоже это знаете.
Если более прагматично посмотреть на этот вопрос, то ответ следующий: теперь вы точно знаете, что раскрашиваете ячейки, регулируете отступы в таблице и не более того. И теперь вы знаете, что видит разработчик в ваших макетах на самом деле.
Справедливости ради, давайте заглянем в огород старшего брата Web app.
Web app
Самый популярный подход к расположению данных в web app — таблица! Не менее популярным инструментом является список. Карточки тоже есть.
COLUMNS. А еще в web app есть колонки! В колонках можно располагать все перечисленные выше инструменты упаковки данных, а также можно варьировать количество колонок в зависимости от ширины окна браузера! А вот айфон в ширину растянуть у вас вряд ли получится.
Безусловно, в приложениях для планшетов тоже есть колонки, но, как правило, разброс разрешений экранов крайне ограничен, тогда как веб апп может отображаться на мониторах с разрешением от 1024 до 4000 и более пикселей. Значит и количество колонок уж точно будет меняться.
В сухом остатке
Как я и писал в начале, инструментарий в глобальном смысле сводится к такому списку:
- Table
- Cell
- Grid
- Card
- Column
- Navigation bar (panel)
С последним инструментов, надеюсь, все более-менее понятно
И слава Богу, этих инструментов более, чем достаточно. Надеюсь, теперь вы будете видеть в интерфейсах не только смуззи из контролов и данных, но и контейнеры, по которым этот смуззи бережно разлит
🥤🥤🥤🥤🥤🥤
Всем бобра! ❤️
