Модульні сітки в UI: чотири види макетів сітки

Продовжуємо дуже пізнавальну статтю про .

  • Першу частину читайте ТУТ!
  • Другу частину читайте ТУТ!
  • Третю частину читайте ТУТ!

Чотири види макетів сітки

Колонки, модулі, алеї і поля можна комбінувати по-різному, щоб сформувати різні типи сіток. Нижче представлені чотири стандартних сітки:

  • манускриптна сітка,
  • багатоколонкова сітка,
  • модульна сітка,
  • базова сітка.

Давайте розглянемо, коли яку використовувати.

Манускриптна сітка (Manuscript Grid)

Манускриптна сітка (або сітка з одною колонкою, як її часто називають) є найпростішою сіткою. Це, по суті, велика прямокутна зона, що займає більшу частину простору всередині формату. Манускриптні сітки добре підходять для безперервних блоків тексту. Однак вони не обмежуються текстом; зображення також можуть бути використані для заповнення цього блоку.

Виходячи з назви, люди природно пов'язують манускриптні сітки з друкованою сторінкою. Манускриптні сітки традиційно використовуються у книгах і гарно підходять для компонування безперервних блоків тексту.

Манускриптна сітка в iA Writer

Багатоколонкова сітка (Multicolumn Grid)

Як випливає з назви, багатоколонкові сітки мають декілька колонок. Пам'ятайте просте правило: чим більше колонок ви створите, тим гнучкішою стане ваша сітка.

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

Зверніть увагу, що в цій сітці одна колонка зарезервована для зображень і підписів.

Модульна сітка (Modular Grid)

Багатоколонкові сітки розбивають сторінку по вертикалі на декілька колонок, натомість модульна сітка поділяє сторінку на модулі як по вертикалі, так і по горизонталі. Колонки, рядки і проміжки між ними створюють матрицю осередків або модулі.

Модульні сітки гарно підійдуть, якщо ви хочете більше контролю над складним компонуванням, ніж може запропонувати колонкова сітка. Модульна сітка надає гнучкі формати для сторінок і дозволяє створювати складну ієрархію. Кожен модуль у сітці може містити невеликий фрагмент інформації, або суміжні модулі можуть бути об'єднані для формування блоків.

Кожен прямокутник у цій сітці є модулем. Модульна сітка використовується, коли вертикальний і горизонтальний простір мають однакове значення.

Базова сітка (Baseline Grid)

Базова сітка є основоположною структурою, яка направляє вертикальні інтервали в дизайні. Вона використовується в основному для горизонтального вирівнювання і для ієрархії.

Подібно до того, як ви використовуєте колонки і модулі в якості направляючих у своєму дизайні, ви можете використовувати базову сітку для створення узгодженості у вашому макеті. Використання цього типу сітки на кшталт писання на міліметровому аркуші – сітка гарантує, що нижня частина кожного рядка тексту (її базова лінія) вирівнюється з вертикальним інтервалом.

Це робить базову сітку не тільки відмінним типографським інструментом, а й надзвичайно корисною, коли ви маєте у своєму розпорядженні певні елементи на сторінці, тому що ви можете швидко перевірити проміжки.

Базова сітка формує вертикальний інтервал дизайну. Тут модульна сітка створюється шляхом позиціонування горизонтальних напрямних щодо базової сітки.
  • Першу частину читайте ТУТ!
  • Другу частину читайте ТУТ!
  • Третю частину читайте ТУТ!

Джерело: www.smashingmagazine.com

ДУЖЕ РАДИМО ПОЧИТАТИ:

Голландці висміяли новий логотип Нідерландів

Короткий посібник з дизайну інтерфейсу для початківців (на доступних прикладах)

Вправа для генерації дизайнерських ідей: Crazy 8

Залишити відповідь