Шрифты
Примечание
Это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть руководства по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.
Пользователи взаимодействуют с текстом больше, чем с любым другим элементом в Microsoft Windows. Segoe UI (произносится "SEE-go") — системный шрифт Windows. Стандартный размер шрифта увеличен до 9 пунктов.
Шрифт Segoe UI.
Segoe UI и Segoe — это не один и тот же шрифт. Segoe UI — это шрифт Windows, предназначенный для текстовых строк пользовательского интерфейса. Segoe — это фирменная символика, используемая корпорацией Майкрософт и ее партнерами для производства материалов для печати и рекламы.
Segoe UI — это доступный, открытый и понятный шрифт, и в результате он лучше удобочитаем, чем Tahoma, Microsoft Sans Serif и Arial. Он имеет характеристики гуманистического без засечек: разная ширина его прописных букв (узкие E и S, например, по сравнению с Helvetica, где ширина более похожа, довольно широкая); подчеркивания и буквы нижнего регистра; и его истинный курсив (а не "косый" или наклонной роман, как многие промышленные без засечек). Шрифт предназначен для того, чтобы обеспечить одинаковый визуальный эффект на экране и в печати. Он был разработан, чтобы быть гуманистом без засечек без сильного характера или отвлекающих причудливости.
Пользовательский интерфейс Segoe оптимизирован для ClearType, который включен по умолчанию в Windows. Благодаря включенной функции ClearType пользовательский интерфейс Segoe представляет собой элегантный и удобочитаемый шрифт. Без включения ClearType пользовательский интерфейс Segoe является лишь незначительно приемлемым. Этот фактор определяет, когда следует использовать пользовательский интерфейс Segoe.
Пользовательский интерфейс Segoe включает латинские, греческие, кириллические и арабские символы. Существуют новые шрифты, оптимизированные для ClearType, созданные для других наборов символов и использования. К ним относятся Meiryo для японского языка, Malgun Gothic для корейского языка, Microsoft JhengHei для китайского языка (традиционное письмо), Microsoft YaHei для китайского языка (упрощенное письмо), Gisha для иврита и Leelawadee для тайского языка, а также шрифты ClearType Collection, предназначенные для использования в документах.
Meiryo включает латинские символы на основе Вердана. Malgun Gothic, Microsoft JhengHei и Microsoft YaHei используют настраиваемый пользовательский интерфейс Segoe. Использование версий этих шрифтов курсивом не рекомендуется. Malgun Gothic, Microsoft JhengHei и Microsoft YaHei предоставляются только в регулярных и смелых стилях. Это означает, что курсив синтезируется наклонными стилями. Хотя Meiryo включает в себя курсив и полужирный курсив, эти стили применяются только к латинским символам, японские символы остаются вертикально, когда применяется курсив.
Вариант Meiryo, называемый пользовательский интерфейс Meiryo, является предпочтительным в командном пользовательском интерфейсе ленты .
Для поддержки языковых стандартов, использующих эти кодировки, пользовательский интерфейс Segoe заменяется правильными шрифтами в зависимости от каждого языкового стандарта в процессе локализации .
Чтобы лицензировать Segoe UI и другие шрифты Майкрософт для распространения с помощью программы на основе Windows, обратитесь в Monotype.
Примечание: Рекомендации по стилю, тону и тексту пользовательского интерфейса представлены в отдельных статьях.
Принципы проектирования
Шрифты, шрифты, размеры точек и атрибуты
В традиционной типографии шрифт описывает сочетание шрифта, размера точек и атрибутов. Шрифт — это внешний вид шрифта. Segoe UI, Tahoma, Verdana и Arial являются шрифтами. Размер точки — это размер шрифта, измеряемый от верхней части нисходящих до нижней части нижней части шрифта, за вычетом внутреннего интервала (который называется начальным). Точка составляет примерно 1/72 дюйма. Наконец, шрифт может иметь атрибуты полужирного или курсивного.
В неофициальном режиме люди часто используют шрифт вместо шрифта, как показано в этой статье, но технически Segoe UI является шрифтом, а не шрифтом. Каждое сочетание атрибутов является уникальным шрифтом (например, 9 пунктов Segoe UI regular, 10 пунктов Segoe UI полужирным шрифтом и т. д.).
Засечка и без засечек
Шрифты: засечка или без засечек. Засечка — это небольшие повороты, которые часто завершают росчерки букв в шрифте. Шрифт без засечек не содержит засечек.
Читатели обычно предпочитают использовать шрифты-засеки, используемые в качестве основного текста в документе. Засечка обеспечивает ощущение формальности и элегантности документа. Для текста пользовательского интерфейса потребность в чистом внешнем виде и более низком разрешении мониторов компьютера делает шрифты без засечек лучшим выбором.
Контраст
Текст проще всего читать при большой разнице между яркостью текста и фоном. Черный текст на белом фоне дает максимальную контрастность темный текст на очень светлом фоне также может обеспечить высокую контрастность. Это сочетание лучше всего подходит для основных поверхностей пользовательского интерфейса.
Светлый текст на темном фоне обеспечивает хорошую контрастность, но не так хорош, как темный текст на светлом фоне. Это сочетание хорошо подходит для дополнительных поверхностей пользовательского интерфейса, таких как Обозреватель области задач, которые необходимо свести к основной поверхности пользовательского интерфейса.
Если вы хотите, чтобы пользователи читали ваш текст, используйте темный текст на светлом фоне.
Возможности
Текст может использовать следующие возможности , чтобы указать, как он используется:
- Указатель. Указатель I-bar ("выделение текста") указывает, что текст можно выбрать, тогда как указатель стрелки влево ("обычный выбор") указывает, что текст не является.
- Курсор. Если текст имеет фокус ввода, курсор — это мигающая вертикальная полоса, указывающая точку вставки или выделения в выделенном или редактируемом тексте.
- Коробка. Поле вокруг текста, указывающего, что он может быть редактируемым. Чтобы уменьшить вес презентации, поле может отображаться динамически только при выделении редактируемого текста.
- Цвет переднего плана. Светло-серый цвет означает, что текст отключен. Не серые цвета, особенно синие и фиолетовые, указывают на то, что текст является ссылкой.
- Цвет фона. Светло-серый фон слабо говорит о том, что текст доступен только для чтения, но на практике текст, доступный только для чтения, может иметь любой цвет фона.
Эти возможности объединяются для следующих значений:
- Редактируемый параметр. Текст, отображаемый в поле, с указателем на выделение текста, курсором (на фокусе ввода) и обычно на белом фоне.
- Только для чтения, можно выбрать. Текст с указателем выбора и курсором (на фокусе ввода).
- Только для чтения, недоступен для выбора. Текст с указателем со стрелкой.
- Отключено. Светло-серый текст со стрелкой, иногда на сером фоне.
Текст, доступный только для чтения, традиционно имеет серый фон, но серый фон не требуется. На самом деле серый фон может быть нежелательным, особенно для больших блоков текста, так как он предполагает, что текст отключен и запрещает чтение.
Специальные возможности и системный шрифт, размеры и цвета
Рекомендации по обеспечению доступа к тексту для пользователей с ограниченными возможностями или ограниченными возможностями можно свести к одному простому правилу: соблюдайте параметры пользователя, всегда используя системный шрифт, размеры и цвета.
Если вы делаете только одно...
Учитывайте параметры пользователя, всегда используя системный шрифт, размеры и цвета.
Разработчики: Из кода можно определить свойства системного шрифта (включая его размер) с помощью функции API GetThemeFont. Системные цвета можно определить с помощью функции API GetThemeSysColor.
Так как вы не можете делать никаких предположений о параметрах темы системы пользователей, необходимо:
- Всегда основывайте цвета шрифта и фона на основе цветов системной темы. Никогда не делайте собственные цвета на основе фиксированных значений RGB (красный, зеленый, синий).
- Всегда сопоставляйте системные цвета текста с соответствующими цветами фона. Например, если выбрать COLOR_STATICTEXT для цвета текста, необходимо также выбрать COLOR_STATIC для цвета фона.
- Всегда создавайте новые шрифты на основе вариантов системного шрифта пропорционального размера. Учитывая системные метрики шрифта, можно создавать полужирные, курсивные, большие и небольшие варианты.
Простой способ убедиться, что программа учитывает параметры пользователей, — это проверить использование другого размера шрифта и цветовой схемы с высокой контрастностью. Весь текст должен правильно изменяться и отображаться в выбранной цветовой схеме.
Варианты использования
Текст имеет несколько шаблонов использования:
| Использование | Описание |
|---|---|
|
Текст в заголовке Текст в заголовке окна. |
|
|
Основные инструкции Текст, объясняющий действия на странице, окне или диалоговом окне. |
|
|
Дополнительные инструкции Дополнительный текст, объясняющий действия на странице, окне или диалоговом окне. |
|
|
Обычный текст Обычный (только для чтения) текст, отображаемый в пользовательском интерфейсе. |
|
|
Выделенный текст Полужирный текст используется для упрощения анализа текста и привлечения внимания пользователей к тексту. Курсив используется для буквального обозначения текста (а не кавычек) и выделения конкретных слов. |
|
|
Редактируемый текст Текст, который пользователи могут редактировать, отображается в поле. Чтобы уменьшить вес презентации, поле может отображаться только при выделении редактируемого текста. |
|
|
Отключенный текст Текст, который не применяется к текущему контексту, например метки для отключенных элементов управления. отключенный текст указывает, что пользователи (обычно) не должны беспокоиться о чтении текста. |
|
|
Ссылки Текст, используемый для перехода к другой странице, окну или разделу справки или запуска команды. |
|
|
Заголовок группы Текст, используемый для группировки элементов в представлении списка. |
|
|
Имя файла Текст имени файла (только в представлении содержимого). |
|
|
Текст документа Текст, используемый в документах (в отличие от текста пользовательского интерфейса). |
|
|
Заголовки документов Текст, используемый в качестве заголовка в документе. |
|
Рекомендации
Шрифты и цвета
- Следующие шрифты и цвета используются по умолчанию для Windows Vista и Windows 7.
| Шаблон | Символ темы | Шрифт, цвет |
|---|---|---|
|
|
CaptionFont |
9 pt. black (No 000000) Segoe UI |
|
|
MainInstruction |
12 pt. blue (#003399) Segoe UI |
|
|
Инструкция |
9 pt. black (No 000000) Segoe UI |
|
|
BodyText |
9 pt. black (No 000000) Segoe UI |
|
|
BodyText |
9 pt. black (No 000000) Segoe UI, полужирным шрифтом или курсивом |
|
|
BodyText |
9 пт. черный (No 000000) Segoe UI, в поле |
|
|
Выключено |
9 пт. темно-серый (#323232) Segoe UI |
|
|
HyperLinkText |
9 пт. синий (#0066CC) Segoe UI |
|
|
Горячий |
9 пт. светло-синий (#3399FF) Segoe UI |
|
|
11 pt. blue (#003399) Segoe UI |
|
|
|
11 pt. black (No 000000) Segoe UI |
|
|
|
(нет) |
9 pt. black (No 000000) Calibri |
|
|
(нет) |
17 пт. черный (No 000000) Calibri |
- Выберите шрифты и оптимизируйте макеты окон на основе технологии пользовательского интерфейса и целевой версии Windows:
| Технология пользовательского интерфейса | Целевая версия Windows | Шрифты для использования и оптимизации |
|---|---|---|
| Windows Presentation Foundation |
Все |
Используйте части темы WPF. |
| Win32 или WinForms |
Windows Vista или более поздней версии |
Используйте соответствующий шрифт segoe ui. |
| Расширяемые компоненты или предварительные версии Windows Vista |
Для windows XP и Windows 2000 используйте 8-точечный псевдонаборт MS Shell Dlg 2, который сопоставляется с Tahoma. Для более ранних версий Windows используйте 8-точечный псевдонаборт MS Shell Dlg, который сопоставляется с Tahoma в Windows 2000 и Windows XP, а также с MS Без засечек в Windows 95, Windows 98, Windows Millennium Edition и Windows NT 4.0. |
-
Разработчики:
- Для элементов, использующих фиксированный макет (например, шаблоны диалогов Windows и WinForms), жестко закодируете соответствующий шрифт из предыдущей таблицы.
- Для элементов, использующих динамический макет (например, Windows Presentation Foundation), используйте шрифты темы. Используйте API темы, такие как DrawThemeText, для рисования текста на основе символа темы. Убедитесь, что у вас есть альтернатива, основанная на системных метриках, если служба тем не запущена.
- В пользовательском интерфейсе Segoe используйте размер шрифта 9 точек или больше. Шрифт Segoe UI оптимизирован для этих размеров, поэтому не используйте меньшие размеры.
- Всегда сопоставляйте системные цвета текста с соответствующими цветами фона. Например, если выбрать COLOR_STATICTEXT для цвета текста, необходимо также выбрать COLOR_STATIC для цвета фона.
- Всегда создавайте новые шрифты на основе вариантов системного шрифта пропорционального размера. Учитывая системные метрики шрифтов, можно создавать полужирные, курсивные, большие и меньшие варианты.
- Отображение больших блоков текста только для чтения (например, условий лицензии) на светлом фоне, а не на сером фоне. Серый фон указывает на то, что текст отключен и препятствует чтению.
- Рассмотрите максимальную длину строки в 65 символов , чтобы упростить чтение текста. (Символы включают буквы, знаки препинания и пробелы.)
Атрибуты
- Большинство текста пользовательского интерфейса должны быть простыми без атрибутов. Атрибуты можно использовать следующим образом:
- Полужирный. Используйте в подписях элементов управления, чтобы упростить анализ текста. Используйте экономно, чтобы привлечь внимание к тексту, который пользователи должны читать. Использование слишком много смелых уменьшает его влияние.
- Курсив. Используйте , чтобы ссылаться на текст буквально, а не в кавычках. Используйте экономно, чтобы подчеркнуть конкретные слова. Используйте для запросов в текстовых полях и редактируемых раскрывающихся списках.
- Полужирный курсив. Не используйте.
- Подчеркнуть. Не используйте, кроме ссылок. Вместо этого используйте курсив для выделения.
- Не все шрифты поддерживают полужирный и курсивный шрифт, поэтому они никогда не должны иметь решающее значение для понимания текста.