Bagikan melalui

Bingkai Jendela

  • Artikel

Nota

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kami saat ini .

Sebagian besar program harus menggunakan bingkai jendela standar. Aplikasi imersif dapat memiliki mode layar penuh yang menyembunyikan bingkai jendela. Pertimbangkan untuk menggunakan kaca secara strategis untuk tampilan yang lebih sederhana, lebih ringan, dan lebih kohesif.

Dengan bingkai jendela, pengguna dapat memanipulasi jendela dan melihat judul dan ikon untuk mengidentifikasi kontennya.

cuplikan layar bingkai jendela di sekitar jendela notepad

Bingkai jendela umum.

Catatan: Panduan terkait manajemen jendela dan merek disajikan dalam artikel terpisah.

Konsep desain

Bingkai jendela kaca

Bingkai jendela kaca adalah aspek baru yang mencolok dari estetika Microsoft Windows, yang bertujuan untuk menjadi menarik dan ringan. Bingkai tembus ini memberi jendela tampilan yang terbuka dan kurang mengganggu, membantu pengguna fokus pada konten dan fungsionalitas daripada antarmuka yang mengelilinginya.

cuplikan layar bingkai kaca di sekitar kalkulator

Bingkai jendela kaca.

Anda dapat menggunakan kaca secara strategis di wilayah kecil dalam jendela yang menyentuh bingkai jendela. Wilayah tersebut tampaknya menjadi bagian dari bingkai jendela, meskipun secara teknis mereka adalah bagian dari area klien jendela.

cuplikan layar jendela dengan tepi tembus

Dalam contoh ini, kaca digunakan di area klien untuk membuatnya terlihat seperti bagian dari bingkai.

Bingkai tersembunyi

Terkadang bingkai jendela terbaik tidak ada bingkai sama sekali. Ini sering terjadi untuk jendela utama aplikasi layar penuh imersif yang tidak digunakan bersama dengan program lain, seperti pemutar media, game, dan aplikasi kios.

Penampil konten sering mendapat manfaat dari memiliki opsi untuk menampilkan konten layar penuh. Contohnya termasuk Windows Internet Explorer , Windows Live Photo Gallery, Windows Movie Maker HD, Microsoft PowerPoint, dan Microsoft Word.

cuplikan layar pemutar media dalam tampilan layar penuh

Dalam contoh ini, Windows Media Player dapat menampilkan isinya dalam layar penuh.

Bingkai kustom

Sebagian besar aplikasi Windows harus menggunakan bingkai jendela standar. Namun, untuk aplikasi imersif, layar penuh, berdiri sendiri seperti game dan aplikasi kios, mungkin tepat untuk menggunakan bingkai kustom untuk jendela apa pun yang tidak ditampilkan layar penuh. Motivasi untuk menggunakan bingkai kustom harus memberikan pengalaman keseluruhan nuansa yang unik, bukan hanya untuk branding.

ilustrasi teka-teki gambar acak dan bingkai

Bingkai kustom sesuai untuk aplikasi imersif, layar penuh, mandiri seperti game.

Pedoman

Bingkai jendela

  • Gunakan bingkai jendela standar.

    • Pengecualian : Untuk memberikan nuansa unik pada aplikasi imersif layar penuh dan berdiri sendiri:

      • Pertimbangkan untuk menyembunyikan bingkai jendela jendela jendela utama.

      • Pertimbangkan untuk menggunakan bingkai kustom untuk jendela sekunder .

      • Jika bingkai kustom sesuai, pilih desain yang ringan dan tidak terlalu menarik perhatian pada dirinya sendiri.

        Salah:

        cuplikan layar bingkai yang mengganggu

        Dalam contoh ini, bingkai kustom menarik terlalu banyak perhatian pada dirinya sendiri.

  • Jangan tambahkan kontrol ke bingkai jendela. Letakkan kontrol di dalam jendela sebagai gantinya.

    Salah:

    cuplikan kontrol dalam bingkai jendela

    Benar:

    cuplikan layar kontrol di area klien

    Dalam contoh yang benar, kontrol berada dalam area klien alih-alih bingkai jendela.

Mode layar penuh

  • Untuk program yang memiliki mode layar penuh opsional, untuk mengaktifkan mode layar penuh:

    • Memiliki perintah layar penuh modal di bilah menu atau bilah alat. Saat pengguna mengklik perintah, tampilkan perintah dalam status yang dipilih.

      cuplikan layar jendela dengan item menu layar penuh

      Contoh ini menunjukkan perintah layar penuh bersama dengan kunci pintasan standarnya.

  • Gunakan F11 untuk kunci pintasan layar penuh.

  • Jika ada toolbar dan mode layar penuh yang umum digunakan, juga memiliki tombol toolbar grafis dengan tipsalat layar penuh.

    cuplikan layar layar penuh dan tombol kembali

    Contoh tombol toolbar layar penuh.

  • Untuk kembali dari mode layar penuh:

    • Memiliki perintah layar penuh modal di bilah menu atau bilah alat. Saat pengguna mengklik perintah, tampilkan perintah dalam status dihapus.
    • Gunakan F11 untuk kunci pintasan layar penuh. Jika belum ditetapkan, Esc juga dapat digunakan untuk tujuan ini.

Gelas

Bingkai jendela standar menggunakan kaca secara otomatis di Windows, tetapi Anda juga dapat menggunakan kaca di wilayah yang menyentuh bingkai jendela.

  • Pertimbangkan untuk menggunakan kaca secara strategis di wilayah kecil yang menyentuh bingkai jendela tanpa teks. Melakukannya dapat memberikan program tampilan yang lebih sederhana, lebih ringan, lebih kohesif dengan membuat wilayah tampaknya menjadi bagian dari bingkai.
  • cuplikan layar jendela dengan tepi tembus
  • Dalam contoh ini, kaca memfokuskan perhatian pengguna pada konten alih-alih kontrol.
  • Jangan gunakan kaca dalam situasi di mana latar belakang jendela biasa akan lebih menarik atau lebih mudah digunakan.

Benar:

cuplikan layar jendela dengan empat grafik dan label

Dalam contoh ini, kaca digunakan untuk memberi jendela Alt+Tab tampilan yang ringan. Kaca berfungsi untuk jendela ini karena terdiri dari grafik dan label teks tunggal yang kuat.

Salah:

cuplikan layar jendela dengan dua belas grafik

Dalam contoh yang salah ini, penggunaan kaca mengganggu. Latar belakang jendela biasa akan menjadi pilihan yang lebih baik.