Шрифтовое оформлениеTypography

Пример оформления в HoloLens

Текст — важный элемент для доставки информации в приложении.Text is an important element for delivering information in your app experience. Как и в случае с оформлением на двухмерных экранах, ваша цель — предоставить понятную и удобочитаемую информацию.Just like typography on 2D screens, the goal is to be clear and readable. С трехмерным аспектом смешанной реальности есть возможность повлиять на текст и общее взаимодействие с пользователем в большей степени.With the three-dimensional aspect of mixed reality, there's an opportunity to affect the text and the overall user experience in an even greater way.

Когда речь идет о типе в 3D, мы будем думать вытягивание, объемные трехмерный текст.When we talk about type in 3D, we tend to think extruded, volumetric 3D text. За исключением некоторых Logotype и некоторых других ограниченных приложений, вытягивание текста, как правило, понизить удобочитаемость текста.Except for some logotype designs and a few other limited applications, extruded text tends to degrade the readability of the text. Несмотря на то, что мы создаем опыт для трехмерной графики, мы используем 2D для типа, так как он более нагляден и проще в чтении.Even though we're designing experiences for 3D, we use 2D for the type because it's more legible and easier to read.

В HoloLens тип создается с голограммами с использованием освещения на основе аддитивной цветовой системы.In HoloLens, type is constructed with holograms using light based on the additive color system. Как и другие голограммы, тип можно поместить в фактическую среду, где он может быть заблокирован и наблюдаться с любого угла.Just like other holograms, type can be placed in the actual environment where it can be world locked and observed from any angle. Воздействие фокусировки между типом и средой также увеличивает глубину работы.The parallax effect between the type and the environment also adds depth to the experience.

Оформление в смешанной реальностиTypography in mixed reality

Типографские правила в смешанной реальности не отличаются от других мест.Typographic rules in mixed reality are no different from anywhere else. Текст как в физическом мире, так и в виртуальном мире должен быть читаемым и читаемым.Text in both the physical world and the virtual world needs to be legible and readable. Текст может находиться на стене или накладываться на физический объект.Text could be on a wall or superimposed on a physical object. Он может быть плавающим и цифровым пользовательским интерфейсом.It could be floating along with a digital user interface. Независимо от контекста мы применяем те же типографские правила для чтения и распознавания.Whatever the context, we apply the same typographic rules for reading and recognition.

Создать очистку иерархииCreate clear hierarchy

Контрастность и иерархия построения с использованием различных размеров и весов типов.Build contrast and hierarchy by using different type sizes and weights. Определение пандуса типа и его последующее применение в процессе работы приложения обеспечит удобство работы пользователя с согласованной иерархией информации.Defining a type ramp and following it throughout the app experience will provide a great user experience with consistent information hierarchy.

Примеры пандуса типовType ramp examples
Определите шкалу типа и следуйте ей в процессе работы приложения.Define your type ramp and follow it throughout the app experience

Ограничение шрифтовLimit your fonts

Старайтесь не использовать более двух различных семейств шрифтов в одном контексте.Avoid using more than two different font families in a single context. Слишком большое число шрифтов приведет к нарушению удобства и согласованности вашего опыта и значительно затрудняет использование информации.Too many fonts will break the harmony and consistency of your experience and make it harder to consume information. В HoloLens, поскольку информация перемещается поверх физической среды, использование слишком большого количества стилей шрифта приведет к ухудшению работы.In HoloLens, since the information is overlaid on top of the physical environment, using too many font styles will degrade the experience. Segoe UI — это шрифт для всех цифровых дизайнов Майкрософт.Segoe UI is the font for all Microsoft digital designs. Он постоянно используется в оболочке Windows Mixed Reality.It's used consistently in the Windows Mixed Reality shell. Файл шрифта Segoe UI можно загрузить на странице Windows Design Toolkit.You can download the Segoe UI font file from the Windows design toolkit page.

Дополнительные сведения о гарнитуре Segoe UIMore information about the Segoe UI typeface

Избегайте тонких весов шрифтовAvoid thin font weights

Избегайте использования плотности шрифтов светлого или Semilight для размеров типов в 42 пт, так как тонкие вертикальные штрихи будут вибрировало и ухудшить читаемость.Avoid using light or semilight font weights for type sizes under 42 pt because thin vertical strokes will vibrate and degrade legibility. Современные шрифты с достаточной толщиной обводки хорошо работают.Modern fonts with enough stroke thickness work well. Например, шрифты Helvetica и Arial разборчиво работают в HoloLens с использованием обычных или полужирных весов.For example, Helvetica and Arial are legible in HoloLens using regular or bold weights.

ColorColor

В HoloLens, так как голограммы созданы с применением аддитивной системы освещения, белый текст очень разборчиво.In HoloLens, since the holograms are constructed with an additive light system, white text is highly legible. Примеры белого текста можно найти в меню "Пуск" и на панели приложений.You can find examples of white text on the Start menu and the App bar. Хотя белый текст хорошо работает без резервной формы на HoloLens, сложный физический фон может усложнить чтение типа.Even though white text works well without a back plate on HoloLens, a complex physical background could make the type difficult to read. Мы рекомендуем использовать белый текст на темной или цветной печатной панели, чтобы улучшить фокус пользователя и уменьшить вычитание из физического фона.We recommend using white text on a dark or colored back plate to improve the user's focus and minimize the distraction from a physical background.


