it-swarm.asia

Apa warna yang paling umum untuk menunjukkan bidang input dinonaktifkan?

karena saya telah melalui referensi berbeda pada desain bidang input, saya menyadari bahwa orang cenderung flip-flop dengan latar belakang abu-abu atau putih untuk menunjukkan apakah bidang input diaktifkan atau dinonaktifkan.

Adakah yang tahu di mana saya dapat menemukan informasi lebih lanjut tentang ini?

22
ec1234

Terminologi yang benar adalah Greyout .

Ini menunjukkan kurang pentingnya, relevansi atau prioritas atau perubahan status seperti sesuatu yang dinonaktifkan atau tidak dapat diakses.

Definisi oleh Kamus Oxford :

kata benda

Pemadaman sebagian atau baru mulai dialami oleh seseorang yang mengalami kekuatan akseleratif yang kuat, terutama selama terbang; (lebih umum) penurunan penglihatan atau kesadaran sesaat, atau hilangnya sebagian ingatan.

Asal

1940-an; penggunaan paling awal ditemukan di The Richmond Times-Dispatch. Dari menjadi abu-abu, setelah mati.

Jadi, Kita dapat menyimpulkan bahwa greyout datang sebelum pemadaman, akhir .

39

Jika Anda menggunakan kerangka kerja, pola itu seharusnya ditentukan secara default. Biasa menggunakan abu-abu, sering meredupkan latar belakang dan teks.

Bahkan jika Anda tidak menerapkan kerangka kerja, Anda dapat memasukkan polanya ke dalam aplikasi Anda.

Bootstrap

bagian form menunjukkan elemen yang dinonaktifkan:

enter image description here

Desain material

Mereka memiliki beberapa gaya berbeda input , jadi lihatlah apa yang mungkin cocok dengan aplikasi Anda. Ini adalah bagian Garis Besar Teks :

enter image description here

Dan Bidang teks yang diisi:

enter image description here

26
Mike M

Bidang input yang dinonaktifkan biasanya berwarna abu-abu (teks abu-abu dan latar belakang abu-abu). Tetapi Anda harus berhati-hati dengan rasio kontras dan masalah aksesibilitas lainnya, seperti bekerja dengan pembaca layar.

Artikel tombol yang Dinonaktifkan tidak perlu disedot! , meskipun ini tentang tombol, memiliki beberapa kiat yang bagus yang dapat diterapkan untuk meningkatkan bidang yang dinonaktifkan (Saya mengubahnya untuk diterapkan ke bidang):

  • Dapatkan kontras yang lebih baik dengan menggunakan font yang lebih besar dan/atau warna yang lebih gelap;
  • Berikan teknologi bantuan, seperti pembaca layar, beberapa informasi di lapangan, karena mereka tidak akan membacakan informasi di dalam bidang yang dinonaktifkan (ini sering dilewati).
  • Berikan informasi kepada pengguna saat mereka mengetuk, mengarahkan, atau mengklik bidang yang dinonaktifkan. Atau berikan mereka beberapa isyarat lainnya (mis. Melalui tooltip). Misalnya, Anda bisa memberi mereka penjelasan mengapa bidang ini dinonaktifkan.
8
Aline

Meskipun saya setuju dengan hampir semua orang, Anda dapat melakukan beberapa hal menarik bukan hanya dengan warna, tetapi dengan kontras:

Enabled

Disabled

Tingkat kontras yang lebih rendah akan menyebabkan elemen-elemen tampak memudar, seperti halnya abu-abu dengan latar belakang hitam putih. Menurut pendapat saya, ini membuat elemen UI tampak tidak fokus. Ingatlah bahwa solusi ini mungkin bukan yang paling mudah diakses, itulah sebabnya Anda mungkin perlu mempertimbangkan penggunaan tema.

Selain itu, Anda dapat mempertimbangkan menyembunyikan elemen tersebut sekaligus. Sejauh UX berjalan, ini dapat membantu mengurangi beban kognitif pengguna Anda, membantu mereka menjadi lebih produktif dengan aplikasi Anda. Berhati-hatilah bahwa akan ada kekurangan jika diterapkan dengan buruk. Saya telah melihat beberapa aplikasi yang membuat konten muncul kembali terlambat dan ini cukup menggelegar.

Anda dapat mempelajari lebih lanjut tentang pendekatan kedua dengan membaca terus Panduan Gerak untuk Desain Material

8
Nicholas Miller

Apa yang paling umum warna

Saya akan mengatakan yang paling umum adalah standar browser standar:

Chrome v73

enter image description here

Firefox v66

enter image description here

menggunakan html berikut:

<!DOCTYPE html>
<html lang="en">
  <body>
    <input type="text" value="normal">
    <input disabled type="text" value="disabled">
  </body>
</html>

Browser yang lebih lama

Posting blog ini --- Bidang Formulir Nonaktif Styling memiliki kumpulan contoh standar yang bagus di berbagai browser lama.

Aksesibilitas

Adakah yang tahu di mana saya dapat menemukan informasi lebih lanjut tentang ini?

Tapi ada baiknya mempertimbangkan persyaratan aksesibilitas bidang yang dinonaktifkan, dengan pertanyaan pertama jika Anda bahkan membutuhkannya.

Ini w3c masalah aksesibilitas github memiliki diskusi yang baik tentang berbagai aspek di sekitar input yang dinonaktifkan dan memiliki contoh yang baik untuk mengganti input yang dinonaktifkan dengan hanya teks yang berarti Anda dapat menjaga kontras warna. Perhatikan tombol Ketuk setidaknya 4 untuk melanjutkan .

Sebelum:

enter image description here

Setelah:

enter image description here

3
icc97

Standarnya adalah warna dan terkait perbatasan, tidak terkait latar belakang. Elemen yang dinonaktifkan biasanya digambar dengan teks berwarna abu-abu. Jika elemen dinonaktifkan, itu tidak menanggapi tindakan pengguna, itu tidak dapat difokuskan.

Beberapa desainer/pengembang menggunakan opacity lebih rendah untuk latar belakang/teks untuk menyorot keadaan ini karena kadang-kadang tombol input dengan tipe = "kirim". Juga, jika dalam kondisi normal input juga memiliki latar belakang abu-abu, memiliki latar belakang abu-abu dalam keadaan dinonaktifkan tidak membuat banyak perbedaan, tetapi opacity yang lebih rendah dapat membantu lebih banyak.

0
Madalina Taina