Как мне обрабатывать большие абзацы по центру текста?


11

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

много центрированного текста!

РЕДАКТИРОВАТЬ 1: Мой сайт основан на этом бесплатном шаблоне , который также имеет несколько больших разделов по центру текста. Я хотел бы выровнять текст по левому краю, но я не знаю, хорошо ли он будет соответствовать внешнему виду сайта.

РЕДАКТИРОВАТЬ 2:

Так что я перевернул цвета так, что это черный текст на белом. Вот как это выглядит сейчас, с шрифтом Sense-Serif тоже. Я также включил, как выглядит ссылка на белом фоне - возможно, мне придется немного затемнить ее:

Черный на белом

РЕДАКТИРОВАТЬ 3:

Хорошо, так что оставил оправданным, с моей попыткой пунктов пули. Я собираюсь разобраться с этим в ближайшее время. Мне нужно правильно установить размер шрифта, но вы поняли идею.

оставил оправданным!


Почему вы должны указать, что вы говорите по-английски? В других странах люди делают пометки в своем резюме, если говорят на одном или нескольких иностранных языках.
imrek

1
@DrunkenMaster Вы предполагаете, что Стейси находится в англоязычной стране. :)
Скотт

Я нахожусь в стране с 11 официальными языками, и возможность говорить по-английски не является распространенным явлением среди моих конкурентов.

@ Скотт Проверьте ее местоположение, это говорит Южная Африка. В любом случае центрирование текста - не единственная проблема. Тонкие белые буквы на черном фоне очень трудно читать, особенно шрифт с засечками. Если вам нужен обратный текст маленькими буквами, используйте шрифт без засечек, который был бы более разборчивым. В противном случае, есть много хороших веб - шрифтов , которые вы можете использовать, чтобы дать вашему био более личный контакт, после того, как все хорошее книгопечатание почти обязательным в 2015 году
imrek

@DrunkenMaster, вы всегда можете упомянуть о любых проблемах, которые вы найдете в ответе. Я - полный нуб, когда дело доходит до этого (как вы, вероятно, можете сказать!), И мне нужна вся помощь, которую я могу получить.

Ответы:


10

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

Это не чувствуется в какой-то степени, если смотреть на короткие, одно или два предложения, абзацы. Но чем больше текста, тем хуже становится.

Вот статья о выравнивании текста

И UX.SE имеет связанный с этим вопрос: выровнен по левому краю текста в целом предпочтительнее по центру текста?

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

(Примечание: обратный тип в Интернете также очень сложен для читателя.)

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

введите описание изображения здесь

Вещи будут "читать" намного проще ....

введите описание изображения здесь


Кажется, у выбранного мной шаблона есть несколько проблем! Я думаю, это то, что вы получаете бесплатно.

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

Я просто знаю, что высококонтрастный, обратный тип сделает больше, чтобы отвлечь пользователей, чем выравнивание текста.
Скотт

Я уже решил изменить это на черный текст на белом, когда у меня будет такая возможность.

И я только что поменял цвета. см редактировать

5

У меня не было бы проблемы с текстом, если бы у него было 2 или 3 абзаца меньше. Центрирование работает хорошо для небольших объемов текста, но становится проблемой читабельности, когда его слишком много.

С этой точки зрения выравнивание по левому краю лучше, чем по центру (или выравнивание по правому краю).

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

Рассуждение сводится к твоим глазам, чрезмерно тренирующимся, чтобы понять текст. В моем личном случае я чувствовал, что мое зрение притягивается к центру текста, замечая, например, такие слова, как Matlab / VHDL и Python C ++. Они дают мне представление о том, что вы делаете, но вы не просто пытаетесь перечислить навыки, вы описываете себя.

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


2

Другие уже сделали правильные пункты по центру текста, поэтому я не буду повторять это.

Есть некоторые другие вещи, которые вы должны рассмотреть:

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

  • Используйте какой-нибудь шрифт с более индивидуальным подходом, например, «Georgia» или «Times», вероятно, является хорошим выбором для текстовых сайтов, требующих быстрой загрузки, но в 2015 году почти каждый веб-дизайнер одержим типографикой . Проверьте шрифты по адресу http://www.google.com/fonts/. Существует множество легко читаемых шрифтов с засечками и без засечек, которые удивят ваших посетителей. Используйте контраст, соедините несколько хороших шрифтов, используйте разные веса и так далее.

  • Я предполагаю, что веб-сайт о вас, и он не будет по-настоящему тяжелым. Создайте красивое изображение большого героя для своей главной страницы. Как хорошая фотография типичного устройства, на котором вы работаете, или вашей обычной рабочей среды. Установите его как фоновое изображение и поместите на него красивый большой текст . Это почти всегда оказывает хорошее влияние на ваших посетителей.

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


2

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

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

Это может выглядеть как этот чрезвычайно грубый пример :

секционный пример

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


2

Заголовки - отличная идея, если есть сложный или разнообразный контент. Тем не менее, в вашем случае вы также можете воспользоваться улучшенной структурой абзаца. Например, первые два абзаца можно объединить, чтобы связать ваше образование с тем, кто вы есть. В целом, это дает читателю лучшее понимание того, кто вы есть, сохраняя при этом ход обсуждения.

Абзацы, которые я пишу, являются хорошими примерами для использования в качестве шаблона. Вы можете сделать краткое заявление с первой строки, затем следуют с сравнения, в отличие от или дополнительной информации. Это может сопровождаться одной или двумя строками, которые предоставляют примеры или дополнительную связанную информацию, чтобы лучше донести сообщение до вашей аудитории. Наконец, закончите связующим словом, чтобы сделать вывод о том, что вы сказали.

Учтите следующее:

Меня зовут Стейси и я квалифицированный инженер. Я получил степень бакалавра технических наук, которая дала мне знания и навыки для проектирования цифровых систем за последние пять лет. Примеры систем, которые я разработал, включают (...). В дополнение к моим техническим знаниям, я являюсь носителем английского языка с формальным образованием в области профессионального английского общения.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.