Connect with us

Дизайн и прототипирование

Лучшие практики выравнивания текста в интерфейсе

Сделайте свой пользовательский интерфейс более эффективным и легким для чтения с помощью выравнивания текста.

Опубликовано

/

     
     

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

Любой интерфейс на 90% текстовый. Вот почему, когда вы видите правильно выровненную типографику, у вас создается впечатление, что вы используете более продуманный интерфейс. А когда что-то не на своем месте, это сразу же бросается в глаза и вредит нашему восприятию.

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

Совет 1. Избегайте выравнивания по центру для длинного текста

Если текст длиннее двух или трех строк, всегда рекомендуется не использовать выравнивание по центру.

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

Лучшие практики выравнивания текста в интерфейсе

Совет 2. Всегда выравнивайте длинный текст по левому краю

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

Лучшие практики выравнивания текста в интерфейсе

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

Совет 3. Используйте выравнивание по центру только для заголовков или небольших блоков текста.

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

Лучшие практики выравнивания текста в интерфейсе

Если вам нужно центрировать более одного блока текста, но один из них немного длиннее, то лучшее решение — изменить/переписать контент, чтобы сделать его короче:

Лучшие практики выравнивания текста в интерфейсе

Совет 4. Используйте выравнивание выступа для соединения с элементами пользовательского интерфейса.

Используйте выступ, чтобы установить четкую визуальную иерархию для элементов пользовательского интерфейса, которые не имеют такой же визуальный вес, как текст — таких как иконки, маркеры или кавычки.

Лучшие практики выравнивания текста в интерфейсе

Выступ помогает создать четкую траекторию глаз для текста, устраняя зигзагообразные скачки глаз.

Лучшие практики выравнивания текста в интерфейсе

Совет 5. Выровняйте данные и числа по правому краю

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

Лучшие практики выравнивания текста в интерфейсе

Совет 6. Балансируйте пустые пространства для текста с выравниванием по ширине

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

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

Лучшие практики выравнивания текста в интерфейсе

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

Спасибо за чтение!

Оригинал

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement

Популярное

Спасибо!

Теперь редакторы в курсе.