Warna

Color menyediakan cara intuitif untuk mengomunikasikan informasi kepada pengguna di aplikasi Anda: ini dapat digunakan untuk menunjukkan interaktivitas, memberikan umpan balik ke tindakan pengguna, dan memberi antarmuka Anda rasa kelangsungan visual.

Di aplikasi Windows, warna terutama ditentukan oleh warna aksen dan tema. Dalam artikel ini, kita akan membahas bagaimana Anda dapat menggunakan warna di aplikasi Anda, dan cara menggunakan warna aksen dan sumber daya tema untuk membuat aplikasi Windows Anda dapat digunakan dalam konteks tema apa pun.

Prinsip warna

Gunakan warna dengan bermakna. Ketika warna digunakan dengan hemat untuk menyoroti elemen penting, warna dapat membantu membuat antarmuka pengguna yang cair dan intuitif.

Gunakan warna untuk menunjukkan interaktivitas. Ada baiknya memilih satu warna untuk menunjukkan elemen aplikasi Anda yang interaktif. Misalnya, banyak halaman web menggunakan teks biru untuk menunjukkan hyperlink.

Warna adalah pribadi. Di Windows, pengguna dapat memilih warna aksen dan tema terang atau gelap, yang tercermin sepanjang pengalaman mereka. Anda dapat memilih cara menggabungkan warna dan tema aksen pengguna ke dalam aplikasi Anda, mempersonalisasi pengalaman mereka.

Warna adalah budaya. Pertimbangkan bagaimana warna yang Anda gunakan akan ditafsirkan oleh orang-orang dari budaya yang berbeda. Misalnya, dalam beberapa budaya warna biru dikaitkan dengan kebajikan dan perlindungan, sementara pada yang lain mewakili berkabung.

Tema

Aplikasi Windows dapat menggunakan tema aplikasi terang atau gelap. Tema ini memengaruhi warna latar belakang, teks, ikon, dan kontrol umum aplikasi.

Tema cahaya

Tema gelap

Secara default, tema aplikasi Windows Anda adalah preferensi tema pengguna dari Windows Pengaturan atau tema default perangkat. Namun, Anda dapat mengatur tema khusus untuk aplikasi Windows Anda.

Mengubah tema

Anda dapat mengubah tema dengan mengubah properti RequestedTheme di file Anda App.xaml .

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

Menghapus properti RequestedTheme berarti aplikasi Anda akan menggunakan pengaturan sistem pengguna.

Pengguna juga dapat memilih tema kontras tinggi, yang menggunakan palet kecil warna kontras yang membuat antarmuka lebih mudah dilihat. Dalam hal ini, sistem akan mengambil alih RequestedTheme Anda.

Menguji tema

Jika Anda tidak meminta tema untuk aplikasi Anda, pastikan untuk menguji aplikasi Anda dalam tema terang dan gelap untuk memastikan bahwa aplikasi Anda akan dapat dibalik dalam semua kondisi.

Kuas tema

Kontrol umum secara otomatis menggunakan kuas tema untuk menyesuaikan kontras untuk tema terang dan gelap.

Misalnya, berikut adalah ilustrasi tentang bagaimana AutoSuggestBox menggunakan kuas tema:

Tip

Untuk gambaran umum visual kuas tema yang tersedia, lihat aplikasi Galeri WinUI 3: Warna

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Menggunakan kuas tema

Saat membuat templat untuk kontrol kustom, gunakan kuas tema daripada nilai warna kode keras. Dengan cara ini, aplikasi Anda dapat dengan mudah beradaptasi dengan tema apa pun.

Misalnya, templat item ini untuk ListView menunjukkan cara menggunakan kuas tema dalam templat kustom.

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Untuk informasi selengkapnya tentang cara menggunakan kuas tema di aplikasi Anda, lihat Sumber Daya Tema.

Warna aksen

Kontrol umum menggunakan warna aksen untuk menyampaikan informasi status. Secara default, warna aksen adalah SystemAccentColor yang dipilih pengguna di Pengaturan mereka. Namun, Anda juga dapat menyesuaikan warna aksen aplikasi untuk mencerminkan merek Anda.

Mengesampingkan warna aksen

Untuk mengubah warna aksen aplikasi Anda, letakkan kode berikut di app.xaml.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Memilih warna aksen