Мы рекомендуем использовать белый текст на темной или цветной печатной панели. Примеры белого текста на темной или цветной печатной панели.We recommend using white text on a dark or colored back plate. Examples of white text on a dark or colored back plate.

Чтобы использовать темный текст, следует использовать ярко-печатную пластину, чтобы сделать ее доступной для чтения.To use dark text, you should use a bright back plate to make it readable. В аддитивных цветовых системах черный отображается как прозрачный.In additive color systems, black is displayed as transparent. Это означает, что черный текст не будет отображаться без цветной печатной панели.This means you won't see the black text without a colored back plate.

Примеры белого цвета на черном и черном фоне белого текстаExamples of white on black and black on white text
Примеры белого цвета на черном и черном фоне белого текстаExamples of white on black and black on white text

Примеры черного текста в приложениях для хранения и настройкиExamples of black text in the system apps - Store and Settings
Примеры черного текста в приложениях для хранения и настройкиExamples of black text in the system apps - Store and Settings



Как можно догадаться, размеры типов, используемые на ПК или планшетном устройстве (обычно от 12 – отступ), выглядят небольшими на расстоянии 2 метра.As you can expect, type sizes that we use on a PC or a tablet device (typically between 12–32pt) look small at a distance of 2 meters. Это зависит от характеристик каждого шрифта, но в общем случае рекомендуемый минимальный угол просмотра и высота шрифта для читаемости находятся вокруг 0,35 °-0,4 °/12.21-13.97 мм на основе наших исследований исследования пользователей.It depends on the characteristics of each font, but in general the recommended minimum viewing angle and the font height for legibility are around 0.35°-0.4°/12.21-13.97 mm based on our user research studies. Это примерно 35-40 пт с коэффициентом масштабирования, представленным в тексте на странице Unity .It's about 35-40 pt with the scaling factor introduced in Text in Unity page.

Для близкого взаимодействия в 0,45 м (45 cm) минимальным углом просмотра и высотой шрифта является 0,4 °-0,5 °/3,14 – 3,9 мм.For the near interaction at 0.45 m(45 cm), the minimum legible font's viewing angle and the height are 0.4°-0.5° / 3.14–3.9mm. Это примерно 9-12 пт с коэффициентом масштабирования, представленным в тексте в Unity.It's about 9-12 pt with the scaling factor introduced in Text in Unity.

Содержимое диапазона практически и дальнего взаимодействия в пределах диапазона практически и дальнего взаимодействияNear and far interaction range Content at near and far interaction range

Минимальный размер неудобочитаемого шрифтаThe minimum legible font size

расстояние;Distance Угол просмотраViewing angle Высота текстаText height Размер шрифта * *Font size**
45 cm (расстояние прямого манипулирования)45 cm (direct manipulation distance) 0,4 ° — 0,5 °0.4°-0.5° 3,14 — 3,9 мм3.14–3.9mm 8.9 — 11.13 PT8.9–11.13pt
2 м2 m 0,35 °-0,4 °0.35°-0.4° 12.21 – 13.97 мм12.21–13.97mm 34.63-39.58 PT34.63-39.58 pt

Удобно, чтобы размер шрифта разборчивоThe comfortably legible font size

расстояние;Distance Угол просмотраViewing angle Высота текстаText height Размер шрифта * *Font size**
45 cm (расстояние прямого манипулирования)45 cm (direct manipulation distance) 0.65 °-0,8 °0.65°-0.8° 5.1 – 6.3 мм5.1-6.3 mm 14.47-17.8 PT14.47-17.8 pt
2 м2 m 0,6 °-0,75 °0.6°-0.75° 20,9-26,2 мм20.9-26.2 mm 59.4-74.2 pt59.4-74.2 pt

Segoe UI (шрифт по умолчанию для Windows) хорошо работает в большинстве случаев.Segoe UI (the default font for Windows) works well in most cases. Избегайте использования светлого или светлого семейства шрифтов в небольшом размере, так как тонкие вертикальные штрихи будут вибрировало, и это приведет к ухудшению читаемости.Avoid using light or semi light font families in small size since thin vertical strokes will vibrate and it will degrade the legibility. Современные шрифты с достаточной толщиной обводки хорошо работают.Modern fonts with enough stroke thickness work well. Например, Helvetica и Arial выглядят прекрасные и являются выразительными в HoloLens с обычными или полужирными плотностьми.For example, Helvetica and Arial look gorgeous and are legible in HoloLens with regular or bold weights.

Более подробные сведения о вычислении размера текста в Unity см. в разделе текст в Unity .For more detailed information about text size calculation in Unity, refer to Text in Unity

Просмотр угла просмотра расстояния, угла и высоты текстаViewing Angle Viewing distance, angle, and text height



РесурсыResources

Шрифты SegoeSegoe fonts

(ZIP-файл)(Zip file)

Шрифт HoloLensHoloLens font

(ZIP-файл)(Zip file)

Изображение. шрифт HoloLens дает вам глифы символов, используемые в Windows Mixed Reality.Image: The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality.

Шрифт HoloLens предоставляет глифы символов, используемые в Windows Mixed Reality



См. также разделSee also