Bayangan dalam Desain UI: Tips dan Praktik Terbaik – Beragampengetahuan

Nuansa membantu meningkatkan tampilan keseluruhan desain. Mereka memberikan kedalaman elemen UI dan hierarki visual, membuat antarmuka lebih realistis dan intuitif. Posting ini menyelam ke dalam bayangan, mengeksplorasi berbagai jenis bayangan, memperkenalkan beberapa teknik untuk melakukan bayangan yang elegan, dan mengajarkan Anda cara membuatnya dalam ara dalam plugin.

Catatan Editor: Penulis memperbarui blog pada 26 Mei 2025 untuk menambahkan bagian baru yang mencakup prinsip -prinsip dasar menggunakan bayangan secara efektif dan memberikan contoh yang lebih relevan.

Kasing Penggunaan Bayangan dalam Desain UI

Dalam desain UI, bayangan lebih dari sekadar dekorasi. Ketika digunakan secara efektif, bayangan membantu membangun hierarki visual, menyampaikan kedalaman dan meningkatkan interaksi pengguna dalam desain. Berikut adalah contoh bagaimana bayangan dapat membantu meningkatkan desain:

Seperti yang Anda lihat, toko e-commerce menggunakan komponen laci yang meluncur dari bagian bawah layar untuk mengungkapkan informasi tambahan (item yang dimiliki pengguna di tas belanja). Perhatikan bagaimana bayangan di bawah laci menciptakan rasa ketinggian, menarik perhatian pengguna dan memisahkannya secara visual dari latar belakang.

Bayangan juga dapat digunakan pada elemen yang dapat diklik, seperti tombol mengirim interaksi kepada pengguna:

Sumber: Ibelick

Jenis Bayangan dalam Desain UI

Dalam desain UI, Anda harus terbiasa dengan dua jenis bayangan utama – tetes dan internal:

Jatuhkan bayangan

Artikel ini berfokus pada bayangan tetes karena cenderung menjadi bayangan yang paling dikenal dan banyak digunakan dalam desain UI. Mereka menciptakan fantasi elemen yang diusulkan dari latar belakang, sehingga memberikan rasa ketinggian yang halus.

Bayangan drop biasanya diterapkan dalam arah yang berlawanan dengan sumber cahaya, menyoroti pemisahan antara elemen dan menciptakan efek tiga dimensi. Setelah aplikasi yang tepat, drop bayangan dapat membantu dengan tampilan yang bersih dan halus.

Bayangan internal

Bayangan dalam berbeda dari bayangan jatuh karena mereka menempatkannya di dalam batas elemen. Mereka membuat tampilan dengan tepi tenggelam ke dalam desain seolah -olah mereka diukir ke dalam desain. Bayangan internal sering digunakan untuk menunjukkan kedalaman dan menekankan struktur internal elemen.

Jenis bayangan lainnya termasuk bayangan teks dan bayangan blur latar belakang. Namun, Anda tidak perlu tahu tentang ini dalam artikel ini, karena mereka mengandalkan branding dan sebenarnya terlalu kontekstual untuk sebagian besar tujuan.

---

---

Apa yang membuat bayangan menciptakan?

Desain secara alami subyektif, jadi mencoba memilih solusi universal dan ramah ukuran untuk mengimplementasikan bayangan bukanlah cara terbaik untuk melakukannya. “Bayangan yang baik” pada akhirnya tergantung pada tujuan keseluruhan desain Anda.

Berita baiknya adalah ada beberapa cara yang dapat Anda gunakan untuk membuat bayangan terlihat lebih elegan. Misalnya, lihat tweet desain ini, yang menarik perhatian orang pada x:

Dalam tweet ini, penulis membuat titik: “Apa yang berbeda dari desainer senior dan desainer junior adalah kelembutan bayangan mereka.” Meskipun saya tidak setuju dengan klaim mereka, saya setuju dengan pesan utama mereka – bayangan lembut dapat disediakan untuk desain yang lebih baik.

Ketika Anda memeriksa bayangan pada tombol lebih dekat, jelas bahwa tombol di sebelah kanan dikaitkan dengan “desainer senior” yang memiliki rasio kontras yang lebih rendah dengan rasio kontras yang lebih rendah dibandingkan dengan “perancang senior” di sebelah kiri.

Dari kedua sampel, Anda dapat menyimpulkan bahwa nilai warna biru (termasuk opacity) dan Shadow memainkan peran besar dalam penampilan dan nuansa secara keseluruhan.

Prinsip dasar menggunakan bayangan secara efektif

Untuk menggunakan bayangan secara efektif, penting untuk memahami apa yang ingin Anda capai dalam desain Anda. Seperti yang disebutkan sebelumnya, Shadow membantu menciptakan kedalamanMendirikan Hirarki visualDan tunjukkan interaktif. Dengan mengingat hal itu, berikut adalah beberapa prinsip dasar yang dapat memandu Anda dalam penggunaan bayangan Anda.

