Как мы совершенствуем наши методы Адаптивный веб-дизайн, мы все больше ориентируется на measure (другого слова для “длины строки»), и его отношения к тому, как люди читают .
Популяризация «идеального измерения” привела к советам таких как “. Увеличить размер шрифта для больших экранов и уменьшить размер шрифта для небольших экранов” В то время как хорошая мера ведет к улучшению опыт чтения, это только одно правило для хорошей типографии.Еще одно правило заключается в поддержании удобный размер шрифта .
Как люди Read
Люди читать онлайн текст, который послужит свои собственные потребности: найти информацию, которую они ищут, чтобы найти новые идеи и подтвердить свои представления о жизни .
Люди читают в трех Ways
В 2006 году группа Nielsen Norman выпустили изображения карт теплоотдачи от глаз слежения исследований.В районах, где люди смотрели на наиболее при чтении красные участки с меньшим количеством просмотров желтые, и наименее смотрел районы синий.Как вы можете видеть ниже, красные и желтые области образуют три варианта с F-образным рисунком.Эти изменения не удивительно, потому что люди читают в трех различных способов .
Люди читают casually, скользя по тексту, чтение слов и предложений здесь и там, чтобы получить представление о содержании.Тепловая карта ниже показывает движения глаз кто-то случайно, читая о продукте.Читатель провел время, смотря на изображение продукта, читая первые пару фраз, то сканирование через маркированного списка .
1
Nielsen Norman Group исследовали F-образный шаблон для случайного чтения в 2006 году ( Просмотр большой version 2 )
Люди также сканировать с purpose, прыгая от раздела к разделу, ищу определенной части информации.Они могли бы только читать слово или первую пару символов слова, поскольку они просматривают на экране.Тепловая карта ниже показывает движения глаз кто-то сканирование результаты поиска Google с целью.Человек более медленно прочитал первые два результата.Тогда, их глаза прыгнул от раздела к разделу, глядя на срок поиска.Таким образом, мы не видим сильный вертикальный ход вдоль левого края текста .
3
Nielsen Norman Group исследовали F-образный шаблон для целенаправленного сканирования в 2006 году ( Просмотр большой version 4 )
Наконец, люди читают в занимается manner.Когда они находят статью или сообщение в блоге они заинтересованы в, они будут замедляться и читать весь текст, возможно, даже не входя в транс, как государство.Тепловая карта ниже показывает движения глаз человек, читающий в сцепленном образом.Тон более продолжительным.Существует более красным (это означает, больше времени тратится на чтение) и менее прыжки по странице.Когда интенсивность чтения сократилось, потому что они потеряли интерес (корпоративный “О нас” страница не может быть совмещена с их интересами), их глаза продолжали вдоль левого края текста .
5
Nielsen Norman Group исследовали F-образный рисунок для чтения в сцепленном образом в 2006 году ( Просмотр большой version 6 )
Чтение является комплекс Process
Мы знаем, что люди читают тремя различными способами, но давайте посмотрим более внимательно на то, как люди читают — как F-образные модели сформировались .
Мы знаем, что люди.Не.Читать.Каждый.Индивидуальный.Слово.Вместо этого, они используют свои фовеальных (или центральный) видение, чтобы сосредоточиться на слове, при использовании их периферийное зрение, чтобы найти следующую точку для фокусировки .
Люди не читают каждое слово в отдельности .
Люди используют их фовеальных (центральный) и периферическое зрение для чтения.
Мы также знаем, что люди не зацикливаться на каждом слове, но, как правило, чтобы пропустить слова (их глаза занимают мало прыжки, под названием “саккады”) и заполнить в остальных.Это особенно верно в отношении тех, кто читал случайно или сканирования с целью .
Люди пропустить слова и заполнить в остальных .
Наконец, мы знаем, что читатели ожидают следующую строку при перемещении глаза горизонтально вдоль линии;Таким образом, их глаза тянется вниз на левый край текста.Это постоянная борьба между горизонтальной и вертикальной движение вносит свой вклад в F-образных моделей чтения .
Постоянная борьба между горизонтальными и вертикальными результатов движения глаз в F-образных моделей .
Длина линии (мера) и по Reading
Типографы писали об отношениях между горизонтальной и вертикальной MOTION EYE в течение почти столетия.В 1928 году Ян Tschichold уволен по центру текст и выступает за выравниванием по левому краю текста.Он утверждал, что это было бы помочь читателям, предоставляя согласованный налево (вертикально) край для глаз, чтобы вернуться к после окончания каждого (по горизонтали) строки .
Идеально Мера: 45 до 75 Characters
У нас есть несколько «правил» для облегчения горизонтальные движения чтение, одним из которых является установить текст по разумной мерой.Как писал Джеймс Крейг в своей книге Проектирование С Type (впервые опубликована в 1971 году, в настоящее время его пятое издание):
Чтение длинную линию типа вызывает усталость: читатель должен двигать головой в конце каждой строки и поиск для начала следующей строки … Слишком короткий линия разбивает слова или фразы, которые, как правило, читают как единое целое..
Если случайный читатель устает от чтения длинного горизонтальную линию, то они, скорее всего, обезжиренное левый край текста.Если заниматься читатель устает читать длинной горизонтальной линии, то они, скорее всего, случайно прочитал ту же линию текста дважды (явление, известное как “удвоение”) .
65 символов (в 2,5 раза латинского алфавита) часто называют в качестве идеального меры.Производные от этого числа идеальный диапазон, что все дизайнеры должны стремиться к: от 45 до 75 символов (включая пробелы и знаки препинания) в строке для печати.Многие веб-дизайнеры (включая меня), применяются этого правила непосредственно в Интернете.Я нашел, однако, что мы можем надежно расширить диапазон от 45 до 85 символов (включая пробелы и знаки препинания) в строке для веб-страниц .
Измерение и веб-Type
Веб-дизайнеры начали принимать разумные меры для текста.Ресурсы предостаточно.Ранние произведения включают более поэтический подход Марк Болтон делу типографии, которую он называет “зная ваш висячей пунктуации от вашего длинное тире” (“ Пять простых шагов, чтобы лучше Typography 15 7 “).Поздних работах, включают более технический подход Гарри Робертса в типографии (« Техническая веб-типографики: Руководящие принципы и Techniques 8 “) .
Последняя (и, смею сказать, захватывающий) разработка по мере?Его роль в Адаптивный веб-дизайн.Другие дизайнеры используют длину строки, чтобы помочь определить точки разрыва на быстродействие структуры!Крис Койер недавно разработал свою букмарклет длины тестовой линии для того, чтобы помочь отзывчивые веб-дизайнеры держать глаза на их измерения (“ закладка для раскрашивания текст между 45 и 75 Characters 9 “) .
Но хорошая мера является только одно правило для установки читаемый текст .
Размер шрифта и Reading
Хороший, удобный размер шрифта также необходимо для установки читаемый текст.Это правило не новость.Но, учитывая количество отзывчивых сайтов, что там сделать текст слишком маленьким или слишком большим для того, чтобы достичь идеального меру, правило имеет повторение .
Статических веб-страниц и шрифтов Size
Одним из преимуществ гибкой структуры полотна для чтения текста — текст, который люди на портативных устройствах не должны зажать и увеличить изображение, чтобы прочитать.Если структура является статической (например, страницы на две колонки как показано ниже), то идеально подходит мера не будет делать трюк.Текст будет просто слишком мал, чтобы читать на небольшом устройстве, таком как телефон .
Слева: основная колонка имеет хороший показатель (от 45 до 85 символов будут выделены желтым цветом).Но без отзывчивым структуры, текст слишком мал, чтобы читать на небольшое устройство без щипать и масштабирования.Справа: размер шрифта (13 пикселей Verdana для левой колонки, 18 пикселей Грузия для внедрения и 16 пикселя Грузии за статью) удобно читать на ноутбук .
Маленькие Приборы и шрифта Size
При проектировании отзывчивый сайт, начните с удобным размером шрифта и идеальной меры, чтобы помочь определить точки разрыва.Но когда приходит время (как это всегда делает), позвольте идеальным мера перейти .
Текст уже выглядит меньше на портативных устройствах, чем на больших устройств.Это нормально, потому что люди, как правило, проводить небольшие устройства ближе при чтении.Современная популярная мудрость, чтобы сохранить эту меру дальнейшего сокращения размера шрифта для удерживаемых портативных устройств.На практике, сохраняя комфортный размер шрифта как можно больше наилучшим образом сохраняет читаемость.Результат будет меньше, чем идеал мера, но для большего удобства чтения .
Реагировать структура не поможет, если мелкий текст на по …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров