Як обробляти великі абзаци з центрованим текстом?


11

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

багато по центру тексту!

РЕДАКТИКА 1: Мій веб-сайт базується на цьому вільному шаблоні , який також має декілька більших розділів тексту, вирівняних по центру. Я хотів би залишити виправдання тексту, але не знаю, чи він би добре відповідав тому, як виглядає решта веб-сайту.

EDIT 2:

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

Чорний на білому

EDIT 3:

Гаразд, так виправдано, з моєю спробою кульових очок. Я скоро розберуся. Мені потрібно правильно встановити розмір шрифту, але ви отримаєте ідею.

вийшов виправданим!


Чому вам потрібно вказати, що ви говорите англійською? В інших країнах люди роблять примітку у своєму резюме, якщо вони розмовляють однією або декількома іноземними мовами.
imrek

1
@DrunkenMaster Ви припускаєте, що Стейсі перебуває в англомовній країні. :)
Скотт

Я в країні з 11 офіційними мовами і вміння розмовляти англійською рідною мовою - це не надто часто серед моєї конкуренції.

@Scott Перевірте її місцезнаходження, там пише Південна Африка. У будь-якому випадку текст центрування - не єдина проблема. Тонкі білі літери на чорному тлі дуже важко читати, особливо шрифтовий серіал. Якщо вам потрібен зворотний текст маленькими літерами, використовуйте шрифт sans-serif, який був би більш розбірливим. В іншому випадку є безліч приємних веб-шрифтів, які ви можете використовувати, щоб надати біографії більш особистий штрих, адже в 2015 році хороша типографія майже необхідна
imrek

@DrunkenMaster, ви з усією радістю згадуєте будь-які проблеми, які ви знайдете у відповіді - я повна нобі, коли мова йде про це (як ви, напевно, можете сказати!), І мені потрібна вся допомога, яку я можу отримати.

Відповіді:


10

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

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

Ось стаття про вирівнювання тексту

І у UX.SE виникає відповідне питання: Чи загалом лівий текст в основному кращий над текстовим центром?

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

(Побічна примітка. Зворотний тип в Інтернеті також дуже важкий для читача.)

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

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

Речі "читатимуться" набагато простіше ....

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


Здається, обраний нами шаблон має кілька питань! Я думаю, що це ви отримуєте безкоштовно.

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

Я просто знаю висококонтрастний, зворотний тип зробить більше, щоб відвернути користувачів, ніж буде вирівнювання тексту.
Скотт

Я вже вирішив переключити це на чорний текст на білий, коли отримаю можливість.

І я щойно змінив кольори. див. редагувати

5

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

З цієї точки зору вирівнювання ліворуч краще, ніж по центру (або праворуч).

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

Міркування зводиться до ваших погляд надмірним вправою зрозуміти текст. В моєму особистому випадку я відчув, що зір перетягнувся в центр тексту, помічаючи, наприклад, такі слова, як Matlab / VHDL та Python C ++. Вони мені дають уявлення про те, що ти робиш, але ти не просто намагаєшся перелічити навички, а описуєш себе.

Сказавши це, текст не надто довгий, а його центром є дизайн-заява. Тож якщо ви хочете зберегти це таким чином, я б подумав додати декілька візуальних підказок, які допоможуть орієнтуватися в тексті. Наприклад, зробити деякі слова або фрази жирними або змінити їх розміри. Ви також можете використовувати колір, щоб виділити мови. Я впевнений, що не весь ваш текст має однакову актуальність, тому він не повинен виглядати однаково.


2

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

Є ще деякі речі, які слід врахувати:

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

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

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

  • Структуруйте текст , використовуйте список, якщо ви перераховуєте речі, використовуйте заголовки. Існує маса варіантів, щоб зробити текст добре. Прості старі нудні абзаци сьогодні не в моді.


2

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

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

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

секційний приклад

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


2

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

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

Розглянемо наступне:

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.