Bayangan berat halus

Melihat kembali perbandingan X antara Bayangan Tombol “SMP” Junior “dan” Advanced “, jelas bahwa warna yang lebih lembut terlihat lebih elegan dan dipoles. Opacity yang lebih rendah dan nilai -nilai Blur yang lebih tinggi sering menghasilkan bayangan yang lebih realistis, terutama pada permukaan yang lebih ringan.

Tetap konsisten

Konsistensi adalah komponen kunci dari desain, dan bayangan tidak terkecuali. Anda harus menyelaraskan arah bayangan dengan nilai x, y, blur dan perbedaan yang konsisten. Membuat komponen atau token bayangan yang dapat digunakan kembali dalam perangkat lunak desain akan membantu melakukan fungsi ini lebih awal.

Cocokkan warna bayangan dengan permukaan

Trik mudah untuk membuat bayangan Anda terlihat nyata adalah menyesuaikannya sesuai dengan latar belakang yang dilemparkannya. Untuk permukaan cahaya, gunakan opacity abu -abu atau hitam yang lebih gelap. Untuk latar belakang berwarna atau gelap, gunakan warna gelap warna permukaan. Anda akan melihat ini untuk saat ini.

Gunakan bayangan untuk memberi sinyal secara interaktif

Anda melihat tombol pemanggilan yang dibayangi dengan contoh sebelumnya yang membuat tombol terlihat seperti permainan dan klik menggoda.

Leverage alat dan plug-in

Ada banyak alat dan plugin ara di luar sana untuk membantu Anda merancang bayangan profesional. Anda dapat menggunakan bayangan yang indah, pembuat bayangan, dan nuansa halus untuk membuat bayangan berlapis dan realistis yang akan memakan waktu.

3 kesalahan umum untuk dihindari

Hindari ketiga kesalahan umum ini untuk berhasil menerapkan bayangan ke dalam desain UI Anda.

1. Penggunaan berlebihan atau penyalahgunaan bayangan

Memiliki terlalu banyak bayangan di satu layar atau menggunakan bayangan yang terlalu kuat dapat membuat UI berisik atau berat. Misalnya:

2. Abaikan konteks permukaan

Menggunakan warna bayangan hitam atau abu -abu yang sama pada warna yang berbeda dapat merusak realisme. Cocokkan bayangan Anda dengan permukaan latar belakang untuk penampilan yang lebih baik.

3. Lewati hierarki

Tidak semua elemen membutuhkan kedalaman bayangan yang sama. Kartu harus memiliki bayangan yang lebih kuat daripada tag kecil. Pikirkan bayangan sebagai bagian dari toolkit hierarki visual, menetapkan kedalaman sesuai dengan kepentingan komponen.

Cara menggunakan bayangan drop dalam Gambar

https://www.youtube.com/watch?v=w5esyq-zhai

Anda dapat menemukan bayangan yang jatuh di ara di bagian bawah panel kanan di bawah kategori efek. Saat membuat bayangan di Figma, Anda dapat dengan tepat mengontrol posisi dan penampilan bayangan dengan beberapa sifat utama. Properti ini meliputi:

• Sumbu x dan y – Karakteristik ini digunakan untuk mengontrol sumber cahaya hipotetis dari desain dengan mendefinisikan posisi horizontal dan vertikal dari bayang -bayang
• Tidak jelas – Atribut buram menentukan kelembutan tepi bayangan, dari kontur tajam hingga memudar. Ini mungkin properti terpenting yang tidak termasuk properti lokasi
• menyebar – Perambatan tidak digunakan sesering sifat lain, tetapi digunakan untuk mengontrol ekspansi atau kontraksi bayangan relatif terhadap batas objek

Untuk membantu Anda menggunakan komponen -komponen ini dalam Gambar, saya menerapkan drop shadow pada komponen kartu di bawah ini. Ini adalah gaya bayangan default untuk buah ara:

Anda mungkin memperhatikan bahwa bayangan default tidak mengesankan. Setidaknya itu tidak memenuhi standar “desainer senior”.

Jadi, Anda mungkin bertanya -tanya, bagaimana cara mendapatkan bayangan jatuh yang lebih halus? Warna terbaik tergantung pada permukaan yang Anda buat untuk itu.

Di permukaan putih

Secara umum, yang terbaik adalah menggunakan warna yang lebih gelap untuk warna permukaan (atau latar belakang) untuk membuat bayangan yang akurat. Saat bayangan dilemparkan ke permukaan apa pun, warna target adalah warna permukaan di bawah komponen. Dalam hal ini, menggunakan permukaan putih putih (abu -abu atau hitam) adalah pilihan terbaik untuk membuat bayangan yang akurat.

