Navigasi fokus untuk keyboard, gamepad, remote control, dan alat aksesibilitas

  • Artikel

Keyboard, jarak jauh, dan D-pad

Gunakan navigasi fokus untuk memberikan pengalaman interaksi yang komprehensif dan konsisten di aplikasi Windows dan kontrol kustom untuk pengguna daya keyboard, penyandang disabilitas dan persyaratan aksesibilitas lainnya, serta pengalaman 10 kaki layar televisi dan Xbox One.

Gambaran Umum

Navigasi fokus mengacu pada mekanisme yang mendasar yang memungkinkan pengguna menavigasi dan berinteraksi dengan UI aplikasi Windows menggunakan keyboard, gamepad, atau remote control.

Catatan

Perangkat input biasanya diklasifikasikan sebagai perangkat penunjuk, seperti sentuhan, touchpad, pena, dan mouse, dan perangkat non-pointing, seperti keyboard, gamepad, dan remote control.

Topik ini menjelaskan cara mengoptimalkan aplikasi Windows dan membangun pengalaman interaksi kustom untuk pengguna yang mengandalkan jenis input yang tidak menunjuk.

Meskipun kami fokus pada input keyboard untuk kontrol kustom di aplikasi Windows pada PC, pengalaman keyboard yang dirancang dengan baik juga penting untuk keyboard perangkat lunak seperti keyboard sentuh dan Keyboard Layar (OSK), mendukung alat aksesibilitas seperti Windows Narrator, dan mendukung pengalaman 10 kaki.

Lihat Menangani input pointer untuk panduan tentang membangun pengalaman kustom di aplikasi Windows untuk menunjuk perangkat.

Untuk informasi umum selengkapnya tentang membangun aplikasi dan pengalaman untuk keyboard, lihat Interaksi Keyboard.

Panduan Umum

Hanya elemen UI yang memerlukan interaksi pengguna yang harus mendukung navigasi fokus, elemen yang tidak memerlukan tindakan, seperti gambar statis, tidak memerlukan fokus keyboard. Pembaca layar dan alat aksesibilitas serupa masih mengumumkan elemen statis ini, bahkan ketika tidak disertakan dalam navigasi fokus.

Penting untuk diingat bahwa tidak seperti menavigasi dengan perangkat penunjuk seperti mouse atau sentuhan, navigasi fokus bersifat linier. Saat menerapkan navigasi fokus, pertimbangkan bagaimana pengguna akan berinteraksi dengan aplikasi Anda dan apa navigasi logisnya. Dalam kebanyakan kasus, kami merekomendasikan perilaku navigasi fokus kustom mengikuti pola bacaan pilihan budaya pengguna.

Beberapa pertimbangan navigasi fokus lainnya meliputi:

  • Apakah kontrol dikelompokkan secara logis?
  • Apakah ada kelompok kontrol dengan kepentingan yang lebih besar?
    • Jika ya, apakah grup tersebut berisi sub-grup?
  • Apakah tata letak memerlukan navigasi arah kustom (tombol panah) dan urutan tab?

Perangkat Lunak Rekayasa untuk Aksesibilitas eBook memiliki bab yang sangat baik tentang Merancang Hierarki Logis.

Navigasi arah 2D untuk keyboard

Wilayah navigasi dalam 2D kontrol, atau grup kontrol, disebut sebagai "area arah". Saat fokus bergeser ke objek ini, tombol panah keyboard (kiri, kanan, atas, dan bawah) dapat digunakan untuk menavigasi antara elemen turunan dalam area arah.

area arah2D Wilayah navigasi dalam, atau area arah, dari grup kontrol

Anda dapat menggunakan properti XYFocusKeyboardNavigation (yang memiliki kemungkinan nilai Otomatis, Diaktifkan, atau Dinonaktifkan) untuk mengelola navigasi dalam 2D dengan tombol panah keyboard.

Catatan

Urutan tab tidak terpengaruh oleh properti ini. Untuk menghindari pengalaman navigasi yang membingungkan, kami menyarankan agar elemen anak dari area arah tidak ditentukan secara eksplisit dalam urutan navigasi tab aplikasi Anda. Lihat properti UIElement.TabFocusNavigation dan TabIndex untuk detail selengkapnya tentang perilaku tab untuk elemen.

Otomatis (perilaku default)

Saat diatur ke Otomatis, perilaku navigasi arah ditentukan oleh leluhur elemen, atau hierarki pewarisan. Jika semua leluhur berada dalam mode default (diatur ke Otomatis), navigasi arah dengan keyboard tidak didukung.

