Czcionki

Użytkownicy korzystają z tekstu więcej niż z innym elementem w systemie Microsoft Windows. Segoe UI (wymawiane "SEE-go") to czcionka systemowa systemu Windows. Standardowy rozmiar czcionki został zwiększony do 9 punktów.

Czcionka interfejsu użytkownika Segoe.

Interfejs użytkownika Segoe i Segoe nie są tą samą czcionką. Segoe UI to czcionka systemu Windows przeznaczona dla ciągów tekstowych interfejsu użytkownika. Segoe to czcionka marki używana przez firmę Microsoft i partnerów do produkcji materiałów do drukowania i reklam.

Interfejs użytkownika Segoe to przystępna, otwarta i przyjazna czcionka, a w rezultacie ma lepszą czytelność niż Tahoma, Microsoft Sans Serif i Arial. Ma cechy humanistycznej serii sans: różne szerokości swoich stolic (wąskie E i S, na przykład, w porównaniu z Helvetica, gdzie szerokości są bardziej podobne, dość szerokie); podkreślenia i formy liter z małymi literami; i jego prawdziwa kursywa (zamiast "ukośny" lub skośny roman, jak wiele przemysłowych sans serifs). Typface ma na celu nadanie tego samego efektu wizualnego na ekranie i wydruku. Został zaprojektowany, aby być humanistą sans serif bez silnego charakteru lub rozpraszające dziwactwa.

Interfejs użytkownika Segoe jest zoptymalizowany pod kątem funkcji ClearType, która jest domyślnie włączona w systemie Windows. Po włączeniu funkcji ClearType interfejs użytkownika Segoe to elegancka, czytelna czcionka. Bez włączonego funkcji ClearType interfejs użytkownika Segoe jest tylko nieznacznie akceptowalny. Ten czynnik określa, kiedy należy użyć interfejsu użytkownika Segoe.

Interfejs użytkownika Segoe zawiera znaki łacińskie, greckie, cyrylica i arabskie. Istnieją nowe czcionki, zoptymalizowane również pod kątem funkcji ClearType, utworzone dla innych zestawów znaków i ich zastosowań. Należą do nich Meiryo dla japońskich, Malgun Gothic dla Koreańskich, Microsoft JhengHei for Chinese (tradycyjny), Microsoft YaHei for Chinese (uproszczony), Gisha dla hebrajskiego i Leelawadee dla języka tajskiego oraz czcionki ClearType Collection przeznaczone do użytku dokumentów.

Meiryo zawiera znaki łacińskie oparte na Verdana. Malgun Gothic, Microsoft JhengHei i Microsoft YaHei używają dostosowanego interfejsu użytkownika Segoe. Nie zaleca się używania wersji kursywy tych czcionek. Malgun Gothic, Microsoft JhengHei i Microsoft YaHei są dostarczane tylko w regularnych i odważnych stylach, co oznacza, że kursywa są syntetyzowane przez pochylanie stylów wyprostowanych. Chociaż meiryo zawiera prawdziwą kursywę i kursywę, style te mają zastosowanie tylko do znaków łacińskich, które znaki japońskie pozostają w porządku po zastosowaniu stylu kursywy.

Odmiana interfejsu użytkownika Meiryo o nazwie Meiryo jest preferowana na wstążkach interfejsie użytkownika polecenia.

Aby obsługiwać ustawienia regionalne przy użyciu tych zestawów znaków, interfejs użytkownika Segoe jest zastępowany poprawnymi czcionkami w zależności od ustawień regionalnych podczas procesu lokalizacji.

Aby licencjonować interfejs użytkownika Segoe i inne czcionki firmy Microsoft do dystrybucji za pomocą programu opartego na systemie Windows, skontaktuj się z Monotype.

Uwaga: wytyczne dotyczące stylu i tonu oraz tekstu interfejsu użytkownika są prezentowane w oddzielnych artykułach.

Pojęcia dotyczące projektowania

Czcionki, kroje typów, rozmiary punktów i atrybuty

W tradycyjnej typografii czcionka opisuje kombinację kroju typów, rozmiaru punktu i atrybutów. Czcionka jest wyglądem czcionki. Segoe UI, Tahoma, Verdana i Arial to wszystkie kroje typów. Rozmiar punktu odnosi się do rozmiaru czcionki mierzonej od góry rosnąco do dołu malejących, pomniejszonego o odstęp wewnętrzny (nazywany wiodącym). Punkt wynosi około 1/72 cala. Na koniec czcionka może mieć atrybuty pogrubienia lub kursywy.

Nieformalnie ludzie często używają czcionki zamiast kroju typów, jak pokazano w tym artykule, ale technicznie interfejs użytkownika Segoe jest czcionką, a nie czcionką. Każda kombinacja atrybutów to unikatowa czcionka (na przykład zwykły interfejs użytkownika Segoe 9 punktów, pogrubienie 10 punktów interfejsu użytkownika Segoe itd.).

Serif i sans serif

Kroje typów są serif lub sans serif. Serif odnosi się do małych zakrętów, które często kończą pociągnięcia liter w czcionki. Typface sans serif nie ma serifs.

Czytelnicy zazwyczaj preferują czcionki serif używane jako tekst treści w dokumencie. Serifs zapewniają poczucie formalności i elegancji do dokumentu. W przypadku tekstu interfejsu użytkownika potrzeba czystego wyglądu i niższej rozdzielczości monitorów komputerów sprawia, że sans serif typefaces jest lepszy wybór.

Kontrast

Tekst jest najłatwiejszy do odczytania, gdy istnieje duża różnica między luminancją tekstu a tłem. tekst na białym tle daje najwyższy kontrast ciemny tekst na bardzo jasnym tle może również zapewnić duży kontrast. Ta kombinacja jest najlepsza w przypadku podstawowych powierzchni interfejsu użytkownika.

Jasny tekst na ciemnym tle oferuje dobry kontrast, ale nie tak dobry, jak ciemny tekst na jasnym tle. Ta kombinacja sprawdza się dobrze w przypadku pomocniczych powierzchni interfejsu użytkownika, takich jak okienka zadań Eksploratora, które mają zostać odcięcie nacisku względem podstawowych powierzchni interfejsu użytkownika.

Jeśli chcesz upewnić się, że użytkownicy czytają tekst, użyj ciemnego tekstu na jasnym tle.

Dostępność

Tekst może używać następujących , aby wskazać, jak jest używany:

• Wskaźnik. Wskaźnik I-bar ("wybór tekstu") wskazuje, że tekst jest zaznaczony, podczas gdy strzałka wskazująca lewy wskaźnik ("normalne zaznaczenie") wskazuje, że tekst nie jest.
• Daszek. Gdy tekst ma fokus wejściowy, daszek jest pionowym paskiem wskazującym punkt wstawiania/zaznaczenia w zaznaczonym lub edytowalnym tekście.
• Pudełko. Pole wokół tekstu wskazujące, że można go edytować. Aby zmniejszyć wagę prezentacji, pole może być wyświetlane dynamicznie tylko wtedy, gdy zaznaczony jest tekst edytowalny.
• Kolor pierwszego planu. Jasnoszary oznacza, że tekst jest wyłączony. Kolory inne niż szare, zwłaszcza niebieskie i fioletowe, wskazują, że tekst jest linkiem.
• Kolor tła. Jasnoszary tło słabo sugeruje, że tekst jest tylko do odczytu, ale w praktyce tekst tylko do odczytu może mieć dowolne tło koloru.

Te przystępności cenowe są łączone w następujące znaczenie:

• Edytowalny. Tekst wyświetlany w polu z wskaźnikiem wyboru tekstu, daszkiem (fokusem wejściowym) i zwykle białym tłem.
• Można wybrać tylko do odczytu. Tekst ze wskaźnikiem wyboru i daszkiem (fokus wejściowy).
• Tylko do odczytu, nie można wybrać. Tekst ze wskaźnikiem strzałki.
• Niepełnosprawny. Jasnoszary tekst ze wskaźnikiem strzałki, czasami na szarym tle.

Tekst tylko do odczytu tradycyjnie ma szare tło, ale szare tło nie jest konieczne. W rzeczywistości szare tło może być niepożądane, zwłaszcza w przypadku dużych bloków tekstu, ponieważ sugeruje, że tekst jest wyłączony i zniechęca do czytania.

Ułatwienia dostępu i czcionka systemowa, rozmiary i kolory

Wytyczne dotyczące udostępniania tekstu użytkownikom niepełnosprawnym lub upośledzeniu mogą być sprowadzane do jednej prostej reguły: Przestrzegaj ustawień użytkownika, zawsze używając czcionki systemowej, rozmiarów i kolorów.

Jeśli robisz tylko jedną rzecz...

Należy przestrzegać ustawień użytkownika, zawsze używając czcionki systemowej, rozmiarów i kolorów.

Deweloperzy: Z kodu można określić właściwości czcionki systemowej (w tym jej rozmiar) przy użyciu funkcji interfejsu API GetThemeFont. Kolory systemowe można określić przy użyciu funkcji interfejsu API GetThemeSysColor.

Ponieważ nie można założyć żadnych założeń dotyczących ustawień motywu systemowego użytkowników, należy wykonać następujące czynności:

• Zawsze bazuj kolory czcionek i tła poza kolory motywu systemowego. Nigdy nie należy tworzyć własnych kolorów na podstawie stałych wartości RGB (czerwony, zielony, niebieski).
• Zawsze dopasuj kolory tekstu systemowego do odpowiednich kolorów tła. Jeśli na przykład wybierzesz COLOR_STATICTEXT dla koloru tekstu, musisz również wybrać COLOR_STATIC dla koloru tła.
• Zawsze twórz nowe czcionki na podstawie proporcjonalnych odmian czcionki systemowej. Biorąc pod uwagę metryki czcionek systemowych, można tworzyć pogrubienie, kursywę, większe i mniejsze odmiany.

Prostym sposobem zapewnienia, że program szanuje ustawienia użytkowników, jest przetestowanie przy użyciu innego rozmiaru czcionki i schematu kolorów o wysokim kontraście. Cały tekst powinien być poprawnie zmieniany i wyświetlany w wybranym schemacie kolorów.

Wzorce użycia

Tekst zawiera kilka wzorców użycia:

Zwyczaj	Opis
tekst paska tytułu Tekst na pasku tytułu, który identyfikuje okno.
Główne instrukcje Tekst wyjaśniający, co należy zrobić na stronie, oknie lub w oknie dialogowym.
instrukcje pomocnicze Tekst uzupełniający wyjaśniający, co należy zrobić na stronie, oknie lub w oknie dialogowym.
normalny tekst Zwykły (tylko do odczytu) tekst wyświetlany w interfejsie użytkownika.
podkreślony tekst Tekst pogrubiony umożliwia łatwiejsze analizowanie tekstu i zwracanie uwagi na tekst, który użytkownicy muszą odczytać. Tekst kursywy służy do odwoływania się do tekstu dosłownie (zamiast cudzysłowów) i do wyróżniania określonych wyrazów.
edytowalny tekst Tekst, który użytkownicy mogą edytować, jest wyświetlany w polu. aby zmniejszyć wagę prezentacji, pole może być wyświetlane tylko wtedy, gdy zaznaczony jest tekst edytowalny.
wyłączone tekstu Tekst, który nie ma zastosowania do bieżącego kontekstu, na przykład etykiety dla wyłączonych kontrolek. wyłączony tekst wskazuje, że użytkownicy (zwykle) nie powinni przeszkadzać podczas odczytywania tekstu.
linki Tekst używany do przechodzenia do innej strony, okna lub tematu pomocy albo inicjowania polecenia.
nagłówka grupy Tekst używany do grupowania elementów w widoku listy.
nazwa pliku Tekst nazwy pliku (tylko w widoku zawartości).
tekst dokumentu Tekst używany w dokumentach (w przeciwieństwie do tekstu interfejsu użytkownika).
nagłówki dokumentów Tekst używany jako nagłówek w dokumencie.

Wytyczne

Czcionki i kolory

• Następujące czcionki i kolory są domyślne dla systemów Windows Vista i Windows 7.

Deseń	Symbol motywu	Czcionka, kolor
	CaptionFont	9 pkt. (#000000) Interfejs użytkownika Segoe
	MainInstruction	12 pkt. niebieski (#003399) Segoe UI
	Polecenie	9 pkt. (#000000) Interfejs użytkownika Segoe
	Tekst treści	9 pkt. (#000000) Interfejs użytkownika Segoe
	Tekst treści	9 pkt. (#000000) Segoe UI, pogrubiony lub kursywa
	Tekst treści	9 pkt. (#000000) Segoe UI, w polu
	Niepełnosprawny	9 pkt. ciemnoszary (#323232) Segoe UI
	HyperLinkText	9 pkt. niebieski (#0066CC) Segoe UI
	Gorący	9 pkt. jasnoniebieski (#3399FF) Segoe UI
		11 pkt. niebieski (#003399) Segoe UI
		11 pkt. (#000000) Interfejs użytkownika Segoe
	(brak)	9 pkt. (#000000) Calibri
	(brak)	17 pkt. (#000000) Calibri

• Wybieranie czcionek i optymalizowanie układów okien na podstawie technologii interfejsu użytkownika i docelowej wersji systemu Windows:

• deweloperzy :
  • W przypadku elementów korzystających z układu stałego (na przykład szablonów okien dialogowych i formularzy WinForms) należy zakoduj odpowiednią czcionkę z poprzedniej tabeli.
  • W przypadku elementów korzystających z dynamicznego układu (takiego jak Windows Presentation Foundation) użyj czcionek motywu. Użyj interfejsów API motywu, takich jak DrawThemeText, aby rysować tekst na podstawie symbolu motywu. Pamiętaj, aby mieć alternatywę opartą na metrykach systemowych, jeśli usługa motywu nie jest uruchomiona.
• W przypadku interfejsu użytkownika Segoe użyj rozmiaru czcionki o rozmiarze 9 punktów lub większym. Czcionka interfejsu użytkownika Segoe jest zoptymalizowana pod kątem tych rozmiarów, dlatego unikaj używania mniejszych rozmiarów.
• Zawsze dopasuj kolory tekstu systemowego do odpowiednich kolorów tła. Jeśli na przykład wybierzesz COLOR_STATICTEXT dla koloru tekstu, musisz również wybrać COLOR_STATIC dla koloru tła.
• Zawsze twórz nowe czcionki na podstawie proporcjonalnych odmian czcionki systemowej. Biorąc pod uwagę metryki czcionek systemowych, można tworzyć pogrubienie, kursywę, większe i mniejsze odmiany.
• Wyświetla duże bloki tekstu tylko do odczytu (na przykład postanowienia licencyjne) na jasnym tle zamiast szarego tła. Szare tła sugerują, że tekst jest wyłączony i zniechęca do czytania.
• rozważ maksymalną długość wiersza wynoszącą 65 znaków, aby tekst był łatwy do odczytania. (Znaki obejmują litery, znaki interpunkcyjne i spacje).

Atrybuty

• Większość tekstu interfejsu użytkownika powinna być prosta bez żadnych atrybutów. Atrybuty mogą być używane w następujący sposób:
  • Śmiały. Użyj w etykietach kontrolek, aby ułatwić analizowanie tekstu. Należy użyć oszczędnie, aby zwrócić uwagę na tekst, który użytkownicy muszą przeczytać. Użycie zbyt dużej pogrubienia zmniejsza jego wpływ.
  • Kursywa. Służy do odwoływania się do tekstu dosłownie zamiast cudzysłowów. Używaj oszczędnie, aby podkreślić określone wyrazy. Służy do monitów w polach tekstowych i edytowalnych list rozwijanych.
  • Pogrubiona kursywa. Nie używaj.
  • Podkreślać. Nie używaj z wyjątkiem linków. Zamiast tego należy użyć kursywy, aby podkreślić.
• Nie wszystkie czcionki obsługują pogrubienie i kursywę, więc nigdy nie powinny mieć kluczowego znaczenia dla zrozumienia tekstu.