Dengan meningkatkan nilai y dan blur, Anda dapat mengimplementasikan bayangan berikut:

Desainer yang berpengalaman akan berpendapat bahwa bayangan ini masih belum cukup halus – itu benar, karena kontras antara bayangan dan permukaannya jelas. Peningkatan nilai blur dan pengurangan opacity dapat membantu menciptakan bayangan lembut:

Ini membantu jika Anda menjaga bayangan konsisten desain Anda. Ini berarti menggunakan sudut sumber cahaya yang sama (menggunakan offset x dan y) dan mempertahankan nilai blur yang konsisten. Anda bahkan dapat menggunakan rasio y untuk blur di semua komponen dalam desain Anda.

Pada permukaan yang gelap atau berwarna -warni

Sangat mudah untuk melemparkan bayangan pada permukaan berwarna atau gelap menggunakan teknik awal. Namun, jika Anda melemparkan bayangan pada permukaan hitam atau dekat -hitam, pilihan yang lebih baik adalah membuat efek cahaya dengan menggunakan warna yang lebih terang dari komponen target – berikut adalah contoh situs web saya chinwike.space: ruang:

Dengan asumsi Anda ingin melemparkan bayangan pada komponen posting blog pada permukaan hijau, Anda dapat menggunakan nada gelap warna.

Mari kita letakkan komponen sebelumnya di permukaan hijau. Berikut adalah dua contoh: satu menggunakan warna hijau yang lebih gelap dan yang lainnya menggunakan warna hitam standar:

Teknik canggih untuk menciptakan bayangan

Saat menerapkan bayangan pada elemen UI, pilihan Anda terbatas, dan bayangan ini memiliki massa pendek dibandingkan dengan yang dihasilkan dalam lingkungan 3D. Namun, ada beberapa teknik atau alat yang dapat Anda gunakan untuk meningkatkan penampilan visual bayangan Anda.

Bayangan berlapis

Bayangan berlapis melibatkan penumpukan beberapa bayangan drop. Teknik ini dapat secara efektif menciptakan bayangan yang lebih rinci daripada yang diizinkan dengan menggunakan hanya satu bayangan.

Lihatlah tombol ini, yang berisi kombinasi bayangan. Pada sumbu x, Anda akan melihat dua bayangan ungu mengintip di setiap sisi, saat pada sumbu y, ada dua warna dengan kuning dan merah.

Penting untuk memperhatikan bagaimana warna berinteraksi ketika bayangan berlapis, terutama saat mengubah opacity. Di sini, nuansa merah dan kuning dicampur untuk menghasilkan jeruk:

Dalam desain di atas, saya menggunakan warna yang berbeda untuk membuat bayangan terlihat. Sekarang, lihat desain yang lebih sederhana. Di sini, bayang -bayang dengan lancar dari langit biru terang ke biru tua yang lebih gelap, membentuk perubahan warna secara bertahap:

Menggunakan plugin ara

Figma Marketplace memiliki beberapa plugin yang dapat membantu Anda membuat bayangan yang indah pada komponen apa pun segera.

Saya menyebutkan bayangan yang indah sebelumnya, dan ini adalah saran pertama saya bahwa plugin sederhana dapat membuat bayangan. Alat ini menyediakan antarmuka intuitif dan memungkinkan Anda untuk memanipulasi sumber cahaya yang dikendalikan dan cor bayangan pada rakitan ke arah yang diinginkan. Kemudian secara otomatis menghasilkan gaya bayangan, biasanya melapisinya untuk menciptakan efek pemolesan:

sebagai kesimpulan

Artikel ini mengeksplorasi peran kunci yang berperan dalam meningkatkan elemen visual antarmuka pengguna. Meskipun desain UI mungkin kompleksitas yang sama dengan media visual lainnya mungkin tidak sama, aplikasi bayangan yang efektif dapat secara signifikan meningkatkan estetika keseluruhan desain. Ketika diterapkan secara strategis, bayangan menciptakan hierarki kedalaman dan visual, yang membantu dengan antarmuka yang lebih realistis dan intuitif.

Judul Gambar Sumber: Iconscout

beragampengetahuan membantu Anda memahami bagaimana pengguna mengalami produk Anda tanpa harus menonton ratusan sesi replay atau berbicara dengan lusinan pelanggan.

Galileo AI Watches’s Meeting dari beragampengetahuan dan belajar tentang umpan balik pengguna, mengotomatiskan bagian pekerjaan Anda yang paling memakan waktu, dan memberi Anda lebih banyak waktu untuk fokus pada desain yang sangat baik.

Lihat bagaimana pilihan desain, interaksi, dan masalah mempengaruhi pengguna Anda – dapatkan demo beragampengetahuan hari ini.