Nonaktif

Atur XYFocusKeyboardNavigation ke Dinonaktifkan untuk memblokir navigasi arah ke kontrol dan elemen turunannya.

Perilaku XYFocusKeyboardNavigation yang dinonaktifkan perilakuXYFocusKeyboardNavigation dinonaktifkan

Dalam contoh ini, StackPanel utama (ContainerPrimary) memiliki XYFocusKeyboardNavigation yang diatur ke Diaktifkan. Semua elemen anak mewarisi pengaturan ini, dan dapat dinavigasi dengan tombol panah. Namun, elemen B3 dan B4 berada di StackPanel sekunder (ContainerSecondary) dengan XYFocusKeyboardNavigation diatur ke Dinonaktifkan, yang menggantikan kontainer utama dan menonaktifkan navigasi kunci panah ke dirinya sendiri dan di antara elemen turunannya.

<Grid 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="75"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
                Grid.Row="0" 
                FontWeight="ExtraBold" 
                HorizontalTextAlignment="Center"
                TextWrapping="Wrap" 
                Padding="10" />
    <StackPanel Name="ContainerPrimary" 
                XYFocusKeyboardNavigation="Enabled" 
                KeyDown="ContainerPrimary_KeyDown" 
                Orientation="Horizontal" 
                BorderBrush="Green" 
                BorderThickness="2" 
                Grid.Row="1" 
                Padding="10" 
                MaxWidth="200">
        <Button Name="B1" 
                Content="B1" 
                GettingFocus="Btn_GettingFocus" />
        <Button Name="B2" 
                Content="B2" 
                GettingFocus="Btn_GettingFocus" />
        <StackPanel Name="ContainerSecondary" 
                    XYFocusKeyboardNavigation="Disabled" 
                    Orientation="Horizontal" 
                    BorderBrush="Red" 
                    BorderThickness="2">
            <Button Name="B3" 
                    Content="B3" 
                    GettingFocus="Btn_GettingFocus" />
            <Button Name="B4" 
                    Content="B4" 
                    GettingFocus="Btn_GettingFocus" />
        </StackPanel>
    </StackPanel>
</Grid>

Aktif

Atur XYFocusKeyboardNavigation ke Diaktifkan untuk mendukung navigasi arah 2D ke kontrol dan masing-masing objek anak UIElement-nya.

Saat diatur, navigasi dengan tombol panah dibatasi untuk elemen di dalam area arah. Navigasi tab tidak terpengaruh, karena semua kontrol tetap dapat diakses melalui hierarki urutan tabnya.

Perilaku XYFocusKeyboardNavigation diaktifkanperilaku XYFocusKeyboardNavigation diaktifkan

Dalam contoh ini, StackPanel utama (ContainerPrimary) memiliki XYFocusKeyboardNavigation yang diatur ke Diaktifkan. Semua elemen anak mewarisi pengaturan ini, dan dapat dinavigasi dengan tombol panah. Elemen B3 dan B4 berada di StackPanel sekunder (ContainerSecondary) di mana XYFocusKeyboardNavigation tidak diatur, yang kemudian mewarisi pengaturan kontainer utama. Elemen B5 tidak berada dalam area arah yang dinyatakan, dan tidak mendukung navigasi tombol panah tetapi mendukung perilaku navigasi tab standar.

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0"
               FontWeight="ExtraBold"
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap"
               Padding="10" />
    <StackPanel Grid.Row="1"
                Orientation="Horizontal"
                HorizontalAlignment="Center">
        <StackPanel Name="ContainerPrimary"
                    XYFocusKeyboardNavigation="Enabled"
                    KeyDown="ContainerPrimary_KeyDown"
                    Orientation="Horizontal"
                    BorderBrush="Green"
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B1"
                    Content="B1"
                    GettingFocus="Btn_GettingFocus" Margin="5" />
            <Button Name="B2"
                    Content="B2"
                    GettingFocus="Btn_GettingFocus" />
            <StackPanel Name="ContainerSecondary"
                        Orientation="Horizontal"
                        BorderBrush="Red"
                        BorderThickness="2"
                        Margin="5">
                <Button Name="B3"
                        Content="B3"
                        GettingFocus="Btn_GettingFocus"
                        Margin="5" />
                <Button Name="B4"
                        Content="B4"
                        GettingFocus="Btn_GettingFocus"
                        Margin="5" />
            </StackPanel>
        </StackPanel>
        <Button Name="B5"
                Content="B5"
                GettingFocus="Btn_GettingFocus"
                Margin="5" />
    </StackPanel>
</Grid>

