Мэтт Cronin

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

В этом посте we’ LL объяснить некоторые веб-типографики условиях и как они играют в readability; we’ VL представляют многочисленные советы, которые помогут улучшить читаемость вашего контента, и we’ будете продемонстрировать очень легко читаются веб-сайты, макеты иarticles.

Вы также можете быть заинтересованы в следующих связанные должности:

• 5 Принципы и идеи создания Тип По Web
• 50 полезных инструментов для дизайна Красивый веб-Typography
• Фантастический блоги Typography For Your Inspiration
• Витрина большой Typography

Условия, и что каждый средство для Readability

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

HierarchyКаждый типографского макета должно существенным элементом иерархии.Иерархия определяет, как прочитать содержание.Он показывает пользователю должны были начать чтение и где прочитать.Это отличает заголовки из текста.Хотя цвета текстовых полей могут быть использованы для контраста заголовки и текст, иерархии ссылается на разницу в размерах между этими элементами.Иерархия играет огромную роль в том, развертываемых макета.Это важная техника, которая должна быть освоена для достижения читаемый веб-typography.

UXBooth используется очень чистая иерархии для достижения читаемый веб-typography.

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

Какпоказано на следующем рисунке, черным по белому является Очень readable.Черное на белом, очевидно, является стандартным контрастные цвета, а для достижения читаемым содержание это хорошо, чтобы остаться в диапазоне от черного-на-белом contrast.

Этот, однако, розового на синий, это почти невозможно read.Этот пример моего быть немного экстремальный, но он показывает, как такой ужасный контраст может оказать существенное влияние на текст.Вы, наверное, won’ вижу сайты, используя такой плохой контраст, но он по-прежнему показывает, почему нужно быть очень умным о it.

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

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

Линия LengthДлина линии часто упускается из виду в веб-типографике, но не должно быть.Длина линии, конечно, количество слов в строке.Хорошая длина линии один, что позволяет reader’ глаза течь с конца одной строки к началу следующей очень легко и naturally.

Ключи к проездным Typography

Достижение читаемость относительно легко, все, что нужно соблюдать несколько основных методов.Читаем веб-страницы может пойти длинный путь с пользователями, и читаемость имеет огромное влияние на их опыт.Проектирование для веб-все о том, user’ Опыт как можно более приятным.Вот 9 советов, которые помогут вам работать над readability.

1.Дружественный HeadersЗаголовки являются ключевым элементом в типографии, печатные и Интернет, так.Как уже упоминалось, они являются частью текста иерархии и главным фактором в развертываемых content.

Во-первых, размер заголовка так же важно, как размер текста.Переход слишком большой с заголовком с большим количеством содержания может бросить пользователь равновесие при чтении и заставить их потерять свои места.Это, в конечном счете разрушить поток содержание и отвлекать.Заголовки, которые слишком малы погубит иерархии статью, тоже.Если заголовок слишком мала,она не будет опираться user’ внимания как она полностью should.

Следующее, важно обеспечить достаточное пространство между заголовком и телом text.

2.Сканируемая TextЯ уже упоминал “ scannable” текст много раз, и вы наверняка слышали его в другом месте.Сканируемая текста идет рука об руку с читаемым текстом.Создание копии сканируемых состоит из хорошо использовать заголовки, иерархии и точки фокусировки, чтобы помочь пользователю через content.

Итак, что делает копии сканируемых?Ну, есть много факторов, большинство из которых уже были упомянуты. Размер заголовка и положения, размера текста, высота строки текста, контрастности текста и способ точки фокусировки differentiated все влияние как развертываемых копию is.

В фокусе points определенные элементы или объекты в макете, которые привлекают или предполагается привлечь, user’ внимание.Это может быть заголовок, графические элементы, кнопки, etc.

3.Белый SpaceПо содержанию тяжелых макеты, интервал способствует читаемости содержание.Белое пространство помогает компенсировать большие объемы текста и помогает user’ Глаза потока через текст.Она также обеспечивает разделение между элементами в макете, в том числе графики и text.

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

4.ConsistencyПоследовательность часто рассматривается как важный метод для удобства, но это также относится и к читаемости.Согласованность в иерархии важно удобный макет.Это означает, что все заголовки такое же значение в иерархии должна быть такой же размер, цвет и шрифт.Например, все < h1> Заголовки в статье, должны выглядеть одинаково.Почему?Эта согласованность предоставляет пользователям знакомый точки фокусировки при их сканировании, и это помогает организовать content.

5.Плотность текста Плотность текста относится к количеству слов вы размещаете в одной области.Плотность содержание имеет большое влияние на вашу content’ читаемость с.Плотность зависит от расстояния такие параметры, как высота строки, расстояние между буквами и размер текста.Если вы нашли баланс между всеми этими так, чтобы содержимое не слишком компактна и не слишком широко расставленные, у вас будет идеальный плотности, что для чтения и scannable.

6.Акцент Важно ElementsДругим ключевым фактором является акцент некоторых элементов в организме содержание.Это включает в себя выделение ссылки, жирный важный текст и показывает кавычки.Как уже упоминалось, точки фокусировки имеют важное значение в веб-типографики.Делая упор на эти объекты, вы предоставляете точки фокусировки для пользователя.Эти пункты и объекты помочь разбить монотонный text.

Сканируемая текст является чрезвычайно важным.Предоставляя эти точки фокусировки,, вы делаете тексте чрезвычайно развертываемых.Bolding ключевых строк текста сразу привлекает user’ с глазу и поэтому является очень важным элементом в представлении важных information.

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

7.Организация InformationВерьте или нет, как вы организовать информацию в статью могут усилить читабельности.Пользователи ориентируются с легкостью по содержанию, что правильно организована, потому что информация легче найти.Это поворачивает на вопросы, выходящие за рамки данной статьи, но по-прежнему очень important.

8.Очистите графический ImplementationКаждый текст тело нуждается в своего рода визуальная поддержка, будь то изображения, иконки, графика или иллюстрация.Размещение графики в статье может быть сложной задачей.Достаточное пространство необходимо между графическим и text.

Если графический элемент изображения, а затем чистой граница является хорошей идеей для обеспечения четкого разделения из текста.Границы могут помочь user’ глаза и хороши для добавления стиля к содержимому.Важно, однако, чтобы сохранить границы в содержании просты.Они должны иметь тонкую цветовую палитру и shouldn’ T быть слишком large.

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

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

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

Другой распространенный способ разделить содержание заключается в использовании коробки.Текстовые блоки отлично подходят для разделения связанных контента на одной странице.Они помогают двигаться user’ глаза через сложную компоновку.Ниже приведен пример этого на Pixelmator’ сайт с.Он использует коробки для отдельного содержания в чистом виде.Обратите внимание, как коробки определяются их фоне, а border.

10.Хорошо MarginsВы слышите, люди говорят, что вы должны использовать белыйпространства, но зачем?Белое пространство на самом деле помогает привлечь user’ глаз с текста.Пустое место (пробел) заставляет глаза, чтобы сосредоточиться на тексте.Так пробел будет влиять на поток и читаемость содержания.Поля являются одним из лучших белых элементов пространства и поддерживает текстовые элементы хорошо.Поля по обе стороны заставит use …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров