TipografiaTypography

Esempio di tipografia in HoloLens

Il testo è un elemento importante per la distribuzione di informazioni nell'esperienza dell'app.Text is an important element for delivering information in your app experience. Proprio come per la tipografia su schermi 2D, l'obiettivo è chiarezza e leggibilità.Just like typography on 2D screens, the goal is to be clear and readable. Con l'aspetto tridimensionale della realtà mista, c'è la possibilità di influenzare il testo e l'esperienza utente complessiva in modo ancora più ampio.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.

Quando si parla di tipo in 3D, si tende a pensare a testo 3D estruso e volumetrico.When we talk about type in 3D, we tend to think extruded, volumetric 3D text. Fatta eccezione per alcune progettazioni di logotipi e altre applicazioni limitate, il testo estruso tende a ridurre la leggibilità del testo.Except for some logotype designs and a few other limited applications, extruded text tends to degrade the readability of the text. Anche se stiamo progettando esperienze per 3D, usiamo 2D per il tipo perché è più leggibile e più facile da leggere.Even though we're designing experiences for 3D, we use 2D for the type because it's more legible and easier to read.

In HoloLens, il tipo viene costruito con ologrammi usando la luce basata sul sistema di colori additivi.In HoloLens, type is constructed with holograms using light based on the additive color system. Analogamente ad altri ologrammi, il tipo può essere posizionato nell'ambiente effettivo, dove può essere bloccato e osservato da qualsiasi angolo.Just like other holograms, type can be placed in the actual environment where it can be world locked and observed from any angle. L'effetto di parallasse tra il tipo e l'ambiente aggiunge anche profondità all'esperienza.The parallax effect between the type and the environment also adds depth to the experience.

Tipografia in realtà mistaTypography in mixed reality

Le regole tipografiche in realtà mista non sono diverse da qualsiasi altra posizione.Typographic rules in mixed reality are no different from anywhere else. Il testo nel mondo fisico e nel mondo virtuale deve essere leggibile e leggibile.Text in both the physical world and the virtual world needs to be legible and readable. Il testo potrebbe trovarsi su una parete o sovrapposto a un oggetto fisico.Text could be on a wall or superimposed on a physical object. Potrebbe essere mobile insieme a un'interfaccia utente digitale.It could be floating along with a digital user interface. Indipendentemente dal contesto, si applicano le stesse regole tipografiche per la lettura e il riconoscimento.Whatever the context, we apply the same typographic rules for reading and recognition.

Crea gerarchia chiaraCreate clear hierarchy

Contrasto e gerarchia di compilazione utilizzando dimensioni e pesi diversi per i tipi.Build contrast and hierarchy by using different type sizes and weights. La definizione di una rampa di tipo e la successiva esperienza nell'app offriranno un'esperienza utente ottimale con una gerarchia di informazioni coerenti.Defining a type ramp and following it throughout the app experience will provide a great user experience with consistent information hierarchy.

Esempi di Ramp di tipoType ramp examples
Definire la rampa di tipo e seguirla in tutta l'esperienza dell'appDefine your type ramp and follow it throughout the app experience

Limitare i tipi di carattereLimit your fonts

Evitare di usare più di due famiglie di caratteri diverse in un unico contesto.Avoid using more than two different font families in a single context. Un numero eccessivo di tipi di carattere suddividerà l'armonia e la coerenza dell'esperienza e renderà più difficile l'utilizzo delle informazioni.Too many fonts will break the harmony and consistency of your experience and make it harder to consume information. In HoloLens, poiché le informazioni sono sovrapposte all'ambiente fisico, l'utilizzo di un numero eccessivo di stili dei tipi di carattere comporta un peggioramento dell'esperienza.In HoloLens, since the information is overlaid on top of the physical environment, using too many font styles will degrade the experience. Segoe UI è il tipo di carattere per tutti i progetti digitali Microsoft.Segoe UI is the font for all Microsoft digital designs. Viene usato in modo coerente nella shell della realtà mista di Windows.It's used consistently in the Windows Mixed Reality shell. È possibile scaricare il file del tipo di carattere Segoe UI dalla pagina Windows Design Toolkit.You can download the Segoe UI font file from the Windows design toolkit page.

Ulteriori informazioni sul carattere tipografico Segoe UIMore information about the Segoe UI typeface

Evitare i pesi del carattere sottileAvoid thin font weights

Evitare di usare i pesi per i tipi di carattere chiaro o Semilight per le dimensioni dei tipi in 42 PT perché i tratti verticali sottili si vibrano e peggiorano la leggibilità.Avoid using light or semilight font weights for type sizes under 42 pt because thin vertical strokes will vibrate and degrade legibility. I tipi di carattere moderni con uno spessore del tratto sufficiente funzionano correttamente.Modern fonts with enough stroke thickness work well. Ad esempio, Helvetica e Arial sono leggibili in HoloLens usando pesi regolari o in grassetto.For example, Helvetica and Arial are legible in HoloLens using regular or bold weights.

ColoreColor

In HoloLens, poiché gli ologrammi vengono costruiti con un sistema di luce additiva, il testo bianco è altamente leggibile.In HoloLens, since the holograms are constructed with an additive light system, white text is highly legible. È possibile trovare esempi di testo bianco nel menu Start e nella barra dell'app.You can find examples of white text on the Start menu and the App bar. Anche se il testo bianco funziona bene senza una piastra posteriore in HoloLens, un background fisico complesso potrebbe rendere difficile la lettura del tipo.Even though white text works well without a back plate on HoloLens, a complex physical background could make the type difficult to read. È consigliabile usare testo bianco su un pannello scuro o colorato per migliorare lo stato attivo dell'utente e ridurre al minimo la distrazione da uno sfondo fisico.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.


Si consiglia di usare testo bianco su un pannello posteriore scuro o colorato. Esempi di testo bianco su un pannello posteriore scuro o colorato.We recommend using white text on a dark or colored back plate. Examples of white text on a dark or colored back plate.

Per usare testo scuro, è necessario usare una piastra indietro luminosa per renderla leggibile.To use dark text, you should use a bright back plate to make it readable. Nei sistemi di colori additivi, il nero viene visualizzato come trasparente.In additive color systems, black is displayed as transparent. Ciò significa che non verrà visualizzato il testo nero senza una piastra posteriore colorata.This means you won't see the black text without a colored back plate.

Esempi di bianco su nero e nero su testo biancoExamples of white on black and black on white text
Esempi di bianco su nero e nero su testo biancoExamples of white on black and black on white text

Esempi di testo nero nelle app di sistema-archivio e impostazioniExamples of black text in the system apps - Store and Settings
Esempi di testo nero nelle app di sistema-archivio e impostazioniExamples of black text in the system apps - Store and Settings



Come si può immaginare, i tipi di dimensioni usati in un PC o un Tablet (in genere tra 12-32pt) sono piccoli a una distanza di 2 metri.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. Dipende dalle caratteristiche di ogni tipo di carattere, ma in generale l'angolo di visualizzazione minimo consigliato e l'altezza del tipo di carattere per la leggibilità sono circa 0,35 °-0,4 °/12.21-13.97 mm in base agli studi di ricerca degli utenti.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. È circa 35-40 PT con il fattore di scalabilità introdotto nel testo nella pagina Unity .It's about 35-40 pt with the scaling factor introduced in Text in Unity page.

Per l'interazione near a 0,45 m (45 cm), l'angolo di visualizzazione del tipo di carattere leggibile minimo e l'altezza sono 0.4 °-0,5 °/3.14 – 3,9 mm.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. È circa 9-12 PT con il fattore di scala introdotto nel testo in Unity.It's about 9-12 pt with the scaling factor introduced in Text in Unity.

Contenuto dell'intervallo di interazione near-and-distante nell'intervallo di interazione near and lontanoNear and far interaction range Content at near and far interaction range

Dimensioni minime del carattere leggibiliThe minimum legible font size

DistanzaDistance Angolo di visualizzazioneViewing angle Altezza testoText height Dimensioni carattere * *Font size**
45 cm (distanza di manipolazione diretta)45 cm (direct manipulation distance) 0.4 °-0,5 °0.4°-0.5° 3.14 – 3,9 mm3.14–3.9mm 8,9 – 11.13 PT8.9–11.13pt
2 m2 m 0,35 °-0,4 °0.35°-0.4° 12.21 – 13.97 mm12.21–13.97mm 34.63-39.58 PT34.63-39.58 pt

Dimensioni del carattere facilmente leggibiliThe comfortably legible font size

DistanzaDistance Angolo di visualizzazioneViewing angle Altezza testoText height Dimensioni carattere * *Font size**
45 cm (distanza di manipolazione diretta)45 cm (direct manipulation distance) 0,65 °-0,8 °0.65°-0.8° 5.1-6,3 mm5.1-6.3 mm 14.47-17,8 PT14.47-17.8 pt
2 m2 m 0.6 °-0,75 °0.6°-0.75° 20,9-26.2 mm20.9-26.2 mm 59.4-74.2 PT59.4-74.2 pt

Segoe UI (il tipo di carattere predefinito per Windows) funziona correttamente nella maggior parte dei casi.Segoe UI (the default font for Windows) works well in most cases. Evitare di usare famiglie di caratteri chiaro o semichiaro in piccole dimensioni poiché i tratti verticali sottili vibrano e diminuiscono la leggibilità.Avoid using light or semi light font families in small size since thin vertical strokes will vibrate and it will degrade the legibility. I tipi di carattere moderni con uno spessore del tratto sufficiente funzionano correttamente.Modern fonts with enough stroke thickness work well. Ad esempio, Helvetica e Arial sembrano splendidi e sono leggibili in HoloLens con pesi regolari o in grassetto.For example, Helvetica and Arial look gorgeous and are legible in HoloLens with regular or bold weights.

Per informazioni più dettagliate sul calcolo delle dimensioni del testo in Unity, vedere il testo in UnityFor more detailed information about text size calculation in Unity, refer to Text in Unity

Visualizzazione angolo, angolo e altezza del testoViewing Angle Viewing distance, angle, and text height



RisorseResources

Tipi di carattere SegoeSegoe fonts

(File zip)(Zip file)

Tipo di carattere HoloLensHoloLens font

(File zip)(Zip file)

Image: il tipo di carattere HoloLens fornisce i glifi dei simboli usati nella realtà mista di Windows.Image: The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality.

Il tipo di carattere HoloLens fornisce i glifi dei simboli usati nella realtà mista di Windows



Vedere ancheSee also