Перейти к содержанию
  • the.bunin
    the.bunin

    Типографика: 7 советов в UI-дизайне

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

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

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

    Не стоит недооценивать значимость типографики для сферы UI-дизайна, так как процесс улучшения типографического дизайна – верный шаг к созданию идеального UI в целом. Ниже удастся ознакомиться с несколькими полезными советами по улучшению типографики.

    Задействуйте иерархию

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

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

    Типографика-7-советов1.png

    Позвольте тексту «дышать»

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

    Высота линий

    Одно из дизайнерских приложений, в частности Photoshop, применяет в своей терминологии понятие «ведущий» (leading). Другие приложения используют название «высота строки» (line-height). Что касается начала, высоты строк и межстрочного интервала, то все это имеет отношение к вертикальному расположению в строках.

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

    Типографика-7-советов2.png

    Межбуквенный интервал

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

    • увеличении расстояния между буквами, которые находятся в верхнем регистре;
    • уменьшении межбуквенного интервала, когда увеличивается размер шрифта;
    • уменьшении расстояния между буквами, когда увеличивается вес шрифта.

    Типографика-7-советов3.png

    Длина строк

    Длиной строки принято считать ширину текстового поля. Лучше отдать предпочтение более коротким строкам, когда улучшается читабельность текста. Подходящей для экранного текста считается длина строки, содержащая 60-80 символов, что соответствует размеру экрана 1440рх и размеру шрифта 16рх. Что касается мобильных экранов, то здесь рекомендуется использовать диапазон в 35-45 символов на одну строку.

    Выбор шрифта в зависимости от контекста

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

    По словам Камэрона Молл, для хороших дизайнеров текст – это контент, а для лучших – UI.

    При грамотном выборе шрифта легче донести свое сообщение аудитории. В ином случае возникает путаница.

    Единая семья шрифтов

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

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

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

    Выравнивание для улучшения читаемости

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

    Рекомендуется также не использовать одно слово для начала новой строки.

    Типографика-7-советов4.png

    Подводим итоги

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

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

    Обратная связь

    Рекомендуемые комментарии

    Я бы еще добавила информацию про интервал между заголовком, подзаголовком и основным текстом. А также про интервалы между текстовыми блоками. 

    Ссылка на комментарий
    Поделиться на другие сайты

    Спасибо, полезно. Я вообще только учусь работать в Figma и в целом дизайн делать, но информация полезная, взял на заметку)

    Ссылка на комментарий
    Поделиться на другие сайты

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

    Ссылка на комментарий
    Поделиться на другие сайты

    В 22.11.2021 в 18:09, tof_fifee сказал:

    Я бы еще добавила информацию про интервал между заголовком, подзаголовком и основным текстом. А также про интервалы между текстовыми блоками. 

    +, про интервалы забыли..

    Ссылка на комментарий
    Поделиться на другие сайты



    Присоединяйтесь к обсуждению

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

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

    ×   Вставлено с форматированием.   Восстановить форматирование

      Разрешено использовать не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


×
×
  • Создать...