Учимся правильно располагать изображение относительно текста

1 февраля 2010 года, Размещено в категории: Юзабилити

изображение относительно текста

Одним изображением можно рассказать пользователю больше чем 1000 словами. Изображение которое правильно расположено в тексте, становится лучше для восприятия.
Изображение является очень важным фактором в восприятии содержания контента. Один из существенных принципов при дизайне - это расстояние между элементами. Это также учитывается и для изображений. Слишком маленькое расстояние между изображением и текстом может мешать восприятию ее. В этой статье я приведу пару стандартов, размещение изображений относительно текста. Думаю для блогеров тоже будет интересно почитать.

Текст должен обтекать маленькие изображения
Изображения, которые меньше чем половина текстовой ширины, "должны обтекать". 
Вот на первом примере видно как текст обтекает изображение, плюс расстояние между ними есть. А вот второй пример показывает как не нужно делать, расстояние между текстом и изображением равен нулю, тем самым текст мешает восприятию изображения, а при чтении текста изображения мешает.

Текст должен обтекать маленькие изображения

Расстояние между текстом и изображениям
Изображения должны иметь вертикальное и горизонтальное отступление, но горизонтальный отступ должен быть не менее 40 Pixel, а вертикальный не менее 20 Pixel. Отступление зависит и от размера шрифта контента, и ширины между строчками. В зависимости от строчной высоты текста, расстояние отступление тоже растет. Ух как сказал 🙂

Расстояние между текстом и изображениям

Как располагать широкие изображения
Если ширина изображение больше половины текстовой части, тогда изображение размещаем по центру.
Если вы видите, что текст плохо обтекает изображение, тогда лучше изображение разместить по центру (смотрите на пример в низу).

Как располагать широкие изображения

Несколько изображений (иллюстрированный метод)
Если изображение располагать рядом (друг возле друга), или напротив друга, получаем небольшие текстовые блоки, которые становятся неразборчивы.

Когда изображение друг возле друга, тогда получается большой блок с текстом напротив изображений, так делает не нужно. (Изображение мешают друг другу) Статья часто имеет более одного изображения. Тогда нужно будет обращать внимание не только на расстояние между текстом и изображениями, но и на расстояние между самими изображениями.

иллюстрированный метод

Подпись к иллюстрации
Если иллюстрация получает подпись, это хорошо для читателей, и для поисковых машин. При подписях к иллюстрации нужно обращать внимание всегда на то, чтобы текст не был шире иллюстрации. Так как изображения могут быть тонкие, поэтому подпись к иллюстрации делаем с малого размера шрифта.

Подпись к иллюстрации

Делаем Выводы:
Для каждого изображения нужна, так называемое свое пространство, чтобы читатели лучше его воспринимали, и чтобы изображение не сливалось с текстом (теряется читаемость текста). Выполняя все стандарты мы будем делать нашу статью более Юзабильною 🙂
Статья была написана с участием немецкого ресурса webstandard.

Мой блог находят по следующим фразам
.htaccess в вордпресс где
расстояние от картинки до текста css
плеер для сайта mp4
как закрепить кнопку в ксс
красивая слайдовая галерея css
как вставить иконки в html






3 комментария

  • 7 лет назад Ответить

    Ну все супер написано как раз для меня. А то у меня давно проблема с этими картинками в постах, теперь научился 😉

  • 7 лет назад Ответить

    Хорошая статья про картинки и юзабилити. Я таких статей не встречала еще. Очень наглядно все расписано, буду пользоваться 🙂
    а текст, который сливается с картинкой ужасно раздражает меня…

  • 7 лет назад Ответить

    Почему же отступы именно 40 и 20? Я у себя использую лишь отступ 10px, причём только по горизонтали со стороны текста.
    Это уже желание дизайнера и необходимость сочетания текстового и мультимедийного содержания.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: