Жолоби - прокладка та запас для стовпців з фоном або рамкою

Які рекомендовані рекомендації щодо дизайну жолобів, коли стовпчик (або ящик, або будь-який модуль компонування) має чітку видимість, оскільки він має власне тло або межу?

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

Для ілюстрації, ось деякі (але не всі) варіанти ...

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

Я переглянув купу писань про макети на основі сітки, але поки що побачив лише один, який вирішує цю проблему: Намовляй свої елементи Хої Він.

Що я пропускаю? Або просто немає чітких настанов?

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

Якщо я не неправильно читаю, Хой Вінь в своїй статті стверджує варіант 3.

Я вважаю, що я повертаюсь назад і назад між варіантом 3 і варіантом 6. У варіанті 3 поле вирівнюється, але його текст відчувається тісним. Але, використовуючи варіант 6, в кінцевому підсумку не вирівнюється ні поле, ні текст (хоча можна сказати, що неявна середина між краєм тексту та рамкою поля - це "річ", яка зараз вирівнюється).

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

Ммм, гадаю, питання є; Чи є якісь вказівки щодо вибору між варіантами, які я проілюстрував, - чи я ризикнув поза законом дизайнерів, і справа полягає лише в тому, "як виглядає і почувається добре" ?

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

Сітка, суворо дотримується, спокійно. Напруги мало, якщо якісь напруги; речі з’являються там, де очікує їх очі, і читач ніколи не здивується і не змусить себе почувати себе незручно.

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

0 не забезпечує контраст, так що другий стовпчик недиференційований від решти. За певних обставин це те, чого ти хочеш.

Приклади "напівзлову" у №5 та №6 переосмислюють жолоби, роблячи його звуженням. Вони фактично переосмислюють всю сітку по горизонталі та вертикалі, тому що в цьому випадку жолоб закінчується точно таким же, як міжрядковий інтервал. Це погано для тексту само по собі, але може працювати з полем. Однак у # 6 у вас є непропорційний пробіл з обох боків тексту порівняно з верхом і внизу. Це незручно і незручно, оскільки це не має сенсу. №5 було б кращим, оскільки простір білого кольору розподіляється більш рівномірно. З тієї ж причини №3 є кращим №2.

В цілому, тоді я погодився б з Лорен і рекомендував №3 як найкращий знімок. Це також найкращий загальний випадок, незалежно від кількості стовпців.

Є правила. Вони, безумовно, можуть бути зламані, якщо у вас є вагомі причини, але кожен раз, коли ви робите це, ви повинні бути цілеспрямованими, сміливими та чітко «за задумом». Helvetica Black у парі з Georgia працює, тому що вони різні; Требучет в парі з Верданою решіть на нерви, оскільки вони недостатньо різні. Велике, квадратне, червоне поле, що охоплює півтори колони, могло б працювати; злегка відтінка сірого не буде.

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

Це те, що я звик робити у друку, так що це виглядає "правильно" і в Інтернеті.

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

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