Основные инструменты интерфейсостроения

Nikita Morozov
Nov 2, 2018 · 6 min read

Все мы знаем и любим конструкторы 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)

С последним инструментов, надеюсь, все более-менее понятно

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

Всем бобра! ❤️

Если вам понравилось, — скажите «Спасибо», кликнув на кнопку 👏🏻. Это поможет другим людям быстрее найти статью.


UX / UI insane

Секреты профессии UX/UI дизайнера: инсайд, немного про дизайн, запретные темы, о которых вам не расскажут в институте

Nikita Morozov

Written by

UI/UX Lead, продакт менеджер, преподаватель. Обладает огромным опытом в проектировании, дизайне B2C, ERP и BPM мобильных и веб приложений.

UX / UI insane

Секреты профессии UX/UI дизайнера: инсайд, немного про дизайн, запретные темы, о которых вам не расскажут в институте

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade