Полное руководство по использованию типографии в дизайне пользовательского интерфейса
- UX/UI
- 28 июня 2019 г.
Каждый элемент важен в макете, когда речь идет о дизайне пользовательского интерфейса, и одним из лучших способов улучшить дизайн пользовательского интерфейса является типография. Тем не менее, типографика считается самой сложной частью дизайна пользовательского интерфейса.
Следовательно, вы должны изучить основы типографики, чтобы сделать эффективный дизайн пользовательского интерфейса. Но все же есть много веб-мастеров и дизайнеров, которые не знают, как правильно использовать типографику в дизайне пользовательского интерфейса.
Если вы дизайнер, у вас должна быть большая вероятность текста и не просто рассматривать его как контент, но как основную особенность дизайна пользовательского интерфейса. 95% типографики содержится в веб-дизайне И вы должны подняться выше шрифта.
Читайте также: Как создать уникальный дизайн пользовательского интерфейса для мобильного приложения, который мгновенно привлекает внимание
Вы должны подумать о читаемости, подотчетности и графическом балансе, если вы хотите оптимизировать свою типографику для дизайна пользовательского интерфейса, но удобство использования является наиболее важным аспектом.
Что такое типография?
Согласно Википедии, это метод и искусство организации типа для того, чтобы сделать письменный язык привлекательным, читаемым и разборчивым при демонстрации.
Систематизация типа включает в себя выбор размеров точек, шрифтов, линейного расстояния, длины линий, интервала букв и изменение пространства между парами букв.
Термин «типография» также применим к организации, стилю и внешнему виду символов, цифр и букв, создаваемых процедурой.
В двух словах, типографика — это все, что связано с письменным языком на экране, и требует как тактики, так и художественных навыков дизайнера.
Лучшие практики типографии в дизайне пользовательского интерфейса
Если вы хотите создать превосходный Дизайн UIВы должны освоить свою типографику.
В этом блоге я собираюсь поделиться некоторыми рекомендациями, которые помогут вам преуспеть в стиле типографики в дизайне пользовательского интерфейса.
1. Полностью обнаруживаемые формы букв
Многие шрифты имеют определенные формы букв, которые не отличаются от других в этом наборе. Это может сделать его действительно трудно читать текст этого интерфейса.
Наряду с буквами, цифры иногда игнорируются по сравнению с различными атрибутами шрифтов для данного задания.
2. Стили текста
Используйте встроенные стили текста, если это возможно, поскольку они помогают вам продемонстрировать контекст визуально разными способами, сохраняя при этом абсолютную разборчивость.
Эти стили зависят от системных шрифтов и помогают вам воспользоваться основными типографскими функциями, такими как динамический тип, который автоматически изменяет направление и отслеживание для каждого размера шрифта.
3. прототипирование
Наряду со всеми типами конструкций, типографика имеет важное значение и в дизайне прототипа.Удивительная мобильная типография может функционировать вместе с каждым элементом пользовательского интерфейса в направлении продуктивного и чистого мобильного пользовательского интерфейса; однако в дизайне мобильного прототипа текст не требует смысла.
Например, в Mockplus, одном из лучших инструментов для прототипирования, вы можете использовать текстовый компонент для проектирования с простым перетаскиванием.
Mockplus состоит из как однострочных, так и многострочных текстовых элементов.Вы можете свободно описывать свойства текста, такие как шрифт, размер шрифта, выравнивание, цвет и т. Д.
Кроме того, функция автоматического заполнения данных текста сэкономит вам много времени. Также вы можете изучить дизайн на реальном мобильном телефоне, чтобы проверить, является ли он удивительным читаемостью.
4.Размер имеет важное значение
Как правило, видно, что многие дизайнеры включают текстовые компоненты, которые отличаются по размеру; например, копия кнопки, полевые метки, заголовки разделов и т. Д.
Обычно некоторые шрифты идеально подходят для больших размеров, в то время как другие выглядят идеально при использовании в небольших размерах или для буквенных форм.
Таким образом, вам придется задуматься о масштабируемости текста, если у вас есть шрифт, который вам нужно применить к большим заголовкам и небольшим ярлыкам.
Если вы выберете шрифт, который выглядит определенным образом, подумайте о том, который совместим с различными размерами и теми, которые способствуют читаемости, а также удобству использования.
5. Расстояние между буквами
Единственное, что вы должны учитывать в интервале букв, это то, что вы должны сделать интервал соответствующим и меньшим по размеру текста, если текст больше.
Когда вы соединяете большие буквы с большим расстоянием, шрифт кажется очень открытым, и это помогает вам исправить расстояние вручную. Эта ручная настройка расстояния букв применима к заголовкам только в дизайне пользовательского интерфейса.
6 Широкая пропорция
Ширина персонажа в сочетании с его высотой объясняется как пропорция.Обычно для лучшего обнаружения буквы нужна широкая буква, а не сжатая, и это происходит из-за лучшей разборчивости.
7.Удобочитаемость
Это касается качества всего опыта чтения, и это описывается как легкость, с которой вы можете идентифицировать текстовые блоки, подзаголовки, абзацы, заголовки и понимать текст, представленный вам.
Вы можете рассматривать его как некоторую макротипографию, которая делает текст привлекательным для поощрения посетителей сайта для чтения контента.
8. Сан-Сериф против Серифа
Согласно истории, засечки более разборчивы. Они использовались в печати в течение длительного периода и они значительно улучшают чтение для больших текстовых блоков. Сериф позволяет глазу легче течь по тексту.
Однако эта история неодинакова на мобильном телефоне и в Интернете. Существуют разные беззасечки, которые можно читать и при нынешнем состоянии визуального дизайна нравятся простые формы букв. В интернете и конкретно на мобильном можно увидеть больше беззасечек.
Кроме того, дисплей определенно не бумажный, и, как правило, вы не будете читать длинные тексты в Интернете, особенно в приложениях.
Таким образом, все зависит от проекта, с которым вы имеете дело, и от того, как пользователи будут использовать ваш контент.
9. Иерархия
Рисунок чтения определяется иерархией. Он рассказывает, как отделить заголовок от текста тела и подзаголовка.
Это можно сделать с помощью эффекта контрастности, полей, размеров текста, набивки и т. д. Вам нужно изучить этот метод должным образом, чтобы освоить удивительную читаемость.
10. Сценарии с учетом
Когда вы собираетесь завершить текст, который вы собираетесь включить в свой дизайн пользовательского интерфейса, вам нужно проверить несколько сценариев. Вам также нужно будет понять, как сопоставить и сформировать текст. Предупреждающее сообщение является примером этого.
Оригинальный текст требует отличаться от текста сообщения оповещения, и это придает смысл тому, что хороший пользовательский интерфейс сталкивается с проблемами, но в конце концов становится безупречным.
11. Фактическая платформа
Это кажется действительно определенным, но обычно упускается из виду.В случае разработки мобильного приложения рекомендуется протестировать его на мобильных платформах.
Если ваш пользовательский интерфейс построен в адаптивном формате, запустите все тесты на разных размерах и устройствах, чтобы узнать, являются ли принятые решения о тексте актуальными или нет.
12. Ритм и повторение
Это неуклюжая часть дизайна пользовательского интерфейса. Каждый компонент, который повторяется, делается для обеспечения единства в дизайне.
Эта техника повторения может применяться через коробки, фоны, размер текста, набивку, цвета и поля. Повторение учитывает ритм.
13. Высота линии.
Вы очень целесообразно использовать золотое сечение, когда дело доходит до лидерства.В случае, если у вас есть больше опыта, вы можете настроить этот результат вручную.
Конечно, есть некоторые исключения из этого правила, и это правило может быть нарушено всегда, если это необходимо.
14.Белое пространство
Белое пространство минимизирует объем текста, который нужно будет прочитать вашим посетителям сразу. Это повышает читаемость и избегает того, чтобы страница выглядела неуклюжей.
Белое пространство позволяет глазу наблюдать за макетом и, как следствие, обеспечивает привлекательное и тонкое расположение контента.
15. Ширина текстового блока.
Предположим, вы читаете на тонком льду. Очень широкие текстовые блоки истощат ваши глаза, добавляя следующую строку для чтения.
В противном случае, если линии не широки, глаз будет вынужден идти от линии к линии, тем самым предотвращая поток чтения.
Читатели получают энергию подсознательно, подскакивая к следующей строке. И чтобы все читатели были поглощены и заряжены энергией, нужно держать в текстовой строке всего 50-75 символов.
16. Текст - это пользовательский интерфейс
Разница между неопытным и Опытные дизайнеры UI Дизайнеры-эксперты рассматривают текст как пользовательский интерфейс, в то время как неопытные будут рассматривать его как другую часть контента.
В современную цифровую эпоху ваш текст должен поддерживать функциональный компонент, что делает его похожим на пользовательский интерфейс. Это означает, что каждая функция вашего пользовательского интерфейса должна быть совместима с текстами, которые вы вводите.
В заключение
Независимо от цели, тип всегда будет вести пользовательский интерфейс. Ваш текст будет мастер, если вы настроите его правильно, и он потерпит неудачу, если вы установите его неправильно. Все методы проектирования пользовательского интерфейса применимы к выбранному шрифту.
Успешный дизайн пользовательского интерфейса поставляется с отличной типографикой. Таким образом, текст, который имеет высокую гибкость и масштабируемость, может управлять гонкой жидкостей с вашим дизайном.
Следуйте вышеупомянутым советам и используйте их, если вы хотите утвердиться на рынке и выиграть гонку в качестве опытного дизайнера пользовательского интерфейса.