Jika Anda memilih warna aksen kustom untuk aplikasi Anda, pastikan bahwa teks dan latar belakang yang menggunakan warna aksen memiliki kontras yang memadai untuk keterbacaan yang optimal. Untuk menguji kontras, Anda dapat menggunakan alat pemilih warna di Windows Pengaturan, atau Anda dapat menggunakan alat kontras online ini.

Palet warna aksen

Algoritma warna aksen di shell Windows menghasilkan warna terang dan gelap dari warna aksen.

Nuansa ini dapat diakses sebagai sumber daya tema:

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

Anda juga dapat mengakses palet warna aksen secara terprogram dengan UI Pengaturan. Metode GetColorValue dan enum UIColorType.

Anda dapat menggunakan palet warna aksen untuk tema warna di aplikasi Anda. Di bawah ini adalah contoh bagaimana Anda dapat menggunakan palet warna aksen pada tombol.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

Saat menggunakan teks berwarna pada latar belakang berwarna, pastikan ada cukup kontras antara teks dan latar belakang. Secara default, hyperlink atau hiperteks akan menggunakan warna aksen. Jika Anda menerapkan variasi warna aksen ke latar belakang, Anda harus menggunakan variasi warna aksen asli untuk mengoptimalkan kontras teks berwarna pada latar belakang berwarna.

Bagan di bawah ini menggambarkan contoh berbagai nuansa warna aksen terang/gelap, dan bagaimana jenis berwarna dapat diterapkan pada permukaan berwarna.

Untuk informasi selengkapnya tentang kontrol gaya, lihat gaya XAML.

API Warna

Ada beberapa API yang dapat digunakan untuk menambahkan warna ke aplikasi Anda. Pertama, kelas Warna , yang mengimplementasikan daftar besar warna yang telah ditentukan sebelumnya. Ini dapat diakses secara otomatis dengan properti XAML. Dalam contoh di bawah ini, kami membuat tombol dan mengatur properti warna latar belakang dan latar depan ke anggota kelas Warna .

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

Anda dapat membuat warna Anda sendiri dari nilai RGB atau hex menggunakan struktur Warna di XAML.

<Color x:Key="LightBlue">#FF36C0FF</Color>

Anda juga dapat membuat warna yang sama dalam kode dengan menggunakan metode FromArgb .

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

Huruf "Argb" adalah singkatan dari Alfa (keburaman), Merah, Hijau, dan Biru, yang merupakan empat komponen warna. Setiap argumen dapat berkisar dari 0 hingga 255. Anda dapat memilih untuk menghilangkan nilai pertama, yang akan memberi Anda keburaman default 255, atau buram 100%.

Catatan

Jika Anda menggunakan C++, Anda harus membuat warna dengan menggunakan kelas ColorHelper.

Penggunaan yang paling umum untuk Warna adalah sebagai argumen untuk SolidColorBrush, yang dapat digunakan untuk melukis elemen UI satu warna solid. Kuas ini umumnya didefinisikan dalam ResourceDictionary, sehingga dapat digunakan kembali untuk beberapa elemen.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Untuk informasi selengkapnya tentang cara menggunakan kuas, lihat sikat XAML.

Kegunaan

Kontras

Pastikan bahwa elemen dan gambar memiliki kontras yang cukup untuk membedakannya, terlepas dari warna atau tema aksennya.

Saat mempertimbangkan warna apa yang akan digunakan dalam aplikasi Anda, aksesibilitas harus menjadi perhatian utama. Gunakan panduan di bawah ini untuk memastikan aplikasi Anda dapat diakses oleh pengguna sebanyak mungkin.

Pencahayaan

Ketahuilah bahwa variasi dalam pencahayaan sekitar dapat memengaruhi kegunaan aplikasi Anda. Misalnya, halaman dengan latar belakang hitam mungkin tidak dapat dibaca di luar karena sprei layar, sementara halaman dengan latar belakang putih mungkin menyakitkan untuk dilihat di ruangan gelap.

Kelenjar warna

Waspadai bagaimana colorblindness dapat memengaruhi kegunaan aplikasi Anda. Misalnya, pengguna dengan warna merah-hijau akan kesulitan membedakan elemen merah dan hijau satu sama lain. Sekitar 8 persen pria dan 0,5 persen wanita berwarna merah-hijau, jadi hindari menggunakan kombinasi warna ini sebagai pembeda tunggal antara elemen aplikasi.

Terkait

• Gaya XAML
• Sumber Daya Tema XAML
• Galeri WinUI 3 - Warna