Anda dapat memiliki beberapa tingkat area arah berlapis. Jika semua elemen induk memiliki XYFocusKeyboardNavigation yang diatur ke Diaktifkan, batas wilayah navigasi dalam diabaikan.

Berikut adalah contoh dua area arah berlapis dalam elemen yang tidak secara eksplisit mendukung navigasi arah 2D. Dalam hal ini, navigasi arah tidak didukung antara dua area berlapis.

XYFocusKeyboardNavigation diaktifkan dan perilaku berlapisXYFocusKeyboardNavigation diaktifkan dan perilaku berlapis

Berikut adalah contoh yang lebih kompleks dari tiga area arah berlapis di mana:

  • Ketika B1 memiliki fokus, hanya B5 yang dapat dinavigasi ke (dan sebaliknya) karena ada batas area arah di mana XYFocusKeyboardNavigation diatur ke Dinonaktifkan, membuat B2, B3, dan B4 tidak dapat dijangkau dengan tombol panah
  • Ketika B2 memiliki fokus, hanya B3 yang dapat dinavigasi ke (dan sebaliknya) karena batas area arah mencegah navigasi tombol panah ke B1, B4, dan B5
  • Ketika B4 memiliki fokus, tombol Tab harus digunakan untuk menavigasi antar kontrol

XYFocusKeyboardNavigation diaktifkan dan perilaku berlapis yang kompleks

XYFocusKeyboardNavigation diaktifkan dan perilaku berlapis yang kompleks

Navigasi tab

Meskipun tombol panah dapat digunakan untuk navigasi arah 2D dengan kontrol, atau grup kontrol, tombol Tab dapat digunakan untuk menavigasi di antara semua kontrol dalam aplikasi Windows.

Semua kontrol interaktif mendukung navigasi tombol Tab secara default (properti IsEnabled dan IsTabStopbenar), dengan urutan tab logis yang berasal dari tata letak kontrol di aplikasi Anda. Namun, urutan default tidak selalu sesuai dengan urutan visual. Posisi tampilan aktual mungkin bergantung pada kontainer tata letak induk dan properti tertentu yang dapat Anda atur pada elemen anak untuk memengaruhi tata letak.

Hindari urutan tab kustom yang membuat fokus melompat-lompat di aplikasi Anda. Misalnya, daftar kontrol dalam formulir harus memiliki urutan tab yang mengalir dari atas ke bawah dan kiri ke kanan (tergantung lokal).

Di bagian ini kami menjelaskan bagaimana urutan tab ini dapat sepenuhnya disesuaikan agar sesuai dengan aplikasi Anda.

Mengatur perilaku navigasi tab

Properti TabFocusNavigationUIElement menentukan perilaku navigasi tab untuk seluruh pohon objeknya (atau area arah).

Catatan

Gunakan properti ini alih-alih properti Control.TabNavigation untuk objek yang tidak menggunakan ControlTemplate untuk menentukan tampilannya.

Seperti yang kami sebutkan di bagian sebelumnya, untuk menghindari pengalaman navigasi yang membingungkan, kami menyarankan agar elemen anak dari area arah tidak ditentukan secara eksplisit dalam urutan navigasi tab aplikasi Anda. Lihat UIElement.TabFocusNavigation dan properti TabIndex untuk detail selengkapnya tentang perilaku tab untuk elemen.

Untuk versi yang lebih lama dari Windows 10 Creators Update (build 10.0.15063), pengaturan tab terbatas pada objek ControlTemplate. Untuk informasi selengkapnya, lihat Control.TabNavigation.

TabFocusNavigation memiliki nilai jenis KeyboardNavigationMode dengan nilai yang mungkin berikut (perhatikan bahwa contoh ini bukan grup kontrol kustom dan tidak memerlukan navigasi dalam dengan tombol panah):

  • Indeks tab lokal (default) dikenali pada subtree lokal di dalam kontainer. Untuk contoh ini, urutan tab adalah B1, B2, B3, B4, B5, B6, B7, B1.

    Perilaku navigasi tab

    Perilaku navigasi tab "Lokal"

  • Setelah Kontainer dan semua elemen anak menerima fokus sekali. Untuk contoh ini, urutan tab adalah B1, B2, B7, B1 (navigasi dalam dengan tombol panah juga ditunjukkan).

    Perilaku navigasi tab

    Perilaku navigasi tab "Sekali"

  • Siklus
    Fokus kembali ke elemen awal yang dapat difokuskan di dalam kontainer. Untuk contoh ini, urutan tab adalah B1, B2, B3, B4, B5, B6, B2...

    Perilaku navigasi tab

    Perilaku navigasi tab "Siklus"

Berikut adalah kode untuk contoh sebelumnya (dengan TabFocusNavigation ="Cycle").

<Grid 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0" 
               FontWeight="ExtraBold" 
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap" 
               Padding="10" />
    <StackPanel Name="ContainerPrimary"
                KeyDown="Container_KeyDown" 
                Orientation="Horizontal" 
                HorizontalAlignment="Center"
                BorderBrush="Green" 
                BorderThickness="2" 
                Grid.Row="1" 
                Padding="10" 
                MaxWidth="200">
        <Button Name="B1" 
                Content="B1" 
                GettingFocus="Btn_GettingFocus" 
                Margin="5"/>
        <StackPanel Name="ContainerSecondary" 
                    KeyDown="Container_KeyDown"
                    XYFocusKeyboardNavigation="Enabled" 
                    TabFocusNavigation ="Cycle"
                    Orientation="Vertical" 
                    VerticalAlignment="Center"
                    BorderBrush="Red" 
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B2" 
                    Content="B2" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B3" 
                    Content="B3" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B4" 
                    Content="B4" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B5" 
                    Content="B5" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B6" 
                    Content="B6" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
        </StackPanel>
        <Button Name="B7" 
                Content="B7" 
                GettingFocus="Btn_GettingFocus" 
                Margin="5"/>
    </StackPanel>
</Grid>

Tabindex

Gunakan TabIndex untuk menentukan urutan di mana elemen menerima fokus saat pengguna menavigasi melalui kontrol menggunakan tombol Tab. Kontrol dengan indeks tab yang lebih rendah menerima fokus sebelum kontrol dengan indeks yang lebih tinggi.

Ketika kontrol tidak memiliki TabIndex yang ditentukan, kontrol diberi nilai indeks yang lebih tinggi daripada nilai indeks tertinggi saat ini (dan prioritas terendah) dari semua kontrol interaktif di pohon visual, berdasarkan cakupan.

Semua elemen anak dari kontrol dianggap sebagai cakupan, dan jika salah satu elemen ini juga memiliki elemen anak, elemen tersebut dianggap sebagai cakupan lain. Ambiguitas apa pun diselesaikan dengan memilih elemen pertama pada pohon visual cakupan.

Untuk mengecualikan kontrol dari urutan tab, atur properti IsTabStop ke false.

Ganti urutan tab default dengan mengatur properti TabIndex .

Catatan

TabIndex bekerja dengan cara yang sama dengan UIElement.TabFocusNavigation dan Control.TabNavigation.

Di sini, kami menunjukkan bagaimana navigasi fokus dapat dipengaruhi oleh properti TabIndex pada elemen tertentu.

Navigasi tab

Navigasi tab "Lokal" dengan perilaku TabIndex

Dalam contoh sebelumnya, ada dua cakupan:

  • B1, area arah (B2 - B6), dan B7
  • area arah (B2 - B6)

Ketika B3 (di area arah) mendapatkan fokus, cakupan berubah dan navigasi tab ditransfer ke area arah tempat kandidat terbaik untuk fokus berikutnya diidentifikasi. Dalam hal ini, B2 diikuti oleh B4, B5, dan B6. Cakupan kemudian berubah lagi, dan fokus berpindah ke B1.

Berikut adalah kode untuk contoh ini.

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0"
               FontWeight="ExtraBold"
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap"
               Padding="10" />
    <StackPanel Name="ContainerPrimary"
                KeyDown="Container_KeyDown"
                Orientation="Horizontal"
                HorizontalAlignment="Center"
                BorderBrush="Green"
                BorderThickness="2"
                Grid.Row="1"
                Padding="10"
                MaxWidth="200">
        <Button Name="B1"
                Content="B1"
                TabIndex="1"
                ToolTipService.ToolTip="TabIndex = 1"
                GettingFocus="Btn_GettingFocus"
                Margin="5"/>
        <StackPanel Name="ContainerSecondary"
                    KeyDown="Container_KeyDown"
                    TabFocusNavigation ="Local"
                    Orientation="Vertical"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B2"
                    Content="B2"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B3"
                    Content="B3"
                    TabIndex="3"
                    ToolTipService.ToolTip="TabIndex = 3"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B4"
                    Content="B4"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B5"
                    Content="B5"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B6"
                    Content="B6"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
        </StackPanel>
        <Button Name="B7"
                Content="B7"
                TabIndex="2"
                ToolTipService.ToolTip="TabIndex = 2"
                GettingFocus="Btn_GettingFocus"
                Margin="5"/>
    </StackPanel>
</Grid>

Navigasi arah 2D untuk keyboard, gamepad, dan remote control

Jenis input non-pointer seperti keyboard, gamepad, remote control, dan alat aksesibilitas seperti Windows Narrator, berbagi mekanisme umum dan mendasar untuk menavigasi dan berinteraksi dengan UI aplikasi Windows Anda.

Di bagian ini, kami membahas cara menentukan strategi navigasi pilihan dan menyempurnakan navigasi fokus dalam aplikasi Anda melalui serangkaian properti strategi navigasi yang mendukung semua jenis input berbasis fokus dan non-pointer.

Untuk informasi umum selengkapnya tentang membangun aplikasi dan pengalaman untuk Xbox/TV, lihat Interaksi Keyboard, Merancang untuk Xbox dan TV, serta Gamepad dan interaksi kontrol jarak jauh.

Strategi navigasi berlaku untuk keyboard, gamepad, remote control, dan berbagai alat aksesibilitas.

Properti strategi navigasi berikut memungkinkan Anda memengaruhi kontrol mana yang menerima fokus berdasarkan tombol panah, tombol pad arah (D-pad), atau yang ditekan serupa.

  • XYFocusUpNavigationStrategy
  • XYFocusDownNavigationStrategy
  • XYFocusLeftNavigationStrategy
  • XYFocusRightNavigationStrategy

Properti ini memiliki nilai yang mungkin dari Auto (default), NavigationDirectionDistance, Projection, atau RectilinearDistance .

Jika diatur ke Otomatis, perilaku elemen didasarkan pada leluhur elemen. Jika semua elemen diatur ke Otomatis, Proyeksi akan digunakan.

Catatan

Faktor lain, seperti elemen yang sebelumnya berfokus atau kedekatan dengan sumbu arah navigasi, dapat memengaruhi hasilnya.

Proyeksi

Strategi Proyeksi memindahkan fokus ke elemen pertama yang ditemui ketika tepi elemen yang saat ini difokuskan diproyeksikan ke arah navigasi.

Dalam contoh ini, setiap arah navigasi fokus diatur ke Proyeksi. Perhatikan bagaimana fokus bergerak turun dari B1 ke B4, melewati B3. Ini karena, B3 tidak berada di zona proyeksi. Perhatikan juga bagaimana kandidat fokus tidak diidentifikasi saat bergerak ke kiri dari B1. Ini karena posisi B2 relatif terhadap B1 menghilangkan B3 sebagai kandidat. Jika B3 berada di baris yang sama dengan B2, itu akan menjadi kandidat yang layak untuk navigasi kiri. B2 adalah kandidat yang layak karena kedekatannya yang tidak terhalang dengan sumbu arah navigasi.

Strategi navigasi proyeksi

Strategi navigasi proyeksi

Strategi NavigationDirectionDistance memindahkan fokus ke elemen yang paling dekat dengan sumbu arah navigasi.

Tepi rekitori pembatas yang sesuai dengan arah navigasi diperluas dan diproyeksikan untuk mengidentifikasi target kandidat. Elemen pertama yang ditemui diidentifikasi sebagai target. Dalam kasus beberapa kandidat, elemen terdekat diidentifikasi sebagai target. Jika masih ada beberapa kandidat, elemen paling atas/paling kiri diidentifikasi sebagai kandidat.

Strategi navigasi NavigationDirectionDistance

Strategi navigasi NavigationDirectionDistance

RectilinearDistance

Strategi RectilinearDistance memindahkan fokus ke elemen terdekat berdasarkan jarak retilinear 2D (geometri Taxicab).

Jumlah jarak utama dan jarak sekunder ke setiap kandidat potensial digunakan untuk mengidentifikasi kandidat terbaik. Dalam dasi, elemen pertama di sebelah kiri dipilih jika arah yang diminta naik atau turun, dan elemen pertama ke atas dipilih jika arah yang diminta adalah kiri atau kanan.

Strategi navigasi RectilinearDistance

Strategi navigasi RectilinearDistance

Gambar ini menunjukkan bagaimana, ketika B1 memiliki fokus dan ke bawah adalah arah yang diminta, B3 adalah kandidat fokus RectilinearDistance. Ini didasarkan pada kalkualasi berikut untuk contoh ini:

  • Jarak (B1, B3, Turun) adalah 10 + 0 = 10
  • Jarak (B1, B2, Turun) adalah 0 + 40 = 30
  • Jarak (B1, D, Turun) adalah 30 + 0 = 30