it-swarm.asia

Apa warna untuk pesan kesalahan untuk formulir dengan latar belakang merah?

Saya memiliki situs web besar dengan beberapa bentuk. Ada empat warna latar belakang untuk komponen form. Salah satunya adalah pink/red.

Di sini gambar dan pesan kesalahan:

Enter image description here

Saya tidak dapat mengubah warna latar belakang formulir, tetapi saya bebas mengubah gaya pesan (warna latar belakang, warna teks, dll.).

Bagaimana menurut anda? Saya tidak suka merah dengan teks putih. Pesan kesalahan tidak terlalu terlihat, karena latar belakangnya adalah merah . Saya sudah mencoba selama beberapa hari dengan gaya red lainnya, dan beberapa jeruk, tetapi terlihat aneh.

Biru atau hijau latar belakang benar-benar terlihat, tetapi bisa membingungkan. (sukses = hijau, kesalahan = merah)

Bagaimana saya bisa memperbaiki formulir ini?

Maksud saya, saya harus mengubah pesan kesalahan dan jangan menyentuh komponen select.

Beberapa opsi, terinspirasi oleh jawaban Anda:

form-errors

  • 1 adalah arus.
  • 2 terlihat bagus
  • 3 aneh
  • 4 (lebih gelap) dan 5 (lebih terang), serupa, tetapi bayangannya berbeda

Terima kasih atas umpan baliknya !!

56
Baumannzone

Saya akan menggunakan warna yang akan selalu mempertahankan kontras. Saya juga menghindari menjelajah terlalu jauh di luar gaya yang biasanya dikenal pengguna. Karena Anda bekerja dengan gaya yang tidak lazim, jika Anda menyimpang dan menggunakan elemen asing, Anda mungkin berisiko membingungkan persentase pengguna Anda. Inilah yang saya pikir saya sarankan. enter image description here

78
ke11en

Saya akan pergi dengan sesuatu di bawah bayangan latar belakang, tetapi memiliki lebih banyak teks merah dalam peringatan. Anda dapat menambahkan batas di bawah naungan teks untuk membuatnya lebih menonjol sebagai kesalahan.

Picking a lighter shade of the background

68
Connor Wilson

Latar belakang kuning cerah dengan teks hitam akan bekerja dengan baik.

Sesuai dengan skema warna tanda peringatan.

yellow/black warning image

43
danjmorris_

Warna standar untuk pesan kesalahan adalah merah, lihat pertanyaan ini :

Satu poin penting untuk dipahami adalah bahwa menggunakan warna konvensional untuk kesalahan itu penting karena mereka membuat kesalahan lebih terlihat. Pengguna yang terganggu oleh warna pesan kesalahan jauh lebih sedikit masalah daripada pengguna tidak dapat mengisi formulir karena mereka tidak melihat kesalahan. Setidaknya dalam banyak kasus.

Karena merah akan hilang di latar belakang Anda, hal terbaik berikutnya adalah menggunakan kuning dengan simbol kesalahan merah.

Kuning menarik perhatian dan juga memiliki kontras yang sangat bagus dengan latar belakang. Simbol kesalahan merah menyampaikan kepada pengguna bahwa ini adalah pesan kesalahan, karena ini adalah simbol standar yang diterima dengan baik.

enter image description here

23
DesignerAnalyst

Anda dapat mencoba menambahkan batas putih, lalu bermain dengan warna latar belakang.

Satu warna yang berkomunikasi ' ada sesuatu yang salah ' lebih keras dari merah adalah warna kematian, hitam.

Dark red with white border, black with white border

21
enthdegree

Itu mimpi buruk aksesibilitas!

Coba balikkan gaya pesan kesalahan Anda: Teks merah dengan latar belakang putih.

enter image description here

17
Andrew Martin

Membangun dari beberapa jawaban lain: enter image description here

Jangan hanya mengandalkan warna. Menambahkan ikon atau teks atau tekstur tidak hanya membantu orang buta warna, tetapi juga membuat segalanya lebih mudah bagi orang yang sering melihat.

Menggunakan bilah abu-abu gelap atau hitam memberikan kontras yang kuat dengan latar belakang. Ini juga berwarna netral sehingga Anda dapat menempatkan jenis/warna pemberitahuan lainnya di kotak-kotak itu.

Menggunakan warna oranye atau kuning alih-alih merah menghindari terlihat terlalu dekat dengan latar belakang. Dan itu masih memiliki konotasi yang berguna dari tanda-tanda peringatan .

9
PixelSnader

Pertanyaan itu sebenarnya menyediakan banyak pilihan alternatif yang tersedia, tetapi untuk kejelasan saya pikir akan lebih baik untuk merangkum beberapa jawaban yang diberikan:

  • Temukan warna komplementer untuk digunakan yang akan menonjol - ada banyak alat untuk ini, dan Anda juga dapat melihat panduan branding sebagai cek sekunder; ini bisa untuk UI, warna font atau kombinasi keduanya.
  • Buat layer yang berbeda untuk membawa fokus kepada pengguna - contoh terbaik adalah penggunaan bayangan untuk membuat komponen pesan 'pop' keluar dari seluruh antarmuka, sehingga menciptakan efek 3d dalam ruang desain datar
  • Kustomisasi komponen pesan dengan cara yang menciptakan fokus dengan cara yang berbeda dengan antarmuka lainnya; contoh yang diberikan dalam jawaban dengan striping minimal di sisi kiri dengan latar belakang hitam adalah implementasi ide yang bagus
  • Terapkan interaksi atau pola perilak - yang ini berbeda dari yang lain karena ini bukan tentang gaya visual tetapi desain perilaku atau pola, jadi contohnya akan menjadi animasi untuk komponen pesan yang bertahan sedikit lebih lama sehingga lebih mudah untuk diperhatikan, atau membuat komponen persisten yang harus ditutup oleh pengguna, dll.
3
Michael Lai